/* v16 skin: one look, two layouts. Phone (< 960px) = app style with a floating bottom bar. Desktop (>= 960px) = wide, pill nav, search field, dark footer.
   Loaded after style.css on every page. Colours come from the tokens in style.css. */

/* ---------- base ---------- */
body { font-size: 16px; font-weight: 450; letter-spacing: 0; }
body.lang-bn { line-height: 1.85; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; }
b, strong { font-weight: 700; }
::selection { background: var(--gold); color: var(--gold-ink); }
@media (min-width: 960px) { body { font-size: 17px; } }

/* ---------- buttons ---------- */
.btn { font-weight: 700; letter-spacing: 0; }
.btn-primary { background: var(--brand-600); box-shadow: 0 10px 22px -10px rgba(15,122,87,.7); }
.btn-primary:hover { background: var(--brand-700); }
.btn-gold { background: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 22px -12px rgba(244,183,42,.9); }
.btn-gold:hover { background: #FFC83D; color: var(--gold-ink); }
:root[data-theme="dark"] .btn-primary { background: var(--brand); color: #05281B; box-shadow: none; }
:root[data-theme="dark"] .btn-primary:hover { background: #7BE3BC; color: #05281B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: var(--brand); color: #05281B; box-shadow: none; }
  :root:not([data-theme="light"]) .btn-primary:hover { background: #7BE3BC; color: #05281B; }
}
.icon-btn { border-radius: 14px; }

/* ---------- header ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.header-inner { height: 60px; gap: 10px; }
.brand-mark { background: var(--ink); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(244,183,42,.35); border-radius: 12px; }
.brand-text { font-weight: 800; }
.brand-text b { background: none; -webkit-text-fill-color: var(--brand-600); color: var(--brand-600); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.lang-switch a { padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--text-2); }
.lang-switch a.is-active { background: var(--ink); color: #fff; }
.search-pill { display: none; }
.header-cta { background: var(--gold); color: var(--gold-ink); box-shadow: none; font-weight: 800; }
.header-cta:hover { background: #FFC83D; color: var(--gold-ink); }

/* the home page header melts into the dark hero */
.home .site-header { background: var(--ink); border-bottom-color: transparent; box-shadow: none; }
.home .brand, .home .brand:hover, .home .brand-text { color: #fff; }
.home .brand-text b { -webkit-text-fill-color: var(--gold); color: var(--gold); }
.home .icon-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E4F2EA; }
.home .icon-btn:hover { color: #fff; border-color: var(--gold); }
.home .lang-switch { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.home .lang-switch a { color: #CFE3D8; } .home .lang-switch a.is-active { background: var(--gold); color: var(--gold-ink); }

/* ---------- phone: floating bottom bar ---------- */
@media (max-width: 959px) {
  :root { --bottom-h: 92px; }
  body { padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
  .bottom-nav {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 66px; padding: 6px; gap: 2px;
    border: 1px solid var(--line); border-radius: 26px; background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 0 18px 38px -12px rgba(12,46,37,.42), 0 2px 6px rgba(12,46,37,.08);
  }
  .bottom-nav a, .bottom-nav button { border-radius: 20px; font-size: .7rem; font-weight: 650; gap: 1px; transition: background .2s, color .2s; }
  .bottom-nav .is-active { background: var(--brand-50); color: var(--brand-700); }
  .bottom-nav a:active, .bottom-nav button:active { background: var(--surface-2); }
  .az-fab { bottom: calc(var(--bottom-h) + 10px + env(safe-area-inset-bottom)); }
}

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  .header-inner { height: 74px; gap: 18px; }
  .desk-nav { margin: 0 auto; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .desk-menu { gap: 2px; align-items: center; }
  .desk-menu a, .mega summary { padding: 8px 15px; border-radius: 999px; font-weight: 650; font-size: .93rem; color: var(--text-2); }
  .desk-menu a:hover, .mega summary:hover, .mega[open] summary { background: var(--brand-50); color: var(--brand-700); }
  .desk-menu a[aria-current="page"], .desk-menu .current-menu-item > a { background: var(--ink); color: #fff; }
  .mega-panel { border-radius: 24px; padding: 14px; top: calc(100% + 16px); }
  .search-pill { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 10px; min-width: 150px; height: 42px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .9rem; cursor: pointer; }
  .search-pill:hover { border-color: var(--brand); color: var(--text); }
  .search-pill kbd { margin-left: auto; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font: inherit; font-size: .78rem; font-weight: 700; color: var(--text-2); }
  .header-actions .icon-btn.js-open-search { display: none; }
  .home .desk-nav { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
  .home .desk-menu a, .home .mega summary { color: #D3E6DB; }
  .home .desk-menu a:hover, .home .mega[open] summary, .home .mega summary:hover { background: rgba(255,255,255,.12); color: #fff; }
  .home .desk-menu a[aria-current="page"] { background: var(--gold); color: var(--gold-ink); }
  .home .search-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #BFD8CB; }
  .home .search-pill:hover { color: #fff; border-color: var(--gold); }
  .home .search-pill kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #E4F2EA; }
}
@media (min-width: 960px) and (max-width: 1179px) { .search-pill { min-width: 0; } .search-pill span { display: none; } .header-cta { display: none; } }
.az-intro { font-size: .84rem; padding: 7px 36px 7px 12px; gap: 2px 10px; line-height: 1.5; }

/* ---------- search dialog ---------- */
.search-dialog { border-radius: 26px; }

/* ---------- inner page heads and cards pick up the new look ---------- */
.page-head { background: radial-gradient(700px 240px at 15% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent), radial-gradient(600px 220px at 95% 10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent); }
.az-tool .page-head { background: var(--ink); }
.info-card, .food-card, .post-card, .video-card, .hs-card { border-radius: 22px; }
.az-intro { background: var(--ink); color: #D3E6DB; border-bottom: 0; }
.az-intro a { color: var(--gold); } .az-intro b { color: #fff; } .az-intro button { color: #9FB9AB; }

/* ---------- footer: deep green, calm, readable ---------- */
.site-footer { background: var(--ink); color: #BFD3C8; border-top: 0; margin-top: 40px; padding: 48px 0 24px; border-radius: 32px 32px 0 0; }
.site-footer a { color: #E4F2EA; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand, .site-footer .brand-text { color: #fff; }
.site-footer .brand-text b { -webkit-text-fill-color: var(--gold); color: var(--gold); }
.footer-brand p { color: #A9C2B4; }
.footer-col h3 { color: var(--gold); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; }
.footer-col a { color: #E4F2EA; font-weight: 500; }
.footer-news p { color: #A9C2B4; }
.footer-bottom { border-top-color: rgba(255,255,255,.12); color: #8FAA9C; }
.footer-bottom a { color: #A9C2B4; }
@media (max-width: 959px) { .site-footer { padding-bottom: calc(24px + 8px); } }

/* ---------- touch devices: comfortable targets everywhere ---------- */
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  select, input[type="text"], input[type="number"], input[type="email"], input[type="search"] { min-height: 48px; }
}

/* ---------- motion respect ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .site-footer { background: none; color: #000; } }

/* install-to-home-screen (only shown when the browser offers it) */
.az-install { margin: 0 0 12px; } .az-install[hidden] { display: none; } .az-install .btn { min-height: 52px; } .az-install-hint { margin: 8px 4px 0; }

/* swipe strips start inside the gutter, not on the screen edge */
.scroller { scroll-padding-inline: 16px; }
@media (min-width: 640px) { .scroller { scroll-padding-inline: 24px; } }

/* footer tool list: two real columns on desktop */
@media (min-width: 960px) { .footer-grid .footer-col:nth-child(2) ul { display: block; columns: 2; column-gap: 24px; } .footer-grid .footer-col:nth-child(2) li { margin-bottom: 10px; break-inside: avoid; } }

/* hospital filter: one row on desktop */
@media (min-width: 960px) { .hs-filter { grid-template-columns: 2fr 1fr 1fr 1fr auto auto; } }

/* =====================================================================
   PHONE POLISH (most visitors): depth, a raised centre button, a bar that steps aside
   ===================================================================== */
:root { --dock-h: var(--bottom-h); --card-shadow: 0 1px 2px rgba(12,46,37,.05), 0 12px 26px -18px rgba(12,46,37,.34); }
html.nav-hide { --dock-h: 18px; }
.hdr-back { display: none; }
.hv-install-wrap { padding-top: 0; padding-bottom: 0; }
.hv-install { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 16px 0; padding: 16px; border-radius: 26px; background: var(--ink); color: #fff; }
.hv-install[hidden] { display: none; }
.hv-install-ico { font-size: 2rem; line-height: 1; }
.hv-install-t b { display: block; font-weight: 750; line-height: 1.3; }
.hv-install-t small { display: block; margin-top: 2px; color: var(--on-ink-2, #A8CDBB); line-height: 1.4; font-size: .82rem; }
.hv-install .az-install-hint { grid-column: 1 / -1; margin: 0; color: var(--on-ink-2, #A8CDBB); }
.hv-chips button small { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(244,183,42,.2); color: var(--gold); font-weight: 750; font-size: .74rem; }

@media (max-width: 959px) {
  .hdr-back { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; margin: 0 0 0 -8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; }
  .hdr-back:active { background: var(--surface-2); }
  .hdr-back + .brand { margin-left: -2px; }

  /* bottom bar steps aside while you scroll down */
  .bottom-nav { overflow: visible; transition: transform .28s var(--ease); }
  .nav-hide .bottom-nav { transform: translateY(calc(100% + 30px)); }
  .az-fab, .azb-fab { transition: bottom .28s var(--ease); }
  /* centre button: all tools, raised like an app's main action */
  .bottom-nav a:nth-child(3) { position: relative; color: var(--brand-700); font-weight: 750; }
  .bottom-nav a:nth-child(3) svg { box-sizing: border-box; width: 54px; height: 54px; padding: 15px; margin-top: -34px; border-radius: 50%; background: var(--ink); color: var(--gold); box-shadow: 0 12px 22px -8px rgba(12,46,37,.6), 0 0 0 6px var(--surface); stroke-width: 2.2; }
  .bottom-nav a:nth-child(3):active svg { transform: scale(.94); }
  .bottom-nav a:nth-child(3) span { margin-top: 1px; }

  /* cards: a little lift, and every tile has its own colour */
  .hv-t, .hv-row, .info-card, .food-card, .post-card, .video-card, .hs-card, .lib-card, .tool-form, .hv-app-ico { box-shadow: var(--card-shadow); }
  .hv-app-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent), 0 8px 16px -12px color-mix(in srgb, var(--c) 70%, transparent); }
  .hv-row:not([data-k="smart-pick"]) { background: radial-gradient(120% 95% at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), var(--surface); }
  .hv-row[data-k="smart-pick"] { background: var(--ink) radial-gradient(circle at 92% 20%, rgba(244,183,42,.25), transparent 46%); box-shadow: 0 18px 30px -18px rgba(12,46,37,.7); }
  .hv-sec { padding: 14px 0; }
  .hv-head { margin-bottom: 14px; }
  .hv-head h2 { font-size: 1.32rem; }
  .hv-hosp, .hv-abroad { box-shadow: var(--card-shadow); }
  .site-main { min-height: 50vh; }
}
@media (min-width: 960px) { .hv-install-wrap { display: none; } }

/* phone: the question helper is a small round button, not a wide pill covering content */
@media (max-width: 959px) {
  .azb-fab { width: 50px; height: 50px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; background: var(--ink); border-color: transparent; box-shadow: 0 12px 22px -8px rgba(12,46,37,.6); left: 14px; }
  .azb-fab .azb-lab { display: none; }
  .azb-emo { font-size: 1.35rem; }
  .az-fab { right: 14px; }
}
.hv-row-t small, .hv-t small, .hv-app-t small, .hv-prem small { text-wrap: pretty; }
@media (max-width: 959px) { .az-intro { justify-content: flex-start; text-align: left; padding: 9px 42px 9px 14px; } .az-intro a { display: none; } }

/* ---------- phone menu sheet: same coloured icons as the home page ---------- */
.sheet { border-radius: 30px 30px 0 0; padding-left: 16px; padding-right: 16px; }
.sheet-head strong { font-size: 1.2rem; font-weight: 800; }
.sheet-em { margin: 0 0 6px; border-radius: 16px; }
.sheet-h { margin: 18px 2px 10px; font-size: .92rem; font-weight: 750; color: var(--text-2); }
.sheet-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; }
.sheet-apps a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text); font-size: .76rem; font-weight: 650; line-height: 1.3; }
.sheet-apps i { width: 56px; height: 56px; display: grid; place-items: center; font-style: normal; font-size: 1.7rem; border-radius: 19px; background: color-mix(in srgb, var(--c) 15%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
.sheet-apps a:active i { transform: scale(.92); }
.sheet-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sheet-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--surface-2); color: var(--text); font-weight: 650; font-size: .9rem; }
@media (max-width: 380px) { .brand-text small { display: none; } .header-actions { gap: 6px; } .hdr-back { width: 38px; margin-left: -10px; } .header-inner { gap: 6px; } }

/* touch: every link and button is easy to hit (44px) */
@media (pointer: coarse) {
  .hv-head a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col ul { gap: 0; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
  .az-intro button { width: 44px; height: 44px; right: 0; }
  .az-prof-x { min-height: 44px; padding: 0 12px; }
  .fx-add { min-height: 44px; padding: 0 16px; }
  .brand { min-height: 44px; }
  .post-card .chip, .chip { min-height: 36px; display: inline-flex; align-items: center; }
}