/* ═══════════════════════════════════════════════
   IJEN SPA — Kiosk (index.html) Styles
   Depends on: variables.css
   ═══════════════════════════════════════════════ */

:root { --text-dim: rgba(245,228,200,0.58); }

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

html, body {
  width: 100vw; height: 100vh; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: 'Lato', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* SCREENS */
/* z-index: 1 lifts screen content above the fixed lava canvases (z-index: 0).
   Without this, at narrow viewports body text can paint underneath the lava. */
.screen { display: none; position: absolute; inset: 0; z-index: 1; flex-direction: column; padding: 20px 24px 56px; animation: fadeIn .3s ease; }
.screen.active { display: flex; }

/* HEADER */
.hdr { text-align: center; margin-bottom: 8px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.hdr h1 { font-family: 'Lato', sans-serif; font-size: 30px; color: var(--gold); letter-spacing: 5px; margin-bottom: 2px; }
.hdr h1.logo-h1 { display: flex; align-items: center; justify-content: center; height: 42px; margin-bottom: 4px; }
.hdr p { font-size: 12px; color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase; }
.kiosk-logo-img {
  display: block;
  height: 42px;
  width: 220px;
}
svg.kiosk-logo-img {
  pointer-events: none;
}
/* Opacity pulse only on iOS < 16. Modern browsers get the gradient slide
   animated inside the SVG (mask + animated <rect>); layering opacity on top
   would fight with the shimmer. The class is set by inline-logo.js. */
:root.is-legacy-ios svg.kiosk-logo-img {
  animation: kiosk-logo-pulse 4s ease-in-out infinite;
}
@keyframes kiosk-logo-pulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root.is-legacy-ios svg.kiosk-logo-img { animation: none; }
}
@supports (mask: url('') center / contain no-repeat) {
  .kiosk-logo-img {
    filter: drop-shadow(0 0 14px rgba(255,160,60,0.28));
  }
}
@media(max-width:480px) {
  .hdr h1.logo-h1 { height: 32px; }
  .kiosk-logo-img { height: 32px; width: 168px; }
}
.ornl { text-align: center; color: var(--border); letter-spacing: 8px; font-size: 12px; margin: 5px 0; flex-shrink: 0; }

/* PROGRESS */
.dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 8px; flex-shrink: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .3s; }
.dot.on { background: var(--gold); }

/* CARD base (refined — hairline borders, transparent, quiet) */
.card {
  background: rgba(23, 18, 10, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.24);
  cursor: pointer;
  transition: border-color 220ms, background 220ms, box-shadow 220ms, transform 220ms;
}
.card:hover {
  border-color: rgba(198,134,84,0.35);
  background: rgba(30, 22, 12, 0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.32);
}
.card.sel, .card:active {
  border-color: var(--ember, #c68654);
  background: rgba(198,134,84,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px rgba(198,134,84,0.22);
}

/* Reset native button styling (critical for iOS Safari — otherwise buttons show as native rounded light-gray) */
button, .btn { -webkit-appearance: none; appearance: none; border-radius: 12px; font-family: inherit; }

/* BUTTON */
.btn { font-family: 'Lato', sans-serif; border: 1px solid var(--gold); background: transparent; color: var(--gold); padding: 10px 24px; font-size: 15px; cursor: pointer; letter-spacing: 2px; transition: all .2s; white-space: nowrap; }
.btn:active, .btn.solid { background: var(--gold); color: var(--bg); }
.btn:disabled { opacity: .3; pointer-events: none; }
.btn.ghost { border-color: var(--border); color: var(--muted); }
.btn.ghost:active { border-color: var(--gold); color: var(--gold); background: transparent; }
/* Anchor styled as a button (e.g. "Get directions" link on the booking
   success overlay) — render identical to a <button>.btn: centred label,
   no underline, behaves as a flex item inside .ov-btns. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }

/* BOTTOM NAV */
.bnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 12px; flex-shrink: 0; }
.bnav > span { width: 100%; text-align: center; margin-bottom: 6px; order: -1; }
.bnav > .btn.solid { margin-left: auto; }

/* ═══════════ SCREEN 1: Massage (refined minimalism) ═══════════ */
.s1-wrap { flex: 1; display: flex; flex-direction: column; gap: 24px; min-height: 0; overflow-y: auto; padding-top: 4px; }
.svc-list { display: flex; flex-direction: column; gap: 10px; }
.mcrd { padding: 22px 22px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.mcrd-head { margin-bottom: 0; }
.mcrd .mname { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.2px; color: var(--text-primary, #f5e4c8); margin-bottom: 5px; }
/* pre-line so a package can list what's in it on its own lines. Plain
   one-line descriptions are unaffected — pre-line only honours newlines
   that are actually in the text. */
.mcrd .mdesc { font-size: 13px; color: var(--text-muted, rgba(245,228,200,0.66)); line-height: 1.55; white-space: pre-line; }
.dur-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dur-btn {
  -webkit-appearance: none; appearance: none;
  font-family: 'Lato', sans-serif;
  font-size: 11px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.66));
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms, border-color 180ms, background 180ms;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}
.dur-btn:hover { border-color: rgba(198,134,84,0.55); color: var(--ember, #c68654); }
.dur-btn.sel { background: var(--ember, #c68654); color: var(--bg, #0c0905); border-color: var(--ember, #c68654); }
@media (max-width: 480px) { .dur-btn { flex: 1 1 auto; padding: 11px 14px; } }

/* ═══════════ SCREEN 2: Oil + Add-ons (refined minimalism) ═══════════ */
.s2-wrap { flex: 1; display: flex; flex-direction: column; gap: 28px; min-height: 0; overflow-y: auto; padding-top: 4px; }
.sec { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.sec-hdr { font-family: 'Fraunces', serif; font-weight: 500; font-size: 11px; letter-spacing: 3px; color: var(--ember, #c68654); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }

.ogrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ocrd { padding: 0; text-align: left; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; min-height: 160px; }
.ocrd .oimg { width: 100%; height: 58%; object-fit: cover; flex-shrink: 0; display: block; opacity: 0.88; transition: opacity 220ms; }
.ocrd:hover .oimg { opacity: 1; }
.ocrd .oinfo { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px 14px; flex: 1; justify-content: flex-start; gap: 3px; }
.ocrd .oname { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; color: var(--text-primary, #f5e4c8); }
.ocrd .odesc { font-size: 11px; color: var(--text-muted, rgba(245,228,200,0.66)); line-height: 1.4; margin-bottom: 4px; }
.badge { display: inline-block; padding: 3px 8px; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; border: 1px solid; border-radius: 999px; margin-top: 2px; }
.badge.free { color: var(--text-dim, rgba(245,228,200,0.58)); border-color: rgba(255,255,255,0.12); }
.badge.prem { color: var(--ember, #c68654); border-color: rgba(198,134,84,0.45); }
.ocrd .oprice { font-size: 12px; color: var(--ember, #c68654); margin-top: 4px; font-weight: 700; letter-spacing: 0.2px; }
.ocrd.sel .oimg { opacity: 1; }

/* Add-ons use the same sales-photo language as oils. */
.agrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 600px) { .agrid { grid-template-columns: repeat(2,1fr); } }
/* On mobile, oil grid goes to 2 columns for more breathing room */
@media (max-width: 600px) { .ogrid { grid-template-columns: repeat(2,1fr); } }
.acrd { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 16px; overflow: hidden; text-align: left; min-width: 0; }
.acrd .aimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; opacity: 0.88; transition: opacity 220ms; }
.acrd:hover .aimg,
.acrd.sel .aimg { opacity: 1; }
.acrd .achk { position: absolute; top: 10px; right: 10px; z-index: 2; width: 24px; height: 24px; border: 1.5px solid rgba(245,228,200,0.34); background: rgba(12,9,5,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; flex-shrink: 0; transition: all 180ms; }
.acrd.sel .achk { background: var(--ember, #c68654); border-color: var(--ember, #c68654); color: var(--bg, #0c0905); }
.acrd .ainfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.acrd .aname { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; color: var(--text-primary, #f5e4c8); }
.acrd .adesc { font-size: 11px; color: var(--text-muted, rgba(245,228,200,0.66)); line-height: 1.4; }
.acrd .aprice { font-size: 13px; color: var(--ember, #c68654); font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: 0.2px; flex-shrink: 0; margin-top: auto; padding-top: 4px; }
@media (max-width: 480px) {
  .acrd .ainfo { padding: 10px 11px 12px; }
  .acrd .aname { font-size: 13px; }
  .acrd .adesc { font-size: 10px; }
  .acrd .aprice { font-size: 12px; }
}

/* ═══════════ SCREEN 3 & 4: Body Map ═══════════ */
.bwrap { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; justify-content: center; }
.bsvg-wrap { flex: none; display: flex; justify-content: center; }
/* Keep the artwork and hit dots inside one SVG viewBox on every device. */
.vitruvian-wrap { position: relative; width: 220px; aspect-ratio: 744.1/800; }
.vitruvian-img { pointer-events: none; }
.vzones { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.vdot { cursor: pointer; fill: rgba(198,134,84,0.08); stroke: rgba(198,134,84,0.38); stroke-width: 1.5; transition: fill .2s, stroke .2s; pointer-events: all; r: 18; }
@media(max-width:480px) { .vdot { r: 28; } }
.vdot:hover { fill: rgba(198,134,84,0.25); stroke: rgba(198,134,84,0.8); }
.vdot.att { fill: var(--gold); stroke: var(--gold2); stroke-width: 2; }
.vdot.avd { fill: var(--red); stroke: #d46060; stroke-width: 2; }
.zpanel { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start; }
.zpanel > .phase-badge { grid-column: 1/-1; }
.zcrd { border: 1px solid rgba(255,255,255,0.08); background: transparent; min-height: 44px; padding: 11px 14px; border-radius: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: border-color 180ms, background 180ms; white-space: nowrap; }
.zcrd:hover { border-color: rgba(255,255,255,0.16); }
@media(min-width:700px) {
  .bwrap { flex-direction: row; align-items: stretch; overflow-y: visible; }
  .bsvg-wrap { width: 52%; display: flex; align-items: center; justify-content: center; }
  .vitruvian-wrap { width: 100%; aspect-ratio: 744.1/800; max-height: 100%; }
  .zpanel { flex: 1; display: flex; flex-direction: column; align-content: unset; justify-content: center; }
  .zpanel > .phase-badge { grid-column: unset; }
}
.zcrd:active, .zcrd.sel { border-color: var(--ember, #c68654); background: rgba(198,134,84,0.05); }
.zcrd.sel-r { border-color: #b9551b; background: rgba(185,85,27,0.06); }
.chk { width: 20px; height: 20px; border: 1.5px solid rgba(255,255,255,0.14); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; transition: all 180ms; }
.zcrd.sel .chk { background: var(--ember, #c68654); border-color: var(--ember, #c68654); color: var(--bg, #0c0905); }
.zcrd.sel-r .chk { background: #b9551b; border-color: #b9551b; color: #fff; }

/* Focus zones (s3) — green accent so customers can distinguish "more attention" from "avoid" */
#s3 .zcrd.sel { border-color: #4ade80; background: rgba(74,222,128,0.10); }
#s3 .zcrd.sel .chk { background: #4ade80; border-color: #4ade80; color: #052e10; }
#s3 .vdot.att { fill: #4ade80; stroke: #16a34a; }
#s3 .phase-badge.att { color: #4ade80; border-color: rgba(74,222,128,0.6); }
.zcrd .zname { font-family: 'Lato', sans-serif; font-size: 16px; color: var(--white); }
.zcrd .zdesc { font-size: 10px; color: var(--muted); margin-top: 1px; }
.phase-badge { display: inline-block; padding: 3px 10px; border: 1px solid; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; border-radius: 10px; align-self: flex-start; }
.phase-badge.att { color: var(--gold); border-color: var(--gold); }
.phase-badge.avd { color: var(--red); border-color: var(--red); }
.zclear-btn { font-size: 10px; color: var(--muted); background: none; border: 1px solid var(--border); padding: 3px 10px; cursor: pointer; letter-spacing: 1px; border-radius: 10px; transition: all .2s; grid-column: 1/-1; justify-self: end; }
.zclear-btn:active { border-color: var(--gold); color: var(--gold); }

/* ═══════════ SCREEN 5: Summary (refined minimalism) ═══════════ */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.scrd {
  padding: 22px 20px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(23, 18, 10, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.24);
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  text-align: left; gap: 6px;
  transition: border-color 220ms, background 220ms;
}
.scrd:hover { border-color: rgba(198,134,84,0.35); background: rgba(30, 22, 12, 0.32); }
.slbl { font-family: 'Fraunces', serif; font-weight: 500; font-size: 10px; color: var(--ember, #c68654); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 4px; }
.sval { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px; color: var(--text-primary, #f5e4c8); line-height: 1.3; letter-spacing: 0.2px; }
.sdet { font-size: 13px; color: var(--ember, #c68654); letter-spacing: 0.3px; }
.stags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; justify-content: flex-start; }
.stag { padding: 4px 10px; border: 1px solid; font-size: 11px; letter-spacing: 0.3px; border-radius: 999px; font-weight: 600; }
.stag.a { border-color: rgba(198,134,84,0.5); color: var(--ember, #c68654); }
.stag.r { border-color: rgba(185,85,27,0.5); color: #c97035; }
.total-box { border: 1px solid rgba(198,134,84,0.35); padding: 24px 22px; text-align: left; background: linear-gradient(180deg, rgba(198,134,84,0.06) 0%, rgba(198,134,84,0.02) 100%); grid-column: 1/-1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 18px; gap: 4px; }
.total-lbl { font-family: 'Fraunces', serif; font-weight: 500; font-size: 11px; color: var(--text-muted, rgba(245,228,200,0.66)); text-transform: uppercase; letter-spacing: 3px; }
.total-val { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 40px; color: var(--ember, #c68654); line-height: 1; letter-spacing: 0.2px; margin-top: 2px; }
.total-note { font-size: 12px; color: var(--text-dim, rgba(245,228,200,0.46)); margin-top: 8px; line-height: 1.5; }

/* ═══════════ HOME BUTTON ═══════════ */
.home-btn { position: fixed; top: 12px; left: 12px; z-index: 50; min-height: 44px; padding: 7px 14px; display: inline-flex; align-items: center; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1.5px; color: var(--gold); background: rgba(23,18,10,0.85); border: 1px solid var(--dim); text-decoration: none; backdrop-filter: blur(6px); transition: all .2s; border-radius: 10px; }
.home-btn:hover { border-color: var(--gold); background: rgba(198,134,84,0.15); }
@media(max-width:480px) { .home-btn { padding: 5px 10px; font-size: 11px; top: 8px; left: 8px; } }

/* ═══════════ LANGUAGE SWITCHER — compact, top-right, vertical-align home-btn ═══════════ */
.lang-picker { position: fixed; top: 8px; right: 8px; z-index: 45; display: flex; align-items: center; gap: 5px; min-height: 44px; }
.lang-active { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(23,18,10,0.85); backdrop-filter: blur(8px); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 180ms, transform 180ms; line-height: 1; padding: 0; }
.lang-active:hover { border-color: var(--ember, #c68654); }
.lang-picker.is-open .lang-active { border-color: var(--ember, #c68654); }
.lang-options { display: flex; gap: 5px; padding-right: 3px; opacity: 0; pointer-events: none; transform: translateX(10px); transition: opacity 220ms cubic-bezier(.22,.61,.36,1), transform 220ms cubic-bezier(.22,.61,.36,1); }
.lang-picker.is-open .lang-options { opacity: 1; pointer-events: auto; transform: translateX(0); }
.lang-options[inert] { visibility: hidden; }
.lang-opt { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(23,18,10,0.85); backdrop-filter: blur(8px); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 180ms, transform 180ms; line-height: 1; padding: 0; }
.lang-opt:hover { border-color: var(--ember, #c68654); transform: scale(1.08); }
.lang-opt.is-active-lang { display: none; }

/* Match vertical placement: both top:12, home-btn left:12, lang-picker right:12 */
.home-btn { top: 12px !important; }

/* Clear legacy lang-bar positioning */
.lang-bar { display: none; }

/* ═══════════ MOBILE RESPONSIVE ═══════════ */
@media(max-width:480px) {
  .screen { padding: 12px 10px 52px; }
  .hdr h1 { font-size: 22px; letter-spacing: 3px; }
  .hdr p { font-size: 10px; letter-spacing: 1.5px; }
  .ornl { font-size: 10px; letter-spacing: 5px; margin: 3px 0; }
  .dots { gap: 5px; margin-bottom: 5px; }
  .dot { width: 6px; height: 6px; }
  .btn { padding: 9px 18px; font-size: 13px; }
  .cols { flex-direction: column; gap: 10px; overflow-y: auto; }
  .col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; flex: none; }
  .col-hdr { font-size: 14px; padding: 6px; letter-spacing: 1.5px; grid-column: 1/-1; }
  .mcrd { padding: 12px; min-height: 0; flex: none; }
  .mcrd .mname { font-size: 14px; }
  .mcrd .mdesc { font-size: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* A package's contents are the point of the card — don't clamp them. */
  .mcrd.is-package .mdesc { display: block; -webkit-line-clamp: none; overflow: visible; }
  .mcrd .mprice { font-size: 14px; margin-top: auto; }
  .ogrid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; gap: 8px; overflow-y: auto; }
  .ocrd .oimg { height: 120px; }
  .ocrd .oinfo { padding: 6px 5px 7px; }
  .ocrd .oname { font-size: 13px; }
  .ocrd .odesc { font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bwrap { gap: 6px; }
  .vitruvian-wrap { width: min(80vw, 300px); }
  .zpanel { gap: 4px; }
  .zcrd { padding: 7px 9px; gap: 7px; }
  .zcrd .zname { font-size: 13px; }
  .chk { width: 17px; height: 17px; font-size: 10px; }
  .phase-badge { font-size: 8.5px; padding: 2px 8px; }
  .sgrid { grid-template-columns: 1fr; gap: 8px; }
  .scrd { padding: 12px; }
  .slbl { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 5px; }
  .sval { font-size: 20px; }
  .sdet { font-size: 13px; }
  .total-box { padding: 12px; }
  .total-val { font-size: 36px; }
  .total-note { font-size: 11px; }
  .lang-bar { padding: 4px 0 5px; gap: 4px; }
  .lang-btn { width: 28px; height: 28px; font-size: 15px; }
  .bnav { margin-top: 8px; }
  .bnav > span { font-size: 13px; margin-bottom: 4px; }
  .ovbox { padding: 24px 20px; }
  .ovbox h2 { font-size: 20px; }
  .ovbox .price { font-size: 28px; }
}

@media(max-width:375px) {
  .screen { padding: 10px 8px 48px; }
  .hdr h1 { font-size: 20px; }
  .mcrd .mname { font-size: 14px; }
  .ogrid { gap: 6px; }
  .ocrd .oimg { height: 100px; }
  .vitruvian-wrap { width: min(75vw, 280px); }
  .total-val { font-size: 30px; }
}

/* ═══════════ LAVA CORNERS ═══════════ */
#lava-tl, #lava-tr { position: fixed; top: 0; pointer-events: none; z-index: 0; opacity: 0.8; }
#lava-tl { left: 0; }
#lava-tr { right: 0; }

/* Confirmation overlay — refined minimalism.
   Safari iPad: `inset: 0` alone occasionally collapses the overlay to
   the bottom-left corner when the soft keyboard was just dismissed
   (visualViewport vs layoutViewport mismatch). Belt-and-braces the
   sizing with explicit top/left + width/height in viewport units so
   the box always covers the screen even if `inset` is mis-resolved.
   `100dvh` (dynamic viewport height) handles iOS toolbar collapse;
   100vh fallback keeps older Safari working. */
.overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(6,4,2,0.85); backdrop-filter: blur(6px); align-items: center; justify-content: center; z-index: 100; animation: fadeIn 240ms cubic-bezier(.22,.61,.36,1); padding: 20px; box-sizing: border-box; }
.overlay.active { display: flex; }
.ovbox { border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(23,18,10,0.98) 0%, rgba(18,14,8,0.98) 100%); padding: 40px 36px 32px; text-align: center; max-width: 440px; width: 100%; border-radius: 24px; box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.ovbox h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--text-primary, #f5e4c8); margin-bottom: 12px; letter-spacing: 2px; line-height: 1.3; }
.ovbox p { color: var(--text-muted, rgba(245,228,200,0.66)); font-family: 'Lato', sans-serif; font-size: 14px; margin-bottom: 22px; letter-spacing: 0.2px; line-height: 1.6; }
.ovbox .price { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 32px; color: var(--ember, #c68654); margin: 18px 0 22px; letter-spacing: 0.3px; }
.ovbox.error h2 { color: var(--state-danger, #c45c5c); }
/* wrap: two 160px buttons do not fit a 320-360px phone and used to stick out of the box */
.ovbox .ov-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.ovbox .btn { min-width: 160px; }
.ov-spinner { display: inline-block; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.08); border-top-color: var(--ember, #c68654); border-radius: 50%; animation: spin .6s linear infinite; margin: 14px auto; }

/* Group-booking success overlay — per-member assignment list */
.ov-group-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(23,18,10,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  text-align: left;
}
.ov-group-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--text-muted, rgba(245,228,200,0.72));
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.ov-group-row:last-child { border-bottom: none; }
.ov-group-who strong {
  color: var(--ember, #c68654);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.ov-group-when {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-primary, #f5e4c8);
}

/* Gift certificate promo under the booking-success message (/book and the
   kiosk). Same card surface as .ov-group-list, eyebrow in .sec-hdr type.
   The promo makes the box taller than a phone screen, so the overlay
   scrolls and the box centres with margin:auto: plain flex centring would
   cut off the top of a box taller than the viewport. */
.overlay { overflow-y: auto; overscroll-behavior: contain; }
.ovbox { margin: auto; }
.ov-gift {
  margin-top: 22px;
  padding: 18px 16px 20px;
  background: rgba(23,18,10,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ov-gift-eyebrow {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--ember, #c68654);
  margin-bottom: 12px;
}
.ov-gift-img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 12px; }
.ovbox .ov-gift-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px;
  line-height: 1.3; letter-spacing: 0.5px;
  color: var(--text-primary, #f5e4c8);
  margin: 0 0 8px;
}
.ovbox .ov-gift-text { font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.ovbox .ov-gift .btn { white-space: normal; }
.ov-gift-qr-row { display: flex; align-items: center; gap: 14px; text-align: left; }
.ov-gift-qr { flex: none; width: 128px; height: 128px; border-radius: 8px; }
.ov-gift-qr-copy {
  font-family: 'Lato', sans-serif; font-size: 13px; line-height: 1.5;
  color: var(--text-muted, rgba(245,228,200,0.66));
}
.ov-gift-qr-copy strong {
  display: block; margin-bottom: 4px;
  font-weight: 700; color: var(--text-primary, #f5e4c8);
}
/* Korean separates words with spaces; without keep-all the browser breaks
   inside a word and leaves a lone syllable on the next line. */
html:lang(ko) .ov-gift { word-break: keep-all; }

/* ═══════════ FOCUS RINGS (accessibility) ═══════════ */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(198,134,84,0.35);
}
.dur-btn:focus-visible, .acrd:focus-visible, .zcrd:focus-visible, .mcrd:focus-visible, .ocrd:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198,134,84,0.35); }
.s-edit:focus-visible, .home-btn:focus-visible, .lang-active:focus-visible, .lang-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198,134,84,0.4); }

/* ══════════ ORBITRON HEADINGS (matches logo typography) ══════════ */
.sec-hdr { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: 4px; }
.mcrd .mname { font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: .3px; }
.acrd .aname { font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: .2px; }
.ocrd .oname { font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: .2px; }
.ovbox h2 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: 3px; }
.hdr p { font-family: 'Fraunces', serif; font-weight: 400; }
.zcrd .zname { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: .8px; font-size: 14px; }
.phase-badge { font-family: 'Fraunces', serif; font-weight: 600; }
.total-lbl { font-family: 'Fraunces', serif; font-weight: 500; }
.slbl { font-family: 'Fraunces', serif; font-weight: 500; }
.sval { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: 1px; }

/* Buttons → Lato */
.btn, .cat-tab, .dur-btn, .home-btn, .zclear-btn { font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: 1.5px; }
.btn { font-size: 13px; }
.dur-btn { font-size: 12px; letter-spacing: 1px; }
.cat-tab { letter-spacing: 2.5px; }

/* ═══════════ BOOKING PROGRESS BAR (top sticky) ═══════════ */
.book-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: linear-gradient(180deg, rgba(12,9,5,0.95) 0%, rgba(12,9,5,0.85) 100%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.08)); padding: 14px 24px 12px; }
.book-progress[hidden], .book-bottombar[hidden], .home-btn[hidden] { display: none !important; }
.book-progress-inner { max-width: 960px; margin: 0 auto; padding-left: 96px; /* reserve for home-btn */ }
.book-progress-meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.book-progress-label { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ember, #c68654); flex-shrink: 0; }
.book-progress-title { font-family: 'Lato', sans-serif; font-size: 13px; color: var(--text-muted, rgba(245,228,200,0.72)); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-progress-track { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.book-progress-fill { height: 100%; width: 20%; background: linear-gradient(90deg, var(--ember, #c68654) 0%, var(--ember-bright, #e4a06c) 100%); transition: width 240ms cubic-bezier(.22,.61,.36,1); }

/* Party-of-N indicator — sits ABOVE the step label, big enough to
   anchor attention. Only visible on per-person screens of a group
   reservation (services / addons sub-flow). */
.book-progress-party {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  padding: 6px 14px 6px 10px;
  background: linear-gradient(135deg, rgba(198,134,84,0.18) 0%, rgba(198,134,84,0.10) 100%);
  border: 1px solid rgba(198,134,84,0.40);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(198,134,84,0.05), 0 6px 20px rgba(198,134,84,0.10);
  font-family: 'Lato', sans-serif;
}
.book-progress-party[hidden] { display: none !important; }
.book-progress-party .bpp-icon {
  font-size: 16px;
  line-height: 1;
}
.book-progress-party .bpp-num {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #f5e4c8);
  letter-spacing: 0.4px;
}
.book-progress-party .bpp-num .bpp-of {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim, rgba(245,228,200,0.62));
  margin: 0 2px;
  vertical-align: 2px;
}
.book-progress-party .bpp-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ember-bright, #e4a06c);
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(198,134,84,0.30);
}
.book-progress-party .bpp-name:empty { display: none; }
@media (max-width: 480px) {
  .book-progress { padding: 10px 14px 10px; }
  .book-progress-inner { padding-left: 78px; }
  .book-progress-meta { margin-bottom: 6px; gap: 10px; }
  .book-progress-title { display: none; }
}

/* Old .dots hidden when progress bar is active.
   We previously used `body:has(.book-progress:not([hidden]))` selectors
   to react to dynamic `hidden` toggling, but Safari's :has() does not
   reliably re-evaluate when boolean attributes change via JS. The JS
   render function now sets body.has-progress / .has-bottombar /
   .has-summary classes alongside `el.hidden = …`, and the CSS keys
   off those classes. Works the same in every browser. */
.book-progress + * .dots, .book-progress ~ div .dots { display: none; }
body.has-progress .dots { display: none; }
body.has-progress .ornl { display: none; }
body.has-progress .home-btn { top: 8px; }
body.has-progress .screen { padding-top: 84px; }

/* ═══ MOBILE: body becomes scrollable; progress bar stays pinned at top ═══ */
@media (max-width: 820px) {
  /* Kiosk was locked (html/body: overflow hidden + fixed 100vh) for touch screens.
     On phones we need natural page scroll. */
  html, body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Progress bar STAYS pinned at top so user always sees which step they're on.
     Only the screen body scrolls beneath it. */
  .book-progress { position: fixed; z-index: 30; padding: 10px 14px 10px; }
  .book-progress-inner { padding-left: 78px; }
  .book-progress-title { display: none; }
  /* Screens become scrollable flow boxes. z-index: 2 keeps them above the lava canvases
     (z-index: 0) so body text isn't painted under the lava at narrow widths. */
  .screen { position: relative; z-index: 2; min-height: auto; padding: 16px 16px 24px; }
  /* Reserve top space under the fixed progress bar (~56px tall) + safety gap */
  body.has-progress .screen { padding-top: 64px; }
  body.has-bottombar .screen { padding-bottom: 88px; }
  /* Welcome + returning screens re-centre inside flow */
  #s0.active, #s-repeat.active {
    min-height: calc(100vh - 80px);
    padding: 32px 16px 48px;
  }
}


/* ═══════════ BOOKING BOTTOM BAR (mobile only) ═══════════ */
.book-bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(12,9,5,0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--border-faint, rgba(255,255,255,0.08)); height: 72px; }
.book-bottombar .bb-back, .book-bottombar .bb-next { -webkit-appearance: none; appearance: none; border-radius: 14px; font-family: 'Lato', sans-serif; font-weight: 700; cursor: pointer; transition: background 180ms, border-color 180ms, color 180ms; }
.book-bottombar .bb-back { width: 52px; height: 52px; flex-shrink: 0; background: transparent; border: 1px solid var(--border-faint, rgba(255,255,255,0.14)); color: var(--text-muted, rgba(245,228,200,0.72)); font-size: 18px; }
.book-bottombar .bb-back:hover { border-color: var(--text-primary, #f5e4c8); color: var(--text-primary, #f5e4c8); }
.book-bottombar .bb-back:disabled { opacity: 0.4; pointer-events: none; }
.book-bottombar .bb-total { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0 8px; min-width: 0; }
.book-bottombar .bb-total-label { font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted, rgba(245,228,200,0.72)); }
.book-bottombar .bb-total-value { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700; color: var(--ember, #c68654); letter-spacing: 0.3px; margin-top: 2px; }
.book-bottombar .bb-next { min-width: 120px; height: 52px; padding: 0 22px; background: var(--ember, #c68654); border: 1px solid var(--ember, #c68654); color: var(--bg, #0c0905); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.book-bottombar .bb-next:hover { background: var(--ember-bright, #e4a06c); border-color: var(--ember-bright, #e4a06c); }
.book-bottombar .bb-next:disabled { opacity: 0.45; pointer-events: none; }

/* Hide desktop .bnav on mobile when bottom bar is visible */
@media (max-width: 820px) {
  body.has-bottombar .bnav { display: none; }
  /* …EXCEPT inside an accordion band. The bottom bar is `position: fixed;
     bottom: 0`, and on iOS Safari that sits behind the browser's own bottom
     toolbar until the page is scrolled — so on a long step (the add-ons list
     is the worst) the only Next button a phone guest had could be sitting
     under the browser chrome, and the booking read as stuck. In the
     accordion each band carries its own Next in the content flow, right
     under the choices it belongs to, which no browser UI can cover.
     Reported by the salon 2026-07-28: "customer is stuck in the add on
     section". */
  body.has-bottombar .acc-panel .bnav {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
  }
  /* The in-panel Back stays hidden — the band headers are the way back. */
  body.has-bottombar .acc-panel .bnav .btn.ghost { display: none; }
  /* Phones already carry a fixed bottom bar with Back / Total / Next, so the
     in-panel footer must NOT stick on top of it — that stacked two Next
     buttons one above the other (owner, 2026-08-20). On phones the footer
     goes back to the end of the panel and keeps only the WA-help shortcut;
     the one always-visible Next is the bottom bar's. */
  body.has-bottombar .acc-panel.active .acc-foot {
    position: static;
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border-top: 0;
    border-radius: 0;
  }
  /* Includes the summary step's Confirm — the bottom bar turns into Confirm
     on that step, so hiding this one leaves exactly one primary action. */
  body.has-bottombar .acc-panel .bnav .btn.solid { display: none; }
  body.has-bottombar .lang-bar { bottom: 58px; }
  /* Compact bottombar — ~30% tighter than desktop */
  .book-bottombar { height: 56px; padding: 6px 10px; gap: 8px; }
  .book-bottombar .bb-back { width: 44px; height: 44px; font-size: 15px; border-radius: 10px; }
  .book-bottombar .bb-total { padding: 0 6px; }
  .book-bottombar .bb-total-label { font-size: 9px; letter-spacing: 1.3px; }
  .book-bottombar .bb-total-value { font-size: 13px; margin-top: 1px; }
  .book-bottombar .bb-next { min-width: 96px; height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: 1.4px; border-radius: 10px; }
  /* Adjust reserved screen bottom padding to match shorter bar */
  body.has-bottombar .screen { padding-bottom: 64px; }
}
@media (min-width: 821px) {
  .book-bottombar { display: none !important; }
}

/* ═══════════ BOOKING DESKTOP STICKY SUMMARY (right column) ═══════════
   Layout contract on desktop (≥1024px):
   ┌─────────────────────────────────────┬──────────────────┐
   │                                     │                  │
   │         BOOKING FLOW (2/3)          │  YOUR SESSION    │
   │         .screen content             │  (1/3, sidebar)  │
   │                                     │  .book-summary   │
   └─────────────────────────────────────┴──────────────────┘

   The sidebar takes a fixed share of the viewport (33.33% / one-third)
   with sensible clamps so it never grows huge on 4K monitors or
   shrinks below readable width on a 1024px laptop. The booking
   `.screen` reserves matching right-margin so its content NEVER
   slides under the sidebar.

   Before this contract, `.book-summary` was a fixed-320px floating
   panel and `.screen` reserved a flat `right: 380px`. Wide content
   grids (the addons step has multi-column cards) routinely overflowed
   the 380px gutter and ended up underneath the panel — reported live
   2026-05-24 with screenshots showing "Холодная каменная маска" half-
   hidden behind the "ВАШ СЕАНС" card.
*/
@media (max-width: 1023px) {
  .book-summary { display: none !important; }
}
@media (min-width: 1024px) {
  :root {
    /* One-third of the viewport, with sensible bounds. min 320 keeps
       it readable on a 1024 laptop; max 460 stops it from looking
       absurd on a 2K monitor. */
    --book-sidebar-w: clamp(320px, 33.33vw, 460px);
    --book-sidebar-gap: 24px;     /* outer margin around the panel */
    /* Total horizontal space the sidebar occupies (panel + both gaps).
       .screen uses this for its `right` reservation so content sits
       fully in the remaining ~2/3 column. */
    --book-sidebar-total: calc(var(--book-sidebar-w) + var(--book-sidebar-gap) * 2);
  }
  .book-summary {
    position: fixed;
    top: 92px;
    right: var(--book-sidebar-gap);
    width: var(--book-sidebar-w);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 15;
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, rgba(23,18,10,0.92) 0%, rgba(18,14,8,0.88) 100%);
    border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 42px rgba(0,0,0,0.45);
  }
  .book-summary-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ember, #c68654); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.08)); }
  .book-summary-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .bs-item { display: flex; flex-direction: column; gap: 3px; }
  .bs-label { font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim, rgba(245,228,200,0.46)); }
  .bs-val { font-family: 'Lato', sans-serif; font-size: 14px; color: var(--text-primary, #f5e4c8); line-height: 1.45; }
  .bs-val.is-dim { color: var(--text-dim, rgba(245,228,200,0.46)); font-style: italic; font-size: 13px; }
  .book-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--border-faint, rgba(255,255,255,0.08)); }
  .bs-total-label { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted, rgba(245,228,200,0.72)); }
  .bs-total-value { font-family: 'Lato', sans-serif; font-size: 22px; font-weight: 700; color: var(--ember, #c68654); letter-spacing: 0.3px; }
  /* Booking flow reserves matching right-gutter so its content can
     NEVER overlap the sidebar — derived from the same var so they
     can't drift out of sync. Use padding-right (NOT `right`): on a
     position:relative .screen, `right` only OFFSETS the full-width box
     left (clipping content / still overlapping), it doesn't reserve
     space. padding-right genuinely shrinks the content column so the
     cards sit fully left of the fixed sidebar. */
  body.has-summary .screen { padding-right: var(--book-sidebar-total); }
  body.has-summary .home-btn { top: 12px; }
}

/* ═══════════ STEP 5: Edit buttons on summary cards ═══════════ */
.scrd { position: relative; }
.s-edit { position: absolute; top: 10px; right: 10px; -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid var(--border-faint, rgba(255,255,255,0.1)); color: var(--text-muted, rgba(245,228,200,0.72)); font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: color 180ms, border-color 180ms, background 180ms; }
.s-edit:hover { color: var(--ember, #c68654); border-color: var(--ember, #c68654); background: var(--ember-glow, rgba(198,134,84,0.1)); }

/* ═══════════ MOBILE DRAWER (summary sheet) ═══════════ */
.book-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 45; opacity: 0; transition: opacity 240ms cubic-bezier(.22,.61,.36,1); }
.book-drawer-backdrop.is-open { opacity: 1; }
.book-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 80vh; padding: 22px 22px 28px; background: linear-gradient(180deg, rgba(23,18,10,0.98) 0%, rgba(18,14,8,0.98) 100%); border-top: 1px solid var(--border-faint, rgba(255,255,255,0.1)); border-radius: 20px 20px 0 0; box-shadow: 0 -16px 40px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 260ms cubic-bezier(.22,.61,.36,1); overflow-y: auto; }
.book-drawer.is-open { transform: translateY(0); }
.book-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.08)); }
.book-drawer-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ember, #c68654); }
.book-drawer-close { -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid var(--border-faint, rgba(255,255,255,0.14)); width: 44px; height: 44px; border-radius: 50%; color: var(--text-muted, rgba(245,228,200,0.72)); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.book-drawer-close:hover { color: var(--text-primary, #f5e4c8); border-color: var(--text-primary, #f5e4c8); }
.book-drawer-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.book-drawer-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--border-faint, rgba(255,255,255,0.08)); }
.book-drawer .bs-item { gap: 4px; display: flex; flex-direction: column; }
.book-drawer .bs-label { font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim, rgba(245,228,200,0.46)); }
.book-drawer .bs-val { font-family: 'Lato', sans-serif; font-size: 15px; color: var(--text-primary, #f5e4c8); line-height: 1.5; }
.book-drawer .bs-total-label { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted, rgba(245,228,200,0.72)); }
.book-drawer .bs-total-value { font-family: 'Lato', sans-serif; font-size: 22px; font-weight: 700; color: var(--ember, #c68654); letter-spacing: 0.3px; }

/* Make the mobile bb-total tappable as a drawer trigger */
.book-bottombar .bb-total { min-height: 44px; cursor: pointer; -webkit-appearance: none; appearance: none; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: rgba(198,134,84,0.1); border: 0; background: transparent; }
.book-bottombar .bb-total:hover { opacity: 0.85; }

@media (min-width: 821px) {
  .book-drawer, .book-drawer-backdrop { display: none !important; }
}

/* ═══════════ BODY-MAP: tune avoid color to muted copper ═══════════ */
.vdot.avd { fill: #b9551b; stroke: #c97035; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(185,85,27,0.35)); }
.vdot.att { filter: drop-shadow(0 0 6px rgba(198,134,84,0.4)); }

/* ══════════════════════════════════════════════════════
   WELCOME SCREEN (s0) — language picker + name + phone
══════════════════════════════════════════════════════ */
#s0.active { padding: 40px 24px 80px; min-height: 100vh; align-items: center; justify-content: flex-start; overflow-y: auto; }
.welcome-wrap { width: 100%; max-width: 620px; margin: 0 auto; text-align: center; padding-top: 40px; }
.welcome-hello { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--ember, #c68654); margin-bottom: 20px; opacity: 0.85; }
.welcome-greeting { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(32px, 5vw, 48px); color: var(--text-primary, #f5e4c8); line-height: 1.15; margin-bottom: 16px; letter-spacing: 1px; }
.welcome-sub { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.65; color: var(--text-muted, rgba(245,228,200,0.72)); max-width: 520px; margin: 0 auto 36px; }

.welcome-langs {
  display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center;
  max-width: 600px; margin: 0 auto 40px;
}
.welcome-langs[hidden] { display: none; }
.welcome-lang-btn {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 185px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px;
  background: rgba(23,18,10,0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px rgba(0,0,0,0.22);
  color: var(--text-primary, #f5e4c8);
  font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 500;
  border-radius: 12px; cursor: pointer; transition: all .18s;
  white-space: nowrap;
}
.welcome-lang-btn:hover {
  border-color: rgba(198,134,84,0.4);
  background: rgba(30, 22, 12, 0.32);
}
.welcome-lang-btn.is-active {
  border-color: var(--ember, #c68654);
  background: rgba(198,134,84,0.14);
  color: var(--ember, #c68654);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(198,134,84,0.18);
}
.welcome-lang-btn .wl-flag { font-size: 20px; }
.welcome-lang-btn .wl-name { font-size: 13px; letter-spacing: 0.3px; }

.welcome-form { display: flex; flex-direction: column; gap: 20px; max-width: 440px; margin: 0 auto 36px; text-align: left; }
.welcome-field { display: flex; flex-direction: column; gap: 8px; position: relative; text-align: left; }
.welcome-field-hint { font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text-dim, rgba(245,228,200,0.46)); margin-top: 6px; }

/* Party-size picker — 4 chips on the welcome screen (online flow only) */
.welcome-party {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.welcome-party-btn {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(23,18,10,0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text-primary, #f5e4c8);
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: all .18s;
}
.welcome-party-btn:hover {
  border-color: rgba(198,134,84,0.4);
  background: rgba(30, 22, 12, 0.32);
}
.welcome-party-btn.is-active {
  border-color: var(--ember, #c68654);
  background: rgba(198,134,84,0.14);
  color: var(--ember, #c68654);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(198,134,84,0.18);
}
.welcome-party-btn .wp-num {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.welcome-party-btn .wp-lbl {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.78;
}
@media (max-width: 520px) {
  .welcome-party { grid-template-columns: repeat(2, 1fr); }
}

/* Auto-suggest dropdown */
.welcome-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 25;
  background: #17120a;
  border: 1px solid rgba(198, 134, 84, 0.4);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.welcome-suggest-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary, #f5e4c8);
  transition: background .12s;
}
.welcome-suggest-item:hover,
.welcome-suggest-item.is-active {
  background: rgba(198, 134, 84, 0.14);
}
.welcome-suggest-main {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; text-align: left;
}
.welcome-suggest-name { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; }
.welcome-suggest-phone { font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text-muted, rgba(245,228,200,0.72)); letter-spacing: 0.5px; }
.welcome-suggest-meta {
  font-family: 'Lato', sans-serif; font-size: 11px;
  color: var(--ember, #c68654);
  letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
}

/* Inline "welcome back" banner when exact match detected while typing */
.welcome-match {
  margin: 16px auto 0;
  max-width: 540px;
  padding: 12px 18px;
  background: rgba(198, 134, 84, 0.1);
  border: 1px solid rgba(198, 134, 84, 0.4);
  border-radius: 12px;
  color: var(--ember, #c68654);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  animation: fadeIn .25s ease;
}
.welcome-match b { color: var(--text-primary, #f5e4c8); font-weight: 700; }
.welcome-field-label { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted, rgba(245,228,200,0.72)); }
.welcome-field input {
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 14px 18px;
  background: rgba(23,18,10,0.7); border: 1px solid rgba(62,44,24,0.5);
  border-radius: 14px;
  color: var(--text-primary, #f5e4c8);
  font-family: 'Lato', sans-serif; font-size: 16px;
  transition: border-color .2s;
}
.welcome-field input:focus { outline: none; border-color: var(--ember, #c68654); }
.welcome-field input[type="tel"]::placeholder {
  color: rgba(245,228,200,0.28);
  -webkit-text-fill-color: rgba(245,228,200,0.28);
  opacity: 1;
  font-style: italic;
}
.welcome-field-hint { font-family: 'Lato', sans-serif; font-size: 11px; color: var(--text-dim, rgba(245,228,200,0.46)); line-height: 1.5; font-style: italic; }
.sc-saved-guest {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 9px 11px;
  border: 1px solid rgba(198,134,84,0.28); border-radius: 10px;
  background: rgba(198,134,84,0.07); color: var(--text-dim, rgba(245,228,200,0.46));
  font-family: 'Lato', sans-serif; font-size: 11px; font-style: normal;
}
.sc-saved-guest[hidden] { display: none; }
.sc-saved-guest button {
  min-height: 32px; padding: 5px 9px; border: 1px solid rgba(198,134,84,0.32); border-radius: 8px;
  background: transparent; color: var(--ember, #c68654); font: 700 11px/1.2 'Lato', sans-serif; cursor: pointer;
}

.welcome-cta { margin-top: 20px; }
.welcome-cta .btn { padding: 18px 48px; font-size: 15px; }
.welcome-skip { font-family: 'Lato', sans-serif; font-size: 12px; color: var(--text-dim, rgba(245,228,200,0.46)); margin-top: 16px; font-style: italic; }

/* ══════════════════════════════════════════════════════
   RETURNING CUSTOMER SCREEN
══════════════════════════════════════════════════════ */
#s-repeat.active { padding: 40px 24px 80px; min-height: 100vh; align-items: center; justify-content: flex-start; overflow-y: auto; }
.returning-wrap { width: 100%; max-width: 620px; margin: 0 auto; text-align: center; padding-top: 40px; }
.returning-hello { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--ember, #c68654); margin-bottom: 12px; opacity: 0.85; }
.returning-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(32px, 5vw, 48px); color: var(--text-primary, #f5e4c8); margin-bottom: 8px; letter-spacing: 1px; }
.returning-sub { font-family: 'Lato', sans-serif; font-size: 15px; color: var(--text-muted, rgba(245,228,200,0.72)); margin-bottom: 32px; }

.returning-card {
  background: linear-gradient(135deg, rgba(198,134,84,0.1) 0%, rgba(23,18,10,0.6) 60%);
  border: 1px solid rgba(198,134,84,0.3); border-radius: 18px;
  padding: 30px 32px; margin-bottom: 32px; text-align: left;
}
.returning-visits { font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ember, #c68654); margin-bottom: 12px; opacity: 0.85; }
.returning-main { font-family: 'Fraunces', serif; font-size: 22px; color: var(--text-primary, #f5e4c8); margin-bottom: 16px; font-weight: 500; letter-spacing: 0.5px; }
.returning-line { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px dashed rgba(62,44,24,0.4); font-size: 14px; color: var(--text-muted, rgba(245,228,200,0.72)); }
.returning-line .rl-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ember, #c68654); }
.returning-line .rl-val { text-align: right; color: var(--text-primary, #f5e4c8); flex: 1; margin-left: 20px; }
.returning-total { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--ember, #c68654); text-align: right; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(198,134,84,0.3); letter-spacing: 0.5px; }

/* "Today's bookings" block on s-repeat — shown above the last-visit card
   when a phone match has scheduled bookings for today. */
.returning-today-block { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(198,134,84,0.2); }
.returning-today-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold, #e8c85a); margin-bottom: 12px; text-align: center; }
.returning-today-card { padding: 14px 16px; margin-bottom: 10px; background: rgba(232, 200, 90, 0.06); border: 1px solid rgba(232, 200, 90, 0.4); border-radius: 12px; }
.returning-today-card:last-child { margin-bottom: 0; }
.returning-today-time { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--gold, #e8c85a); margin-bottom: 4px; }
.returning-today-svc { font-size: 14px; color: var(--text-primary, #f5e4c8); margin-bottom: 4px; }
.returning-today-meta { font-size: 11px; color: var(--text-muted, rgba(245,228,200,0.6)); margin-bottom: 12px; letter-spacing: 0.3px; }
.btn-open-booking { width: 100%; padding: 12px 16px; font-size: 14px; }

.returning-cta { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.returning-cta .btn { min-width: 260px; padding: 16px 40px; font-size: 14px; }

@media (max-width: 500px) {
  .welcome-langs { grid-template-columns: 1fr; }
  .welcome-greeting, .returning-name { font-size: 28px; }
}

/* ═══ HIDE SCROLLBARS (scroll still works) ═══ */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Any inner scroll container in this stylesheet */
.screen, .table-wrap, .admin-modal-overlay, .order-drawer, .order-drawer-body, aside, .welcome-suggest { scrollbar-width: none; -ms-overflow-style: none; }
.screen::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .admin-modal-overlay::-webkit-scrollbar, .order-drawer::-webkit-scrollbar, .order-drawer-body::-webkit-scrollbar, aside::-webkit-scrollbar, .welcome-suggest::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ═════════════════════════════════════════════════════════════════
   WELLNESS INTAKE STEP (Guest Wellness Form: pregnancy, medical,
   drink preference, therapist note). Lives between zones and summary.
   ═════════════════════════════════════════════════════════════════ */
.sw-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 8px;
}
.sw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .sw-row { grid-template-columns: 1fr; }
}
.sw-card {
  background: rgba(23, 18, 10, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sw-card-wide { grid-column: 1 / -1; }
.sw-q {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f5e4c8);
  letter-spacing: 0.2px;
}
.sw-text {
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border-faint, rgba(255,255,255,0.10));
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--text-primary, #f5e4c8);
  resize: none;
  transition: border-color 160ms;
  box-sizing: border-box;
}
.sw-text:focus {
  outline: none;
  border-color: var(--ember, #c68654);
}
.sw-text::placeholder { color: var(--text-muted, rgba(245,228,200,0.42)); }
.sw-notice {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted, rgba(245,228,200,0.6));
  border-left: 2px solid var(--ember, #c68654);
  padding: 4px 0 4px 12px;
  margin: 4px 2px 0;
  font-style: italic;
}

/* Yes/No two-button group */
.yn-grp {
  display: flex;
  gap: 10px;
}
.yn-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-faint, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);
  color: var(--text-primary, #f5e4c8);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.yn-btn:hover { border-color: rgba(198,134,84,0.55); }
.yn-btn.on {
  background: rgba(198,134,84,0.16);
  border-color: var(--ember, #c68654);
  color: var(--ember, #c68654);
  box-shadow: 0 0 0 1px var(--ember, #c68654) inset;
}

/* Drink picker (4 options + temp sub-group) */
.drink-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .drink-grid { grid-template-columns: repeat(2, 1fr); }
}
.drink-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  border: 1px solid var(--border-faint, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);
  color: var(--text-primary, #f5e4c8);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  padding: 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  transition: background 160ms, border-color 160ms, color 160ms, transform 120ms;
}
.drink-btn:hover { border-color: rgba(198,134,84,0.55); }
.drink-btn.on {
  background: rgba(198,134,84,0.16);
  border-color: var(--ember, #c68654);
  color: var(--ember, #c68654);
  box-shadow: 0 0 0 1px var(--ember, #c68654) inset;
}
.drink-emoji { font-size: 22px; line-height: 1; opacity: 0.92; }
.drink-name {
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

.temp-grp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.temp-grp[hidden] { display: none !important; }
.sw-text[hidden] { display: none !important; }
.temp-grp .yn-btn { flex: 0 1 120px; min-height: 38px; font-size: 13px; }
.temp-lbl {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.6));
  margin-right: 4px;
  flex-shrink: 0;
}


/* ═════════════════════════════════════════════════════════════════
   S1 multi-select tweaks — running total pill at bottom of step 1
   ═════════════════════════════════════════════════════════════════ */
.s1-runtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto 4px;
  max-width: 540px;
  padding: 10px 16px;
  background: rgba(198,134,84,0.08);
  border: 1px solid rgba(198,134,84,0.32);
  border-radius: 14px;
  font-family: 'Lato', sans-serif;
}
.s1-runtotal-lbl {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.6));
}
.s1-runtotal-val {
  font-weight: 700;
  color: var(--ember, #c68654);
  font-size: 14px;
}
.s1-runtotal[hidden] { display: none !important; }

/* Multi-select highlight on duration buttons (green when selected) */
#s1 .dur-btn.sel {
  background: rgba(74,222,128,0.16);
  border-color: #4ade80;
  color: #4ade80;
}

/* ═════════════════════════════════════════════════════════════════
   Intensity step (si)
   ═════════════════════════════════════════════════════════════════ */
.si-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}
.si-card {
  background: rgba(23, 18, 10, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.si-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.si-name {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #f5e4c8);
}
.si-meta {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.6));
}
.si-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.si-buttons .intensity-btn {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 148px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  background: #100d09;
  border-radius: 14px;
}
.intensity-img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(.56) saturate(.84) contrast(1.04);
  transform: scale(1.015);
  transition: filter 180ms ease, transform 180ms ease;
}
.intensity-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,6,4,.04) 18%, rgba(8,6,4,.2) 48%, rgba(8,6,4,.94) 100%);
  pointer-events: none;
}
.intensity-label {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px 17px;
  color: var(--text-primary, #f5e4c8);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
}
.intensity-btn:hover .intensity-img { filter: brightness(.68) saturate(.94) contrast(1.04); }
.intensity-btn.on .intensity-img {
  filter: brightness(.78) saturate(1.04) contrast(1.05);
  transform: scale(1.035);
}
.intensity-btn.on::after {
  background: linear-gradient(180deg, rgba(82,43,20,.03) 12%, rgba(53,30,18,.16) 48%, rgba(28,17,10,.94) 100%);
}
.intensity-btn.on .intensity-label { color: var(--ember, #c68654); }
@media (max-width: 480px) {
  .si-buttons { gap: 7px; }
  .si-buttons .intensity-btn { min-height: 120px; border-radius: 12px; }
  .intensity-label { padding: 12px 10px; font-size: 12px; text-align: center; }
}

/* ═════════════════════════════════════════════════════════════════
   Add-ons step (sa) — same wrap as s2, just gives addons their own page
   ═════════════════════════════════════════════════════════════════ */
.sa-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding-top: 4px;
}

/* ═════════════════════════════════════════════════════════════════
   Promo code row on summary screen
   ═════════════════════════════════════════════════════════════════ */
.promo-row {
  grid-column: 1 / -1;
  background: rgba(23, 18, 10, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Promo on the FIRST screen (owner spec 2026-06-21): live %-promo strikes
   through every massage price below and shows the discounted price. */
.promo-row--top { margin: 2px 0 20px; }
.dur-old { text-decoration: line-through; opacity: 0.55; font-weight: 400; margin-right: 3px; }
.dur-new { color: var(--ember, #c68654); font-weight: 700; }
.dur-btn.sel .dur-new { color: inherit; }
.dur-btn.sel .dur-old { opacity: 0.6; }
.promo-label {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.6));
  font-weight: 700;
}
.promo-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.promo-input-row #promo-input {
  flex: 1;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border-faint, rgba(255,255,255,0.10));
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--text-primary, #f5e4c8);
  /* Browsers (especially Safari + iOS) sometimes ignore `color` on
     <input> and use their own `-webkit-text-fill-color` instead —
     setting both pins the rendered text colour to our cream regardless.
     caret-color makes the typing cursor visible against the dark bg. */
  -webkit-text-fill-color: var(--text-primary, #f5e4c8);
  caret-color: var(--text-primary, #f5e4c8);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: border-color 160ms;
}
.promo-input-row #promo-input:focus {
  outline: none;
  border-color: var(--ember, #c68654);
}
.promo-input-row #promo-input::placeholder {
  color: rgba(255, 255, 255, 0.36);   /* neutral grey hint (owner: "сделать сереньким, PROMOCODE") */
  text-transform: none;
  letter-spacing: 0.2px;
}
/* Chrome / Safari autofill — by default the browser repaints the
   input with a yellow / white background AND its own dark text
   colour, both of which clash with the dark theme. The standard
   workaround: paint over the autofill background with a very long
   inset shadow (background-color is ignored on autofilled inputs)
   and pin -webkit-text-fill-color so the value stays cream. Reported
   live 2026-05-25 — promo code typing rendered black-on-black on
   Safari autofill suggestion.

   Applies to ALL inputs/textareas inside .screen (the booking flow):
   promo, contact name/phone, therapist notes — anywhere the user
   types. Without the .screen scope the rule would leak into admin
   inputs which have their own (light-on-dark) styling. */
.screen input:-webkit-autofill,
.screen input:-webkit-autofill:hover,
.screen input:-webkit-autofill:focus,
.screen input:-webkit-autofill:active,
.screen textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.18) inset;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0.18) inset;
  -webkit-text-fill-color: var(--text-primary, #f5e4c8);
  caret-color: var(--text-primary, #f5e4c8);
  transition: background-color 99999s ease-out;  /* prevent flash */
}
/* Belt-and-braces: pin text-fill-color + caret on every input/textarea
   inside the booking flow so even non-autofill scenarios (some mobile
   browsers, system password manager paste) never render dark-on-dark. */
.screen input,
.screen textarea {
  -webkit-text-fill-color: var(--text-primary, #f5e4c8);
  caret-color: var(--text-primary, #f5e4c8);
}
.btn-promo {
  flex: 0 0 auto;
  min-width: 90px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.promo-msg {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
}
.promo-msg--good { color: #4ade80; }
.promo-msg--bad  { color: #e6a094; }
.promo-msg[hidden] { display: none !important; }

/* Discount + subtotal lines under main total */
.total-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
}
.total-sub .discount-line {
  color: #4ade80;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.total-sub .subtotal-line {
  color: var(--text-muted, rgba(245,228,200,0.5));
  text-decoration: line-through;
}
.total-sub[hidden] { display: none !important; }

/* Treatment summary card — multi-line layout when several services picked */
#sum-massage br + br { display: none; } /* avoid double-blanks */
#sum-massage {
  line-height: 1.45;
}

/* ═════════════════════════════════════════════════════════════════
   Per-service remove buttons + summary line layout
   ═════════════════════════════════════════════════════════════════ */
.svc-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-right: 8px;
}
.svc-meta {
  color: var(--text-muted, rgba(245,228,200,0.6));
  font-size: 12px;
}
.svc-remove {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: rgba(220,80,60,0.12);
  color: #e6a094;
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 140ms;
}
.svc-remove:hover { background: rgba(220,80,60,0.25); }

/* ═════════════════════════════════════════════════════════════════
   Duration warning + s1 runtotal layout split
   ═════════════════════════════════════════════════════════════════ */
.s1-runtotal { flex-direction: column; gap: 4px; }
.s1-runtotal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.s1-runtotal-warn {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  color: #e6a094;
  font-style: italic;
  letter-spacing: 0.2px;
}
.s1-runtotal--warn {
  background: rgba(220,80,60,0.10);
  border-color: rgba(220,80,60,0.4);
}

/* ═════════════════════════════════════════════════════════════════
   Promo × clear button + mobile bottombar promo tag
   ═════════════════════════════════════════════════════════════════ */
.btn-promo-clear {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 38px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(220,80,60,0.4);
  background: rgba(220,80,60,0.10);
  color: #e6a094;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms;
}
.btn-promo-clear:hover { background: rgba(220,80,60,0.20); }
.btn-promo-clear[hidden] { display: none !important; }

.bb-promo-tag {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #4ade80;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.4);
  padding: 1px 6px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 2px;
}
.bb-promo-tag[hidden] { display: none !important; }

/* ==================== STAFF KIOSK — TODAY'S OPEN BOOKINGS ====================
   Renders on the welcome screen above the CTA. Lists every still-open
   order created or scheduled for today; tap one → kiosk hydrates state
   from the order (existing openExistingBooking flow) and jumps to s5
   so the guest just confirms and adds details. Refresh button for the
   "online booking just landed on another device" case.

   Hidden when empty so the welcome layout stays unchanged in the
   early-morning empty-salon state. */
.welcome-today-panel {
  margin-top: 18px;
  padding: 14px 16px 12px;
  background: rgba(198,134,84,0.06);
  border: 1px solid rgba(198,134,84,0.22);
  border-radius: 12px;
}
.welcome-today-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.welcome-today-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember, #c68654);
}
.welcome-today-refresh {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(198,134,84,0.3);
  color: var(--ember, #c68654);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.welcome-today-refresh:hover {
  background: rgba(198,134,84,0.12);
  border-color: var(--ember, #c68654);
  transform: rotate(120deg);
}
.welcome-today-refresh:disabled { opacity: 0.5; cursor: wait; }

.welcome-today-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.welcome-today-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.welcome-today-card:hover {
  background: rgba(198,134,84,0.10);
  border-color: rgba(198,134,84,0.45);
}
.welcome-today-card:active { transform: translateY(1px); }

.wtc-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 3px;
}
.wtc-time {
  font-family: 'Lato', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--ember, #c68654);
  letter-spacing: 0.5px;
}
.wtc-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
}
.wtc-group {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(198,134,84,0.14);
  color: var(--ember, #c68654);
  border: 1px solid rgba(198,134,84,0.30);
  margin-left: auto;
  margin-right: 6px;
  font-family: 'Lato', monospace;
}
.wtc-status-new        { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.wtc-status-confirmed  { background: rgba(198,134,84,0.18); color: #e4a06c; }
.wtc-status-arrived    { background: rgba(196,178,82,0.18); color: #d4b252; }
.wtc-status-in_session { background: rgba(106,170,96,0.20); color: #81c476; }
.wtc-status-completed  { background: rgba(106,170,96,0.10); color: #81c476; }

.wtc-row2 {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin-bottom: 2px;
}
.wtc-row3 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.wtc-customer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
.wtc-total {
  font-family: 'Lato', monospace;
  white-space: nowrap;
}

/* ═══════════ KIOSK ACCORDION (2026-07-27) ═══════════
   The flow used to swap full-page `.screen` views (step 1 of 8 … 8 of 8).
   Reception asked for a single page: every step is a band that expands in
   place and finished bands go green with a ✓. The panels keep their ids
   and markup — `.active` now means "expanded" instead of "the visible
   page", so goTo()/goNext()/goBack() and every validation rule are
   untouched. Welcome (#s0) and returning-guest (#s-repeat) stay full-page.

   NO expand/collapse height or opacity animation, deliberately: the
   reception iPad is an Air 2 (A8X, 2GB, iOS 15) running 24/7, where a
   transition on a panel this size costs a full-page repaint — the same
   reason the lava canvas is painted once and never animated here. Only
   the small header chrome transitions (solid colours, cheap). */
/* html/body are locked to 100vh with overflow:hidden above 820px — the old
   flow was one absolutely-positioned screen at a time, scrolling inside
   itself. The accordion is one tall column, so the page itself has to
   scroll or the bands below the open one are unreachable (reported live on
   the 1024px reception iPad). Class is toggled on BOTH html and body from
   _accSync(): iOS 15 has no :has(), so CSS can't reach <html> on its own —
   the same reason has-progress/has-bottombar are body classes. */
html.acc-open, body.acc-open {
  width: 100%;
  height: auto;
  min-height: 100vh;
}
html.acc-open {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* <body> must NOT clip. Any non-visible overflow makes body its own scroll
   container — and `overflow-x: hidden` alone is enough, because a `visible`
   sibling axis then computes to `auto`. Body's height is content-height, so
   such a container never overflows itself, and the sticky .acc-foot inside it
   gets zero room to travel: it silently renders at the very bottom of the page
   instead of the viewport (measured live 2026-08-20 — footer top 2529px in a
   720px viewport). The horizontal clamp lives on <html> above, so nothing
   scrolls sideways either way. */
body.acc-open {
  overflow: visible;
}

.acc-wrap {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 92px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.has-bottombar .acc-wrap { padding-bottom: 104px; }
.acc-brand { display: flex; justify-content: center; margin-bottom: 4px; }
.acc-brand .logo-h1 { margin: 0; }

/* Panel — neutralise the full-page `.screen` positioning. */
.screen.acc-panel,
body.has-progress .screen.acc-panel,
body.has-summary .screen.acc-panel,
body.has-bottombar .screen.acc-panel {
  position: static;
  inset: auto;
  display: block;
  min-height: 0;
  padding: 0;
  animation: none;
  overflow: visible;
  border: 1px solid var(--border-faint, rgba(255,255,255,0.08));
  border-radius: 16px;
  background: rgba(255,255,255,0.014);
}
/* `hidden` MUST win. The UA rule is only `[hidden] { display: none }`, so
   the `display: flex/block` above outranks it and both the wrapper and
   out-of-flow panels kept rendering — they piled up behind the welcome
   screen on the live kiosk. Anything that sets .hidden in JS relies on this. */
.acc-wrap[hidden],
.screen.acc-panel[hidden],
body.has-progress .screen.acc-panel[hidden],
body.has-summary .screen.acc-panel[hidden],
body.has-bottombar .screen.acc-panel[hidden] { display: none !important; }

.screen.acc-panel.is-done   { border-color: rgba(106,168,120,0.34); background: rgba(106,168,120,0.05); }
.screen.acc-panel.active    { border-color: rgba(198,134,84,0.42); background: rgba(198,134,84,0.045); }

/* Header row — the only thing visible when collapsed. */
.acc-head {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: 'Lato', sans-serif;
}
.acc-head:disabled { cursor: default; }
/* Dim only steps the guest can't reach yet — the current step's header is
   also disabled (clicking it is a no-op) but must stay fully readable. */
.acc-panel:not(.active) .acc-head:disabled { opacity: 0.42; }
.acc-mark {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-faint, rgba(255,255,255,0.14));
  color: var(--text-muted, rgba(245,228,200,0.72));
  font-size: 12px; font-weight: 700;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.acc-panel.active .acc-mark { border-color: var(--ember, #c68654); color: var(--ember, #c68654); }
.acc-panel.is-done .acc-mark { border-color: #6aa878; background: #6aa878; color: #10190f; }
.acc-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-title {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted, rgba(245,228,200,0.72));
}
.acc-panel.active .acc-title { color: var(--ember, #c68654); }
.acc-panel.is-done .acc-title { color: rgba(150,200,160,0.9); }
.acc-sum {
  font-size: 13px; line-height: 1.35;
  color: var(--text-primary, #f5e4c8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sum:empty { display: none; }
.acc-chev { flex: 0 0 auto; font-size: 12px; color: var(--text-dim, rgba(245,228,200,0.46)); }
.acc-panel.active .acc-chev { color: var(--ember, #c68654); }

/* Body — plain show/hide, no transition (see note above). */
.acc-body { display: none; padding: 0 16px 16px; }
.acc-panel.active .acc-body { display: block; }
/* Chrome that the accordion header replaces. */
.acc-panel .ornl,
.acc-panel .dots,
.acc-panel .hdr h1,
.acc-panel .bnav > span,
.acc-panel .bnav .btn.ghost { display: none; }
/* .hdr is a centring flex column — text-align alone leaves the shrunk
   paragraph box parked in the middle, so realign the flex axis too. */
.acc-panel .hdr { margin: 0 0 14px; text-align: left; align-items: flex-start; }
/* The old page subtitle was centred display type sized for a full screen;
   inside a band it reads as a caption. */
.acc-panel .hdr p {
  margin: 0;
  text-align: left;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--text-dim, rgba(245,228,200,0.46));
}
.acc-panel .bnav { justify-content: flex-end; margin-top: 14px; }

/* ═══ Sticky panel footer (2026-08-20) ═══
   The service catalogue is taller than any viewport, so the running total
   and the Next button — the bottom of the open band — used to sit below the
   entire list: guests and the reception iPad had to scroll a long way to
   find Next. Owner: "the bottom of section 1 must be visible right away."
   `position: sticky` keeps the footer pinned to the bottom edge of the
   screen while the band's content still runs past it, then lets it settle
   into place at the end — no inner scroll box, so nothing is hidden.

   Opaque background is required: the panel is translucent over the page, so
   without it the list scrolls visibly through the footer. #150f09 is the
   page background (#0c0905) with the active band's 4.5% ember tint already
   composited in, so the bar reads as part of the panel. No backdrop-filter
   — the reception iPad is an Air 2 and blurs a bar this wide every frame. */
.acc-panel.active .acc-foot {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 12px -16px -16px;
  padding: 8px 16px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #150f09;
  border-top: 1px solid var(--border-faint, rgba(255,255,255,0.08));
  border-radius: 0 0 16px 16px;
}
.acc-panel.active .acc-foot .bnav { margin-top: 0; }
/* Cookie banner is fixed at the bottom too (z-index 9999) and would sit on top
   of the Next button on a first visit. consent.js publishes its measured height
   so the footer steps above it until the guest answers. */
body.has-consent-banner .acc-panel.active .acc-foot { bottom: var(--consent-h, 180px); }
.acc-panel.active .acc-foot .s1-runtotal { margin: 0 auto 8px; }
/* A band with nothing to pin (short step, footer already on screen) keeps
   the plain look — sticky is harmless there, it just never detaches. */

@media (min-width: 1024px) {
  body.has-summary .acc-wrap { padding-right: calc(var(--book-sidebar-total) + 16px); max-width: none; }
}
@media (max-width: 480px) {
  .acc-wrap { padding: 76px 10px 32px; gap: 6px; }
  .acc-head { padding: 12px 12px; gap: 10px; }
  .acc-body { padding: 0 12px 14px; }
  .acc-panel.active .acc-foot { margin: 10px -12px -14px; padding-left: 12px; padding-right: 12px; }
}

/* ═══ Package price groups (single vs pair) ═══
   A package priced for one guest AND for a pair shows both, each under its
   own label — swapping the number silently made the menu unreadable. */
.dur-group-lbl {
  flex: 1 0 100%;
  margin: 2px 0 -2px;
  font-family: 'Lato', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-dim, rgba(245,228,200,0.46));
}
.dur-group-lbl + .dur-btn { margin-left: 0; }
.dur-btn.is-couple.sel, .dur-btn.is-couple { border-color: rgba(198,134,84,0.34); }