/* ==========================================================================
   Booking flow — loaded only on /booking/.
   Uses the site tokens from site.css; adds nothing to any other page.
   Everything is namespaced under .bk so it cannot collide with .card, .pcard
   or the other shared components.
   ========================================================================== */

.bk{--bk-gap:22px}
/* Grid and flex items default to min-width:auto, which lets the non-wrapping
   progress rail push the whole column wider than the viewport. Every track in
   here is allowed to shrink below its content instead. */
.bk__layout{display:grid;gap:28px;align-items:start;min-width:0}
.bk__layout>*,.bk__panel,.bk__body,.bk__row,.bk .field,.bk__rail{min-width:0}
@media (min-width:1000px){.bk__layout{grid-template-columns:minmax(0,1fr) 330px;gap:36px}}

/* ---------- progress rail ---------- */
.bk__rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:6px 2px 12px;margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);scroll-snap-type:x proximity}
.bk__rail::-webkit-scrollbar{display:none}

.bk__rail li{flex:0 0 auto;scroll-snap-align:start}
.bk__rail button{display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface-1);color:var(--ink-3);font-size:13.5px;font-weight:500;
  min-height:40px;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.bk__rail button i{font-style:normal;font-family:var(--num-font);font-weight:700;
  font-size:12px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.bk__rail button:disabled{cursor:not-allowed;opacity:.55}
.bk__rail button:not(:disabled):hover{border-color:var(--line-loud);color:var(--ink)}
.bk__rail [data-state="done"] button{color:var(--ink-2);border-color:var(--line-strong);
  background:var(--surface-3)}
.bk__rail [data-state="done"] button i{color:var(--price)}
.bk__rail [data-state="current"] button{background:var(--brand);border-color:var(--brand);
  color:#fff;font-weight:600}
.bk__rail [data-state="current"] button i{color:#BBD2FF}

@media (min-width:1000px){.bk__rail{margin-inline:0;padding-inline:0;flex-wrap:wrap;overflow:visible}
  /* tightened just enough that all eight steps sit on one row at 1024px up */
  .bk__rail button{padding:9px 12px;font-size:13px;gap:7px}
  .bk__rail button i{font-size:11.5px}}

/* ---------- panel ---------- */
.bk__panel{background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(20px,3.4vw,34px)}
.bk__panel h2{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.015em}
.bk__panel>p.bk__hint{margin-top:10px;color:var(--ink-4);font-size:15px;max-width:56ch}
.bk__body{margin-top:26px;display:grid;gap:var(--bk-gap)}
.bk__row{display:grid;gap:var(--bk-gap)}
@media (min-width:620px){.bk__row--2{grid-template-columns:1fr 1fr}}

/* ---------- fields ---------- */
.bk .field{display:grid;gap:8px;min-width:0}
.bk .field>label{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.bk .field>label b{color:var(--price);font-weight:700;margin-left:2px}
.bk .inp{width:100%;background:var(--surface-3);border:1px solid var(--line-strong);
  color:var(--ink);border-radius:var(--r-md);padding:13px 15px;font:inherit;font-size:16px;
  min-height:50px;transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.bk textarea.inp{min-height:96px;resize:vertical;line-height:1.55}
.bk .inp::placeholder{color:var(--ink-mute)}
.bk .inp:hover{border-color:var(--line-loud)}
.bk .inp:focus{outline:none;border-color:var(--brand-lo);background:var(--surface-4)}
.bk .inp:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bk input.inp[type="date"]{font-family:var(--num-font);font-variant-numeric:tabular-nums;
  font-weight:600;letter-spacing:.01em}
.bk input.inp[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
.bk .inp[aria-invalid="true"]{border-color:var(--price-strike)}
.bk .fhint{font-size:13.5px;color:var(--ink-mute);line-height:1.5}
.bk .ferr{font-size:13.5px;color:#FF8D82;font-weight:500;display:none}
.bk .field[data-invalid="true"] .ferr{display:block}

/* ---------- duration readout ---------- */
.bk__dur{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px}
.bk__dur strong{font-family:var(--num-font);font-size:26px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.bk__dur span{color:var(--ink-4);font-size:14.5px}
.bk__dur em{font-style:normal;color:var(--price);font-family:var(--num-font);font-weight:700}

/* ---------- notes / alerts ---------- */
.bk .note{display:flex;gap:11px;align-items:flex-start;border-radius:var(--r-md);
  padding:14px 16px;font-size:14.5px;line-height:1.55;border:1px solid var(--line)}
.bk .note b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.bk .note--ok{background:rgba(34,227,216,.07);border-color:rgba(34,227,216,.35);color:var(--ink-2)}
.bk .note--err{background:rgba(255,68,56,.09);border-color:rgba(255,68,56,.42);color:#FFC9C4}
.bk .note--warn{background:rgba(255,199,96,.08);border-color:rgba(255,199,96,.36);color:#FFE0AC}
.bk .note--info{background:var(--surface-3);color:var(--ink-3)}
.bk .note__i{flex:0 0 auto;font-weight:700;line-height:1.4}

/* ---------- console cards ---------- */
.cons{display:grid;gap:14px}
@media (min-width:640px){.cons{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.cons__card{position:relative;display:flex;flex-direction:column;gap:12px;text-align:left;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:20px;transition:border-color .2s var(--ease),background-color .2s var(--ease),
  transform .2s var(--ease)}
.cons__card:hover{border-color:var(--line-loud);transform:translateY(-2px)}
.cons__card[aria-pressed="true"]{border-color:var(--brand-lo);background:var(--surface-5);
  box-shadow:0 0 0 1px var(--brand-lo) inset}
.cons__icon{font-size:22px;line-height:1}
.cons__name{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.cons__id{font-family:var(--num-font);font-weight:700;font-size:13px;letter-spacing:.06em;
  color:var(--ink-4);font-variant-numeric:tabular-nums}
.cons__flag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.cons__pick{margin-top:4px;font-size:14px;font-weight:600;color:var(--ink-3)}
.cons__card[aria-pressed="true"] .cons__pick{color:var(--price)}

/* ---------- game selector ---------- */
.gsel{position:relative}
.gsel__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:13px 16px;min-height:50px;color:var(--ink-3);font-size:15.5px;text-align:left}
.gsel__btn:hover{border-color:var(--line-loud)}
.gsel__btn[aria-expanded="true"]{border-color:var(--brand-lo);background:var(--surface-4)}
.gsel__btn strong{color:var(--ink);font-weight:600}
.gsel__caret{flex:0 0 auto;color:var(--ink-mute);transition:transform .2s var(--ease)}
.gsel__btn[aria-expanded="true"] .gsel__caret{transform:rotate(180deg)}

.gsel__pop{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);
  background:var(--surface-2);border:1px solid var(--line-loud);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;display:none}
.gsel__pop[data-open="true"]{display:block}
.gsel__search{padding:12px;border-bottom:1px solid var(--line)}
.gsel__cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:10px 12px;border-bottom:1px solid var(--line)}
.gsel__cats::-webkit-scrollbar{display:none}
.gsel__cats button{flex:0 0 auto;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-3);color:var(--ink-3);
  font-size:13px;font-weight:500;white-space:nowrap;min-height:34px}
.gsel__cats button:hover{border-color:var(--line-loud);color:var(--ink)}
.gsel__cats button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.gsel__list{max-height:min(48vh,360px);overflow-y:auto;padding:6px}
.gsel__group{padding:12px 12px 6px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute)}
.gsel__opt{display:flex;width:100%;align-items:center;gap:11px;padding:10px 12px;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:15px;text-align:left;min-height:44px}
.gsel__opt:hover{background:var(--surface-4);color:var(--ink)}
.gsel__box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-loud);
  display:grid;place-items:center;font-size:12px;color:transparent;line-height:1}
.gsel__opt[aria-checked="true"] .gsel__box{background:var(--brand);border-color:var(--brand);color:#fff}
.gsel__opt[aria-checked="true"]{color:var(--ink)}
.gsel__tag{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--price);border:1px solid rgba(255,236,0,.34);border-radius:var(--r-pill);padding:3px 8px}
.gsel__empty{padding:26px 14px;text-align:center;color:var(--ink-mute);font-size:14.5px}
.gsel__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;border-top:1px solid var(--line);background:var(--surface-1)}
.gsel__foot span{font-size:13.5px;color:var(--ink-4)}
.gsel__foot button{font-size:14px;font-weight:600;color:var(--brand-lo);padding:6px 4px;min-height:36px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;background:var(--surface-4);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 6px 6px 13px;
  font-size:13.5px;color:var(--ink-2)}
.chips button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-mute);font-size:15px;line-height:1}
.chips button:hover{background:var(--surface-6);color:var(--ink)}

/* ---------- payment ---------- */
.pay{display:grid;gap:20px}
@media (min-width:640px){.pay{grid-template-columns:270px minmax(0,1fr);align-items:start}}
.pay__qr{background:#fff;border-radius:var(--r-lg);padding:12px;display:grid;place-items:center}
/* Big enough to scan from another phone, which is how most people pay. */
.pay__qr img{width:100%;max-width:260px}
.pay__qr--empty{background:var(--surface-3);border:1px dashed var(--line-loud);
  min-height:150px;color:var(--ink-mute);font-size:13.5px;text-align:center;padding:20px}
.pay dl{display:grid;gap:14px;margin:0}
.pay dt{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.pay dd{margin:0;font-size:19px;font-weight:700;color:var(--ink);font-family:var(--num-font);
  font-variant-numeric:tabular-nums}
.pay dd.pay__amt{color:var(--price);font-size:24px}
/* the "scan the QR" instruction is prose, not a figure */
.pay dd.pay__how{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-3);
  line-height:1.5}

/* ---------- uploads ---------- */
.upl{display:block;position:relative;border:1.5px dashed var(--line-loud);border-radius:var(--r-lg);
  background:var(--surface-2);padding:24px 20px;text-align:center;cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.upl:hover,.upl[data-drag="true"]{border-color:var(--brand-lo);background:var(--surface-3)}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upl__icon{font-size:24px;line-height:1}
.upl__title{margin-top:10px;font-weight:600;color:var(--ink);font-size:15.5px}
.upl__meta{margin-top:5px;font-size:13.5px;color:var(--ink-mute)}
.upl[data-has="true"]{border-style:solid;border-color:rgba(34,227,216,.5);background:rgba(34,227,216,.05)}
.upl[data-has="true"] .upl__title{color:var(--accent)}
.upl__preview{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px}
.upl__preview img{max-height:120px;border-radius:var(--r-sm);border:1px solid var(--line)}

/* ---------- terms ---------- */
.check{display:flex;gap:13px;align-items:flex-start;background:var(--surface-3);
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:16px 18px;cursor:pointer}
.check:hover{border-color:var(--line-loud)}
.check input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--brand);cursor:pointer}
.check span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.check--on{border-color:rgba(34,227,216,.45);background:rgba(34,227,216,.05)}

/* ---------- summary ---------- */
.sum{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.sum__row{display:grid;gap:4px 18px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
@media (min-width:560px){.sum__row{grid-template-columns:180px minmax(0,1fr);align-items:baseline}}
.sum__row:last-child{border-bottom:0}
.sum__row dt{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-mute)}
.sum__row dd{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.sum__row dd b{font-weight:600;color:var(--ink)}
.sum__row--total{background:var(--surface-4)}
.sum__row--total dd{font-family:var(--num-font);font-weight:700;font-size:27px;color:var(--price);
  font-variant-numeric:tabular-nums;line-height:1.1}
.sum__ok{color:var(--accent);font-weight:600}
.sum__edit{margin-left:10px;font-size:13px;font-weight:600;color:var(--brand-lo);
  text-decoration:underline;text-underline-offset:3px}

/* ---------- price aside ---------- */
.bk__aside{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:14px}
.quote{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.quote h3{font-size:16px;font-family:var(--display);font-weight:700}
.quote__lines{margin-top:14px;display:grid;gap:9px}
.quote__lines div{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:var(--ink-3)}
.quote__lines b{font-family:var(--num-font);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-2);white-space:nowrap}
.quote__lines .is-save b{color:var(--price)}
.quote__lines .is-free b{color:var(--accent)}
.quote__total{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-strong);
  display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.quote__total span{font-size:14px;color:var(--ink-3)}
.quote__total b{font-family:var(--num-font);font-weight:700;font-size:26px;color:var(--price);
  font-variant-numeric:tabular-nums;line-height:1}
.quote__dep{margin-top:12px;font-size:13.5px;color:var(--ink-mute);line-height:1.55}
.quote__dep b{color:var(--ink-3);font-family:var(--num-font);font-variant-numeric:tabular-nums}
.quote--empty{color:var(--ink-mute);font-size:14.5px}

/* ---------- footer nav ---------- */
.bk__foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bk__foot .btn{flex:1 1 auto}
@media (min-width:560px){.bk__foot .btn{flex:0 0 auto}
  .bk__foot .bk__spacer{flex:1 1 auto}}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:bkspin .7s linear infinite}
@keyframes bkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ---------- confirmation ---------- */
.done{text-align:center;padding:clamp(16px,4vw,30px) 0}
.done__tick{width:66px;height:66px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(34,227,216,.12);border:1px solid rgba(34,227,216,.45);color:var(--accent);
  font-size:30px;line-height:1}
.done h2{margin-top:20px;font-size:clamp(24px,3vw,34px)}
.done__id{margin-top:16px;display:inline-block;font-family:var(--num-font);font-weight:700;
  font-size:clamp(26px,4vw,38px);letter-spacing:.03em;color:var(--price);
  font-variant-numeric:tabular-nums;background:var(--surface-3);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:12px 22px}
.done__sum{margin-top:26px;text-align:left}
.done p.done__thanks{margin-top:24px;color:var(--ink-4);font-size:15.5px;max-width:56ch;
  margin-inline:auto;line-height:1.65}

/* ---------- no-JS ---------- */
.no-js .bk__app{display:none}
.bk__nojs{display:none}
.no-js .bk__nojs{display:block}