.shg-vacancy-map-section{padding:72px 0;background:linear-gradient(180deg,rgba(239,246,255,.72),rgba(255,255,255,.96))}
.shg-vacancy-map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.shg-vacancy-map-head h2{margin:0 0 8px;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.035em}
.shg-vacancy-map-head p{margin:0;color:var(--muted);max-width:760px}
.shg-map-live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 13px;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:999px;font-size:13px;font-weight:800}
.shg-map-live:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.13)}
.shg-map-filter-list{display:flex;gap:9px;overflow:auto;padding:2px 2px 18px;scrollbar-width:thin}
.shg-map-filter{flex:0 0 auto;border:1px solid #dbe3ef;background:#fff;color:#334155;border-radius:999px;padding:10px 15px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:.2s ease}
.shg-map-filter:hover,.shg-map-filter.is-active{background:#14213d;color:#fff;border-color:#14213d;transform:translateY(-1px)}
.shg-vacancy-map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(285px,.75fr);gap:22px;align-items:start}
.shg-map-card,.shg-map-sidebar{background:#fff;border:1px solid #dfe6f0;border-radius:26px;box-shadow:0 22px 65px rgba(20,33,61,.09)}
.shg-map-card{position:relative;min-height:570px;padding:22px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#f8fbff 0,#eef5ff 68%,#e8f0fb 100%)}
.shg-map-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;color:#64748b;font-size:12px;font-weight:700}
.shg-map-legend span{display:inline-flex;align-items:center;gap:6px}.shg-map-legend i{width:11px;height:11px;border-radius:4px;display:block}
.shg-kyiv-map{display:block;width:100%;height:auto;max-height:495px;margin:auto;overflow:visible}
.shg-district{stroke:#fff;stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:filter .18s ease,transform .18s ease,opacity .18s ease;transform-box:fill-box;transform-origin:center}
.shg-district:hover,.shg-district:focus{filter:brightness(.96) drop-shadow(0 8px 10px rgba(15,23,42,.2));transform:scale(1.025);outline:none}
.shg-district.is-muted{opacity:.52}.shg-district.is-selected{stroke:#0f172a;stroke-width:7;filter:drop-shadow(0 8px 12px rgba(15,23,42,.22))}
.shg-map-label{font-size:16px;font-weight:900;fill:#0f172a;pointer-events:none;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.88);stroke-width:5px;stroke-linejoin:round}
.shg-map-count{font-size:13px;font-weight:800;fill:#334155;pointer-events:none;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:4px}
.shg-map-tooltip{position:absolute;z-index:5;min-width:220px;max-width:260px;padding:15px;border-radius:16px;background:rgba(15,23,42,.96);color:#fff;box-shadow:0 18px 45px rgba(15,23,42,.3);pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .15s ease;line-height:1.35}
.shg-map-tooltip.is-visible{opacity:1}.shg-map-tooltip strong{display:block;font-size:16px;margin-bottom:8px}.shg-map-tooltip div{display:flex;justify-content:space-between;gap:14px;padding:3px 0;font-size:12px;color:#cbd5e1}.shg-map-tooltip b{color:#fff;text-align:right}
.shg-map-sidebar{padding:22px;display:flex;flex-direction:column}.shg-map-sidebar h3{margin:0 0 16px;font-size:21px}.shg-map-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.shg-map-kpi{padding:15px;border-radius:17px;background:#f8fafc;border:1px solid #e5eaf2}.shg-map-kpi strong{display:block;font-size:26px;line-height:1.1}.shg-map-kpi span{display:block;margin-top:5px;color:#64748b;font-size:12px;line-height:1.35}
.shg-map-ranking{display:grid;gap:8px;max-height:440px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px}.shg-map-rank{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;color:#1e293b;background:#f8fafc;border:1px solid transparent;transition:.2s ease}.shg-map-rank:hover{border-color:#bfdbfe;background:#eff6ff}.shg-map-rank em{width:25px;height:25px;display:grid;place-items:center;background:#fff;border:1px solid #dbe3ef;border-radius:8px;font-style:normal;font-weight:900;font-size:12px}.shg-map-rank span{font-weight:800;font-size:14px}.shg-map-rank b{font-size:13px;color:#2563eb}
.shg-map-telegram{margin-top:auto;padding-top:20px}.shg-map-telegram a{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 16px;border-radius:15px;background:#229ed9;color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(34,158,217,.25);transition:.2s ease}.shg-map-telegram a:hover{transform:translateY(-2px);filter:brightness(.97)}
.shg-map-note{margin-top:12px;color:#94a3b8;font-size:11px;text-align:center}.shg-map-empty{display:none;padding:12px;margin-top:12px;border-radius:12px;background:#fff7ed;color:#9a3412;font-size:13px;font-weight:700}.shg-map-empty.is-visible{display:block}
@media(max-width:900px){.shg-vacancy-map-layout{grid-template-columns:1fr}.shg-map-card{min-height:auto}.shg-map-sidebar{min-height:410px}.shg-vacancy-map-head{align-items:flex-start;flex-direction:column}.shg-map-live{align-self:flex-start}}
@media(max-width:600px){.shg-vacancy-map-section{padding:52px 0}.shg-map-card{padding:14px;border-radius:20px}.shg-map-sidebar{padding:18px;border-radius:20px}.shg-map-label{font-size:13px}.shg-map-count{font-size:11px}.shg-map-kpis{grid-template-columns:1fr}.shg-map-tooltip{display:none}}

/* Real map version: OpenStreetMap + interactive district overlays */
.shg-map-card{padding:0;min-height:570px;background:#eef3f7}
.shg-leaflet-map{width:100%;height:570px;border-radius:25px;overflow:hidden;background:#e8eef3}
.shg-leaflet-map .leaflet-tile-pane{filter:saturate(.72) brightness(1.05) contrast(.92)}
.shg-leaflet-map .leaflet-control-zoom a{color:#0f172a;border:0;font-weight:900}
.shg-leaflet-map .leaflet-control-zoom{border:0!important;box-shadow:0 8px 24px rgba(15,23,42,.18)!important}
.shg-leaflet-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.82)}
.shg-map-leaflet-legend{background:rgba(255,255,255,.94);padding:14px 16px;border-radius:14px;box-shadow:0 8px 28px rgba(15,23,42,.16);font-size:12px;line-height:1.8;color:#334155}
.shg-map-leaflet-legend strong{display:block;margin-bottom:5px;color:#0f172a;font-size:13px}
.shg-map-leaflet-legend span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.shg-map-leaflet-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.shg-map-district-label{background:transparent;border:0;box-shadow:none;color:#0f172a;font-weight:900;text-align:center;text-shadow:0 1px 0 #fff,1px 0 0 #fff,0 -1px 0 #fff,-1px 0 0 #fff,0 2px 6px rgba(255,255,255,.95)}
.shg-map-district-label:before{display:none}
.shg-map-district-label .district-count{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:6px;background:rgba(15,23,42,.9);color:#fff;font-size:11px;text-shadow:none}
.shg-leaflet-popup .leaflet-popup-content-wrapper{border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.22)}
.shg-leaflet-popup .leaflet-popup-content{margin:15px 17px;min-width:220px}
.shg-leaflet-popup strong{font-size:16px;color:#0f172a}.shg-leaflet-popup .map-pop-row{display:flex;justify-content:space-between;gap:14px;padding-top:8px;font-size:12px;color:#64748b}.shg-leaflet-popup .map-pop-row b{color:#0f172a;text-align:right}
@media(max-width:900px){.shg-leaflet-map{height:520px}}
@media(max-width:600px){.shg-leaflet-map{height:460px;border-radius:19px}.shg-map-leaflet-legend{padding:10px 12px;font-size:11px}.shg-map-district-label{font-size:10px}}

/* Enhanced vacancy map interactions */
.shg-map-hot{display:none;margin:0 0 14px;padding:12px 16px;border:1px solid #fed7aa;border-radius:14px;background:linear-gradient(90deg,#fff7ed,#fffbeb);color:#9a3412;font-size:14px;box-shadow:0 8px 22px rgba(154,52,18,.06)}
.shg-map-hot.is-visible{display:block}.shg-map-hot strong{color:#7c2d12}
.shg-map-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-6px 0 18px}
.shg-map-mode{display:inline-flex;padding:4px;border:1px solid #dbe3ef;border-radius:13px;background:#fff}
.shg-map-mode button{border:0;background:transparent;padding:8px 12px;border-radius:9px;font:inherit;font-size:13px;font-weight:800;color:#64748b;cursor:pointer}
.shg-map-mode button.is-active{background:#14213d;color:#fff;box-shadow:0 5px 15px rgba(20,33,61,.18)}
.shg-map-search{position:relative;display:flex;align-items:center;gap:8px;min-width:280px;padding:0 12px;border:1px solid #dbe3ef;border-radius:13px;background:#fff;color:#64748b}
.shg-map-search input{width:100%;border:0;outline:0;padding:11px 0;background:transparent;font:inherit;font-size:13px;color:#0f172a}
.shg-map-search-results{display:none;position:absolute;z-index:1100;left:0;right:0;top:calc(100% + 7px);padding:6px;border:1px solid #dbe3ef;border-radius:13px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.18)}
.shg-map-search-results.is-visible{display:grid}.shg-map-search-results button{border:0;background:#fff;text-align:left;padding:9px 10px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.shg-map-search-results button:hover{background:#eff6ff}
.shg-leaflet-map .leaflet-interactive{cursor:pointer;transition:fill .45s ease,fill-opacity .25s ease,stroke-width .18s ease,filter .18s ease}
.shg-leaflet-map .leaflet-interactive:hover{filter:drop-shadow(0 5px 8px rgba(15,23,42,.28)) brightness(1.02)}
@media(max-width:700px){.shg-map-tools{align-items:stretch;flex-direction:column}.shg-map-mode{align-self:flex-start}.shg-map-search{min-width:0;width:100%}.shg-map-hot{font-size:13px}}

/* Vacancy-count legend placed in the free area below the map */
.shg-map-below-legend{margin:14px 18px 16px;padding:0;color:#334155}
.shg-map-below-legend strong{display:block;margin-bottom:8px;color:#0f172a;font-size:13px}
.shg-map-below-legend>div{display:flex;align-items:center;flex-wrap:wrap;gap:9px 26px}
.shg-map-below-legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:700}
.shg-map-below-legend i{width:11px;height:11px;flex:0 0 11px;border-radius:50%;display:inline-block}
@media(max-width:600px){.shg-map-below-legend{margin:12px 14px 14px}.shg-map-below-legend>div{gap:8px 18px}}

/* Режим метро: отдельные компактные маркеры поверх существующей Leaflet-карты. */
.shg-map-metro-label{background:#fff;border:1px solid #d7e0ed;border-radius:10px;box-shadow:0 6px 18px rgba(15,35,70,.16);color:#10213a;font-weight:800;padding:5px 8px;white-space:nowrap}
.shg-map-metro-label:before{display:none}
.metro-map-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:8px;background:#17243b;color:#fff;font-size:12px}
@media(max-width:767px){
  .shg-map-mode{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .shg-map-mode::-webkit-scrollbar{display:none}
  .shg-map-mode button{flex:0 0 auto}
  .shg-map-metro-label{font-size:11px;padding:4px 6px}
  .metro-map-count{min-width:19px;height:19px;font-size:10px}
}


/* VIP vacancy markers: isolated Leaflet overlay; existing district and metro styles stay untouched. */
.shg-vip-map-icon-wrap{background:transparent!important;border:0!important}
.shg-vip-map-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#fff8cc,#ffd43b);border:3px solid #fff;box-shadow:0 5px 16px rgba(8,35,92,.38),0 0 0 3px rgba(255,190,0,.35);font-size:20px;line-height:1;cursor:pointer;transform-origin:50% 85%;animation:shgVipMapPulse 2.6s ease-in-out infinite}
.shg-vip-map-icon:hover{transform:scale(1.12);animation:none}
@keyframes shgVipMapPulse{0%,72%,100%{transform:scale(1)}82%{transform:scale(1.12)}90%{transform:scale(1.03)}}
.shg-vip-map-popup{min-width:210px}.shg-vip-map-popup>strong{display:inline-block;color:#0f4ec7;font-size:12px;margin-bottom:5px}.shg-vip-map-popup h3{font-size:16px;line-height:1.25;margin:2px 0 8px;color:#071d49}.shg-vip-map-popup p{margin:5px 0;font-size:13px;line-height:1.35}.shg-vip-map-contact{display:inline-flex;border:0;cursor:pointer;font:inherit;margin-top:9px;padding:8px 12px;border-radius:9px;background:#2463eb;color:#fff!important;font-weight:800;text-decoration:none}
@media (prefers-reduced-motion:reduce){.shg-vip-map-icon{animation:none}}


/* Fullscreen control: isolated from the existing map logic. */
.shg-map-fullscreen-control{border:0!important;background:transparent!important;box-shadow:0 8px 24px rgba(15,23,42,.18)!important}
.shg-map-fullscreen-button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:#fff;color:#0f172a;font:700 22px/1 Arial,sans-serif;cursor:pointer}
.shg-map-fullscreen-button:hover,.shg-map-fullscreen-button:focus{background:#f1f5f9;color:#0f172a}
.shg-map-card:fullscreen{width:100vw;height:100vh;min-height:100vh;padding:0;border:0;border-radius:0;background:#eef3f7}
.shg-map-card:fullscreen .shg-leaflet-map{width:100%;height:100vh!important;border-radius:0}
.shg-map-card.shg-map-fullscreen-fallback{position:fixed!important;z-index:2147483000!important;inset:0!important;width:100vw!important;height:100vh!important;min-height:100vh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#eef3f7!important}
.shg-map-card.shg-map-fullscreen-fallback .shg-leaflet-map{width:100%!important;height:100vh!important;border-radius:0!important}
html.shg-map-page-locked,html.shg-map-page-locked body{overflow:hidden!important}
@supports (height:100dvh){
  .shg-map-card:fullscreen,.shg-map-card:fullscreen .shg-leaflet-map,
  .shg-map-card.shg-map-fullscreen-fallback,.shg-map-card.shg-map-fullscreen-fallback .shg-leaflet-map{height:100dvh!important;min-height:100dvh!important}
}

/* Safe isolated mode: user location + nearest metro stations. */
.shg-map-nearby-button{color:#1d4ed8!important;background:#eff6ff!important}
.shg-map-nearby-button.is-active{color:#fff!important;background:#1d4ed8!important}
.shg-map-user-label{background:#1d4ed8;border:0;border-radius:9px;color:#fff;font-weight:800;padding:5px 8px;box-shadow:0 8px 22px rgba(29,78,216,.25)}
.shg-map-user-label:before{display:none}
.shg-map-rank-nearby span{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;line-height:1.2}
.shg-map-rank-nearby small{margin-top:4px;color:#64748b;font-size:11px;font-weight:700}
@media(max-width:600px){.shg-map-nearby-button{position:sticky;right:0}.shg-map-rank-nearby small{font-size:10px}}


/* Територія карти: окремий головний перемикач Київ / Київська область */
.shg-map-control-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.shg-map-area{display:inline-flex;padding:4px;border:1px solid #cbd5e1;border-radius:14px;background:#eef2f7}
.shg-map-area button{border:0;background:transparent;padding:9px 15px;border-radius:10px;font:inherit;font-size:13px;font-weight:900;color:#475569;cursor:pointer;white-space:nowrap}
.shg-map-area button.is-active{background:#14213d;color:#fff;box-shadow:0 5px 15px rgba(20,33,61,.18)}
.shg-map-mode[hidden]{display:none!important}
@media(max-width:900px){
  .shg-map-tools{align-items:flex-start}
  .shg-map-control-stack{max-width:100%}
}
@media(max-width:700px){
  .shg-map-tools{flex-direction:column}
  .shg-map-area,.shg-map-mode{max-width:100%;overflow-x:auto}
  .shg-map-search{width:100%;min-width:0}
}

/* v15: точні координати вакансій — окремий видимий маркер зі зміщенням від VIP/метро */
.shg-exact-vacancy-icon-wrap{background:transparent!important;border:0!important;overflow:visible!important}
.shg-exact-vacancy-icon{display:block;width:14px;height:14px;border-radius:50%;background:#16a34a;border:3px solid #fff;box-shadow:0 0 0 2px #15803d,0 3px 10px rgba(15,23,42,.38);cursor:pointer}
.shg-exact-vacancy-icon:hover{transform:scale(1.18)}


/* v29: district names are drawn directly on polygons without white tooltip cards */
.leaflet-tooltip.shg-map-district-label{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  color:#0f172a !important;
  pointer-events:none !important;
}
.leaflet-tooltip.shg-map-district-label::before,
.leaflet-tooltip.shg-map-district-label::after{
  display:none !important;
  border:0 !important;
}
.shg-map-district-label .district-label-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  white-space:nowrap;
}
.shg-map-district-label .district-label-name{
  display:block;
  font-size:13px;
  line-height:1.1;
  font-weight:900;
  color:#111827;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.98),
     1px -1px 0 rgba(255,255,255,.98),
    -1px  1px 0 rgba(255,255,255,.98),
     1px  1px 0 rgba(255,255,255,.98),
     0 2px 5px rgba(255,255,255,.95);
}
.shg-map-district-label .district-count{
  display:inline-flex;
  min-width:25px;
  height:23px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0 7px;
  border-radius:7px;
  background:rgba(15,23,42,.94);
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:900;
  text-shadow:none;
}
@media (max-width:700px){
  .shg-map-district-label .district-label-name{font-size:11px}
  .shg-map-district-label .district-count{min-width:22px;height:20px;padding:0 6px;font-size:11px}
}


/* Київська область: ізольовані стилі нових районних полігонів. */
.shg-oblast-raion-label{pointer-events:none}
.shg-oblast-raion-rank{width:100%;border:0;text-align:left;font:inherit;cursor:pointer}
.shg-oblast-raion-rank:hover,.shg-oblast-raion-rank:focus-visible{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.10);outline:none}
[data-map-area="oblast"]~* .leaflet-interactive{transition:fill-opacity .22s ease,opacity .22s ease,stroke-width .22s ease}
/* Kyiv oblast: vacancies without exact coordinates use a visually distinct city-centre fallback marker. */
.shg-exact-vacancy-icon.is-approximate{opacity:.78;box-shadow:0 0 0 3px rgba(37,99,235,.18)}


/* Київська область: прибираємо браузерну рамку фокуса лише з SVG-полігонів карти.
   Київський режим та інші елементи керування не змінюються. */
.shg-map-area-oblast .shg-leaflet-map .leaflet-interactive:focus,
.shg-map-area-oblast .shg-leaflet-map .leaflet-interactive:focus-visible{
  outline:none!important;
}
/* Kyiv region: safe links from district popup to existing city pages. */
.shg-oblast-popup-cities{margin-top:10px;padding-top:8px;border-top:1px solid #e5e7eb}
.shg-oblast-popup-caption{margin-bottom:5px;color:#64748b;font-size:12px;font-weight:700}
.shg-oblast-popup-city{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;color:#135bd6!important;font-size:13px;font-weight:700;text-decoration:none!important}
.shg-oblast-popup-city:hover{text-decoration:underline!important}
.shg-oblast-popup-city b{min-width:24px;color:#0f172a;text-align:right}
.shg-oblast-popup-catalog{display:inline-block;margin-top:9px;color:#135bd6!important;font-size:13px;font-weight:800;text-decoration:none!important}
.shg-oblast-popup-catalog:hover{text-decoration:underline!important}

/* Mobile location range: static map circle; no animation. */
@media(max-width:600px){
  .shg-user-location-dot{filter:drop-shadow(0 0 5px rgba(37,99,235,.45))}
  .shg-user-accuracy-circle{pointer-events:none}
}


/* v44: деталізація Київської області за громадами. */
.shg-oblast-community-label{pointer-events:none}
.shg-oblast-community-rank{width:100%;text-align:left}
@media(max-width:700px){
  .shg-map-mode-oblast{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .shg-map-mode-oblast::-webkit-scrollbar{display:none}
  .shg-map-mode-oblast button{flex:0 0 auto}
}


/* v57: Google Maps route action for Kyiv and Kyiv region vacancy markers. */
.shg-nearby-popup-actions{display:grid;gap:8px;margin-top:10px}
.shg-vacancy-details-link{display:inline-flex;align-items:center;color:#135bd6!important;font-weight:800;text-decoration:none!important}
.shg-vacancy-details-link:hover{text-decoration:underline!important}
.shg-google-route-btn{display:flex;align-items:center;justify-content:center;min-height:40px;padding:9px 12px;border-radius:10px;background:#2563eb;color:#fff!important;font-size:13px;font-weight:850;line-height:1.25;text-align:center;text-decoration:none!important;box-shadow:0 5px 14px rgba(37,99,235,.22)}
.shg-google-route-btn:hover{background:#1d4ed8;transform:translateY(-1px)}
.shg-google-route-btn:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}
@media(max-width:600px){.shg-google-route-btn{min-height:44px;font-size:14px}}

/* v58: one clear VIP marker per vacancy; extra locations stay inside the popup. */
.shg-vip-map-icon{position:relative}
.shg-vip-map-count{position:absolute;right:-9px;top:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#0f172a;color:#fff;border:2px solid #fff;font:700 10px/14px system-ui,sans-serif;text-align:center;box-shadow:0 2px 7px rgba(15,23,42,.28)}
.shg-vip-map-locations{margin:8px 0 10px;border:1px solid #dbeafe;border-radius:10px;background:#f8fbff;overflow:hidden}
.shg-vip-map-locations summary{cursor:pointer;padding:8px 10px;color:#1d4ed8;font-weight:700;list-style:none}
.shg-vip-map-locations summary::-webkit-details-marker{display:none}
.shg-vip-map-locations summary:after{content:'+';float:right}
.shg-vip-map-locations[open] summary:after{content:'−'}
.shg-vip-map-locations div{display:grid;gap:5px;padding:0 10px 9px;color:#475569;font-size:13px}


/* v59: compact Google Maps routes for VIP vacancy locations. */
.shg-vip-map-actions{display:grid;gap:8px;margin-top:9px}
.shg-vip-map-actions .shg-vip-map-contact{width:100%;justify-content:center;margin-top:0}
.shg-vip-route-btn{width:100%;box-sizing:border-box}
.shg-vip-location-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shg-vip-location-row>span{min-width:0;overflow-wrap:anywhere}
.shg-vip-location-row>a{flex:0 0 auto;display:inline-flex;align-items:center;padding:5px 8px;border-radius:8px;background:#e8f0ff;color:#1d4ed8!important;font-weight:800;text-decoration:none!important;font-size:12px}
.shg-vip-location-row>a:hover{background:#dbeafe}
@media(max-width:600px){.shg-vip-location-row{align-items:flex-start}.shg-vip-location-row>a{min-height:30px}}

/* Improved vacancy-map search suggestions */
.shg-map-search-results button{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shg-map-search-results button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shg-map-search-results button small{flex:0 0 auto;color:#64748b;font-size:11px;font-weight:600}
.shg-map-search-results button:focus-visible{outline:2px solid #2563eb;outline-offset:1px;background:#eff6ff}

/* Кнопка повернення до поточної геолокації користувача */
.shg-map-location-control{border:0!important;background:transparent!important;box-shadow:none!important}
.shg-map-location-button{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid rgba(15,23,42,.12);border-radius:50%;background:#fff;color:#475569;box-shadow:0 4px 14px rgba(15,23,42,.2);cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.shg-map-location-button:hover{background:#f8fafc;color:#2563eb;box-shadow:0 6px 18px rgba(15,23,42,.24);transform:translateY(-1px)}
.shg-map-location-button:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px;color:#2563eb}
.shg-map-location-button:active{transform:scale(.96)}
.shg-map-location-button.has-location{color:#2563eb}
.shg-map-location-button:disabled{cursor:wait;opacity:.72;transform:none}
.shg-location-icon{display:block;width:22px;height:22px;line-height:0}
.shg-location-icon svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.shg-location-icon svg circle:first-child{fill:currentColor;stroke:none}
.shg-location-ring{opacity:.42}
.shg-map-location-button.is-loading .shg-location-icon{animation:shg-location-spin .85s linear infinite}
.shg-map-location-button.is-pulsing::after{content:'';position:absolute;inset:-1px;border:2px solid rgba(37,99,235,.55);border-radius:50%;animation:shg-location-control-pulse .7s ease-out forwards;pointer-events:none}
@keyframes shg-location-spin{to{transform:rotate(360deg)}}
@keyframes shg-location-control-pulse{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.shg-map-location-button{transition:none}.shg-map-location-button.is-loading .shg-location-icon{animation:none}.shg-map-location-button.is-pulsing::after{animation:none;display:none}}

/* v66: плавна зміна позицій ТОП районів та живі числові лічильники. */
.shg-map-ranking .shg-map-rank[data-rank-key]{will-change:transform}
@media (prefers-reduced-motion:reduce){.shg-map-ranking .shg-map-rank[data-rank-key]{transition:none!important}}

/* Remove browser focus rectangle from Leaflet vector districts after click.
   Scoped to the vacancy map so keyboard focus styles elsewhere stay intact. */
#vacancy-map .leaflet-interactive:focus,
#vacancy-map svg:focus,
#vacancy-map path:focus {
  outline: none !important;
}