/* UMA · інтерактивна карта рейтингів (/reitynh-klinik/). Усе під .uma-map — тема Zakra й kit Elementor
   міняють дефолти button/ul/h2, тому кнопки й списки скидаються явно, стани — подвоєним класом. */
.uma-map{
  --uma-navy:#00173D; --uma-navy-2:#0B2C63; --uma-ink:#000215; --uma-muted:rgba(0,2,21,.62);
  --uma-mist:#ECF3F8; --uma-empty:#D3DFEC; --uma-empty-hot:#B7CBE2; --uma-gold:#D4A537; --uma-gold-2:#B8862B;
  --uma-faded:#E4EBF3; --uma-faded-ready:#8C9BB5;
  --uma-line:rgba(0,23,61,.10); --uma-head:Gilroy,'Urbanist',system-ui,sans-serif; --uma-body:Lato,system-ui,sans-serif;
  display:grid; grid-template-columns:minmax(280px,400px) minmax(0,1fr); gap:28px; align-items:start;
  max-width:1145px; margin:0 auto; color:var(--uma-ink); font-family:var(--uma-body);
}
.uma-map *,.uma-map *::before,.uma-map *::after{box-sizing:border-box}

/* ── список областей ─────────────────────────────── */
.uma-map .uma-list{background:var(--uma-mist); border-radius:24px; padding:32px; box-shadow:0 15px 35px rgba(0,23,61,.25)}
.uma-map .uma-list__title{margin:0 0 16px; font:600 24px/30px var(--uma-head); letter-spacing:.04em; text-transform:uppercase; color:var(--uma-navy)}
.uma-map .uma-list__items{list-style:none; margin:0; padding:0}
.uma-map .uma-reg{border-bottom:1px solid var(--uma-line); margin:0; padding:0}
.uma-map .uma-reg:last-child{border-bottom:0}
.uma-map .uma-reg__btn.uma-reg__btn{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 8px; border-radius:8px; cursor:pointer; font:400 16px/20px var(--uma-body); color:var(--uma-ink);
  transition:background-color .15s ease;
}
.uma-map .uma-reg__btn.uma-reg__btn:hover,.uma-map .uma-reg.is-hot .uma-reg__btn.uma-reg__btn{background:rgba(0,23,61,.06)}
.uma-map .uma-reg__btn.uma-reg__btn:focus-visible{outline:2px solid var(--uma-navy); outline-offset:1px}
.uma-map .uma-reg__name{flex:1 1 auto}
.uma-map .uma-reg--ready .uma-reg__name{font-weight:700; color:var(--uma-navy)}
.uma-map .uma-reg__chip{flex:none; font:600 12px/1 var(--uma-head); letter-spacing:.02em; padding:5px 8px; border-radius:99px;
  background:var(--uma-navy); color:#fff; font-variant-numeric:tabular-nums}
.uma-map .uma-reg__chev{flex:none; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.45; transition:transform .2s ease}
.uma-map .uma-reg.is-open .uma-reg__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.uma-map .uma-reg__body{padding:2px 8px 14px; font-size:14px; line-height:20px; color:var(--uma-muted)}
.uma-map .uma-reg__body p{margin:0 0 10px}
.uma-map .uma-cities{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:2px}
.uma-map .uma-cities li{margin:0; padding:0}
.uma-map .uma-cities .uma-c.uma-c{display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:8px; background:#fff;
  color:var(--uma-navy); text-decoration:none; font-weight:700}
.uma-map .uma-cities .uma-c.uma-c:hover,.uma-map .uma-cities .uma-c.uma-c:focus-visible{background:var(--uma-navy); color:#fff}
.uma-map .uma-cities small{font-size:13px; font-weight:400; opacity:.7; font-variant-numeric:tabular-nums}
.uma-map .uma-link.uma-link{color:var(--uma-navy); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.uma-map .uma-link.uma-link:hover{color:var(--uma-navy-2)}
.uma-map .uma-apply-btn.uma-apply-btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-block; padding:9px 16px; border-radius:99px;
  background:var(--uma-navy); color:#fff; font:600 14px/1 var(--uma-head); letter-spacing:.02em}
.uma-map .uma-apply-btn.uma-apply-btn:hover{background:var(--uma-navy-2)}
.uma-map .uma-apply-btn.uma-apply-btn:focus-visible{outline:2px solid var(--uma-gold); outline-offset:2px}

/* ── карта ───────────────────────────────────────── */
.uma-map .uma-stage{position:sticky; top:24px}
.uma-map .uma-stage__lede{margin:0 0 6px; font:600 13px/1.4 var(--uma-head); letter-spacing:.08em; text-transform:uppercase; color:var(--uma-gold-2)}
.uma-map .uma-stage__sum{margin:0 0 18px; font:500 20px/1.35 var(--uma-head); color:var(--uma-navy); text-wrap:balance}
.uma-map .uma-stage__sum b{font-weight:700}
.uma-map .uma-box{position:relative}
.uma-map svg.uma-svg{display:block; width:100%; height:auto; overflow:hidden}
/* межі — завжди 1 px на екрані, хоч би як наблизили */
.uma-map .uma-r{fill:var(--uma-empty); stroke:#fff; stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; cursor:pointer; transition:fill .25s ease}
.uma-map .uma-r:hover,.uma-map .uma-r.is-hot{fill:var(--uma-empty-hot)}
.uma-map .uma-r--ready{fill:var(--uma-navy)}
.uma-map .uma-r--ready:hover,.uma-map .uma-r--ready.is-hot{fill:var(--uma-navy-2)}
.uma-map a:focus-visible .uma-r{fill:var(--uma-navy-2); stroke:var(--uma-gold); stroke-width:3}
.uma-map .uma-city circle{fill:var(--uma-gold); stroke:#fff; stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform .15s ease}
.uma-map .uma-city:hover circle,.uma-map .uma-city:focus-visible circle{transform:scale(1.35)}
.uma-map .uma-city text{font:700 17px var(--uma-head); fill:var(--uma-navy); paint-order:stroke; stroke:#fff; stroke-width:5px; stroke-linejoin:round; pointer-events:none}
.uma-map .uma-city:focus{outline:none}

/* наближена область: решта притушена, обрана обведена, міста лише її */
.uma-map.is-zoomed .uma-r{fill:var(--uma-faded)}
.uma-map.is-zoomed .uma-r--ready{fill:var(--uma-faded-ready)}
.uma-map.is-zoomed .uma-r:hover{fill:var(--uma-empty)}
.uma-map.is-zoomed .uma-r--ready:hover{fill:var(--uma-navy-2)}
.uma-map.is-zoomed .uma-r.is-active{fill:var(--uma-empty-hot); cursor:default}
.uma-map.is-zoomed .uma-r--ready.is-active{fill:var(--uma-navy); cursor:pointer}
.uma-map .uma-hl path{fill:none; stroke:var(--uma-navy); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; pointer-events:none}
.uma-map.is-zoomed .uma-city.is-off{display:none}

.uma-map .uma-zoom{position:absolute; inset:0; pointer-events:none}
.uma-map .uma-zoom[hidden]{display:none}
.uma-map .uma-zoom__back.uma-zoom__back{all:unset; box-sizing:border-box; pointer-events:auto; position:absolute; top:10px; left:10px; cursor:pointer;
  padding:9px 14px; border-radius:99px; background:#fff; color:var(--uma-navy); font:600 14px/1 var(--uma-head);
  box-shadow:0 6px 18px rgba(0,23,61,.18)}
.uma-map .uma-zoom__back.uma-zoom__back:hover{background:var(--uma-navy); color:#fff}
.uma-map .uma-zoom__back.uma-zoom__back:focus-visible{outline:2px solid var(--uma-gold); outline-offset:2px}
.uma-map .uma-zoom__card{pointer-events:auto; position:absolute; left:10px; bottom:10px; max-width:300px; display:grid; gap:4px; justify-items:start;
  padding:14px 16px; border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(0,23,61,.2); font-size:14px; line-height:19px}
.uma-map .uma-zoom__card b{font:700 17px/1.25 var(--uma-head); color:var(--uma-navy)}
.uma-map .uma-zoom__card span{color:var(--uma-muted)}
.uma-map .uma-zoom__card .uma-link,.uma-map .uma-zoom__card .uma-apply-btn{margin-top:8px}

.uma-map .uma-tip{position:absolute; z-index:3; min-width:200px; max-width:260px; padding:12px 14px; border-radius:14px; background:#fff;
  box-shadow:0 12px 30px rgba(0,23,61,.22); pointer-events:none; transform:translate(-50%,calc(-100% - 14px)); font-size:14px; line-height:19px}
.uma-map .uma-tip b{display:block; font:700 15px/1.25 var(--uma-head); color:var(--uma-navy)}
.uma-map .uma-tip span{display:block; color:var(--uma-muted); margin-top:3px}
.uma-map .uma-tip em{display:block; font-style:normal; font-weight:700; color:var(--uma-navy); margin-top:6px}
.uma-map .uma-tip--ready em{color:var(--uma-gold-2)}

.uma-map .uma-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; color:var(--uma-muted)}
.uma-map .uma-legend li{display:flex; align-items:center; gap:8px}
.uma-map .uma-legend i{width:14px; height:14px; border-radius:4px; background:var(--uma-empty)}
.uma-map .uma-legend .l-ready{background:var(--uma-navy)}
.uma-map .uma-legend .l-city{border-radius:50%; background:var(--uma-gold); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--uma-line)}
.uma-map .uma-attr{margin:10px 0 0; font-size:11px; color:rgba(0,2,21,.45)}

@media (max-width:900px){
  .uma-map{grid-template-columns:1fr; gap:20px}
  .uma-map .uma-stage{position:static; order:-1}
  .uma-map .uma-list{padding:24px 20px}
  .uma-map .uma-stage__sum{font-size:18px}
}
/* На телефоні вся країна замала для точок міст — вони з'являються лише в наближеній області. */
@media (max-width:600px){
  .uma-map:not(.is-zoomed) .uma-city,.uma-map .uma-legend .l-city-item{display:none}
}
/* Картка поверх карти — лише коли сама карта широка (≥640 px, той самий поріг у regionBox() в uma-map.js); інакше — під картою. */
.uma-map .uma-box{container-type:inline-size}
@container (max-width:639px){
  .uma-map .uma-zoom{position:static}
  .uma-map .uma-zoom__back.uma-zoom__back{top:8px; left:8px; padding:8px 12px; font-size:13px}
  .uma-map .uma-zoom__card{position:static; max-width:none; margin-top:10px; box-shadow:none; background:var(--uma-mist)}
}
@media (prefers-reduced-motion:reduce){.uma-map *{transition:none!important}}