/* Theme layer, loaded after app.css. Palette taken from the DiaPlus logo:
   sky-blue ring, steel-blue wordmark, red butterfly. Change the colours here only. */
:root {
  --ink: #14263a; --muted: #52667a; --line: #d3e1ee; --bg: #f3f8fd; --card: #ffffff;
  --brand: #1b6fb3; --brand-dark: #124a7a; --brand-soft: #e4f1fb; --sky: #4aa3df; --accent: #e5303a;
  --radius: 16px;
}
.staff-header { background: #123a5c; }
thead th { background: #eaf2f9; }
.step span, .tick { background: linear-gradient(135deg, var(--sky), var(--brand)); }

/* ---------- brand logo slot ---------- */
.brand-row { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 46px; width: auto; display: block; }
.site-header { position: sticky; top: 0; z-index: 4; box-shadow: 0 1px 12px rgba(18, 74, 122, 0.08); }
.site-nav { background: linear-gradient(90deg, #e4f1fb, #f1f7fd); }
.btn { border-radius: 999px; box-shadow: 0 4px 14px rgba(27, 111, 179, 0.22); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost, .btn-small, .btn-danger { box-shadow: none; }
.card { box-shadow: 0 2px 10px rgba(18, 74, 122, 0.05); }
.time { border-radius: 12px; }

/* ---------- infographic homepage ---------- */
.home-hero { position: relative; overflow: hidden; margin: -20px -16px 22px; padding: 30px 18px 26px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #4aa3df 0%, #1b6fb3 48%, #124a7a 100%); border-radius: 0 0 28px 28px; }
@media (min-width: 780px) { .home-hero { margin: 0 0 26px; border-radius: 28px; padding: 44px 40px 38px; } }
.home-hero h1 { font-size: 2rem; margin: 0 0 10px; max-width: 16ch; position: relative; }
@media (min-width: 780px) { .home-hero h1 { font-size: 2.6rem; } }
.home-hero .lead { color: #e2f0fb; max-width: 30ch; position: relative; }
.home-hero .actions { position: relative; }
.home-hero .btn { background: #fff; color: var(--brand-dark); border-color: #fff; }
.home-hero .btn:hover { background: #eaf4fc; }
.home-hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.home-hero .btn-ghost:hover { background: rgba(255,255,255,.14); }
.hero-ring { position: absolute; right: -70px; top: -50px; width: 290px; height: 290px; opacity: .45; animation: spin 40s linear infinite; }
.hero-dot { position: absolute; right: 64px; top: 84px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-out infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; }
.chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .88rem; text-decoration: none; }
.chip-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7dffa8; margin-right: 7px; animation: blink 1.6s ease-in-out infinite; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px; text-align: center; animation: rise .6s ease both; }
.fact:nth-child(2) { animation-delay: .08s; } .fact:nth-child(3) { animation-delay: .16s; } .fact:nth-child(4) { animation-delay: .24s; }
.fact-num { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--brand); }
.fact:nth-child(even) .fact-num { color: var(--accent); }
.fact-label { font-size: .86rem; color: var(--muted); }

.section-title { display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; flex: none; width: 10px; height: 26px; border-radius: 6px; background: linear-gradient(var(--sky), var(--brand)); }

.flow { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.flow li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px 14px 62px; counter-increment: step; animation: rise .6s ease both; }
.flow li:nth-child(2) { animation-delay: .1s; } .flow li:nth-child(3) { animation-delay: .2s; } .flow li:nth-child(4) { animation-delay: .3s; }
.flow li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--sky), var(--brand)); }
.flow strong { display: block; }
.flow span { font-size: .9rem; color: var(--muted); }
@media (min-width: 700px) {
  .flow { grid-template-columns: repeat(4, 1fr); }
  .flow li { padding: 58px 14px 16px; text-align: center; }
  .flow li::before { left: 50%; margin-left: -18px; }
}

.measures { display: grid; gap: 12px; }
@media (min-width: 640px) { .measures { grid-template-columns: 1fr 1fr; } }
.measure { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; }
.measure svg { width: 170px; max-width: 70%; height: auto; }
.gauge-track { fill: none; stroke: #dfeaf4; stroke-width: 14; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: fill 1.8s .3s ease-out forwards; }
.gauge-blue { stroke: var(--brand); --to: 95; } .gauge-red { stroke: var(--accent); --to: 60; }
.measure h3 { margin-top: 6px; } .measure .unit { color: var(--muted); font-size: .88rem; }

.guide-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .guide-cards { grid-template-columns: 1fr 1fr; } }
.guide-card { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-decoration: none; color: var(--ink); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.guide-card:hover { transform: translateY(-2px); border-color: var(--sky); box-shadow: 0 8px 22px rgba(18,74,122,.12); }
.guide-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.guide-card:nth-child(even) .guide-ico { background: #fde9ea; color: var(--accent); }
.guide-ico svg { width: 28px; height: 28px; }
.guide-card strong { display: block; line-height: 1.3; }
.guide-card .go { color: var(--brand); font-size: .88rem; font-weight: 650; }

.clinic-card { position: relative; overflow: hidden; padding-left: 24px; }
.clinic-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--sky), var(--brand)); }
.clinic-card:nth-child(even)::before { background: linear-gradient(#ff7a82, var(--accent)); }
.open-pill, .closed-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .84rem; font-weight: 650; }
.open-pill { background: var(--ok-bg); color: var(--ok-ink); }
.closed-pill { background: #eef2f6; color: var(--muted); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,48,58,.6); } 70% { box-shadow: 0 0 0 16px rgba(229,48,58,0); } 100% { box-shadow: 0 0 0 0 rgba(229,48,58,0); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fill { to { stroke-dashoffset: var(--to, 80); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gauge-fill { stroke-dashoffset: 80; }
}
.brand-mark { height: 52px; }
@media (max-width: 480px) { .brand-logo { height: 36px; } .brand-mark { height: 42px; } .site-header .brand-sub { display: none; } }

/* Header logo: the whole image always fits its box, never cropped or stretched. */
.brand-row { min-width: 0; }
.brand-logo { height: 58px; width: auto; max-width: 48vw; object-fit: contain; object-position: left center; flex: none; }
@media (max-width: 480px) {
  .brand-logo { height: 44px; max-width: 40vw; }
  .site-header .brand-main { font-size: .92rem; }
  .site-header > .wrap { gap: 8px; }
  .site-header .btn-small { padding: 6px 10px; font-size: .82rem; }
}

/* ---------- patient-education animation ---------- */
.anim { margin: 0 0 18px; }
.anim-figure { margin: 0 auto; max-width: 30rem; }
.anim-video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #d7e4ec; border-radius: 12px; }
.anim-video::cue { font-size: 0.95em; line-height: 1.35; }
.anim-still { display: none; }
.anim-figure figcaption { margin-top: 8px; font-weight: 600; }
.anim-transcript { max-width: 30rem; margin: 10px auto 0; }
.anim-transcript summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.anim-next { max-width: 30rem; margin: 6px auto 0; }
@media print {
  .anim-video, .anim-transcript summary, .anim .draft-banner { display: none !important; }
  .anim-still { display: block; width: 110mm; height: auto; margin: 0 auto; }
  .anim { break-inside: avoid; }
  .anim-figure figcaption { text-align: center; }
}

/* ---------- language selector ---------- */
.lang-bar { background: #fff; border-top: 1px solid var(--line); font-size: 0.95rem; }
.lang-bar .wrap { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 6px; padding-bottom: 6px; }
.lang-bar a, .lang-bar .lang-on { display: inline-block; padding: 6px 10px; border-radius: 999px; text-decoration: none; line-height: 1.5; }
.lang-bar .lang-on { background: var(--brand); color: #fff; font-weight: 650; }
.lang-bar a:hover { background: var(--brand-soft); }
@media print { .lang-bar, .site-nav, .skip { display: none !important; } }

/* Header at phone width in every script: the title may wrap but never runs under the booking button. */
.site-header .brand-row { flex: 1 1 auto; min-width: 0; }
.site-header .brand { min-width: 0; overflow-wrap: break-word; }
.site-header > .wrap > .btn-small { flex: 0 0 auto; max-width: 34vw; text-align: center; white-space: normal; line-height: 1.25; }
@media (max-width: 420px) {
  .site-header .brand-logo { height: 38px; max-width: 30vw; }
  .site-header .brand-main { font-size: .8rem; line-height: 1.25; }
}

/* ---------- two booking actions + WhatsApp desk on every page ---------- */
.btn-consult { background: #fff; color: var(--brand-dark); border: 2px solid var(--brand); box-shadow: none; }
.btn-consult:hover { background: var(--brand-soft); }
.header-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.header-actions .btn-small { max-width: 15rem; text-align: center; white-space: normal; line-height: 1.25; }
.action-bar { display: none; }
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  background: #0b6b3a; color: #fff; border-radius: 999px; padding: 10px 16px; text-decoration: none; font-weight: 650; font-size: .95rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.wa-float:hover, .wa-float:focus-visible { background: #095a31; color: #fff; }
.wa-float svg { width: 24px; height: 24px; flex: none; }
.two-actions { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 18px; }
@media (min-width: 720px) { .two-actions { grid-template-columns: 1fr 1fr; } .ta-desk { grid-column: 1 / -1; } }
.two-actions .btn { display: block; text-align: center; white-space: normal; }
.two-actions .ta-item p { margin: 6px 2px 0; }
.ta-desk { margin: 0; font-size: .92rem; }
.consult-options { display: grid; gap: 12px; }
.desk-links { display: flex; flex-wrap: wrap; gap: 8px; }
.doctor-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.doctor-portrait { width: 132px; height: auto; border-radius: 12px; flex: none; }
.doctor-head h1 { margin: 0 0 4px; }
.doctor-role { font-weight: 650; margin: 0 0 4px; }
.doctor-quals { margin: 0 0 8px; }
.doctor-logo { width: 170px; height: auto; display: block; }
.confirm-directions { margin-top: 10px; }
@media (max-width: 1000px) { .site-header .brand-sub { display: none; } .header-actions .btn-small { font-size: .8rem; padding: 5px 9px; } }
@media (max-width: 719px) {
  .header-actions { display: none; }
  /* The dock holds both booking actions at the bottom of the screen. The WhatsApp control is attached to the top edge
     of the dock, so it stays clear of the buttons at any text size, and clear of the phone's safe area. */
  .action-dock { position: sticky; bottom: 0; z-index: 4; }
  .action-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff; border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(18, 74, 122, 0.08); }
  .action-bar .btn { min-height: 44px; padding: 6px 8px; font-size: .86rem; line-height: 1.2; text-align: center; white-space: normal; display: flex; align-items: center; justify-content: center; box-shadow: none; }
  .action-dock .wa-float { position: absolute; right: 12px; bottom: calc(100% + 8px); padding: 12px; }
  .wa-float .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main { padding-bottom: 72px; }
  /* On an active form nothing floats or sticks: both controls are part of the page, so they cannot cover a field or the final button. */
  .action-dock.is-static { position: static; }
  .action-dock.is-static .action-bar { box-shadow: none; }
  .action-dock.is-static .wa-float { position: static; margin: 0 auto 12px; width: max-content; max-width: 92vw; display: flex; }
  .action-dock.is-static .wa-float .wa-label { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
  .form-page main { padding-bottom: 16px; }
}@media print { .action-dock, .action-bar, .wa-float, .header-actions, .two-actions { display: none !important; } }

/* A link to one clinic's card or to the desk lands below the sticky header, not under it. */
.consult-option, #desk, #what-to-bring, .doctor .card[id], .grid > .card[id] { scroll-margin-top: 12rem; }


/* staff: sign-in countdown, held uploads */
.session-bar { position: sticky; top: 0; z-index: 50; background: #fff3cd; color: #3d2f00; border-bottom: 2px solid #b58900; padding: .7rem 1rem; font-weight: 600; text-align: center; }
.session-bar .btn { margin-left: .5rem; }
.session-locked { background: #7a1f1f; color: #fff; border-color: #4d0f0f; }
.upload-limit { margin: 0 0 .8rem; }
.held { background: #eef7ee; border-left: 4px solid #2e7d32; padding: .5rem .7rem; margin: .2rem 0 .5rem; }
iframe.review-frame { width: 100%; min-height: 70vh; border: 1px solid #c9d3dc; background: #fff; }