/* =============== NASOUN Russia Map ===============
   Использование: include shared/regions-data.js + russia-map.js + этот CSS.
   Темы через класс хоста: .nasoun-map--light / .nasoun-map--dark.
*/

.nasoun-map{
  --nm-accent: #0046AD;
  --nm-accent-dark: #002F73;
  --nm-accent-soft: #B8D2EE;
  --nm-ink: #2B3340;
  --nm-ink-2: #4A5566;
  --nm-muted: #7A8699;
  --nm-bg: #FFFFFF;
  --nm-bg-soft: #F4F8FD;
  --nm-panel: #FFFFFF;
  --nm-line: #E1E7F0;
  --nm-region: #B8C8DE;
  --nm-region-stroke: #FFFFFF;
  --nm-region-active: #4A9EE7;
  --nm-region-hover: #D52B1E;

  font-family: inherit;
  color: var(--nm-ink);
  width: 100%;
  display: flex; flex-direction: column; gap: 24px;
  position: relative; /* нужен для абсолютного tooltip-а внутри */
}

.nasoun-map--dark{
  --nm-accent: #d9a851;
  --nm-accent-dark: #b8893a;
  --nm-accent-soft: rgba(217,168,81,.5);
  --nm-ink: #ffffff;
  --nm-ink-2: rgba(255,255,255,.75);
  --nm-muted: rgba(255,255,255,.55);
  --nm-bg: #0e1b35;
  --nm-bg-soft: #1a2a4a;
  --nm-panel: #1a2a4a;
  --nm-line: rgba(255,255,255,.1);
  --nm-region: rgba(255,255,255,.08);
  --nm-region-stroke: #0e1b35;
  --nm-region-active: rgba(217,168,81,.45);
  --nm-region-hover: #d9a851;
  color: var(--nm-ink);
}

/* HEADER */
.nasoun-map__header{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--nm-line);
}
.nasoun-map__stats{display:flex;gap:32px}
.nasoun-map__stats b{
  display:block;font-size:28px;font-weight:800;color:#D52B1E;
  letter-spacing:-.02em;line-height:1;margin-bottom:4px;
  font-variant-numeric: tabular-nums;
}
.nasoun-map__stats span{font-size:12px;color:var(--nm-muted);text-transform:uppercase;letter-spacing:.1em}

/* STAGE */
.nasoun-map__stage{
  display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,1fr);
  gap:24px;align-items:stretch;position:relative;
}
.nasoun-map__svg-wrap{
  position:relative;background:var(--nm-bg-soft);
  border:1px solid var(--nm-line);border-radius:16px;
  padding:18px;min-height:520px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.nasoun-map__loading{color:var(--nm-muted);font-size:14px}
.nasoun-map__error{color:#f87171;font-size:14px;padding:24px;text-align:center}

.nasoun-map__svg-wrap svg{
  width:100%;height:auto;max-height:720px;
  filter:drop-shadow(0 8px 24px rgba(0,47,115,.06));
}

/* PATHS */
.nm-path{
  fill:var(--nm-region);
  stroke:var(--nm-region-stroke);
  stroke-width:.6;
  transition:fill .18s ease, transform .2s ease;
  transform-origin:center;
  cursor:default;
  outline:none;
}
.nm-path--active{
  fill:var(--nm-region-active);
  cursor:pointer;
}
.nm-path--hover,
.nm-path:focus-visible{
  fill:var(--nm-region-hover);
  stroke:var(--nm-region-hover);
  filter:drop-shadow(0 6px 16px color-mix(in srgb, var(--nm-region-hover) 50%, transparent));
}
.nm-path--pinned{
  fill:var(--nm-region-hover);
  stroke:var(--nm-accent-dark);
  stroke-width:1.5;
  filter:drop-shadow(0 4px 14px color-mix(in srgb, var(--nm-region-hover) 60%, transparent));
}
.nm-path--active:focus-visible{outline:0}

/* PANEL */
.nasoun-map__panel{
  background:var(--nm-panel);border:1px solid var(--nm-line);border-radius:16px;
  min-height:520px;display:flex;flex-direction:column;overflow:hidden;
}
.nasoun-map__panel-head{
  position:relative;
  padding:24px 24px 20px;border-bottom:1px solid var(--nm-line);
  background:linear-gradient(180deg,color-mix(in srgb, var(--nm-accent) 6%, transparent) 0%,transparent 100%);
}
.nasoun-map__panel-close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--nm-line);background:#fff;color:var(--nm-ink-2);
  font-size:20px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;padding:0;
  transition:all .18s;
}
.nasoun-map__panel-close:hover{
  background:var(--nm-region-hover);color:#fff;border-color:var(--nm-region-hover);
}
.nasoun-map__panel-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--nm-accent);
  font-weight:700;margin-bottom:8px;
}
.nasoun-map__panel-head h3{
  font-size:20px;font-weight:700;color:var(--nm-ink);
  margin:0 0 8px;line-height:1.25;letter-spacing:-.01em;
}
.nasoun-map__panel-count{
  font-size:13px;color:var(--nm-muted);
}
.nasoun-map__panel-body{flex:1;overflow-y:auto;padding:12px 12px 18px;scrollbar-width:thin}
.nasoun-map__panel-body::-webkit-scrollbar{width:6px}
.nasoun-map__panel-body::-webkit-scrollbar-thumb{background:var(--nm-line);border-radius:999px}

.nasoun-map__empty{
  padding:32px 24px;color:var(--nm-ink-2);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.nasoun-map__empty h4{font-size:16px;color:var(--nm-ink);margin:0;font-weight:600}
.nasoun-map__empty p{font-size:13px;margin:0;color:var(--nm-ink-2);line-height:1.55}
.nasoun-map__empty-chev{display:inline-flex;gap:3px}
.nasoun-map__empty-chev span{width:10px;height:10px;border-right:2px solid var(--nm-accent);border-top:2px solid var(--nm-accent);transform:rotate(45deg)}
.nasoun-map__hint{
  margin-top:8px;padding:10px 14px;border:1px dashed var(--nm-line);border-radius:8px;
  font-size:12px;color:var(--nm-muted);
}
.nasoun-map__ctas{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px;
}
.nasoun-map__cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:var(--nm-accent);color:var(--nm-bg);font-weight:600;font-size:13px;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;
  border:1px solid var(--nm-accent);
}
.nasoun-map__cta:hover{background:var(--nm-accent-dark);color:var(--nm-bg);border-color:var(--nm-accent-dark)}
.nasoun-map__cta--secondary{
  background:transparent;color:var(--nm-accent);border-color:var(--nm-accent);
}
.nasoun-map__cta--secondary:hover{background:var(--nm-accent);color:var(--nm-bg)}

/* ORG LIST in panel */
.nm-org-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.nm-org{
  display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;
  padding:10px 12px;border-radius:10px;
  transition:background .2s;
}
.nm-org:hover{background:color-mix(in srgb, var(--nm-accent) 6%, transparent)}
.nm-org__logo{
  width:48px;height:48px;border-radius:8px;
  object-fit:contain;background:#fff;
  border:1px solid var(--nm-line);
  padding:3px;flex-shrink:0;
}
.nm-org__body{min-width:0}
.nm-org__name{
  font-weight:600;font-size:12.5px;color:var(--nm-ink);line-height:1.35;
  word-break:break-word;
}
.nm-org--has-card{cursor:pointer}
.nm-org--has-card:hover{background:color-mix(in srgb, var(--nm-accent) 10%, transparent)}

/* ORG VISIT CARD POPUP — fixed-position floating card on hover */
.nm-org-card{
  position:fixed;left:-9999px;top:0;z-index:1000;
  width:360px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid #E1E7F2;border-radius:16px;
  box-shadow:0 24px 56px rgba(0,47,115,.18),0 4px 12px rgba(0,47,115,.08);
  padding:18px 20px;color:#0E1B33;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  font-family:inherit;
}
.nm-org-card.is-visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}
.nm-org-card__row{
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  margin-bottom:14px;
}
.nm-org-card__logo{
  width:64px;height:64px;border-radius:10px;
  object-fit:contain;background:#fff;
  border:1px solid #E1E7F2;padding:4px;flex-shrink:0;
}
.nm-org-card__head{min-width:0}
.nm-org-card__region{
  font-size:11px;font-weight:700;color:#0046AD;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;
}
.nm-org-card__name{
  font-size:14px;font-weight:700;line-height:1.3;color:#0E1B33;
  word-break:break-word;
}
.nm-org-card__meta{
  margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid #EEF2F8;padding-top:12px;
}
.nm-org-card__meta > div{display:flex;flex-direction:column;gap:2px}
.nm-org-card__meta dt{
  font-size:11px;font-weight:600;color:#6B7895;
  text-transform:uppercase;letter-spacing:.04em;margin:0;
}
.nm-org-card__meta dd{
  margin:0;font-size:13px;line-height:1.45;color:#0E1B33;word-break:break-word;
}
.nm-org-card__meta a{color:#0046AD;text-decoration:none}
.nm-org-card__meta a:hover{text-decoration:underline}
.nm-org-card__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:11px 16px;border-radius:10px;
  background:#0046AD;color:#fff;font-weight:700;font-size:14px;
  text-decoration:none;transition:background .18s, transform .18s;
}
.nm-org-card__cta:hover{background:#003383;transform:translateY(-1px)}

/* Wide variant: two-column layout with description on the right */
.nm-org-card__layout{display:block}
.nm-org-card--wide{
  width:auto;max-width:calc(100vw - 24px);
  padding:20px 22px;
}
.nm-org-card--wide .nm-org-card__layout{
  display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:stretch;
}
.nm-org-card--wide .nm-org-card__main{
  display:flex;flex-direction:column;min-width:0;
}
.nm-org-card--wide .nm-org-card__cta{margin-top:auto}
.nm-org-card__desc{
  font-size:13.5px;line-height:1.55;color:#0E1B33;
  border-left:1px solid #EEF2F8;padding-left:22px;
  max-height:520px;overflow-y:auto;
  min-width:0;
}
.nm-org-card__desc > *:first-child{margin-top:0}
.nm-org-card__desc > *:last-child{margin-bottom:0}
.nm-org-card__desc p{margin:0 0 10px}
.nm-org-card__desc h4{
  font-size:14px;font-weight:800;color:#0046AD;
  text-transform:uppercase;letter-spacing:.04em;
  margin:14px 0 8px;
}
.nm-org-card__desc h5{
  font-size:13px;font-weight:700;color:#0E1B33;
  margin:10px 0 6px;
}
.nm-org-card__desc ul{margin:0 0 10px;padding-left:18px}
.nm-org-card__desc li{margin:0 0 4px}
.nm-org-card__desc b{font-weight:700}
@media (max-width:980px){
  .nm-org-card--wide .nm-org-card__layout{grid-template-columns:1fr;gap:14px}
  .nm-org-card__desc{border-left:none;border-top:1px solid #EEF2F8;padding-left:0;padding-top:14px;max-height:360px}
}

/* TOOLTIP */
.nasoun-map__tooltip{
  position:absolute;left:0;top:0;pointer-events:none;z-index:20;
  background:var(--nm-panel);border:1px solid var(--nm-line);
  border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);
  min-width:240px;max-width:320px;padding:14px 16px;
  font-size:13px;color:var(--nm-ink);
  opacity:0;transition:opacity .15s;
  transform:translate(0,0);
}
.nasoun-map__tooltip[aria-hidden="false"]{opacity:1}
.nm-tt__name{font-size:15px;font-weight:700;color:var(--nm-ink);margin-bottom:4px}
.nm-tt__meta{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--nm-accent);font-weight:700;margin-bottom:10px}
.nm-tt__meta--dim{color:var(--nm-muted)}
.nm-tt__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.nm-tt__list li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--nm-ink-2);
}
.nm-tt__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb, var(--nm-accent) 14%, transparent);
  color:var(--nm-accent);font-weight:700;font-size:11px;flex-shrink:0;
}
.nm-tt__footer{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--nm-line);
  font-size:11px;color:var(--nm-muted);text-transform:uppercase;letter-spacing:.1em;
}

/* RESPONSIVE */
@media (max-width:1024px){
  .nasoun-map__stage{grid-template-columns:1fr;gap:16px}
  .nasoun-map__panel{min-height:auto;max-height:420px}
}
@media (max-width:600px){
  .nasoun-map__stats{gap:20px}
  .nasoun-map__stats b{font-size:22px}
  .nasoun-map__svg-wrap{min-height:320px;padding:12px}
  .nasoun-map__tooltip{display:none}
}