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

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; }
.mcrd .mdesc { font-size: 13px; color: var(--text-muted, rgba(245,228,200,0.66)); line-height: 1.55; }
.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: rgba(245,228,200,0.46); 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 grid — hairline rows */
.agrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 600px) { .agrid { grid-template-columns: 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 { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; }
.acrd .achk { width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,0.14); 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: 2px; }
.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; }

/* ═══════════ 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; }
.vitruvian-wrap { position: relative; width: 220px; aspect-ratio: 744/800; }
.vitruvian-img { width: 100%; height: 100%; display: block; filter: invert(1) sepia(1) saturate(1.1) brightness(0.72) hue-rotate(2deg); }
.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; 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/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; padding: 7px 14px; 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: 12px; right: 12px; z-index: 45; display: flex; align-items: center; gap: 5px; height: 30px; }
.lang-active { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; 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-opt { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; 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; }
  .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); }
.ovbox .ov-btns { display: flex; 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);
}

/* ═══════════ 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; }
  body.has-bottombar .lang-bar { bottom: 58px; }
  /* Compact bottombar — ~30% tighter than desktop */
  .book-bottombar { height: 50px; padding: 6px 10px; gap: 8px; }
  .book-bottombar .bb-back { width: 40px; height: 40px; 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: 40px; 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: 36px; height: 36px; 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 { cursor: pointer; -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-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-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; }

.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 .yn-btn { min-height: 40px; font-size: 13px; }

/* ═════════════════════════════════════════════════════════════════
   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;
}