/* =========================================================
   drsanjaymehrotra.com — stylesheet (direction: International)
   Self-hosted fonts, light theme, no JavaScript required.
   ========================================================= */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/IBMPlexSans.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600 800;font-display:swap;src:url('/assets/fonts/PlusJakartaSans.woff2') format('woff2');}

:root {
  --white: #ffffff;
  --cloud: #f1f4f9;
  --mist: #e3e9f2;
  --cobalt: #1747c4;
  --cobalt-deep: #0f338f;
  --cobalt-tint: #e4ebfb;
  --mid: #0b1b3f;
  --ink: #101828;
  --body: #344054;
  --grey: #5b6b85;
  --green: #0e8a6e;
  --alert-bg: #fef3f2;
  --alert-ink: #912018;
  --alert-line: #fecdca;
  --focus: #f2a93b;
  --call: #0e8a4a;
  --call-deep: #0a6b39;
  --call-tint: #e6f5ec;
  --nh: #1b4e9b;        /* Narayana Health blue */
  --hq: #2563eb;        /* HealthQure blue */
  --hq-deep: #1e3a8a;

  --font-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 20px;
  --shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }  /* 18px */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0; font-family: var(--font-body); line-height: 1.6; color: var(--ink);
  background: var(--white); padding-bottom: 84px;
}
@media (min-width: 820px) { body { padding-bottom: 0; } }

h1, h2, h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5em; color: var(--mid); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.3rem); }
h3 { font-size: 1.5rem; }
h4 { font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin: 1.5rem 0 .6rem; }
p { margin: 0 0 1em; }
a { color: var(--cobalt-deep); text-underline-offset: 3px; }
a:hover { color: var(--cobalt); }
address { font-style: normal; margin-bottom: 1rem; }
ul { padding-left: 1.2em; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.sprite { position: absolute; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2.5rem, 1100px); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--mid); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mist); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--mid); font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.15; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: .8rem; letter-spacing: .02em; flex: none; }
.brand-text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .74rem; color: var(--grey); }
.header-right { display: flex; align-items: center; gap: .4rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.site-nav a { display: inline-block; padding: .55rem .8rem; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .92rem; }
.site-nav a:hover { background: var(--cloud); color: var(--cobalt-deep); }
.hbtn { display: inline-flex; align-items: center; gap: .45rem; background: var(--cobalt); color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: .9rem; padding: .65rem 1.1rem; border-radius: 999px; white-space: nowrap; }
.hbtn:hover { background: var(--cobalt-deep); color: #fff; }
@media (max-width: 820px) { .site-nav { display: none; } }
@media (max-width: 480px) { .brand-text small { display: none; } .hbtn { font-size: .84rem; padding: .6rem .8rem; } .hbtn svg { display: none; } }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--cloud) 0%, var(--white) 100%); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; } }
.tag { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--mist); border-radius: 999px; padding: .38rem .9rem; font-size: .82rem; font-weight: 600; color: var(--cobalt-deep); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.hero h1 { margin: 1rem 0 .3rem; }
.hero-role { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--cobalt); margin: 0 0 .2rem; }
.hero-quals { color: var(--grey); margin: 0 0 1.2rem; }
.hero-lead { font-size: 1.12rem; max-width: 34em; color: var(--body); }
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.btn { display: inline-flex; align-items: center; gap: .8rem; min-height: 64px; padding: .8rem 1.4rem; border-radius: 14px; text-decoration: none; font-family: var(--font-head); font-weight: 700; line-height: 1.2; min-width: 230px; border: 1.5px solid transparent; transition: background .12s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn > span { display: flex; flex-direction: column; text-align: left; }
.btn small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; opacity: .88; margin-top: .15rem; }
.btn svg.i { width: 24px; height: 24px; }
.btn-call { background: var(--call); color: #fff; }
.btn-call:hover { background: var(--call-deep); color: #fff; }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-deep); color: #fff; }
.btn-secondary { background: #fff; color: var(--mid); border-color: var(--mist); }
.btn-secondary:hover { border-color: var(--grey); color: var(--mid); }
.btn-dark { background: var(--mid); color: #fff; }
.btn-dark:hover { background: #142c5e; color: #fff; }
.btn-outline { background: #fff; color: var(--mid); border-color: var(--mist); min-height: 50px; min-width: 0; font-size: .95rem; }
.btn-outline:hover { border-color: var(--grey); color: var(--mid); }
@media (max-width: 520px) { .cta-row .btn { width: 100%; } }

.photo { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #dce4f2, #b9c7e0); display: grid; place-items: center; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(11, 27, 63, .38)); pointer-events: none; }
.photo-mark { width: 38%; color: rgba(11, 27, 63, .35); }
.photo-mark svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chip { position: absolute; left: 16px; bottom: 16px; right: 16px; z-index: 1; background: #fff; border-radius: 12px; padding: .6rem .9rem; font-size: .8rem; color: var(--body); box-shadow: var(--shadow); line-height: 1.35; }
.chip b { display: block; font-family: var(--font-head); font-size: .86rem; color: var(--mid); }

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--mist); padding-block: 1.1rem; }
.trust .wrap { display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: center; }
.trust span { font-size: .8rem; color: var(--grey); }
.trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.trust li { font-family: var(--font-head); font-weight: 700; color: var(--mid); font-size: .92rem; }

/* ---------- Emergency ---------- */
.emergency { background: var(--alert-bg); color: var(--alert-ink); border-bottom: 1px solid var(--alert-line); padding-block: .85rem; font-size: .93rem; }
.emergency p { margin: 0; }
.emergency a { color: inherit; font-weight: 700; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.8rem, 6vw, 4.5rem); }
.section-heading { max-width: 42em; margin-bottom: 2rem; }
.section-heading p { color: var(--grey); font-size: 1.05rem; }
.section-grid { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .section-grid { grid-template-columns: 1fr 2.2fr; gap: 3rem; } }
.section-body p { max-width: 42em; }

/* ---------- Location cards ---------- */
.locations { display: grid; gap: 1.3rem; }
@media (min-width: 820px) { .locations { grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; } }
.loc { background: var(--cloud); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem); scroll-margin-top: 90px; }
.loc .tag { margin-bottom: .9rem; }
.loc-nh .tag::before { background: var(--cobalt); }
.loc h3 { margin-bottom: .4rem; }
.loc-desc { color: var(--body); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.contact { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid transparent; border-radius: 12px; padding: .8rem 1rem; min-height: 62px; text-decoration: none; color: var(--ink); transition: border-color .12s ease; }
.contact:hover { border-color: var(--cobalt); color: var(--ink); }
.contact .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--cobalt-tint); color: var(--cobalt); display: grid; place-items: center; flex: none; }
.loc-nh .contact .ico { background: #e6e9f1; color: var(--mid); }
.contact > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.contact-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.contact-value { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.timing { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: #fff; border: 1px solid var(--mist); }
.timing strong { font-family: var(--font-head); color: var(--mid); }
.note { font-size: .9rem; color: var(--grey); margin: .9rem 0 0; padding-left: .9rem; border-left: 3px solid var(--mist); }
.plain-list { margin: 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: .25rem; }
.separate-note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 14px; border: 1px dashed var(--mist); max-width: 62em; }
.separate-note p { margin: 0; color: var(--grey); font-size: .95rem; }

/* ---------- About (dark) ---------- */
.about { background: var(--mid); color: #d6deee; }
.about h2, .about h3 { color: #fff; }
.about p { color: #d6deee; }
.facts { margin: 1.4rem 0 0; display: grid; gap: 1rem; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.3rem; }
.facts > div { display: grid; gap: .15rem; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 190px 1fr; gap: 1rem; } }
.facts dt { font-family: var(--font-head); font-weight: 700; font-size: .76rem; color: #8fa6d8; text-transform: uppercase; letter-spacing: .1em; padding-top: .2rem; }
.facts dd { margin: 0; color: #fff; }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--mist); padding: .25rem 0; }
details:first-of-type { border-top: 1px solid var(--mist); }
summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--mid); padding: .85rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cobalt); flex: none; font-weight: 500; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: .6rem; color: var(--body); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--mist); padding-block: 2.5rem; font-size: .9rem; color: var(--grey); }
.footer-grid { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr auto; } .footer-legal { grid-column: 1 / -1; } }
.footer-name { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--mid); margin-bottom: .15rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; align-content: start; }
.footer-links a { color: var(--mid); font-weight: 500; }
.footer-legal { margin: 0; max-width: 62em; }

/* ---------- Mobile quick bar ---------- */
.quick-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--mist); backdrop-filter: blur(8px); }
.quick-bar a { display: grid; place-items: center; min-height: 52px; border-radius: 12px; text-decoration: none; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: .92rem; }
.quick-hq { background: var(--cobalt); }
.quick-nh { background: var(--mid); }
@media (min-width: 820px) { .quick-bar { display: none; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .quick-bar, .cta-row, .btn-outline, .hbtn, .chat-fab { display: none !important; }
  body { padding: 0; } .about { background: #fff; color: #000; } .about h2, .about dd, .about p { color: #000; }
  a { color: inherit; text-decoration: none; }
}


/* ---------- Simplified "how to see him" layout ---------- */
.places { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .places { grid-template-columns: 1fr 1fr 1fr; gap: 1.4rem; align-items: start; } }
.place { background: var(--cloud); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); scroll-margin-top: 90px; border-top: 6px solid var(--nh); }
.place-nh { --accent: var(--nh); background: #f6f7fb; }
.place-hq { --accent: var(--hq); border-top-color: var(--hq); background: #eef4ff; }
.place-logo { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--mist); border-radius: 12px; padding: .55rem .9rem; margin-bottom: 1rem; min-height: 56px; }
.place-logo img { height: 46px; width: auto; display: block; }
.place-logo-hq svg { width: 34px; height: 34px; fill: none; stroke: var(--hq); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.place-logo-hq b { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--hq-deep); line-height: 1; }
.place-nh .act svg.i { color: var(--nh); } .place-nh .act:hover { border-color: var(--nh); }
.place-hq .act svg.i { color: var(--hq); } .place-hq .act:hover { border-color: var(--hq); }
.place-nh .act-call svg.i, .place-hq .act-call svg.i, .place-hq .act-wa svg.i { color: inherit; }
.place-hq .act-wa svg.i { color: var(--call-deep); }
.place-kicker { font-family: var(--font-head); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin: 0 0 .4rem; }
.place h3 { font-size: 1.7rem; margin-bottom: .4rem; }
.place-desc { color: var(--body); font-size: 1.02rem; }
.place h4 { font-size: .95rem; color: var(--mid); text-transform: none; letter-spacing: 0; margin: 1.6rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--mist); }

.actions { display: grid; gap: .7rem; }
.act { display: flex; align-items: center; gap: 1rem; min-height: 68px; padding: .9rem 1.1rem; border-radius: 14px; background: #fff; border: 1.5px solid var(--mist); text-decoration: none; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; line-height: 1.2; transition: border-color .12s ease; }
.act:hover { border-color: var(--cobalt); color: var(--ink); }
.act svg.i { width: 26px; height: 26px; color: var(--cobalt); }
.act > span { display: flex; flex-direction: column; min-width: 0; }
.act small { font-family: var(--font-body); font-weight: 500; font-size: .86rem; color: var(--grey); margin-top: .15rem; overflow-wrap: anywhere; }
.act-call { background: var(--call); border-color: var(--call); color: #fff; }
.act-call:hover { background: var(--call-deep); border-color: var(--call-deep); color: #fff; }
.act-call svg.i, .act-call small { color: #fff; }
.act-call small { opacity: .92; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.act-primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.act-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: #fff; }
.act-primary svg.i, .act-primary small { color: #fff; }
.act-primary small { opacity: .9; }
.act-wa { background: var(--call-tint); border-color: #bfe3cd; }
.act-wa svg.i { color: var(--call-deep); }
.act-map { margin-top: .7rem; }

.timing { background: #fff; border: 1.5px solid var(--mist); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0 0; font-size: 1.02rem; }
.timing b { font-family: var(--font-head); color: var(--mid); }

.callback { margin-top: 1.2rem; background: #fff; border: 1.5px solid var(--mist); border-radius: 16px; padding: 1.2rem 1.2rem 1rem; }
.callback h4 { margin: 0 0 .3rem; padding: 0; border: 0; font-size: 1.1rem; }
.callback > p { margin: 0 0 .9rem; color: var(--body); }
.cb-form { display: grid; gap: .35rem; }
.cb-form label { font-weight: 600; font-size: .95rem; margin-top: .5rem; }
.cb-form label span { font-weight: 400; color: var(--grey); }
.cb-form input { font: inherit; font-size: 1.15rem; padding: .85rem 1rem; border: 2px solid #c9d2e3; border-radius: 12px; background: #fff; color: var(--ink); width: 100%; min-height: 56px; }
.cb-form input:focus { border-color: var(--cobalt); outline: 3px solid var(--focus); outline-offset: 2px; }
.cb-form #cb-phone { font-size: 1.35rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cb-form .btn { margin-top: .9rem; width: 100%; justify-content: center; border: 0; cursor: pointer; font-size: 1.15rem; }
.cb-form .btn > span { text-align: center; }
.cb-fine { margin: .6rem 0 0; font-size: .82rem; color: var(--grey); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.big-address { font-size: 1.12rem; line-height: 1.5; background: #fff; border: 1.5px solid var(--mist); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 .8rem; }
.big-address strong { font-family: var(--font-head); color: var(--mid); }
.map-wrap { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--mist); background: var(--mist); aspect-ratio: 4 / 3; }
@media (min-width: 600px) { .map-wrap { aspect-ratio: 16 / 10; } }
.map { width: 100%; height: 100%; border: 0; display: block; }
.bring { margin: 0; padding-left: 1.3em; font-size: 1.02rem; }
.bring li { margin-bottom: .35rem; }

.emergency-inline { background: var(--alert-bg); color: var(--alert-ink); border: 1px solid var(--alert-line); border-radius: 12px; padding: .8rem 1rem; }
.emergency-inline a { color: inherit; font-weight: 700; }

/* thank-you page */
.thanks { max-width: 36em; text-align: center; padding-block: 2rem; }
.thanks h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.thanks p { font-size: 1.12rem; }
.tick { width: 84px; height: 84px; border-radius: 50%; background: var(--call); color: #fff; display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; margin: 0 auto 1.2rem; }
.thanks .btn { margin-top: 1rem; }

/* quick bar call button */
.quick-call { background: var(--call); display: flex; align-items: center; justify-content: center; gap: .45rem; }
.quick-call svg.i { width: 20px; height: 20px; }

.where-label { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--mid); margin: .2rem 0 .3rem; }
.where-list { margin: 0 0 1rem; padding-left: 1.2em; font-size: 1rem; }
.where-list li { margin-bottom: .55rem; line-height: 1.4; }
.where-list b { font-family: var(--font-head); color: var(--mid); }

/* =========================================================
   Booking: the video consult (/video/*) and the clinic visit (/book/*), rendered by the Worker
   (src/booking/html.js). Drawn in canvas 2 of ~/healthqure-video. One thing per screen, 64 px buttons.
   ========================================================= */
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.bk { padding-bottom: 0; min-height: 100vh; display: flex; flex-direction: column; }
body.bk .site-header { flex: none; }
.bk-main { flex: 1 1 auto; width: min(100% - 2.5rem, 680px); margin-inline: auto; padding: 28px 0 40px; display: flex; flex-direction: column; gap: 20px; }
.bk-main h1 { font-size: 32px; margin: 0; }
.bk-kicker { font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin: 0 0 8px; }
.bk-lead { margin: 10px 0 0; font-size: 19px; line-height: 1.55; color: var(--body); }
.bk-lead-plain { font-size: 18px; margin-top: 6px; }
.bk-sub { font-size: 18px; margin: 4px 0 0; color: var(--mid); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.mono.ink { color: var(--ink); }

/* the blue box that holds the step */
.bk-box { background: #eef4ff; border-radius: var(--radius); border-top: 6px solid var(--hq); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.bk-box-grey { background: var(--cloud); border-top-color: var(--grey); }
.bk-card { background: #fff; border: 1.5px solid var(--mist); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.bk-card-tight { gap: 2px; }
.bk-card .hd { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--mid); }
.bk-card .big { font-family: var(--font-head); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.15; color: var(--mid); font-variant-numeric: tabular-nums; }
.bk-card .meta { font-size: 16px; color: var(--grey); }
.bk-card .note { margin-top: 4px; }
.bk-card hr { border: 0; border-top: 1px solid var(--mist); margin: 8px 0; width: 100%; }
.bk-card hr.wide { margin: 10px 0 6px; }
.bk-timing { background: #fff; border: 1.5px solid var(--mist); border-radius: 12px; padding: 12px 16px; font-size: 18px; margin: 0; }
.bk-timing-17 { font-size: 17px; line-height: 1.5; padding: 14px 18px; }
.bk-timing b { font-family: var(--font-head); color: var(--mid); }
.bk-timing .body { color: var(--body); }
.bk-points { display: flex; flex-direction: column; gap: 12px; padding: 0 2px; }
.bk-point { display: flex; gap: 12px; align-items: flex-start; }
.bk-point svg.ic { margin-top: 1px; stroke-width: 2.2; }
.bk-point.yes svg.ic { color: var(--call); }
.bk-point.no svg.ic { color: var(--grey); }
/* the video page: four rows that say each thing once (days and hours · fee · the WhatsApp link · no examination) */
.bk-facts { display: flex; flex-direction: column; gap: 14px; padding: 0 2px; }
.bk-fact { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; color: var(--body); }
.bk-fact svg.ic { margin-top: 1px; stroke-width: 2.2; color: var(--mid); }
.bk-fact b { font-family: var(--font-head); font-weight: 700; color: var(--mid); }
.bk-fact.wa svg.ic { color: var(--call-deep); }
.bk-fact.no svg.ic { color: var(--grey); }
.bk-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.bk-ok { background: var(--call-tint); border: 1.5px solid #bfe3cd; border-radius: 12px; padding: 16px 18px; }
.bk-ok .head { font-family: var(--font-head); color: var(--mid); }
.bk-ok svg.wa { color: var(--call-deep); margin-top: 2px; }
.bk-alert { margin: 0; font-size: 17px; color: var(--alert-ink); background: var(--alert-bg); border: 1px solid var(--alert-line); border-radius: 12px; padding: 14px 16px; }
.bk-alert-test { color: #5c3d00; background: #fff6e0; border-color: #efd28c; } /* test mode (UAT): amber, not red */
.bk-alert a { color: inherit; font-weight: 700; }
.bk-alert-small { font-size: 16px; padding: 12px 16px; }
.bk-fine { margin: 0; font-size: 15px; color: var(--grey); }
.bk-fine a, .bk-after a, .bk-tel { color: var(--mid); font-weight: 600; white-space: nowrap; }
.bk-after { font-size: 16px; color: var(--body); margin: 0; }
.bk-pad { padding: 0 4px; }
.bk-receipt { font-size: 15px; color: var(--grey); padding: 0 4px; }

/* the one filled button of a screen */
.bk-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 22px; border-radius: 14px; border: 0; background: var(--cobalt); color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.2; cursor: pointer; margin-top: 4px; transition: background .12s ease, transform .12s ease; }
.bk-btn:hover { background: var(--cobalt-deep); color: #fff; }
.bk-btn:active { transform: translateY(1px); }
.bk-btn > span { display: flex; flex-direction: column; text-align: center; }
.bk-btn svg.ic + span { text-align: left; }
.bk-btn small { font-family: var(--font-body); font-weight: 500; font-size: 14px; opacity: .9; margin-top: 2px; }
/* the Call button: the primary's own shape, quiet (green tint, green text; an inset ring so it stays 64 px) — the one filled
   button on a screen is the step's own action (S, 30 Oct 2026). The number a step larger. */
.bk-btn-call { background: var(--call-tint); color: var(--call-deep); box-shadow: inset 0 0 0 2px #bfe3cd; }
.bk-btn-call:hover { background: #d9efe2; color: var(--call-deep); }
.bk-btn-call small { font-size: 15px; line-height: 1.15; margin-top: 0; opacity: .95; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bk-main .act { font-size: 19px; }
.bk-main .act small { font-size: 15px; }
.bk-quiet { width: 100%; cursor: pointer; font-size: 18px !important; }
.bk-quiet svg.i { color: var(--cobalt); }
.bk-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mid); font-weight: 600; font-size: 17px; text-decoration: none; align-self: flex-start; }
.bk-back:hover { color: var(--cobalt); }

/* picking a day and a time */
.bk-earliest { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 2px solid var(--cobalt); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.2; text-align: left; cursor: pointer; }
.bk-earliest:hover { background: var(--cobalt-tint); }
.bk-earliest svg.ic { color: var(--cobalt); }
.bk-earliest > span { display: flex; flex-direction: column; min-width: 0; }
.bk-earliest small { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--grey); }
.bk-earliest svg.chev { margin-left: auto; }
/* the days, one row each (S, 30 Oct 2026: day first, then time) */
.bk-dayrows { display: flex; flex-direction: column; gap: 10px; }
.bk-dayrow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 18px; border-radius: 14px; background: #fff; border: 2px solid #c9d2e3; color: var(--mid); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.2; }
a.bk-dayrow:hover { border-color: var(--cobalt); background: var(--cobalt-tint); color: var(--mid); }
.bk-dayrow .d { display: flex; flex-direction: column; min-width: 0; }
.bk-dayrow .d small { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--cobalt); }
.bk-dayrow .free { margin-left: auto; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--call-deep); white-space: nowrap; }
.bk-dayrow svg.chev { color: var(--cobalt); }
.bk-dayrow.off { background: var(--cloud); border-color: var(--mist); color: var(--grey); }
.bk-dayrow.off .free, .bk-dayrow.off .d small { color: var(--grey); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.bk-slot { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 8px; border-radius: 14px; background: #fff; border: 2px solid #c9d2e3; color: var(--mid); font-family: var(--font-head); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; }
.bk-slot:hover { border-color: var(--cobalt); background: var(--cobalt-tint); }
.bk-slot.full { flex-direction: column; background: var(--cloud); border-color: var(--mist); color: var(--grey); line-height: 1.15; cursor: default; }
.bk-slot.full span { font-family: var(--font-body); font-weight: 500; font-size: 13px; }

/* who is the patient */
.bk-chosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1.5px solid var(--mist); border-radius: 12px; padding: 12px 12px 12px 16px; }
.bk-chosen .hd { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--mid); font-variant-numeric: tabular-nums; }
.bk-chosen .meta { font-size: 15px; color: var(--grey); }
.bk-change { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 12px; background: #fff; border: 1.5px solid #c9d2e3; text-decoration: none; color: var(--mid); font-family: var(--font-head); font-weight: 700; font-size: 16px; flex: none; }
.bk-change:hover { border-color: var(--cobalt); color: var(--mid); }
.bk-form { gap: 18px; }
.bk-field label { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.bk-field label span { font-weight: 400; color: var(--grey); }
.bk-input { display: block; width: 100%; min-height: 56px; padding: 12px 16px; border: 2px solid #c9d2e3; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 20px; }
.bk-input:focus { border-color: var(--cobalt); outline: 3px solid var(--focus); outline-offset: 2px; }
.bk-age { width: 100%; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .bk-age { width: 180px; } }
.bk-phone { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 2px solid #c9d2e3; border-radius: 12px; background: #fff; }
.bk-phone:focus-within { border-color: var(--cobalt); outline: 3px solid var(--focus); outline-offset: 2px; }
.bk-phone span { font-size: 20px; color: var(--grey); }
.bk-phone input { flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bk-phone input:focus { outline: none; }
.bk-hint { font-size: 15px; color: var(--grey); margin: 6px 0 0; }
.bk-field.err .bk-input, .bk-field.err .bk-phone { border-color: #d92d20; }
.bk-field .msg { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--alert-ink); }

/* check and pay */
.bk-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.bk-total .l { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--mid); }
.bk-total .v { font-family: var(--font-head); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--mid); font-variant-numeric: tabular-nums; }
.bk-box form { margin: 0; display: contents; }
.bk-box form.bk-form { display: flex; flex-direction: column; }

/* booked */
.bk-done { display: flex; gap: 14px; align-items: center; }
.bk-done .meta { font-size: 16px; color: var(--grey); margin-top: 2px; }
.bk-tick { width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--call-tint); color: var(--call-deep); display: flex; align-items: center; justify-content: center; }
.bk-tick svg.ic { stroke-width: 2.8; }

/* the video link page and the staff's video switch (31 Oct 2026: a room per consult, Google Meet or Zoom, a switch) */
.bk-switch { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.bk-switch-on { display: flex; align-items: center; gap: 14px; background: var(--call-tint); border: 1.5px solid #bfe3cd; border-radius: 12px; padding: 14px 16px; color: var(--mid); }
.bk-switch-on svg.ic { color: var(--call-deep); }
.bk-switch-on b { font-family: var(--font-head); font-size: 20px; display: block; line-height: 1.2; }
.bk-switch-on small { font-size: 15px; color: var(--grey); }
.bk-status { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--body); padding: 0 2px; }
.bk-status svg.ic { margin-top: 2px; stroke-width: 2.2; }
.bk-status.ok svg.ic { color: var(--call-deep); }
.bk-status.no svg.ic { color: var(--grey); }
.bk-status b { font-family: var(--font-head); color: var(--mid); overflow-wrap: anywhere; }
.bk-admin-list { display: flex; flex-direction: column; gap: 14px; }
.bk-admin-row { display: flex; flex-direction: column; gap: 2px; }
.bk-admin-row .bk-back { font-size: 16px; font-weight: 500; min-height: 44px; padding: 0 4px; }
.bk-main form:has(> .bk-quiet) { margin: 0; }

/* footer of the booking pages */
.bk-foot .wrap { display: flex; flex-direction: column; gap: 4px; }
.bk-foot p { margin: 0; }
.bk-foot a { color: var(--mid); font-weight: 500; }
.bk-foot-addr { font-size: 14px; max-width: 62em; }

/* =========================================================
   Chat — a placeholder (S, 30 Oct 2026). The Chat button sits at the bottom right of every page and opens /chat
   (rendered by the Worker, src/booking/chat.js). How the assistant answers is to be decided; nothing is stored.
   ========================================================= */
.chat-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: #fff; color: var(--cobalt); box-shadow: inset 0 0 0 2px var(--cobalt), var(--shadow); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.chat-fab:hover { background: var(--cobalt-tint); color: var(--cobalt); }
.chat-fab svg.ic { width: 24px; height: 24px; }
.chat-fab-bar { bottom: calc(90px + env(safe-area-inset-bottom)); } /* the home page: above the phone's quick bar (77 px) */
@media (min-width: 820px) { .chat-fab-bar { bottom: calc(16px + env(safe-area-inset-bottom)); } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-thread { display: flex; flex-direction: column; gap: 12px; }
.ch-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 92%; }
.ch-me { align-self: flex-end; flex-direction: row-reverse; }
.ch-who { width: 36px; height: 36px; border-radius: 50%; background: var(--hq); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 13px; flex: none; }
.ch-bubble { padding: 12px 16px; border-radius: 18px; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.ch-bot .ch-bubble { background: var(--cloud); color: var(--ink); border-bottom-left-radius: 6px; }
.ch-me .ch-bubble { background: var(--cobalt); color: #fff; border-bottom-right-radius: 6px; }
.ch-quick { display: flex; flex-direction: column; gap: 10px; }
.ch-quick .act svg.i { color: var(--cobalt); }
.ch-quick .act[href^="https://wa.me"] svg.i { color: var(--call-deep); }
.ch-quick .act[href^="tel:"] svg.i { color: var(--call); }
.ch-compose { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--mist); margin: 0; }
.ch-input { min-height: 64px; flex: 1 1 auto; min-width: 0; }
.ch-send { width: auto; flex: none; padding: 12px 20px; margin-top: 0; }