/* Dark theme setup + responsive helpers
   - Keeps styling declarative while Tailwind handles utilities.
   - Adds comments describing layout logic and mobile locking. */
:root {
  color-scheme: dark;
}

body {
  background-color: #0f172a;
}

.mobile-locked {
  overflow-x: hidden;
}

/* Lock mobile viewport to prevent horizontal scroll/pinch zoom feelings. */
@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden;
    touch-action: pan-y;
  }
}

/* Table stacking on small screens: turn rows into cards with labels. */
[data-stack-table] {
  width: 100%;
}

@media (max-width: 768px) {
  [data-stack-table] thead {
    display: none;
  }

  [data-stack-table] tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
  }

  [data-stack-table] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
  }

  [data-stack-table] td::before {
    content: attr(data-label);
    color: #a3e635; /* Lime-400 for readability on dark background */
    font-weight: 700;
  }
}

/* Honor JS toggle if viewport changes while media query cache lags. */
[data-stack-table].is-stacked thead {
  display: none;
}

[data-stack-table].is-stacked tr {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
}

[data-stack-table].is-stacked td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

[data-stack-table].is-stacked td::before {
  content: attr(data-label);
  color: #a3e635;
  font-weight: 700;
}

/* Hero banner tweak: ensure text block stays readable on large screens. */
.hero-overlay-block {
  max-width: 36rem;
}

/* Footer logo strip: keep icons consistent */
.payment-icon {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}