/* ============================================
   TALLI PARKING — shared styles (v2, clean)
   Palette: white, ink, thin cobalt-blue accent
   Type: Poiret One (display, sparing) + Jost (body/UI)
   ============================================ */

:root {
  --white: #FFFFFF;
  --offwhite: #FAFAF8;
  --ink: #1A1A1A;
  --blue: #2B4C7E;
  --blue-deep: #1C3255;
  --blue-tint: #EEF2F7;
  --line: #E4E2DC;
  --grey: #7A7A74;
  --orange-flag: #B5502E; /* used once, only for the return-promptly notice */

--display: 'Poiret One', sans-serif;
  --body: 'Jost', 'Work Sans', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The top bar is sticky, so anything scrolled to the top of the viewport
     lands underneath it. Keep a header's height clear so revealed booking
     steps arrive with their heading actually visible. */
  scroll-padding-top: 96px;
}

body {
  font-family: var(--body);
  font-weight: 400;
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.brand-logo { height: 40px; width: auto; }

.topnav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.topnav a { opacity: 0.62; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.topnav a:hover, .topnav a.active { opacity: 1; border-bottom-color: var(--blue); }

@media (max-width: 480px) {
  .topbar-inner { flex-wrap: wrap; gap: 12px; }
  .topnav { gap: 16px; font-size: 0.78rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 24px 48px;
  max-width: 1080px;
  margin: 0 auto;
}
.hero-rule {
  width: 46px;
  height: 1px;
  background: var(--blue);
  margin-bottom: 20px;
}
.eyebrow {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1.08;
  color: var(--ink);
  max-width: 16ch;
}
.hero p {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  max-width: 46ch;
  margin-top: 16px;
  color: #4B4B46;
  font-weight: 300;
}
.hero.compact { padding-bottom: 28px; }
.hero.compact h1 { font-size: clamp(2rem, 6vw, 2.8rem); }

/* ---------- Sections / containers ---------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px;
}
.wrap.tight { padding-top: 8px; padding-bottom: 32px; }

.section-label {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 16px;
  color: var(--ink);
}

h3 {
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

p { max-width: 62ch; font-weight: 300; color: #3A3A36; }
p + p { margin-top: 12px; }

hr.thin {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* ---------- Gate cards (signature element) ---------- */
.gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 760px) {
  .gates { grid-template-columns: 1fr; }
}

.gate-card {
  background: var(--white);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.15s ease;
}
.gate-card:hover { background: var(--blue-tint); }

.gate-num {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--blue);
  line-height: 1;
}
.gate-card h3 { font-size: 1.15rem; font-weight: 500; }
.gate-card p { font-size: 0.92rem; color: var(--grey); }
.gate-go {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  padding: 15px 24px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  width: 100%;
}
@media (min-width: 520px) { .btn { width: auto; } }

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-deep); }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }

/* ---------- Cards / boxes ---------- */
.box {
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px;
}
.box + .box { margin-top: 16px; }

.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange-flag);
  border-radius: 4px;
  padding: 24px 26px;
}
.callout h3 { color: var(--ink); }

/* ---------- Map ---------- */
.map-container iframe {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 4px;
  display: block;
  filter: grayscale(0.15);
}

/* ---------- Photo placeholder ---------- */
.photo-placeholder {
  background: var(--offwhite);
  border: 1px dashed #C7C4BB;
  border-radius: 4px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.88rem;
  text-align: center;
  padding: 20px;
}

/* ---------- Lists ---------- */
.checklist { list-style: none; margin-top: 10px; }
.checklist li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 9px;
  font-size: 0.95rem;
  font-weight: 300;
  color: #3A3A36;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------- Merch grid ---------- */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 20px;
}
.merch-item { background: var(--white); }
.merch-photo {
  background: var(--blue-tint);
  color: var(--blue);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px;
}
.merch-body { padding: 16px 18px; }
.merch-body h3 { font-size: 1rem; }
.merch-body p { font-size: 0.88rem; color: var(--grey); }

/* ---------- Footer ---------- */
footer {
  background: var(--offwhite);
  border-top: 1px solid var(--line);
  color: #55554F;
  padding: 32px 24px 40px;
  margin-top: 40px;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.88rem;
  font-weight: 300;
}
.footer-inner strong { color: var(--ink); font-weight: 500; }
footer a { color: var(--blue); }

/* ---------- Sticky mobile CTA (Getting Here page) ---------- */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
}
.sticky-cta .btn { flex: 1; padding: 13px 10px; font-size: 0.86rem; }
@media (min-width: 760px) { .sticky-cta { display: none; } }


/* Update Merch Grid for Images */
.merch-photo {
  background: var(--blue-tint);
  color: var(--blue);
  height: 180px; /* Increased height for images */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;

   /* ---------- Text Logo Override ---------- */
.brand-logo-text {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: bold; /* Forces the browser to thicken the naturally thin Poiret One */
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1;
}
  padding: 0;
  overflow: hidden;
}

/* ============================================
   BOOKING FLOW
   Three revealed steps on book.html, plus the
   confirmation page. Mobile-first: the cards are
   full-width taps until there's room for a grid.
   ============================================ */

/* Class selectors here out-specify the user-agent [hidden] rule, so state it
   once and loudly — several of these steps are hidden until they're reached. */
[hidden] { display: none !important; }

.bk-flow { margin-top: 8px; }

.bk-step { margin-top: 44px; }
.bk-step:first-child { margin-top: 8px; }

.bk-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.bk-step-num {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blue);
}
.bk-step-head h2 { margin-bottom: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); }

.bk-step-context {
  font-size: 0.9rem;
  color: var(--blue);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.bk-step-note { font-size: 0.9rem; color: var(--grey); margin-bottom: 4px; }

.bk-empty {
  font-size: 0.94rem;
  color: var(--grey);
  padding: 18px 0;
}

/* ---------- Selectable cards ---------- */
.bk-cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 16px;
}
.bk-cards:empty { display: none; border: 0; margin-top: 0; }

.bk-card {
  position: relative;
  display: block;
  background: var(--white);
  padding: 20px 22px 20px 52px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bk-card:hover { background: var(--blue-tint); }

/* The radio itself is the selection indicator — a ring that fills in.
   Keeping a real input keeps keyboard and screen-reader behaviour intact. */
.bk-radio {
  position: absolute;
  left: 20px;
  top: 22px;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #BFBCB4;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  flex: none;
}
.bk-radio:checked {
  border-color: var(--blue);
  border-width: 5px;
}
.bk-radio:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.bk-card:has(.bk-radio:checked) {
  background: var(--blue-tint);
  box-shadow: inset 3px 0 0 var(--blue);
}

.bk-card-body { display: block; }
.bk-card-title {
  display: block;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.bk-card-meta {
  display: block;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 3px;
}

.bk-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.bk-tier-price {
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--blue);
  flex: none;
}

.bk-tier-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.bk-fact {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 4px 9px;
}
.bk-fact-low { color: #8A5A12; background: #FBF3E4; }
.bk-fact-warn { color: var(--orange-flag); background: #FFF4F0; }

.bk-card.is-soldout { cursor: not-allowed; opacity: 0.55; }
.bk-card.is-soldout:hover { background: var(--white); }

.bk-more {
  display: inline-block;
  margin-top: 16px;
  padding: 0 0 3px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--blue);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
}

/* ---------- Summary of what's being bought ---------- */
.bk-summary {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  padding: 18px 22px;
  margin: 18px 0 26px;
}
.bk-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.bk-summary-tier { font-weight: 500; color: var(--blue-deep); }
.bk-summary-price {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blue-deep);
  flex: none;
}
.bk-summary-meta {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--blue);
  margin-top: 5px;
}
.bk-summary-extras {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(43, 76, 126, 0.18);
}
.bk-summary-extra {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--blue-deep);
  margin-top: 4px;
}
.bk-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(43, 76, 126, 0.18);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}
.bk-summary-total strong {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--blue-deep);
}

/* ---------- Form ---------- */
.bk-field { margin-bottom: 18px; }
.bk-field label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px;
}
.bk-optional { text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }

.bk-field input {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 13px 14px;
}
.bk-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 76, 126, 0.12);
}
.bk-hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 6px;
}

.bk-field-row { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .bk-field-row { grid-template-columns: 1fr 1fr; } }


.bk-error {
  background: #FFF4F0;
  border-left: 3px solid var(--orange-flag);
  border-radius: 3px;
  color: var(--orange-flag);
  font-size: 0.92rem;
  font-weight: 400;
  padding: 14px 16px;
  margin-top: 20px;
  max-width: none;
}

.bk-submit { margin-top: 22px; }
.bk-submit:disabled { opacity: 0.6; cursor: wait; }

.bk-fineprint {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 14px;
}
.bk-fineprint a { color: var(--blue); text-decoration: underline; }

/* ============================================
   CONFIRMATION PAGE
   ============================================ */
.cf-wrap { padding-top: 48px; min-height: 50vh; }

.cf-loading { color: var(--grey); font-size: 0.95rem; }

.cf-problem h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  margin-bottom: 14px;
}

.cf-headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.cf-sub { font-size: 1.02rem; color: #4B4B46; }

.cf-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  background: var(--blue-tint);
  border-radius: 3px;
  padding: 12px 18px;
  margin: 26px 0 8px;
}
.cf-ref-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.cf-ref strong {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--blue-deep);
  font-weight: 500;
}

.cf-details {
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.cf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.cf-row-key {
  flex: 0 0 110px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 3px;
}
.cf-row-val { flex: 1 1 200px; font-weight: 400; color: var(--ink); }

.cf-pending {
  font-size: 0.88rem;
  color: var(--grey);
  margin-top: 16px;
}

.cf-next { margin-top: 32px; }

/* ============================================
   GATE SCREEN (admin.html)
   Different job from the rest of the site: one
   hand, outdoors, at night, in a hurry. Bigger
   targets, denser list, darker chrome.
   ============================================ */

.ad-body {
  background: var(--offwhite);
  font-size: 16px; /* never let iOS zoom on focus */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Passphrase ---------- */
.ad-lock {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--blue-deep);
}
.ad-lock-card {
  background: var(--white);
  border-radius: 6px;
  padding: 32px 26px;
  width: 100%;
  max-width: 380px;
}
.ad-lock-card h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  margin-bottom: 6px;
}
.ad-lock-card p { font-size: 0.92rem; color: var(--grey); margin-bottom: 18px; }
.ad-lock-card input {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 16px;
}
.ad-lock-card input:focus { outline: none; border-color: var(--blue); }
.ad-lock-error {
  background: #FFF4F0;
  color: var(--orange-flag);
  font-size: 0.88rem;
  padding: 11px 13px;
  border-radius: 4px;
  margin-bottom: 14px;
}

/* ---------- Header ---------- */
.ad-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--blue-deep);
  color: var(--white);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.ad-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ad-brand {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.ad-brand span { color: #8FB3E0; }
.ad-refresh {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--white);
  font-size: 1.15rem;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
}

.ad-select, .ad-input {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}
.ad-head .ad-select { border-color: transparent; }

/* ---------- Stats ---------- */
.ad-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.ad-stat {
  background: var(--white);
  padding: 14px 10px;
  text-align: center;
}
.ad-stat-num {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--blue-deep);
}
.ad-stat-key {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 3px;
}

.ad-holds {
  background: #FBF3E4;
  color: #8A5A12;
  font-size: 0.84rem;
  padding: 11px 16px;
  max-width: none;
}

/* ---------- Tools ---------- */
.ad-tools {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--offwhite);
  position: sticky;
  /* The header grew a tab strip, and its height moves with the safe-area
     inset and the length of the event name. Measured at runtime rather than
     guessed, so the search box always parks directly under it. */
  top: var(--ad-head-h, 150px);
  z-index: 15;
}
.ad-search { flex: 1; min-width: 0; }
.ad-search {
  font-family: var(--body);
  font-size: 1rem;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}
.ad-search:focus { outline: none; border-color: var(--blue); }
.ad-sell-open {
  flex: none;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0 16px;
  cursor: pointer;
}

/* ---------- The list ---------- */
.ad-list { padding: 0 16px 24px; }
.ad-list[aria-busy="true"] { opacity: 0.5; }

.ad-empty {
  color: var(--grey);
  font-size: 0.92rem;
  padding: 28px 0;
  text-align: center;
}

.ad-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 13px 13px 13px 15px;
  margin-bottom: 8px;
}
.ad-row.is-arrived { opacity: 0.5; }
.ad-row.is-held { border-left: 3px solid #C9942A; }

.ad-row-main { flex: 1; min-width: 0; }
.ad-row-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ad-rego {
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.ad-bay {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 3px 7px;
}
.ad-who {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ad-chip {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 7px;
}
.ad-chip.is-warn { color: var(--orange-flag); background: #FFF4F0; border-color: #F3D9CF; }
.ad-chip.is-cash { color: #8A5A12; background: #FBF3E4; border-color: #EBDCBE; }

.ad-row-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 96px;
}

.ad-move {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--grey);
  border-radius: 4px;
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 7px 4px;
  cursor: pointer;
}
.ad-move:hover { border-color: #C9942A; color: #8A5A12; background: #FBF3E4; }
.ad-move:disabled { opacity: 0.5; }

.ad-tick {
  flex: none;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  border-radius: 4px;
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}
.ad-tick.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ad-tick:disabled { opacity: 0.5; }

.ad-foot {
  text-align: center;
  font-size: 0.78rem;
  color: var(--grey);
  padding-bottom: 24px;
}

/* ---------- Walk-up sheet ---------- */
.ad-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(26, 26, 26, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ad-sheet-card {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  border-radius: 8px 8px 0 0;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  max-height: 92vh;
  overflow-y: auto;
}
.ad-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ad-sheet-head h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 0;
}
.ad-sheet-close {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  padding: 0 6px;
}
.ad-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 14px 0 6px;
}
.ad-label span { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
.ad-sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 300;
  margin-top: 16px;
}
.ad-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.ad-sheet-error {
  background: #FFF4F0;
  color: var(--orange-flag);
  font-size: 0.88rem;
  padding: 11px 13px;
  border-radius: 4px;
  margin-top: 14px;
  max-width: none;
}
.ad-sheet-card .btn { margin-top: 18px; width: 100%; }

/* ---------- Toast ---------- */
.ad-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  background: var(--ink);
  color: var(--white);
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 4px;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.ad-toast.is-good { background: #1F5C3D; }
.ad-toast.is-bad { background: #8C3A1E; }

/* ---------- Fixture list (date-led) ----------
   People choose a night, not an opponent. The date is the anchor, so it gets
   the weight; the fixture reads as the detail beside it. */
.bk-fixtures {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 16px;
}
.bk-fixtures:empty { display: none; border: 0; }
.bk-fixtures .bk-empty { background: var(--white); padding: 22px; margin: 0; }

.bk-fixture {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: 0;
  padding: 16px 20px 16px 46px;
  text-align: left;
  font-family: var(--body);
  cursor: pointer;
  transition: background 0.15s ease;
}
.bk-fixture:hover { background: var(--blue-tint); }
.bk-fixture:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.bk-radio-fixture { top: 50%; margin-top: -9px; }

/* Unsellable fixtures are buttons, not radios — nothing to select, so nothing
   claims the space a radio would take. */
.bk-fixture.is-unsellable { padding-left: 20px; }

.bk-date {
  flex: none;
  width: 52px;
  text-align: center;
  line-height: 1.05;
}
.bk-date-dow {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.bk-date-day {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--blue);
  margin: 1px 0;
}
.bk-date-mon {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.bk-fixture-body { flex: 1; min-width: 0; }
.bk-fixture-tag {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 4px 9px;
}
.bk-fixture.is-unsellable .bk-card-title { color: #4B4B46; }

.bk-fixture:has(.bk-radio:checked) {
  background: var(--blue-tint);
  box-shadow: inset 3px 0 0 var(--blue);
}

/* ---------- Interest sheet ---------- */
.bk-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(26, 26, 26, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 640px) { .bk-sheet { align-items: center; } }

.bk-sheet-card {
  background: var(--white);
  width: 100%;
  max-width: 460px;
  border-radius: 8px 8px 0 0;
  padding: 24px 22px calc(26px + env(safe-area-inset-bottom));
  max-height: 92vh;
  overflow-y: auto;
}
@media (min-width: 640px) { .bk-sheet-card { border-radius: 6px; } }

.bk-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.bk-sheet-head h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 0 0 3px;
}
.bk-sheet-when {
  font-size: 0.86rem;
  color: var(--blue);
  margin: 0;
}
.bk-sheet-close {
  flex: none;
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  padding: 0 4px;
}
.bk-sheet-lead {
  font-size: 0.94rem;
  color: #3A3A36;
  margin-bottom: 20px;
}
.bk-sheet-card .btn { width: 100%; margin-top: 6px; }
.bk-sheet-done {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  color: var(--blue-deep);
  font-size: 0.95rem;
  padding: 16px 18px;
  max-width: none;
}

/* ---------- Configuration check ---------- */
.ad-link {
  background: none; border: none; padding: 0;
  font-family: var(--body); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--blue);
  border-bottom: 1px solid var(--blue);
  cursor: pointer; margin-top: 6px;
}

.ad-check-summary {
  font-size: 0.98rem; font-weight: 400;
  padding: 13px 15px; border-radius: 4px;
  background: var(--offwhite); border-left: 3px solid var(--line);
  max-width: none; margin-bottom: 6px;
}
.ad-check-summary.is-good { background: #EAF3EE; border-left-color: #2F6B4F; color: #23503B; }
.ad-check-summary.is-bad  { background: #FFF4F0; border-left-color: var(--orange-flag); color: var(--orange-flag); }

.ad-check-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
.ad-check-row:last-child { border-bottom: none; }

.ad-check-mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; margin-top: 1px;
}
.ad-check-mark.is-good    { background: #2F6B4F; color: #fff; }
.ad-check-mark.is-bad     { background: var(--orange-flag); color: #fff; }
.ad-check-mark.is-unknown { background: var(--line); color: var(--grey); }

.ad-check-body { flex: 1; min-width: 0; }
.ad-check-name {
  display: block; font-size: 0.92rem; font-weight: 500; color: var(--ink);
}
.ad-check-detail {
  display: block; font-size: 0.86rem; font-weight: 300;
  color: var(--grey); margin-top: 2px;
}
.ad-check-note {
  font-size: 0.8rem; color: var(--grey);
  margin-top: 16px; max-width: none;
}

/* =====================================================================
   Extras — the pre-purchase step on the booking page
   ===================================================================== */
.bk-extras {
  display: grid;
  gap: 10px;
}
.bk-extra {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.bk-extra.is-picked {
  border-color: var(--blue);
  background: var(--blue-tint);
}
.bk-extra-shot {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--offwhite);
}
.bk-extra-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bk-extra-body { flex: 1; min-width: 0; }
.bk-extra-name {
  display: block;
  font-weight: 500;
  color: var(--blue-deep);
  line-height: 1.3;
}
.bk-extra-blurb {
  display: block;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 2px;
}
.bk-extra-price {
  display: block;
  font-size: 0.86rem;
  color: var(--blue);
  margin-top: 4px;
}

/* The stepper. Big enough to hit with a thumb, on a phone, one-handed. */
.bk-step-count,
.ad-step {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}
.bk-count-btn,
.ad-count-btn {
  width: 40px;
  height: 40px;
  flex: none;
  font-family: var(--body);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.bk-count-btn:hover:not(:disabled),
.ad-count-btn:hover:not(:disabled) { border-color: var(--blue); }
.bk-count-btn:disabled,
.ad-count-btn:disabled { opacity: 0.35; cursor: default; }

.bk-count,
.ad-count {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--blue-deep);
}

/* ---------- Extras already paid for, on the confirmation page ---------- */
.cf-extras {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  padding: 16px 20px;
  margin: 20px 0;
}
.cf-extras h3 {
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.cf-extras ul { list-style: none; }
.cf-extras li {
  font-weight: 500;
  color: var(--blue-deep);
  padding: 2px 0;
}
.cf-extras p {
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--blue);
  margin-top: 8px;
}

/* =====================================================================
   Gate screen — tonight's board
   ===================================================================== */
.ad-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.ad-tab {
  flex: 1;
  font-family: var(--body);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  padding: 11px 8px;
  cursor: pointer;
}
.ad-tab.is-on { background: var(--white); color: var(--blue-deep); font-weight: 500; }

/* The one number that answers "where am I at". */
.ad-board {
  background: var(--blue-deep);
  color: var(--white);
  padding: 22px 16px 24px;
}
.ad-board-num {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
}
.ad-board-of {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  margin-left: 8px;
}
.ad-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  margin: 14px 0 8px;
  overflow: hidden;
}
.ad-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #8FB3E0;
  transition: width 0.3s ease;
}
.ad-board-note {
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
}

.ad-section {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--blue-deep);
  padding: 22px 16px 0;
}
.ad-section-note {
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--grey);
  padding: 4px 16px 0;
  max-width: none;
}

/* ---------- Spaces, zone by zone ---------- */
.ad-zones, .ad-prices, .ad-extras, .ad-money { padding: 12px 16px 0; }

.ad-zone, .ad-price {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  margin-bottom: 8px;
}
.ad-zone-head, .ad-price-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ad-zone-name, .ad-price-name {
  font-weight: 500;
  color: var(--blue-deep);
  min-width: 0;
}
.ad-zone-count {
  flex: none;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}
.ad-zone-note, .ad-price-left {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 4px;
}
.ad-zone-actions, .ad-price-actions {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}
.ad-zone-actions .ad-count-btn { flex: 1; }

/* ---------- Prices ---------- */
.ad-price.is-gone { background: var(--offwhite); }
.ad-price.is-gone .ad-price-name { color: var(--grey); }

.ad-price-tag {
  flex: none;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--blue-deep);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--blue);
  padding: 0 2px 2px;
  cursor: pointer;
}
.ad-nudge, .ad-soldout, .ad-hand {
  font-family: var(--body);
  font-size: 0.86rem;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
}
.ad-nudge { flex: none; min-width: 60px; }
.ad-soldout { flex: 1; }
.ad-nudge:hover, .ad-soldout:hover { border-color: var(--blue); }
.ad-soldout.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.ad-price-entry {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ad-price-entry span {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--blue-deep);
}
.ad-price-entry .ad-input { font-size: 1.3rem; }

/* ---------- Extras waiting to be handed over ---------- */
.ad-extra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.ad-extra:last-child { border-bottom: none; }
.ad-extra.is-done { opacity: 0.45; }
.ad-extra-name { font-weight: 500; color: var(--blue-deep); }
.ad-extra-count {
  flex: none;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--grey);
}

/* ---------- Money ---------- */
.ad-money { padding-bottom: 20px; }
.ad-money-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--grey);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.ad-money-row:last-child { border-bottom: none; }
.ad-money-row strong {
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ad-money-row.is-lead { color: var(--blue-deep); }
.ad-money-row.is-lead strong {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--blue-deep);
}

/* ---------- Pre-purchased extras, on the arrivals row ---------- */
.ad-row.has-extras { border-left: 3px solid var(--blue); }

.ad-bag {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.ad-bag-item {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border: 1px solid #D5DFEC;
  border-radius: 3px;
  padding: 3px 8px;
}
.ad-bag-item.is-done {
  color: var(--grey);
  background: var(--offwhite);
  border-color: var(--line);
  text-decoration: line-through;
}
.ad-hand { white-space: nowrap; }
.ad-hand.is-on { color: var(--grey); }

/* ---------- Walk-up: pick a spot ---------- */
.ad-pick { display: grid; gap: 6px; margin-bottom: 16px; }
.ad-pick-opt {
  text-align: left;
  font-family: var(--body);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  cursor: pointer;
}
.ad-pick-opt.is-on { border-color: var(--blue); background: var(--blue-tint); }
.ad-pick-opt.is-gone { opacity: 0.45; cursor: default; }
.ad-pick-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ad-pick-name { font-weight: 500; color: var(--blue-deep); }
.ad-pick-price {
  flex: none;
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--blue-deep);
}
.ad-pick-left {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--grey);
  margin-top: 3px;
}

/* ---------- Walk-up: extras across the bonnet ---------- */
.ad-sell-extras { margin-bottom: 16px; }
.ad-sell-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.ad-sell-extra.is-picked .ad-sell-extra-name {
  font-weight: 500;
  color: var(--blue-deep);
}
.ad-sell-extra-name {
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--ink);
  min-width: 0;
}

/* =====================================================================
   TEST ENVIRONMENT MARKING

   Everything here hangs off data-talli-env="test", which talli-config.js
   sets on <html> only when the page is pointed at the test backend. On
   talli.co.nz the attribute is never set and none of these rules match,
   so production renders exactly as it did before.

   The gate screen gets the strongest treatment on purpose: it is used one-
   handed, outdoors, at night, and taking a real payment on the test site
   (or a test payment on the real one) is the mistake worth designing out.
   Blue chrome means live. Red chrome means test.
   ===================================================================== */
:root {
  --test-red: #8E1B14;
  --test-red-deep: #5E110C;
  --test-red-tint: #FBEDEC;
}

.talli-env-banner {
  background: var(--test-red);
  color: var(--white);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
  /* Above the sticky header's shadow, but in normal flow so it scrolls away
     and never covers the nav. */
  position: relative;
  z-index: 60;
}

/* ---------- Gate screen: repaint the chrome red ---------- */
[data-talli-env="test"] .ad-body { background: var(--test-red-tint); }
[data-talli-env="test"] .ad-head { background: var(--test-red); }
[data-talli-env="test"] .ad-lock { background: var(--test-red-deep); }

/* The banner sits above a sticky header that carries its own safe-area
   inset. Once the banner takes the top of the screen, the header no longer
   needs to. */
[data-talli-env="test"] .ad-head { padding-top: 12px; }
[data-talli-env="test"] .talli-env-banner { padding-top: calc(7px + env(safe-area-inset-top)); }

/* The lock card gets a matching accent so the passphrase screen is just as
   obvious as the list behind it. */
[data-talli-env="test"] .ad-lock-card h1 { color: var(--test-red); }

/* ---------- Test-site passphrase screen ---------- */
.talli-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--test-red-deep);
}
.talli-gate-card {
  background: var(--white);
  border-radius: 6px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  font-family: var(--body);
}
.talli-gate-card h1 {
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--test-red);
  margin: 0 0 10px;
}
.talli-gate-card p {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.5;
  margin: 0 0 18px;
}
.talli-gate-card input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px; /* never let iOS zoom on focus */
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 14px;
}
.talli-gate-card input:focus {
  outline: none;
  border-color: var(--test-red);
}
.talli-gate-card .btn { width: 100%; }
.talli-gate-error {
  color: var(--test-red);
  font-size: 0.85rem;
  margin: 0 0 12px !important;
}
.talli-gate-foot { margin: 16px 0 0 !important; font-size: 0.8rem; }
.talli-gate-foot a { color: var(--grey); }