/* UMA · uma-rating.css — стилі сторінки рейтингу міста.
   Джерело: UMA-шаблон-рейтингу-v2.html (еталон), CSS перенесено 1:1, без правок.
   Шрифт Gilroy підключає тема; лінк Google Fonts з еталона свідомо НЕ перенесено (він був для прев'ю).
   Підключається з uma-render.php лише на taxonomy-city і single-clinic. */
/* ── ТОКЕНИ САЙТУ ─────────────────────────────────────────── */
:root{
  --navy:#00173D; --navy-2:#19325C;
  --ink:#0B0D1C; --ink-2:#16181A;
  --blue:#002664; --blue-soft:#2B4E8F;
  --muted:#69727D; --pale:#D1D6E1;
  --gold:#FFAE4C; --gold-deep:#E8912A;
  --cell:#ECF3F8; --cell-hi:#C0D8FC;
  --cream:#F9FAF5; --line:#E3E9F0;
  --warn:#E38B4A;
  --r-sm:6px; --r-md:14px; --r-lg:26px;
  --display:Gilroy,Montserrat,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:Gilroy,Manrope,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 10px 34px rgba(0,23,61,.10);
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.68 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:0 62px}
@media(max-width:900px){.wrap{padding:0 20px}}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ── SCROLL PROGRESS ──────────────────────────────────────── */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:60}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#00173D 0%,#01204f 55%,#00173D 100%);color:#fff;
  padding:58px 0 128px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-8%;top:10%;width:54%;height:130%;
  background:linear-gradient(135deg,rgba(255,174,76,.12),rgba(255,255,255,0));
  transform:skewY(-8deg);pointer-events:none}
.hero:after{content:"";position:absolute;left:-6%;bottom:-40%;width:38%;height:90%;
  background:radial-gradient(closest-side,rgba(43,78,143,.35),rgba(0,0,0,0));pointer-events:none}
.crumbs{font-size:13px;color:var(--pale);opacity:.85;margin-bottom:44px;position:relative}
.crumbs a{color:var(--pale)}
h1{font-family:var(--display);font-size:clamp(30px,4.6vw,54px);line-height:1.12;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;margin:0;position:relative;max-width:16em;text-wrap:balance}
h1 .dim{color:#8d9ab5}
.hero-sub{position:relative;margin:18px 0 0;max-width:46em;font-size:16px;color:var(--pale)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:34px;position:relative}
.hstat{display:flex;align-items:baseline;gap:8px}
.hstat b{font-family:var(--display);font-size:30px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.hstat span{font-size:13px;color:var(--pale);opacity:.85}
.hstat .g{color:var(--gold)}
.hero-date{margin-left:auto;font-size:13px;color:var(--pale);background:rgba(4,26,62,.5);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 15px}
.hero-date b{color:#fff;font-weight:600}
@media(max-width:720px){.hero{padding:44px 0 118px}.hero-date{margin-left:0}}
/* декоративна колонада рейтингу (правий бік) — 13 клінік,висота = сума балів */
.hero>.wrap{position:relative;z-index:1}
.hero-cols{position:absolute;right:0;bottom:96px;z-index:0;pointer-events:none;
  width:min(46%,600px);height:min(56%,286px);
  display:flex;align-items:flex-end;justify-content:flex-end;gap:clamp(6px,.9vw,13px);
  padding-right:clamp(24px,4vw,68px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);
          mask-image:linear-gradient(90deg,transparent,#000 24%)}
.hero-cols i{position:absolute;right:3%;bottom:-34%;width:84%;height:150%;
  background:radial-gradient(closest-side,rgba(255,174,76,.12),rgba(0,0,0,0))}
.hero-cols u{position:absolute;left:0;right:0;bottom:0;height:1px;text-decoration:none;
  background:linear-gradient(90deg,rgba(174,199,255,0),rgba(174,199,255,.55));
  box-shadow:0 0 16px 1px rgba(140,175,255,.18)}
.hero-cols b{position:relative;overflow:hidden;flex:1 1 0;max-width:38px;height:var(--h);
  border-radius:7px 7px 2px 2px;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(151,183,255,.37),rgba(43,78,143,.10));
  border-top:1px solid rgba(190,214,255,.5)}
.hero-cols .au{background:linear-gradient(180deg,rgba(255,201,110,.52),rgba(255,174,76,.08));
  border-top-color:rgba(255,230,175,.92);box-shadow:0 0 20px rgba(255,174,76,.18)}
@media(max-width:900px){.hero-cols{display:none}}

/* поява при завантаженні */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero .crumbs,.js .hero h1,.js .hero .hero-sub,.js .hero .hero-meta{animation:rise .7s var(--ease) both}
.js .hero h1{animation-delay:.08s}.js .hero .hero-sub{animation-delay:.16s}.js .hero .hero-meta{animation-delay:.24s}

/* ── ПОДІУМ ТОП-3 ─────────────────────────────────────────── */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-78px 0 0;position:relative;z-index:5}
.pod{border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px 20px;
  display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-top-width:4px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pod:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,23,61,.16)}
.pod-top{display:flex;align-items:center;gap:12px}
.medal{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:19px;border:3px solid #fff;
  box-shadow:0 4px 12px rgba(0,23,61,.18)}
.pod .rk{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
/* золото */
.pod.g1{background:linear-gradient(175deg,#FFF4DE 0%,#fff 62%);border-color:#F3D9A4;border-top-color:var(--gold)}
.pod.g1 .rk{color:#B96F14}
.pod.g1 .medal{background:linear-gradient(135deg,#FFE9B0 0%,#FFC65C 45%,#E8912A 100%);color:#5b4104}
.pod.g1 .score b{font-size:42px}
/* срібло */
.pod.g2{background:linear-gradient(175deg,#F2F5FA 0%,#fff 62%);border-color:#D9E0EA;border-top-color:#B9C3D2}
.pod.g2 .rk{color:#61708A}
.pod.g2 .medal{background:linear-gradient(135deg,#FDFEFF 0%,#D9DFE8 50%,#AEB9C9 100%);color:#3d4756}
/* бронза */
.pod.g3{background:linear-gradient(175deg,#FAEFDF 0%,#fff 62%);border-color:#EAD3B8;border-top-color:#D9A96F}
.pod.g3 .rk{color:#8A5A24}
.pod.g3 .medal{background:linear-gradient(135deg,#F2D5B4 0%,#DBA671 50%,#B9793B 100%);color:#4F3113}
.pod h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0;color:var(--ink-2)}
.pod h3 a{color:inherit}
.pod .score{display:flex;align-items:baseline;gap:7px;margin-top:auto}
.pod .score b{font-family:var(--display);font-size:38px;font-weight:800;color:var(--blue);
  line-height:1;font-variant-numeric:tabular-nums}
.pod .score span{font-size:12px;color:var(--muted)}
.pod .why1{font-size:13px;color:var(--muted);margin:0}
@media(max-width:820px){.podium{grid-template-columns:1fr;margin-top:-66px}
  .pod .score b,.pod.g1 .score b{font-size:32px}}

/* ── ЛИПКА НАВІГАЦІЯ СЕКЦІЙ ───────────────────────────────── */
.secnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);margin-top:26px}
.secnav .in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.secnav .in::-webkit-scrollbar{display:none}
.secnav a{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--muted);
  padding:8px 15px;border-radius:999px;transition:color .2s,background .2s;white-space:nowrap}
.secnav a:hover{color:var(--blue);background:var(--cell);text-decoration:none}
.secnav a.on{color:#fff;background:var(--blue)}

/* ── ЗАГОЛОВКИ СЕКЦІЙ ─────────────────────────────────────── */
.sec{font-family:var(--display);font-size:clamp(22px,3.2vw,33px);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--blue);margin:0 0 20px;text-wrap:balance}
.sec .dim{color:#93A0BD}
h2.plain{font-family:var(--display);font-size:clamp(21px,2.8vw,30px);font-weight:700;color:var(--ink-2);
  margin:0 0 16px;text-wrap:balance}
h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0;color:var(--ink-2)}
section{scroll-margin-top:86px;padding-top:56px}
.sechead{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px}
.sechead .sec,.sechead h2{margin:0}

/* ── ANSWER + TRUST ───────────────────────────────────────── */
.answer{background:var(--cream);border:1px solid #EFE4CB;border-radius:var(--r-lg);
  padding:24px 32px 26px;margin:40px 0 0;max-width:720px}
.answer .eyebrow{display:block;font-family:var(--display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:#A4650F;margin:0 0 14px}
.answer p{margin:0 0 12px;max-width:none}
.answer p:last-child{margin:0}
.answer .ans-note{font-size:14px;color:var(--muted)}
.answer p:last-child{margin:0}
.answer b{color:var(--blue)}
.trust{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0}
.chip{font-size:13px;background:var(--cell);border-radius:999px;padding:7px 15px;color:var(--muted)}
.chip b{color:var(--blue);font-weight:700}

/* ── ТАБЛИЦЯ ──────────────────────────────────────────────── */
.tsearch{position:relative;display:none}
.js .tsearch{display:block}
.tsearch input{font:14px var(--body);color:var(--ink-2);background:var(--cell);border:1px solid transparent;
  border-radius:999px;padding:10px 18px 10px 38px;width:240px;max-width:60vw;transition:border-color .2s,background .2s}
.tsearch input:focus{outline:none;border-color:var(--blue);background:#fff}
.tsearch:before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-54%);
  font-size:17px;color:var(--muted)}
.tablewrap{overflow-x:auto;padding-bottom:8px;position:relative}
table.rk{border-collapse:separate;border-spacing:6px;width:100%;min-width:920px;font-size:15px}
.rk thead th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;
  padding:0 14px 10px;vertical-align:bottom;cursor:pointer;user-select:none;line-height:1.3;
  transition:color .2s}
.rk thead th:first-child{position:sticky;left:0;background:#fff;z-index:3}
.rk thead th:hover{color:var(--blue)}
.rk thead th .arr{opacity:.3;font-size:10px;margin-left:3px}
.rk thead th.sorted{color:var(--blue)}
.rk thead th.sorted .arr{opacity:1;color:var(--gold-deep)}
.rk tbody td,.rk tbody th{background:var(--cell);border-radius:var(--r-sm);padding:15px 14px;
  white-space:nowrap;vertical-align:middle;color:var(--ink-2);font-variant-numeric:tabular-nums;
  transition:background .25s}
.rk tbody th.clinic{white-space:normal;font-weight:600;text-align:left;min-width:230px;position:sticky;left:0;z-index:2;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.rk tbody th.clinic a{color:var(--ink-2)}
.rk.scrolled tbody th.clinic{box-shadow:inset 0 0 0 1px var(--line),8px 0 14px -8px rgba(0,23,61,.18)}
.plc{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-family:var(--display);font-weight:800;font-size:15px;margin-right:11px;vertical-align:middle;
  background:linear-gradient(135deg,#f2f5f9,#e6ecf4);color:var(--blue)}
tr.p1 .plc{background:linear-gradient(135deg,#FFE9B0,#FFC65C);color:#5b4104}
tr.p2 .plc{background:linear-gradient(135deg,#F1F3F6,#D3DAE3);color:#3d4756}
tr.p3 .plc{background:linear-gradient(135deg,#F5E2CE,#E0B58A);color:#5c3d1c}
.rk td.total{background:var(--cell-hi);font-weight:700;min-width:120px}
.rk td.total .tbar{display:block;height:4px;border-radius:2px;background:rgba(0,38,100,.14);
  margin-top:6px;overflow:hidden}
.rk td.total .tbar i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;
  transition:width 1.1s var(--ease)}
.rk tbody tr{transition:transform .45s var(--ease)}
.rk tbody tr:hover td{background:#e2ecf7}
.rk tbody tr:hover th.clinic{background:#f4f8fd}
.rk tbody tr:hover td.total{background:#b3ccf7}
.note-under{font-size:13px;color:var(--muted);margin-top:10px;max-width:70ch}
.nores{display:none;font-size:14px;color:var(--muted);background:var(--cream);
  border-radius:var(--r-md);padding:16px 20px;margin-top:8px}

/* мобільний режим: таблиця → картка на клініку (горизонтальний скрол зникає) */
@media(max-width:760px){
  #tw{overflow-x:visible;padding-bottom:0}   /* лише обгортка рейтингу: клас .tablewrap спільний із таблицею методології (min-width:620px) */
  table.rk{display:block;min-width:0;border-spacing:0;font-size:15px}
  .rk thead{display:none}
  .rk tbody{display:block}
  .rk tbody tr{display:block;margin:0 0 14px;border:1px solid var(--line);
    border-radius:var(--r-md);overflow:hidden;background:#fff}
  .rk tbody th.clinic{display:flex;align-items:center;position:static;min-width:0;
    border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);padding:14px 16px}
  .rk.scrolled tbody th.clinic{box-shadow:none}
  .rk tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    border-radius:0;padding:12px 16px;white-space:normal;font-weight:600}
  .rk tbody td:before{content:attr(data-label);font-weight:500;color:var(--muted);
    font-size:14px;line-height:1.35;text-align:left}
  .rk td.total{min-width:0;font-size:17px}
  .rk td.total .tbar{display:none}
  .rk tbody tr:hover td,.rk tbody tr:hover td.total,.rk tbody tr:hover th.clinic{background:inherit}
  .rk tbody th.clinic a{display:inline-block;padding:7px 0}
}

/* ── ЛІНК-СІТКА НАПРЯМКІВ ─────────────────────────────────── */
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
.links a{background:var(--cell);border-radius:var(--r-md);padding:14px 18px;font-size:14px;
  color:var(--blue);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;
  transition:background .2s,transform .25s var(--ease)}
.links a:after{content:"→";opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease)}
.links a:hover{background:#dce7f4;text-decoration:none;transform:translateY(-2px)}
.links a:hover:after{opacity:.8;transform:none}

/* ── КАРТКИ КЛІНІК ────────────────────────────────────────── */
.clinic-card{background:var(--cream);border-radius:var(--r-lg);padding:30px 34px;margin:18px 0;scroll-margin-top:96px}
@media(max-width:640px){.clinic-card{padding:22px 18px}}
.chead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.badge{flex:0 0 56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:22px;
  background:linear-gradient(135deg,#FFE9B0,#FFC65C);color:#5b4104}
.badge.s{background:linear-gradient(135deg,#F1F3F6,#D3DAE3);color:#3d4756}
.badge.b{background:linear-gradient(135deg,#F5E2CE,#E0B58A);color:#5c3d1c}
.badge.n{background:linear-gradient(135deg,#f2f5f9,#e6ecf4);color:var(--blue)}
.chead .meta{flex:1 1 260px;min-width:0}
.chead .sub{font-size:14px;color:var(--muted);margin-top:5px}
.pts{flex:0 0 auto;text-align:right}
.pts b{display:block;font-family:var(--display);font-size:36px;line-height:1;font-weight:800;
  color:var(--blue);font-variant-numeric:tabular-nums}
.pts span{font-size:12px;color:var(--muted)}
.bars{margin:22px 0 0;display:grid;gap:9px}
.bar{display:grid;grid-template-columns:190px 1fr 74px;gap:14px;align-items:center;font-size:14px}
.bar .t{color:var(--muted)}
.track{height:8px;background:#e2e7ee;border-radius:4px;overflow:hidden}
.fill{display:block;height:100%;width:var(--w,0);background:var(--blue);border-radius:4px;
  transition:width 1.1s var(--ease)}
.fill.warn{background:var(--warn)}
.fill.gold{background:var(--gold)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
@media(max-width:640px){.bar{grid-template-columns:118px 1fr 64px;gap:9px;font-size:13px}}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;font-size:14px}
@media(max-width:640px){.pc{grid-template-columns:1fr}}
.lbl{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.pc ul{margin:8px 0 0;padding-left:20px}
.pc li{margin:4px 0;max-width:52ch}
.why{margin-top:20px;font-size:14px;color:var(--ink-2);background:#fff;
  border-radius:var(--r-md);padding:14px 18px;border-left:3px solid var(--gold);max-width:75ch}
.specs{margin-top:16px}
.specs a,.specs span{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;margin:4px 4px 0 0;font-size:13px;color:var(--blue);transition:background .2s,border-color .2s}
.specs span{color:var(--muted)}
.specs a:hover{background:var(--cell);border-color:transparent;text-decoration:none}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ── ПАРТНЕРСЬКИЙ БЛОК (після таблиці) ────────────────────── */
/* навмисно нейтральний: без золота й медальної мови,щоб не читався як позиція в рейтингу */
.promo{margin:34px 0 0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:14px 20px 18px;min-height:134px}
.promo-tag{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);background:var(--cell);
  border-radius:999px;padding:4px 11px;margin-bottom:13px}
.promo-in{display:grid;grid-template-columns:132px 1fr auto;gap:22px;align-items:center}
.promo-logo{width:132px;height:66px;border:1px dashed var(--line);border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:11px;line-height:1.35;text-align:center;color:var(--muted)}
.promo-txt b{display:block;font-family:var(--display);font-size:16px;font-weight:700;
  color:var(--ink-2);margin-bottom:4px}
.promo-txt span{display:block;font-size:14px;color:var(--muted);max-width:62ch}
.promo-cta{font-size:14px;font-weight:700;color:var(--blue);border:1px solid var(--line);
  border-radius:999px;padding:10px 20px;white-space:nowrap;transition:background .2s,border-color .2s}
.promo-cta:hover{background:var(--cell);border-color:transparent;text-decoration:none}
@media(max-width:760px){.promo-in{grid-template-columns:1fr;gap:14px}
  .promo-logo{width:100%;max-width:180px}.promo-cta{justify-self:start}}

/* ── БАЛИ ЗА БЛОКАМИ (акордеони) ──────────────────────────── */
.acc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin:14px 0;overflow:hidden}
.acc-h{display:flex;align-items:center;gap:16px;width:100%;padding:20px 24px;background:#fff;
  border:none;cursor:pointer;font:inherit;text-align:left;transition:background .2s}
.acc-h:hover{background:var(--cream)}
.acc-t{flex:1 1 auto;min-width:0}
.acc-t b{display:block;font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink-2)}
.acc-t small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.acc-lead{flex:0 1 auto;font-size:13px;color:var(--muted);text-align:right}
.acc-lead b{color:var(--blue);font-weight:700}
.acc-x{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cell);
  color:var(--blue);font-size:20px;font-weight:700;transition:transform .35s var(--ease),background .2s}
.acc.open .acc-x{transform:rotate(45deg);background:var(--gold);color:#4A3405}
.acc-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--ease)}
.js .acc-b{grid-template-rows:0fr}
.js .acc.open .acc-b{grid-template-rows:1fr}
.acc-in{overflow:hidden;min-height:0}
.acc-pad{padding:2px 24px 26px}
.bk-intro{margin:0 0 16px;max-width:75ch;color:var(--ink-2);font-size:14.5px}
.bk-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin:0 0 18px}
.bk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bk-legend em{font-style:normal;color:var(--ink-2);font-weight:600;margin-left:5px}
.bk-chart{display:grid;gap:7px}
.bk-row{display:grid;grid-template-columns:172px 1fr 48px;gap:12px;align-items:center;font-size:13.5px}
.bk-name{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-name b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;
  background:var(--cell);color:var(--blue);font-size:12px;font-weight:700;margin-right:8px;vertical-align:-5px}
.bk-row.lead .bk-name b{background:linear-gradient(135deg,#FFE9B0,#FFC65C);color:#5b4104}
.bk-bar{display:flex;height:26px;border-radius:6px;overflow:hidden;width:var(--bw,100%);transition:width .9s var(--ease)}
.bk-bar i{display:grid;place-items:center;font-style:normal;min-width:0;overflow:hidden;
  container-type:inline-size}
.bk-bar i span{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@container (max-width:23px){.bk-bar i span{visibility:hidden}}
.bk-sum{font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;text-align:right}
.s1{background:#002664;color:#fff}
.s2{background:#FFAE4C;color:#4A3405}
.s3{background:#7D96C4;color:#0B1D3A}
.s4{background:#E38B4A;color:#fff}
.sb{background:linear-gradient(135deg,#FFC65C,#E8912A);color:#4A3405}
.bk-crits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:20px}
.bk-crits .crit b{display:flex;justify-content:space-between;gap:8px}
.bk-crits .crit b em{font-style:normal;color:var(--blue);white-space:nowrap;font-weight:700}
@media(max-width:680px){
  .bk-row{grid-template-columns:110px 1fr 42px;gap:8px;font-size:12.5px}
  .acc-lead{display:none}
  .acc-h{padding:16px 18px}
  .acc-pad{padding:2px 18px 22px}
}

/* ── ЯК ВІДБИРАЛИ ─────────────────────────────────────────── */
.criteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:18px 0 16px}
.crit{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;font-size:14px}
.crit .ck{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--cell-hi);color:var(--blue);font-weight:800;font-size:14px;margin-bottom:10px}
.crit b{display:block;color:var(--ink-2);margin-bottom:4px}
.crit span{color:var(--muted)}

/* ── МЕТОДОЛОГІЯ: СКЛАДЕНА ШКАЛА ──────────────────────────── */
.mbar{display:flex;height:46px;border-radius:var(--r-md);overflow:hidden;margin:22px 0 10px}
.mseg{display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;min-width:0;transform-origin:left;
  transition:flex-grow 1s var(--ease)}
.mseg.m1{background:#002664}.mseg.m2{background:#2B4E8F}.mseg.m3{background:#5B79B4}.mseg.m4{background:#8FA6CD}
.mlegend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted);margin-bottom:8px}
.mlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mlegend .bonus i{background:var(--gold)}
table.mt{border-collapse:separate;border-spacing:6px;width:100%;min-width:620px;font-size:15px}
.mt th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:0 14px 8px}
.mt td{background:var(--cell);border-radius:var(--r-sm);padding:14px;vertical-align:middle;color:var(--ink-2)}
.mt td.hi{background:var(--cell-hi);font-weight:700;white-space:nowrap}
.mt td.nm{font-weight:600;white-space:nowrap}

/* ── FAQ ──────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;color:var(--ink-2);
  display:flex;gap:12px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";color:var(--gold-deep);font-weight:800;font-size:19px;
  transition:transform .3s var(--ease);flex:0 0 auto}
details[open] summary:before{content:"−"}
details .fbody{margin:12px 0 0 31px;color:var(--muted);max-width:68ch}
details[open] .fbody{animation:faq .35s var(--ease)}
@keyframes faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── DISCLOSURE / DEVNOTE / FOOTER ────────────────────────── */
.disclosure{background:var(--navy);color:var(--pale);border-radius:var(--r-lg);
  padding:28px 34px;font-size:14px;margin-top:44px;max-width:75em}
.disclosure b{color:#fff}
.disclosure a{color:var(--gold)}
.devnote{background:#FFF4DC;border:1px solid #F0CE8A;border-radius:var(--r-md);
  padding:14px 18px;font-size:13.5px;color:#6B5210;margin:40px 0 0}
footer{margin:70px 0 90px}

/* ── SCROLL-REVEAL (активний лише з JS: клас .js на body) ── */
.rev{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rev{opacity:0;transform:translateY(26px)}
.js .rev.go{opacity:1;transform:none}

/* ── НАГОРУ ───────────────────────────────────────────────── */
#totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;font-size:19px;cursor:pointer;z-index:55;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s,background .2s;box-shadow:var(--shadow)}
#totop.show{opacity:1;pointer-events:auto;transform:none}
#totop:hover{background:var(--navy-2)}

/* ── ДОДАТКОВІ АНІМАЦІЇ ───────────────────────────────────── */
/* атмосфера hero: повільний дрейф променя і пульс сяйва */
@keyframes heroDrift{0%,100%{transform:skewY(-8deg) translateX(0)}50%{transform:skewY(-8deg) translateX(-46px)}}
.hero:before{animation:heroDrift 19s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:.55}50%{opacity:1}}
.hero:after{animation:heroPulse 13s ease-in-out infinite}
/* колонада: підйом стовпчиків,тихе «дихання»,золотий полиск на топ-3 */
@keyframes colRise{from{transform:scaleY(.04);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes colBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.045)}}
@keyframes colSheen{0%{transform:translateY(115%);opacity:0}22%{opacity:1}72%,100%{transform:translateY(-115%);opacity:0}}
.js .hero-cols b{
  animation-name:colRise,colBreathe;
  animation-duration:.95s,calc(7s + var(--i)*.42s);
  animation-timing-function:var(--ease),ease-in-out;
  animation-fill-mode:both,none;
  animation-iteration-count:1,infinite;
  animation-delay:calc(.2s + var(--i)*.055s),calc(1.3s + var(--i)*.12s)}
.js .hero-cols .au:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,236,196,0) 34%,rgba(255,236,196,.5) 50%,rgba(255,236,196,0) 66%);
  animation:colSheen 5.6s ease-in-out infinite;animation-delay:calc(1.6s + var(--i)*.55s)}

/* шимер золота на бейджах топ-1 */
@keyframes shine{0%{background-position:180% 0,0 0}55%,100%{background-position:-80% 0,0 0}}
tr.p1 .plc,.badge{background-image:linear-gradient(110deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,#FFE9B0,#FFC65C);background-size:230% 100%,100% 100%;animation:shine 6.5s ease-in-out infinite}

.pod.g1 .medal{background-image:linear-gradient(110deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,#FFE9B0 0%,#FFC65C 45%,#E8912A 100%);background-size:230% 100%,100% 100%;animation:shine 6.5s ease-in-out infinite}
/* стаггер-поява: чипи довіри,лінк-сітки,рядки таблиці,подіум,бейджі карток */
.js .trust .chip,.js .links a,.js #rk tbody tr,.js .pod,.js .clinic-card .badge,.js .criteria .crit{opacity:0}
.js .trust.go .chip{opacity:1;animation:rise .5s var(--ease) backwards}
.js .links.go a{opacity:1;animation:rise .55s var(--ease) backwards}
@keyframes rowIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.js #rk.go tbody tr{opacity:1;animation:rowIn .45s var(--ease) backwards}
.js .pod.go{opacity:1;animation:rise .6s var(--ease) backwards}
@keyframes pop{from{opacity:0;transform:scale(.5) rotate(-6deg)}to{opacity:1;transform:none}}
.js .clinic-card.go .badge{opacity:1;animation:pop .55s cubic-bezier(.34,1.56,.64,1) .15s backwards}
.js .criteria.go .crit{opacity:1;animation:rise .5s var(--ease) backwards}
.js .trust.go .chip:nth-child(1){animation-delay:0ms}
.js .trust.go .chip:nth-child(2){animation-delay:60ms}
.js .trust.go .chip:nth-child(3){animation-delay:120ms}
.js .trust.go .chip:nth-child(4){animation-delay:180ms}
.js .trust.go .chip:nth-child(5){animation-delay:240ms}
.js .trust.go .chip:nth-child(6){animation-delay:300ms}
.js .links.go a:nth-child(1){animation-delay:0ms}
.js .links.go a:nth-child(2){animation-delay:40ms}
.js .links.go a:nth-child(3){animation-delay:80ms}
.js .links.go a:nth-child(4){animation-delay:120ms}
.js .links.go a:nth-child(5){animation-delay:160ms}
.js .links.go a:nth-child(6){animation-delay:200ms}
.js .links.go a:nth-child(7){animation-delay:240ms}
.js .links.go a:nth-child(8){animation-delay:280ms}
.js .links.go a:nth-child(9){animation-delay:320ms}
.js .links.go a:nth-child(10){animation-delay:360ms}
.js .links.go a:nth-child(11){animation-delay:400ms}
.js .links.go a:nth-child(12){animation-delay:440ms}
.js #rk.go tbody tr:nth-child(1){animation-delay:0ms}
.js #rk.go tbody tr:nth-child(2){animation-delay:45ms}
.js #rk.go tbody tr:nth-child(3){animation-delay:90ms}
.js #rk.go tbody tr:nth-child(4){animation-delay:135ms}
.js #rk.go tbody tr:nth-child(5){animation-delay:180ms}
.js #rk.go tbody tr:nth-child(6){animation-delay:225ms}
.js #rk.go tbody tr:nth-child(7){animation-delay:270ms}
.js #rk.go tbody tr:nth-child(8){animation-delay:315ms}
.js #rk.go tbody tr:nth-child(9){animation-delay:360ms}
.js #rk.go tbody tr:nth-child(10){animation-delay:405ms}
.js #rk.go tbody tr:nth-child(11){animation-delay:450ms}
.js #rk.go tbody tr:nth-child(12){animation-delay:495ms}
.js #rk.go tbody tr:nth-child(13){animation-delay:540ms}
.js .podium .pod.go:nth-child(1){animation-delay:0s}
.js .podium .pod.go:nth-child(2){animation-delay:.12s}
.js .podium .pod.go:nth-child(3){animation-delay:.24s}
.js .criteria.go .crit:nth-child(1){animation-delay:0ms}
.js .criteria.go .crit:nth-child(2){animation-delay:90ms}
.js .criteria.go .crit:nth-child(3){animation-delay:180ms}

/* плавне розкриття FAQ у браузерах з interpolate-size; інші — миттєво,як і було */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
  details[open]::details-content{height:auto}
}

/* мікро-жести */
#totop.show:hover{transform:translateY(-3px)}
.acc-h:hover .acc-x{transform:scale(1.1)}
.acc.open .acc-h:hover .acc-x{transform:rotate(45deg) scale(1.1)}
#progress{box-shadow:0 0 8px rgba(255,174,76,.55)}

/* вузькі екрани: у смужкових рядках підпис іде НАД смужкою.
   Інакше найдовші назви («Пацієнтоорієнтованість»,«Shkiryak Clinic») або обрізаються,або налазять на смужку,а сама смужка лишається найвужчим елементом рядка. */
@media(max-width:560px){
  .clinic-card .bar{grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
  .clinic-card .bar .t{grid-column:1/-1;line-height:1.3}
  .clinic-card .bar .track{grid-column:1}
  .clinic-card .bar .v{grid-column:2}
  .pts{text-align:left;width:100%;margin-top:2px}
  .bk-row{grid-template-columns:1fr auto;gap:5px 10px}
  .bk-name{grid-column:1/-1;white-space:normal;overflow:visible;text-overflow:clip}
  .bk-bar{grid-column:1}
  .bk-sum{grid-column:2}
  summary{padding:6px 0}
}

/* таблиця методології на вузьких екранах — картками,як головна.
   Обгортку беремо як .tablewrap:not(#tw): клас спільний,а рейтингу свій режим уже заданий. */
@media(max-width:760px){
  .tablewrap:not(#tw){overflow-x:visible;padding-bottom:0}
  table.mt{display:block;min-width:0;border-spacing:0}
  .mt thead{display:none}
  .mt tbody{display:block}
  .mt tr{display:block;margin:0 0 12px;border:1px solid var(--line);
    border-radius:var(--r-md);overflow:hidden;background:#fff}
  .mt td{display:block;background:#fff;border-radius:0;padding:12px 16px;white-space:normal}
  .mt td:before{content:attr(data-label);display:block;color:var(--muted);
    font-size:13px;font-weight:600;margin-bottom:4px}
  .mt td.nm{background:var(--cell);border-bottom:1px solid var(--line);
    font-family:var(--display);font-size:16px;font-weight:700}
  .mt td.nm:before{content:none}
  .mt td.hi{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    background:var(--cell-hi)}
  .mt td.hi:before{margin:0;color:var(--blue)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  .js .trust .chip,.js .links a,.js #rk tbody tr,.js .pod,.js .clinic-card .badge,.js .criteria .crit{opacity:1}
  .fill,.rk td.total .tbar i{width:var(--w,100%)}
}


/* ── Ізоляція від теми Zakra (додано 02.09.2026) ─────────────────────
   Тема підключає свій CSS після нашого і перебиває голі селектори; крім того,
   наші section/footer витікали на хедер і футер Elementor. Усі голі селектори
   вище прив'язані до .uma-page (обгортка шаблону), а тут — точкові скиди. */
.uma-page .rk tbody td,.uma-page .rk tbody th{border:0}
.uma-page table.rk,.uma-page table.mt{margin:0}
.uma-page a:hover{color:inherit}
.uma-page .rk tbody th.clinic a:hover,.uma-page .pod h3 a:hover,.uma-page .clinic-card h3 a:hover{color:var(--blue)}
.uma-page h2,.uma-page h3{margin-top:0}
.uma-page .chead .meta h3{font-size:19px;margin:0}
.uma-page p{margin-top:0}