:root{
  /* Sapphire Reservation tokens — see webapp/docs/2026-05-28-blue-button-design.md */
  --sapphire-700:#1B3D6E;
  --sapphire-900:#0E2347;
  --gold-500:#C9A961;
  --gold-300:#E0BC72;
  --marble-50:#F7F4EF;
  --marble-100:#ECE6DA;
  --ink:#1A1A1A;
  --ink-muted:#6B6B6B;
  --white:#FFFFFF;

  /* Legacy / non-CTA Telegram-theme-aware aliases (kept for booking screens) */
  --bg: var(--tg-theme-bg-color, var(--marble-50));
  --fg: var(--tg-theme-text-color, var(--ink));
  --muted: var(--tg-theme-hint-color, var(--ink-muted));
  --btn: var(--tg-theme-button-color, var(--sapphire-700));
  --btnfg: var(--tg-theme-button-text-color, var(--white));
  --sec: var(--tg-theme-secondary-bg-color, #ECE6DA);
  --link: var(--tg-theme-link-color, var(--sapphire-700));
  --danger:#c0392b;
  --ok:#1aa260;
  --radius-lg:16px;
  --radius-md:14px;
  --radius-sm:10px;

  /* Marble noise — inline SVG data-URI (~1.5 KB) */
  --marble-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82  0 0 0 0 0.78  0 0 0 0 0.71  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");

  /* Premium easing curve — Apple-sheet-like decelerate */
  --ease-luxe:cubic-bezier(.22,1,.36,1);
}

/* Dark theme parity via Telegram CSS vars (sapphire + gold unchanged) */
@media (prefers-color-scheme: dark){
  :root{
    --marble-50:#15161A;
    --marble-100:#23252B;
    --ink:#F5F0E8;
    --ink-muted:#9A968F;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;color:var(--fg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, transparent 0%, rgba(247,244,239,0.5) 100%),
    var(--marble-noise),
    var(--bg);
  background-blend-mode:normal, soft-light, normal;
  background-size: auto, 240px 240px, auto;
}

main{padding:18px 16px 120px;max-width:600px;margin:0 auto}

.hero{padding-bottom:14px;border-bottom:1px solid var(--sec);margin-bottom:18px}
.brand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-size:22px;margin:6px 0 4px;font-weight:700;letter-spacing:-.01em}
.sub{margin:0;color:var(--muted);font-size:14px}

.stepper{display:flex;gap:6px;margin-top:14px}
.dot{width:22px;height:4px;border-radius:2px;background:var(--sec);transition:background .2s}
.dot.active{background:var(--btn)}
.dot.done{background:var(--ok)}

.screen{animation:slideIn .22s ease-out}
.hidden{display:none !important}
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.summary{background:var(--sec);border-radius:var(--radius-md);padding:10px 14px;
  margin-bottom:14px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.summary b{color:var(--fg);font-weight:600}
.summary .pill{background:var(--bg);padding:3px 10px;border-radius:999px;border:1px solid var(--sec)}

.grid{display:grid;gap:10px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--sec);border-radius:var(--radius-md);padding:14px 12px;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:transform .12s,border-color .12s,background .12s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:14px;font-weight:500;min-height:80px;justify-content:center;
  -webkit-tap-highlight-color:transparent}
.card:active{transform:scale(.97)}
.card.selected{border-color:var(--btn);background:var(--bg)}
.card .icon{font-size:24px;line-height:1}
.card .label{font-size:13px;color:var(--fg)}

.card.slot{padding:14px 6px;min-height:54px;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.card.slot.taken{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.card.day{padding:12px 6px;min-height:64px;gap:2px}
.card.day .dow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.card.day .dnum{font-size:20px;font-weight:700}
.card.day .dmon{font-size:10px;color:var(--muted)}
.card.day.today{outline:1px dashed var(--btn);outline-offset:-3px}

.field{display:block;margin:14px 0}
.field span{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:13px 14px;font-size:16px;border-radius:var(--radius-md);
  border:1.5px solid var(--sec);background:var(--sec);color:var(--fg);outline:none;
  transition:border-color .15s,background .15s}
.field input:focus{border-color:var(--btn);background:var(--bg)}

.hint{color:var(--muted);font-size:12px;margin-top:10px;line-height:1.4}

.err{margin-top:14px;padding:12px 14px;background:rgba(192,57,43,.08);
  color:var(--danger);border-radius:var(--radius-md);font-size:13px}

.receipt{padding:28px 14px;text-align:center}
.receipt .check{width:64px;height:64px;border-radius:32px;background:var(--ok);
  color:#fff;font-size:34px;line-height:64px;margin:0 auto 14px;font-weight:700}
.receipt h2{margin:0 0 6px;font-size:20px}
.receipt .muted{color:var(--muted);font-size:14px;margin:0 0 16px}
.receipt .ref{display:inline-block;padding:8px 16px;background:var(--sec);
  border-radius:999px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em}

/* Language picker — mirrors keyboards.language_kb (hero UZ + 6 others) */
.lang-hero{display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;padding:18px 12px;margin-bottom:12px;font-size:16px;font-weight:700;
  letter-spacing:.06em;background:var(--btn);color:var(--btnfg);
  border:0;border-radius:var(--radius-md);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s,opacity .12s}
.lang-hero:active{transform:scale(.98);opacity:.92}
.lang-hero .flag{font-size:22px;line-height:1}
.lang-hero .lname{flex:1;text-align:center}

.lang-btn{padding:14px 10px;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px}

/* Welcome screen — Sapphire Reservation composition (Scandinavian Quiet) */
.welcome{padding:40px 16px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-mark{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:14px;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink);opacity:.85;margin-bottom:14px}
.divider-diamond{display:flex;align-items:center;gap:10px;width:100%;max-width:200px;
  margin:0 auto 22px;opacity:.7}
.divider-diamond .rule{flex:1;height:1px;background:var(--gold-500)}
.divider-diamond .diamond{color:var(--gold-500);font-size:9px;line-height:1}
.welcome-headline{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 12px;max-width:320px}
.welcome-sub{font-family:"Inter",sans-serif;font-size:14px;font-weight:400;
  line-height:1.5;color:var(--ink-muted);margin:0 auto 36px;max-width:300px}

.cta-wrap{width:100%;max-width:360px;margin:0 auto;padding:0 4px}

/* Generic CTA reset (kept for booking screens, but no default visual) */
.cta{display:block;width:100%;padding:14px 16px;font-size:16px;font-weight:600;
  border:0;border-radius:var(--radius-md);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  font-family:"Inter",sans-serif;letter-spacing:0;text-align:center;
  transition:transform .24s var(--ease-luxe),
              box-shadow .24s var(--ease-luxe),
              opacity .24s var(--ease-luxe);
  appearance:none;color:var(--fg)}
.cta.secondary{background:var(--sec);color:var(--fg);margin-top:10px}

/* Sapphire Reservation CTA */
.cta-sapphire{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:56px;padding:18px 24px;
  font-family:"Inter",sans-serif;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.10em;color:var(--white);
  background:linear-gradient(180deg,var(--sapphire-700) 0%,var(--sapphire-900) 100%);
  border:1px solid rgba(201,169,97,.35);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -8px rgba(14,35,71,.45),
    0 0 0 0 rgba(201,169,97,0);
}
.cta-sapphire .cta-label{position:relative;z-index:2;display:inline-block;line-height:1.2}
.cta-sapphire .cta-underline{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:32px;height:1px;background:var(--gold-500);opacity:.7;z-index:2;
  transition:width .24s var(--ease-luxe), opacity .24s var(--ease-luxe);
}

/* Tertiary "Change language" link below the CTA */
.cta.tertiary{
  background:transparent;color:var(--ink-muted);font-size:13px;font-weight:500;
  padding:14px 12px;margin-top:6px;letter-spacing:0;text-transform:none;
}
.cta.tertiary:hover{color:var(--ink);text-decoration:underline}

/* Sapphire CTA states */
.cta-sapphire:hover,
.cta-sapphire:focus-visible{
  border-color:rgba(201,169,97,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 32px -8px rgba(14,35,71,.50),
    0 0 0 4px rgba(201,169,97,.12);
  outline:none;
}
.cta-sapphire:hover .cta-underline,
.cta-sapphire:focus-visible .cta-underline{width:48px;opacity:1}

.cta-sapphire:active{
  transform:scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px -4px rgba(14,35,71,.45),
    0 0 0 4px rgba(201,169,97,.10);
}

.cta-sapphire[disabled],
.cta-sapphire.is-disabled{
  opacity:.5;cursor:not-allowed;
  border-color:rgba(201,169,97,.15);
  box-shadow:none;
}
.cta-sapphire[disabled] .cta-underline,
.cta-sapphire.is-disabled .cta-underline{opacity:0}

.cta-sapphire.is-loading .cta-label{opacity:.6}
.cta-sapphire.is-loading .cta-underline{
  width:18px;height:18px;border-radius:50%;background:transparent;
  border:1.5px solid rgba(201,169,97,.3);border-top-color:var(--gold-500);
  bottom:50%;transform:translate(-50%,50%);
  animation:cta-spin .8s linear infinite;
}
@keyframes cta-spin{to{transform:translate(-50%,50%) rotate(360deg)}}

/* Ripple — gold radial pulse on press */
.cta-sapphire .cta-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,215,130,.18) 0%,rgba(255,215,130,0) 70%);
  transform:translate(-50%,-50%) scale(0);
  width:300px;height:300px;z-index:1;
  transition:transform .6s ease-out, opacity .6s ease-out;
  opacity:0;
}
.cta-sapphire .cta-ripple.is-active{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}

/* RTL (Arabic) */
body[dir="rtl"] .summary,
body[dir="rtl"] .welcome,
body[dir="rtl"] .field span{text-align:right}
body[dir="rtl"] .stepper{flex-direction:row-reverse}

/* Hide stepper outside booking screens (lang/welcome/done) */
.stepper.hidden{visibility:hidden}

/* Custom date picker — outlined sapphire button + hidden native input */
.custom-date-row{margin-top:18px;position:relative}
.custom-date-btn{
  width:100%;padding:14px 20px;min-height:54px;
  background:rgba(27,61,110,.04);
  border:1.5px dashed rgba(27,61,110,.30);
  border-radius:var(--radius-md);
  color:var(--ink);font-family:"Inter",sans-serif;
  font-size:14px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  -webkit-tap-highlight-color:transparent;
  transition:background .24s var(--ease-luxe),
              border-color .24s var(--ease-luxe),
              border-style .24s var(--ease-luxe);
}
.custom-date-btn:hover,.custom-date-btn:focus-visible{
  background:rgba(27,61,110,.08);
  border-color:rgba(201,169,97,.65);
  border-style:solid;
  outline:none;
}
.custom-date-btn:active{background:rgba(27,61,110,.12)}
.custom-date-btn .cdb-icon{font-size:18px;line-height:1}
.custom-date-btn .cdb-label{letter-spacing:.02em}
.custom-date-btn .cdb-value{
  color:var(--sapphire-700);font-weight:600;font-variant-numeric:tabular-nums;
  padding-left:6px;border-left:1px solid rgba(201,169,97,.4);margin-left:2px;
}
.custom-date-btn .cdb-value:empty{display:none;border:0;padding:0;margin:0}
.custom-date-input{
  position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;pointer-events:none;border:0;padding:0;
}

/* Hero header is redundant on the welcome screen (brand mark lives inside) */
body.scr-welcome .hero{display:none}
body.scr-welcome main{padding-top:24px}

/* Reduced motion — instant transitions, no ripple, no underline grow */
@media (prefers-reduced-motion: reduce){
  .cta-sapphire,
  .cta-sapphire .cta-underline,
  .cta-sapphire .cta-ripple{transition:none !important; animation:none !important}
  .cta-sapphire:hover .cta-underline,
  .cta-sapphire:focus-visible .cta-underline{width:32px}
  .cta-sapphire .cta-ripple.is-active{opacity:0}
  .screen{animation:none}
}