/* =====================================================================
   SELF-HOSTED FONTS  (no requests to Google — see FONTS-self-hosting.md)
   ---------------------------------------------------------------------
   The five files must be named EXACTLY as below, in public_html/fonts/.
   Filenames are canonical on purpose: whatever your download called them
   (gwfh embeds a version number like -v35- that changes over time), rename
   to these and this CSS never needs touching again.

       fonts/lora-600.woff2      Lora SemiBold   — headings
       fonts/lora-700.woff2      Lora Bold       — h1, brand
       fonts/golos-400.woff2     Golos Regular   — body text
       fonts/golos-500.woff2     Golos Medium    — nav, labels
       fonts/golos-600.woff2     Golos SemiBold  — buttons, emphasis

   No unicode-range is declared: these files carry Cyrillic + Latin together,
   so the font must apply to the whole page, not a slice of the codepoints.

   font-display:swap is not optional. Without it the browser hides ALL text
   until the font arrives — on a slow connection that's a blank page.
   With it, text paints instantly in the fallback and swaps when ready.

   If a file is missing the site does not break: it falls back to Georgia /
   system-ui. It just looks wrong. Check DevTools → Network → Font.
   ===================================================================== */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/lora-600.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/lora-700.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/golos-400.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/golos-500.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/golos-600.woff2') format('woff2')}

/* ===== Прашај Доктор — shared styles ===== */
:root{
  --teal:#0E7C8B; --teal-deep:#0A5A66; --coral:#EF5350; --coral-deep:#D83A34; --coral-soft:#FDEAE5;
  --ink:#14303A; --bg:#F3F9FA; --muted:#5B7178; --sky:#5BB9CB;
  --mint:#E7F3F5; --line:#D7E6E9; --card:#FFFFFF;
  --shadow:0 10px 30px rgba(10,90,102,.12); --shadow-lg:0 24px 60px rgba(10,90,102,.20);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Golos Text",system-ui,-apple-system,sans-serif; color:var(--ink);
  background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Lora",Georgia,serif; line-height:1.2; margin:0 0 .4em}
a{color:var(--teal-deep)}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px}
.eyebrow{display:inline-block; font-size:0.78125rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); margin:0 0 10px}

/* ---- Header / nav ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
/* Was flex, so the nav hugged the brand and the whole header read left-heavy.
   Grid with 1fr | auto | 1fr centres the nav against the PAGE, not against
   whatever the brand happens to weigh. */
.site-header .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-family:"Lora",serif; font-size:1.1875rem}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--sky));display:grid;place-items:center;flex:0 0 auto;box-shadow:0 4px 12px rgba(14,124,139,.35)}
.brand .mark svg{width:20px;height:20px}
.nav{display:flex; gap:4px; margin:0; justify-content:center}
.nav a{text-decoration:none; color:var(--muted); font-weight:500; font-size:0.9375rem; padding:8px 14px; border-radius:100px; transition:.15s}
.nav a:hover{color:var(--teal-deep); background:var(--mint)}
.nav a.active{color:var(--teal-deep); background:var(--mint)}
.header-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end}
.btn{font-family:inherit; cursor:pointer; border-radius:100px; font-weight:600; font-size:0.90625rem; padding:9px 18px; border:1px solid var(--line); background:#fff; color:var(--teal-deep); transition:.15s; display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.btn:hover{background:var(--mint); transform:translateY(-1px)}
.btn-primary{background:var(--teal); border-color:var(--teal); color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-coral{background:var(--coral); border-color:var(--coral); color:#fff}
.btn-coral:hover{background:var(--coral-deep)}
.menu-toggle{display:none}
@media(max-width:820px){ .nav{display:none} .menu-toggle{display:inline-flex}
  .site-header .wrap{display:flex; gap:10px} .header-actions{margin-left:auto} }

/* ---- Hero ---- */
.hero{padding:38px 0 30px}
.hero .grid{display:grid; grid-template-columns:1.05fr 1fr; gap:34px; align-items:center}
.hero h1{font-size:clamp(1.875rem,5vw,2.875rem); font-weight:700; color:var(--ink)}
.hero .lead{font-size:1.0625rem; color:var(--muted); max-width:52ch; margin:0 0 22px}
@media(max-width:900px){ .hero .grid{grid-template-columns:1fr; gap:20px} .hero{padding:24px 0} }

/* ---- Search ---- */
.search-wrap{position:relative; max-width:520px}
.searchbar{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:6px 6px 6px 16px; box-shadow:var(--shadow)}
.searchbar svg{color:var(--muted); flex:0 0 auto}
.searchbar input{flex:1; border:0; outline:0; font:inherit; background:transparent; color:var(--ink); min-width:0}
.searchbar button{border:0; background:var(--teal); color:#fff; font:inherit; font-weight:600; padding:9px 18px; border-radius:100px; cursor:pointer}
.searchbar button:hover{background:var(--teal-deep)}
.results{position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; display:none; z-index:20}
.results.open{display:block}
.res-item{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:#fff; padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--line); font:inherit}
.res-item:last-child{border-bottom:0}
.res-item:hover{background:var(--mint)}
.res-t{font-weight:600; color:var(--ink)} .res-s{font-size:0.78125rem; color:var(--muted)}
.res-empty{padding:14px 16px; color:var(--muted); font-size:0.875rem}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tags button{border:1px solid var(--line); background:#fff; color:var(--teal-deep); font:inherit; font-size:0.84375rem;
  padding:7px 14px; border-radius:100px; cursor:pointer; transition:.15s}
.tags button:hover{background:var(--mint); border-color:var(--sky)}

/* ---- Sections ---- */
.section{padding:44px 0}
.section-head{max-width:60ch; margin:0 0 26px}
.section-head h2{font-size:clamp(1.5rem,3.6vw,2rem); color:var(--ink)}
.section-head p{color:var(--muted); margin:.2em 0 0}
.band{background:linear-gradient(180deg,var(--mint),#fff); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---- Cards (systems) ---- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .cards{grid-template-columns:1fr} }
.card{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; cursor:pointer; font:inherit; transition:.16s; display:flex; flex-direction:column; gap:8px}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--sky)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center}
.card h3{font-size:1.0625rem; margin:4px 0 0; color:var(--ink)}
.card p{font-size:0.84375rem; color:var(--muted); margin:0; flex:1}
.card .go{display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:600; font-size:0.8125rem}

/* ---- Modal (system + article reader) ---- */
.overlay{position:fixed; inset:0; background:rgba(20,48,58,.5); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.2s; z-index:100}
.overlay.open{opacity:1; pointer-events:auto}
.modal{position:fixed; z-index:101; top:50%; left:50%; transform:translate(-50%,-46%); width:min(720px,94vw); max-height:88vh;
  background:#fff; border-radius:22px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.22s; display:flex; flex-direction:column; overflow:hidden}
.modal.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%)}
.modal-head{display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line)}
.modal-head .m-ic{width:46px;height:46px;border-radius:13px;background:var(--mint);color:var(--teal);display:grid;place-items:center;flex:0 0 auto}
.m-kick{font-size:0.78125rem; color:var(--muted); font-weight:600}
.m-kick .crumb{border:0;background:transparent;color:var(--teal);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.modal-head h2{margin:2px 0 0; font-size:1.3125rem; color:var(--ink)}
.m-close{margin-left:auto; border:1px solid var(--line); background:#fff; width:38px;height:38px;border-radius:10px;cursor:pointer;color:var(--muted);font-size:1.25rem;line-height:1;flex:0 0 auto}
.m-close:hover{background:var(--mint)}
.modal-body{padding:22px; overflow-y:auto}
.modal-body p{color:#2b4a52} .modal-body h3{font-size:1.03125rem; color:var(--teal-deep); margin:18px 0 6px}
.modal-body ul{margin:6px 0 0; padding-left:20px} .modal-body li{margin:3px 0; color:#2b4a52}
.sys-diagram{background:var(--mint); border:1px solid var(--line); border-radius:14px; padding:10px; max-width:300px; margin:0 auto 6px}
.sys-diagram svg{width:100%;height:auto}
.sys-intro{margin-top:10px}
.cond-list{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.cond-item{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; color:var(--ink); font-weight:500; transition:.14s}
.cond-item:hover{background:var(--mint); border-color:var(--sky)}
.cond-item svg{color:var(--teal); flex:0 0 auto}
/* ---- Red flags: the most important box on the page, so it should look like it ---- */
/* URGENT care card — a distinct alert tier (NHS "care card: urgent" pattern).
   Solid coral header band + clear border so a scanning, frightened reader can't
   scroll past "when is this an emergency". Deliberately louder than any other
   block on the page; nothing else uses a filled coral header. */
/* URGENT care card — a distinct alert tier (NHS "care card: urgent" pattern).
   Solid coral header band so a scanning, frightened reader can't scroll past
   "when is this an emergency". Header breaks out to the card edges via negative
   margins; the card keeps its 18px body padding for everything else. */
.redflag{background:#FFF6F5; border:1.5px solid var(--coral-deep);
  border-radius:14px; padding:0 18px 15px; margin-top:22px; overflow:hidden; scroll-margin-top:80px}
.redflag h2, .redflag h3{display:flex; align-items:center; gap:9px; color:#fff;
  background:var(--coral-deep); margin:0 -18px 12px; padding:11px 18px;
  font-size:1.0625rem; letter-spacing:-.01em; font-weight:700}
.redflag h2 svg, .redflag h3 svg{stroke:#fff}
.redflag ul{margin:0; padding:0; list-style:none}
.redflag li{position:relative; padding:7px 0 7px 22px; font-size:0.9375rem; line-height:1.6; color:#4A2624}
.redflag li + li{border-top:1px solid #F6DBD8}
.redflag li::before{content:""; position:absolute; left:2px; top:15px; width:7px; height:7px;
  border-radius:2px; background:var(--coral-deep); transform:rotate(45deg)}
.redflag .call{margin:12px 0 0; padding-top:12px; border-top:1px solid #F3C9C5;
  font-weight:600; color:#4A2624; font-size:0.9375rem}
html[data-contrast="high"] .redflag li{color:#000}
html[data-contrast="high"] .redflag li::before{background:#000}
.related{display:flex; flex-wrap:wrap; gap:8px} .related button{border:1px solid var(--line); background:#fff; color:var(--teal-deep); font:inherit; font-size:0.8125rem; padding:7px 12px; border-radius:100px; cursor:pointer}
.related button:hover{background:var(--mint)}
.src-note{font-size:0.8125rem; color:var(--muted)}
.disc-box{background:var(--mint); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-top:18px; font-size:0.8125rem; color:#33555d}
.disc-box b{color:var(--coral-deep)}

/* Contents list (NHS mini-hub pattern). A short "jump to" at the top of long
   condition pages so a reader — especially on a phone — reaches Лекување or the
   urgent card without scrolling past everything else. */
.art-page h2{scroll-margin-top:78px}   /* so an anchored heading clears the sticky header */
.toc{background:var(--mint); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px 12px; margin:18px 0 22px}
.toc-h{margin:0 0 8px; font-size:0.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-deep)}
.toc ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px}
.toc li{margin:0}
.toc a{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:0.875rem; color:var(--teal-deep); font-weight:500;
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:6px 13px;
  transition:.14s}
.toc a:hover,.toc a:focus-visible{border-color:var(--teal); background:#fff;
  box-shadow:0 2px 8px rgba(14,124,139,.12); outline:none}
/* the urgent jump chip stands apart: coral, always first */
.toc-urgent a{color:var(--coral-deep); border-color:#f3c9c5; background:var(--coral-soft); font-weight:700}
.toc-urgent a:hover,.toc-urgent a:focus-visible{border-color:var(--coral); box-shadow:0 2px 8px rgba(216,58,52,.16)}
.toc-urgent svg{width:14px; height:14px; flex:none}
@media(max-width:520px){
  .toc ul{flex-direction:column; gap:0}
  .toc li{border-top:1px solid var(--line)}
  .toc li:first-child{border-top:0}
  .toc a{width:100%; border:0; border-radius:0; background:none; padding:11px 2px; box-shadow:none}
  .toc-urgent a{background:none; border:0}
  .toc a::after{content:"›"; margin-left:auto; color:var(--muted); font-size:1.1rem}
}
html[data-contrast="high"] .toc a{color:#000; border-color:#000}
html[data-contrast="high"] .toc-urgent a{color:#000}
/* the contents list is navigation, not content — hide it from print */
@media print{ .toc{display:none} }
body.printing .toc{display:none}

/* ---- Footer + global disclaimer ---- */
.disclaimer{background:#FFF4F3; border-top:1px solid #F6D2CF}
.disclaimer .wrap{padding:16px 22px; font-size:0.8125rem; color:#7A2C29}
.disclaimer b{color:var(--coral-deep)}
.disclaimer .emerg{font-weight:600; color:var(--ink)}
.site-footer{background:var(--teal-deep); color:#DCEFF1}
.site-footer .wrap{padding:34px 22px 22px; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:28px}
@media(max-width:760px){ .site-footer .wrap{grid-template-columns:1fr} }
.site-footer h4{font-family:"Lora",serif; color:#fff; margin:0 0 10px; font-size:1rem}
.site-footer a{color:#BFE4EA; text-decoration:none; display:block; padding:4px 0; font-size:0.875rem;
  line-height:1.45}
/* A long label ("3D модел на телото") wrapped to two lines inside a 1fr column,
   which pushed everything below it down and made the columns stop lining up.
   Shorter labels + a wider first column + top alignment. */
.site-footer .wrap{align-items:start}
.site-footer a:hover{color:#fff}
.site-footer .fnote{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.15); margin-top:10px; padding-top:14px; font-size:0.78125rem; color:#9FCBD3}

/* ---- Donations ---- */
.don-hero{padding:44px 0 20px; text-align:center}
.don-hero h1{font-size:clamp(1.75rem,4.5vw,2.5rem)}
.don-hero p{color:var(--muted); max-width:56ch; margin:0 auto}
.don-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px}
@media(max-width:820px){ .don-grid{grid-template-columns:1fr} }
.don-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; transition:.16s}
.don-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--sky)}
.don-card .amt{font-family:"Lora",serif; font-size:2.125rem; color:var(--teal-deep); font-weight:700}
.don-card p{color:var(--muted); font-size:0.875rem; min-height:42px}
.don-card.featured{border:2px solid var(--coral); position:relative}
.don-card.featured::before{content:"Најпопуларно"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--coral); color:#fff; font-size:0.6875rem; font-weight:600; padding:4px 12px; border-radius:100px; letter-spacing:.04em}
.don-custom{display:flex; gap:10px; max-width:420px; margin:20px auto 0}
.don-custom input{flex:1; border:1px solid var(--line); border-radius:100px; padding:12px 18px; font:inherit; outline:0}
.don-custom input:focus{border-color:var(--teal)}
.don-ways{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
@media(max-width:820px){ .don-ways{grid-template-columns:1fr} }
.don-way{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px}
.don-way h3{font-size:1rem; color:var(--teal-deep); margin:0 0 6px}
.don-way p{font-size:0.84375rem; color:var(--muted); margin:0}
.don-way .mono{font-family:ui-monospace,Menlo,monospace; background:var(--mint); border-radius:8px; padding:6px 10px; display:inline-block; margin-top:8px; color:var(--ink); font-size:0.8125rem; user-select:all}
.faq{max-width:760px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px 16px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600; color:var(--ink); padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--teal); font-size:1.25rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted); font-size:0.90625rem; margin:0 0 14px}

@media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto} }

/* ===== system illustrations: card thumbnails + article banners + hover cards ===== */
.card .thumb{width:100%;height:118px;border-radius:12px;margin-bottom:4px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--mint),#fff);border:1px solid var(--line);overflow:hidden}
.card .thumb svg{width:88%;height:88%}
.sys-banner{width:100%;height:170px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#fff, var(--mint) 70%, #DCEFF1 100%);border:1px solid var(--line);margin-bottom:14px}
.sys-banner svg{width:64%;height:88%}
.art-banner{width:100%;height:150px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#fff, var(--mint) 72%, #DCEFF1 100%);border:1px solid var(--line);margin:-4px 0 16px}
.art-banner svg{width:52%;height:82%}

/* homepage anatomical figure */
.figure-wrap{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:487/1212}
.figure-wrap img.body-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 24px rgba(10,90,102,.18))}
.figure-wrap svg.body{position:absolute;inset:0;width:100%;height:100%;display:block}
.spot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border:0;padding:0;background:transparent;cursor:pointer;z-index:3}
.spot i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 22%,var(--teal) 26% 100%);border:2px solid #fff;box-shadow:0 3px 10px rgba(10,90,102,.4)}
.spot.alert i{background:radial-gradient(circle at 35% 30%,#fff 0 22%,var(--coral) 26% 100%)}
.spot i::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:ring 2.6s ease-out infinite}
.spot.alert i::before{border-color:var(--coral)}
.spot:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:50%}
.hovercard{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
  width:200px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:10px;opacity:0;pointer-events:none;transition:.16s;z-index:9}
.spot:hover .hovercard,.spot:focus-visible .hovercard{opacity:1;transform:translateX(-50%) translateY(0)}
.hovercard .pic{height:96px;border-radius:10px;background:linear-gradient(135deg,var(--mint),#fff);display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.hovercard .pic svg{width:82%;height:82%}
.hovercard h4{font-family:"Lora",serif;font-size:0.90625rem;margin:0 0 2px;color:var(--ink)}
.hovercard p{font-size:0.75rem;color:var(--muted);margin:0}
@keyframes ring{0%{opacity:.5;transform:scale(.6)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.spot i::before{animation:none}}

/* ===== back arrow in reader, subsystem headings ===== */
.m-back{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;color:var(--teal-deep);
  font-size:1.25rem;line-height:1;flex:0 0 auto;display:none;place-items:center}
.m-back.show{display:grid}
.m-back:hover{background:var(--mint)}
.subsys{font-family:"Lora",serif;font-size:0.875rem;color:var(--teal-deep);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.subsys::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky)}
.find-hospital{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:inherit;font-weight:600;font-size:0.84375rem;
  text-decoration:none;color:#fff;background:var(--coral);border-radius:100px;padding:9px 16px}
.find-hospital:hover{background:var(--coral-deep)}

/* ===== hospital finder page ===== */
.hosp-hero{padding:40px 0 6px;text-align:center}
.hosp-hero h1{font-size:clamp(1.625rem,4vw,2.375rem)}
.hosp-hero p{color:var(--muted);max-width:56ch;margin:0 auto}
.geo-panel{max-width:620px;margin:22px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;box-shadow:var(--shadow)}
.geo-panel .btn-coral{font-size:1rem;padding:13px 24px}
.geo-status{margin-top:14px;color:var(--muted);font-size:0.875rem;min-height:20px}
.geo-filter{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:0.875rem;color:var(--ink)}
.geo-filter label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hosp-list{max-width:720px;margin:22px auto 0;display:flex;flex-direction:column;gap:12px}
.hosp-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.hosp-card.major{border-color:var(--sky);box-shadow:0 10px 30px rgba(14,124,139,.14)}
.hosp-rank{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--mint);color:var(--teal-deep);display:grid;place-items:center;font-family:"Lora",serif;font-weight:700}
.hosp-main{flex:1;min-width:0}
.hosp-main h3{font-size:1.03125rem;margin:0 0 2px;color:var(--ink)}
.hosp-main .meta{font-size:0.8125rem;color:var(--muted)}
.hosp-badge{display:inline-block;font-size:0.6875rem;font-weight:600;color:var(--teal-deep);background:var(--mint);border:1px solid var(--line);border-radius:100px;padding:2px 9px;margin-left:6px}
.hosp-dist{font-weight:600;color:var(--teal-deep);white-space:nowrap}
.hosp-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.hosp-actions a{font-size:0.8125rem;text-decoration:none;border-radius:100px;padding:7px 13px;border:1px solid var(--line);color:var(--teal-deep);background:#fff}
.hosp-actions a.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.hosp-emerg{max-width:720px;margin:18px auto 0;background:#FFF4F3;border:1px solid #F6D2CF;border-radius:14px;padding:14px 16px;color:#7A2C29;font-size:0.84375rem}
.hosp-emerg b{color:var(--coral-deep)}
@media(max-width:820px){.nav a{padding:8px 10px}}

/* ===== hover: pulse RED on any system point ===== */
.spot:hover i, .spot:focus-visible i{ background:radial-gradient(circle at 35% 30%,#fff 0 22%,var(--coral) 26% 100%); animation:pulseRed 1s ease-in-out infinite; }
.spot:hover i::before, .spot:focus-visible i::before{ border-color:var(--coral); }
@keyframes pulseRed{0%,100%{box-shadow:0 3px 10px rgba(239,83,80,.5),0 0 0 0 rgba(239,83,80,.55)}50%{box-shadow:0 3px 10px rgba(239,83,80,.5),0 0 0 9px rgba(239,83,80,0)}}

/* ===== reference/optimal value tables (in article + values page) ===== */
.rich-block{margin:16px 0}
.rich-block svg{max-width:100%;height:auto}
.ref-block{margin-top:16px}
.ref-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:0.875rem}
.ref-table td,.ref-table th{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ref-table tr:last-child td{border-bottom:0}
.ref-table td:first-child{color:var(--ink);font-weight:500;width:52%}
.ref-table td:last-child{color:var(--teal-deep);font-weight:600;font-variant-numeric:tabular-nums}
.ref-table .ok td{background:#EAF6EE} .ref-table .warn td{background:#FFF6EC} .ref-table .bad td{background:#FDECEC}
.ref-note{font-size:0.78125rem;color:var(--muted);margin-top:8px}

/* values page */
.val-cat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.val-cat h3{display:flex;align-items:center;gap:10px;font-size:1.0625rem;color:var(--teal-deep);margin:0 0 12px}
.val-cat h3 .ic{width:34px;height:34px;border-radius:9px;background:var(--mint);display:grid;place-items:center;color:var(--teal)}
.val-grid{columns:2;column-gap:16px} @media(max-width:640px){.val-grid{columns:1}}
.val-search{max-width:520px;margin:0 auto 20px}

/* ===== guided symptom explorer ===== */
.se-steps{display:flex;gap:8px;justify-content:center;margin:0 0 22px;flex-wrap:wrap}
.se-step{font-size:0.8125rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px}
.se-step.active{color:var(--teal-deep);background:var(--mint);border-color:var(--sky);font-weight:600}
.se-regions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.se-regions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.se-regions{grid-template-columns:1fr}}
.se-region{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;font:inherit;transition:.15s}
.se-region:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--sky)}
.se-region .pic{height:84px;display:grid;place-items:center} .se-region .pic svg{width:70%;height:70%}
.se-region h3{font-size:0.9375rem;margin:6px 0 0;color:var(--ink)}
.se-back{background:none;border:0;color:var(--teal-deep);font:inherit;font-weight:600;cursor:pointer;padding:0;margin-bottom:14px}
.se-syms{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 18px}
.se-sym{font:inherit;font-size:0.84375rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;padding:8px 14px;cursor:pointer;transition:.14s}
.se-sym:hover{background:var(--mint)} .se-sym.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.se-results{display:flex;flex-direction:column;gap:10px}
.se-hit{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 15px;cursor:pointer;font:inherit}
.se-hit:hover{background:var(--mint);border-color:var(--sky)}
.se-hit b{color:var(--ink)} .se-hit small{color:var(--muted);display:block;font-weight:400}
.se-hit .match{font-size:0.75rem;color:var(--teal-deep);font-weight:600;white-space:nowrap}
.se-disc{background:#FFF4F3;border:1px solid #F6D2CF;border-radius:14px;padding:14px 16px;color:#7A2C29;font-size:0.84375rem;margin-top:18px}
.se-disc b{color:var(--coral-deep)}

/* ===== working mobile menu ===== */
.menu-toggle{border:1px solid var(--line);background:#fff;border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--teal-deep);align-items:center;justify-content:center}
@media(max-width:820px){
  .site-header.nav-open .nav{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 16px;gap:2px;box-shadow:var(--shadow)}
  .site-header.nav-open .nav a{padding:11px 12px}
}

/* ===== accessibility ===== */
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}
.spot:focus-visible i,.hs:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
a.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--teal);color:#fff;padding:10px 16px;
  border-radius:0 0 10px 10px;text-decoration:none;font-weight:600;transition:top .15s}
a.skip-link:focus{top:0}
.faq summary:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.updated{color:#BFE4EA;font-size:0.75rem;margin-top:6px;opacity:.85}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* share/copy-link button in articles */
.share-link{display:inline-flex;align-items:center;gap:7px;margin:2px 0 6px;font:inherit;font-size:0.8125rem;font-weight:600;
  cursor:pointer;background:var(--mint);color:var(--teal-deep);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.share-link:hover{background:#fff;border-color:var(--sky)}

.se-urgent{display:inline-block;font-size:0.6875rem;font-weight:600;color:var(--coral-deep);background:#FDECEC;border:1px solid #F6D2CF;border-radius:100px;padding:1px 8px;margin-left:6px;vertical-align:middle}

/* ---- mobile header: make the CTA and menu button match in height & shape ---- */
@media(max-width:820px){
  .header-actions{gap:8px}
  .header-actions .btn{height:42px;padding:0 16px;font-size:0.875rem;border-radius:100px;white-space:nowrap}
}
@media(max-width:400px){
  /* very small phones: shorten the label so it never wraps or overflows */
  .header-actions .btn{padding:0 13px;font-size:0.84375rem}
}

/* ---- global mobile safety: nothing may overflow the viewport horizontally ---- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,table{max-width:100%}
.wrap{box-sizing:border-box}
/* wide reference tables scroll inside their own box instead of stretching the page */
.ref-table,.val-card table{width:100%;table-layout:auto}
.ref-block{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* long lab/medical words shouldn't push layouts wide on small screens */
@media(max-width:520px){
  .lab-card h4,.lab-card p,.val-card{overflow-wrap:anywhere}
}

/* ---- cookie notice ---- */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(10,90,102,.12);padding:12px 16px}
.cookie-bar[hidden]{display:none}
.cookie-in{max-width:1080px;margin:0 auto;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-in p{margin:0;font-size:0.84375rem;color:var(--muted);line-height:1.5;flex:1;min-width:220px}
.cookie-in a{color:var(--teal-deep);font-weight:600}
.cookie-in .btn{flex:0 0 auto}
@media(max-width:520px){
  .cookie-in{flex-direction:column;align-items:stretch;gap:10px}
  .cookie-in .btn{width:100%;justify-content:center}
}

/* ---- legal pages ---- */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-family:"Lora",serif;color:var(--teal-deep);font-size:1.25rem;margin:26px 0 8px}
.legal p,.legal li{color:#33555d;font-size:0.9375rem;line-height:1.65}
.legal ul{padding-left:20px;margin:8px 0}
.legal li{margin:6px 0}
.legal a{color:var(--teal-deep);font-weight:600}
.legal code{background:var(--mint);padding:2px 6px;border-radius:6px;font-size:0.8125rem}
.legal-date{color:var(--muted);font-size:0.8125rem;margin:0 0 8px}
.legal-note{background:var(--mint);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:26px;font-size:0.875rem;color:var(--teal-deep)}
.legal-warn{background:#FFF4F3;border:1px solid #F6D2CF;border-radius:16px;padding:16px 18px;margin:18px 0}
.legal-warn h2{color:var(--coral-deep);font-size:1.1875rem}
.legal-warn p{color:#5a3b39;margin:8px 0 0}

/* ---- about page: team + method ---- */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}
@media(max-width:640px){.team-grid{grid-template-columns:1fr}}
.team-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.team-badge{display:inline-block;font-size:0.71875rem;font-weight:600;color:var(--teal-deep);background:var(--mint);
  border:1px solid var(--line);border-radius:100px;padding:3px 10px;margin-bottom:8px}
.team-card h3{font-family:"Lora",serif;color:var(--teal-deep);font-size:1.0625rem;margin:4px 0 4px}
.team-card .team-cred{font-weight:600;color:var(--ink);font-size:0.875rem;margin:0 0 6px}
.team-card p{font-size:0.875rem;color:#33555d;line-height:1.6;margin:0}
.method{padding-left:20px;margin:10px 0}
.method li{margin:8px 0;color:#33555d;font-size:0.9375rem;line-height:1.65}

/* ---- symptom checker: calm framing + match percentage ---- */
.se-note{background:var(--mint);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font-size:0.84375rem;color:#33555d;line-height:1.55;margin:0 0 12px}
.se-note-soft{background:#FFF9EC;border-color:#F2E2BE;color:#5c4a26}
.se-hit .match.strong{background:var(--teal);color:#fff;border-color:var(--teal)}


/* =====================================================================
   ACCESSIBILITY · CLICK-TO-CALL · REVIEWED BADGE · PRINT
   Added Jul 2026. Everything below is additive — nothing above is removed.
   ===================================================================== */

/* ---- Contrast fix ---------------------------------------------------
   The old --muted (#5B7178) sits at 5.15:1 on white and 4.85:1 on --bg.
   It technically clears WCAG AA (4.5:1), but only just, and it's used for
   13px body copy on a site whose users skew older. #46626A lifts it to
   6.5:1 / 6.1:1 — comfortable AA, close to AAA — with no visible hue shift. */
:root{ --muted:#46626A; }

/* ---- Focus visibility (keyboard users) ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- High-contrast mode (header toggle; persists in localStorage) ---- */
html[data-contrast="high"]{
  --ink:#000000; --muted:#1E3238; --teal:#00505E; --teal-deep:#003C47;
  --coral:#C21F16; --coral-deep:#8F1710; --line:#5A7278;
  --bg:#FFFFFF; --mint:#E2F0F3; --card:#FFFFFF;
  --shadow:0 0 0 1px #5A7278; --shadow-lg:0 0 0 2px #24444C;
}
html[data-contrast="high"] body{background:#fff}
html[data-contrast="high"] .site-header{background:#fff; border-bottom:2px solid var(--ink)}
html[data-contrast="high"] a{text-decoration:underline}
html[data-contrast="high"] .btn,
html[data-contrast="high"] .card,
html[data-contrast="high"] .choice,
html[data-contrast="high"] .cond-item,
html[data-contrast="high"] .se-region,
html[data-contrast="high"] .se-sym,
html[data-contrast="high"] .se-hit{border-width:2px; border-color:var(--ink)}
html[data-contrast="high"] .btn-primary{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff}
html[data-contrast="high"] .btn-coral{background:var(--coral-deep); border-color:var(--coral-deep); color:#fff}
html[data-contrast="high"] .disc-box,
html[data-contrast="high"] .se-disc{background:#fff; border:2px solid var(--ink); color:#000}
html[data-contrast="high"] .redflag{background:#fff; border:2px solid var(--coral-deep)}
html[data-contrast="high"] .modal-body p,
html[data-contrast="high"] .modal-body li{color:#000}
html[data-contrast="high"] :focus-visible{outline:4px solid #000; outline-offset:2px}


/* ---- Click-to-call ---- */
.tel-link{
  color:inherit; font-weight:700; text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:2px;
  white-space:nowrap; border-radius:4px; padding:0 1px;
}
.tel-link:hover{color:var(--coral-deep); background:#FFECEA}
.redflag .tel-link, .land-emerg .tel-link{color:var(--coral-deep)}
/* on phones, make it look unmistakably tappable */
@media(hover:none){
  .redflag .call .tel-link, .land-emerg .nums .tel-link{
    display:inline-block; background:var(--coral); color:#fff; text-decoration:none;
    padding:4px 12px; border-radius:100px; margin:2px 2px;
  }
}

/* ---- "Стручно проверено" badge (driven by c.checked in data.js) ---- */
.verified{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--mint); border:1px solid var(--sky); border-radius:100px;
  padding:7px 15px 7px 11px; margin:0 0 14px;
  font-size:0.84375rem; color:var(--teal-deep); line-height:1.35;
}
.verified b{font-weight:600}
.verified .vf-tick{color:#0E7C4F; flex:0 0 auto}
.verified .vf-date{color:var(--muted); font-size:0.78125rem}
.vf-mini{display:inline-flex; vertical-align:-2px; margin-left:6px; color:#0E7C4F}
.vf-mini .vf-tick{width:13px; height:13px}
html[data-contrast="high"] .verified{background:#fff; border:2px solid var(--ink); color:#000}
html[data-contrast="high"] .verified .vf-tick, html[data-contrast="high"] .vf-mini{color:#0A5C3C}

/* ---- Article tool row (copy link + print) ---- */
.art-tools{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px}

/* =====================================================================
   PRINT  —  "Печати / PDF"
   Two modes:
     body.printing        → print only the open article (reader modal)
     body.printing-visit  → print only the visit-preparation sheet
   ===================================================================== */
.print-only{display:none}


/* =====================================================================
   SEVERITY MARKERS — reference tables no longer rely on colour alone
   (WCAG 1.4.1). Shape carries the meaning; colour is a second channel.
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.ref-table td.sev{width:30px; padding-right:0; text-align:center; vertical-align:middle}
.ref-table td.sev svg{width:18px; height:18px; display:block; margin:0 auto}
.ref-table .ok  td.sev{color:#136B3D}   /* check in a circle    */
.ref-table .warn td.sev{color:#8A5200}  /* ! in a circle        */
.ref-table .bad td.sev{color:#B3241F}   /* ! in a triangle      */
.ref-table td:first-child{width:auto}   /* the label is no longer the first cell */
.ref-table td:nth-child(2){color:var(--ink); font-weight:500; width:50%}

.ref-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 0; font-size:0.78125rem; color:var(--muted)}
.ref-legend span{display:inline-flex; align-items:center; gap:6px}
.ref-legend svg{width:15px; height:15px; flex:0 0 auto}
.ref-legend .ok{color:#136B3D} .ref-legend .warn{color:#8A5200} .ref-legend .bad{color:#B3241F}

html[data-contrast="high"] .ref-table .ok td.sev,
html[data-contrast="high"] .ref-legend .ok{color:#0A4A29}
html[data-contrast="high"] .ref-table .warn td.sev,
html[data-contrast="high"] .ref-legend .warn{color:#5E3800}
html[data-contrast="high"] .ref-table .bad td.sev,
html[data-contrast="high"] .ref-legend .bad{color:#8F1710}
html[data-contrast="high"] .ref-table .ok td,
html[data-contrast="high"] .ref-table .warn td,
html[data-contrast="high"] .ref-table .bad td{background:#fff}

/* =====================================================================
   STATIC CONDITION PAGES  (/bolesti/<id>.html)
   The same article, but as a real page instead of a modal: real URL, real
   canonical, works with JS off, prints without any special mode.
   ===================================================================== */
.art-page{max-width:760px; margin:0 auto}
.art-page h1{font-size:clamp(1.625rem,4vw,2.25rem); color:var(--teal-deep); line-height:1.22; margin:6px 0 12px}
.art-page h2{font-size:1.1875rem; color:var(--teal-deep); margin:26px 0 8px}
.art-page p{color:#2C4A52; line-height:1.72; margin:0 0 12px}
.art-page ul{margin:0 0 14px; padding-left:20px}
.art-page li{color:#2C4A52; line-height:1.68; margin-bottom:6px}
.art-lead{font-size:1.0625rem; color:var(--ink) !important}

.crumbs{font-size:0.8125rem; color:var(--muted); margin:0 0 10px; line-height:1.7}
.crumbs a{color:var(--teal); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-current]{color:var(--muted)}

.art-page .redflag h2{color:var(--coral-deep); margin-top:0; display:flex; align-items:center; gap:8px}
.art-page .ref-block h2{margin-top:0}
.art-back{margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.art-back a{color:var(--teal); text-decoration:none; font-weight:600}
.art-back a:hover{text-decoration:underline}
.src-note{font-size:0.84375rem; color:var(--muted) !important}

/* =====================================================================
   ИСТАКНУВАЊЕ НА ТЕКСТ  (text emphasis)  —  html[data-emphasis="on"]
   ---------------------------------------------------------------------
   A different axis from text size. Bigger text reflows the page; heavier
   text doesn't. This is for low contrast sensitivity, cataracts, or a
   cheap screen in daylight — where the letters are big enough but too
   thin to resolve.

   DEFAULT IS OFF: `body` sets no font-weight, so it inherits 400 (normal).
   Nothing below applies until the user presses the button.
   ===================================================================== */
html[data-emphasis="on"] body{font-weight:500}
html[data-emphasis="on"] p,
html[data-emphasis="on"] li,
html[data-emphasis="on"] td,
html[data-emphasis="on"] .lead,
html[data-emphasis="on"] .art-lead,
html[data-emphasis="on"] .modal-body p,
html[data-emphasis="on"] .modal-body li{font-weight:500; color:var(--ink)}
html[data-emphasis="on"] h1,
html[data-emphasis="on"] h2,
html[data-emphasis="on"] h3{font-weight:700}
html[data-emphasis="on"] .nav a,
html[data-emphasis="on"] .btn,
html[data-emphasis="on"] .cond-item,
html[data-emphasis="on"] .res-t{font-weight:600}
/* the muted greys are the first thing to disappear for these users — lift them */
html[data-emphasis="on"] .muted,
html[data-emphasis="on"] .ref-note,
html[data-emphasis="on"] .src-note,
html[data-emphasis="on"] .crumbs,
html[data-emphasis="on"] .vp-priv,
html[data-emphasis="on"] .ref-legend{color:#33505A !important; font-weight:500}
/* links become unmistakable rather than merely coloured */
html[data-emphasis="on"] .modal-body a,
html[data-emphasis="on"] .art-page a{text-decoration:underline; text-underline-offset:2px; font-weight:600}
html[data-emphasis="on"] .art-page p,
html[data-emphasis="on"] .art-page li{line-height:1.78}   /* heavier text needs more air */

/* the button itself */

/* ---- prasaj.html: the send panel (replaces the silent mailto:) ---- */
.send-panel{margin-top:18px; padding:18px; border:1px solid var(--sky); background:var(--mint); border-radius:16px}
.send-panel h3{margin:0 0 6px; font-size:1.0625rem; color:var(--teal-deep)}
.send-note{margin:0 0 14px; font-size:0.875rem; color:#33555d; line-height:1.6}
.send-opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.send-opts .btn{flex:1 1 auto; justify-content:center; min-width:150px}
.send-hint{margin:0 0 12px; padding:10px 12px; background:#FFF4E5; border:1px solid #F0CFA0;
  border-radius:10px; font-size:0.875rem; color:#6B4A12; line-height:1.55}
.send-copy label{display:block; font-size:0.8125rem; font-weight:600; color:var(--ink); margin-bottom:5px}
.send-copy textarea{width:100%; font:inherit; font-size:0.875rem; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; background:#fff; color:var(--ink); resize:vertical}
.send-copy-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.send-addr{margin:10px 0 0; font-size:0.875rem; color:var(--muted)}
.send-addr b{color:var(--teal-deep)}

/* ---- /indeks.html — the A–Ш index ---- */
.ix-page{max-width:900px; margin:0 auto}
.ix-head{text-align:center; margin-bottom:22px}
.ix-head h1{font-size:clamp(1.75rem,4.5vw,2.375rem); color:var(--teal-deep); margin:6px 0 10px}
.ix-head .lead{max-width:560px; margin:0 auto 20px; color:#33555d}
.ix-search input{width:100%; max-width:520px; font:inherit; font-size:1rem; padding:13px 18px;
  border:1px solid var(--line); border-radius:100px; background:#fff; color:var(--ink)}
.ix-search input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,139,.15)}
.ix-count{font-size:0.8125rem; color:var(--muted); margin:8px 0 0; min-height:1.2em}

.ix-jump{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 26px;
  padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px}
.ix-jump a{display:grid; place-items:center; min-width:34px; height:34px; padding:0 6px;
  border-radius:9px; color:var(--teal-deep); text-decoration:none; font-weight:600; font-size:0.9375rem}
.ix-jump a:hover{background:var(--mint)}

.ix-group{margin-bottom:26px; scroll-margin-top:80px}
.ix-letter{font-size:1.375rem; color:var(--coral-deep); margin:0 0 10px; padding-bottom:6px;
  border-bottom:2px solid var(--line)}
.ix-list{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px 20px}
.ix-list li{display:block; padding:9px 4px; border-bottom:1px solid var(--line)}
/* CRITICAL: a display rule on the element OVERRIDES the [hidden] attribute
   (the UA stylesheet's `[hidden]{display:none}` is less specific than
   `.ix-list li{display:block}`). Without this, the filter marks items hidden
   and the CSS puts them straight back — the search box did nothing at all. */
.ix-list li[hidden]{display:none !important}
.ix-group[hidden]{display:none !important}
.ix-list a{color:var(--ink); text-decoration:none; font-weight:500}
.ix-list a:hover{color:var(--teal); text-decoration:underline}
.ix-none{text-align:center; color:var(--muted); padding:24px 0}
.ix-cta{margin:0 0 16px; text-align:center}
.ix-cta a{color:var(--teal-deep); font-weight:600; text-decoration:none; font-size:0.9375rem}
.ix-cta a:hover{text-decoration:underline}

/* =====================================================================
   „ЧИТЛИВОСТ" PANEL — one button, three settings
   Replaces three cryptic icon buttons that were crowding the header next
   to a 7-item nav and the CTA. Labels beat icons for a control that older
   users specifically need to find.
   ===================================================================== */
.rd-wrap{position:relative; flex:0 0 auto}
.rd-btn{display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 14px;
  border:1px solid var(--line); background:#fff; border-radius:100px; cursor:pointer;
  color:var(--teal-deep); font:inherit; font-size:0.875rem; font-weight:600; transition:.15s}
.rd-btn svg{width:19px; height:19px; flex:0 0 auto}
.rd-btn:hover{background:var(--mint); border-color:var(--sky)}
.rd-btn[aria-expanded="true"]{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff}

/* Positioned entirely by JS (see footer.html) once it has been moved out of the
   header. CSS only supplies looks — no positioning fights. z-index sits above the
   header (50) and below the article modal (100). */
.rd-panel{z-index:70;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px;
  box-shadow:0 18px 50px rgba(10,90,102,.22)}
.rd-panel[hidden]{display:none !important}
.rd-backdrop{display:none; position:fixed; inset:0; z-index:69; background:rgba(20,48,58,.35)}
@media(min-width:821px){ .rd-backdrop{display:none !important} }
.rd-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 10px; border-bottom:1px solid var(--line)}
.rd-row:last-of-type{border-bottom:0}
.rd-name{display:flex; flex-direction:column; gap:2px; font-size:0.875rem; font-weight:600; color:var(--ink)}
.rd-name small{font-weight:400; font-size:0.75rem; color:var(--muted); line-height:1.35}

.rd-seg{display:inline-flex; flex:0 0 auto; background:var(--mint); border:1px solid var(--line);
  border-radius:100px; padding:2px}
.rd-seg button{border:0; background:none; cursor:pointer; font-family:"Lora",serif; font-weight:700;
  color:var(--teal-deep); border-radius:100px; padding:5px 9px; line-height:1; font-size:0.8125rem}
.rd-seg button:nth-child(2){font-size:0.9375rem}
.rd-seg button:nth-child(3){font-size:1.0625rem}
.rd-seg button[aria-pressed="true"]{background:var(--teal-deep); color:#fff}

.rd-switch{flex:0 0 auto; width:46px; height:26px; border-radius:100px; border:1px solid var(--line);
  background:#E4EDEF; cursor:pointer; padding:0; position:relative; transition:.18s}
.rd-switch span{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:100px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.18s}
.rd-switch[aria-checked="true"]{background:var(--teal); border-color:var(--teal)}
.rd-switch[aria-checked="true"] span{left:22px}

.rd-reset{width:100%; margin-top:4px; padding:9px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:0.8125rem; color:var(--muted); border-radius:10px}
.rd-reset:hover{background:var(--mint); color:var(--teal-deep)}

/* The phone layout of the panel is set in JS (bottom sheet). Here we only shrink
   the button, because at ≤820px the header carries brand + Читливост + hamburger
   and the word "Читливост" no longer fits. */
@media(max-width:820px){
  .rd-label{display:none}
  .rd-btn{padding:0; width:42px; justify-content:center}
  .rd-row{padding:14px 10px}
  .rd-name{font-size:0.9375rem}
}
html[data-contrast="high"] .rd-panel{border:2px solid var(--ink)}
html[data-contrast="high"] .rd-switch{border:2px solid var(--ink)}

/* ---- header: „Повеќе" overflow ---- */
.nav-more{position:relative}
.nav-more-btn{display:inline-flex; align-items:center; gap:4px; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:500; font-size:0.9375rem; color:var(--muted);
  padding:8px 14px; border-radius:100px; transition:.15s}
.nav-more-btn:hover{background:var(--mint)}
.nav-more-btn svg{width:15px; height:15px; transition:transform .18s}
.nav-more-btn:hover{color:var(--teal)}
.nav-more-btn[aria-expanded="true"]{color:var(--teal)}
.nav-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-more-panel{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); z-index:60;
  width:250px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px;
  box-shadow:0 16px 44px rgba(10,90,102,.18)}
/* This is what looked "cheap": the panel links were 600-weight in --ink with a
   second line of small grey text, while every nav link beside them was 500-weight
   in --muted on one line. Two different typographic systems, 10px apart. Now the
   panel is the same type as the nav it belongs to; the descriptions are gone. */
.nav-more-panel a{display:block; padding:9px 12px; border-radius:10px;
  text-decoration:none; color:var(--muted); font-weight:500; font-size:0.9375rem;
  font-family:inherit; letter-spacing:inherit; line-height:1.4}
.nav-more-panel a small{display:none}
.nav-more-panel a:hover{background:var(--mint); color:var(--teal-deep)}
.nav-more-panel{width:210px}
.nav-more-panel a.active{background:var(--mint); color:var(--teal-deep)}
/* First aid sits at the top of this panel and should read as the priority item:
   coral text + a coral rule down its left edge, without turning into a loud button. */
.nav-more-fa{color:var(--coral-deep)!important; font-weight:700!important;
  border-left:3px solid var(--coral); border-radius:0 10px 10px 0; margin-bottom:2px}
.nav-more-fa:hover{background:var(--coral-soft)!important; color:var(--coral-deep)!important}
.nav-more-fa.active{background:var(--coral-soft)!important; color:var(--coral-deep)!important}

/* ---------------------------------------------------------------------------
   MOBILE HEADER — this is what was "way off on phone".

   At ≤820px the header was carrying FOUR things across ~360px: the brand, the
   „Читливост" button, the „Прашај доктор" CTA, and the hamburger. They fought
   for space and the layout collapsed.

   Now: brand · Читливост · hamburger. The CTA moves to the top of the menu,
   where it's actually bigger and easier to hit than it was in the header.
   --------------------------------------------------------------------------- */
@media(max-width:820px){
  .hdr-cta{display:none}                    /* CTA lives in the menu now */
  .nav-more{width:100%}
  .nav-more-btn{display:none}               /* no dropdown inside a dropdown */
  .nav-more-panel{position:static; transform:none; width:auto; border:0; box-shadow:none;
    padding:0; background:none}
  .nav-more-panel[hidden]{display:block !important}
  /* BUG: these inherited font-weight:600 from the desktop dropdown, so the
     „Повеќе" items rendered BOLD inside the mobile menu while every other nav
     link was normal. That's the "more section is bold on phone". */
  .nav-more-panel a{padding:10px 0; border-radius:0; font-weight:400; font-size:0.9375rem}
  .nav-more-panel a small{display:none}
  .nav-more-panel a:hover{background:none}
  .nav-more-panel a.active{background:none; color:var(--teal)}

  /* The CTA, as the first thing in the menu. LAYOUT ONLY — no repainting.
     This block used to force `background:var(--coral)` and a square border-radius,
     which flattened the button on phones: no gradient, no breathing ring, no ECG.
     .pd-cta + .pd-cta-wide already give it the right shape and personality. */
  .nav .nav-cta{display:inline-flex; order:-1; margin:0 0 8px}
  /* `.nav a:hover` is (0,2,1) and would out-specify `.pd-cta:hover` (0,2,0),
     turning the label teal on hover. This is the guard, and it's why the old
     rule needed !important. */
  .nav .nav-cta, .nav .nav-cta:hover, .nav .nav-cta:focus-visible{color:#fff}
}
/* THE DUPLICATE-BUTTON BUG. This was `.nav-cta{display:none}` — (0,1,0), same
   specificity as `.pd-cta{display:inline-flex}` further down the file, which
   therefore won on source order. Result: the mobile-only CTA also rendered on
   desktop, so the header showed „Прашај Доктор" twice. `.nav .nav-cta` is
   (0,2,0) and settles it. */
.nav .nav-cta{display:none}                 /* desktop: the header CTA is enough */

/* =====================================================================
   za-nas.html — governance, funding, red lines
   The red-lines list is the load-bearing part of this page: it's the thing
   a reader (or a journalist, or a regulator) will point at if the site ever
   drifts. Styled to be read, not skimmed past.
   ===================================================================== */
.gov-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:14px 0 8px}
.gov-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px}
.gov-card h3{font-size:1rem; color:var(--teal-deep); margin:8px 0 8px}
.gov-card p{font-size:0.9375rem; margin:0 0 8px}
.gov-tag{display:inline-block; font-size:0.6875rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px}
.gov-tag-open{background:#E3F3EA; color:#0E6B42; border:1px solid #BFE3CF}
.gov-tag-closed{background:#F2F0EA; color:#6B5B32; border:1px solid #E0D8C4}
.gov-why{font-size:0.875rem !important; color:var(--muted); border-left:3px solid var(--line);
  padding-left:11px; margin-bottom:0 !important}

.fund-now{background:var(--mint); border:1px solid var(--sky); border-radius:14px; padding:15px 18px; margin:12px 0 16px}
.fund-now p{margin:0; font-size:0.9375rem}
.fund-list li{margin-bottom:7px}

.redlines-intro{font-size:0.9375rem; color:var(--muted); margin-bottom:10px}
.redlines{list-style:none; margin:0 0 8px; padding:0}
.redlines li{position:relative; padding:11px 0 11px 30px; border-bottom:1px solid var(--line);
  font-size:0.9375rem; line-height:1.65}
.redlines li:last-child{border-bottom:0}
.redlines li::before{
  content:""; position:absolute; left:2px; top:17px; width:13px; height:13px;
  border-radius:100px; border:3px solid var(--coral-deep);
}
.redlines li b{color:var(--ink)}

.donors{border:1px dashed var(--line); border-radius:14px; padding:16px 18px; background:#fff}
.donors-empty{margin:0; font-size:0.9375rem; color:#33555d}

.support{border:1px solid var(--line); border-radius:16px; padding:18px 20px; background:#fff}
.support h3{margin:0 0 8px; font-size:1.0625rem; color:var(--teal-deep)}
.support p{font-size:0.9375rem; margin:0 0 10px}
.support-soon{background:#FAFCFC; border-style:dashed}
.support-alt{margin-bottom:0 !important; color:var(--muted)}

/* ---- za-nas: why reviewers are unnamed, and what replaces the name ---- */
.rev-why{background:var(--mint); border:1px solid var(--sky); border-radius:16px; padding:18px 20px; margin:12px 0 20px}
.rev-why p{margin:0 0 10px; font-size:0.9375rem; line-height:1.7}
.rev-why p:last-child{margin-bottom:0}
.rev-not{background:#fff; border-left:4px solid var(--coral-deep); border-radius:0 10px 10px 0; padding:11px 14px}
.rev-chain{counter-reset:rc; list-style:none; margin:0 0 20px; padding:0}
.rev-chain li{position:relative; counter-increment:rc; padding:12px 0 12px 40px; border-bottom:1px solid var(--line);
  font-size:0.9375rem; line-height:1.7}
.rev-chain li:last-child{border-bottom:0}
.rev-chain li::before{content:counter(rc); position:absolute; left:0; top:13px; width:26px; height:26px;
  display:grid; place-items:center; border-radius:100px; background:var(--teal-deep); color:#fff;
  font-size:0.8125rem; font-weight:700}
.rev-honest{background:#FFFBF4; border:1px solid #EFD9B0; border-radius:16px; padding:18px 20px; margin-bottom:20px}
.rev-honest h3{margin:0 0 8px; font-size:1rem; color:#7A5610}
.rev-honest p{margin:0 0 10px; font-size:0.9375rem; line-height:1.7}
.rev-honest p:last-child{margin-bottom:0}
.vf-how{margin-left:6px; font-size:0.75rem; color:var(--teal); text-decoration:underline; white-space:nowrap}

/* ---- za-nas: what the review actually is (and is not) ---- */
.rev-scope{background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:0 14px 14px 0;
  padding:16px 18px; margin:0 0 20px}
.rev-scope h3{margin:0 0 10px; font-size:1rem; color:var(--teal-deep)}
.rev-scope p{margin:0 0 9px; font-size:0.9375rem; line-height:1.7}
.rev-scope-note{color:var(--muted); font-size:0.875rem !important; margin-bottom:0 !important}

/* ---- prasaj.html: what you will and will not get ---- */
.ask-nope{background:#FFF6F5; border:1px solid #F6D2CF; border-radius:16px; padding:16px 20px; margin:16px 0}
.ask-nope h2{margin:0 0 8px; font-size:1rem; color:var(--coral-deep)}
.ask-nope ul{margin:0 0 10px; padding-left:20px}
.ask-nope li{font-size:0.9375rem; line-height:1.65; margin-bottom:5px}
.ask-nope-why{margin:0; font-size:0.875rem; color:#7A3C38; line-height:1.6}
.ask-yep{background:var(--mint); border:1px solid var(--sky); border-radius:16px; padding:16px 20px; margin:0 0 18px}
.ask-yep h2{margin:0 0 8px; font-size:1rem; color:var(--teal-deep)}
.ask-yep ul{margin:0 0 10px; padding-left:20px}
.ask-yep li{font-size:0.9375rem; line-height:1.65; margin-bottom:5px}
.ask-yep-why{margin:0; font-size:0.875rem; color:#2C4A52; line-height:1.6}
.ask-warn{background:var(--coral-deep); color:#fff; border-radius:16px; padding:16px 20px; margin-top:18px}
.ask-warn p{margin:0 0 8px; font-size:0.9375rem; line-height:1.65}
.ask-warn-2{margin-bottom:0 !important; font-size:0.8125rem !important; opacity:.92}

/* ---- second badge: topic is inside the author's own specialty ---- */
.vf-spec{background:#EAF6EE; border-color:#BFE3CF; color:#0E6B42; margin-top:-6px}
.vf-spec .vf-tick{color:#0E7C4F}
.vf-mini-spec{color:#0E7C4F}
html[data-contrast="high"] .vf-spec{background:#fff; border:2px solid var(--ink); color:#000}
.rev-scope-warn{background:#FFF7ED; border-left:3px solid #D9902B; padding:10px 13px; border-radius:0 8px 8px 0;
  font-size:0.9375rem !important}
.rev-honest-cta{margin-bottom:0 !important}

/* ---- third badge: correlated against the official sources ---- */
.vf-src{background:#F1F5FB; border-color:#C7D8EE; color:#26456E; margin-top:-6px}
.vf-src .vf-tick{color:#2A5FA8}
html[data-contrast="high"] .vf-src{background:#fff; border:2px solid var(--ink); color:#000}
.verified + .verified{margin-top:-6px}

/* ---- simptomi.html: cross-system symptom search ---- */
.gs-panel{background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 22px; margin-bottom:16px}
.gs-panel h3{margin:0 0 6px; font-size:1.0625rem; color:var(--teal-deep)}
.gs-sub{margin:0 0 16px; font-size:0.9375rem; color:var(--muted); line-height:1.6; max-width:62ch}
.gs-area{margin-bottom:14px}
.gs-area h4{margin:0 0 7px; font-size:0.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted)}
.gs-chips{display:flex; flex-wrap:wrap; gap:7px}
.gs-n{opacity:.55; font-size:0.75rem; margin-left:3px}
.gs-note{margin:16px 0 10px; font-size:0.9375rem; color:#2C4A52; line-height:1.6;
  padding-top:14px; border-top:1px solid var(--line)}
.gs-partial{border-top:0; padding-top:0; color:var(--muted); font-size:0.875rem}
.gs-list{display:grid; gap:6px}
.gs-item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border:1px solid var(--line); border-radius:12px;
  text-decoration:none; color:var(--ink); background:#fff; transition:.14s}
.gs-item:hover{background:var(--mint); border-color:var(--sky)}
.gs-t{font-weight:600; font-size:0.9375rem}
.gs-meta{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.gs-sys{font-size:0.75rem; color:var(--muted); white-space:nowrap}
.gs-score{font-size:0.75rem; font-weight:700; color:var(--teal-deep);
  background:var(--mint); border:1px solid var(--sky); border-radius:100px; padding:2px 8px}
.gs-alt{margin-bottom:16px}
.gs-alt summary{cursor:pointer; font-weight:600; color:var(--teal-deep); padding:12px 0; font-size:0.9375rem}
.gs-alt summary:hover{text-decoration:underline}
.gs-alt[open] summary{margin-bottom:12px}
@media(max-width:560px){
  .gs-item{flex-direction:column; align-items:flex-start; gap:5px}
  .gs-meta{width:100%; justify-content:space-between}
}

/* ---- Trust badges: three icon chips, each explaining itself on hover/tap ---- */
.bdgs{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:14px 0 4px}
.bdg{position:relative; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:#fff; border-radius:100px;
  padding:5px 12px 5px 8px; font:inherit; font-size:0.8125rem; font-weight:600;
  color:var(--muted); cursor:help; transition:.14s}
.bdg svg{width:16px; height:16px; flex:0 0 auto}
.bdg:hover,.bdg:focus-visible{color:var(--ink); border-color:var(--sky); background:var(--mint)}
.bdg-author{color:#2C5F6B} .bdg-author svg{color:var(--teal)}
.bdg-src{color:#26456E}    .bdg-src svg{color:#2A5FA8}
.bdg-spec{color:#0E6B42}   .bdg-spec svg{color:#0E7C4F}
.bdg-spec{background:#EAF6EE; border-color:#BFE3CF}
.bdg-date{font-size:0.75rem; color:var(--muted); margin-left:2px}
.bdg-how{font-size:0.75rem; color:var(--teal); text-decoration:underline; margin-left:auto; white-space:nowrap}

/* the tooltip — explains what the badge actually claims, which is the whole point */
.bdg-tip{position:absolute; left:0; top:calc(100% + 8px); z-index:20; width:min(300px, 78vw);
  background:var(--ink); color:#fff; border-radius:12px; padding:11px 13px;
  font-size:0.8125rem; font-weight:400; line-height:1.55; text-align:left;
  box-shadow:0 12px 32px rgba(20,48,58,.28);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.16s; pointer-events:none}
.bdg-tip::before{content:""; position:absolute; left:16px; top:-5px; width:10px; height:10px;
  background:var(--ink); transform:rotate(45deg)}
.bdg:hover .bdg-tip,.bdg:focus-visible .bdg-tip,.bdg[aria-expanded="true"] .bdg-tip{
  opacity:1; visibility:visible; transform:translateY(0)}
@media(max-width:560px){
  .bdgs{gap:6px}
  .bdg{padding:5px 10px 5px 7px; font-size:0.75rem}
  .bdg-how{margin-left:0; width:100%}
  .bdg-tip{left:auto; right:0; width:min(280px, 86vw)}
  .bdg-tip::before{left:auto; right:16px}
}
html[data-contrast="high"] .bdg{border:2px solid var(--ink); color:#000; background:#fff}
html[data-contrast="high"] .bdg-tip{background:#000; border:2px solid #fff}
.lead-2{background:#FFF6F5; border-left:4px solid var(--coral-deep); border-radius:0 10px 10px 0;
  padding:11px 14px; font-size:0.9375rem !important; color:#4A2624; line-height:1.6; margin:0 0 4px}

/* ============================================================================
   „Прашај Доктор" — the one button on the site that has to be pressed.

   The idea: the brand mark is a heart, so the button IS a heartbeat.
   - at rest: a calm coral pill with a soft ring that breathes, once every 3s.
     Slow enough to read as "alive", not as "notification".
   - on hover/focus: the heart gives a real double-thump (lub-dub — the two
     beats are not evenly spaced, which is why it reads as a heart and not as a
     bouncing icon), and an ECG trace sweeps across behind the text.
   - the sheen is a single diagonal pass, not a loop. A loop would nag.
   Everything motion-based is off under prefers-reduced-motion.
   ========================================================================== */
.pd-cta{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 17px 0 14px; border-radius:100px;
  background:linear-gradient(135deg, #FF6B66 0%, var(--coral) 48%, var(--coral-deep) 100%);
  color:#fff; text-decoration:none; white-space:nowrap;
  font-weight:600; font-size:0.875rem; letter-spacing:.005em;
  box-shadow:0 2px 8px rgba(214,58,52,.28), inset 0 1px 0 rgba(255,255,255,.22);
  overflow:hidden; isolation:isolate;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s;
}
.pd-cta:hover,.pd-cta:focus-visible{
  color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(214,58,52,.36), inset 0 1px 0 rgba(255,255,255,.28);
}
.pd-cta:active{ transform:translateY(0) scale(.985) }
.pd-cta:focus-visible{ outline:3px solid var(--teal-deep); outline-offset:2px }

.pd-cta-t{ position:relative; z-index:2 }

/* the heart */
.pd-cta .pd-heart{
  position:relative; z-index:2; width:16px; height:16px; flex:0 0 auto;
  color:#fff; transform-origin:center;
  filter:drop-shadow(0 1px 1px rgba(150,30,26,.35));
}

/* the breathing ring — sits behind the heart */
.pd-cta-ring{
  position:absolute; left:13px; top:50%; width:18px; height:18px; margin-top:-9px;
  border-radius:50%; background:rgba(255,255,255,.34); z-index:1;
  animation:pdBreath 3s ease-in-out infinite;
}

/* the ECG trace, revealed on hover */
.pd-cta .pd-ecg{
  position:absolute; inset:0 0 0 0; width:100%; height:100%; z-index:0;
  color:rgba(255,255,255,.55); opacity:0;
  stroke-dasharray:120; stroke-dashoffset:120;
  transition:opacity .2s;
}
.pd-cta:hover .pd-ecg,.pd-cta:focus-visible .pd-ecg{
  opacity:1; animation:pdTrace 1.1s cubic-bezier(.5,0,.2,1) forwards;
}
/* lub-dub: two beats, unevenly spaced — that spacing is what makes it read as a heart */
.pd-cta:hover .pd-heart,.pd-cta:focus-visible .pd-heart{ animation:pdBeat 1.1s ease-out }
/* single diagonal sheen — one pass, no loop */
.pd-cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform:translateX(-110%);
}
.pd-cta:hover::after,.pd-cta:focus-visible::after{ animation:pdSheen .75s ease-out }

@keyframes pdBreath{ 0%,100%{transform:scale(1); opacity:.34} 50%{transform:scale(1.28); opacity:.12} }
@keyframes pdBeat{
  0%{transform:scale(1)}   14%{transform:scale(1.30)}  26%{transform:scale(1)}
  38%{transform:scale(1.18)} 52%{transform:scale(1)}   100%{transform:scale(1)}
}
@keyframes pdTrace{ to{ stroke-dashoffset:0 } }
@keyframes pdSheen{ to{ transform:translateX(110%) } }

/* mobile menu version — full width, same personality */
.pd-cta-wide{ width:100%; height:46px; justify-content:center; font-size:0.9375rem; padding:0 18px }
.pd-cta-wide .pd-cta-ring{ left:auto; right:calc(50% + 46px) }

/* in-page / hero version — the SAME button, bigger hit area. index.html used to
   carry a plain `.btn.btn-coral` here, so the most important button on the site
   was the only dead one. The ring/heart offsets have to scale with it or the
   ring drifts off the heart. */
.pd-cta-lg{ height:52px; padding:0 26px 0 22px; font-size:1.0625rem; gap:10px }
.pd-cta-lg .pd-heart{ width:20px; height:20px }
.pd-cta-lg .pd-cta-ring{ left:20px; width:24px; height:24px; margin-top:-12px }

/* Motion off: the button keeps every bit of its colour, depth and hover lift.
   Nothing that carries meaning is animation-only. */
@media(prefers-reduced-motion:reduce){
  .pd-cta-ring{ animation:none; opacity:.28 }
  .pd-cta .pd-ecg{ display:none }
  .pd-cta::after{ display:none }
  .pd-cta:hover .pd-heart,.pd-cta:focus-visible .pd-heart{ animation:none }
  .pd-cta{ transition:box-shadow .18s }
  .pd-cta:hover{ transform:none }
}
html[data-contrast="high"] .pd-cta{
  background:var(--coral-deep); border:2px solid #000; box-shadow:none;
}
html[data-contrast="high"] .pd-cta-ring{ display:none }
@media print{
  @page{ size:A4; margin:16mm 14mm; }

  html,body{background:#fff !important; color:#000 !important; font-size:11.5pt}
  body{overflow:visible !important}

  /* chrome that should never print */
  .site-header,.site-footer,.disclaimer,.cookie-bar,.overlay,.menu-toggle,.rd-wrap,
  .skip-link,.tsize,.mv-controls,.mv-hint,.mv-credit,.figure-stage,.land-ask,
  .search-wrap,.results,.se-steps,.se-back,.share-link,.art-banner,.sys-banner,
  .related,.find-hospital,.se-region,.choice-go{ display:none !important; }

  a{color:#000 !important; text-decoration:none}
  .tel-link{font-weight:700; text-decoration:none}
  h1,h2,h3{color:#000 !important; page-break-after:avoid; break-after:avoid}
  p,li,tr,img,svg,table{page-break-inside:avoid; break-inside:avoid}
  ul{page-break-inside:auto}

  .print-only{display:block !important}
  .print-foot{
    margin-top:14pt; padding-top:8pt; border-top:1px solid #999;
    font-size:8.5pt; color:#444; line-height:1.5;
  }

  /* ---------- static condition pages: no special mode needed ---------- */
  .art-page{max-width:100%}
  .art-page .crumbs, .art-page .art-tools, .art-page .art-back,
  .art-page .related, .art-page .find-hospital{display:none !important}
  .art-page h1{font-size:20pt}
  .art-page .redflag{background:#fff !important; border:2pt solid #000 !important; border-radius:0; padding:8pt 10pt}
  .art-page .redflag h2{color:#000 !important}
  .art-page .disc-box{background:#fff !important; border:1pt solid #000 !important; border-radius:0; font-size:9pt; color:#000 !important}
  .art-page .verified{background:#fff !important; border:1pt solid #000 !important; border-radius:0; color:#000 !important}
  .art-page .rich-block svg{max-width:100% !important; height:auto !important}

  /* ---------- article mode (the modal, on sistemi.html) ---------- */
  body.printing > *:not(.modal){ display:none !important; }
  body.printing .modal{
    position:static !important; transform:none !important;
    width:100% !important; max-width:100% !important; max-height:none !important;
    box-shadow:none !important; border:0 !important; border-radius:0 !important;
    opacity:1 !important; pointer-events:auto !important; overflow:visible !important;
  }
  body.printing .modal-head{
    border-bottom:2px solid #000; padding:0 0 8pt; margin-bottom:12pt;
  }
  body.printing .modal-head .m-back,
  body.printing .modal-head .m-close,
  body.printing .modal-head .m-ic{display:none !important}
  body.printing .modal-head h2{font-size:20pt}
  body.printing .m-kick{font-size:9pt; color:#555 !important}
  body.printing .m-kick .crumb{background:none !important; border:0 !important; padding:0 !important; color:#555 !important}
  body.printing .modal-body{padding:0 !important; overflow:visible !important; max-height:none !important}

  /* boxes must survive greyscale printers → outline, not fill */
  body.printing .redflag{
    background:#fff !important; border:2pt solid #000 !important; border-radius:0;
    padding:8pt 10pt; margin-top:10pt;
  }
  body.printing .redflag h3{color:#000 !important}
  body.printing .disc-box{
    background:#fff !important; border:1pt solid #000 !important; border-radius:0;
    padding:8pt 10pt; font-size:9pt; color:#000 !important;
  }
  body.printing .ref-table{width:100%; border-collapse:collapse}
  body.printing .ref-table td{border:.5pt solid #999; padding:4pt 6pt}
  /* Background tints do not print. The shape markers do — that is the whole
     point of them. Keep them visible and give the row a printable weight. */
  body.printing .ref-table td.sev{width:22pt; text-align:center}
  body.printing .ref-table td.sev svg{width:11pt; height:11pt; color:#000 !important}
  body.printing .ref-table .bad td{font-weight:700}
  body.printing .ref-legend{display:flex !important; gap:4pt 12pt; font-size:8pt; color:#000; margin-top:4pt}
  body.printing .ref-legend svg{width:9pt; height:9pt; color:#000 !important}
  body.printing .verified{
    background:#fff !important; border:1pt solid #000 !important; border-radius:0;
    color:#000 !important; padding:5pt 8pt;
  }
  body.printing .rich-block{max-width:100%}
  body.printing .rich-block svg{max-width:100% !important; height:auto !important}

  /* ---------- visit-sheet mode ---------- */
  body.printing-visit > *:not(#vpSheet){ display:none !important; }
  body.printing-visit #vpSheet{
    display:block !important; position:static !important;
    border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important;
    background:#fff !important;
  }
}


/* =====================================================================
   ПОДГОТОВКА ЗА ПРЕГЛЕД — visit-preparation form + printable sheet
   ===================================================================== */
.vp-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow); margin-bottom:20px}
.vp-h{font-size:24px; color:var(--teal-deep); margin:10px 0 6px}
.vp-sub{color:var(--muted); font-size:14.5px; margin:0 0 18px}
.vp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:14px}
.vp-f{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.vp-f > span{font-weight:600; font-size:14.5px; color:var(--ink)}
.vp-f > span small{font-weight:400; color:var(--muted)}
.vp-f input[type=text], .vp-f input[type=number], .vp-f select, .vp-f textarea{
  font:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:11px 14px; width:100%;
}
.vp-f input:focus, .vp-f select:focus, .vp-f textarea:focus{border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(14,124,139,.15)}
.vp-f textarea{resize:vertical; min-height:64px}
.vp-f input[type=text] + input[type=text]{margin-top:8px}
.vp-full{grid-column:1/-1}
.vp-f input[type=range]{width:100%; accent-color:var(--teal); height:32px}
.vp-scale{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted)}

.vp-chips{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px; min-height:10px}
.vp-chip{display:inline-flex; align-items:center; gap:7px; background:var(--mint); border:1px solid var(--sky);
  color:var(--teal-deep); border-radius:100px; padding:7px 8px 7px 14px; font-size:14px}
.vp-chip button{border:0; background:rgba(14,124,139,.14); color:var(--teal-deep); width:22px; height:22px;
  border-radius:100px; cursor:pointer; font-size:15px; line-height:1; font-family:inherit}
.vp-chip button:hover{background:var(--coral); color:#fff}
.vp-empty{color:var(--muted); font-size:14px; margin:0}
.vp-add{display:flex; gap:8px}
.vp-add input{flex:1; font:inherit; border:1px solid var(--line); border-radius:100px; padding:10px 16px}
.vp-add .btn{flex:0 0 auto}

/* red-flag block: quiet until it isn't */
.vp-redflag{background:#FFF9F8; border:1px solid #F6D2CF; border-radius:16px; padding:16px 18px; margin-bottom:20px}
.vp-redflag.hot{background:#FFF1EF; border-color:var(--coral); border-width:2px}
.vp-redflag h3{color:var(--coral-deep); font-size:17px; margin:0 0 4px}
.vp-redflag > p{margin:0 0 10px; font-size:14px; color:#3A4F55}
.vp-redflag ul{list-style:none; margin:0; padding:0}
.vp-redflag li{margin:0 0 6px}
.vp-redflag label{display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14.5px; line-height:1.45}
.vp-redflag input[type=checkbox]{width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--coral-deep)}
.vp-rf-out{margin-top:12px; background:var(--coral-deep); color:#fff; border-radius:12px; padding:12px 14px; font-size:14.5px; line-height:1.5}
.vp-rf-out .tel-link{color:#fff}

.vp-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.vp-actions .btn{font-size:15.5px; padding:12px 22px}
.vp-priv{font-size:12.5px; color:var(--muted); margin:12px 0 0}

/* sticky basket bar */
.vp-bar{position:sticky; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:100px;
  padding:10px 10px 10px 20px; margin:18px 0 8px; box-shadow:0 -6px 24px rgba(10,90,102,.12); font-weight:600; color:var(--teal-deep)}
@media(max-width:480px){ .vp-bar{border-radius:16px; flex-direction:column; align-items:stretch; padding:12px; text-align:center} }

/* ---- the printed A4 sheet ---- */
.vs{color:#000; font-size:11pt; line-height:1.5}
.vs-head{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2pt solid #000; padding-bottom:8pt; margin-bottom:12pt}
.vs-head h1{font-size:19pt; margin:0}
.vs-head p{margin:2pt 0 0; font-size:9.5pt; color:#444}
.vs-brand{text-align:right; font-weight:700; font-size:10pt; line-height:1.3}
.vs-brand small{font-weight:400; color:#555; font-size:8.5pt}
.vs h2{font-size:12pt; margin:14pt 0 5pt; padding-bottom:2pt; border-bottom:.5pt solid #999}
.vs-alert{border:2.5pt solid #000; padding:8pt 10pt; margin-bottom:12pt}
.vs-alert ul{margin:5pt 0 0; padding-left:16pt}
.vs-t{width:100%; border-collapse:collapse; margin:4pt 0}
.vs-t th{text-align:left; width:34%; vertical-align:top; font-weight:600; padding:5pt 8pt 5pt 0; border-bottom:.5pt solid #ccc}
.vs-t td{padding:5pt 0; border-bottom:.5pt solid #ccc}
.vs-p{margin:4pt 0}
.vs-muted{color:#666}
.vs-syms{columns:2; column-gap:18pt; margin:4pt 0; padding-left:16pt}
.vs-syms li{break-inside:avoid; margin-bottom:2pt}
.vs-q{margin:4pt 0; padding-left:16pt}
.vs-q li{margin-bottom:4pt}
.vs-line{border-bottom:.5pt solid #aaa; height:17pt}
.vs-foot{margin-top:16pt; padding-top:7pt; border-top:1pt solid #000; font-size:8.5pt; color:#333; line-height:1.5}


/* ---- Contrast fix #2 -------------------------------------------------
   White text on --coral (#EF5350) measures 3.49:1 — that's fine for large
   display type but FAILS WCAG AA for the 14.5px label on .btn-coral (the
   "Прашај доктор" CTA, which is on every page). --coral-deep gives 4.59:1.
   The hover state then goes darker still. Colour identity is unchanged. */
.btn-coral{background:var(--coral-deep); border-color:var(--coral-deep)}
.btn-coral:hover{background:#B82F29; border-color:#B82F29}