.booking__intro { margin-bottom: var(--sp-6); }

.booking__app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-width: 1080px;
}
.booking__summary { max-width: 560px; transition: opacity 200ms ease; }
.booking__summary[aria-busy="true"] { opacity: 0.55; }

.booking__step h2 { margin-bottom: var(--sp-4); }
.booking__num { color: var(--accent); }

/* A grid, not a scroller - a fortnight is worth seeing at once, and a sideways
   strip hid half of it.

   The column count is fixed per width rather than left to auto-fill, which
   packed as many as would fit and left a ragged last row. Each size shows a
   whole number of full rows, and the tail is trimmed to suit:

     wide    7 x 2 = 14 days
     tablet  6 x 2 = 12
     phone   3 x 4 = 12                                                   */
.datestrip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 900px) {
  .datestrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* display:none takes them out of the accessibility tree too, so nothing is
     announced that cannot be seen. */
  .datestrip__day:nth-child(n + 13) { display: none; }
}

@media (max-width: 620px) {
  .datestrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
}
.datestrip__day {
  padding: var(--sp-3) var(--sp-3);
  text-align: center;
  background: var(--bg-2);
  border: 2px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.stepper__price s { color: var(--ink-faint); margin-right: 3px; }
.stepper__price .promo-star { color: var(--neon-yellow); }
/* Tucked inside the top corner rather than straddling it. */
.datestrip__day .promo-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  line-height: 0;
  pointer-events: none;
}
.datestrip__day[aria-selected="true"] .promo-mark svg { color: #0a0a0f; }

/* Only once the cell is too narrow to hold a centred weekday and the badge
   at once does the label give up its symmetry - above this it stays centred,
   which is how it should read. The badge cannot shrink to make room: any size
   that is not a whole multiple of the 20px grid renders the pixel art fuzzy. */
@media (max-width: 430px) {
  .datestrip__day.has-promo .dow { padding-right: 20px; }
}
.datestrip__day .promo-mark svg {
  display: block;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

/* No border treatment for an offer. Colouring the frame put deal days above
   ordinary open days, which made a perfectly bookable Friday look shut next to
   them. Open versus closed is the distinction the border should carry; the
   badge says the rest. */

.day-promos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.day-promos[hidden] { display:none; }
.day-promos__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--neon-yellow);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--neon-yellow) 9%, transparent);
}
/* The chip is a flex container, so the icon's vertical-align is ignored and
   align-items centres its box instead. That lands it a shade low: the font
   carries more ascender than descender, so the glyphs' optical centre sits
   above the line box's. One pixel up matches them. The gap handles the
   spacing, so the icon's own margin is dropped. */
.day-promos__chip .px-inline {
  margin-right: 0;
  position: relative;
  top: -1px;
}
.day-promos__chip small { color: var(--ink-muted); }
.day-promos__chip--schedule>span { min-width:0; }
.day-promos__chip--schedule strong { display:block; font-weight:600; }
.day-promos__chip--schedule small { display:block; margin-top:3px; }
.day-promos__chip--schedule .px-inline { flex-shrink:0; }
.day-promos__chip--schedule.is-current { border-color:var(--neon-cyan); background:color-mix(in srgb,var(--neon-cyan) 9%,transparent); }
button.day-promos__chip {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  min-height: 44px;
}
button.day-promos__chip:hover { border-color: var(--neon-cyan); }
button.day-promos__chip:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 4px; }
button.day-promos__chip[aria-pressed="true"] {
  border-color: var(--neon-cyan);
  background: color-mix(in srgb, var(--neon-cyan) 16%, transparent);
  box-shadow: 0 0 0 1px var(--neon-cyan);
}
.day-promos__hint { flex: 0 0 100%; width: 100%; max-width: none; margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.day-promos__chip code {
  background: #000;
  color: var(--neon-yellow);
  border: 1px solid var(--neon-yellow);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.datestrip__day .dow { display: block; font-size: var(--text-sm); color: var(--ink-muted); text-transform: uppercase; }
.datestrip__day .dom { display: block; font-family: var(--font-pixel); font-size: var(--pixel-sm); margin-top: var(--sp-1); }
.datestrip__day .mon { display: block; font-size: var(--text-sm); color: var(--ink-muted); }
.datestrip__day:hover { border-color: var(--ink); }
.datestrip__day[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.datestrip__day.is-closed { opacity: 0.4; }
.datestrip__day.is-closed .mon { color: var(--neon-red); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.06em; }
.datestrip__day.is-closed[aria-selected="true"] { opacity: 0.75; }
.datestrip__day.is-party-off { opacity: 0.4; }
.datestrip__day.is-party-off[aria-selected="true"] { opacity: 0.75; }
.datestrip__day[aria-selected="true"] .dow,
.datestrip__day[aria-selected="true"] .dom,
.datestrip__day[aria-selected="true"] .mon { color: var(--accent-ink); }

.booking__more-dates { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.booking__more-dates label { margin: 0; }
.booking__more-dates input { width: auto; }

.slotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.slotgrid__slot {
  padding: var(--sp-3) var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: center;
  background: var(--bg-2);
  border: 2px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}
.slotgrid__slot:hover { border-color: var(--ink); }
.slotgrid__slot.is-offer-match:not([aria-pressed="true"]) {
  border-color: var(--neon-cyan);
  background: color-mix(in srgb, var(--neon-cyan) 12%, var(--bg-2));
  box-shadow: inset 0 -3px 0 var(--neon-cyan);
}
.slotgrid__slot:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 3px; }
.slotgrid__slot[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.slotgrid__slot:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slotgrid__empty { color: var(--ink-muted); grid-column: 1 / -1; }

.party__cap {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-3);
}
.party__full {
  max-width: 460px;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 4px solid var(--accent);
  color: var(--ink);
  font-size: var(--text-sm);
}
.party__full a { color: var(--accent); }
.party { display: grid; gap: var(--sp-3); max-width: 460px; }
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
}
.stepper__label { color: var(--ink); }
.stepper__label small { display: block; color: var(--ink-muted); }
.stepper__controls { display: flex; align-items: center; gap: var(--sp-3); }
.stepper__btn {
  width: 40px;
  height: 40px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  line-height: 1;
  background: var(--bg-2);
  border: 2px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper__qty { font-family: var(--font-pixel); font-size: var(--pixel-sm); min-width: 2ch; text-align: center; }

.party__addons { margin-top: var(--sp-4); max-width: 760px; display: grid; gap: var(--sp-3); }
.merch-addon {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background: var(--bg-1);
  border: 2px solid var(--line-strong);
  border-top: 7px solid var(--neon-magenta);
  box-shadow: var(--shadow-hard);
}
.merch-addon__image { width: 100%; height: 100%; min-height: 250px; object-fit: cover; }
.merch-addon__body { padding: var(--sp-5); }
.merch-addon__eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--neon-cyan);
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.merch-addon h3 { margin-bottom: var(--sp-3); }
.merch-addon p { color: var(--ink-muted); font-size: var(--text-sm); }
.merch-addon__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.merch-addon__buy > strong { color: var(--accent); font-family: var(--font-pixel); font-size: var(--pixel-xs); }
.merch-addon__buy .stepper__controls { flex: 0 0 auto; }
.addon {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}
.addon input { width: 20px; height: 20px; accent-color: var(--neon-magenta); }
.addon small { color: var(--ink-muted); }

@media (max-width: 620px) {
  .merch-addon { grid-template-columns: 1fr; }
  .merch-addon__image { aspect-ratio: 16 / 10; min-height: 0; }
  .merch-addon__buy { align-items: flex-start; flex-direction: column; }
}

.summary__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0; }
.summary__meta dt { color: var(--ink-faint); font-size: var(--text-sm); }
.summary__meta dd { text-align: right; }
.summary__lines { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.summary__line { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-muted); font-size: var(--text-sm); }
.summary__line--promo { color: var(--neon-cyan); }

.summary__line--sub {
  margin-top: -2px;
  padding-left: 1.2em;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

@keyframes code-applied {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
.summary__line--promo, .summary__line--sub { animation: code-applied 220ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .summary__line--promo, .summary__line--sub { animation: none; }
}
.summary__total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
}
.summary__total strong {
  font-family: var(--font-pixel);
  font-size: var(--pixel-md);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.odo {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}
.odo__roll { display: block; }
.odo__roll > span { display: block; height: 1em; line-height: 1; }
.odo__roll--up { animation: odo-up 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.odo__roll--down { animation: odo-down 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes odo-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1em); }
}
@keyframes odo-down {
  0%   { transform: translateY(-1em); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .odo__roll--up, .odo__roll--down { animation: none; }
  .odo__roll--up { transform: translateY(-1em); }
}
.summary__cta { width: 100%; margin-top: var(--sp-4); }
.summary__note { margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--text-sm); }

.booking__status { min-height: 1.5em; color: var(--neon-red); }
.booking__status.is-info { color: var(--ink-muted); }

[data-loading] .datestrip::after {
  content: "Loading…";
  color: var(--ink-faint);
}

.summary__arrive {
  display: block;
  margin-top: 2px;
  color: var(--accent);
  font-size: var(--text-sm);
}

.summary__code { margin: var(--sp-4) 0 var(--sp-3); }
.summary__code label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.summary__code-row { display: flex; gap: var(--sp-2); }
.summary__code input {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3);
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-base);
  text-transform: uppercase;
}
.summary__code input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.summary__code .btn--sm { padding: var(--sp-3) var(--sp-4); font-size: var(--pixel-xs); flex: 0 0 auto; }
.summary__code-msg { margin: var(--sp-2) 0 0; font-size: var(--text-sm); line-height: 1.4; }
.summary__code-msg.is-ok { color: #6ee787; }
.summary__code-msg.is-bad { color: var(--neon-red); }
.summary__code-msg:empty { margin: 0; }


/* ---------- the shared date picker, in the site's language ----------
   The markup comes from the engine's datepicker.js, the same calendar HQ uses.
   Only the skin is ours: HQ is a pale admin panel, this is a dark arcade. */
.bge-dp { position: relative; display: inline-block; }

.bge-dp-trigger {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg-2);
  border: 2px solid var(--line);
  cursor: pointer;
  text-align: left;
}
.bge-dp-trigger:hover { border-color: var(--ink); }
.bge-dp-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bge-dp-trigger.is-empty { color: var(--ink-faint); }

.bge-dp-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 288px;
  padding: var(--sp-3);
  background: var(--bg-1);
  border: 2px solid var(--line-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.bge-dp-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.bge-dp-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--ink);
}
.bge-dp-nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
  cursor: pointer;
}
.bge-dp-nav:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }

.bge-dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.bge-dp-dow span {
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.bge-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bge-dp-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.bge-dp-day:hover:not(:disabled):not(.is-on) { background: rgba(255, 255, 255, 0.1); }
.bge-dp-day.is-empty { pointer-events: none; }
/* Shut, or already gone: shown but plainly not choosable. */
.bge-dp-day.is-off { opacity: 0.28; cursor: not-allowed; text-decoration: line-through; }
.bge-dp-day.is-not-open {
  opacity: 0.58;
  border-color: rgba(101, 226, 241, 0.55);
  border-style: dashed;
  text-decoration: none;
  flex-direction: column;
  line-height: 1;
}
.bge-dp-wait {
  margin-top: 2px;
  font-family: var(--font-pixel);
  font-size: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}
.bge-dp-day.is-quiet { opacity: 0.45; }
.bge-dp-day.is-today .bge-dp-n { font-weight: 700; color: var(--neon-cyan); }
.bge-dp-day.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.bge-dp-day.is-on.is-today .bge-dp-n { color: var(--accent-ink); }

.bge-dp-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.bge-dp-foot > * { flex: 1; }
.bge-dp-today, .bge-dp-clear {
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--line);
  cursor: pointer;
}
.bge-dp-today:hover, .bge-dp-clear:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.bge-dp-today:disabled { opacity: 0.35; cursor: not-allowed; }

.booking__more-dates-label { color: var(--ink-muted); }

/* Scratchcard redemption terms stay beside the ticket controls. */
.stepper:has(.stepper__winner-note) { flex-wrap: wrap; }
.stepper__winner-note { flex-basis: 100%; margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; }
.package-picker label { display: block; margin-bottom: .75rem; }
.package-picker #bge-package-details { max-width: 44rem; line-height: 1.7; margin-bottom: 1rem; }
.package-picker__watcher { line-height: 1.7; }
.package-picker [hidden] { display: none; }

.ticket-options { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.ticket-options legend { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.25rem; }
.ticket-options__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.package-picker .ticket-option { position: relative; display: flex; margin: 0; cursor: pointer; }
.ticket-option input { position: absolute; top: 1rem; right: 1rem; width: 1.1rem; height: 1.1rem; accent-color: var(--neon-yellow); z-index: 1; }
.ticket-option__body { display: flex; flex-direction: column; width: 100%; gap: .75rem; padding: 1.25rem; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--bg-1); transition: border-color 150ms, box-shadow 150ms; font-size: .9375rem; line-height: 1.6; }
.ticket-option__body > strong { padding-right: 1.25rem; font-size: 1rem; color: var(--ink); }
.ticket-option input:checked + .ticket-option__body { border-color: var(--neon-yellow); box-shadow: inset 0 4px 0 var(--neon-yellow); }
.ticket-option input:focus-visible + .ticket-option__body { outline: 3px solid var(--neon-cyan); outline-offset: 3px; }
.ticket-option__price { color: var(--neon-yellow); font-size: 1.75rem; font-weight: 700; line-height: 1.3; }
.ticket-option__price small { font-size: .875rem; color: var(--ink-muted); font-weight: 400; }
.ticket-option__minimum { font-size: .875rem; color: var(--ink-muted); }
.ticket-option__action { color: var(--neon-yellow); margin-top: auto; padding-top: .5rem; font-weight: 700; }
@media (max-width: 520px) { .ticket-options__grid { grid-template-columns: 1fr; } }

.ticket-package-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ticket-options--packages legend { font-size: 1.125rem; }
.ticket-package-options .ticket-option__body { padding: 1rem; font-size: .875rem; }
.ticket-package-options .ticket-option__price { font-size: 1.5rem; }
@media (max-width: 650px) { .ticket-package-options { grid-template-columns: 1fr; } }