/* =============================================================
   VILLAGE DETAIL MAP REDESIGN v2 — full UI rework
   Точка входа — модификатор .vp-map--redesign на <section>.
   Все правила за гейтом min-width: 1024px (десктоп).
   ============================================================= */

.vp-map.vp-map--redesign {
    position: relative;
}

/* Шрифт всего редизайна — PT Sans (как фильтр на главной) */
.vp-map.vp-map--redesign .vp-map-topbar,
.vp-map.vp-map--redesign .vp-map-topbar *,
.vp-map.vp-map--redesign .vp-map-rightcol,
.vp-map.vp-map--redesign .vp-map-rightcol *,
.vp-map.vp-map--redesign .vp-map-bottombar,
.vp-map.vp-map--redesign .vp-map-bottombar *,
.vp-map.vp-map--redesign .vp-map-legend-popup,
.vp-map.vp-map--redesign .vp-map-legend-popup * {
    font-family: "PT Sans", Arial, sans-serif;
}

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map--iframe,
    .vp-map--redesign #detail_map_new {
        border-radius: 24px;
        overflow: hidden;
        /* Карта не должна быть выше viewport'а — иначе нижний топбар
           (Инфраструктура / Дорожки) уезжает вниз и юзер не видит его
           без скролла. На 1920×1080 дефолтная высота 1135px → перекрывает. */
        max-height: calc(100vh - 80px) !important;
    }
}

/* --- 1) Верхний pill-бар --- */
.vp-map-topbar { display: none; }
/* Скрываем webkit-скроллбар у топбара (см. overflow-x:auto в @media) */
.vp-map--redesign .vp-map-topbar::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        top: 16px;
        left: 16px;
        right: 16px;
        z-index: 13;
        flex-wrap: nowrap;
        padding: 8px 8px 8px 12px;
        background-color: rgba(255, 255, 255, 0.97);
        border-radius: 60px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        /* На узких экранах (1024-1280) суммарная ширина чипов + поиск + сброс +
           легенда + 3D обзор может превышать ширину контейнера. Включаем
           горизонтальный скролл со скрытым скроллбаром — пользователь сможет
           проматывать чипы свайпом/трекпадом, layout не разваливается. */
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge legacy */
        box-sizing: border-box;
        font-family: var(--font-family, sans-serif);
    }
}

.vp-map-topbar__back {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background-color: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #1f2937;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color .15s;
}
.vp-map-topbar__back:hover { background-color: #e5e7eb; }
.vp-map-topbar__back svg { width: 16px; height: 16px; }

/* Поиск адреса */
.vp-map-topbar__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    height: 40px;
    flex-shrink: 0;
    width: 220px;
    transition: border-color .15s;
    color: #6b7280;
}
.vp-map-topbar__search:focus-within { border-color: #00bf3f; }
.vp-map-topbar__search svg { width: 18px; height: 18px; flex-shrink: 0; color: #9ca3af; }
.vp-map-topbar__search input,
.vp-map-topbar__search input:hover,
.vp-map-topbar__search input:focus,
.vp-map-topbar__search input:focus-visible {
    /* ZFX 2026-05-31: жёстко гасим любую UA/глобальную рамку поля при hover/focus. */
    border: none !important; outline: none !important; box-shadow: none !important;
    -webkit-appearance: none; appearance: none;
    background: transparent;
    font: inherit; font-size: 14px; color: #1f2937;
    width: 100%;
}
.vp-map-topbar__search input::placeholder { color: #9ca3af; }

/* Pin посёлка для «overview-режима» (zoom < 14). Берём готовый SVG
   из каталога посёлков (c-sel-map-pin-v3.svg) — единый стиль с listing'ом. */
.vp-map-village-pin {
    width: 48px;
    height: 60px;
    margin-left: -24px;
    margin-top: -54px; /* острие пина указывает в координату */
    pointer-events: none;
    will-change: transform;
}
.vp-map-village-pin img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}

/* === Address autocomplete dropdown ====================================
   Yandex Suggest API → подсказки при вводе адреса. Position: fixed
   относительно viewport (поэтому на мобиле/десктопе работает одинаково). */
.vp-map-addr-suggest {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 6px;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 14px;
    color: #1f2937;
    -webkit-overflow-scrolling: touch;
}
.vp-map-addr-suggest[hidden] { display: none; }
.vp-map-addr-suggest__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s ease;
}
.vp-map-addr-suggest__item:hover,
.vp-map-addr-suggest__item:focus {
    background: #f1f5f9;
    outline: none;
}
.vp-map-addr-suggest__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #94a3b8;
}
.vp-map-addr-suggest__text { min-width: 0; flex: 1; }
.vp-map-addr-suggest__title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-map-addr-suggest__subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-map-addr-suggest__empty {
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

/* Чипы фильтра */
.vp-map-topbar__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background-color: #fff;
    border: 1px solid #eef0f3;     /* как .zf-pill на главной */
    border-radius: 999px;
    font-size: 14px;
    color: #5a6c7c;                /* серо-голубой как на главной */
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    text-decoration: none;
    font-family: inherit;
    flex-shrink: 0;
}
.vp-map-topbar__chip:hover { border-color: #d1d5db; background-color: #fafafa; color: #2c3e50; }
.vp-map-topbar__chip.is-active,
.vp-map-topbar__chip.is-selected,
.vp-map-topbar__chip.is-filtered,
.vp-map-topbar__chip.has-filter,
.vp-map-topbar__chip.is-open {
    border-color: #00bf3f;
    color: #00bf3f;
}
/* Когда фильтр выбран — текст значения чуть жирнее, для акцента. */
.vp-map-topbar__chip.is-active span:first-child,
.vp-map-topbar__chip.is-filtered span:first-child,
.vp-map-topbar__chip.has-filter span:first-child {
    font-weight: 500;
}

.vp-map-topbar__chip-caret {
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    margin-left: 2px;
    transition: transform .18s ease;
    transform-origin: 50% 50%;
}
/* При открытом popup — стрелка вверх */
.vp-map-topbar__chip.is-open .vp-map-topbar__chip-caret {
    transform: rotate(-135deg) translate(-1px, -1px);
}
.vp-map-topbar__chip-plus {
    font-size: 16px; font-weight: 400;
    line-height: 1; color: #6b7280;
    margin-left: 2px;
}

/* Сбросить */
.vp-map-topbar__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    margin-left: auto;
    flex-shrink: 0;
}
.vp-map-topbar__reset:hover { color: #1f2937; }
.vp-map-topbar__reset svg { width: 14px; height: 14px; }

/* Легенда (button) */
.vp-map-topbar__legend-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background-color: #f3f4f6;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    font-family: inherit;
    flex-shrink: 0;
}
.vp-map-topbar__legend-btn:hover { background-color: #e5e7eb; }
.vp-map-topbar__legend-btn.is-open { background-color: #e5e7eb; }
.vp-map-topbar__legend-btn .vp-map-topbar__chip-caret-svg {
    width: 14px; height: 14px;
    transition: transform .15s;
}
.vp-map-topbar__legend-btn.is-open .vp-map-topbar__chip-caret-svg { transform: rotate(180deg); }

/* === ZFX redesign: full-screen модалка для 3D-тура ===
   Открывается поверх всего сайта при клике на 3D-ссылки. Кнопка «Назад»
   в стиле моб .vp-mmap-topbar__back (белый круг с шевроном «<»). */
.vp-map-tour-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    /* !important перебивает глобальное `section > div { max-width: 1440px }`,
       которое иначе зажимало модалку в 1440px на широких экранах. */
    max-width: none !important;
    max-height: none !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
}
.vp-map-tour-modal[hidden] { display: none !important; }
.vp-map-tour-modal__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Кнопка «Назад» из 3D-тура — крупная красная pill с текстом
   в верхнем ЛЕВОМ углу. Красный + контрастная белая обводка делают её хорошо
   заметной на любом фоне 3D-тура. */
.vp-map-tour-modal__back {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    right: auto;
    z-index: 100000;
    min-width: 0;
    height: 48px;
    padding: 0 20px 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dc2626;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-family: 'PT Sans', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Текст «Назад» — добавляется через ::after, не требует HTML-изменений */
.vp-map-tour-modal__back::after {
    content: 'Назад';
}
.vp-map-tour-modal__back:hover {
    background: #ef4444;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}
.vp-map-tour-modal__back:active {
    transform: scale(0.96);
    background: #b91c1c;
}
.vp-map-tour-modal__back svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
    flex-shrink: 0;
}
/* Когда модалка открыта — лочим скролл фона */
html.vp-map-tour-locked,
html.vp-map-tour-locked body { overflow: hidden !important; }

/* === ZFX redesign: воздушный шар-CTA «Панорама посёлка» ===
   Декоративный плавающий элемент в левом-нижнем углу карты. Клик ведёт
   на 3D-тур посёлка (тот же URL что у кнопки .vp-map-topbar__3d). */
.vp-map-balloon-cta {
    position: absolute;
    top: 220px;      /* ниже зоны где обычно появляются edge-indicators сверху */
    left: 24px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    /* «дышит» — лёгкое покачивание вверх-вниз */
    animation: vp-balloon-bob 3.2s ease-in-out infinite;
    transition: transform .2s ease;
}
.vp-map-balloon-cta__svg {
    width: 52px;
    height: 70px;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 10px rgba(0, 191, 63, 0.28));
}
.vp-map-balloon-cta__bubble {
    position: relative;
    margin-left: 10px;
    padding: 8px 14px 8px 12px;
    background: #ffffff;
    color: #00bf3f;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
/* хвостик облака-подсказки указывает на корзину шара */
.vp-map-balloon-cta__bubble::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    margin-top: -7px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-right-color: #ffffff;
}
.vp-map-balloon-cta:hover {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.03);
}
.vp-map-balloon-cta:hover .vp-map-balloon-cta__svg {
    filter: drop-shadow(0 8px 14px rgba(0, 191, 63, 0.45));
}

/* ZFX redesign: balloon привязан к YMapMarker на координате центра посёлка.
   YMapMarker ставит top-left HTML-элемента в координату; transform(-26,-70)
   совмещает basket-bottom-center SVG (26×70) с этой точкой → балон «висит»
   над посёлком, корзина внизу касается центра. */
.vp-map-balloon-cta--anchored {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: auto !important;          /* z-index управляется маркером */
    animation: vp-balloon-anchored-bob 3.2s ease-in-out infinite;
    transform-origin: 26px 70px;
    will-change: transform;
}
/* Тень под шаром на «земле» — эффект объёма и парения над картой.
   Эллипс под корзиной с радиальным градиентом → плавно растворяется по краям.
   Положение: basket-bottom + 4px (чуть ниже корзины, на «земле»). */
.vp-map-balloon-cta--anchored::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 74px;
    width: 44px;
    height: 12px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(15, 23, 42, 0.45) 0%,
        rgba(15, 23, 42, 0.25) 40%,
        rgba(15, 23, 42, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    /* Параллакс: тень слегка «дышит» в такт балону — расширяется когда шар выше */
    animation: vp-balloon-shadow-bob 3.2s ease-in-out infinite;
    transform-origin: 50% 50%;
    filter: blur(1px);
}
/* Bubble в anchored режиме — всегда видна сверху балона как tooltip. */
.vp-map-balloon-cta--anchored .vp-map-balloon-cta__bubble {
    display: inline-block;
    position: absolute;
    left: 26px;             /* над центром SVG (basket-center X = 26) */
    bottom: 70px;           /* над корзиной (basket-top Y = 70 от anchor) */
    margin: 0 0 12px;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
    /* Усиленная тень для читаемости на любом фоне карты */
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), 0 1px 3px rgba(15, 23, 42, 0.15);
}
/* Хвостик bubble — указывает ВНИЗ (к балону) */
.vp-map-balloon-cta--anchored .vp-map-balloon-cta__bubble::before {
    left: 50%;
    top: auto;
    bottom: -6px;
    margin: 0 0 0 -7px;
    border: 7px solid transparent;
    border-right-color: transparent;
    border-top-color: #ffffff;
}

@keyframes vp-balloon-anchored-bob {
    0%, 100% { transform: translate(-26px, -70px); }
    50%      { transform: translate(-26px, -75px); }
}
/* Когда шар выше (50% кейфрейма) — тень шире и бледнее (имитация «дальше от земли») */
@keyframes vp-balloon-shadow-bob {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50%      { transform: translateX(-50%) scale(1.18); opacity: 0.72; }
}
.vp-map-balloon-cta--anchored:hover {
    transform: translate(-26px, -73px) scale(1.06) !important;
    animation-play-state: paused;
}
.vp-map-balloon-cta--anchored:hover .vp-map-balloon-cta__svg {
    filter: drop-shadow(0 8px 14px rgba(0, 191, 63, 0.55));
}

@keyframes vp-balloon-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* На мобильной — anchored-шар над посёлком показываем (приплыл «по запросу
   руководства»). Старая статическая позиция (top:220px left:24px) на мобиле
   была бы плохой — её скрываем, оставляя только anchored-режим. */
@media (max-width: 1023px) {
    /* Не-anchored (старая static) версия — скрыта */
    .vp-map-balloon-cta:not(.vp-map-balloon-cta--anchored) { display: none !important; }
    /* Anchored — чуть меньше + компактная плашка-подпись */
    .vp-map-balloon-cta--anchored .vp-map-balloon-cta__svg {
        width: 40px;
        height: 54px;
    }
    .vp-map-balloon-cta--anchored {
        transform-origin: 20px 54px;
    }
    /* Пересчитываем bob под новые размеры (basket-center=20px, basket-bottom=54px) */
    .vp-map-balloon-cta--anchored {
        animation-name: vp-balloon-anchored-bob-mobile;
    }
    .vp-map-balloon-cta--anchored::after {
        left: 20px;
        top: 58px;
        width: 34px;
        height: 9px;
    }
    .vp-map-balloon-cta--anchored .vp-map-balloon-cta__bubble {
        left: 20px;
        bottom: 54px;
        font-size: 11px;
        padding: 6px 10px;
        margin: 0 0 8px;
    }
}
@keyframes vp-balloon-anchored-bob-mobile {
    0%, 100% { transform: translate(-20px, -54px); }
    50%      { transform: translate(-20px, -59px); }
}

/* 3D обзор */
.vp-map-topbar__3d {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 14px;
    color: #00bf3f;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
    font-family: inherit;
    flex-shrink: 0;
    font-weight: 600;
}
.vp-map-topbar__3d:hover {
    background-color: #00bf3f; color: #fff;
    border-color: #00bf3f;
}

/* --- 2) Правая колонка: 4 круглых кнопки --- */
.vp-map-rightcol { display: none; }

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map-rightcol {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        z-index: 12;
    }
}

.vp-map-rightcol__btn {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    color: #1f2937;
    cursor: pointer;
    padding: 0;
    transition: all .15s;
}
.vp-map-rightcol__btn:hover {
    border-color: #1f2937;
    background-color: #fafafa;
}
.vp-map-rightcol__btn.is-active {
    background-color: #00bf3f;
    border-color: #00bf3f;
    color: #ffffff;
}
.vp-map-rightcol__btn svg { width: 20px; height: 20px; }

/* === Группа Схема/Спутник — единый pill с двумя кнопками внутри === */
.vp-map-rightcol__group--views {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 4px;
    gap: 4px;
}
/* Кнопки внутри pill — без собственного бордера/тени, чтоб не дублировать рамку */
.vp-map-rightcol__group--views .vp-map-rightcol__btn {
    width: 40px; height: 40px;
    border: none;
    box-shadow: none;
    background-color: transparent;
}
.vp-map-rightcol__group--views .vp-map-rightcol__btn:hover {
    background-color: #f3f4f6;
}
.vp-map-rightcol__group--views .vp-map-rightcol__btn.is-active {
    background-color: #00bf3f;
    color: #ffffff;
}

/* Зум-кнопки чуть отделены, как на референсе */
.vp-map-rightcol__btn--zoom-in { margin-top: 4px; }
.vp-map-rightcol__btn--zoom-out { margin-top: 0; }

/* === Кнопка «Маршрут/Локация» — зелёная по умолчанию === */
.vp-map-rightcol__btn--locate {
    background-color: #00bf3f;
    border-color: #00bf3f;
    color: #ffffff;
    margin-top: 4px;
}
.vp-map-rightcol__btn--locate:hover {
    background-color: #00a838;
    border-color: #00a838;
}
.vp-map-rightcol__btn--locate.is-active {
    background-color: #008a2f;
    border-color: #008a2f;
}

/* --- 3) Нижний центр: Инфраструктура + Трафик --- */
.vp-map-bottombar { display: none; }

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map-bottombar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 13;
        font-family: var(--font-family, sans-serif);
    }
}

.vp-map-bottombar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s;
}
.vp-map-bottombar__toggle:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.vp-map-bottombar__toggle input[type=checkbox] {
    position: absolute;
    opacity: 0; pointer-events: none;
    width: 0; height: 0;
}
.vp-map-bottombar__switch {
    width: 44px; height: 26px;
    background-color: #d1d5db;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background-color .2s;
}
.vp-map-bottombar__switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left .2s;
}
.vp-map-bottombar__toggle.is-on .vp-map-bottombar__switch { background-color: #00bf3f; }
.vp-map-bottombar__toggle.is-on .vp-map-bottombar__switch::after { left: 20px; }
.vp-map-bottombar__label {
    font-size: 15px; color: #1f2937; font-weight: 500;
    white-space: nowrap;
}

/* --- 3.1) Группа Инфраструктура (master toggle + chevron + меню) --- */
.vp-map-bottombar__group {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transition: box-shadow .15s, background-color .15s;
}
.vp-map-bottombar__group:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.vp-map-bottombar__group .vp-map-bottombar__toggle {
    background: transparent;
    box-shadow: none;
    padding: 8px 0 8px 8px;
}
.vp-map-bottombar__group .vp-map-bottombar__toggle:hover { box-shadow: none; }
.vp-map-bottombar__chevron {
    border: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    margin: 0 6px 0 4px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5a6c7c;
    cursor: pointer;
    transition: background-color .15s, transform .2s;
}
.vp-map-bottombar__chevron:hover { background-color: #f4f6f9; }
.vp-map-bottombar__chevron svg { width: 18px; height: 18px; }
.vp-map-bottombar__group.is-menu-open .vp-map-bottombar__chevron { transform: rotate(180deg); }

/* Popup-меню над панелью с категориями */
.vp-map-bottombar__menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 6px;
    z-index: 14;
    font-family: var(--font-family, sans-serif);
}
.vp-map-bottombar__menu[hidden] { display: none; }
.vp-map-bottombar__menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background-color: #fff;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
}
.vp-map-bottombar__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: #5a6c7c;
    font-size: 14px;
    line-height: 1;
    transition: background-color .12s, color .12s;
}
.vp-map-bottombar__menu-item:hover { background-color: #f4f6f9; }
.vp-map-bottombar__menu-item.is-on { color: #2c3e50; }
.vp-map-bottombar__menu-item-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: inherit;
}
.vp-map-bottombar__menu-item-icon svg { width: 22px; height: 22px; }
.vp-map-bottombar__menu-item-label {
    flex: 1 1 auto;
    white-space: nowrap;
    font-weight: 500;
}
/* Превью линии маршрута (трафик-категории): сплошная зелёная для bike,
   пунктирная синяя для foot — точно как на карте. */
.vp-map-bottombar__menu-item-preview {
    width: 36px;
    height: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vp-map-bottombar__menu-item-preview svg {
    width: 100%;
    height: 100%;
    display: block;
}
.vp-map-bottombar__menu-item-check {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    color: #fff;
    transition: background-color .12s, border-color .12s;
}
.vp-map-bottombar__menu-item-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity .12s; }
.vp-map-bottombar__menu-item.is-on .vp-map-bottombar__menu-item-check {
    background-color: #00bf3f;
    border-color: #00bf3f;
}
.vp-map-bottombar__menu-item.is-on .vp-map-bottombar__menu-item-check svg { opacity: 1; }

/* --- 4) Легенда (top-right popup) --- */
.vp-map-legend-popup { display: none; }

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map-legend-popup:not([hidden]) {
        display: block;
        position: absolute;
        top: 80px;
        right: 80px;
        z-index: 14;
        min-width: 240px;
        padding: 14px 18px;
        background-color: #fff;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
        font-family: var(--font-family, sans-serif);
    }
}
/* Заголовок и подсказка над тирами */
.vp-map-legend-popup__head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}
.vp-map-legend-popup__title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
}
.vp-map-legend-popup__hint {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vp-map-legend-popup__hint::before {
    content: '\1F446'; /* 👆 */
    font-size: 12px;
    line-height: 1;
}

.vp-map-legend-popup__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vp-map-legend-popup__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.3;
    white-space: nowrap;
    /* button-стиль обнуляем + делаем явно кликабельным */
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 8px 10px 8px 12px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
    transition: background-color .15s, border-color .15s, opacity .15s, transform .1s;
}
.vp-map-legend-popup__label {
    flex: 1;
    min-width: 0;
}
.vp-map-legend-popup__eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: #9ca3af;
    transition: color .15s;
}
.vp-map-legend-popup__eye svg { width: 18px; height: 18px; }

/* === Статичная секция «Обозначения» — пояснения для статусов плотов === */
.vp-map-legend-popup__sep {
    height: 1px;
    background: #e5e7eb;
    margin: 10px 4px 8px;
}
.vp-map-legend-popup__sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin: 0 0 6px 4px;
    font-weight: 600;
}
.vp-map-legend-popup__statuses {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Static rows — без кликов и hover-эффекта */
.vp-map-legend-popup__row--static {
    cursor: default;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 10px 6px 12px;
}
.vp-map-legend-popup__row--static:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
}
.vp-map-legend-popup__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
/* Серый домик — продано */
.vp-map-legend-popup__icon--sold {
    color: #94a3b8;
}
.vp-map-legend-popup__icon--sold svg { width: 22px; height: 22px; }
/* Синий кружок — резерв (как на карте, цвет #001EFF) */
.vp-map-legend-popup__icon--reserved {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #001EFF;
    margin: 4px;
}
/* Парный участок — эллипс-обводка с двумя кружками внутри (как «лассо»),
   соответствует новому дизайну маркера пары на карте. */
.vp-map-legend-popup__icon--paired {
    width: 16px; height: 24px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vp-map-legend-popup__icon--paired svg {
    width: 100%; height: 100%;
    display: block;
}
/* Кольца расходящиеся — акция */
.vp-map-legend-popup__icon--action {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow:
        0 0 0 3px rgba(236, 72, 153, 0.30),
        0 0 0 6px rgba(236, 72, 153, 0.15);
}

button.vp-map-legend-popup__row:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}
button.vp-map-legend-popup__row:hover .vp-map-legend-popup__eye {
    color: #1f2937;
}
button.vp-map-legend-popup__row:active {
    transform: translateY(0);
}

.vp-map-legend-popup__row.is-off {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
}
.vp-map-legend-popup__row.is-off .vp-map-legend-popup__label {
    text-decoration: line-through;
}
.vp-map-legend-popup__row.is-off .vp-map-legend-popup__dot {
    box-shadow: none;
    border-color: #e5e7eb;
    opacity: 0.5;
}
.vp-map-legend-popup__row.is-off .vp-map-legend-popup__eye {
    color: #9ca3af;
}
.vp-map-legend-popup__dot {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* === ZFX redesign: карточка участка ====================================== */
.vp-map-plotcard { display: none; }
/* Универсальное правило: HTML-атрибут hidden должен побеждать display: inline-flex */
.vp-map-plotcard [hidden] { display: none !important; }

@media (min-width: 1024px) {
    /* Fallback (fixed-overlay) режим — если не удалось создать popover-маркер */
    .vp-map--redesign .vp-map-plotcard:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 16px;
        z-index: 14;
        width: 360px;
        max-width: calc(100vw - 32px);
        max-height: calc(100% - 120px);
        overflow-y: auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
        font-family: var(--font-family, sans-serif);
        gap: 16px;
        box-sizing: border-box;
    }

    /* Popover-режим: карточка встроена в YMapMarker у плота.
       Компактные размеры (290px) — не должна закрывать значительную часть карты
       на 1920px×22" мониторах. */
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover:not([hidden]) {
        position: absolute;
        top: auto;
        left: auto;
        /* Bottom-center карточки совмещён с координатой плота, со смещением вверх */
        transform: translate(-50%, calc(-100% - 16px));
        width: 290px;
        max-width: calc(100vw - 32px);
        max-height: 65vh;
        overflow-y: auto;
        z-index: 10000;
        padding: 14px 16px 16px;
        gap: 10px;
        border-radius: 16px;
    }
    /* Компактные размеры внутри popover-режима */
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__title {
        font-size: 18px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__area-line,
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__kadastr {
        font-size: 13px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__price {
        font-size: 18px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__price-sotka {
        font-size: 11px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__book {
        padding: 9px 14px;
        font-size: 13px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__mortgage {
        padding: 9px 14px;
        font-size: 13px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__mortgage svg {
        width: 16px; height: 16px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__cta {
        padding: 11px 14px;
        font-size: 14px;
        gap: 10px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__cta-icon {
        width: 28px; height: 28px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__cta-icon svg {
        width: 15px; height: 15px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__included summary {
        padding: 10px 12px;
        font-size: 13px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__included-list {
        padding: 0 12px 10px;
        font-size: 12px;
        gap: 6px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__close {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__close svg,
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__fav svg {
        width: 16px; height: 16px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__paired-note {
        padding: 8px 10px;
        font-size: 12px;
    }
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover .vp-map-plotcard__action {
        padding: 8px 10px;
        font-size: 12px;
    }
    /* Указатель-уголок вниз от карточки к плоту */
    .vp-map--redesign .vp-map-plotcard.vp-map-plotcard--popover::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -8px;
        transform: translateX(-50%) rotate(45deg);
        width: 16px; height: 16px;
        background-color: #fff;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
        z-index: -1;
    }
}

.vp-map-plotcard__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.vp-map-plotcard__badges-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.vp-map-plotcard__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.vp-map-plotcard__badge--promo {
    background-color: #00bf3f;
    color: #ffffff;
}
.vp-map-plotcard__badge--feature {
    background-color: transparent;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}
.vp-map-plotcard__fav,
.vp-map-plotcard__close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    transition: background-color .15s, color .15s;
    padding: 0;
}
.vp-map-plotcard__fav { margin-left: auto; }
.vp-map-plotcard__fav:hover { color: #ef4444; background-color: #fef2f2; }
.vp-map-plotcard__fav.is-active { color: #ef4444; }
.vp-map-plotcard__fav.is-active svg path { fill: currentColor; }
.vp-map-plotcard__fav svg,
.vp-map-plotcard__close svg { width: 20px; height: 20px; }
.vp-map-plotcard__close:hover { background-color: #f3f4f6; color: #1f2937; }

.vp-map-plotcard__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}
/* Площадь — отдельной строкой под заголовком, мельче и нейтральнее */
.vp-map-plotcard__area-line {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.3;
    color: #5a6c7c;
    font-weight: 500;
}
/* Кадастровый номер — тот же стиль что и площадь, под ней */
.vp-map-plotcard__kadastr {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.3;
    color: #5a6c7c;
    font-weight: 500;
}
.vp-map-plotcard__kadastr[hidden] { display: none; }

/* Блок акции — деликатная нижняя плашка (показывается только при info.action) */
.vp-map-plotcard__action {
    padding: 10px 12px;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.4;
}
.vp-map-plotcard__action[hidden] { display: none; }
.vp-map-plotcard__action-name {
    font-weight: 500;
    color: #1f2937;
}
.vp-map-plotcard__action-meta {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #92400e;
}
.vp-map-plotcard__action-price { font-weight: 500; }

.vp-map-plotcard__included {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0;
    background-color: #fafafa;
}
.vp-map-plotcard__included summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}
.vp-map-plotcard__included summary::-webkit-details-marker { display: none; }
.vp-map-plotcard__chev {
    width: 18px; height: 18px;
    color: #6b7280;
    transition: transform .15s;
}
.vp-map-plotcard__included[open] .vp-map-plotcard__chev { transform: rotate(180deg); }
.vp-map-plotcard__included-list {
    margin: 0;
    list-style: none;
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}
.vp-map-plotcard__included-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.vp-map-plotcard__included-list li > span:last-child {
    color: #1f2937;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.vp-map-plotcard__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vp-map-plotcard__price-block { min-width: 0; }
.vp-map-plotcard__price {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
}
.vp-map-plotcard__price-sotka {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.vp-map-plotcard__book {
    flex-shrink: 0;
    padding: 12px 18px;
    background-color: transparent;
    color: #00bf3f;
    border: 1px solid #00bf3f;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    font-family: inherit;
}
.vp-map-plotcard__book:hover { background-color: #00bf3f; color: #fff; }

/* Кнопка «В Ипотеку» — secondary action */
.vp-map-plotcard__mortgage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
    font-family: inherit;
    width: 100%;
}
.vp-map-plotcard__mortgage:hover { background-color: #f9fafb; border-color: #d1d5db; }
.vp-map-plotcard__mortgage svg { width: 18px; height: 18px; color: #00bf3f; }

.vp-map-plotcard__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background-color: #00bf3f;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s;
    font-family: inherit;
    width: 100%;
}
.vp-map-plotcard__cta:hover { background-color: #00a838; }
.vp-map-plotcard__cta-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: rgba(255,255,255,0.18);
    border-radius: 50%;
    flex-shrink: 0;
}
.vp-map-plotcard__cta-icon svg { width: 18px; height: 18px; }

.vp-map-plotcard__paired-note {
    padding: 10px 12px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.4;
}
.vp-map-plotcard__paired-note a {
    color: #00bf3f;
    font-weight: 500;
    text-decoration: underline;
}

/* === ZFX redesign: POI-карточка инфраструктуры (right) ================== */
.vp-map-poicard { display: none; }
.vp-map-poicard [hidden] { display: none !important; }

@media (min-width: 1024px) {
    /* ZFX redesign v3: светлый POI-card в стиле сайта (белый + зелёный акцент). */
    .vp-map--redesign .vp-map-poicard:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        right: 88px;
        z-index: 14;
        width: 320px;
        max-width: calc(100vw - 32px);
        max-height: calc(100% - 120px);
        overflow-y: auto;
        padding: 18px 18px 16px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
        font-family: "PT Sans", Arial, sans-serif;
        gap: 12px;
        box-sizing: border-box;
        color: #0f172a;
        /* Цветной accent-strip сверху — связь с цветом edge-indicator. */
        border-top: 4px solid #00bf3f;
    }
    /* Popover-режим: карточка встроена в YMapMarker у самого POI. */
    .vp-map--redesign .vp-map-poicard.vp-map-poicard--popover:not([hidden]) {
        position: absolute;
        top: auto;
        right: auto;
        left: auto;
        transform: translate(-50%, calc(-100% - 18px));
        width: 320px;
        max-width: calc(100vw - 32px);
        max-height: 70vh;
        z-index: 10000;
    }
    .vp-map--redesign .vp-map-poicard.vp-map-poicard--popover::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -7px;
        transform: translateX(-50%) rotate(45deg);
        width: 14px; height: 14px;
        background: #ffffff;
        box-shadow: 4px 4px 6px rgba(15, 23, 42, 0.10);
        z-index: -1;
    }
}

.vp-map-poicard__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.vp-map-poicard__head-text { flex: 1; min-width: 0; }
.vp-map-poicard__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.vp-map-poicard__meta {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 999px;
}
.vp-map-poicard__close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    transition: background-color .15s, color .15s, transform .12s;
}
.vp-map-poicard__close:hover { background-color: #e2e8f0; color: #0f172a; }
.vp-map-poicard__close:active { transform: scale(0.94); }
.vp-map-poicard__close svg { width: 16px; height: 16px; }

.vp-map-poicard__address {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    padding: 8px 12px;
    background-color: #f8fafc;
    border-radius: 10px;
    margin: 0;
}
/* ZFX redesign: подробное описание объекта (вторая строка и далее из админ-поля
   «Описание»). Зелёный акцент-border-left + светло-зелёный фон — выделяется как
   important info от менеджера, не сливается с географическим address-блоком. */
.vp-map-poicard__detail[hidden] { display: none !important; }
.vp-map-poicard__detail {
    font-size: 13.5px;
    color: #0f172a;
    line-height: 1.5;
    padding: 10px 12px;
    background-color: #f0fdf4;
    border-left: 3px solid #00bf3f;
    border-radius: 8px;
    margin: 0;
    white-space: pre-wrap;
}

.vp-map-poicard__loading,
.vp-map-poicard__empty {
    font-size: 13px;
    color: #94a3b8;
    padding: 4px 0;
    line-height: 1.4;
}

/* ZFX redesign: галерея фото из 2GIS Places API для POI-карточки */
.vp-map-poicard__photos[hidden] { display: none !important; }
.vp-map-poicard__photos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.vp-map-poicard__photo-bigimg-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
}
.vp-map-poicard__photo-bigimg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s;
}
.vp-map-poicard__photo-bigimg[data-loading="1"] { opacity: 0.4; }
.vp-map-poicard__photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
    transition: background-color .15s, transform .12s;
    z-index: 2;
}
.vp-map-poicard__photo-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.06); }
.vp-map-poicard__photo-arrow svg { width: 14px; height: 14px; }
.vp-map-poicard__photo-arrow[hidden] { display: none !important; }
.vp-map-poicard__photo-arrow--prev { left: 8px; }
.vp-map-poicard__photo-arrow--next { right: 8px; }
.vp-map-poicard__photo-counter {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}
.vp-map-poicard__photo-counter[hidden] { display: none !important; }
.vp-map-poicard__photo-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.vp-map-poicard__photo-thumbs::-webkit-scrollbar { display: none; }
.vp-map-poicard__photo-thumbs button {
    flex: 0 0 48px;
    height: 36px;
    border: 2px solid transparent;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, transform .12s;
}
.vp-map-poicard__photo-thumbs button:hover { transform: translateY(-1px); }
.vp-map-poicard__photo-thumbs button.is-active {
    border-color: #00bf3f;
}
.vp-map-poicard__photo-source {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
    margin-top: 2px;
    padding-right: 4px;
}

.vp-map-poicard__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}
/* Ряд из двух secondary-кнопок (Яндекс/2gis) — растягиваются 50/50 на всю ширину */
.vp-map-poicard__actions-row {
    display: flex;
    gap: 8px;
    width: 100%;
}
.vp-map-poicard__actions-row > .vp-map-poicard__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
}
/* Primary-кнопка «Назад к посёлку» — на всю ширину контейнера */
.vp-map-poicard__btn--primary {
    width: 100%;
    box-sizing: border-box;
}
.vp-map-poicard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
    text-align: center;
    line-height: 1.2;
    font-family: inherit;
    box-sizing: border-box;
}
.vp-map-poicard__btn:active { transform: scale(0.98); }
.vp-map-poicard__btn--primary {
    background-color: #00bf3f;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 191, 63, 0.30);
}
.vp-map-poicard__btn--primary:hover {
    background-color: #00a536;
    box-shadow: 0 6px 16px rgba(0, 191, 63, 0.40);
}
.vp-map-poicard__btn--secondary {
    background-color: #ffffff;
    color: #00bf3f;
    border: 1.5px solid #00bf3f;
}
.vp-map-poicard__btn--secondary:hover {
    background-color: #f0fdf4;
}

/* === ZFX redesign: маркер пользователя на маршруте ====================== */
.vp-map-user-marker {
    position: absolute;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1100;
}
.vp-map-user-marker__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.20);
    animation: vp-user-pulse 2s ease-out infinite;
}
.vp-map-user-marker__circle {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background-color: #2563eb;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.vp-map-user-marker__circle svg { width: 16px; height: 16px; }
@keyframes vp-user-pulse {
    0%   { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* === ZFX redesign: карточка внутри-поселкового объекта (площадка/корт/парк) === */
.vp-map-infraobj-card[hidden] { display: none !important; }
.vp-map-infraobj-card {
    position: absolute;
    right: 16px;
    top: 80px;
    bottom: auto;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100% - 110px);
    /* ZFX redesign v3: светлый стиль сайта (white + green accent). */
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.08);
    border-top: 4px solid #00bf3f; /* акцент-полоса как у POI-card */
    z-index: 16;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'PT Sans', sans-serif;
}
/* Popover-режим: карточка встроена в YMapMarker у самого объекта (как плот-карта).
   На desktop'е держим компактным (280px) — иначе перекрывает значительную
   часть карты на 1920px×22" мониторах. */
.vp-map-infraobj-card.vp-map-infraobj-card--popover:not([hidden]) {
    position: absolute;
    right: auto;
    top: auto;
    left: auto;
    transform: translate(-50%, calc(-100% - 16px));
    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: 65vh;
    overflow: hidden;
    z-index: 10000;
    border-radius: 14px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__body {
    overflow-y: auto;
    padding: 10px 14px 12px;
}
/* Компактные размеры внутри popover-режима — карточка не должна закрывать карту */
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__bigimg-wrap {
    aspect-ratio: 16 / 11;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__title {
    font-size: 16px;
    margin-bottom: 5px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__desc {
    font-size: 13px;
    line-height: 1.45;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__close {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__close svg {
    width: 14px;
    height: 14px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__arrow {
    width: 30px;
    height: 30px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__arrow svg {
    width: 14px;
    height: 14px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__arrow--prev { left: 6px; }
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__arrow--next { right: 6px; }
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__counter {
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    font-size: 11px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-card__thumbs {
    padding: 8px 12px 0;
    gap: 6px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover .vp-map-infraobj-thumb {
    flex: 0 0 44px;
    height: 32px;
    border-radius: 6px;
    border-width: 2px;
}
.vp-map-infraobj-card.vp-map-infraobj-card--popover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: #ffffff;
    box-shadow: 4px 4px 6px rgba(15, 23, 42, 0.10);
    z-index: -1;
}
.vp-map-infraobj-card__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    /* Красная кнопка-закрытия — заметна на любых фонах фото-обложек */
    background: #dc2626;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.85);
    transition: background-color .15s, transform .12s, box-shadow .15s;
}
.vp-map-infraobj-card__close:hover {
    background: #ef4444;
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.9);
    transform: scale(1.06);
}
.vp-map-infraobj-card__close:active { transform: scale(0.94); }
.vp-map-infraobj-card__close svg { width: 16px; height: 16px; stroke-width: 2.4; }
/* Wrapper для big-image и стрелок навигации */
.vp-map-infraobj-card__bigimg-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #f1f5f9;
    overflow: hidden;
    flex-shrink: 0;
}
.vp-map-infraobj-card__bigimg-wrap[hidden] { display: none; }
.vp-map-infraobj-card__bigimg {
    width: 100%;
    height: 100%;
}
.vp-map-infraobj-card__bigimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Стрелки prev/next поверх big-image */
.vp-map-infraobj-card__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background-color .15s, transform .15s;
    z-index: 2;
}
.vp-map-infraobj-card__arrow:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.07);
}
.vp-map-infraobj-card__arrow:active {
    transform: translateY(-50%) scale(0.96);
}
.vp-map-infraobj-card__arrow[hidden] { display: none; }
.vp-map-infraobj-card__arrow svg { width: 18px; height: 18px; }
.vp-map-infraobj-card__arrow--prev { left: 10px; }
.vp-map-infraobj-card__arrow--next { right: 10px; }
/* Счётчик «1 / N» в нижнем правом углу big-image */
.vp-map-infraobj-card__counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font: 700 12px/1 'PT Sans', sans-serif;
    pointer-events: none;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.vp-map-infraobj-card__counter[hidden] { display: none; }
.vp-map-infraobj-card__thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 14px 0;
    overflow-x: auto;
    flex-shrink: 0;
}
.vp-map-infraobj-thumb {
    flex: 0 0 56px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, transform .12s, box-shadow .15s;
}
.vp-map-infraobj-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.vp-map-infraobj-thumb.is-active {
    border-color: #00bf3f;
    box-shadow: 0 0 0 2px rgba(0, 191, 63, 0.18);
}
.vp-map-infraobj-card__body {
    padding: 14px 18px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.vp-map-infraobj-card__title {
    margin: 0 0 8px;
    font: 700 18px/1.25 'PT Sans', sans-serif;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.vp-map-infraobj-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}
.vp-map-infraobj-card__desc[hidden] { display: none; }
.vp-map-infraobj-card__desc p { margin: 0 0 8px; }
.vp-map-infraobj-card__desc p:last-child { margin-bottom: 0; }

/* Hover-эффект на overlay-объектах (только когда они интерактивные) */
.vp-map-infraobj-overlay {
    transition: filter .15s ease-out;
}
.vp-map-infraobj-overlay:hover {
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(0, 191, 63, 0.35));
}

/* === ZFX redesign: edge-индикаторы инфраструктуры (мини-карта-стиль) === */
.vp-map-edge-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}
/* Pin = teardrop с заливкой типового цвета + внутренний белый круг с иконкой.
   Border-radius `50% 0 50% 50%` оставляет top-right квадратным — остриё.
   Default остриё смотрит на NE; JS-поворот выводит его на POI. */
.vp-map-edge-indicator {
    position: absolute;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -18px;
    border-radius: 50% 6% 50% 50%;
    /* Заливка — типовый цвет (тип-modifier ниже задаёт color). */
    background-color: currentColor;
    /* ZFX 2026-05-31: тень убрана — плотный ряд edge-индикаторов сливал тени
       в серую полосу вдоль нижнего края карты («серое захождение»). */
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bf3f;
    pointer-events: auto;
    transform-origin: 50% 50%;
    transition: transform .18s ease-out;
}
/* Внутренний белый круг — фон под иконку, чтобы иконка читалась.
   Размер 30×30 при pin 36×36 → ring толщиной 3px. */
.vp-map-edge-indicator::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%; left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Иконка — поверх ::before, контр-поворот для вертикальности.
   color: inherit → currentColor → type-modifier color. */
.vp-map-edge-indicator__icon {
    position: relative;
    z-index: 1;
    color: inherit;
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
}
.vp-map-edge-indicator__icon svg { width: 16px; height: 16px; }
.vp-map-edge-indicator:hover { transform: scale(1.12); }
.vp-map-edge-indicator__icon {
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vp-map-edge-indicator__icon svg { width: 16px; height: 16px; }
/* Old __arrow element больше не нужен — pin teardrop-shape единый.
   Скрываем чтобы JS-инициализация не оставила мёртвый элемент. */
.vp-map-edge-indicator__arrow { display: none !important; }

/* Цветовая дифференциация по типу POI — лёгкий tint фона и более яркая иконка. */
.vp-map-edge-indicator--ost   { color: #00a652; }
.vp-map-edge-indicator--obr   { color: #6750a4; }
.vp-map-edge-indicator--med   { color: #e74c3c; }
.vp-map-edge-indicator--caf   { color: #ff8c1a; }
.vp-map-edge-indicator--mag   { color: #2563eb; }
.vp-map-edge-indicator--sport { color: #00a652; }
.vp-map-edge-indicator--beach { color: #009ec6; }

/* === ZFX 2026-06-02: бейдж-счётчик кластера edge-указателей =========
   Несколько POI одного типа рядом сливаются в один pin; бейдж показывает
   их количество. Контр-поворот бейджа задаётся в JS (style.transform). */
.vp-map-edge-indicator__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid currentColor; /* кольцо в цвет типа */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    display: none;
    z-index: 2;
    transform-origin: 50% 50%;
    pointer-events: none;
}
.vp-map-edge-indicator.is-cluster .vp-map-edge-indicator__count { display: block; }

/* === ZFX redesign: рипл-волны для плотов с акцией =================== */
/* Wrapper рассчитывается в JS под вписанный круг полигона; overflow:hidden
   + border-radius:50% обрезают волны точно по этому кругу — не вылезают за
   границы полигона. Цвет ринга — CSS-переменная --vp-ripple-color (тиеровый). */
.vp-map-action-ripple {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1003;
    overflow: hidden;
    border-radius: 50%;
}
.vp-map-action-ripple__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--vp-ripple-color, #ff2079);
    opacity: 0;
    animation: vp-action-ripple 5s linear infinite;
    will-change: transform, opacity;
    box-sizing: border-box;
}
/* 5 колец с равномерными задержками 1s → одновременно видны 4-5 полосок */
.vp-map-action-ripple__ring--1 { animation-delay: 0s; }
.vp-map-action-ripple__ring--2 { animation-delay: 1s; }
.vp-map-action-ripple__ring--3 { animation-delay: 2s; }
.vp-map-action-ripple__ring--4 { animation-delay: 3s; }
.vp-map-action-ripple__ring--5 { animation-delay: 4s; }

/* Полоски-кольца держат непрозрачность почти весь цикл, гаснут только в самом
   конце — выглядит как чёткие расходящиеся волны, а не размытое облако. */
@keyframes vp-action-ripple {
    0%   { transform: scale(0.5);  opacity: 0;    }
    8%   { transform: scale(0.7);  opacity: 0.85; }
    85%  { transform: scale(8);    opacity: 0.55; }
    100% { transform: scale(9);    opacity: 0;    }
}
/* Респект reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .vp-map-action-ripple__ring { animation: none; opacity: 0; }
}

/* Кнопка locate в loading-состоянии (когда ждём геопозицию/геокод) */
.vp-map-rightcol__btn--locate.is-loading {
    opacity: 0.7;
    cursor: wait;
}
/* Активное состояние — маршрут построен; используем уже определённый is-active. */

/* Топбар-search в loading (геокод адреса) */
.vp-map-topbar__search.is-loading { opacity: 0.7; }

/* === ZFX redesign: chip-popup styles см. ниже (inline-bar версия) ======== */
.vp-map-chip-popup[hidden] { display: none !important; }
.vp-map-chip-popup__title {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}
.vp-map-chip-popup__row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.vp-map-chip-popup__input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.vp-map-chip-popup__input:focus { border-color: #00bf3f; }
.vp-map-chip-popup__sep { color: #9ca3af; font-size: 13px; }
.vp-map-chip-popup__hint {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
}
.vp-map-chip-popup__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #1f2937;
    transition: background-color .15s, border-color .15s;
}
.vp-map-chip-popup__checkbox:hover { background-color: #f9fafb; }
.vp-map-chip-popup__checkbox input { accent-color: #00bf3f; cursor: pointer; }
.vp-map-chip-popup__checkbox.is-on {
    border-color: #00bf3f;
    background-color: #f0fdf4;
}
.vp-map-chip-popup__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.vp-map-chip-popup__btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, border-color .15s;
}
.vp-map-chip-popup__btn:hover { background-color: #f9fafb; }
/* "Показать" по умолчанию — нейтральный, как "Сбросить". Зелёным становится
   ТОЛЬКО когда в popup'е что-то выбрано (см. :has() ниже). */
.vp-map-chip-popup__btn--primary {
    background: #fff;
    color: #1f2937;
    border-color: #e5e7eb;
}
.vp-map-chip-popup__btn--primary:hover { background: #f9fafb; }
/* Зелёная подсветка "Показать" — когда в popup'е есть выбранные опции (option.is-selected),
   отмеченные чекбоксы (checkbox.is-on / input:checked) или заполненные числовые поля.
   :has() поддерживается всеми современными браузерами (Chrome 105+, Safari 15.4+, Firefox 121+). */
.vp-map-chip-popup:has(.vp-map-chip-popup__option.is-selected),
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox.is-on),
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox input[type="checkbox"]:checked) {
    --zfx-chip-has-selection: 1;
}
/* Зелёная подсветка "Показать" — :has() с !important чтобы переписать дубликаты позже.
   Tier-pick: filter активен когда есть хотя бы один НЕактивный tier (т.е. в SOLO). */
.vp-map-chip-popup:has(.vp-map-chip-popup__option.is-selected) .vp-map-chip-popup__btn--primary,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox.is-on) .vp-map-chip-popup__btn--primary,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox input[type="checkbox"]:checked) .vp-map-chip-popup__btn--primary,
.vp-map-chip-popup:has(input[type="number"][value]:not([value=""])) .vp-map-chip-popup__btn--primary,
.vp-map-chip-popup:has(.vp-map-chip-popup__option--tier:not(.is-active)) .vp-map-chip-popup__btn--primary {
    background-color: #00bf3f !important;
    color: #fff !important;
    border-color: #00bf3f !important;
    font-weight: 500 !important;
}
.vp-map-chip-popup:has(.vp-map-chip-popup__option.is-selected) .vp-map-chip-popup__btn--primary:hover,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox.is-on) .vp-map-chip-popup__btn--primary:hover,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox input[type="checkbox"]:checked) .vp-map-chip-popup__btn--primary:hover {
    background-color: #00a838 !important;
    border-color: #00a838 !important;
    color: #fff !important;
}
/* Красная подсветка "Сбросить" — становится активной (красная) только когда
   в popup'е что-то выбрано. По умолчанию серая как обычно.
   Включает tier-pick: filter активен когда есть хотя бы один НЕактивный tier. */
.vp-map-chip-popup:has(.vp-map-chip-popup__option.is-selected) [data-vp-chip-clear],
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox.is-on) [data-vp-chip-clear],
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox input[type="checkbox"]:checked) [data-vp-chip-clear],
.vp-map-chip-popup:has(.vp-map-chip-popup__option--tier:not(.is-active)) [data-vp-chip-clear] {
    color: #dc2626 !important;
    font-weight: 500 !important;
    border: 1.5px solid #dc2626 !important;
    background-color: #ffffff !important;
}
.vp-map-chip-popup:has(.vp-map-chip-popup__option.is-selected) [data-vp-chip-clear]:hover,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox.is-on) [data-vp-chip-clear]:hover,
.vp-map-chip-popup:has(.vp-map-chip-popup__checkbox input[type="checkbox"]:checked) [data-vp-chip-clear]:hover,
.vp-map-chip-popup:has(.vp-map-chip-popup__option--tier:not(.is-active)) [data-vp-chip-clear]:hover {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #b91c1c !important;
}
/* Topbar "Сбросить" — становится красной когда:
   - применён хотя бы один фильтр (chip имеет .has-filter / .is-filtered)
   - ИЛИ открыт popup с активной селекцией (чекбокс отмечен, чип выбран и т.п.)
   - ИЛИ цена-tier в SOLO режиме (диssabled tiers активны)
   Используем :has() для cross-element реактивности — без JS. */
.vp-map--redesign:has(.vp-map-topbar__chip.has-filter) .vp-map-topbar__reset,
.vp-map--redesign:has(.vp-map-topbar__chip.is-filtered) .vp-map-topbar__reset,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) .vp-map-chip-popup__checkbox.is-on) .vp-map-topbar__reset,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) .vp-map-chip-popup__option.is-selected) .vp-map-topbar__reset,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) input[type="checkbox"]:checked) .vp-map-topbar__reset,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) .vp-map-chip-popup__option--tier:not(.is-active)) .vp-map-topbar__reset {
    color: #dc2626 !important;
    font-weight: 500 !important;
    border: 1.5px solid #dc2626 !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    background-color: #ffffff !important;
}
.vp-map--redesign:has(.vp-map-topbar__chip.has-filter) .vp-map-topbar__reset:hover,
.vp-map--redesign:has(.vp-map-topbar__chip.is-filtered) .vp-map-topbar__reset:hover,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) .vp-map-chip-popup__checkbox.is-on) .vp-map-topbar__reset:hover,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) .vp-map-chip-popup__option.is-selected) .vp-map-topbar__reset:hover,
.vp-map--redesign:has(.vp-map-chip-popup:not([hidden]) input[type="checkbox"]:checked) .vp-map-topbar__reset:hover {
    color: #b91c1c !important;
    border-color: #b91c1c !important;
    background-color: #fef2f2 !important;
}

/* Чип в активном состоянии — когда фильтр применён */
.vp-map-topbar__chip.has-filter {
    border-color: #00bf3f;
    color: #00bf3f;
    font-weight: 500;
}

/* === ZFX redesign: chip-popup как full-width бар, перекрывающий топбар === */
/* Стили выровнены с фильтром на главной (.zf-panel + .zf-chip + .zf-btn).   */
.vp-map-chip-popup { display: none; }

@media (min-width: 1024px) {
    .vp-map--redesign .vp-map-chip-popup:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 12px;
        position: absolute;
        top: 80px;              /* НИЖЕ топбара (16px top + 56px height + 8px gap) */
        left: 16px;
        right: 16px;
        z-index: 14;            /* выше топбара (13) но ниже легенды/карточек */
        padding: 12px 16px;
        background-color: rgba(255, 255, 255, 0.97);
        border-radius: 28px;     /* мягче чем pill, чтоб 2-строчные блоки помещались */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-family: "PT Sans", Arial, sans-serif;
        color: #2c3e50;
        box-sizing: border-box;
        min-height: 56px;
        overflow: visible;
    }
}
/* Все вложенные элементы наследуют PT Sans */
.vp-map-chip-popup, .vp-map-chip-popup * {
    font-family: "PT Sans", Arial, sans-serif;
}
.vp-map-chip-popup__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}
.vp-map-chip-popup__inner::-webkit-scrollbar { display: none; }
.vp-map-chip-popup__title {
    font: 500 14px/1.2 'PT Sans', sans-serif;
    color: #5a6c7c;
    margin: 0 4px 0 0;
    flex-shrink: 0;
    white-space: nowrap;
    /* Сбрасываем uppercase/letter-spacing из ранее определённого правила
       для тех же селекторов — иначе заголовок выглядит как «ПЛОЩАДЬ, СОТОК». */
    text-transform: none;
    letter-spacing: 0;
}
.vp-map-chip-popup__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}
.vp-map-chip-popup__list::-webkit-scrollbar { display: none; }
.vp-map-chip-popup__back {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #1f2937;
    flex-shrink: 0;
    transition: background-color .15s;
    padding: 0;
}
.vp-map-chip-popup__back:hover { background-color: #e5e7eb; }
.vp-map-chip-popup__back svg { width: 16px; height: 16px; }

/* Pill-стиль опций — горизонтальный inline (как .zf-chip на главной) */
.vp-map-chip-popup__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background-color: #f4f6f9;
    color: #2c3e50;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    font-family: inherit;
    text-align: left;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.vp-map-chip-popup__option:hover { background-color: #e9eef4; }
/* Selected chip — только зелёный ободок + зелёный текст, БЕЗ сплошной заливки.
   Так пользователь визуально отличает выбранную опцию от primary-кнопки "Показать". */
.vp-map-chip-popup__option.is-selected {
    background-color: #ffffff;
    color: #00bf3f;
    box-shadow: inset 0 0 0 2px #00bf3f;
    font-weight: 500;
}
.vp-map-chip-popup__option.is-selected:hover {
    background-color: #f0fdf4;
}
.vp-map-chip-popup__option-check { display: none; }
.vp-map-chip-popup__option-label { flex: 0 0 auto; }
.vp-map-chip-popup__option-count {
    font-size: 12px;
    color: #8a98a6;
    flex-shrink: 0;
}
.vp-map-chip-popup__option.is-selected .vp-map-chip-popup__option-count {
    color: #00bf3f;
    opacity: 0.75;
}

/* Чекбокс-обёртка — тоже pill, inline */
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background-color: #f4f6f9;
    color: #2c3e50;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    font-family: inherit;
    width: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    white-space: nowrap;
}
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox:hover { background-color: #e9eef4; }
/* Selected chip — только зелёный ободок + зелёный текст, БЕЗ сплошной заливки.
   Сплошной зелёный остаётся только за кнопкой «Показать».
   Правила РАЗДЕЛЕНЫ (не через запятую с :has()) — иначе селектор-лист с
   неподдерживаемой частью инвалидирует ВЕСЬ rule в старых браузерах.
   !important нужен потому что у Bitrix-ового inline-bar'а есть базовое
   правило .__inner .__checkbox с background-color: #f4f6f9. */
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox.is-on {
    background-color: #ffffff !important;
    color: #00bf3f !important;
    box-shadow: inset 0 0 0 2px #00bf3f !important;
    font-weight: 500 !important;
}
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox.is-on:hover {
    background-color: #f0fdf4 !important;
}
/* Fallback на :checked (без класса) — отдельным правилом */
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox:has(input[type="checkbox"]:checked) {
    background-color: #ffffff !important;
    color: #00bf3f !important;
    box-shadow: inset 0 0 0 2px #00bf3f !important;
    font-weight: 500 !important;
}
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox:has(input[type="checkbox"]:checked):hover {
    background-color: #f0fdf4 !important;
}
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.vp-map-chip-popup__inner .vp-map-chip-popup__checkbox.is-on span span {
    color: #00bf3f !important;
    opacity: 0.75;
}

/* Range-инпуты (Площадь / Цена) — inline */
.vp-map-chip-popup__row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background-color: #f4f6f9;
    border-radius: 999px;
    padding: 4px 12px;
}
.vp-map-chip-popup__input {
    width: 110px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: #2c3e50;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    -moz-appearance: textfield;
}
.vp-map-chip-popup__input::-webkit-outer-spin-button,
.vp-map-chip-popup__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-map-chip-popup__input:focus { outline: none; color: #00bf3f; }
.vp-map-chip-popup__sep { color: #8a98a6; flex-shrink: 0; }
.vp-map-chip-popup__hint {
    margin: 0;
    font-size: 12px;
    color: #8a98a6;
    line-height: 1.3;
    flex-shrink: 0;
}
/* === Цена: text-label «За сотку» [toggle] «За участок» (как Инфраструктура/Трафик) === */
.vp-map-chip-popup__price-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 0 4px;
}
.vp-map-chip-popup__price-label {
    font-size: 14px;
    color: #8a98a6;
    cursor: pointer;
    transition: color .15s;
    white-space: nowrap;
    user-select: none;
}
.vp-map-chip-popup__price-label.is-active { color: #2c3e50; font-weight: 500; }
.vp-map-chip-popup__price-label:hover { color: #2c3e50; }
.vp-map-chip-popup__switch {
    display: inline-block;
    position: relative;
    width: 44px; height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}
.vp-map-chip-popup__switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.vp-map-chip-popup__switch-track {
    display: block;
    width: 100%; height: 100%;
    background-color: #00bf3f;
    border-radius: 999px;
    position: relative;
    transition: background-color .2s;
}
.vp-map-chip-popup__switch-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left .2s;
}
.vp-map-chip-popup__switch input:checked ~ .vp-map-chip-popup__switch-track::after {
    left: 20px;
}

/* === Цена-pill: значения сверху + двухползунковый слайдер снизу === */
.vp-map-chip-popup__price-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f4f6f9;
    border: 1px solid #eef0f3;
    border-radius: 24px;
    padding: 8px 16px 10px;
    min-width: 280px;
    flex-shrink: 0;
}
.vp-map-chip-popup__price-vals {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 600 14px/1 'PT Sans', sans-serif;
    color: #2c3e50;
}
.vp-map-chip-popup__price-spacer { flex: 1 1 auto; }
.vp-map-chip-popup__price-suffix {
    color: #5a6c7c;
    font-weight: 500;
    margin-right: 2px;
}
.vp-map-chip-popup__input--bare {
    background: transparent;
    border: none;
    padding: 0;
    width: 110px;
    font: 600 14px/1 'PT Sans', sans-serif;
    color: #2c3e50;
    outline: none;
    -moz-appearance: textfield;
}
.vp-map-chip-popup__input--bare::-webkit-outer-spin-button,
.vp-map-chip-popup__input--bare::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.vp-map-chip-popup__input--right { text-align: right; }

/* Двухползунковый слайдер */
.vp-map-chip-popup__slider {
    position: relative;
    height: 18px;
    margin: 4px 6px 0;
}
.vp-map-chip-popup__slider-track {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #d8dde3;
    border-radius: 2px;
    pointer-events: none;
}
.vp-map-chip-popup__slider-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #00bf3f;
    border-radius: 2px;
    pointer-events: none;
}
.vp-map-chip-popup__slider-input {
    position: absolute;
    left: 0; right: 0; top: 0;
    width: 100%;
    height: 18px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
    z-index: 4;
}
.vp-map-chip-popup__slider-input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 18px;
    border: none;
}
.vp-map-chip-popup__slider-input::-moz-range-track {
    background: transparent;
    height: 18px;
    border: none;
}
.vp-map-chip-popup__slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00bf3f;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    pointer-events: auto;
    margin-top: 0;
}
.vp-map-chip-popup__slider-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00bf3f;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    pointer-events: auto;
}

/* Grid 2 строки × 3 колонки для квик-пресетов цены */
.vp-map-chip-popup__presets-grid {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 6px 8px;
    flex-shrink: 0;
}
.vp-map-chip-popup__presets-grid .vp-map-chip-popup__option {
    padding: 6px 14px;
    font-size: 13px;
}

/* ZFX redesign: tier-chip окрашен в цвет ценовой категории (как на карте/легенде).
   --vp-tier-color устанавливается inline в JS на основе rec.color из PRICE_CATEGORIES. */
.vp-map-chip-popup__option--tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
}
.vp-map-chip-popup__option-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--vp-tier-color, #cbd5e1);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}
/* АКТИВНЫЙ tier — SOLID FILL в цвет категории, белый текст, чёткий контраст. */
.vp-map-chip-popup__option--tier.has-tier-color.is-active {
    background-color: var(--vp-tier-color);
    color: #ffffff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--vp-tier-color) 40%, transparent);
    font-weight: 600;
    transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}
.vp-map-chip-popup__option--tier.has-tier-color.is-active .vp-map-chip-popup__option-dot {
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.vp-map-chip-popup__option--tier.has-tier-color.is-active:hover {
    background-color: color-mix(in srgb, var(--vp-tier-color) 85%, #000000);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--vp-tier-color) 50%, transparent);
}

/* НЕактивный tier — тонкая цветная обводка, белый фон, dot в цвет — но
   приглушённое впечатление за счёт малого контраста и opacity. */
.vp-map-chip-popup__option--tier.has-tier-color {
    background-color: #ffffff;
    color: color-mix(in srgb, var(--vp-tier-color) 65%, #475569);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-tier-color) 35%, #e5e7eb);
    font-weight: 500;
    opacity: 0.85;
}
.vp-map-chip-popup__option--tier.has-tier-color .vp-map-chip-popup__option-dot {
    background-color: var(--vp-tier-color);
    opacity: 0.7;
    box-shadow: none;
}
.vp-map-chip-popup__option--tier.has-tier-color:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--vp-tier-color) 8%, #ffffff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vp-tier-color) 50%, #e5e7eb);
}

/* Fallback для браузеров без color-mix() */
@supports not (background-color: color-mix(in srgb, red 50%, white)) {
    .vp-map-chip-popup__option--tier.has-tier-color {
        background-color: #ffffff;
        color: #475569;
        opacity: 0.85;
        box-shadow: inset 0 0 0 1px #e5e7eb;
    }
    .vp-map-chip-popup__option--tier.has-tier-color.is-active {
        background-color: var(--vp-tier-color);
        color: #ffffff;
        opacity: 1;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
}

/* Кнопки действий — справа от inner; не растягиваем на ширину */
.vp-map-chip-popup__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    margin: 0;
}
.vp-map-chip-popup__btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    background-color: transparent;
    color: #8a98a6;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}
.vp-map-chip-popup__btn:hover { background-color: #f4f6f9; color: #2c3e50; }
/* «Показать» по умолчанию — нейтральная (как «Сбросить»). Зелёной становится
   только когда что-то выбрано в popup'е (правило :has() выше).
   Дублирующее правило ниже было оставлено по ошибке — теперь нейтральное. */
.vp-map-chip-popup__btn--primary {
    background-color: transparent;
    color: #8a98a6;
    font-weight: 500;
}
.vp-map-chip-popup__btn--primary:hover { background-color: #f4f6f9; color: #2c3e50; }

/* Active-state чипа когда фильтр выбран */
.vp-map-topbar__chip.is-filtered,
.vp-map-topbar__chip.has-filter {
    border-color: #00bf3f;
    color: #00bf3f;
    font-weight: 500;
}
.vp-map-topbar__chip.is-filtered .vp-map-topbar__chip-caret,
.vp-map-topbar__chip.has-filter .vp-map-topbar__chip-caret {
    border-color: #00bf3f;
}

/* === ZFX redesign: ненавязчивый toast =================================== */
.zfx-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    padding: 12px 20px;
    background-color: #1f2937;
    color: #ffffff;
    border-radius: 999px;
    font-family: var(--font-family, sans-serif);
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.zfx-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- 5) Прячем элементы прежнего шаблона/v1 на десктопе под редизайн --- */
@media (min-width: 1024px) {
    /* Старая шапка карты */
    .vp-map--redesign > .vp-map--h2,
    .vp-map--redesign > .vp-map--p,
    .vp-map--redesign > .vp-map--button {
        display: none;
    }
    /* Дублирующие верхние табы Планировки/3D — функция перенесена в топ-бар */
    .vp-map--redesign > .vp-map--div__FILTERS {
        display: none !important;
    }
    /* Старые круглые кнопки видов (схема/спутник) — заменены правой колонкой;
       элементы оставлены как мост для существующих JS-обработчиков, но скрыты. */
    .vp-map--redesign .vp-map--div__VIEWS {
        display: none !important;
    }
    /* Левый сайдбар-фильтр (старая панель «Фильтр» с slider'ами) — скрыт.
       Функционал перенесён в чип-фильтры топбара. !important для защиты от inline-стилей. */
    .vp-map--redesign > .vp-map--div__LEFT_MENU_BLOCK,
    .vp-map--redesign .vp-map--div__LEFT_MENU_BLOCK {
        display: none !important;
    }
    /* Старая кнопка-триггер открытия панели */
    .vp-map--redesign > .vp-map--button__SETTINGS,
    .vp-map--redesign .vp-map--button__SETTINGS {
        display: none !important;
    }
    /* Старая шапка-картинка карты (которая показывается до полной загрузки) */
    .vp-map--redesign > .vp-map--button__CLOSE,
    .vp-map--redesign .vp-map--button__CLOSE {
        display: none !important;
    }
}

/* =============================================================
   PLOT MARKER HOVER (десктоп) — увеличение круга и плашка с номером
   ============================================================= */

/* Плот-маркер при hover. На сервере есть legacy custom.css/detail.css которые
   ставят width: 36px !important; bottom: -18px !important; — это работает в
   Chrome но в Safari неконсистентно (Safari иначе пересчитывает size при
   inline width=18 + CSS width=36). Поэтому глушим legacy width/bottom/right
   и используем чистый transform: scale — он работает одинаково везде.

   ВАЖНО для Safari: где-то в каскаде есть transition: all (наследуется от
   родителя). На динамически создаваемых через JS .placemark это вызывает
   "stuck CSSTransition" — после первого hover transition зависает в
   playState: running, и любые следующие изменения transform игнорируются.
   Принудительно отключаем все transition/animation для маркеров. */
.vp-map--redesign .placemark,
.vp-map--redesign .placemark.placemark-circle,
.vp-map--redesign .placemark.placemark-img {
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none;
    animation: none;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
/* Применяем эффект через ОБА триггера: :hover (нативный, работает в Safari
   без JS) И .active (JS-управляемый, для совместимости со старым кодом).
   Прод-подход: меняем width/height/margin без transform — это чистый
   layout-resize, без артефактов transform-origin / scale. */
.vp-map--redesign .placemark.placemark-circle.active,
.vp-map--redesign .placemark.placemark-circle:hover {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    margin-left: -18px !important;
    margin-top: -18px !important;
    bottom: auto !important;
    right: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    z-index: 1010;
}
/* placemark-img (sold) — inline-центрирование через `transform: translate(-50%, -50%)`,
   margin: 0. Чтобы scale не сломал центрирование — комбинируем translate + scale. */
.vp-map--redesign .placemark.placemark-img.active,
.vp-map--redesign .placemark.placemark-img:hover {
    -webkit-transform: translate(-50%, -50%) scale(1.3) !important;
    transform: translate(-50%, -50%) scale(1.3) !important;
    z-index: 1010;
}
/* placemark-number (живой плот с номером) — inline-центрирование через `margin: -halfW`,
   БЕЗ transform. Только scale(1.3) от center — translate тут даст drift на -12.5px. */
.vp-map--redesign .placemark.placemark-number.active,
.vp-map--redesign .placemark.placemark-number:hover {
    -webkit-transform: scale(1.3) !important;
    transform: scale(1.3) !important;
    -webkit-transform-origin: 50% 50% !important;
    transform-origin: 50% 50% !important;
    z-index: 1010;
}
/* Номер участка виден внутри увеличенного кружка (как на проде). */
.vp-map--redesign .placemark.placemark-circle.active .marker-name-overlay,
.vp-map--redesign .placemark.placemark-circle:hover .marker-name-overlay,
.vp-map--redesign .placemark.placemark-circle.active span,
.vp-map--redesign .placemark.placemark-circle:hover span {
    display: block !important;
    font-size: 14px !important;
    color: #fff;
    font-weight: bold;
    line-height: 36px !important;
    text-align: center;
}
.vp-map--redesign .placemark.placemark-circle.active.dark-number .marker-name-overlay,
.vp-map--redesign .placemark.placemark-circle.dark-number:hover .marker-name-overlay,
.vp-map--redesign .placemark.placemark-circle.active.dark-number span,
.vp-map--redesign .placemark.placemark-circle.dark-number:hover span {
    color: #858585;
}
/* У проданных (placemark-img) при hover — компактная плашка «Продано» */
.vp-map--redesign .placemark.placemark-img .marker-text.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.vp-map--redesign .placemark.placemark-img .marker-text.visible {
    opacity: 1;
    visibility: visible;
}
/* Стрелочка-хвостик под плашкой «Продано» — фирменный зелёный */
.vp-map--redesign .placemark.placemark-img .marker-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #00bf3f;
}

/* =============================================================
   MOBILE UI (≤ 1023px) — sprint 1: каркас
   ============================================================= */

/* По умолчанию мобильный UI скрыт; показываем только на узких экранах. */
.vp-mmap-topbar,
.vp-mmap-fab-right,
.vp-mmap-fab-bottom,
.vp-mmap-fab-legend,
.vp-mmap-sheet-overlay,
.vp-mmap-sheet { display: none !important; }

/* «Открыть в Яндекс.Навигаторе» — pill, видна на десктопе и мобиле когда
   построен маршрут (route-active class на body выставляется JS'ом). */
.vp-map-navi-link {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 18px 0 14px;
    height: 44px;
    background: #ffdb4d;     /* фирменный жёлтый Яндекса */
    color: #000;
    border-radius: 999px;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    z-index: 14;
    transition: transform .15s ease, background .15s ease;
}
.vp-map-navi-link:hover { background: #fcc419; }
.vp-map-navi-link:active { transform: scale(0.97); }
.vp-map-navi-link svg { width: 20px; height: 20px; color: #000; }
.vp-map-navi-link[hidden] { display: none !important; }

/* Desktop: бот-центр карты, ВЫШЕ pill «Назад к посёлку» (140) и
   bottombar (80). Чтоб не перекрывать кнопки инфраструктуры/дорожек. */
@media (min-width: 1024px) {
    body.zfx-route-active .vp-map--redesign .vp-map-navi-link:not([hidden]) {
        display: inline-flex;
        position: absolute;
        bottom: 200px;
        left: 50%;
        transform: translateX(-50%);
    }
    body.zfx-route-active .vp-map--redesign .vp-map-navi-link:not([hidden]):active {
        transform: translateX(-50%) scale(0.97);
    }
}
/* Mobile: только когда карта в fullscreen режиме */
@media (max-width: 1023px) {
    body.zfx-route-active.__c-body__FIXED .vp-map-navi-link:not([hidden]) {
        display: inline-flex;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 76px);  /* под топбаром */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
    }
    body.zfx-route-active.__c-body__FIXED .vp-map-navi-link:not([hidden]):active {
        transform: translateX(-50%) scale(0.97);
    }
}
/* Кнопка «Назад к посёлку» — гейтится отдельно (видна и на десктопе тоже,
   но только когда .is-shown добавлен JS'ом, и только когда mqMobile или
   desktop). По умолчанию hidden. */
.vp-mmap-back-to-village { display: none !important; }

/* === Desktop: «Назад к посёлку» появляется рядом с bottombar (Инфраструктура / Дорожки) === */
@media (min-width: 1024px) {
    .vp-map--redesign .vp-mmap-back-to-village {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        position: absolute;
        /* Чуть выше bottombar (тот стоит на bottom: 80px) — pill сверху */
        bottom: 140px;
        left: 50%;
        z-index: 14;
        height: 44px;
        padding: 0 18px 0 12px;
        background: #00bf3f;
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: var(--font-family, 'PT Sans', sans-serif);
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(0, 191, 63, 0.40);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(8px);
        transition: opacity .25s ease, transform .25s ease;
    }
    .vp-map--redesign .vp-mmap-back-to-village.is-shown {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .vp-map--redesign .vp-mmap-back-to-village:hover { background: #00a536; }
    .vp-map--redesign .vp-mmap-back-to-village svg { width: 18px; height: 18px; color: #fff; }
}

@media (max-width: 1023px) {
    /* Шрифт мобильного UI — тот же PT Sans, как на десктопе. */
    .vp-mmap-topbar,
    .vp-mmap-topbar *,
    .vp-mmap-fab-right,
    .vp-mmap-fab-right *,
    .vp-mmap-fab-bottom,
    .vp-mmap-fab-bottom *,
    .vp-mmap-sheet,
    .vp-mmap-sheet * {
        font-family: "PT Sans", Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
    }

    /* Скрываем всю десктопную обвязку — она не подходит для мобилки. */
    .vp-map--redesign .vp-map-topbar,
    .vp-map--redesign .vp-map-bottombar,
    .vp-map--redesign .vp-map-rightcol,
    .vp-map--redesign .vp-map-legend-popup {
        display: none !important;
    }

    /* Скрываем legacy mobile UI (старые «Фильтр»/«X»/«View»-кнопки),
       они конфликтуют с нашей новой обвязкой. */
    body.__c-body__FIXED .vp-map--button__SETTINGS,
    body.__c-body__FIXED .__vp-map--button__SETTINGS__VISIBLE,
    body.__c-body__FIXED .vp-map--div__FILTERS_MOB,
    body.__c-body__FIXED .__vp-map--div__FILTERS_MOB__VISIBLE,
    body.__c-body__FIXED .vp-map--button__CLOSE,
    body.__c-body__FIXED .__vp-map--button__CLOSE__VISIBLE,
    body.__c-body__FIXED .vp-map--div__VIEWS,
    body.__c-body__FIXED .__vp-map--div__VIEWS__ACTIVE {
        display: none !important;
    }

    /* ВАЖНО: всю мобильную обвязку (topbar/FABs/bottom-button) показываем
       ТОЛЬКО когда карта реально открылась в fullscreen — legacy-код вешает
       класс body.__c-body__FIXED при тапе на preview. До этого момента
       пользователь видит чистый preview «Коснитесь...» как раньше. */

    /* === 1) Top bar: ← назад + Фильтры === */
    .vp-mmap-topbar {
        display: none !important;
    }
    /* Topbar — flex-контейнер фиксированного размера. БЕЗ pointer-events:none
       на родителе — iOS Chrome WebKit имеет баг: при pointer-events:none на
       предке click не fires на детях. Контейнер занимает только полосу 48px
       сверху, карта остаётся доступной для тапов везде ниже. */
    body.__c-body__FIXED .vp-mmap-topbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 12px;
        left: 12px;
        right: 12px;
        height: 48px;
        z-index: 1000;
    }
    body.__c-body__FIXED .vp-mmap-topbar > * {
        touch-action: manipulation;
        cursor: pointer;
    }
    body.__c-body__FIXED .vp-mmap-fab-bottom,
    body.__c-body__FIXED .vp-mmap-fab-legend,
    body.__c-body__FIXED .vp-mmap-fab-right__btn {
        touch-action: manipulation;
        cursor: pointer;
    }

    .vp-mmap-topbar__back {
        width: 48px; height: 48px;
        display: inline-flex;
        align-items: center; justify-content: center;
        background: #fff;
        color: #1f2937;
        border-radius: 50%;
        border: none;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        text-decoration: none;
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }
    .vp-mmap-topbar__back:active {
        transform: scale(0.94);
        background: #f1f5f9;
    }
    .vp-mmap-topbar__back svg { width: 22px; height: 22px; }

    .vp-mmap-topbar__filters {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0 20px;
        height: 48px;
        background: #fff;
        color: #1f2937;
        border: none;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }
    .vp-mmap-topbar__filters:active {
        transform: scale(0.97);
        background: #f1f5f9;
    }
    .vp-mmap-topbar__filters svg { width: 22px; height: 22px; }

    /* === 2) Floating right: zoom + locate === */
    .vp-mmap-fab-right { display: none !important; }
    body.__c-body__FIXED .vp-mmap-fab-right {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        position: fixed;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        align-items: center;
    }

    /* По дизайну zoom +/− — два отдельных круга, а не объединённая пилюля. */
    .vp-mmap-fab-right__zoom {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .vp-mmap-fab-right__sep { display: none; }
    .vp-mmap-fab-right__btn {
        width: 48px; height: 48px;
        display: inline-flex;
        align-items: center; justify-content: center;
        background: #fff;
        color: #1f2937;
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        cursor: pointer;
        transition: background .15s ease;
    }
    .vp-mmap-fab-right__btn:active { background: #f1f5f9; }
    .vp-mmap-fab-right__btn svg { width: 22px; height: 22px; }

    .vp-mmap-fab-right__btn--home,
    .vp-mmap-fab-right__btn--view {
        width: 48px; height: 48px;
        background: #fff;
        color: #1f2937;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    }
    .vp-mmap-fab-right__btn--home:active,
    .vp-mmap-fab-right__btn--view:active { background: #f1f5f9; }
    .vp-mmap-fab-right__btn--home svg,
    .vp-mmap-fab-right__btn--view svg { width: 22px; height: 22px; }

    /* Toggle вид карты: показываем иконку противоположного state. Когда
       data-vp-mmap-view="scheme" — иконка спутника (намекает: переключиться
       на спутник). И наоборот. */
    .vp-mmap-fab-right__btn--view .vp-mmap-view-icon { display: none; }
    .vp-mmap-fab-right__btn--view[data-vp-mmap-view="scheme"]    .vp-mmap-view-icon--satellite { display: inline-block; }
    .vp-mmap-fab-right__btn--view[data-vp-mmap-view="satellite"] .vp-mmap-view-icon--scheme    { display: inline-block; }

    .vp-mmap-fab-right__btn--locate {
        width: 52px; height: 52px;
        background: #00bf3f;
        color: #fff;
        border-radius: 50%;
        box-shadow: 0 4px 16px rgba(0, 191, 63, 0.40);
    }
    .vp-mmap-fab-right__btn--locate:active { background: #00a536; }
    .vp-mmap-fab-right__btn--locate svg {
        width: 24px; height: 24px;
        transform: rotate(-30deg);
    }

    /* 3D обзор — белый круг, зелёная иконка-куб + лейбл «3D» под ней. */
    .vp-mmap-fab-right__btn--3d {
        width: 48px; height: 48px;
        background: #fff;
        color: #00bf3f;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        text-decoration: none;
        flex-direction: column;
        gap: 1px;
        line-height: 1;
    }
    .vp-mmap-fab-right__btn--3d:active { background: #f1f5f9; }
    .vp-mmap-fab-right__btn--3d svg { width: 18px; height: 18px; }
    .vp-mmap-fab-right__btn-label {
        font-family: "PT Sans", Arial, sans-serif;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #00bf3f;
    }

    /* === 3) Bottom button: «Настройка генплана» === */
    .vp-mmap-fab-bottom { display: none !important; }
    body.__c-body__FIXED .vp-mmap-fab-bottom {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        position: fixed;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        left: 16px;
        z-index: 1000;
        height: 52px;
        padding: 0 24px;
        background: #fff;
        color: #1f2937;
        border: none;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
    }
    .vp-mmap-fab-bottom:active {
        transform: scale(0.97);
        background: #f1f5f9;
    }
    .vp-mmap-fab-bottom svg { width: 20px; height: 20px; }

    /* === 4) Sheet overlay (общий) === */
    /* !important нужен — глобальное правило выше использует !important */
    .vp-mmap-sheet-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1000;
        animation: vp-mmap-fade-in .2s ease-out;
    }
    .vp-mmap-sheet-overlay[hidden] { display: none !important; }

    @keyframes vp-mmap-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Лочим скролл документа когда sheet открыт */
    html.vp-mmap-sheet-locked,
    html.vp-mmap-sheet-locked body { overflow: hidden; }

    /* === Bottom-sheet: общий каркас === */
    /* !important перебивает глобальное .vp-mmap-sheet { display:none !important; } */
    .vp-mmap-sheet {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 92vh;
        z-index: 1010;
        background: #f5f7fa;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        overscroll-behavior: contain;
    }
    .vp-mmap-sheet.is-open {
        transform: translateY(0);
    }
    .vp-mmap-sheet__handle {
        width: 44px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 999px;
        margin: 8px auto 0;
        flex-shrink: 0;
    }
    .vp-mmap-sheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 20px 16px;
        flex-shrink: 0;
    }
    .vp-mmap-sheet__title {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.01em;
    }
    .vp-mmap-sheet__close {
        width: 36px; height: 36px;
        display: inline-flex;
        align-items: center; justify-content: center;
        background: #fff;
        color: #64748b;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background .15s ease;
    }
    .vp-mmap-sheet__close:active { background: #e2e8f0; }
    .vp-mmap-sheet__close svg { width: 18px; height: 18px; }

    .vp-mmap-sheet__body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0 16px 16px;
        -webkit-overflow-scrolling: touch;
    }

    .vp-mmap-sheet__footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
        background: #f5f7fa;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        flex-shrink: 0;
    }
    .vp-mmap-sheet__btn-primary {
        height: 56px;
        background: #00bf3f;
        color: #fff;
        border: none;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s ease, transform .12s ease;
    }
    .vp-mmap-sheet__btn-primary:active {
        background: #00a536;
        transform: scale(0.99);
    }
    .vp-mmap-sheet__btn-secondary {
        height: 48px;
        background: transparent;
        color: #0f172a;
        border: none;
        border-radius: 16px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .vp-mmap-sheet__btn-secondary:active { background: #e2e8f0; }

    /* === Карточка-секция внутри sheet (Площадь, Цена и т.д.) === */
    .vp-mmap-section {
        background: #fff;
        border-radius: 18px;
        padding: 16px 16px 18px;
        margin-bottom: 12px;
    }
    .vp-mmap-section__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
        user-select: none;
    }
    .vp-mmap-section__title {
        font-size: 15px;
        color: #0f172a;
        font-weight: 600;
    }
    .vp-mmap-section__caret {
        width: 22px; height: 22px;
        color: #64748b;
        transition: transform .2s ease;
    }
    .vp-mmap-section.is-open .vp-mmap-section__caret { transform: rotate(180deg); }

    .vp-mmap-section__body {
        margin-top: 14px;
        display: none;
    }
    .vp-mmap-section.is-open .vp-mmap-section__body { display: block; }

    /* Pills для chips (Шоссе/Район/Услуги/Преимущества) */
    .vp-mmap-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .vp-mmap-pill {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 16px;
        background: #fff;
        color: #0f172a;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease;
    }
    .vp-mmap-pill:active { background: #f1f5f9; }
    .vp-mmap-pill.is-active {
        background: #00bf3f;
        color: #fff;
        border-color: #00bf3f;
    }

    /* Range slider (площадь / цена) */
    .vp-mmap-range {
        position: relative;
        height: 28px;
        margin: 8px 0 14px;
    }
    .vp-mmap-range__track {
        position: absolute;
        top: 50%; left: 0; right: 0;
        height: 4px;
        background: #e2e8f0;
        border-radius: 999px;
        transform: translateY(-50%);
    }
    .vp-mmap-range__fill {
        position: absolute;
        top: 50%;
        height: 4px;
        background: #00bf3f;
        border-radius: 999px;
        transform: translateY(-50%);
    }
    .vp-mmap-range input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 28px;
        margin: 0;
        background: transparent;
        pointer-events: none;
        z-index: 2;
    }
    .vp-mmap-range input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: #00bf3f;
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(0, 191, 63, 0.35);
        pointer-events: auto;
        cursor: grab;
    }
    .vp-mmap-range input[type="range"]::-moz-range-thumb {
        width: 22px; height: 22px;
        border-radius: 50%;
        background: #00bf3f;
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(0, 191, 63, 0.35);
        pointer-events: auto;
        cursor: grab;
    }
    .vp-mmap-range__labels {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #0f172a;
        font-weight: 600;
    }
    .vp-mmap-range__labels span:last-child { color: #0f172a; }

    /* Toggle pills (для жизни/бизнеса, за сотку/участок) */
    .vp-mmap-toggle-pills {
        display: flex;
        background: #f1f5f9;
        border-radius: 999px;
        padding: 4px;
        margin-bottom: 8px;
    }
    .vp-mmap-toggle-pills__opt {
        flex: 1;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: #475569;
        border: none;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .vp-mmap-toggle-pills__opt.is-active {
        background: #00bf3f;
        color: #fff;
    }

    /* Switch toggle (мини, для «За сотку / За участок» + master toggles) */
    .vp-mmap-switch {
        position: relative;
        width: 44px; height: 24px;
        background: #cbd5e1;
        border-radius: 999px;
        cursor: pointer;
        transition: background .2s ease;
        flex-shrink: 0;
    }
    .vp-mmap-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .vp-mmap-switch__knob {
        position: absolute;
        top: 2px; left: 2px;
        width: 20px; height: 20px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,.15);
        transition: transform .2s ease;
    }
    .vp-mmap-switch.is-on { background: #00bf3f; }
    .vp-mmap-switch.is-on .vp-mmap-switch__knob { transform: translateX(20px); }

    /* Genplan: список категорий с чекбоксами */
    .vp-mmap-cat-list { display: flex; flex-direction: column; }
    .vp-mmap-cat-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        cursor: pointer;
        user-select: none;
    }
    .vp-mmap-cat-row__icon {
        width: 24px; height: 24px;
        color: #475569;
        flex-shrink: 0;
    }
    .vp-mmap-cat-row__icon svg { width: 100%; height: 100%; }
    .vp-mmap-cat-row__label {
        flex: 1;
        font-size: 15px;
        color: #0f172a;
    }
    .vp-mmap-cat-row__check {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: #00bf3f;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background .15s ease;
    }
    .vp-mmap-cat-row__check svg { width: 18px; height: 18px; }
    .vp-mmap-cat-row.is-off .vp-mmap-cat-row__check {
        background: #cbd5e1;
        color: #fff;
    }
    .vp-mmap-cat-row.is-off .vp-mmap-cat-row__label,
    .vp-mmap-cat-row.is-off .vp-mmap-cat-row__icon { color: #94a3b8; }

    /* Section header в genplan: тоггл + chevron справа */
    .vp-mmap-section__head--genplan { padding-right: 4px; }
    .vp-mmap-section--off { opacity: 0.65; }
    .vp-mmap-section--off .vp-mmap-cat-row { pointer-events: none; }

    /* Свернуть/развернуть */
    .vp-mmap-section__collapse {
        width: 100%;
        margin-top: 12px;
        height: 36px;
        background: rgba(0, 191, 63, 0.10);
        color: #00a536;
        border: none;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .vp-mmap-section__collapse svg {
        width: 14px; height: 14px;
        transition: transform .2s ease;
    }
    .vp-mmap-section.is-collapsed .vp-mmap-section__collapse svg { transform: rotate(180deg); }

    /* Превью линии для маршрутов */
    .vp-mmap-cat-row__preview {
        width: 28px; height: 8px;
        flex-shrink: 0;
    }
    .vp-mmap-cat-row__preview svg { width: 100%; height: 100%; }

    /* === Mobile card-mode для plot/POI/infraobj карточек ===
       Десктопные popover-карточки на мобиле перекидываются в bottom-sheet
       (через JS-патч в openPlotCard/openInfraObjectCard/openPoiPopup). */
    .vp-map-plotcard.vp-mmap-card-mode,
    .vp-map-poicard.vp-mmap-card-mode,
    .vp-map-infraobj-card.vp-mmap-card-mode {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        margin: 0 !important;
        z-index: 1010;
        background: #fff;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
        font-family: "PT Sans", Arial, sans-serif;
    }
    /* Infra-объект-карточка на мобиле: светлый стиль сайта (как на десктопе) */
    .vp-map-infraobj-card.vp-mmap-card-mode {
        background: #ffffff !important;
        border-radius: 24px !important;
        border-top: 4px solid #00bf3f !important;
        margin: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 32px) !important;
        bottom: 0 !important;
        padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
        color: #0f172a !important;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    }
    .vp-map-plotcard.vp-mmap-card-mode.is-open,
    .vp-map-poicard.vp-mmap-card-mode.is-open,
    .vp-map-infraobj-card.vp-mmap-card-mode.is-open {
        transform: translateY(0);
    }
    /* Drag-handle при mobile-sheet */
    .vp-map-plotcard.vp-mmap-card-mode::before,
    .vp-map-poicard.vp-mmap-card-mode::before,
    .vp-map-infraobj-card.vp-mmap-card-mode::before {
        content: '';
        position: absolute;
        top: 8px; left: 50%;
        width: 44px; height: 4px;
        background: #cbd5e1;
        border-radius: 999px;
        transform: translateX(-50%);
    }
    /* Плот-карточка: убираем popover-стрелочку и тени-«хвост». */
    .vp-map-plotcard.vp-mmap-card-mode::after,
    .vp-map-infraobj-card.vp-mmap-card-mode::after { display: none !important; }
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__close,
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__close,
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__close {
        position: absolute !important;
        top: 18px;
        right: 14px;
        width: 36px !important;
        height: 36px !important;
        background: #f1f5f9;
        color: #64748b;
        border-radius: 50%;
        z-index: 2;
    }
    /* Кнопки CTA в плот-карточке: на мобиле растягиваем во всю ширину. */
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__price-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__book {
        height: 52px;
        font-size: 16px;
        border-radius: 14px;
    }
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__mortgage,
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__cta {
        height: 48px;
        border-radius: 14px;
    }
    /* Заголовок плот-карточки крупнее на мобиле — лучше читаемость. */
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__title {
        font-size: 22px;
    }
    .vp-map-plotcard.vp-mmap-card-mode .vp-map-plotcard__price {
        font-size: 24px;
    }
    /* === POI-карточка на мобиле: светлый стиль сайта (как на десктопе) ===
       Белый фон + зелёная accent-полоса сверху + тёмный текст +
       зелёная кнопка primary. */
    .vp-map-poicard.vp-mmap-card-mode {
        max-height: 70vh;
        background: #ffffff !important;
        border-radius: 24px !important;
        border-top: 4px solid #00bf3f !important;
        margin: 0 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 32px) !important;
        bottom: 0 !important;
        padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
        color: #0f172a !important;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    }
    .vp-map-poicard.vp-mmap-card-mode::before {
        background: #cbd5e1 !important;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__header {
        align-items: flex-start;
        gap: 10px;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__title {
        color: #0f172a !important;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.005em;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__meta {
        margin-top: 4px;
        color: #64748b !important;
        font-size: 12px;
        background: #f1f5f9;
        padding: 3px 8px;
        border-radius: 999px;
        display: inline-flex;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__kind {
        color: #64748b !important;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__address {
        color: #475569 !important;
        background-color: #f8fafc !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        font-size: 13.5px;
        margin-top: 8px;
        line-height: 1.45;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__loading,
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__empty {
        color: #94a3b8 !important;
        font-size: 13px;
        margin-top: 8px;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__close {
        background: #f1f5f9 !important;
        color: #64748b !important;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__close:active {
        background: #e2e8f0 !important;
    }
    /* Кнопки на светлой карточке. */
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__actions {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin-top: 14px;
        padding: 0 !important;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__actions-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__actions-row > .vp-map-poicard__btn {
        flex: 1 1 0;
        min-width: 0;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__btn--primary {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 44px;
        background: #00bf3f !important;
        color: #fff !important;
        border: none !important;
        border-radius: 999px !important;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 191, 63, 0.30);
        transition: background .15s ease;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__btn--primary:active {
        background: #00a536 !important;
    }
    /* Secondary на светлой карточке: белая с зелёной outline (как на десктопе) */
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__btn--secondary {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 44px;
        padding: 0 10px;
        background: #ffffff !important;
        color: #00bf3f !important;
        border: 1.5px solid #00bf3f !important;
        border-radius: 999px !important;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: background .15s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vp-map-poicard.vp-mmap-card-mode .vp-map-poicard__btn--secondary:active {
        background: #f0fdf4 !important;
    }
    /* Infra-объект-карточка на мобиле: галерея становится hero-блоком —
       full-bleed сверху карточки, повторяет её закруглённые углы. */
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__bigimg-wrap {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0;
        aspect-ratio: 16 / 10;
        max-height: 50vh;
        background-color: #2a2c33 !important;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__bigimg {
        width: 100%;
        height: 100%;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__bigimg img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Контент под фото (заголовок, описание, миниатюры) — внутренний padding */
    .vp-map-infraobj-card.vp-mmap-card-mode > .vp-map-infraobj-card__title,
    .vp-map-infraobj-card.vp-mmap-card-mode > .vp-map-infraobj-card__desc,
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__thumbs {
        margin-left: 18px;
        margin-right: 18px;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__thumbs {
        margin-top: 12px;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__title {
        color: #0f172a !important;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.005em;
        margin-top: 16px !important;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__desc {
        color: #475569 !important;
        font-size: 14px;
        line-height: 1.5;
        margin-top: 6px !important;
    }
    /* Close X — белый поверх фото с лёгкой тенью */
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__close {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #0f172a !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20);
        top: 14px !important;
        right: 14px !important;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__close:active {
        background: #ffffff !important;
    }
    /* Стрелки prev/next и счётчик — лёгкий фон для видимости поверх фото */
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__arrow {
        background: rgba(255, 255, 255, 0.85) !important;
        color: #1f2937 !important;
    }
    .vp-map-infraobj-card.vp-mmap-card-mode .vp-map-infraobj-card__counter {
        background: rgba(0, 0, 0, 0.55) !important;
        color: #fff !important;
    }

    /* === Sprint 4 polish === */

    /* Overlay поверх карты под bottom-sheet'ами и карточками. Z-index ниже самих
       sheet'ов (1010), но выше карты и floating buttons. */
    .vp-mmap-sheet-overlay {
        z-index: 1005;
        background: rgba(15, 23, 42, 0.40);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* Когда оверлей виден — гасим интерактив floating кнопок, чтобы случайный
       тап под backdrop'ом не нажал кнопку. */
    .vp-mmap-sheet-overlay:not([hidden]) ~ .vp-mmap-fab-right,
    .vp-mmap-sheet-overlay:not([hidden]) ~ .vp-mmap-fab-bottom,
    .vp-mmap-sheet-overlay:not([hidden]) ~ .vp-mmap-topbar { pointer-events: none; }

    /* Драг-handle виднее (тап-зона +12px) */
    .vp-mmap-sheet__handle {
        position: relative;
        cursor: grab;
    }
    .vp-mmap-sheet__handle::before {
        content: '';
        position: absolute;
        top: -12px; left: -22px; right: -22px; bottom: -12px;
    }

    /* Hint курсора на drag-зоне карточек */
    .vp-map-plotcard.vp-mmap-card-mode,
    .vp-map-poicard.vp-mmap-card-mode,
    .vp-map-infraobj-card.vp-mmap-card-mode {
        touch-action: pan-y;
    }

    /* Анимация bounce-back если потянули недостаточно */
    .vp-mmap-sheet,
    .vp-map-plotcard.vp-mmap-card-mode,
    .vp-map-poicard.vp-mmap-card-mode,
    .vp-map-infraobj-card.vp-mmap-card-mode {
        transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Hit-area для плот-маркеров: расширяем tap-зону невидимым ::after,
       визуальные размеры не меняем (палец крупнее курсора). */
    .vp-map--redesign .placemark,
    .vp-map--redesign .marker-name-overlay,
    .vp-map--redesign .vp-map-pair-marker__ring {
        position: relative;
    }
    .vp-map--redesign .placemark::after,
    .vp-map--redesign .marker-name-overlay::after,
    .vp-map--redesign .vp-map-pair-marker__ring::after {
        content: '';
        position: absolute;
        top: -8px; left: -8px; right: -8px; bottom: -8px;
        z-index: -1;
    }

    /* Парные ∞-маркеры: размеры 100% контролирует JS (updatePairMarkerSizes)
       по зуму — синхронизируем с обычными плотами. CSS не должен накладывать
       min-width/min-height: иначе на мелком зуме маркер торчит огромным
       пузырём поверх крошечных плотов. Тач-зона добавляется через ::after
       padding-overlay (см. .placemark::after выше). */

    /* === Контекстная pill «Назад к посёлку» — появляется когда юзер
       отдалился от границ посёлка. Положение: НАД кнопкой «Настройка
       генплана» (bottom-left, рядом с инфраструктурой) — чтобы юзер,
       исследующий инфру, видел return-кнопку рядом с её триггером. */
    .vp-mmap-back-to-village { display: none !important; }
    body.__c-body__FIXED .vp-mmap-back-to-village {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        position: fixed;
        /* «Назад к посёлку» появляется ПОД легендой:
           ген план (16, h52) → back-to-village (76, h44) → легенда (132). */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
        left: 16px;
        z-index: 1001;
        height: 44px;
        padding: 0 18px 0 12px;
        background: #00bf3f;
        color: #fff;
        border: none;
        border-radius: 999px;
        font-family: "PT Sans", Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 4px 16px rgba(0, 191, 63, 0.40);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity .25s ease, transform .25s ease;
    }
    body.__c-body__FIXED .vp-mmap-back-to-village.is-shown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    body.__c-body__FIXED .vp-mmap-back-to-village:active { background: #00a536; }
    body.__c-body__FIXED .vp-mmap-back-to-village svg {
        width: 18px;
        height: 18px;
        color: #fff;
    }

    /* === Top-right: «Легенда» (компактный круг слева от «Фильтры») === */
    .vp-mmap-fab-legend { display: none !important; }
    body.__c-body__FIXED .vp-mmap-fab-legend {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* В одну линию с back и filters (top: 12px). filters-pill = 48 в высоту
           + текст «Фильтры» ≈ 150-160px шириной + right: 12px. Сдвиг легенды
           — за её левый край с зазором. JS-uppdate через CSS var ниже. */
        top: 12px;
        right: var(--vp-legend-right-offset, 180px);
        bottom: auto;
        left: auto;
        z-index: 1001;
        width: 48px;
        height: 48px;
        background: #fff;
        color: #475569;
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
        cursor: pointer;
        transition: background .15s ease, transform .15s ease;
    }
    body.__c-body__FIXED .vp-mmap-fab-legend:active {
        background: #f1f5f9;
        transform: scale(0.95);
    }
    body.__c-body__FIXED .vp-mmap-fab-legend svg { width: 24px; height: 24px; }

    /* === Легенда как bottom-sheet на мобиле ===
       Селекторы БЕЗ .vp-map--redesign ancestor — потому что при открытии
       JS переносит legend в document.body, вне секции карты. */
    .vp-map-legend-popup.vp-mmap-legend-mode {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh;
        margin: 0 !important;
        z-index: 1010;
        background: #fff;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
        font-family: "PT Sans", Arial, sans-serif;
    }
    .vp-map-legend-popup.vp-mmap-legend-mode.is-open {
        transform: translateY(0);
    }
    .vp-map-legend-popup.vp-mmap-legend-mode::before {
        content: '';
        position: absolute;
        top: 8px; left: 50%;
        width: 44px; height: 4px;
        background: #cbd5e1;
        border-radius: 999px;
        transform: translateX(-50%);
    }
    .vp-map-legend-popup.vp-mmap-legend-mode .vp-map-legend-popup__title {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 6px;
    }
    .vp-map-legend-popup.vp-mmap-legend-mode .vp-map-legend-popup__hint {
        font-size: 13px;
        color: #94a3b8;
        margin-bottom: 14px;
    }
    .vp-map-legend-popup.vp-mmap-legend-mode .vp-map-legend-popup__row {
        padding: 8px 0;
        font-size: 15px;
    }

    /* Edge-индикаторы инфраструктуры: на мобиле iframe становится
       fullscreen (position:fixed), поэтому layer тоже должен быть fixed
       над iframe (z-index 99). Layer сам прозрачный + pointer-events:none,
       индикаторы внутри получают pointer-events:auto через JS. */
    /* По умолчанию (карта в preview-режиме) layer невидим — иначе индикаторы
       зависают по бокам страницы после закрытия карты. */
    .vp-map-edge-layer.vp-map-edge-layer--mobile {
        display: none !important;
    }
    /* Виден только когда карта реально открыта в fullscreen-режиме. */
    body.__c-body__FIXED .vp-map-edge-layer.vp-map-edge-layer--mobile {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        inset: 0 !important;
        z-index: 500 !important;
        pointer-events: none;
    }
    body.__c-body__FIXED .vp-map-edge-layer.vp-map-edge-layer--mobile .vp-map-edge-indicator {
        pointer-events: auto;
    }
    /* ZFX 2026-06-02: pin на моб уменьшен 32→28 — компактнее, не перегружает
       экран (PIN_HALF в detail.js синхронно = 16). */
    .vp-map-edge-indicator {
        width: 28px !important;
        height: 28px !important;
        margin-left: -14px !important;
        margin-top: -14px !important;
        border-width: 2px !important;
    }
    .vp-map-edge-indicator::before {
        width: 22px !important;
        height: 22px !important;
        margin-left: -11px !important;
        margin-top: -11px !important;
    }
    .vp-map-edge-indicator__icon {
        width: 13px !important;
        height: 13px !important;
    }
    .vp-map-edge-indicator__icon svg {
        width: 13px !important;
        height: 13px !important;
    }
    /* Меньший бейдж-счётчик под уменьшённый pin. */
    .vp-map-edge-indicator__count {
        top: -5px !important;
        right: -5px !important;
        min-width: 15px !important;
        height: 15px !important;
        font-size: 9px !important;
        line-height: 13px !important;
        border-width: 1.5px !important;
    }
}

/* ZFX redesign: категория-тег в шапке POI-карточки. Короткий pill-чип
   с цветом по типу инфраструктуры. */
.vp-map-poicard__tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    background: #f1f5f9;
    color: #475569;
}
.vp-map-poicard__tag[hidden] { display: none; }
.vp-map-poicard__tag--mag   { background: #dcfce7; color: #15803d; }
.vp-map-poicard__tag--caf   { background: #ffedd5; color: #c2410c; }
.vp-map-poicard__tag--med   { background: #fee2e2; color: #b91c1c; }
.vp-map-poicard__tag--obr   { background: #dbeafe; color: #1d4ed8; }
.vp-map-poicard__tag--sport { background: #ede9fe; color: #6d28d9; }
.vp-map-poicard__tag--beach { background: #cffafe; color: #0e7490; }
.vp-map-poicard__tag--ost   { background: #f1f5f9; color: #475569; }

/* ZFX 2026-05-31: секция «План развития» (.vp-plan) идёт сразу под картой.
   Её декоративный серый «навес» .vp-plan--div__EMPTY (main.css: position:absolute;
   top:-40px) заезжал на нижние 40px карты («нижний блок заходит на карту»).
   Скрываем навес только в стыке карта→.vp-plan; .vp-plan начинается чисто от низа карты. */
.vp-map.vp-map--redesign + .vp-plan > .vp-plan--div__EMPTY {
    display: none !important;
}

/* ZFX 2026-06-01: статус-плашка для проданных/забронированных участков в карточке */
.vp-map--redesign .vp-map-plotcard__sold-status {
    display: inline-block;
    margin: 8px 0 4px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #eef1f5;
    color: #5a6c7c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}