:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #111111);
  --muted: var(--tg-theme-hint-color, #707579);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btnfg: var(--tg-theme-button-text-color, #ffffff);
  --sec: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --link: var(--tg-theme-link-color, #2481cc);
  --danger: #c0392b;
  --ok: #1aa260;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}

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 — mirrors welcome_kb (Book + Back to Languages) */
.welcome{padding:28px 8px 20px;text-align:center}
.welcome-mark{font-size:36px;color:var(--btn);line-height:1;margin-bottom:10px}
.welcome h2{margin:0 0 6px;font-size:22px;font-weight:700}
.welcome .muted{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.cta{display:block;width:100%;padding:14px 16px;font-size:16px;font-weight:600;
  border:0;border-radius:var(--radius-md);margin-top:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s,opacity .12s}
.cta:active{transform:scale(.98);opacity:.92}
.cta.primary{background:var(--btn);color:var(--btnfg)}
.cta.secondary{background:var(--sec);color:var(--fg)}

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