/* Without this, Chrome on Android "font boosts" small text — the 9px nav
   labels rendered ~13px on a real phone, simultaneously too large and
   ellipsis-truncated. Never diagnosed locally: boosting only happens on
   real mobile Chrome. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--primary:#10b981;--primary-dark:#059669;--bg:#070c1b;--surface:#0f172a;--surface-2:#1e293b;--text:#f8fafc;--text-2:#94a3b8;--border:#334155;--accent:#34d399;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--success:#22c55e}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Noto Sans Arabic',sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.glass{background:rgba(15,23,42,0.7);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px}
.header{position:sticky;top:0;z-index:100;padding:16px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:rgba(7,12,27,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
/* Grid items default to min-width:auto, so the side columns refuse to shrink
   below their content and the header overflows on narrow desktops (~768-1050px,
   where the centre search is still shown). min-width:0 lets them compress so
   the ellipsis on the status ticker and language name actually engages. */
.header>*{min-width:0}
.logo{font-size:20px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;display:inline-block;cursor:pointer;transition:opacity .2s}
.logo:hover{opacity:.85}
/* A clear gap from the logo, not shoved across to the search box: pushing it
   to the far end of the column read as belonging to the search field instead
   of to the header. */
.live{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);
  font-variant-numeric:tabular-nums;margin-inline-start:18px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.status-ticker-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;letter-spacing:.01em;font-weight:600}
@media(max-width:1100px){.status-ticker-text{max-width:180px}}
.container{max-width:1200px;margin:0 auto;padding:24px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:rgba(7,12,27,0.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:var(--text-2);text-decoration:none;font-size:11px;transition:all 0.3s}
.nav-item.active{color:var(--primary)}
/* The icon only. ".nav-item span" also caught the label span and, at
   specificity (0,1,1), beat ".nav-label" (0,1,0) — so every label size rule
   below was dead code and labels rendered at icon size on every phone since
   the bar existed. Three rounds of label fixes changed nothing because none
   of them ever applied. */
.nav-item > .material-symbols-outlined{font-size:22px}
.nav-label{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.nav-scan>span:first-child{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#070c1b;display:flex;align-items:center;justify-content:center;margin-top:-24px;margin-bottom:2px;box-shadow:0 8px 20px rgba(16,185,129,0.45);border:3px solid var(--bg);font-size:24px;transition:transform .3s}
.nav-item.nav-scan:hover>span:first-child{transform:translateY(-3px)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--surface-2);border:1px solid var(--primary);color:var(--text);padding:12px 24px;border-radius:12px;font-size:13px;opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.scroll-reveal{opacity:0;transform:translateY(30px);transition:all 0.6s cubic-bezier(0.4,0,0.2,1)}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.3);border-radius:4px}
/* Shared header extensions */
.header-center{width:400px;max-width:400px;flex-shrink:0}
.header-search{width:100%;padding:10px 16px 10px 40px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:13px;outline:none;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}
[dir="rtl"] .header-search{padding:10px 40px 10px 16px}
.header-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(16,185,129,0.15)}
.header-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-2)}
[dir="rtl"] .header-search-icon{left:auto;right:12px}
.header-right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.theme-switch{position:relative;width:52px;height:28px;background:var(--surface-2);border:1px solid var(--border);border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 6px;overflow:hidden;flex-shrink:0}
.theme-switch .thumb{position:absolute;left:2px;top:2px;width:22px;height:22px;background:var(--text);border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.theme-switch.dark .thumb{transform:translateX(24px)}
.theme-switch span{position:relative;z-index:2;color:var(--text-2);transition:color .3s}
.theme-switch:not(.dark) span:first-of-type{color:#f8fafc}
.theme-switch.dark span:last-of-type{color:#0f172a}
.theme-switch .thumb{z-index:1}
[dir="rtl"] .theme-switch .thumb{left:auto;right:2px}
[dir="rtl"] .theme-switch.dark .thumb{transform:translateX(-24px)}
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:100px;cursor:pointer;color:var(--text);font-size:13px;transition:all .3s;max-width:140px}
.lang-btn:hover{background:var(--border)}
#current-lang-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);width:180px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:none;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
[dir="rtl"] .lang-menu{right:auto;left:0}
.lang-menu.show{display:block}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;transition:background .2s}
.lang-menu a:hover{background:var(--surface-2)}
.lang-menu a:last-child{border-bottom:none}
.demo-badge{display:none}
@media(min-width:768px){.demo-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.3);border-radius:100px;font-size:10px;font-weight:700;color:var(--warning);white-space:nowrap}.demo-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--warning);animation:pulse 2s infinite}.header-center{display:block}}
/* The search used to be deleted below 768px, on the platform where typing a
   medicine name is the primary way to find one — the header kept the theme
   switch, the language button and the account avatar, and dropped the only
   control that does the app's actual job.

   It now takes a second row of its own instead of competing for the first.
   Explicit grid areas rather than auto-placement: the first child has no class
   of its own, so auto-flow would drop the right-hand controls onto a third
   row. */
@media(max-width:767px){
  .header{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:10px}
  .header>*:first-child{grid-area:1/1/2/2}
  .header-right{grid-area:1/2/2/3}
  .header-center{display:block;grid-area:2/1/3/3;width:auto;max-width:none}
}
@media(min-width:768px) and (max-width:1050px){.header-center{width:260px;max-width:260px}.status-ticker-text{max-width:110px}}
.account-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:#070c1b;font-weight:800;font-size:12px;cursor:pointer;transition:all .3s;flex-shrink:0}
.account-btn:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(16,185,129,0.35)}
.account-wrap{position:relative}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:none;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
[dir="rtl"] .account-menu{right:auto;left:0}
.account-menu.show{display:block}
.account-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.account-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#070c1b;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.account-name{font-size:13px;font-weight:700;color:var(--text)}
.account-mail{font-size:11px;color:var(--text-2)}
.account-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;transition:background .2s}
.account-menu a:hover{background:var(--surface-2)}
.account-menu a:last-child{border-bottom:none}
.account-menu a .material-symbols-outlined{font-size:18px;color:var(--text-2)}
.account-menu a.acc-danger,.account-menu a.acc-danger .material-symbols-outlined{color:var(--danger)}
/* ============ Medical liability disclaimer banner ============
   Sits at the top of every health-decision page (scan, health, pharmacy).
   Text comes from SHARED_TR.medDisclaimer via data-t, so it follows the
   live language switch like the rest of the chrome. */
.med-disclaimer{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;margin-bottom:20px;
  background:linear-gradient(90deg,rgba(16,185,129,0.13),rgba(16,185,129,0.04));
  border:1px solid rgba(16,185,129,0.32);border-inline-start:4px solid var(--primary);border-radius:12px}
.med-disclaimer>.material-symbols-outlined{font-size:22px;color:var(--primary);flex-shrink:0;margin-top:1px}
.med-disclaimer-title{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);margin-bottom:4px}
.med-disclaimer-text{font-size:13px;font-weight:600;line-height:1.55;color:var(--text)}
/* ============ Guard pharmacy reality-check notice ============ */
.guard-notice{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;margin-bottom:20px;
  background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.32);
  border-inline-start:4px solid var(--warning);border-radius:12px}
.guard-notice>.material-symbols-outlined{font-size:22px;color:var(--warning);flex-shrink:0;margin-top:1px}
.guard-notice-body{min-width:0;flex:1}
.guard-notice-title{font-size:13px;font-weight:800;color:var(--warning);margin-bottom:5px}
.guard-notice-text{font-size:12.5px;line-height:1.6;color:var(--text-2)}
.light .med-disclaimer{background:linear-gradient(90deg,rgba(16,185,129,0.12),rgba(16,185,129,0.03))}
.light .guard-notice{background:rgba(245,158,11,0.09)}
@media(max-width:700px){
  .med-disclaimer{padding:12px 14px;gap:10px}
  .med-disclaimer-text{font-size:12.5px}
  .guard-notice{padding:14px}
}
/* Light mode */
/* Light theme.

   The first version set --bg to #f8fafc and --surface to #ffffff — three per
   cent apart — so a card and the page behind it were the same colour and every
   panel dissolved. Dark mode works because its three steps are genuinely
   separated (#070c1b → #0f172a → #1e293b); light mode needs the same
   separation, which means the PAGE has to carry a tint. White then reads as
   raised rather than as more of the same.

   The border was #e2e8f0 against white — about 1.2:1, effectively invisible.
   Card edges are what make a light interface legible, so it is a full step
   darker now. */
.light{
  --bg:#dfe5ee;          /* the page: a soft blue-grey, never white */
  --surface:#fbfcfe;     /* cards — a hair off pure white, so they read as
                            paper rather than as a lightbox */
  --surface-2:#eaeff6;   /* recessed: inputs, chips, quiet buttons */
  --text:#0f172a;
  --text-2:#55647a;      /* a little darker than before, for the tinted page */
  --border:#c8d3e0;      /* an edge you can actually see */
}
.light body{background:var(--bg);color:var(--text)}
/* Opaque, and lifted. A translucent card over a light page just samples the
   page; the shadow is what tells the eye the card is in front of it — the job
   the border alone was failing to do. */
.light .glass{background:var(--surface);border-color:var(--border);
  box-shadow:0 1px 2px rgba(15,23,42,0.05), 0 6px 18px rgba(15,23,42,0.07)}
.light .header{background:rgba(223,229,238,0.92);border-bottom-color:var(--border)}
.light .bottom-nav{background:rgba(223,229,238,0.94);border-top-color:var(--border)}

/* Desktop navigation is the drawer; the bottom bar is a thumb-reach pattern
   and looks like a stretched phone control on a wide screen. 901px matches the
   app's existing desktop breakpoint. The markup stays on every page — this is
   display only — so tests that assert the bar's presence keep passing and
   mobile keeps it untouched. */
@media(min-width:901px){.bottom-nav{display:none}}

/* ============ Mobile (≤700px) — header, bottom nav, shared ============ */
@media(max-width:700px){
  .header{padding:10px 12px}
  .live{display:none}
  .header-right{gap:8px}
  .theme-switch{width:44px;height:24px;padding:0 5px}
  .theme-switch .thumb{width:18px;height:18px}
  .theme-switch.dark .thumb{transform:translateX(20px)}
  [dir="rtl"] .theme-switch.dark .thumb{transform:translateX(-20px)}
  .lang-btn{padding:6px 10px;font-size:12px;max-width:110px}
  .bottom-nav{padding:6px 0 max(6px,env(safe-area-inset-bottom))}
  .nav-item{flex:1;min-width:0;gap:2px}
  .nav-item > .material-symbols-outlined{font-size:20px}
  .nav-label{font-size:10.5px;font-weight:600;white-space:nowrap;line-height:1.2}
  /* Every label shows. Hiding five of six left a row of unlabelled icons on
     the platform where the bottom nav IS the navigation — the size is set
     just above. */
  .nav-item.nav-scan>span:first-child{width:40px;height:40px;margin-top:-18px;font-size:20px}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);font-size:12px;padding:10px 16px}
  .account-menu{width:min(230px,calc(100vw - 24px))}
}

/* ---- "Coming soon" veil ----
   Used where a feature is shown but not usable: the store, and the store
   preview on the home page.

   Blocking is done with `inert` on the content, not with a covering overlay.
   An overlay that catches clicks also catches touch-drag and stops the page
   scrolling on a phone — the opposite of the intent, which is to let people
   look around. `inert` disables clicks AND keyboard access AND removes the
   subtree from assistive tech; pointer-events is the fallback for browsers
   that do not know it yet.

   Because `inert` hides its subtree from screen readers, the reason the page
   is dead has to be announced from outside it — see .sr-only below. The veil
   itself is purely visual and is deliberately not read out twice. */
[inert], .soon-inert { pointer-events: none; }

/* Sits over one card. The parent needs position:relative and overflow:hidden,
   which both .product-card and .ess-card already have. */
.soon-veil{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit;
  background:rgba(7,12,27,0.58);
  -webkit-backdrop-filter:saturate(.4) blur(1px);
  backdrop-filter:saturate(.4) blur(1px);
  pointer-events:none;
}
.soon-veil span{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,0.13);
  border:1px solid rgba(255,255,255,0.26);
}
.light .soon-veil{ background:rgba(248,250,252,0.62) }
.light .soon-veil span{
  color:var(--text); background:rgba(15,23,42,0.06); border-color:rgba(15,23,42,0.14);
}

/* Announced to screen readers, invisible on screen: the veil is decoration and
   the inert content below it is unreadable, so this carries the message. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* The Store label carries "(coming soon)" itself, so it is longer than the
   others. Let it keep its own line rather than forcing every nav item wider,
   and shrink a step so six items still fit across a small phone. */
.nav-item{position:relative}
.nav-label{text-align:center}
a[href="store.html"] .nav-label{font-size:9px;line-height:1.2;max-width:70px;white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:420px){a[href="store.html"] .nav-label{font-size:8.5px;max-width:60px}}

/* A medicine the register says is no longer sold. Two weights: "withdrawn"
   is a safety statement and reads as one; "not marketed" is a practical note
   about availability. */
.mkt-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.mkt-note .material-symbols-outlined{font-size:20px;flex-shrink:0;color:var(--text-2)}
.mkt-note.hard{background:rgba(239,68,68,0.10);border-color:rgba(239,68,68,0.32)}
.mkt-note.hard .material-symbols-outlined{color:var(--danger)}
.mkt-h{font-size:14px;font-weight:700;margin-bottom:3px}
.mkt-note.hard .mkt-h{color:var(--danger)}
.mkt-d{font-size:12.5px;color:var(--text-2);line-height:1.6}

/* Header lockup: the brand mark with the wordmark beside it.

   The mark is an image because it is a drawn shape; the word is live text
   because text stays crisp at any size, needs no second file, and the link's
   aria-label already names the brand — so the img is alt="" rather than
   repeating it to a screen reader.

   The word is a SOLID fill rather than a second gradient — the original logo
   pairs a gradient symbol with a flat wordmark, and two competing gradients in
   one lockup read as noise. The fill is --primary, the green used for every
   accent across the site, so the header agrees with the rest of the interface
   rather than introducing a colour that appears nowhere else. */
.logo-lockup{background:none;-webkit-text-fill-color:initial;display:inline-flex;
  align-items:center;gap:10px}
.logo-lockup img{height:40px;width:auto;display:block;flex-shrink:0}
.logo-word{font-size:21px;font-weight:900;letter-spacing:-0.025em;color:var(--primary);
  line-height:1;white-space:nowrap}
/* #10b981 on white is thin for text even at weight 900 — one step darker keeps
   the same hue and clears the contrast bar. */
.light .logo-word{color:#059669}

/* Below 600px the mark carries the brand on its own — the word is the first
   thing to give up its space to the search box and the nav. */
/* The wordmark stays. It was hidden to make room for a search box that was
   itself hidden — with the search on its own row the first row has space for
   the brand again, which is the one thing telling a user whose app this is. */
@media(max-width:600px){
  .logo-lockup img{height:34px}
  .logo-word{font-size:18px}
}
@media(max-width:420px){
  .logo-lockup img{height:30px}
  .logo-word{font-size:16px}
  .lang-btn{max-width:88px;padding:6px 8px}
}

/* Backup card */
.bk-lead{font-size:13px;color:var(--text-2);line-height:1.65;margin-bottom:16px}
.bk-actions{display:flex;gap:10px;flex-wrap:wrap}
.bk-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:13px;
  font-weight:700;font-family:inherit;cursor:pointer}
.bk-btn:hover{border-color:var(--primary);color:var(--primary)}
.bk-btn.primary{background:var(--primary);border-color:var(--primary);color:#070c1b}
.bk-btn.primary:hover{filter:brightness(1.07);color:#070c1b}
.bk-btn .material-symbols-outlined{font-size:18px}
.bk-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.bk-note{font-size:11.5px;color:var(--text-2);line-height:1.55;margin-top:12px}

/* "Add it yourself" — the way out of a dead end */
.own-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:34px;padding:0 12px;
  border-radius:9px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
.own-btn:hover{border-color:var(--primary);color:var(--primary)}
.own-btn .material-symbols-outlined{font-size:16px}
.own-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,7,18,0.72);backdrop-filter:blur(4px)}
.own-modal.open{display:flex}
.own-box{width:100%;max-width:520px;max-height:90vh;overflow:auto;border-radius:18px}
.own-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0}
.own-title{font-size:17px;font-weight:800}
.own-close{background:none;border:none;color:var(--text-2);cursor:pointer;padding:4px;line-height:0}
.own-body{padding:14px 20px 4px}
.own-lead{font-size:12.5px;color:var(--text-2);line-height:1.6;margin-bottom:16px}
.own-label{display:block;font-size:11.5px;font-weight:700;color:var(--text-2);margin:12px 0 6px}
.own-input{width:100%;min-height:42px;padding:0 12px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);font-size:14px;font-family:inherit}
.own-input:focus{outline:2px solid var(--primary);outline-offset:1px}
.own-row{display:flex;gap:12px;flex-wrap:wrap}
.own-note{font-size:11.5px;color:var(--text-2);line-height:1.55;margin-top:14px}
.own-err{font-size:12.5px;color:var(--danger);min-height:1em;margin-top:8px}
.own-actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px 18px}
.own-cta{min-height:42px;padding:0 16px;border-radius:10px;border:1px solid var(--primary);
  background:var(--primary);color:#070c1b;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer}
.own-cta.ghost{background:none;border-color:var(--border);color:var(--text)}