/* ==========================================================================
   District Events — booking funnel design system (structure layer)
   --------------------------------------------------------------------------
   This file owns layout, sizing, spacing, states and behaviour. It never
   hardcodes a colour: every visual value comes from a token that the active
   theme file (dark/css/theme.css or light/css/theme.css) supplies. That is
   what makes the two variants swappable with a single <link> change.

   Token contract a theme MUST define — see either theme.css for the values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scale tokens (shared by both themes — density 6/10, "standard")
   -------------------------------------------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --step-fast: 140ms;
  --step: 220ms;
  --step-slow: 340ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --appbar-h: 60px;
  --shell: 1120px;

  /* Seat map geometry. --seat-zoom is driven by the zoom control in JS. */
  --seat-zoom: 1;
  --seat-size: calc(18px * var(--seat-zoom));
  --seat-gap: calc(5px * var(--seat-zoom));
  --seat-block-gap: calc(22px * var(--seat-zoom));
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  /* No horizontal page scroll, ever. Wide things scroll inside their own box. */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--brand);
  text-decoration: none;
}

svg {
  display: block;
  flex: none;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */
.shell {
  width: min(var(--shell), calc(100% - var(--space-5)));
  margin-inline: auto;
}

.shell--narrow {
  --shell: 760px;
}

.page {
  padding-block: var(--space-5) var(--space-8);
}

.page--docked {
  /* Room for the sticky action bar so it never covers the last control.
     --actionbar-h is measured from the real bar in core.js, because its height
     changes with the layout: the bar stacks on narrow screens. */
  padding-bottom: calc(var(--actionbar-h, 120px) + var(--space-6));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--tight {
  gap: var(--space-2);
}

.split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

.split__aside {
  position: sticky;
  top: calc(var(--appbar-h) + var(--space-4));
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__aside {
    position: static;
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   4. App bar
   -------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
  background: var(--appbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.appbar__back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  transition: background var(--step-fast) var(--ease);
}

.appbar__back:hover {
  background: var(--surface-3);
}

.appbar__titles {
  min-width: 0;
  flex: 1;
}

.appbar__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__meta {
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   5. Step rail — one progress model across all four pages
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-1);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.steps::-webkit-scrollbar {
  display: none;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.step__dot {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
}

.step__bar {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
}

.step.is-done {
  color: var(--text-2);
}

.step.is-done .step__dot {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}

.step.is-current {
  color: var(--text);
}

.step.is-current .step__dot {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: var(--glow-brand);
}

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.card__body {
  padding: var(--space-4);
}

.card__body + .card__body {
  border-top: 1px solid var(--line);
}

.card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card__hint {
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.muted {
  color: var(--text-3);
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-line: var(--line-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition:
    transform var(--step-fast) var(--ease),
    background var(--step-fast) var(--ease),
    box-shadow var(--step-fast) var(--ease),
    opacity var(--step-fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--surface-3);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  --btn-line: transparent;
  box-shadow: var(--glow-brand);
}

.btn--primary:hover:not(:disabled) {
  background: var(--brand-2);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-line: var(--line-2);
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-fg: var(--text-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  font-weight: 600;
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 56px;
  font-size: 16px;
}

.btn__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   8. Chips — dates, showtimes, seat pills
   -------------------------------------------------------------------------- */
.chip-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.chip-rail::-webkit-scrollbar {
  height: 4px;
}

.chip-rail::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--r-pill);
}

.chip {
  scroll-snap-align: start;
  flex: none;
  min-width: 62px;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-2);
  transition:
    background var(--step-fast) var(--ease),
    color var(--step-fast) var(--ease),
    border-color var(--step-fast) var(--ease);
}

.chip:hover {
  border-color: var(--brand);
  color: var(--text);
}

.chip__day {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.chip__dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: var(--glow-brand);
}

.chip--time {
  flex-direction: row;
  gap: var(--space-2);
  min-width: 104px;
  font-size: 14px;
  font-weight: 700;
}

.chip--month {
  min-width: 46px;
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  cursor: default;
}

.chip--month:hover {
  border-color: var(--line-2);
  color: var(--text-3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

/* --brand-text, not --brand: a brand-coloured label sitting on a brand-tinted
   wash loses roughly a point of contrast, which is the difference between
   passing and failing AA in the light theme. */
.pill--brand {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-text);
}

.pill--ok {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}

.pill--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   9. Seat map
   -------------------------------------------------------------------------- */
.seatmap {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--seatmap-bg);
  padding: var(--space-4) var(--space-3) var(--space-5);
  overflow: hidden;
}

.seatmap__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.zoom button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  transition: background var(--step-fast) var(--ease);
}

.zoom button:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}

.zoom button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.zoom__level {
  min-width: 46px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* The map itself scrolls; the page never does. */
.seatmap__viewport {
  overflow: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.seatmap__canvas {
  min-width: min-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-4) 0;
}

.stage {
  width: min(520px, 82%);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stage-fg);
  background: var(--stage-bg);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--stage-glow);
}

.zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.zone__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.zone__price {
  font-variant-numeric: tabular-nums;
}

.zone__rows {
  display: flex;
  flex-direction: column;
  gap: var(--seat-gap);
}

.seat-row {
  display: flex;
  align-items: center;
  gap: var(--seat-gap);
}

.seat-row__label {
  width: calc(20px * var(--seat-zoom));
  flex: none;
  text-align: center;
  font-size: calc(10px * var(--seat-zoom));
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.seat-row__block {
  display: flex;
  gap: var(--seat-gap);
}

.seat-row__block + .seat-row__block {
  margin-left: var(--seat-block-gap);
}

.seat {
  width: var(--seat-size);
  height: var(--seat-size);
  flex: none;
  padding: 0;
  border-radius: calc(var(--seat-size) * 0.3);
  border: 1px solid var(--seat-free-line);
  background: var(--seat-free);
  transition:
    transform var(--step-fast) var(--ease),
    background var(--step-fast) var(--ease),
    border-color var(--step-fast) var(--ease),
    box-shadow var(--step-fast) var(--ease);
}

.seat--gap {
  background: none;
  border: 0;
  pointer-events: none;
}

.seat:hover:not(:disabled) {
  transform: scale(1.22);
  border-color: var(--brand);
  z-index: 1;
}

.seat[aria-pressed="true"] {
  background: var(--seat-sel);
  border-color: var(--seat-sel);
  box-shadow: var(--glow-brand);
}

.seat:disabled {
  background: var(--seat-sold);
  border-color: var(--seat-sold-line);
  cursor: not-allowed;
}

.seat--tier-b {
  background: var(--tier-b);
  border-color: var(--tier-b-line);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line-2);
  font-size: 12px;
  color: var(--text-2);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--seat-free-line);
  background: var(--seat-free);
}

.legend__swatch--tier-b {
  background: var(--tier-b);
  border-color: var(--tier-b-line);
}

.legend__swatch--selected {
  background: var(--seat-sel);
  border-color: var(--seat-sel);
}

.legend__swatch--sold {
  background: var(--seat-sold);
  border-color: var(--seat-sold-line);
}

/* --------------------------------------------------------------------------
   10. Sticky action bar
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--actionbar-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sh-3);
}

.actionbar__inner {
  width: min(var(--shell), calc(100% - var(--space-2)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.actionbar__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.actionbar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.actionbar__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.actionbar__sub {
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}

.actionbar .btn {
  flex: none;
  min-width: 190px;
}

@media (max-width: 620px) {
  /* Side by side, a long total and a long button label fight for the same
     ~360px and the amount ends up clipped. Stacking keeps both readable. */
  .actionbar__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .actionbar__copy {
    flex: 1 1 100%;
  }

  .actionbar .btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  .actionbar__value {
    font-size: 20px;
  }
}

/* Seat pills inside the action bar */
.seat-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  max-height: 26px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. Countdown strip
   -------------------------------------------------------------------------- */
.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.timer__value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.timer.is-critical {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid > .field--wide {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: -0.005em;
}

.field__req {
  color: var(--danger);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.field input,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--text);
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  font-weight: 500;
  transition:
    border-color var(--step-fast) var(--ease),
    box-shadow var(--step-fast) var(--ease);
  appearance: none;
}

.field select {
  padding-right: var(--space-6);
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px;
}

.field input::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.field__prefix {
  position: absolute;
  left: var(--space-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  pointer-events: none;
}

.field__prefix + input {
  padding-left: 46px;
}

.field__help {
  font-size: 12px;
  color: var(--text-3);
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field.is-invalid input:focus,
.field.is-invalid select:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field.is-invalid .field__error,
.field__error[data-visible="true"] {
  display: flex;
}

.field.is-invalid .field__help {
  display: none;
}

/* Segmented choice (nationality, payment method groups) */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  transition:
    border-color var(--step-fast) var(--ease),
    background var(--step-fast) var(--ease);
}

.choice:hover {
  border-color: var(--brand);
}

.choice__radio {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-2);
}

.choice[aria-pressed="true"],
.choice[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.choice[aria-pressed="true"] .choice__radio,
.choice[aria-checked="true"] .choice__radio {
  border-color: var(--brand);
}

.choice[aria-pressed="true"] .choice__radio::after,
.choice[aria-checked="true"] .choice__radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
}

@media (max-width: 520px) {
  .segmented {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Checkboxes */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
  cursor: pointer;
  transition: background var(--step-fast) var(--ease);
}

.check:hover {
  background: var(--surface-2);
}

.check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--brand);
}

.check.is-invalid {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   13. Order summary rows
   -------------------------------------------------------------------------- */
.line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: 14px;
  color: var(--text-2);
}

.line__value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.line--total {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
}

.line--total .line__value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ticket {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.ticket__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.ticket__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ticket__amount {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Payment method cards
   -------------------------------------------------------------------------- */
.methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: left;
  transition:
    border-color var(--step-fast) var(--ease),
    background var(--step-fast) var(--ease),
    transform var(--step-fast) var(--ease);
}

.method:hover:not(:disabled) {
  border-color: var(--brand);
}

.method:active:not(:disabled) {
  transform: scale(0.995);
}

.method:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.method__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
}

.method__body {
  flex: 1;
  min-width: 0;
}

.method__name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.method__desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.4;
}

.method[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.method[aria-checked="true"] .method__icon {
  background: var(--brand);
  color: var(--on-brand);
}

.method__badge {
  flex: none;
}

/* --------------------------------------------------------------------------
   15. Status messages / alerts
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.notice__icon {
  flex: none;
  margin-top: 1px;
}

.notice--info {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-text);
}

/* Links inside a tinted notice inherit the notice's colour, which is already
   contrast-checked against that tint; the underline carries the affordance. */
.notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notice--ok {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}

.notice--warn {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
}

.notice--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.notice:empty {
  display: none;
}

.trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}

/* Toast — transient feedback (seat limit, copy confirmations) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  z-index: 80;
  max-width: min(420px, calc(100% - 32px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-pill);
  background: var(--toast-bg);
  color: var(--toast-fg);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--step) var(--ease),
    transform var(--step) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   16. Payment result (callback page)
   -------------------------------------------------------------------------- */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-4);
}

.result__badge {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
}

.result__badge--ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
  box-shadow: var(--glow-ok);
}

.result__badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

.result__badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

.result__badge--pending {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: transparent;
}

.result__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.result__text {
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

.result__actions .btn {
  flex: 1 1 160px;
}

/* Verifying pulse — the only "waiting" motion on the page */
.pulse-ring {
  position: relative;
}

.pulse-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: pulse-out 1800ms var(--ease) infinite;
}

@keyframes pulse-out {
  0% {
    transform: scale(0.86);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

/* The ticket stub shown on a confirmed order */
.stub {
  width: 100%;
  max-width: 460px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.stub__top {
  padding: var(--space-4);
  border-bottom: 1px dashed var(--line-2);
}

.stub__bottom {
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.stub__cell dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.stub__cell dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.stub__cell--wide {
  grid-column: 1 / -1;
}

/* Skeleton placeholder while the status is being fetched */
.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 37%,
    var(--surface-2) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1400ms linear infinite;
  color: transparent !important;
  user-select: none;
}

@keyframes shimmer {
  to {
    background-position: -135% 0;
  }
}

/* --------------------------------------------------------------------------
   17. Entrance motion (Standard tier, 300–450ms, staggered)
   -------------------------------------------------------------------------- */
.reveal {
  animation: reveal var(--step-slow) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --------------------------------------------------------------------------
   18. Reduced motion — honour the OS setting everywhere
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    /* The delay has to go too: .reveal uses fill-mode both, so during a delay
       the element is still held at opacity 0 — a "no motion" preference must
       not mean "content appears late". */
    animation-delay: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .seat:hover:not(:disabled) {
    transform: none;
  }
}