/* ============================================================
   Интерактивная карта регионов (география деятельности) —
   Home/Index.cshtml, секция "ГЕОГРАФИЯ".
   Все правила скоупятся под .geo-widget, чтобы не задевать
   остальной сайт. Источник: C:\tool\Интерактивная карта регионов\
   ============================================================ */

.geo-widget {
    --algo-teal-700: #005E64;
    --algo-green-500: #4ACF9F;
    --algo-mint-400: #97D1C6;
    --algo-mint-300: #CDE9E3;
    --algo-mint-200: #D5F1EA;
    --algo-mint-100: #D8E7E4;
    --algo-orange-500: #F88600;
    --algo-gray-700: #6A6A6A;
    --algo-gray-400: #AAAAAA;
    --algo-white: #FFF;
    --algo-radius-pill: 20px;
    --algo-shadow-card: 0px 4px 24px 0px rgba(148,204,193,0.55);
    --algo-shadow-glow: 0px 0px 6px 0px rgba(74,207,159,0.4);
    --algo-shadow-glow-orange: 0px 0px 8px 0px rgba(248,134,0,0.45);
    --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --f-body: "Roboto", "Segoe UI", system-ui, sans-serif;

    background: var(--algo-white);
    border-radius: 14px;
    padding: 40px 44px 34px;
}

.geo-widget *,
.geo-widget *::before,
.geo-widget *::after {
    box-sizing: border-box;
}

.geo-mapwrap { position: relative; width: 100%; }
.geo-mapwrap svg { display: block; width: 100%; height: auto; }

.geo-region {
    fill: var(--algo-mint-400); stroke: var(--algo-white); stroke-width: 0.6;
    transform-box: fill-box; transform-origin: center; transform: scale(1);
    transition: fill .42s cubic-bezier(.2,.7,.3,1), stroke .42s cubic-bezier(.2,.7,.3,1), stroke-width .42s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1), filter .42s cubic-bezier(.2,.7,.3,1);
    cursor: pointer;
}
.geo-region:hover, .geo-region.geo-active {
    fill: var(--algo-mint-300);
    stroke: var(--algo-orange-500); stroke-width: 1.6;
    transform: scale(1.06);
    filter: drop-shadow(0 4px 10px rgba(248,134,0,0.35));
}

.geo-tip {
    position: absolute; z-index: 10; pointer-events: none; opacity: 0;
    transform: translate(-50%,-140%); transition: opacity .12s ease;
    background: var(--algo-white); color: var(--algo-teal-700);
    font-family: var(--f-display); font-weight: 700; font-size: 13px; white-space: nowrap;
    padding: 7px 13px; border-radius: var(--algo-radius-pill); box-shadow: var(--algo-shadow-card);
}
.geo-tip::after {
    content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--algo-white);
}
.geo-tip.geo-on { opacity: 1; }

.geo-loading { display: flex; align-items: center; justify-content: center; min-height: 420px; color: var(--algo-gray-400); font-family: var(--f-body); font-size: 15px; }

.geo-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.geo-callouts svg.geo-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.geo-callouts svg.geo-leaders line { stroke: var(--algo-orange-500); stroke-width: 1; }
.geo-callouts svg.geo-leaders circle { fill: var(--algo-orange-500); }
.geo-co-pill {
    position: absolute; transform: translate(-50%,-100%);
    background: var(--algo-white); color: var(--algo-teal-700);
    font-family: var(--f-display); font-weight: 700; font-size: 12px; white-space: nowrap;
    padding: 5px 11px; border-radius: var(--algo-radius-pill); box-shadow: var(--algo-shadow-card);
    opacity: 0; transition: opacity .18s ease;
}
.geo-callouts.geo-on .geo-co-pill { opacity: 1; }

.geo-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--algo-mint-100); }
.geo-legend .geo-item { display: flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 15px; color: var(--algo-gray-700); padding: 8px 14px; border: 1px solid var(--algo-mint-200); border-radius: var(--algo-radius-pill); cursor: pointer; transition: background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease; }
.geo-legend .geo-item:hover { background: var(--algo-mint-100); color: var(--algo-teal-700); border-color: var(--algo-mint-300); }
.geo-legend .geo-item.geo-hl { background: var(--algo-mint-100); color: var(--algo-teal-700); box-shadow: inset 0 0 0 1px var(--algo-mint-300); }
.geo-legend .geo-info { margin-left: 2px; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid currentColor; opacity: .5;
    font-family: var(--f-display); font-weight: 700; font-size: 10px; line-height: 14px; text-align: center; }
.geo-legend .geo-item:hover .geo-info, .geo-legend .geo-item.geo-hl .geo-info { opacity: 1; background: var(--algo-teal-700); border-color: var(--algo-teal-700); color: var(--algo-white); }
.geo-legend .geo-mk { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 3px solid var(--algo-white); }
.geo-legend .geo-mk-office { background: var(--algo-orange-500); box-shadow: var(--algo-shadow-glow-orange); }
.geo-legend .geo-mk-support { background: var(--algo-teal-700); box-shadow: 0 0 6px rgba(0,94,100,.35); }
.geo-legend .geo-mk-dds { background: var(--algo-green-500); box-shadow: var(--algo-shadow-glow); }

.geo-note {
    margin-top: 14px; min-height: 44px; display: flex; align-items: flex-start; gap: 10px;
    max-width: 760px; font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: var(--algo-teal-700);
    background: var(--algo-mint-100); border-radius: 8px; padding: 12px 16px;
    opacity: 0; transform: translateY(-4px); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}
.geo-note.geo-on { opacity: 1; transform: none; }
.geo-note .geo-nb { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--algo-teal-700); }

.geo-offices { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.geo-sups { z-index: 5; }
.geo-sup-labels { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.geo-sup-labels svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease .1s; }
.geo-sup-labels.geo-on svg { opacity: 1; }
.geo-sup-labels svg line { stroke: var(--algo-teal-700); stroke-width: 1; opacity: .55; }
.geo-dds-dot {
    position: absolute; transform: translate(-50%,-50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--algo-green-500); border: 2px solid var(--algo-white);
    box-shadow: var(--algo-shadow-glow);
    pointer-events: auto; cursor: pointer;
}
.geo-sl-pill {
    position: absolute; transform: translate(-50%,-50%); white-space: nowrap;
    background: var(--algo-white); color: var(--algo-teal-700);
    font-family: var(--f-display); font-weight: 700; font-size: 11px; line-height: 1;
    padding: 4px 9px; border-radius: var(--algo-radius-pill); box-shadow: var(--algo-shadow-card);
    opacity: 0; transition: opacity .3s ease, transform .38s cubic-bezier(.2,.7,.3,1);
    transform: translate(-50%,-50%) scale(.9);
}
.geo-sup-labels.geo-on .geo-sl-pill:not(.geo-hid) { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.geo-sl-pill.geo-show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.geo-sl-pill.geo-muted { opacity: 0 !important; }

.geo-office { position: absolute; transform: translate(-50%,-50%); width: 0; height: 0; }
.geo-office .geo-o-dot {
    position: absolute; left: 0; top: 0; transform: translate(-50%,-50%);
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--algo-orange-500); border: 3px solid var(--algo-white);
    box-shadow: var(--algo-shadow-glow-orange);
    pointer-events: auto; cursor: pointer;
}
.geo-office .geo-o-halo { position: absolute; inset: 0; border-radius: 50%; background: var(--algo-orange-500); opacity: .4; animation: geo-opulse 2.6s ease-out infinite; }
@keyframes geo-opulse { 0%{transform:scale(1); opacity:.45;} 70%{transform:scale(3.4); opacity:0;} 100%{opacity:0;} }
.geo-office .geo-o-pill {
    position: absolute; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: var(--algo-white); color: var(--algo-teal-700);
    font-family: var(--f-display); font-weight: 700; font-size: 12px;
    padding: 6px 12px 6px 9px; border-radius: var(--algo-radius-pill); box-shadow: var(--algo-shadow-card);
    opacity: 1; transition: opacity .18s ease; pointer-events: none;
}
.geo-offices.geo-dim .geo-o-pill { opacity: 0; }
.geo-office .geo-o-pill svg { width: 14px; height: 14px; display: block; }
.geo-office .geo-o-pill svg path { fill: var(--algo-orange-500); }
.geo-office.geo-lbl-top .geo-o-pill { left: 0; bottom: 12px; transform: translateX(-50%); }
.geo-office.geo-lbl-bottom .geo-o-pill { left: 0; top: 12px; transform: translateX(-50%); }

.geo-sup { position: absolute; width: 0; height: 0; }
.geo-sup .geo-s-dot {
    position: absolute; left: 0; top: 0; transform: translate(-50%,-50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--algo-teal-700); border: 2px solid var(--algo-white);
    box-shadow: 0 0 6px rgba(0,94,100,.45);
    pointer-events: auto; cursor: pointer; transition: transform .15s ease;
}
.geo-sup:hover .geo-s-dot { transform: translate(-50%,-50%) scale(1.35); }
.geo-sup .geo-s-pill {
    position: absolute; white-space: nowrap;
    background: var(--algo-white); color: var(--algo-teal-700);
    font-family: var(--f-display); font-weight: 700; font-size: 11px; line-height: 1;
    padding: 4px 9px; border-radius: var(--algo-radius-pill); box-shadow: var(--algo-shadow-card);
    opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 2;
}
.geo-sup:hover .geo-s-pill { opacity: 1; }
.geo-sup.geo-lbl-top .geo-s-pill { left: 0; bottom: 9px; transform: translateX(-50%); }
.geo-sup.geo-lbl-bottom .geo-s-pill { left: 0; top: 9px; transform: translateX(-50%); }
.geo-sup.geo-lbl-left .geo-s-pill { right: 9px; top: 0; transform: translateY(-50%); }
.geo-sup.geo-lbl-right .geo-s-pill { left: 9px; top: 0; transform: translateY(-50%); }