@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ==========================================================
   Globook — Design tokens (2026 refresh)
   Palette: warm near-black "marquee" charcoal, spotlight amber,
   ticket-paper parchment. Same token names as before (nothing
   downstream — the neon opt-in theme included — needs to know the
   values changed), new values: a warmer, quieter, more premium
   "boutique theatre at night" mood instead of the old violet/plum.
   Type: Fraunces (display) + Inter (UI/body) + JetBrains Mono for
   anything transactional — prices, seat numbers, references, times.
   Signature: the seat map reads like an actual raked theatre —
   curved rows fanning from a lit stage lip.
   ========================================================== */
:root{
  --plum-950:#0f0d0a;
  --plum-900:#1a1611;
  --plum-800:#241f17;
  --plum-700:#2f2820;
  --plum-line:#3c3226;
  --lavender-200:#ecdfc0;
  --lavender-400:#a4967a;
  --gold-500:#f0cf6b;
  --gold-600:#c9a227;
  --paper-50:#fbf8f2;
  --paper-100:#f5efe1;
  --paper-200:#ece0c8;
  --ink-900:#1c1712;
  --ink-600:#5c5044;
  --ink-400:#8a7d6a;
  --line-warm:#e6dac0;
  --green-600:#227a52;
  --red-600:#b3402c;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease:cubic-bezier(.19,1,.22,1);
  --radius-lg:20px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-lift:0 24px 55px -22px rgba(15,13,10,.5);
  --shadow-soft:0 1px 2px rgba(15,13,10,.05), 0 18px 40px -26px rgba(15,13,10,.4);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  background:var(--plum-950);
  color:var(--paper-100);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
.wrap{max-width:1440px;margin:0 auto;padding:0 24px;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--gold-500);color:var(--plum-950);}

/* Ambient spotlight glow behind the hero — sits behind the opaque
   topbar/panel surfaces (which occlude it entirely) and only shows
   through the dark gaps around them, like a stage wash. Purely
   decorative: fixed, blurred, non-interactive, never affects layout. */
body::before{
  content:'';
  position:fixed;
  top:-320px;left:50%;
  transform:translateX(-50%);
  width:1100px;height:900px;
  background:radial-gradient(circle, var(--gold-500) 0%, transparent 62%);
  opacity:.13;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}
.topbar,.main-grid,.site-footer{position:relative;z-index:1;}

/* ==========================================================
   Per-company custom events-page background (events.html only —
   see migration_org_background.sql, admin/owner/branding.php,
   js/events.js's applyOrgBackground()). The "has-custom-bg" class is
   only ever added by that one function, on that one page, only when
   get-events.php says this company actually has a background photo
   uploaded — every other page, and every company without one, is
   completely untouched by every rule below. Scoped to .events-panel
   specifically rather than the shared .panel class, so booking.html,
   the admin screens and every other page that reuses .panel keeps
   its normal solid card look regardless. ========================== */
body.has-custom-bg{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Softens the decorative gold glow (body::before) so it accents a
   custom photo instead of washing it out. */
body.has-custom-bg::before{
  opacity:.07;
}
/* Generalised to every .panel, not just .events-panel — the
   "has-custom-bg" class is only ever added by js/events.js (events.html)
   or js/booking.js (booking.html), each only when that page's own
   company actually has a background photo set, so this never reaches
   any other page (admin screens included) regardless of how broad the
   selector is here. Covers events.html's single events-panel AND
   booking.html's table-code-gate / main booking panels the same way. */
body.has-custom-bg .panel{
  background:rgba(20,17,15,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14);
}
/* .panel/.panel-head h2/.panel-sub normally assume a light card
   (dark ink text) — flipped to light text here, scoped the same way
   as everything else in this block, so only a panel on a page with a
   custom background active is affected. */
body.has-custom-bg .panel{
  color:var(--paper-100);
}
body.has-custom-bg .panel-head h2{
  color:var(--paper-100);
}
body.has-custom-bg .panel-sub{
  color:var(--lavender-200);
}
/* Form field labels ("Number of tickets", "Name", "Surname", etc.) and
   the muted "(optional)" tag both default to dark, low-contrast ink
   tones meant for a light card (see the base label{} / .optional-tag{}
   rules) — unreadable against this dark panel, so lightened here, same
   scoping as everything else in this block. Input boxes themselves
   keep their own light background/dark text untouched — only safe to
   lighten the labels that sit directly on the dark panel. */
body.has-custom-bg label{
  color:var(--lavender-200);
}
body.has-custom-bg .optional-tag{
  color:rgba(255,255,255,.55);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- curtain strip ---------- */
.curtain-top{
  height:6px;
  background:repeating-linear-gradient(90deg,var(--gold-600) 0 34px,var(--gold-500) 34px 68px);
  opacity:.9;
  box-shadow:0 2px 14px -2px rgba(240,207,107,.4);
}

/* ---------- topbar ---------- */
.topbar{
  background:rgba(26,22,17,.86);
  border-bottom:1px solid var(--plum-line);
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  overflow:visible; /* lets the oversized logo bleed below the thin bar */
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  position:relative;
}
.brand{position:relative;height:36px;width:320px;} /* slim placeholder — actual logo overlaps below */
.brand-logo{
  position:absolute;left:0;top:-100px;
  height:250px;width:auto;
  z-index:5;
  pointer-events:none; /* so the oversized image never blocks clicks on content behind/below it */
}
.topbar-note{
  font-size:13px;color:var(--lavender-200);
  padding:6px 13px;border:1px solid var(--plum-line);border-radius:99px;
  white-space:nowrap;
  background:rgba(255,255,255,.03);
  font-family:var(--font-mono);
  letter-spacing:.01em;
}

@media (max-width:480px){
  .topbar-inner{padding:12px 16px;}
  .brand-logo{height:100px;top:-30px;}
  .brand{width:170px;}
  .topbar-note{font-size:11px;padding:5px 10px;}
}

/* ---------- layout ---------- */
.main-grid{
  padding:44px 24px 80px;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.booking-panel{width:100%;}
.details-fields{max-width:680px;}
/* Left-anchored, in line with everything else in the form (details
   fields, seat-price legend, etc.) — this used to be horizontally
   CENTERED via "margin:32px auto 0", which made the Total/checkout
   card look like an unrelated floating box rather than part of the
   page. The entry-event override just below already did this
   correctly; this just brings the default (seated-event) case in
   line with it. */
.summary-block{max-width:420px;margin:32px 0 0;}
.panel-divider{border-top:1px solid var(--line-warm);margin:32px 0 28px;}
.hero{grid-column:1/-1;padding:10px 4px 4px;animation:fadeUp .6s var(--ease) both;}
.eyebrow{
  margin:0 0 8px;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-500);font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:22px;height:1.5px;
  background:var(--gold-500);
}
.event-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(34px,5.6vw,58px);
  letter-spacing:-0.01em;
  line-height:1.03;
  margin:0 0 18px;
  color:var(--paper-50);
}
.event-meta{display:flex;flex-wrap:wrap;gap:10px;}
.meta-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--plum-800);border:1px solid var(--plum-line);
  color:var(--lavender-200);
  padding:9px 14px;border-radius:99px;font-size:13.5px;
  font-family:var(--font-mono);
  transition:border-color .2s ease, background-color .2s ease;
}
.meta-chip:hover{border-color:var(--gold-600);background:var(--plum-700);}
.meta-chip svg{color:var(--gold-500);flex-shrink:0;}
/* Venue chip is an <a> (opens the venue in Maps) instead of a plain div
   like the date/time chips beside it — reset the browser's default link
   styling so it still looks like an ordinary chip, not a blue underlined
   link, and only show a "this opens something" cursor once it actually
   has an href (see the eventVenueLink handling in js/booking.js — no
   href yet means no real venue to search for). */
.meta-chip-link{text-decoration:none;cursor:default;}
.meta-chip-link[href]{cursor:pointer;}

/* ---------- panels ---------- */
.panel{
  background:var(--paper-100);
  color:var(--ink-900);
  border:1px solid var(--line-warm);
  border-radius:var(--radius-lg);
  padding:28px 26px 30px;
  box-shadow:var(--shadow-soft);
  min-width:0; /* prevents grid blowout from the seat map's intrinsic width */
  animation:fadeUp .6s var(--ease) both;
  animation-delay:.06s;
}
.panel-head h2{
  font-family:var(--font-display);
  font-size:23px;margin:0 0 4px;font-weight:600;
  letter-spacing:-.01em;
}
.panel-sub{margin:0 0 18px;color:var(--ink-600);font-size:14px;}

/* ---------- legend ---------- */
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--ink-600);}
.legend-item{display:flex;align-items:center;gap:6px;}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block;}
.dot-available{background:#fff;border:1.5px solid #d0c6a6;}
.dot-selected{background:var(--gold-500);}
.dot-taken{background:#cbc3ac;}

/* ---------- mode switch (seated vs entry, same event) ---------- */
/* Shown only when an event has BOTH a seated layout (blocks/tables) and
   general-admission entry settings configured together — see
   admin/new-event.php's checkboxes and js/booking.js's setMode(). Every
   existing event has at most one of the two, so #bookingModeSwitch stays
   hidden and this is a no-op for them. */
.mode-switch{
  display:flex;
  gap:4px;
  background:var(--paper-50);
  border:1.5px solid var(--line-warm);
  border-radius:999px;
  padding:4px;
  margin-bottom:18px;
  max-width:420px;
}
.mode-switch-btn{
  flex:1;
  border:none;
  background:transparent;
  border-radius:999px;
  padding:9px 14px;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-600);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.mode-switch-btn.is-active{
  background:var(--gold-600);
  color:var(--plum-950);
}
@media (max-width:480px){
  .mode-switch{max-width:none;}
  .mode-switch-btn{font-size:12.5px;padding:8px 10px;}
}

/* ---------- stage / seat map ---------- */
.stage-wrap{
  background:var(--plum-900);
  border:1px solid var(--plum-line);
  border-radius:var(--radius-md);
  padding:34px 16px 22px;
  overflow-x:auto;
}
.stage{
  width:78%;
  max-width:520px;
  margin:0 auto 26px;
  height:34px;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-600));
  border-radius:6px 6px 60% 60%/6px 6px 26px 26px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px 6px rgba(240,207,107,.35);
  flex-shrink:0;
}
.stage span{
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.3em;color:var(--plum-950);font-weight:700;
}
.seat-map-scaler{
  margin:0 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.seat-map{
  position:relative;
  transform-origin:top left;
  /* Horizontal centering is NOT done with margin:0 auto — see the
     margin-left/margin-right this element is given explicitly in
     fitSeatMapToScreen() (js/booking.js) for why: auto margins only
     center an element within space it actually fits in, and #seatMap
     is laid out here at its natural (pre-transform) width, which is
     routinely wider than .seat-map-scaler's width (the scaler is sized
     to the post-scale target — see the naturalWidth comment there —
     while this element's layout box is still full-size before the
     transform shrinks it visually). Whenever that happens, "auto"
     margins have no room to center in and collapse the map flush to
     one side instead, which a "top left" transform-origin then shrinks
     from, pushing the whole seat block visibly off-centre — worst on
     phones in portrait, where less available width forces a bigger
     scale-down and a bigger collapsed gap; landscape often has enough
     room to need no scaling at all, which is why it looked fine there.
     Explicit pixel margins, computed from the same before/after sizes
     fitSeatMapToScreen() already knows, don't have that failure mode.
  */
  margin:0;
  /* .seat-map-scaler forces its own height to exactly the size this
     element's CSS transform should visually shrink it to (see
     fitSeatMapToScreen() in js/booking.js) — which, on a column flex
     container, is smaller than this element's own natural (untransformed)
     height whenever a scale-down is actually needed. Flexbox's default
     flex-shrink:1 doesn't know a transform is already handling that
     shrink, so it independently squeezes this element's real layout
     box too, on top of the transform — compounding into a seat map
     rendered far smaller than intended, floating in the corner of a
     mostly-empty box (most visible on phones, where scaling down
     happens far more often than on desktop). .stage right above already
     carries flex-shrink:0 for the same reason; this element needs it
     too so the transform is the only thing doing the shrinking.
  */
  flex-shrink:0;
}
.seat-map-loading{color:var(--lavender-400);font-size:14px;padding:30px 0;}
.seat-view-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:10px 0 0;
}
.seat-view-toggle{
  background:var(--plum-800);
  border:1px solid var(--plum-line);
  color:var(--paper-50);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  border-radius:99px;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s var(--ease);
}
.seat-view-toggle:hover{border-color:var(--gold-600);transform:translateY(-1px);}
.seat-scroll-hint{
  text-align:center;
  font-size:12.5px;
  color:var(--lavender-400);
  margin:0;
}
.seat-block{display:flex;flex-direction:column;align-items:center;gap:8px;}
.seat-block-label{
  font-family:var(--font-display);
  color:var(--gold-500);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.seat-row{display:flex;gap:6px;align-items:center;}
/* Curved ("gallery") rows: a block with a curve set (admin/js/layout.js's
   curve handle) wraps each seat in one of these instead of adding a seat
   the flex row can size against, so the row's own height/alignment never
   changes — only the wrapper's translateY moves, and the .seat button
   inside keeps its normal hover/selected transforms untouched. */
.seat-curve-wrap{display:inline-flex;}
.seat-row-letter{
  width:16px;
  font-size:10px;
  font-family:var(--font-mono);
  color:var(--lavender-400);text-align:right;margin-right:2px;
  flex-shrink:0;
}
/* Overview mode: row letters add clutter without much orientation value
   at that scale, and previously we tried counter-scaling them to stay
   readable — but transforms don't reflow surrounding content, so
   enlarged text just visually overlapped the seat grid instead. Simpler
   and cleaner: just hide them here; they're still shown normally once
   zoomed into select mode. */
.seat-map.is-overview .seat-row-letter{
  display:none;
}
.seat{
  width:26px;
  height:26px;
  border-radius:6px 6px 9px 9px;
  border:none;cursor:pointer;
  background:#fff;
  transition:transform .15s var(--ease), background .15s ease, box-shadow .15s ease;
  position:relative;
  flex-shrink:0;
}
.seat:hover:not(:disabled){transform:translateY(-2px) scale(1.06);box-shadow:0 4px 10px -4px rgba(15,13,10,.35);}
.seat:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
.seat.is-selected{background:var(--gold-500);box-shadow:0 0 0 3px rgba(240,207,107,.28);}
.seat.is-taken{background:#4a4238;cursor:not-allowed;opacity:.55;}
.seat.is-disabled{background:transparent;cursor:default;visibility:hidden;}
/* A chair on a table OTHER than the one a table-code guest unlocked (see
   migration_table_access_codes.sql and renderTable()'s isOwnTable check
   in js/booking.js) — distinct from .is-taken (which means "someone else
   already booked this real seat") since this chair might genuinely still
   be open, just not to this guest. Every event without table-code
   locking turned on never adds this class at all. */
.seat.is-locked-out{background:#2e2a24;cursor:not-allowed;opacity:.45;}

.block-key{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;
  font-size:13px;color:var(--ink-600);
}
.block-key-item{
  background:var(--paper-50);border:1px solid var(--line-warm);
  border-radius:99px;padding:5px 12px;
}
.block-key-item strong{color:var(--ink-900);font-family:var(--font-mono);}

/* ---------- table events (round/rect tables + chairs around them) ---------- */
.event-table{display:flex;flex-direction:column;align-items:center;}
.table-stage{position:relative;margin:0 auto;}
.table-body{position:absolute;background:rgba(255,255,255,.06);border:1.5px solid var(--plum-line, #4a4238);box-shadow:inset 0 0 0 3px rgba(255,255,255,.04);}
.event-table.shape-round .table-body{border-radius:50%;}
.event-table.shape-rect .table-body{border-radius:10px;}
.seat.table-chair{position:absolute;}
/* Table label, centered directly on the table body (see renderTable() in
   js/booking.js) rather than as its own row above the stage — reads more
   naturally sitting on the table it names, and saves the row's height
   across a floor plan with many tables. Sized up from the old
   .seat-block-label's 13px (this never shows the price now, so there's
   less text competing for the same width) and given a text-shadow since
   it sits on the table body's translucent fill rather than the page's
   solid background underneath. pointer-events:none so it never blocks
   taps on a chair that happens to sit near the table's centre. The
   translate below is just the resting/fallback value — renderTable() always
   sets this element's inline transform itself (translate plus a
   counter-rotation when the table is rotated), which overrides this. */
.table-label{
  position:absolute;
  transform:translate(-50%, -50%);
  font-family:var(--font-display);
  color:var(--gold-500);
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  text-align:center;
  line-height:1.15;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  pointer-events:none;
  z-index:1;
}


/* ---------- form ---------- */
.field-row{display:flex;gap:14px;}
.field-row .field{flex:1;}
.field{margin-bottom:14px;}
label{
  display:block;font-size:13px;font-weight:600;color:var(--ink-600);
  margin-bottom:6px;
}
.optional-tag{font-weight:400;color:var(--ink-400);text-transform:none;letter-spacing:0;}
input,select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line-warm);
  border-radius:var(--radius-sm);
  background:var(--paper-50);
  color:var(--ink-900);
  font-size:15px;
  font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus{
  outline:none;border-color:var(--gold-600);
  box-shadow:0 0 0 3px rgba(240,207,107,.25);
}
input:invalid:not(:placeholder-shown){border-color:#c98d80;}

.form-error{
  background:#fbeae6;color:var(--red-600);
  border:1px solid #f0c9bd;border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13.5px;margin-bottom:14px;
}

.summary-card{
  background:var(--paper-50);
  border:1px solid var(--line-warm);
  border-radius:var(--radius-md);
  padding:14px 16px;margin:6px 0 16px;
}
.summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-600);padding:4px 0;}
.summary-row strong{color:var(--ink-900);font-family:var(--font-mono);}
.summary-total{border-top:1px dashed var(--line-warm);margin-top:6px;padding-top:10px;font-size:16px;}
.summary-total strong{color:var(--ink-900);font-size:20px;font-family:var(--font-mono);font-weight:700;}

.btn-primary{
  width:100%;
  background:linear-gradient(155deg,var(--gold-500),var(--gold-600));
  color:var(--plum-950);
  border:none;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  font-size:16px;font-weight:700;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .12s ease, filter .2s ease;
  box-shadow:0 14px 30px -12px rgba(240,207,107,.55);
}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(240,207,107,.65);filter:brightness(1.03);}
.btn-primary:not(:disabled):active{transform:translateY(0);box-shadow:0 8px 18px -10px rgba(240,207,107,.5);}

.fine-print{font-size:12px;color:var(--ink-400);text-align:center;margin:12px 0 0;}

/* ---------- data-use / terms consent checkbox (booking.html) ---------- */
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--paper-50);
  border:1px solid var(--line-warm);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  margin:0 0 14px;
  cursor:pointer;
}
.consent-row input[type="checkbox"]{
  /* Overriding the generic input,select{width:100%;padding:12px 14px;...}
     rule above — without this reset a checkbox would render as a giant
     empty rounded box instead of a normal tickable checkbox. */
  width:18px;
  height:18px;
  padding:0;
  border-radius:4px;
  flex-shrink:0;
  margin-top:1px;
  accent-color:var(--gold-600);
  cursor:pointer;
}
.consent-row span{font-size:13px;line-height:1.5;color:var(--ink-600);}
.consent-row a{color:var(--gold-600);font-weight:600;text-decoration:underline;}
.consent-row a:hover{color:var(--gold-500);}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--plum-line);
  padding:24px 0 44px;
  text-align:center;
  color:var(--lavender-400);
  font-size:12.5px;
  letter-spacing:.01em;
}

/* ---------- overlay ---------- */
.overlay{
  position:fixed;inset:0;
  background:rgba(15,13,10,.74);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:30px 16px;
  overflow-y:auto;
  z-index:50;
  animation:fadeUp .3s var(--ease) both;
}
.overlay-card{
  background:var(--paper-100);
  color:var(--ink-900);
  max-width:640px;width:100%;
  border-radius:var(--radius-lg);
  padding:24px 32px 22px;
  box-shadow:var(--shadow-lift);
  border:1px solid var(--line-warm);
}
.overlay-head{text-align:center;margin-bottom:14px;}
.check-badge{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-600);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin:0 auto 10px;
  box-shadow:0 8px 20px -8px rgba(34,122,82,.5);
}
.overlay-head h2{font-family:var(--font-display);margin:0 0 4px;font-size:22px;}
.overlay-head p{margin:0;color:var(--ink-600);font-size:13.5px;}

/* Ticket-stub styling: side notches punched into the strip so it reads
   as an actual torn ticket, not a plain rounded rectangle. The notch
   color matches .overlay-card's own background exactly, so it looks
   like a genuine cutout revealing the card behind it. */
.ticket-strip{
  position:relative;
  background:var(--plum-900);color:var(--paper-100);
  border-radius:var(--radius-md);
  padding:13px 18px;margin-bottom:14px;
  border:1px dashed var(--plum-line);
}
.ticket-strip::before,.ticket-strip::after{
  content:'';
  position:absolute;top:50%;
  width:16px;height:16px;
  background:var(--paper-100);
  border-radius:50%;
  transform:translateY(-50%);
}
.ticket-strip::before{left:-9px;}
.ticket-strip::after{right:-9px;}
.ticket-row{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:var(--lavender-200);}
.ticket-row strong{color:var(--paper-50);font-family:var(--font-mono);}
.ticket-row.total{border-top:1px dashed var(--plum-line);margin-top:3px;padding-top:7px;}
.ticket-row.total strong{color:var(--gold-500);font-size:17px;}

.bank-card{
  background:var(--paper-50);border:1px solid var(--line-warm);
  border-radius:var(--radius-md);padding:11px 16px;margin-bottom:12px;
}
.bank-card h3{margin:0 0 6px;font-size:13px;font-family:var(--font-display);}
.bank-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;
}
.bank-card h3{grid-column:1 / -1;}
.bank-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 0;color:var(--ink-600);}
.bank-row strong{color:var(--ink-900);text-align:right;font-family:var(--font-mono);}
/* Payment reference is the 5th row (odd count) — left as a normal grid
   cell (NOT spanned across both columns like it used to be) so it falls
   into the left column, directly under "Account number", with the right
   column's matching cell simply left empty. Spanning it used to stretch
   its own label/value pair across the full card width, which pushed the
   value all the way to the right-hand edge instead of keeping it
   left-aligned under the other left-column rows. */

.steps{margin-bottom:14px;}
.step{display:flex;gap:9px;align-items:flex-start;margin-bottom:7px;font-size:13px;color:var(--ink-600);}
.step-num{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:var(--gold-500);color:var(--plum-950);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;font-family:var(--font-mono);
}
.step p{margin:0;}
.step strong{color:var(--ink-900);}

.btn-whatsapp{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366;color:#0b3d20;
  padding:12px 16px;border-radius:var(--radius-sm);
  font-weight:700;font-size:14px;text-decoration:none;
  margin-bottom:9px;
  transition:transform .15s var(--ease);
}
.btn-whatsapp:hover{transform:translateY(-1px);}
.btn-secondary{
  width:100%;background:var(--paper-50);border:1.5px solid var(--ink-400);
  color:var(--ink-900);padding:11px 16px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:14px;font-weight:600;
  box-shadow:0 2px 6px rgba(28,23,18,.08);
  transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .15s var(--ease);
}
.btn-secondary:hover{
  background:#fff;
  border-color:var(--gold-600);
  box-shadow:0 6px 14px -4px rgba(28,23,18,.16);
  transform:translateY(-1px);
}
.btn-secondary:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .field-row{flex-direction:column;gap:0;}
}
@media (max-width:520px){
  .event-title{font-size:30px;}
  .panel{padding:20px 16px 22px;}
  .bank-card{grid-template-columns:1fr;}
  .seat-row{gap:8px;}
  .wrap{padding:0 12px;}
  .stage-wrap{padding:24px 6px 16px;}
}

/* The booking form used to switch to a two-column layout above 1040px
   (a sticky summary sidebar beside the form/seat map). Removed at the
   user's request — the summary now stays in normal document flow at
   every screen width, appearing below the seat layout like the rest
   of the form (see the base .summary-block rule above), rather than
   beside it. */

/* ==========================================================
   Globook — Event selection grid (added for events.html)
   Cards are photo tiles: a background image (or a plum gradient
   fallback when an event has no image yet) with a dark scrim at
   the base so the title/meta text stays readable over any photo.
   ========================================================== */
.event-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:20px;
}
.event-card{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  position:relative;
  width:100%;
  /* Fixed height (not min-height) so background-size:cover always frames
     the photo the same way, regardless of how much title/meta text a
     given event has — text overlays the photo, it never pushes the
     card taller and squashes the image into a thin strip. */
  height:230px;
  padding:0;
  margin:0;
  border:1px solid var(--plum-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:#fff;
  background-color:var(--plum-800);
  background-image:linear-gradient(160deg, var(--plum-700), var(--plum-900));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(15,13,10,.06), 0 16px 34px -20px rgba(15,13,10,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:fadeUp .5s var(--ease) both;
}
/* Photo layer, separated out onto its own pseudo-element so the hover
   zoom can use `transform:scale()` instead of animating
   `background-size`. `background-size` can't be transitioned between a
   keyword ("cover") and a percentage ("112%") — those are two different
   value types the spec has no interpolation rule for, so the old setup
   just snapped instantly no matter the transition duration. `inherit`
   here pulls whatever image/gradient and focal-point position the card
   itself already has (JS sets those on .event-card directly), so no JS
   changes are needed. Sits below the scrim/text, scales slowly on
   hover for a gentle Ken Burns feel, and stays fully clipped by the
   card's own overflow:hidden. */
.event-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-image:inherit;
  background-position:inherit;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1);
  transition:transform 6s cubic-bezier(.19,1,.22,1);
}
/* Dark scrim rising from the bottom edge so white text is legible
   over any photo, no matter how bright — sits above the photo,
   below the text (inner div is z-index:2). */
.event-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  /* A light overall tint across the whole photo (not just the bottom
     scrim) so the badge and title stay readable even over busy areas
     of the image, in addition to the stronger fade at the base. */
  background:linear-gradient(180deg, rgba(13,11,8,.26) 0%, rgba(13,11,8,.38) 38%, rgba(13,11,8,.94) 100%);
  transition:opacity .15s ease;
}
.event-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(15,13,10,.08), 0 26px 48px -20px rgba(15,13,10,.7);
}
.event-card:hover::after{
  transform:scale(1.12);
}
.event-card.is-closed{
  cursor:default;
}
.event-card.is-closed{
  filter:grayscale(.65) brightness(.75);
}
.event-card.is-closed:hover{
  transform:none;
  box-shadow:0 1px 2px rgba(15,13,10,.06), 0 16px 34px -20px rgba(15,13,10,.6);
}
.event-card.is-closed:hover::after{
  transform:scale(1);
}
.event-card-inner{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:15px 17px 17px;
  justify-content:flex-end;
  text-align:left;
}
.event-card-name{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.005em;
  margin:0;
  color:#fff;
  line-height:1.22;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  /* Clip very long event names to 2 lines instead of overflowing the
     fixed-height card. Standard `line-clamp` needs `display:box` per
     spec, but every browser that supports it also still honors the
     `-webkit-box`/`-webkit-line-clamp` pair, so both are kept together. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.event-card-badge{
  flex-shrink:0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-family:var(--font-mono);
  padding:5px 11px;
  border-radius:99px;
  white-space:nowrap;
}
.event-card-badge.is-open{
  background:var(--green-600);
  color:#fff;
}
.event-card-badge.is-closed{
  background:rgba(255,255,255,.22);
  color:#fff;
}
.event-card-meta{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:var(--lavender-200);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:520px){
  .event-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .event-card{height:200px;}
  .event-card-name{font-size:19px;}
}

/* ==========================================================
   Globook — Seat numbers inside seat buttons
   Seats are small (26px in select mode, smaller still in overview
   mode) so the number needs to stay readable without the button
   growing — centered, tiny monospace (transactional numbers get the
   mono treatment everywhere in this system), enough contrast against
   every seat state's background color.
   ========================================================== */
.seat{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:16px; /* was 10px — the button box itself (26px) is unchanged
    so table footprints/spacing an admin already arranged stay exactly
    where they are; only the glyph inside gets bigger. Matches
    .table-label's own size so both read at the same visual weight once
    the whole map is scaled down to fit (see .wrap-seating below and
    fitSeatMapToScreen() in js/booking.js). */
  font-weight:700;
  line-height:1;
  color:var(--ink-600);
  padding:0;
}
.seat.is-selected{
  color:var(--plum-950); /* stays legible against the gold selected background */
}
.seat.is-taken{
  color:rgba(255,255,255,.75); /* stays legible against the dark taken background */
}
.seat.is-locked-out{
  color:rgba(255,255,255,.55); /* stays legible against the dark locked-out background */
}

/* Table-code lock (see migration_table_access_codes.sql): the guest's own
   table gets a soft gold outline so it's easy to spot among many tables;
   every OTHER table dims instead, chairs and label included, since none
   of it is bookable by this guest. Both classes are only ever added by
   renderTable() in js/booking.js once an event has table-code locking
   turned on AND a guest has unlocked a table — every other event never
   adds either class, so this is a no-op for them. */
.event-table.is-your-table .table-body{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.04), 0 0 0 3px var(--gold-500), 0 0 16px rgba(240,207,107,.45);
}
.event-table.is-other-table{opacity:.4;}

/* In overview mode seats shrink below a size where numbers are legible
   at all — same reasoning as hiding row letters there (see the existing
   .seat-map.is-overview .seat-row-letter rule): showing illegible text
   is worse than showing none, and overview mode is for orientation, not
   seat-by-seat selection anyway. */
.seat-map.is-overview .seat{
  font-size:0;
}

/* Booking page only (see the extra class on <main> in booking.html) —
   the seat map needs real room to render the whole floor plan at a
   readable size without shrinking below legibility or needing to
   scroll (see the desktop branch of fitSeatMapToScreen() in
   js/booking.js, which always scales the WHOLE layout down
   proportionally to fit whatever width is available here). The rest of
   the page (name/email fields, summary) already has its own narrower
   max-width on top of this — see .details-fields/.summary-block above —
   so only the seat map actually uses the extra space on a wide screen.
   Harmless on a phone/tablet: the viewport itself is already narrower
   than this cap, so it never kicks in there. */
.wrap-seating{max-width:min(1900px, 96vw);}

/* ==========================================================
   Globook — Download confirmation button + disabled Done state
   ========================================================== */
.btn-secondary:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn-secondary:disabled:hover{
  background:var(--paper-50);
  border-color:var(--ink-400);
  box-shadow:none;
  transform:none;
}

/* ==========================================================
   Globook — "Neon" page theme (opt-in per event)
   Purely additive: everything above this block is completely
   unchanged. This applies ONLY when <body> has class
   "theme-neon", which js/booking.js adds only when that event's
   `theme` column (see migration_event_theme.sql) is set to
   "neon" — every existing event has no theme set, so nothing
   changes for them. Almost the whole page already reads its
   colours from the CSS custom properties on :root, so re-pointing
   those same tokens to a neon/funky palette re-themes the topbar,
   hero, panels, buttons, race picker, summary and confirmation
   screen all at once, with no risk of missing a spot.
   ========================================================== */
body.theme-neon{
  --plum-950:#0a0118;
  --plum-900:#120327;
  --plum-800:#1c0a3a;
  --plum-700:#26104e;
  --plum-line:#6a2fae;
  --lavender-200:#e9d8ff;
  --lavender-400:#b48cff;
  --gold-500:#ff2fd0;
  --gold-600:#2ffff7;
  --paper-50:#170b33;
  --paper-100:#1b0e3a;
  --paper-200:#241354;
  --ink-900:#f7f0ff;
  --ink-600:#c3aee8;
  --ink-400:#9077b8;
  --line-warm:#5b2a99;
  --green-600:#39ff8f;
  --red-600:#ff5c8a;
  --shadow-lift:0 20px 55px -18px rgba(255,47,208,.35);
}

/* A handful of rules elsewhere in this file use hardcoded colours
   instead of the tokens above (mostly seat-map states and the small
   "seats remaining" note) — every existing seated event relies on
   those exact values, so they're re-themed here instead, scoped to
   this theme only. */
body.theme-neon .dot-available{background:var(--paper-50);border-color:var(--line-warm);}
body.theme-neon .dot-taken{background:#4a2a7a;}
body.theme-neon .seat{background:var(--paper-50);color:var(--ink-600);}
body.theme-neon .seat.is-taken{background:#3a1f66;}
body.theme-neon .seat.is-locked-out{background:#1b0e3a;}
body.theme-neon .form-error{
  background:#3a0f2e;
  border-color:#ff5c8a;
  color:#ffb3d1;
}
body.theme-neon .seats-remaining-note{
  background:#170b33;
  border-color:#6a2fae;
  color:#c3aee8;
}
body.theme-neon .seats-remaining-note strong{
  color:#ff2fd0;
}

/* Funky flourishes — glow on the title, curtain stripe, chips and the
   main button, so a neon event actually reads as "neon", not just
   re-coloured. */
body.theme-neon .event-title{
  text-shadow:0 0 10px rgba(255,47,208,.65), 0 0 26px rgba(47,255,247,.35);
}
body.theme-neon .eyebrow{
  text-shadow:0 0 8px rgba(47,255,247,.6);
}
body.theme-neon .curtain-top{
  background:repeating-linear-gradient(90deg,var(--gold-500) 0 34px,var(--gold-600) 34px 68px);
  box-shadow:0 0 16px rgba(255,47,208,.5);
}
body.theme-neon .meta-chip{
  box-shadow:0 0 10px rgba(255,47,208,.2);
}
body.theme-neon .btn-primary{
  box-shadow:0 0 22px rgba(255,47,208,.55), 0 10px 24px -10px rgba(47,255,247,.4);
}
body.theme-neon .race-category-option.is-checked{
  box-shadow:0 0 14px rgba(255,47,208,.35);
}
body.theme-neon .panel{
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(47,255,247,.15) inset;
}

/* Globook logo: soft light halo so the black "book" letters read on the dark header */
.brand-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 10px rgba(255,236,190,.22));}

/* Header logo: same HD logo and size as the home page (index.html .mark-img) */
.brand{position:relative;height:auto;width:auto;display:flex;align-items:center;}
.brand-logo{position:static;top:auto;left:auto;height:52px;width:auto;transform:translateY(-9%);z-index:auto;}
@media (max-width:520px){.brand-logo{height:40px;transform:none;}.brand{width:auto;}}
@media (max-width:400px){.brand-logo{height:34px;}}

/* ================= Events listing page (events.html) ================= */
.ev-page{--ev-gold:#f5c842;--ev-gold2:#f2c230;--ev-ink:#f4f1ea;--ev-soft:#c9c2b2;--ev-mute:#8f887a;--ev-card:rgba(22,20,17,.82);--ev-line:rgba(255,255,255,.09);}
.ev-main{display:block;padding-top:56px;padding-bottom:72px;}
.ev-hero{max-width:820px;margin:0 0 44px;}
.ev-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:700 12px/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ev-gold);}
.ev-eyebrow::before{content:'';width:28px;height:1.5px;background:var(--ev-gold);}
.ev-title{margin:0 0 18px;font:700 clamp(36px,5.4vw,64px)/1.04 var(--font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);}
.ev-title-sub{display:block;margin-top:10px;font:600 clamp(18px,2.2vw,24px)/1.2 var(--font-body);letter-spacing:-.01em;color:var(--ev-gold);text-shadow:none;}
.ev-lede{margin:0 0 26px;max-width:600px;font-size:17px;line-height:1.6;color:var(--ev-soft);}
.ev-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;}
.ev-facts li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:99px;background:rgba(15,13,10,.55);border:1px solid var(--ev-line);color:var(--ev-ink);font:500 13.5px var(--font-body);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ev-fact-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--ev-gold2));}
.ev-fact-ico svg{width:14px;height:14px;}

.ev-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--ev-line);}
.ev-section-head h2{margin:0;font:700 26px/1.2 var(--font-display);color:#fff;}
.ev-section-head p{margin:6px 0 0;font-size:14px;color:var(--ev-mute);}

.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.ev-card{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--ev-card);border:1px solid var(--ev-line);box-shadow:0 24px 50px -28px rgba(0,0,0,.8);text-decoration:none;color:inherit;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease);}
a.ev-card:hover,a.ev-card:focus-visible{transform:translateY(-4px);border-color:rgba(245,200,66,.55);box-shadow:0 30px 60px -26px rgba(0,0,0,.85),0 0 0 1px rgba(245,200,66,.25);outline:none;}
.ev-media{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#221d16;}
.ev-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 40%,rgba(0,0,0,.45));}
.ev-media.is-blank{background-image:radial-gradient(120% 90% at 80% 0%,rgba(245,200,66,.35),transparent 60%),linear-gradient(135deg,#2a2318,#15120e);}
.ev-media.is-blank::before{content:'';position:absolute;inset:0;background:url("../assets/globook-logo.png") center/46% no-repeat;opacity:.22;}
a.ev-card .ev-media{transition:filter .3s;}
a.ev-card:hover .ev-media{filter:brightness(1.06) saturate(1.05);}
.ev-date{position:absolute;left:14px;top:14px;z-index:1;width:54px;padding:7px 0 6px;border-radius:12px;text-align:center;background:rgba(255,255,255,.95);color:#1c1712;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);}
.ev-date b{display:block;font:700 22px/1 var(--font-display);}
.ev-date span{display:block;margin-top:3px;font:700 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#a8820a;}
.ev-badge{position:absolute;right:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font:700 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ev-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.ev-badge.is-open{background:rgba(18,92,58,.85);color:#bff5d6;}
.ev-badge.is-soon{background:rgba(120,86,0,.85);color:#ffe7a0;}
.ev-badge.is-closed{background:rgba(40,36,30,.85);color:#c9c2b2;}
.ev-body{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;flex:1;}
.ev-name{margin:0;font:700 21px/1.25 var(--font-display);color:#fff;}
.ev-meta{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;}
.ev-meta li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4;color:var(--ev-soft);}
.ev-meta svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ev-gold);}
.ev-meta li:last-child span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ev-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:12px;font:700 14.5px var(--font-body);color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--ev-gold2));box-shadow:0 12px 26px -14px rgba(242,194,48,.9);transition:transform .2s;}
.ev-cta svg{width:16px;height:16px;transition:transform .2s;}
a.ev-card:hover .ev-cta svg{transform:translateX(3px);}
.ev-card.is-closed{opacity:.8;}
.ev-card.is-closed .ev-cta{background:rgba(255,255,255,.06);color:var(--ev-mute);box-shadow:none;border:1px solid var(--ev-line);}
.ev-skel{min-height:380px;background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 70%) 0 0/300% 100%,var(--ev-card);animation:evShimmer 1.4s linear infinite;}
@keyframes evShimmer{to{background-position:-300% 0,0 0;}}
.ev-empty{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:48px 20px;border-radius:20px;border:1px dashed rgba(255,255,255,.16);background:rgba(15,13,10,.55);color:var(--ev-soft);}
.ev-empty strong{font:700 20px var(--font-display);color:#fff;}
.ev-footer{background:rgba(10,9,8,.7);border-top:1px solid var(--ev-line);}
.ev-footer-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;}
.ev-footer-logo{height:34px;width:auto;}
.ev-footer p{margin:0;font-size:13px;color:var(--ev-mute);}
@media (max-width:640px){
  .ev-main{padding-top:36px;}
  .ev-hero{margin-bottom:32px;}
  .ev-lede{font-size:15.5px;}
  .ev-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
  .ev-footer-in{justify-content:center;text-align:center;}
}
@media (prefers-reduced-motion:reduce){.ev-card,.ev-skel{transition:none;animation:none;}}

/* ================= Booking page (booking.html) — dark glass look ================= */
body.bk-page{--bk-gold:#f5c842;--bk-gold2:#f2c230;--bk-ink:#f4f1ea;--bk-soft:#c9c2b2;--bk-mute:#8f887a;--bk-card:rgba(22,20,17,.84);--bk-card2:rgba(255,255,255,.04);--bk-line:rgba(255,255,255,.1);}
body.bk-page .main-grid{padding-top:48px;padding-bottom:64px;}
/* hero */
body.bk-page .hero{margin-bottom:34px;}
body.bk-page .hero .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:700 12px/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--bk-gold);}
body.bk-page .event-title{margin:0 0 20px;font:700 clamp(34px,5vw,60px)/1.05 var(--font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);}
body.bk-page .event-meta{display:flex;flex-wrap:wrap;gap:10px;}
body.bk-page .meta-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 10px;border-radius:99px;background:rgba(15,13,10,.6);border:1px solid var(--bk-line);color:var(--bk-ink);font:500 14px var(--font-body);letter-spacing:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;}
body.bk-page .meta-chip svg{width:26px;height:26px;padding:6px;box-sizing:border-box;border-radius:50%;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--bk-gold2));flex:none;}
body.bk-page a.meta-chip:hover{border-color:rgba(245,200,66,.6);color:#fff;}
/* main panel */
body.bk-page .panel{background:var(--bk-card);border:1px solid var(--bk-line);border-radius:24px;color:var(--bk-ink);box-shadow:0 30px 70px -34px rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
body.bk-page #bookingForm{counter-reset:bkstep;}
body.bk-page .panel-head h2{display:flex;align-items:center;gap:12px;font:700 24px/1.2 var(--font-display);color:#fff;margin:0;}
body.bk-page #seatSelectionSection > .panel-head h2::before,
body.bk-page #entryQtySection > .panel-head h2::before,
body.bk-page #raceCategorySection > .panel-head h2::before,
body.bk-page .bk-review-head h2::before{counter-increment:bkstep;content:counter(bkstep);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font-body);color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--bk-gold2));box-shadow:0 8px 18px -8px rgba(242,194,48,.8);}
body.bk-page .panel-head .panel-sub,body.bk-page .panel-sub{color:var(--bk-soft);}
body.bk-page .panel-head .panel-sub{margin:8px 0 0 44px;}
body.bk-page #entryQtySection,body.bk-page #raceCategorySection,body.bk-page .summary-block{margin-top:34px;padding-top:30px;border-top:1px solid var(--bk-line);}
body.bk-page label{color:var(--bk-soft);}
body.bk-page .optional-tag{color:var(--bk-mute);}
/* legend */
body.bk-page .legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px 44px;}
body.bk-page .legend-item{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:var(--bk-card2);border:1px solid var(--bk-line);color:var(--bk-soft);font-size:13px;}
/* seat map frame */
body.bk-page .stage-wrap{border-radius:18px;border:1px solid var(--bk-line);background:radial-gradient(90% 60% at 50% 0%,rgba(245,200,66,.10),transparent 70%),#100e0b;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
body.bk-page .block-key{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
body.bk-page .block-key-item{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.3);color:var(--bk-ink);font:500 13px var(--font-body);}
body.bk-page .block-key-item strong{color:var(--bk-gold);font-family:var(--font-mono);font-weight:600;}
/* general admission */
body.bk-page #entryQtySection .field{margin-left:44px;}
body.bk-page #entryRemainingNote,body.bk-page #entryStatusNote{margin-left:44px;}
body.bk-page .qty-stepper{display:inline-flex;align-items:center;height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--bk-line);overflow:hidden;}
body.bk-page .stepper-btn{width:46px;height:46px;border:0;background:transparent;color:var(--bk-ink);font-size:20px;cursor:pointer;}
body.bk-page .stepper-btn:hover:not(:disabled){background:rgba(245,200,66,.14);color:var(--bk-gold);}
body.bk-page .stepper-btn:disabled{color:rgba(255,255,255,.25);}
body.bk-page .stepper-input{width:54px;height:46px;border:0;border-left:1px solid var(--bk-line);border-right:1px solid var(--bk-line);background:transparent;color:#fff;font:700 17px var(--font-mono);text-align:center;}
body.bk-page .stepper-input:focus{background:rgba(245,200,66,.08);}
body.bk-page .entry-ticket-type-list{margin-left:44px;}
body.bk-page .entry-ticket-type-row{border-color:var(--bk-line);}
body.bk-page .entry-ticket-type-name{color:#fff;}
body.bk-page .entry-ticket-type-price,body.bk-page .entry-ticket-type-remaining{color:var(--bk-soft);}
body.bk-page .entry-ticket-type-subtotal{color:var(--bk-gold);}
/* review & book */
body.bk-page .summary-block{max-width:none;}
body.bk-page .summary-block > *:not(.bk-review-head){max-width:640px;margin-left:44px;}
body.bk-page .bk-review-head{margin-bottom:18px;}
body.bk-page .summary-card{background:rgba(255,255,255,.04);border:1px solid var(--bk-line);border-radius:16px;color:var(--bk-ink);box-shadow:none;}
body.bk-page .summary-row{color:var(--bk-soft);border-color:var(--bk-line);}
body.bk-page .summary-row strong{color:#fff;}
body.bk-page .summary-total{border-top:1px dashed rgba(255,255,255,.14);}
body.bk-page .summary-total span{color:var(--bk-ink);font-weight:600;}
body.bk-page .summary-total strong{color:var(--bk-gold);font-size:26px;}
body.bk-page .consent-row{background:rgba(255,255,255,.04);border:1px solid var(--bk-line);border-radius:14px;color:var(--bk-ink);}
body.bk-page .consent-row span{color:var(--bk-ink);}
body.bk-page .consent-row input{accent-color:var(--bk-gold2);}
body.bk-page .details-fields input,body.bk-page .details-fields select,body.bk-page #raceCategorySection select,body.bk-page #tableCodeGate input{background:rgba(255,255,255,.06);border:1px solid var(--bk-line);color:#fff;border-radius:12px;}
body.bk-page .details-fields input::placeholder{color:var(--bk-mute);}
body.bk-page .details-fields input:focus,body.bk-page #tableCodeGate input:focus{border-color:var(--bk-gold);box-shadow:0 0 0 3px rgba(245,200,66,.18);outline:none;}
body.bk-page .details-head h2::before{content:none;}
body.bk-page .details-head .panel-sub{margin-left:0;}
body.bk-page .btn-primary{border-radius:14px;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--bk-gold2));box-shadow:0 14px 30px -14px rgba(242,194,48,.9);font-weight:700;}
body.bk-page .btn-primary:disabled{background:rgba(255,255,255,.07);color:var(--bk-mute);box-shadow:none;border:1px solid var(--bk-line);}
body.bk-page .fine-print{color:var(--bk-mute);}
body.bk-page .form-error{background:rgba(179,64,44,.18);border:1px solid rgba(255,120,100,.4);color:#ffb4a6;border-radius:12px;}
/* corner seats-remaining note */
body.bk-page .seats-remaining-note{background:rgba(15,13,10,.88);border:1px solid rgba(245,200,66,.35);color:var(--bk-ink);border-radius:99px;transform:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.7);font-family:var(--font-body);letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
body.bk-page .seats-remaining-note strong,body.bk-page .seats-remaining-note b{color:var(--bk-gold);}
@media (max-width:640px){
  body.bk-page .main-grid{padding-top:28px;}
  body.bk-page .panel-head h2{font-size:20px;}
  body.bk-page .panel-head .panel-sub,body.bk-page .legend,body.bk-page #entryQtySection .field,body.bk-page #entryRemainingNote,body.bk-page #entryStatusNote,body.bk-page .entry-ticket-type-list,body.bk-page .summary-block > *:not(.bk-review-head){margin-left:0;}
  body.bk-page .meta-chip{font-size:13px;}
}
body.bk-page .summary-block,body.bk-page #entryQtySection:not([hidden]) ~ .summary-block{max-width:none !important;width:auto;margin-top:34px;}
body.bk-page #entryQtySection .field{margin-top:16px;}
body.bk-page .summary-block > .btn-primary,body.bk-page .summary-block > button{width:100%;box-sizing:border-box;}

/* ---------- Booking confirmation window (dark glass) ---------- */
body.bk-page .overlay{background:rgba(6,5,4,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:28px 16px;}
body.bk-page .overlay-card{max-width:560px;padding:30px 30px 24px;border-radius:26px;background:linear-gradient(180deg,#1d1a15,#141210);color:var(--bk-ink);border:1px solid rgba(245,200,66,.22);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;}
body.bk-page .overlay-head{margin-bottom:22px;}
body.bk-page .check-badge{width:58px;height:58px;font-size:26px;margin-bottom:14px;color:#0d3a24;background:linear-gradient(135deg,#8ff0bd,#2fbf7a);box-shadow:0 0 0 8px rgba(47,191,122,.12),0 14px 30px -12px rgba(47,191,122,.7);}
body.bk-page .overlay-head h2{font:700 28px/1.15 var(--font-display);color:#fff;margin-bottom:8px;}
body.bk-page .overlay-head p{color:var(--bk-soft);font-size:14.5px;line-height:1.5;}
/* ticket stub */
body.bk-page .ticket-strip{padding:18px 22px;margin-bottom:16px;border-radius:18px;border:1px solid rgba(245,200,66,.35);background:radial-gradient(120% 140% at 100% 0%,rgba(245,200,66,.16),transparent 55%),#0f0d0b;}
body.bk-page .ticket-strip::before,body.bk-page .ticket-strip::after{width:20px;height:20px;background:#181612;top:auto;bottom:44px;transform:none;}
body.bk-page .ticket-strip::before{left:-11px;}
body.bk-page .ticket-strip::after{right:-11px;}
body.bk-page .ticket-row{gap:16px;align-items:baseline;padding:6px 0;font-size:13.5px;color:var(--bk-soft);}
body.bk-page .ticket-row strong{color:#fff;text-align:right;font-size:14px;}
body.bk-page .ticket-ref strong{font-size:17px;letter-spacing:.06em;color:var(--bk-gold);}
body.bk-page .ticket-row.total{margin-top:10px;padding-top:14px;border-top:1px dashed rgba(245,200,66,.35);}
body.bk-page .ticket-row.total span{color:var(--bk-ink);font-weight:600;}
body.bk-page .ticket-row.total strong{font-size:26px;color:var(--bk-gold);}
/* bank / payfast cards */
body.bk-page .bank-card{display:block;padding:16px 20px;margin-bottom:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--bk-line);}
body.bk-page .bank-card h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--bk-gold);}
body.bk-page .bank-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 0;font-size:14px;color:var(--bk-soft);border-top:1px solid rgba(255,255,255,.06);}
body.bk-page .bank-card h3 + .bank-row{border-top:0;}
body.bk-page .bank-row strong{color:#fff;font-size:14.5px;letter-spacing:.02em;}
body.bk-page .bank-row strong:last-child{grid-column:2 / 4;}
body.bk-page .bk-copy{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--bk-line);background:rgba(255,255,255,.05);color:var(--bk-soft);font:600 11.5px var(--font-body);cursor:pointer;transition:.15s;}
body.bk-page .bk-copy:hover{border-color:var(--bk-gold);color:var(--bk-gold);}
body.bk-page .bk-copy.is-done{border-color:#2fbf7a;color:#8ff0bd;background:rgba(47,191,122,.12);}
body.bk-page #payfastCard .panel-sub{color:var(--bk-soft);}
/* next steps */
body.bk-page .steps{margin-bottom:12px;}
body.bk-page #eftSteps{margin-bottom:0;}
body.bk-page .step{gap:12px;margin-bottom:12px;font-size:14px;line-height:1.5;color:var(--bk-soft);}
body.bk-page .step-num{width:24px;height:24px;font-size:11.5px;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,var(--bk-gold2));}
body.bk-page .step strong{color:#fff;}
/* actions */
body.bk-page #downloadConfirmation{height:54px;display:flex !important;align-items:center;justify-content:center;margin-top:8px;font-size:16px;}
body.bk-page #doneFinePrint{text-align:center;color:var(--bk-mute);font-size:12.5px;line-height:1.5;}
body.bk-page .btn-secondary{height:48px;border-radius:14px;background:transparent;border:1px solid var(--bk-line);color:var(--bk-ink);font-weight:600;}
body.bk-page .btn-secondary:hover:not(:disabled){border-color:var(--bk-gold);color:var(--bk-gold);}
body.bk-page .btn-secondary:disabled{color:var(--bk-mute);opacity:.6;}
@media (max-width:520px){
  body.bk-page .overlay-card{padding:24px 18px 20px;border-radius:22px;}
  body.bk-page .overlay-head h2{font-size:24px;}
  body.bk-page .ticket-row{flex-wrap:wrap;}
}


/* ================= Compact sizing (events + booking pages) ================= */
/* events page */
.ev-page .wrap{max-width:1240px;}
.ev-main{padding-top:36px;padding-bottom:56px;}
.ev-hero{margin-bottom:30px;}
.ev-eyebrow{font-size:11px;margin-bottom:12px;}
.ev-title{font-size:clamp(28px,3.8vw,44px);margin-bottom:12px;}
.ev-title-sub{font-size:clamp(15px,1.6vw,19px);margin-top:6px;}
.ev-lede{font-size:15px;margin-bottom:18px;max-width:540px;}
.ev-facts li{font-size:12.5px;padding:6px 12px 6px 6px;}
.ev-fact-ico{width:22px;height:22px;}
.ev-fact-ico svg{width:12px;height:12px;}
.ev-glass{background:rgba(20,17,15,.62);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px 24px 26px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 70px -36px rgba(0,0,0,.85);}
.ev-section-head{margin-bottom:18px;padding-bottom:14px;}
.ev-section-head h2{font-size:21px;}
.ev-section-head p{font-size:13px;margin-top:4px;}
.ev-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.ev-card{border-radius:16px;}
.ev-date{width:46px;left:12px;top:12px;padding:6px 0 5px;border-radius:10px;}
.ev-date b{font-size:19px;}
.ev-date span{font-size:9px;}
.ev-badge{right:12px;top:12px;font-size:9.5px;padding:5px 9px;}
.ev-body{gap:11px;padding:14px 16px 16px;}
.ev-name{font-size:17.5px;}
.ev-meta{gap:6px;}
.ev-meta li{font-size:13px;gap:8px;}
.ev-meta svg{width:14px;height:14px;}
.ev-cta{height:38px;border-radius:10px;font-size:13.5px;}
.ev-skel{min-height:320px;}
.ev-footer-logo{height:28px;}
@media (max-width:640px){.ev-glass{padding:16px 14px 18px;border-radius:18px;}}

/* booking page */
body.bk-page .wrap{max-width:1240px;}
body.bk-page .main-grid{padding-top:32px;padding-bottom:52px;}
body.bk-page .hero{margin-bottom:24px;}
body.bk-page .hero .eyebrow{font-size:11px;margin-bottom:10px;}
body.bk-page .event-title{font-size:clamp(26px,3.6vw,42px);margin-bottom:14px;}
body.bk-page .meta-chip{font-size:13px;padding:6px 12px 6px 7px;gap:7px;}
body.bk-page .meta-chip svg{width:22px;height:22px;padding:5px;}
body.bk-page .panel{padding:22px 24px 24px;border-radius:20px;}
body.bk-page .panel-head h2{font-size:19px;gap:10px;}
body.bk-page #seatSelectionSection > .panel-head h2::before,
body.bk-page #entryQtySection > .panel-head h2::before,
body.bk-page #raceCategorySection > .panel-head h2::before,
body.bk-page .bk-review-head h2::before{width:26px;height:26px;font-size:12px;}
body.bk-page .panel-head .panel-sub{margin-left:36px;font-size:13.5px;margin-top:4px;}
body.bk-page .legend{margin:12px 0 12px 36px;}
body.bk-page .legend-item{font-size:12px;padding:4px 10px;}
body.bk-page .block-key-item{font-size:12px;padding:5px 11px;}
body.bk-page #entryQtySection,body.bk-page #raceCategorySection,body.bk-page .summary-block,body.bk-page #entryQtySection:not([hidden]) ~ .summary-block{margin-top:26px;padding-top:22px;}
body.bk-page #entryQtySection .field,body.bk-page #entryRemainingNote,body.bk-page #entryStatusNote,body.bk-page .entry-ticket-type-list,body.bk-page .summary-block > *:not(.bk-review-head){margin-left:36px;}
body.bk-page .summary-block > *:not(.bk-review-head){max-width:560px;}
body.bk-page .qty-stepper{height:40px;}
body.bk-page .stepper-btn{width:40px;height:40px;font-size:18px;}
body.bk-page .stepper-input{width:46px;height:40px;font-size:15px;}
body.bk-page .summary-total strong{font-size:22px;}
body.bk-page .summary-card{font-size:13.5px;}
body.bk-page .consent-row{font-size:13px;}
body.bk-page .btn-primary{font-size:15px;}
body.bk-page .bk-review-head{margin-bottom:14px;}
@media (max-width:640px){
  body.bk-page .panel{padding:18px 14px 20px;}
  body.bk-page .panel-head .panel-sub,body.bk-page .legend,body.bk-page #entryQtySection .field,body.bk-page #entryRemainingNote,body.bk-page #entryStatusNote,body.bk-page .entry-ticket-type-list,body.bk-page .summary-block > *:not(.bk-review-head){margin-left:0;}
}

/* Slim professional footer (events + booking pages) */
.ev-footer{padding:0;margin-top:8px;background:rgba(8,7,6,.82);border-top:1px solid rgba(245,200,66,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ev-footer-in{padding-top:14px;padding-bottom:14px;gap:12px;}
.ev-footer-logo{height:22px;opacity:.9;}
.ev-footer p{font-size:12px;color:#8f887a;}
.ev-footer p strong{color:#c9c2b2;font-weight:600;}
@media (max-width:640px){.ev-footer-in{flex-direction:column;gap:6px;padding-top:12px;padding-bottom:12px;}.ev-footer p{font-size:11px;}}
.ev-footer-logo{display:none;}
.ev-footer-in{justify-content:center;text-align:center;}

/* Full-width layout (events + booking pages): no big side gaps */
.ev-page .wrap,body.bk-page .wrap{max-width:none;padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px);}
.ev-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}

/* ================= Header bar: balanced height and spacing on every screen ================= */
.topbar-inner{
  min-height:76px;
  padding:12px 28px;
  gap:16px;
}
.brand{flex:0 0 auto;}
.brand-logo{height:50px;transform:translateY(-6%);}
.topbar-inner > :last-child{min-width:0;}
.topbar-note{
  max-width:46vw;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:8px 16px;
  font-size:12.5px;
  border-color:rgba(245,200,66,.28);
  background:rgba(245,200,66,.06);
  color:#e9e3d4;
}
@media (max-width:640px){
  .topbar-inner{min-height:68px;padding:12px 18px;gap:12px;}
  .brand-logo{height:40px;transform:translateY(-5%);}
  .topbar-note{font-size:11px;padding:7px 12px;max-width:52vw;}
}
@media (max-width:380px){
  .topbar-inner{min-height:62px;padding:10px 14px;}
  .brand-logo{height:34px;}
  .topbar-note{font-size:10.5px;padding:6px 10px;max-width:50vw;}
}


/* ================= Events page v3: professional organiser layout ================= */
.ev-page .ev-main{max-width:1180px;margin:0 auto;padding-top:44px;padding-bottom:64px;}
/* calmer, darker background photo so content reads cleanly */
body.ev-page.has-custom-bg::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,20,.72) 0%,rgba(18,18,20,.86) 45%,rgba(18,18,20,.94) 100%);}
body.ev-page .topbar,body.ev-page .ev-main,body.ev-page .site-footer{position:relative;z-index:1;}
body.ev-page .topbar{position:sticky;top:0;z-index:20;}

/* hero: organiser card */
.ev-hero3{max-width:none;margin:0 0 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;
  padding:30px 32px;border-radius:24px;background:linear-gradient(135deg,rgba(40,40,45,.78),rgba(28,28,32,.78));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);}
.ev-org{display:flex;align-items:center;gap:22px;min-width:0;}
.ev-org-badge{flex:none;width:76px;height:76px;border-radius:20px;display:grid;place-items:center;
  font:800 26px/1 var(--font-body);letter-spacing:.02em;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,#f2c230 60%,#d9a520);
  box-shadow:0 0 0 5px rgba(245,200,66,.12),0 14px 30px -14px rgba(242,194,48,.8);}
.ev-org-text{min-width:0;}
.ev-hero3 .ev-eyebrow{margin:0 0 8px;font-size:11px;}
.ev-hero3 .ev-title{margin:0 0 8px;font:700 clamp(26px,3.4vw,40px)/1.1 var(--font-display);text-shadow:none;}
.ev-hero3 .ev-title-sub{display:none;}
.ev-hero3 .ev-lede{margin:0;max-width:560px;font-size:15px;line-height:1.55;color:#b9b3a6;}
.ev-hero3 .ev-facts{display:flex;flex-direction:column;gap:10px;}
.ev-hero3 .ev-facts li{gap:12px;padding:10px 16px 10px 10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:13px;}
.ev-hero3 .ev-facts li > span:last-child{display:flex;flex-direction:column;line-height:1.25;}
.ev-hero3 .ev-facts b{font-weight:600;color:#f4f1ea;font-size:13.5px;}
.ev-hero3 .ev-facts small{font-size:11.5px;color:#8f887a;}
.ev-hero3 .ev-fact-ico{width:32px;height:32px;border-radius:10px;}
.ev-hero3 .ev-fact-ico svg{width:15px;height:15px;}

/* list */
.ev-list3{background:none;border:0;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.ev-list3 .ev-section-head{margin:0 0 18px;padding:0 4px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
.ev-list3 .ev-section-head h2{font:700 22px/1.2 var(--font-display);}
.ev-list3 .ev-grid{grid-template-columns:minmax(0,1fr);gap:18px;}

/* horizontal event cards */
.ev-list3 .ev-card{flex-direction:row;min-height:230px;border-radius:20px;background:rgba(32,32,36,.92);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px -36px rgba(0,0,0,.95);transition:transform .25s,border-color .25s,box-shadow .25s;}
.ev-list3 a.ev-card:hover{transform:translateY(-3px);border-color:rgba(245,200,66,.45);}
.ev-list3 .ev-media{flex:0 0 40%;aspect-ratio:auto;min-height:230px;}
.ev-list3 .ev-date{width:58px;left:16px;top:16px;padding:8px 0 7px;border-radius:12px;}
.ev-list3 .ev-date b{font-size:23px;}
.ev-list3 .ev-date span{font-size:10px;}
.ev-list3 .ev-badge{right:16px;top:16px;font-size:10px;padding:6px 11px;}
.ev-list3 .ev-body{padding:26px 30px;gap:16px;justify-content:center;}
.ev-list3 .ev-name{font:700 clamp(22px,2.4vw,28px)/1.2 var(--font-display);}
.ev-list3 .ev-meta{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:28px;row-gap:10px;}
.ev-list3 .ev-meta li{font-size:14.5px;color:#cfc9bb;}
.ev-list3 .ev-meta li:last-child{grid-column:1/-1;}
.ev-list3 .ev-meta svg{width:16px;height:16px;}
.ev-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);}
.ev-foot-note{font-size:13px;color:#8f887a;}
.ev-list3 .ev-cta{margin:0;height:46px;padding:0 26px;border-radius:999px;font-size:15px;flex:none;}
.ev-list3 .ev-skel{min-height:230px;}

@media (max-width:900px){
  .ev-hero3{grid-template-columns:minmax(0,1fr);padding:24px 22px;gap:20px;}
  .ev-hero3 .ev-facts{flex-direction:row;flex-wrap:wrap;}
  .ev-hero3 .ev-facts li{flex:1 1 180px;}
}
@media (max-width:720px){
  .ev-page .ev-main{padding-top:24px;padding-bottom:40px;}
  .ev-hero3{padding:20px 18px;border-radius:20px;margin-bottom:26px;}
  .ev-org{gap:14px;align-items:flex-start;}
  .ev-org-badge{width:54px;height:54px;border-radius:15px;font-size:19px;}
  .ev-hero3 .ev-lede{font-size:14px;}
  .ev-hero3 .ev-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .ev-hero3 .ev-facts li{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px;border-radius:12px;}
  .ev-hero3 .ev-facts li > span:last-child{align-items:center;}
  .ev-hero3 .ev-facts small{display:none;}
  .ev-hero3 .ev-facts b{font-size:11.5px;line-height:1.25;}
  .ev-hero3 .ev-fact-ico{width:28px;height:28px;border-radius:9px;}
  .ev-hero3 .ev-title{font-size:26px;}
  .ev-list3 .ev-card{flex-direction:column;min-height:0;}
  .ev-list3 .ev-media{flex:none;aspect-ratio:16/9;min-height:0;}
  .ev-list3 .ev-body{padding:18px 18px 20px;gap:14px;}
  .ev-list3 .ev-meta{grid-template-columns:minmax(0,1fr);}
  .ev-foot{flex-direction:column;align-items:stretch;gap:12px;}
  .ev-foot-note{text-align:center;}
  .ev-list3 .ev-cta{width:100%;}
}

/* ---- Events page: slim, sleek organiser banner ---- */
.ev-hero3{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:16px 22px;margin-bottom:28px;border-radius:18px;
  background:rgba(30,30,34,.82);border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 40px -30px rgba(0,0,0,.9);}
.ev-org{gap:16px;align-items:center;}
.ev-org-badge{width:48px;height:48px;border-radius:13px;font-size:17px;box-shadow:0 0 0 3px rgba(245,200,66,.12);}
.ev-hero3 .ev-eyebrow{display:none;}
.ev-hero3 .ev-title{margin:0 0 3px;font-size:clamp(20px,2vw,24px);line-height:1.2;}
.ev-hero3 .ev-lede{font-size:13.5px;line-height:1.45;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-hero3 .ev-facts{flex-direction:row;gap:8px;}
.ev-hero3 .ev-facts li{padding:6px 12px 6px 6px;border-radius:999px;gap:8px;}
.ev-hero3 .ev-facts small{display:none;}
.ev-hero3 .ev-facts b{font-size:12.5px;font-weight:600;}
.ev-hero3 .ev-fact-ico{width:24px;height:24px;border-radius:50%;}
.ev-hero3 .ev-fact-ico svg{width:12px;height:12px;}
@media (max-width:1100px){
  .ev-hero3{grid-template-columns:minmax(0,1fr);gap:12px;}
  .ev-hero3 .ev-facts{flex-wrap:wrap;}
  .ev-hero3 .ev-facts li{flex:0 0 auto;}
}
@media (max-width:720px){
  .ev-hero3{padding:14px 14px;border-radius:16px;margin-bottom:22px;}
  .ev-org-badge{width:42px;height:42px;font-size:15px;border-radius:12px;}
  .ev-hero3 .ev-title{font-size:20px;}
  .ev-hero3 .ev-lede{white-space:normal;font-size:13px;}
  .ev-hero3 .ev-facts{display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;}
  .ev-hero3 .ev-facts li{flex:1 1 0;min-width:0;flex-direction:row;justify-content:center;text-align:left;padding:6px 8px 6px 5px;border-radius:999px;gap:6px;}
  .ev-hero3 .ev-facts b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ev-hero3 .ev-fact-ico{width:20px;height:20px;border-radius:50%;flex:none;}
  .ev-hero3 .ev-fact-ico svg{width:10px;height:10px;}
}
@media (max-width:720px){
  .ev-hero3 .ev-facts{flex-wrap:wrap;overflow:visible;gap:6px;}
  .ev-hero3 .ev-facts li{flex:0 0 auto;padding:5px 10px 5px 5px;}
  .ev-hero3 .ev-facts b{overflow:visible;}
}
@media (max-width:720px){
  .ev-hero3 .ev-facts{flex-wrap:nowrap;justify-content:space-between;}
  .ev-hero3 .ev-facts li{flex:1 1 0;justify-content:center;padding:6px 4px;}
  .ev-hero3 .ev-fact-ico{display:none;}
  .ev-hero3 .ev-facts b{font-size:11px;white-space:nowrap;}
}

/* ================= Events page v4: featured hero + more events ================= */
.ev-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ev-page .ev-main{max-width:1280px;margin:0 auto;padding-top:32px;padding-bottom:64px;}

.ev-featured{margin:0 0 44px;}
.ev-feature-skel{min-height:520px;border-radius:28px;}
.ev-card.ev-feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:540px;border-radius:28px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#18181b;box-shadow:0 40px 90px -50px rgba(0,0,0,.95);transform:none;}
.ev-card.ev-feature:hover{transform:none;border-color:rgba(245,200,66,.4);}
.ev-feature .ev-media{position:absolute;inset:0;aspect-ratio:auto;min-height:0;}
.ev-feature .ev-media::after{background:
  linear-gradient(90deg,rgba(14,14,16,.92) 0%,rgba(14,14,16,.7) 38%,rgba(14,14,16,.15) 70%,rgba(14,14,16,0) 100%),
  linear-gradient(0deg,rgba(14,14,16,.85) 0%,rgba(14,14,16,0) 55%);}
a.ev-card.ev-feature:hover .ev-media{filter:brightness(1.05);}
.ev-feature .ev-media{transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .3s;}
a.ev-card.ev-feature:hover .ev-media{transform:scale(1.03);}
.ev-feature .ev-date{left:32px;top:32px;width:70px;padding:10px 0 9px;border-radius:16px;}
.ev-feature .ev-date b{font-size:30px;}
.ev-feature .ev-date span{font-size:11px;}
.ev-feature .ev-badge{right:32px;top:32px;font-size:11px;padding:8px 14px;}
.ev-feature .ev-body{position:relative;z-index:1;max-width:640px;padding:0 48px 48px;gap:14px;background:none;flex:0 0 auto;}
.ev-presents{margin:0;font:700 12px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:#f5c842;}
.ev-feature .ev-name{font:700 clamp(34px,4.6vw,60px)/1.04 var(--font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5);}
.ev-feature .ev-meta{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 22px;}
.ev-feature .ev-meta li{font-size:15.5px;color:#e7e2d6;}
.ev-feature .ev-meta li:last-child span{-webkit-line-clamp:1;line-clamp:1;}
.ev-feature .ev-meta svg{width:17px;height:17px;}
.ev-feature .ev-foot{border:0;padding-top:10px;justify-content:flex-start;gap:18px;}
.ev-feature .ev-foot-note{order:2;color:#b9b3a6;}
.ev-feature .ev-cta{order:1;margin:0;height:54px;padding:0 34px;border-radius:999px;font-size:16.5px;box-shadow:0 18px 40px -16px rgba(242,194,48,.85);}

/* more events: classic vertical cards */
.ev-more{margin-top:0;}
.ev-more .ev-section-head{border-bottom:1px solid rgba(255,255,255,.08);padding:0 2px 14px;margin-bottom:20px;}
.ev-more .ev-section-head h2{font:700 24px/1.2 var(--font-display);}
.ev-more .ev-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.ev-more .ev-card{flex-direction:column;border-radius:18px;background:rgba(32,32,36,.94);}
.ev-more .ev-foot{border-top:1px solid rgba(255,255,255,.07);padding-top:14px;}
.ev-more .ev-foot-note{display:none;}
.ev-more .ev-cta{width:100%;height:44px;border-radius:999px;}

@media (max-width:720px){
  .ev-page .ev-main{padding-top:18px;padding-bottom:40px;}
  .ev-featured{margin-bottom:32px;}
  .ev-card.ev-feature{min-height:520px;border-radius:22px;}
  .ev-feature .ev-media::after{background:linear-gradient(0deg,rgba(14,14,16,.96) 0%,rgba(14,14,16,.82) 42%,rgba(14,14,16,.1) 75%,rgba(14,14,16,.15) 100%);}
  .ev-feature .ev-date{left:16px;top:16px;width:56px;padding:8px 0 7px;border-radius:13px;}
  .ev-feature .ev-date b{font-size:24px;}
  .ev-feature .ev-badge{right:16px;top:16px;font-size:10px;padding:6px 11px;}
  .ev-feature .ev-body{padding:0 20px 22px;gap:12px;}
  .ev-presents{font-size:10.5px;letter-spacing:.18em;}
  .ev-feature .ev-name{font-size:32px;}
  .ev-feature .ev-meta{flex-direction:column;gap:8px;}
  .ev-feature .ev-meta li{font-size:14.5px;}
  .ev-feature .ev-meta li:last-child span{-webkit-line-clamp:2;line-clamp:2;}
  .ev-feature .ev-foot{flex-direction:column;align-items:stretch;gap:10px;}
  .ev-feature .ev-cta{width:100%;height:52px;}
  .ev-feature .ev-foot-note{text-align:center;font-size:12.5px;}
}


/* ================= Running events: category picker + dropdowns ================= */
body.bk-page select{color-scheme:dark;}
body.bk-page select option{background:#1f1f23;color:#f4f4f5;}
body.bk-page #raceCategorySection .panel-sub#raceStatusNote{margin-left:44px;}
body.bk-page .race-category-picker{margin:20px 0 22px 44px;gap:12px;}
body.bk-page .race-category-option{position:relative;gap:16px;padding:16px 20px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);color:#f4f4f5;transition:border-color .2s,background .2s,transform .2s;}
@media (hover:hover) and (pointer:fine){
  body.bk-page .race-category-option:hover{border-color:rgba(245,200,66,.45);background:rgba(245,200,66,.05);}
}
body.bk-page .race-category-option input[type="radio"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;padding:0;margin:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);background:transparent;display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
body.bk-page .race-category-option input[type="radio"]::after{content:'';width:10px;height:10px;border-radius:50%;background:#1a1406;transform:scale(0);transition:transform .15s;}
body.bk-page .race-category-option.is-checked{border-color:#f5c842;background:linear-gradient(135deg,rgba(245,200,66,.14),rgba(245,200,66,.04));
  box-shadow:0 0 0 1px rgba(245,200,66,.4),0 14px 30px -18px rgba(242,194,48,.6);}
body.bk-page .race-category-option.is-checked input[type="radio"]{border-color:#f5c842;background:linear-gradient(135deg,#ffe9a0,#f2c230);}
body.bk-page .race-category-option.is-checked input[type="radio"]::after{transform:scale(1);}
body.bk-page .race-category-name{font:700 17px/1.25 'Inter',sans-serif;color:#fff;letter-spacing:-.01em;}
body.bk-page .race-category-armband{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;
  font:600 12.5px/1 'Inter',sans-serif;color:#d4d4d8;background:rgba(255,255,255,.06);white-space:nowrap;}
body.bk-page .race-category-armband:empty{display:none;}
body.bk-page .race-armband-dot{width:10px;height:10px;border-radius:50%;background:#a1a1aa;box-shadow:0 0 0 2px rgba(255,255,255,.18);}
body.bk-page .race-category-price{font:800 17px/1 'Inter',sans-serif;color:#f5c842;min-width:96px;text-align:right;}

/* age bracket + gender side by side, dark fields that match the page */
body.bk-page .race-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0 0 26px 44px;}
body.bk-page .race-extras .field{margin:0;}
body.bk-page .race-extras .field[hidden]{display:none;}
body.bk-page .race-extras label{font:600 13px 'Inter',sans-serif;color:#d4d4d8;margin-bottom:8px;}
body.bk-page .race-extras .optional-tag{color:#8c8c95;}
body.bk-page .race-extras select{appearance:none;-webkit-appearance:none;height:50px;padding:0 44px 0 16px;border-radius:14px;
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c842' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px;
  border:1px solid rgba(255,255,255,.14);color:#f4f4f5;font:500 15px 'Inter',sans-serif;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
body.bk-page .race-extras select:hover{border-color:rgba(245,200,66,.45);}
body.bk-page .race-extras select:focus{outline:none;border-color:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.2);}
body.bk-page .topbar-note{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.02em;}

@media (max-width:760px){
  body.bk-page .race-category-picker,body.bk-page .race-extras,body.bk-page #raceCategorySection .panel-sub#raceStatusNote{margin-left:0;}
  body.bk-page .race-category-option{flex-wrap:wrap;padding:14px 16px;row-gap:8px;}
  body.bk-page .race-category-name{flex:1 1 0;}
  body.bk-page .race-category-armband{order:4;margin-left:38px;}
  body.bk-page .race-category-price{min-width:0;}
  body.bk-page .race-extras{grid-template-columns:minmax(0,1fr);}
}
body.bk-page .race-extras select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c842' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 16px center !important;background-size:18px !important;background-color:rgba(255,255,255,.04) !important;}


/* ================= Running events v2: compact tiles + Globook dropdowns ================= */
body.bk-page .race-category-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,210px));gap:12px;margin:18px 0 22px 44px;max-width:none;}
body.bk-page .race-category-option{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name radio" "band band" "price price";
  align-items:center;row-gap:10px;column-gap:10px;padding:14px 16px 16px;border-radius:16px;min-height:0;flex-wrap:nowrap;}
body.bk-page .race-category-option input[type="radio"]{grid-area:radio;width:20px;height:20px;}
body.bk-page .race-category-name{grid-area:name;flex:none;font-size:20px;line-height:1.1;}
body.bk-page .race-category-armband{grid-area:band;justify-self:start;margin:0;order:0;font-size:12px;padding:4px 10px;}
body.bk-page .race-category-price{grid-area:price;text-align:left;min-width:0;font-size:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
body.bk-page .race-category-option.is-checked .race-category-price{border-top-color:rgba(245,200,66,.3);}

body.bk-page .race-extras{grid-template-columns:repeat(2,minmax(0,240px));gap:14px;margin:0 0 26px 44px;}
body.bk-page .race-extras label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a1a1aa;margin-bottom:7px;}
body.bk-page .race-extras .optional-tag{text-transform:none;letter-spacing:0;}
body.bk-page select.gb-select-native{position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;padding:0 !important;border:0 !important;}
body.bk-page .race-extras .field{position:relative;}
.gb-select{position:relative;}
.gb-select-btn{width:100%;height:44px;padding:0 40px 0 14px;border-radius:12px;text-align:left;cursor:pointer;
  font:500 14.5px 'Inter',sans-serif;color:#f4f4f5;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c842' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/16px;
  transition:border-color .2s,box-shadow .2s;}
.gb-select-btn.is-placeholder{color:#8c8c95;}
.gb-select-btn:hover{border-color:rgba(245,200,66,.45);}
.gb-select.is-open .gb-select-btn,.gb-select-btn:focus-visible{outline:none;border-color:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.18);}
.gb-select-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:240px;overflow:auto;
  border-radius:14px;background:#1f1f23;border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 50px -18px rgba(0,0,0,.9);
  animation:gbSelIn .14s ease-out;}
.gb-select-list[hidden]{display:none;}
.gb-select-list li{padding:10px 12px;border-radius:9px;font:500 14px 'Inter',sans-serif;color:#e4e4e7;cursor:pointer;outline:none;}
.gb-select-list li:hover,.gb-select-list li:focus{background:rgba(245,200,66,.1);color:#fff;}
.gb-select-list li.is-selected{color:#f5c842;font-weight:700;}
.gb-select-list li.is-selected::after{content:'✓';float:right;}
@keyframes gbSelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  body.bk-page .race-category-picker{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;}
  body.bk-page .race-extras{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;}
  body.bk-page .race-category-option{display:grid;}
  body.bk-page .race-category-armband{margin-left:0;}
}
@media (max-width:380px){ body.bk-page .race-category-picker,body.bk-page .race-extras{grid-template-columns:minmax(0,1fr);} }
body.bk-page .race-extras{align-items:end;}
@media (max-width:760px){ body.bk-page .race-extras label{font-size:11px;letter-spacing:.04em;} }

/* ================= Running events: several entrants per booking ================= */
body.bk-page .race-entrants{display:flex;flex-direction:column;gap:14px;margin:18px 0 26px 44px;max-width:760px;}
body.bk-page .race-entrant{padding:16px 18px 18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);}
body.bk-page .re-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
body.bk-page .re-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 'Inter',sans-serif;color:#1a1406;background:linear-gradient(135deg,#ffe9a0,#f2c230);}
body.bk-page .re-title{font:700 15px/1 'Inter',sans-serif;color:#fff;}
body.bk-page .re-remove{margin-left:auto;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;
  color:#a1a1aa;font:600 12.5px 'Inter',sans-serif;cursor:pointer;transition:color .2s,border-color .2s;}
body.bk-page .re-remove:hover{color:#fca5a5;border-color:rgba(248,113,113,.5);}
body.bk-page .re-name{margin:0 0 12px;max-width:494px;}
body.bk-page .re-name label,body.bk-page .re-label{display:block;margin:0 0 7px;font:600 12px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#a1a1aa;}
body.bk-page .re-name .optional-tag{text-transform:none;letter-spacing:0;color:#71717a;}
body.bk-page .re-name input{height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  color:#f4f4f5;font:500 14.5px 'Inter',sans-serif;}
body.bk-page .re-name input::placeholder{color:#71717a;}
body.bk-page .re-name input:focus{outline:none;border-color:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.18);}
body.bk-page .race-entrant .race-category-picker.re-cats{margin:0 0 12px;grid-template-columns:repeat(auto-fill,minmax(150px,170px));gap:10px;}
body.bk-page .race-entrant .race-category-option{padding:12px 14px 13px;row-gap:8px;border-radius:14px;}
body.bk-page .race-entrant .race-category-name{font-size:17px;}
body.bk-page .race-entrant .race-category-price{font-size:14.5px;padding-top:8px;}
body.bk-page .race-entrant .race-extras{margin:0;}
body.bk-page .re-add{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;cursor:pointer;
  border:1.5px dashed rgba(245,200,66,.5);background:rgba(245,200,66,.05);color:#f5c842;font:700 14.5px 'Inter',sans-serif;transition:background .2s,border-color .2s;}
body.bk-page .re-add span{font-size:20px;line-height:1;}
body.bk-page .re-add:hover{background:rgba(245,200,66,.12);border-color:#f5c842;}
@media (max-width:760px){
  body.bk-page .race-entrants{margin-left:0;}
  body.bk-page .race-entrant{padding:14px;}
  body.bk-page .race-entrant .race-category-picker.re-cats{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.bk-page .re-add{align-self:stretch;justify-content:center;}
}

/* confirmation: one line per running entrant */
body.bk-page .ticket-row.is-entrants{flex-direction:column;align-items:stretch;gap:10px;}
body.bk-page .ticket-row.is-entrants > strong{text-align:left;font-family:'Inter',sans-serif;font-size:14px;}
.conf-entrants{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.conf-entrants li{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.conf-entrants .ce-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.conf-entrants .ce-top b{font:700 14.5px 'Inter',sans-serif;color:#fff;}
.conf-entrants .ce-cat{font:800 14px 'Inter',sans-serif;color:#f5c842;white-space:nowrap;}
.conf-entrants .ce-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;}
.conf-entrants .ce-band{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.06);font:600 12px 'Inter',sans-serif;color:#d4d4d8;}
.conf-entrants .ce-extra{font:500 12.5px 'Inter',sans-serif;color:#a1a1aa;}

/* ===== Confirmation overlay — grey & gold, matches the PDF (v37) ===== */
body.bk-page .overlay{background:rgba(12,12,14,.72);}
body.bk-page .overlay-card{max-width:540px;padding:0 28px 24px;border-radius:16px;background:#1f1f23;border:1px solid #38383f;border-top:3px solid #f5c842;box-shadow:0 40px 90px -30px rgba(0,0,0,.85);}
body.bk-page .overlay-head{text-align:left;margin:0 0 18px;}
body.bk-page .check-badge{display:none;}
.conf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 18px;margin-bottom:18px;border-bottom:1px solid #38383f;}
.conf-logo{width:112px;height:auto;display:block;}
.conf-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid rgba(245,200,66,.35);background:rgba(245,200,66,.1);color:#f5c842;font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.conf-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#f5c842;box-shadow:0 0 0 3px rgba(245,200,66,.2);}
body.bk-page .overlay-head h2{font:700 24px/1.2 'Poppins','Inter',sans-serif;color:#fff;margin:0 0 6px;}
body.bk-page .overlay-head p{color:#a1a1aa;font-size:14px;line-height:1.5;}

body.bk-page .ticket-strip{padding:4px 18px 0;margin-bottom:14px;border-radius:12px;border:1px solid #38383f;background:#28282d;overflow:hidden;}
body.bk-page .ticket-strip::before,body.bk-page .ticket-strip::after{display:none;}
body.bk-page .ticket-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;font-size:13.5px;color:#a1a1aa;border-top:1px solid #38383f;}
body.bk-page .ticket-row:first-child{border-top:0;}
body.bk-page .ticket-row strong{color:#f4f4f5;font:600 14px 'Inter',sans-serif;text-align:right;}
body.bk-page .ticket-row.ticket-ref strong{font:700 17px var(--font-mono);letter-spacing:.06em;color:#f5c842;}
body.bk-page .ticket-row.total{margin:4px -18px 0;padding:14px 18px;background:#303036;border-top:1px solid #38383f;}
body.bk-page .ticket-row.total span{color:#f4f4f5;font-weight:600;}
body.bk-page .ticket-row.total strong{font:700 24px var(--font-mono);color:#f5c842;}

body.bk-page .bank-card{padding:14px 18px 6px;margin-bottom:14px;border-radius:12px;background:#28282d;border:1px solid #38383f;}
body.bk-page .bank-card h3,.conf-steps-title{margin:0 0 6px;font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f5c842;}
.conf-steps-title{margin:20px 0 12px;}
body.bk-page .bank-row{padding:10px 0;font-size:13.5px;color:#a1a1aa;border-top:1px solid #38383f;}
body.bk-page .bank-card h3 + .bank-row{border-top:0;}
body.bk-page .bank-row strong{color:#f4f4f5;font-size:14px;}
body.bk-page .bk-copy{border-color:#45454d;background:#303036;color:#d4d4d8;border-radius:6px;}

.conf-entrants-card .conf-entrants{list-style:none;margin:0;padding:0;display:block;counter-reset:ce;}
.conf-entrants-card .conf-entrants li{display:flex;gap:12px;padding:11px 0;border:0;border-top:1px solid #38383f;border-radius:0;background:none;counter-increment:ce;}
.conf-entrants-card .conf-entrants li:first-child{border-top:0;}
.conf-entrants-card .conf-entrants li::before{content:counter(ce);flex:none;width:16px;padding-top:2px;font:600 12px 'Inter',sans-serif;color:#71717a;}
.conf-entrants-card .ce-body{flex:1;min-width:0;}
.conf-entrants-card .ce-top b{font:700 14.5px 'Inter',sans-serif;color:#f4f4f5;}
.conf-entrants-card .ce-cat{font:700 14px 'Inter',sans-serif;color:#f5c842;}
.conf-entrants-card .ce-sub{gap:6px;margin-top:4px;}
.conf-entrants-card .ce-band{padding:0;background:none;gap:6px;font:500 12.5px 'Inter',sans-serif;color:#a1a1aa;}
.conf-entrants-card .ce-extra{font:500 12.5px 'Inter',sans-serif;color:#a1a1aa;}
.conf-entrants-card .ce-extra::before{content:'·';margin-right:6px;color:#71717a;}

body.bk-page .step{gap:12px;margin-bottom:10px;font-size:13.5px;color:#d4d4d8;}
body.bk-page .step-num{width:22px;height:22px;font-size:11px;background:#f5c842;color:#1a1406;}
body.bk-page #downloadConfirmation{border-radius:10px;}
body.bk-page #closeOverlay{border-radius:10px;}
@media (max-width:560px){
  body.bk-page .overlay-card{padding:0 18px 20px;}
  body.bk-page .overlay-head h2{font-size:21px;}
  .conf-logo{width:96px;}
}
/* Booking page: let the event background show through more (v38) */
body.bk-page{--bk-card:rgba(22,20,17,.58);}
body.bk-page .panel{backdrop-filter:blur(5px) saturate(1.1);-webkit-backdrop-filter:blur(5px) saturate(1.1);}
/* Inner form blocks darker (solid enough to read), outer panel stays see-through (v39) */
body.bk-page .race-entrant{background:rgba(20,20,23,.82);border-color:rgba(255,255,255,.1);}
body.bk-page .race-category-option{background:rgba(31,31,35,.9);}
body.bk-page .race-category-option.is-checked{background:linear-gradient(135deg,rgba(245,200,66,.16),rgba(245,200,66,.05)),rgba(31,31,35,.92);}
body.bk-page .re-name input,
body.bk-page .details-fields input,body.bk-page .details-fields select,body.bk-page #tableCodeGate input{background-color:rgba(14,14,16,.78);}
body.bk-page .gb-select-btn{background-color:rgba(14,14,16,.78);}
body.bk-page .legend-item{background:rgba(20,20,23,.8);}
@media (hover:hover) and (pointer:fine){
  body.bk-page .race-category-option:hover{background:linear-gradient(rgba(245,200,66,.06),rgba(245,200,66,.06)),rgba(31,31,35,.92);}
}
/* "Review & book" sits in its own darker block (v40) */
body.bk-page .summary-block{margin-top:30px;padding:24px 24px 20px;border:1px solid rgba(255,255,255,.1);border-radius:20px;
  background:rgba(20,20,23,.84);box-shadow:0 24px 50px -30px rgba(0,0,0,.8);}
body.bk-page .summary-block .summary-card,
body.bk-page .summary-block .consent-row{background:rgba(255,255,255,.035);}
@media (max-width:560px){body.bk-page .summary-block{padding:18px 14px 16px;border-radius:16px;}}
/* Review block lines up with the entrant cards above (same indent + width) (v41) */
body.bk-page .summary-block,body.bk-page #entryQtySection:not([hidden]) ~ .summary-block{max-width:760px !important;margin-left:44px !important;box-sizing:border-box;}
body.bk-page .summary-block > *:not(.bk-review-head){max-width:none;margin-left:0;}
@media (max-width:760px){
  body.bk-page .summary-block,body.bk-page #entryQtySection:not([hidden]) ~ .summary-block{margin-left:0 !important;}
}
/* Ticket-type list (entry events, e.g. Adult / Child): dark block like the review block (v42) */
body.bk-page .entry-ticket-type-list{max-width:760px !important;margin:18px 0 8px 44px;box-sizing:border-box;
  background:rgba(20,20,23,.84);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);}
body.bk-page .entry-ticket-type-row{padding:16px 22px;gap:16px;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;}
body.bk-page .entry-ticket-type-row:last-child{border-bottom:0;}
body.bk-page .entry-ticket-type-row.has-qty{background:linear-gradient(90deg,rgba(245,200,66,.12),rgba(245,200,66,.03));box-shadow:inset 3px 0 0 #f5c842;}
body.bk-page .entry-ticket-type-info{gap:4px;}
body.bk-page .entry-ticket-type-name{font:700 16px/1.25 'Inter',sans-serif;color:#f4f4f5;}
body.bk-page .entry-ticket-type-price{font:600 14px 'Inter',sans-serif;color:#f5c842;}
body.bk-page .entry-ticket-type-remaining{font:600 11.5px 'Inter',sans-serif;color:#e8b04a;}
body.bk-page .entry-ticket-type-controls{gap:6px;}
body.bk-page .entry-ticket-type-list .qty-stepper{background:rgba(14,14,16,.8);border-color:rgba(255,255,255,.14);}
body.bk-page .entry-ticket-type-subtotal{font:700 12px 'Inter',sans-serif;color:#f5c842;}
body.bk-page #entryQtyField input,body.bk-page #entryQtySection .qty-stepper{background-color:rgba(14,14,16,.8);}
@media (max-width:760px){
  body.bk-page .entry-ticket-type-list{margin-left:0;}
  body.bk-page .entry-ticket-type-row{padding:14px 16px;}
}

/* ---- Booking: choose how to pay (Card / EFT), shown when both are on ---- */
.pay-choice{border:0;margin:4px 0 14px;padding:0;min-width:0}
.pay-choice[hidden]{display:none}
.pay-choice-title{padding:0;margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink-900)}
.pay-choice-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-opt{display:block;cursor:pointer;position:relative}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt-box{display:flex;gap:12px;align-items:flex-start;height:100%;box-sizing:border-box;padding:14px;border-radius:14px;border:1.5px solid var(--line-warm);background:var(--paper-50);transition:border-color .15s,background .15s,box-shadow .15s}
.pay-opt-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(201,162,39,.14);color:var(--gold-600)}
.pay-opt-icon svg{width:20px;height:20px}
.pay-opt-text b{display:block;font-size:15px;color:var(--ink-900)}
.pay-opt-text small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--ink-600)}
.pay-opt:hover .pay-opt-box{border-color:var(--gold-600)}
.pay-opt input:focus-visible + .pay-opt-box{box-shadow:0 0 0 3px rgba(240,207,107,.35)}
.pay-opt input:checked + .pay-opt-box{border-color:var(--gold-500);background:rgba(240,207,107,.12);box-shadow:0 0 0 1px var(--gold-500) inset}
.pay-opt input:checked + .pay-opt-box .pay-opt-icon{background:var(--gold-500);color:#1a1406}
.pay-opt input:checked + .pay-opt-box::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1406' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
body.bk-page .pay-choice-title{color:var(--bk-ink,#fff)}
body.bk-page .pay-opt-box{background:rgba(255,255,255,.04);border-color:var(--bk-line,rgba(255,255,255,.12))}
body.bk-page .pay-opt-text b{color:#fff}
body.bk-page .pay-opt-text small{color:var(--bk-mute,#a1a1aa)}
body.bk-page .pay-opt-icon{background:rgba(245,200,66,.12);color:var(--bk-gold,#f5c842)}
body.bk-page .pay-opt:hover .pay-opt-box{border-color:var(--bk-gold,#f5c842)}
body.bk-page .pay-opt input:checked + .pay-opt-box{border-color:var(--bk-gold,#f5c842);background:rgba(245,200,66,.1);box-shadow:0 0 0 1px var(--bk-gold,#f5c842) inset}
body.bk-page .pay-opt input:checked + .pay-opt-box .pay-opt-icon{background:var(--bk-gold,#f5c842);color:#1a1406}
@media (max-width:520px){.pay-choice-opts{grid-template-columns:1fr}}

/* ==========================================================
   Seat map, cleaner look (Nov 2026): smaller block seats with
   smaller numbers, so the plan reads like a real theatre seating
   chart instead of feeling zoomed in, and clearer row letters on
   both ends of each row. Table chairs (.table-chair) are untouched.
   Seat pitch (22px + 5px gap) must match BLOCK_SEAT_PITCH in
   js/booking.js.
   ========================================================== */
.seat-block{gap:5px;}
.seat-block .seat-row{gap:5px;}
.seat-block .seat-block-label{font-size:12px;letter-spacing:.2em;margin-bottom:6px;}
.seat-block .seat{
  width:22px;height:22px;
  border-radius:5px 5px 7px 7px;
  font-family:var(--font-body);
  font-size:10.5px;font-weight:600;
  letter-spacing:-.02em;
  color:#3b342a;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.seat-block .seat.is-selected{color:var(--plum-950);box-shadow:0 0 0 2px rgba(240,207,107,.35);}
.seat-block .seat.is-taken{color:rgba(255,255,255,.6);box-shadow:none;}
.seat-block .seat-row-letter{
  width:22px;margin:0 6px 0 0;
  font-family:var(--font-body);
  font-size:13px;font-weight:700;
  color:var(--gold-500);
  text-align:center;
}
.seat-block .seat-row-letter.is-end{margin:0 0 0 6px;}
.seat-map.is-overview .seat-block .seat{font-size:0;}

/* Per-row prices inside a block (js/booking.js renderBlock): a quiet
   divider heading above each price group, e.g. "ROWS A–E · R 200,00". */
.seat-block .seat-tier{
  display:flex;align-items:center;justify-content:center;gap:10px;
  align-self:stretch;margin:8px 34px 2px;
  font-family:var(--font-body);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--lavender-400);white-space:nowrap;
}
.seat-block .seat-block-label + .seat-tier{margin-top:0;}
.seat-block .seat-tier::before,.seat-block .seat-tier::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,207,107,.45));
}
.seat-block .seat-tier::after{background:linear-gradient(90deg,rgba(240,207,107,.45),transparent);}
.seat-block .seat-tier-price{color:var(--gold-500);letter-spacing:.08em;}

/* Ticket delivery choice (paid WhatsApp add-on): two compact radio cards */
.tdel{border:0;margin:16px 0 0;padding:0;min-width:0;}
.tdel[hidden]{display:none;}
.tdel-title{padding:0;margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink-900);}
.tdel-opts{display:flex;flex-wrap:wrap;gap:10px;}
.tdel-opt{position:relative;cursor:pointer;flex:0 1 auto;}
.tdel-opt input{position:absolute;opacity:0;pointer-events:none;}
.tdel-box{display:flex;align-items:center;gap:12px;padding:11px 14px 11px 12px;min-width:250px;box-sizing:border-box;border-radius:12px;border:1.5px solid var(--line-warm);background:var(--paper-50);transition:border-color .15s,background .15s,box-shadow .15s;}
.tdel-opt:hover .tdel-box{border-color:var(--gold-600);}
.tdel-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-warm);box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.tdel-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(201,162,39,.14);color:var(--gold-600);}
.tdel-ico.is-wa{background:rgba(37,211,102,.14);color:#1fa855;}
.tdel-ico svg{width:18px;height:18px;}
.tdel-txt{display:flex;flex-direction:column;min-width:0;}
.tdel-txt b{font-size:14.5px;line-height:1.25;color:var(--ink-900);white-space:nowrap;}
.tdel-txt small{font-size:12px;line-height:1.35;color:var(--ink-600);}
.tdel-price{margin-left:auto;padding:4px 9px;border-radius:99px;font-size:12.5px;font-weight:800;white-space:nowrap;background:rgba(240,207,107,.16);color:var(--gold-600);}
.tdel-price.is-free{background:rgba(37,211,102,.12);color:#1fa855;}
.tdel-opt input:checked + .tdel-box{border-color:var(--gold-500);background:rgba(240,207,107,.1);box-shadow:0 0 0 1px var(--gold-500) inset;}
.tdel-opt input:checked + .tdel-box .tdel-dot{border-color:var(--gold-500);box-shadow:inset 0 0 0 4px var(--paper-50),inset 0 0 0 9px var(--gold-500);}
.tdel-opt input:focus-visible + .tdel-box{box-shadow:0 0 0 3px rgba(240,207,107,.35);}
body.bk-page .tdel-title{color:var(--bk-ink,#fff);}
body.bk-page .tdel-box{background:rgba(255,255,255,.04);border-color:var(--bk-line,rgba(255,255,255,.12));}
body.bk-page .tdel-opt:hover .tdel-box{border-color:var(--bk-gold,#f5c842);}
body.bk-page .tdel-dot{border-color:rgba(255,255,255,.3);}
body.bk-page .tdel-txt b{color:#fff;}
body.bk-page .tdel-txt small{color:var(--bk-mute,#a1a1aa);}
body.bk-page .tdel-ico{background:rgba(245,200,66,.12);color:var(--bk-gold,#f5c842);}
body.bk-page .tdel-ico.is-wa{background:rgba(37,211,102,.14);color:#3ddc7a;}
body.bk-page .tdel-price{background:rgba(245,200,66,.14);color:var(--bk-gold,#f5c842);}
body.bk-page .tdel-price.is-free{background:rgba(37,211,102,.14);color:#3ddc7a;}
/* "Keep me posted" marketing opt-in */
.optin-row{position:relative;display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--line-warm);background:var(--paper-50);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.optin-row:hover{border-color:var(--gold-600);}
.optin-row input{position:absolute;opacity:0;pointer-events:none;}
.optin-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(201,162,39,.14);color:var(--gold-600);}
.optin-ico svg{width:18px;height:18px;}
.optin-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.optin-txt b{font-size:14px;line-height:1.3;color:var(--ink-900);}
.optin-txt small{font-size:12px;line-height:1.45;color:var(--ink-600);}
.optin-check{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:2px solid var(--line-warm);color:transparent;transition:all .15s;}
.optin-check svg{width:14px;height:14px;}
.optin-row:has(input:checked){border-style:solid;border-color:var(--gold-500);background:rgba(240,207,107,.1);box-shadow:0 0 0 1px var(--gold-500) inset;}
.optin-row input:checked ~ .optin-check{background:var(--gold-500);border-color:var(--gold-500);color:#1a1a1a;}
.optin-row input:focus-visible ~ .optin-check{box-shadow:0 0 0 3px rgba(240,207,107,.35);}
body.bk-page .optin-row{background:rgba(255,255,255,.03);border-color:var(--bk-line,rgba(255,255,255,.14));}
body.bk-page .optin-row:hover{border-color:var(--bk-gold,#f5c842);}
body.bk-page .optin-row:has(input:checked){border-color:var(--bk-gold,#f5c842);background:rgba(245,200,66,.08);box-shadow:0 0 0 1px var(--bk-gold,#f5c842) inset;}
body.bk-page .optin-ico{background:rgba(245,200,66,.12);color:var(--bk-gold,#f5c842);}
body.bk-page .optin-txt b{color:#fff;}
body.bk-page .optin-txt small{color:var(--bk-mute,#a1a1aa);}
body.bk-page .optin-check{border-color:rgba(255,255,255,.3);}
body.bk-page .optin-row input:checked ~ .optin-check{background:var(--bk-gold,#f5c842);border-color:var(--bk-gold,#f5c842);color:#1a1a1a;}
/* Paid VIP list */
.vip-row{position:relative;display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:13px 14px;border-radius:12px;border:1.5px solid rgba(201,162,39,.45);background:linear-gradient(135deg,rgba(240,207,107,.14),rgba(240,207,107,.04));cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,opacity .15s;}
.vip-row:hover{border-color:var(--gold-500);}
.vip-row input{position:absolute;opacity:0;pointer-events:none;}
.vip-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#f7d466,#e0ad1f);color:#1a1406;box-shadow:0 6px 16px -8px rgba(224,173,31,.9);}
.vip-ico svg{width:18px;height:18px;}
.vip-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;background:var(--gold-500);color:#1a1406;font:800 10px/1.3 inherit;letter-spacing:.08em;font-style:normal;vertical-align:2px;}
.vip-price{flex:none;margin-left:auto;padding:4px 9px;border-radius:99px;font-size:12.5px;font-weight:800;white-space:nowrap;background:rgba(240,207,107,.2);color:var(--gold-600);}
.vip-row:has(input:checked){border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500) inset;background:linear-gradient(135deg,rgba(240,207,107,.22),rgba(240,207,107,.08));}
.vip-row input:checked ~ .optin-check{background:var(--gold-500);border-color:var(--gold-500);color:#1a1a1a;}
.vip-row.is-disabled{cursor:not-allowed;opacity:.5;filter:grayscale(.7);}
.optin-row.is-locked{cursor:default;border-style:solid;}
.optin-row.is-locked .optin-check{opacity:.75;}
body.bk-page .vip-row{border-color:rgba(245,200,66,.4);background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(245,200,66,.03));}
body.bk-page .vip-row:has(input:checked){border-color:var(--bk-gold,#f5c842);box-shadow:0 0 0 1px var(--bk-gold,#f5c842) inset;}
body.bk-page .vip-row .optin-txt b{color:#fff;}
body.bk-page .vip-row .optin-txt small{color:var(--bk-mute,#a1a1aa);}
body.bk-page .vip-price{background:rgba(245,200,66,.16);color:var(--bk-gold,#f5c842);}
body.bk-page .vip-tag{background:var(--bk-gold,#f5c842);}
body.bk-page .vip-row .optin-check{border-color:rgba(255,255,255,.3);}
body.bk-page .vip-row input:checked ~ .optin-check{background:var(--bk-gold,#f5c842);border-color:var(--bk-gold,#f5c842);color:#1a1a1a;}
.vip-banner-wrap{margin-top:16px;}
.vip-banner-wrap[hidden]{display:none;}
.vip-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid rgba(245,200,66,.45);background:linear-gradient(135deg,rgba(245,200,66,.18),rgba(245,200,66,.05));box-sizing:border-box;}
.vip-banner-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#f7d466,#e0ad1f);color:#1a1406;}
.vip-banner-ico svg{width:19px;height:19px;}
.vip-banner b{display:block;font-size:14.5px;color:var(--ink-900);letter-spacing:.02em;}
.vip-banner small{display:block;font-size:12.5px;color:var(--ink-600);}
.vip-banner small a{color:var(--gold-600);font-weight:700;text-decoration:none;margin-left:4px;}
body.bk-page .vip-banner small a{color:var(--bk-gold,#f5c842);}
body.bk-page .vip-banner b{color:#fff;}
body.bk-page .vip-banner small{color:var(--bk-mute,#a1a1aa);}
/* WhatsApp option greyed out when the guest pays by EFT (card-only add-on) */
.tdel-opt.is-disabled{cursor:not-allowed;}
.tdel-opt.is-disabled .tdel-box{opacity:.45;filter:grayscale(1);}
.tdel-opt.is-disabled:hover .tdel-box,
body.bk-page .tdel-opt.is-disabled:hover .tdel-box{border-color:var(--bk-line,rgba(255,255,255,.12));}
body.bk-page .tdel-opt input:checked + .tdel-box{border-color:var(--bk-gold,#f5c842);background:rgba(245,200,66,.08);box-shadow:0 0 0 1px var(--bk-gold,#f5c842) inset;}
body.bk-page .tdel-opt input:checked + .tdel-box .tdel-dot{border-color:var(--bk-gold,#f5c842);box-shadow:inset 0 0 0 4px #1b1b1f,inset 0 0 0 9px var(--bk-gold,#f5c842);}
@media (max-width:560px){ .tdel-opt{flex:1 1 100%;} .tdel-box{min-width:0;} }