/* ============================================================================
   VPSCloudHub - Components theme
   Reusable component styles using the design tokens.
   Built on top of theme/tokens.css and theme/base.css.
   ============================================================================ */

/* ============================================================================
   Buttons (.btn, .btn-*)
   Override Bootstrap .btn to use brand gradient as primary action.
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
}

/* Primary: brand gradient (most important actions, ~10% presence) */
.btn-primary {
  background: var(--gradient-brand) no-repeat;
  background-position: center;
  background-size: calc(100% + 2px) calc(100% + 2px);
  color: var(--color-text-inverse);
  border: 1px solid transparent;
  font-weight: var(--font-weight-semibold);
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-glow-secondary);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary: ghost button on surface (secondary brand color, ~30% presence) */
.btn-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: rgba(56, 189, 248, 0.10);
  color: var(--color-secondary-200);
  border-color: var(--color-secondary-200);
  text-decoration: none;
}

/* Tertiary / accent: gradient border + transparent bg */
.btn-tertiary {
  background: transparent;
  color: var(--color-tertiary);
  border: 1px solid var(--color-tertiary);
}

.btn-tertiary:hover,
.btn-tertiary:focus {
  background: rgba(168, 85, 247, 0.10);
  color: var(--color-tertiary-100);
  text-decoration: none;
}

/* Light: solid surface button (used inside dark hero, footer) */
.btn-light {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-light:hover,
.btn-light:focus {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  text-decoration: none;
}

/* Dark: same as primary but solid for high contrast on light surfaces */
.btn-dark {
  background: var(--color-primary-200);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-dark:hover,
.btn-dark:focus {
  background: var(--color-primary-300);
  color: var(--color-text);
  text-decoration: none;
}

/* Outline primary (no fill, accent border) */
.btn-outline-primary {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgba(56, 189, 248, 0.10);
  color: var(--color-secondary-200);
  text-decoration: none;
}

/* Ghost: subtle, used for tertiary actions (cancel, close) */
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  text-decoration: none;
}

/* Link styled as button */
.btn-link {
  background: transparent;
  color: var(--color-link);
  border: none;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Success / danger / warning */
.btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-success:hover,
.btn-success:focus {
  filter: brightness(1.10);
  text-decoration: none;
  color: var(--color-text-inverse);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text);
  border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus {
  filter: brightness(1.10);
  text-decoration: none;
  color: var(--color-text);
}

.btn-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.btn-warning:hover,
.btn-warning:focus {
  filter: brightness(1.10);
  text-decoration: none;
  color: var(--color-text-inverse);
}

/* Icon-only button */
.btn-icon {
  padding: var(--space-2);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

/* ============================================================================
   Cards (.card, .card-*)
   ============================================================================ */
.card {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.card-elevated {
  background: var(--color-bg-elevated-2);
}

.card-gradient {
  background: var(--gradient-brand-soft);
  border: 1px solid var(--color-border-strong);
}

.card-header,
.card-footer {
  background: transparent;
  border: none;
  padding: var(--space-4) var(--space-6);
  color: var(--color-text);
}

.card-title {
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.card-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.card-body {
  padding: var(--space-2) 0;
}

.card-link {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
}

.card-link:hover {
  color: var(--color-link-hover);
}

/* Pricing card variant */
.card-pricing {
  text-align: center;
  padding: var(--space-8);
}

.card-pricing .card-price {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: var(--space-4) 0;
}

.card-pricing .card-price-period {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.card-pricing-featured {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 1px var(--color-secondary), var(--shadow-md);
}

/* Plans cards: by default the .card-pricing-featured (Silver / Best Offer)
   has a secondary border, the others do not. On hover of any sibling card,
   the .card-pricing-featured loses its border and the hovered card gets
   it instead. Uses the .row parent (since .card-pricing is on each
   individual card, not on a wrapper). */
.row:has(.card-pricing) .card-pricing:not(.card-pricing-featured) {
    border-color: var(--color-border);
}

/* When the user hovers anywhere on the .row containing the 3 cards,
   the featured one loses its accent border. */
.row:has(.card-pricing):hover .card-pricing-featured {
    border-color: var(--color-border);
    box-shadow: none;
}

/* The actually hovered card gets the accent border. */
.row:has(.card-pricing) .card-pricing:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 1px var(--color-secondary), var(--shadow-md);
    transform: translateY(-4px);
}

.vps-plan-icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    font-size: 3rem;
    line-height: 1;
    color: var(--color-secondary);
}

.vps-plan-icon--featured {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.card-plan-name {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: var(--space-2) 0 var(--space-3);
}

/* ============================================================================
   Forms (.form-*, input, select, textarea)
   ============================================================================ */
.form-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  display: block;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}

.form-control:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-secondary);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.20);
  background: var(--color-bg-elevated-2);
}

.form-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-bg-elevated-2);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.form-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.form-check-input:checked {
  background: var(--gradient-brand) no-repeat;
  background-position: center;
  background-size: calc(100% + 2px) calc(100% + 2px);
  border-color: transparent;
}

.form-check-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  margin-left: var(--space-2);
  cursor: pointer;
}

.input-group-text {
  background: var(--color-bg-elevated-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
}

/* Form floating label tweak */
.form-floating > .form-control,
.form-floating > .form-control:focus {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

.form-floating > label {
  color: var(--color-text-muted);
}

/* ============================================================================
   Alerts (.alert, .alert-*)
   ============================================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-base);
  background: var(--color-bg-elevated);
}

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-secondary);
  color: var(--color-text);
}

.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-text);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-text);
}

.alert-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-text);
}

.alert-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.alert-body {
  flex: 1;
}

.alert-dismissible .btn-close {
  filter: invert(1) opacity(0.65);
}

/* ============================================================================
   Badges (.badge, .badge-*)
   ============================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.badge-primary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
}

.badge-secondary {
  background: var(--color-tertiary);
  color: var(--color-text);
}

.badge-gradient {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
}

.badge-soft {
  background: rgba(56, 189, 248, 0.15);
  color: var(--color-secondary-200);
  border: 1px solid rgba(56, 189, 248, 0.30);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.badge-neutral {
  background: var(--color-bg-elevated-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ============================================================================
   Tables (.table, .table-*)
   ============================================================================ */
.table {
  width: 100%;
  color: var(--color-text);
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  color: var(--color-text);
}

.table thead th {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-border-strong);
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--color-bg-elevated);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ============================================================================
   Modals (.modal, .modal-*)
   ============================================================================ */
.modal-content {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.vps-modal-surface {
  display: none;
  box-sizing: border-box;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

.vps-modal-surface.show {
  display: block;
}

.modal-header,
.modal-footer {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
  padding: var(--space-5) var(--space-6);
}

.modal-title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.modal-body {
  padding: var(--space-6);
  color: var(--color-text);
}

.modal-backdrop {
  background: var(--color-bg-overlay);
}

/* ============================================================================
   Navbar (.navbar, .navbar-*)
   ============================================================================ */
.navbar {
  background: rgba(11, 12, 16, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  min-height: var(--navbar-height);
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  text-decoration: none;
}

.navbar-brand img {
  height: 38px;
  width: auto;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--color-text);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast),
              background var(--transition-fast);
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-text);
  background: var(--color-bg-elevated);
  text-decoration: none;
}

.nav-link.active {
  color: var(--color-secondary);
  background: rgba(56, 189, 248, 0.10);
}

.navbar-toggler {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  cursor: pointer;
}

.navbar-toggler:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dropdown-menu {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 180px;
}

.dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--color-bg-elevated-2);
  color: var(--color-secondary);
  text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {
  background: rgba(56, 189, 248, 0.12);
  color: var(--color-secondary);
}

.dropdown-divider {
  border-color: var(--color-border);
  margin: var(--space-2) 0;
}

/* ============================================================================
   Accordion (.accordion, .accordion-*)
   ============================================================================ */
.accordion {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-button {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  padding: var(--space-4) var(--space-5);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.accordion-button:not(.collapsed) {
  background: var(--color-bg-elevated-2);
  color: var(--color-secondary);
  box-shadow: none;
}

.accordion-button::after {
  filter: invert(1) opacity(0.6);
}

.accordion-body {
  background: transparent;
  color: var(--color-text);
  padding: var(--space-5);
}

/* ============================================================================
   List groups (.list-group, .list-group-item)
   ============================================================================ */
.list-group {
  background: transparent;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.list-group-item {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item.active {
  background: rgba(56, 189, 248, 0.12);
  color: var(--color-secondary);
  border-color: var(--color-border);
}

/* Activity items: collapsible rows in the user dashboard.
   Collapsed state shows just the title + date; clicking the
   header expands to reveal type, IP, browser, full datetime. */
.list-group-item.activity-item {
  padding: 0;
  cursor: default;
  transition: background var(--transition-fast);
}

.list-group-item.activity-item:hover {
  background: rgba(56, 189, 248, 0.06);
}

.list-group-item.activity-item .activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
}

.list-group-item.activity-item .activity-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-group-item.activity-item .activity-date {
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
}

.list-group-item.activity-item .activity-details {
  display: none;
  padding: 0 var(--space-5) var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: 0;
  background: var(--color-bg-elevated-2);
}

.list-group-item.activity-item .activity-details.activity-details-open {
  display: block;
  padding-top: var(--space-3);
}

.list-group-item.activity-item .activity-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.list-group-item.activity-item .activity-detail-label {
  color: var(--color-text-muted);
  flex: 0 0 80px;
  font-weight: var(--font-weight-medium);
}

.list-group-item.activity-item .activity-detail-value {
  color: var(--color-text);
  font-family: var(--font-family-mono);
  word-break: break-all;
}

/* ============================================================================
   Tabs (.nav-tabs, .tab-*)
   ============================================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  list-style: none;
  padding: 0;
}

.nav-tabs .nav-link {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
}

.nav-tabs .nav-link:hover {
  color: var(--color-text);
  background: transparent;
  border-bottom-color: var(--color-border-strong);
}

.nav-tabs .nav-link.active {
  color: var(--color-secondary);
  background: transparent;
  border-bottom-color: var(--color-secondary);
}

/* ============================================================================
   Pagination (.pagination, .page-*)
   ============================================================================ */
.pagination {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-item .page-link {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.page-item .page-link:hover {
  background: var(--color-bg-elevated-2);
  color: var(--color-secondary);
  text-decoration: none;
}

.page-item.active .page-link {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  border-color: transparent;
}

/* ============================================================================
   Tooltip / Popover (themed)
   ============================================================================ */
.tooltip-inner {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.popover {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.popover-header {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.popover-body {
  color: var(--color-text);
}

/* ============================================================================
   Spinners / progress (themed)
   ============================================================================ */
.spinner-border,
.spinner-grow {
  color: var(--color-secondary);
}

.progress {
  background: var(--color-bg-elevated-2);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}

.progress-bar {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
}

/* ============================================================================
   Toast (themed, used by moduleToast)
   ============================================================================ */
.toast {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.toast-header {
  background: var(--color-bg-elevated-2);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================================
   Footer (.site-footer)
   ============================================================================ */
.site-footer {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-10) 0 var(--space-6);
  flex-shrink: 0;
}

.site-footer *,
.site-footer p,
.site-footer span,
.site-footer div {
  color: inherit;
}

.site-footer .text-muted {
  color: var(--color-text-muted) !important;
}

.site-footer h5,
.site-footer h6 {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
  display: inline-block;
  padding: var(--space-1) 0;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--color-secondary);
  text-decoration: none;
}

.site-footer .footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ============================================================================
   Section helpers
   ============================================================================ */
.section-hero {
  padding: var(--space-16) 0 var(--space-20);
  text-align: center;
  min-height: 18rem;
  flex: 1 0 auto;
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 100rem),
              var(--color-bg);
}

.section-elevated {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}

/* Promo banner (legacy class used by index.html) */
.promo-banner {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  position: relative;
  padding: var(--space-12) 0;
  overflow: hidden;
}

.promo-banner .container {
  position: relative;
  z-index: 2;
}

.promo-card {
  background: rgba(11, 12, 16, 0.30);
  border: 1px solid rgba(226, 232, 240, 0.20);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-6);
  color: var(--color-text);
  transition: transform var(--transition-base),
              background var(--transition-base);
}

.promo-card:hover {
  transform: translateY(-4px);
  background: rgba(11, 12, 16, 0.40);
}

.promo-code {
  background: rgba(11, 12, 16, 0.55);
  color: var(--color-text);
  border: 1px solid rgba(226, 232, 240, 0.30);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  display: inline-block;
  margin: var(--space-2) 0;
  font-size: var(--font-size-lg);
}

/* Pulse animation for badges / CTAs */
.pulse-animation {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}