/* ==========================================================================
   1. ЖЕСТКИЙ СБРОС И ПОЛНОЭКРАННЫЙ РЕЖИМ (FIX ДЛЯ БЕЛЫХ ПОЛОС)
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

body.page-map {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

body.page-map #desktop-search-form {
    display: none !important;
}

/* Убиваем отступ для мобильного меню из base.html */
body { padding-bottom: 0 !important; }

/* ШАПКА: Жестко фиксируем наверху без зазоров (Видна только на ПК) */
/* КАРТА: На мобилках прибиваем к самому верху */
body > main {
    position: fixed !important;
    top: 0 !important; /* На телефонах шапки нет, тянем до упора вверх */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    z-index: 10 !important;
    border-radius: 0 !important;
    max-width: none !important;
}

/* На ПК карта живет под общей шапкой из base.html */
@media (min-width: 768px) {
    body > main {
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        width: 100vw !important;
    }
}

/* Скрываем футер, если он есть */
footer, body > footer { display: none !important; }


/* ==========================================================================
   2. ВНУТРЕННИЕ КОНТЕЙНЕРЫ КАРТЫ
   ========================================================================== */
.map-page-wrapper {
    --map-left-gap: 12px;
    --map-search-height: 52px;
    --map-collection-bottom-desktop: 40px;
    --map-collection-closed-height: 64px;
    --map-left-panel-width: 420px;

    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.map-page-wrapper > div.relative {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#map {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    touch-action: none;
}

#map .maplibregl-canvas-container,
#map .maplibregl-canvas,
#map .maplibregl-map {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   3. ПОДЪЕМ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ НАД МОБИЛЬНЫМ НАВБАРОМ
   ========================================================================== */
#search-wrapper,
#copilot-panel,
#left-collection-menu {
    width: var(--map-left-panel-width) !important;
}

#copilot-panel {
    top: calc(1rem + var(--map-search-height) + var(--map-left-gap)) !important;
    bottom: calc(var(--map-collection-bottom-desktop) + var(--map-collection-closed-height) + var(--map-left-gap)) !important;
    left: 1rem !important;
    max-height: none !important;
}

#left-collection-menu {
    z-index: 70 !important;
}

@media (min-width: 768px) {
    .map-page-wrapper {
        --map-left-gap: 8px;
        --map-search-height: 40px;
        --map-collection-bottom-desktop: 18px;
        --map-collection-closed-height: 50px;
        --map-left-panel-width: 330px;
        --desktop-nav-offset: 92px;
        --map-floating-panel-top: calc(var(--desktop-nav-offset) + var(--map-search-height) + 12px);
    }

    .map-page-wrapper > .relative > .absolute.top-4.left-4.right-4 {
        top: var(--desktop-nav-offset) !important;
        left: 10px !important;
        right: 10px !important;
    }

    #search-wrapper {
        width: var(--map-left-panel-width) !important;
        min-height: var(--map-search-height) !important;
        padding: 4px !important;
        gap: 5px !important;
        border-radius: 14px !important;
        align-items: center !important;
    }

    #search-wrapper input {
        min-height: 32px;
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 10px !important;
    }

    #btn-search,
    #btn-layer-switcher,
    #btn-poi-filters {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 11px !important;
    }

    #btn-search svg,
    #btn-layer-switcher svg,
    #btn-poi-filters svg {
        width: 16px !important;
        height: 16px !important;
    }

    #btn-mode-routes,
    #btn-mode-planner {
        min-height: 32px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: 0.07em !important;
    }

    #copilot-panel {
        top: calc(var(--desktop-nav-offset) + var(--map-search-height) + 52px) !important;
        bottom: calc(var(--map-collection-bottom-desktop) + var(--map-collection-closed-height) + var(--map-left-gap)) !important;
        left: 10px !important;
        width: var(--map-left-panel-width) !important;
        border-radius: 22px !important;
    }

    #left-collection-menu {
        left: 10px !important;
        bottom: var(--map-collection-bottom-desktop) !important;
        width: var(--map-left-panel-width) !important;
    }

    #left-collection-menu > div {
        border-radius: 22px !important;
    }

    #planner-sidebar,
    #route-info-card {
        top: var(--map-floating-panel-top) !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 330px !important;
        border-radius: 22px !important;
    }

    #planner-sidebar > div:first-child,
    #route-info-card > div:first-child {
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
    }

    #layer-switcher-menu,
    #poi-filter-menu {
        top: var(--map-floating-panel-top) !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 330px !important;
        max-height: none !important;
        border-radius: 22px !important;
        z-index: 220 !important;
    }

    #layer-switcher-menu {
        padding: 14px !important;
    }

    #planner-sidebar .p-4,
    #planner-sidebar .md\:p-5,
    #route-info-card .p-4,
    #route-info-card .md\:p-5,
    #poi-filter-menu .px-4,
    #layer-switcher-menu .p-4 {
        padding: 14px !important;
    }

    #planner-sidebar input,
    #planner-sidebar textarea,
    #planner-sidebar select {
        font-size: 12px !important;
    }

    #planner-toolbar {
        bottom: 18px !important;
    }

    #planner-toolbar > div {
        padding: 5px !important;
        border-radius: 16px !important;
        width: max-content !important;
        max-width: calc(100vw - 360px) !important;
    }

    #planner-toolbar button {
        width: auto !important;
        height: 34px !important;
        min-width: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-radius: 10px !important;
    }

    #planner-toolbar svg {
        width: 15px !important;
        height: 15px !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] {
        right: 10px !important;
        bottom: 128px !important;
        gap: 5px !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] button,
    #btn-my-location,
    #btn-map-ruler {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (min-width: 768px) {
    #map-top-overlay {
        max-width: 100vw;
    }

    #map-top-overlay > .flex > .flex {
        min-width: 0;
    }

    #map-top-overlay > .flex > .flex > div:first-child {
        min-width: 0;
    }

    #map-mode-controls {
        flex: 0 1 auto !important;
        min-width: 0;
        min-height: 40px !important;
        padding: 4px !important;
        align-items: center !important;
        border-radius: 14px !important;
        max-width: min(100%, 390px);
        scrollbar-width: none;
    }

    #map-mode-controls::-webkit-scrollbar {
        display: none;
    }

    body.page-map .site-topbar {
        top: 14px !important;
        width: min(calc(100vw - 48px), 1320px) !important;
        min-width: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        border-radius: 26px !important;
        gap: 14px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(230, 234, 240, 0.9) !important;
        box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.035) !important;
        backdrop-filter: blur(22px) saturate(1.14) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
    }

    body.page-map .site-topbar > div:first-child {
        flex: 0 0 auto;
        gap: 14px !important;
    }

    body.page-map .site-topbar-left > a img {
        width: 126px !important;
        height: auto !important;
        max-width: none !important;
        aspect-ratio: 1800 / 550;
        object-fit: contain;
    }

    body.page-map .site-topbar > div:nth-child(2) {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex: 0 0 auto;
        min-width: 0;
        height: 44px !important;
        padding: 3px !important;
        gap: 2px !important;
        justify-content: center;
        border-radius: 22px !important;
        background: rgba(248, 250, 252, 0.9) !important;
        border-color: rgba(230, 234, 240, 0.86) !important;
    }

    body.page-map .site-topbar > div:nth-child(2) a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 92px !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 19px !important;
        font-size: 13.5px !important;
        font-weight: 620 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    body.page-map .site-topbar > div:last-child {
        flex: 0 0 auto;
        gap: 8px !important;
    }

    body.page-map .site-action-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 18px !important;
    }

    body.page-map .site-create-button {
        height: 44px !important;
        min-height: 44px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        border-radius: 22px !important;
        font-size: 14px !important;
        font-weight: 720 !important;
    }

    body.page-map .site-profile-button {
        min-height: 44px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        border-radius: 20px !important;
    }

    body.page-map .site-profile-button > span:first-child {
        width: 30px !important;
        height: 30px !important;
    }

    body.page-map .site-topbar > div:last-child > a[href*="t.me"],
    body.page-map .site-topbar > div:last-child > button[onclick="openFeedbackModal()"] {
        display: none !important;
    }
}

@media (min-width: 1360px) {
    #search-wrapper {
        width: min(var(--map-left-panel-width), 22vw) !important;
    }

    #map-mode-controls {
        max-width: min(390px, 30vw);
    }
}

@media (min-width: 768px) and (max-width: 1359px) {
    body.page-map .site-topbar {
        top: 14px !important;
        width: min(calc(100vw - 48px), 1320px) !important;
    }

    .map-page-wrapper {
        --desktop-nav-offset: 92px;
    }

    #map-top-overlay {
        top: var(--desktop-nav-offset) !important;
    }

    #search-wrapper {
        width: min(320px, 42vw) !important;
    }

    #map-mode-controls {
        max-width: calc(100vw - min(320px, 42vw) - 34px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.page-map .site-topbar {
        width: min(calc(100vw - 24px), 1240px) !important;
        height: 64px !important;
        min-height: 64px !important;
        min-width: 0;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.page-map .site-topbar-left > a img {
        width: 112px !important;
        height: auto !important;
    }

    body.page-map .site-topbar > div:nth-child(2) {
        gap: 2px !important;
        padding: 3px !important;
        height: 44px !important;
    }

    body.page-map .site-topbar > div:nth-child(2) a {
        min-width: 82px !important;
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    body.page-map .site-topbar .create-menu-wrap button {
        width: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.page-map .site-topbar .create-menu-wrap button span {
        display: none !important;
    }

    #search-wrapper {
        width: min(280px, 45vw) !important;
    }

    #map-mode-controls {
        max-width: calc(100vw - min(280px, 45vw) - 32px);
    }

    #btn-mode-routes,
    #btn-mode-planner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 1440px) {
    .map-page-wrapper {
        --map-left-panel-width: 330px;
    }

    #copilot-panel,
    #left-collection-menu,
    #planner-sidebar,
    #route-info-card,
    #layer-switcher-menu,
    #poi-filter-menu {
        width: var(--map-left-panel-width) !important;
    }
}

@media (min-width: 1920px) {
    .map-page-wrapper {
        --map-inline-overlay-top: 20px;
        --map-left-panel-width: 330px;
        --map-floating-panel-top: calc(var(--map-inline-overlay-top) + var(--map-search-height) + 8px);
    }

    #map-top-overlay {
        top: var(--map-inline-overlay-top) !important;
        left: 10px !important;
        right: 10px !important;
    }

    #map-top-overlay > .flex > .flex {
        align-items: center !important;
    }

    #search-wrapper {
        width: var(--map-left-panel-width) !important;
        max-width: var(--map-left-panel-width) !important;
    }

    #map-mode-controls {
        width: auto !important;
        max-width: 390px !important;
        align-self: center !important;
    }
}

@media (max-width: 767px) {
    .map-page-wrapper {
        --map-edge: clamp(8px, 3.2vw, 14px);
        --map-top: clamp(8px, 2.8vw, 16px);
        --map-left-gap: clamp(8px, 2.8vw, 12px);
        --map-floating-panel-top: calc(var(--map-top) + var(--map-control) + 12px);
        --map-bottom-nav-height: 74px;
        --map-bottom-nav-gap: 12px;
        --map-bottom-nav-extra: 0px;
        --map-bottom-safe: calc(env(safe-area-inset-bottom, 0px) + var(--map-bottom-nav-height) + var(--map-bottom-nav-gap) + var(--map-bottom-nav-extra));
        --map-control: clamp(30px, 9.4vw, 38px);
        --map-search-height: calc(var(--map-control) + clamp(8px, 2.8vw, 12px));
        --map-collection-closed-height: clamp(56px, 15vw, 66px);
        --map-icon: clamp(14px, 4.3vw, 18px);
        --map-radius: clamp(14px, 4.6vw, 22px);
        --map-panel-radius: clamp(20px, 6.4vw, 30px);
        --map-gap: clamp(4px, 1.6vw, 8px);
        --map-font-xs: clamp(8px, 2.6vw, 10px);
        --map-font-sm: clamp(10px, 3.1vw, 12px);
        --map-toolbar-bottom: calc(var(--map-bottom-safe) + 4px);
    }

    @media (display-mode: standalone), (display-mode: fullscreen) {
        .map-page-wrapper {
            --map-bottom-nav-height: 74px;
            --map-bottom-nav-gap: 12px;
            --map-bottom-nav-extra: 0px;
            --map-bottom-safe: calc(env(safe-area-inset-bottom, 0px) + var(--map-bottom-nav-height) + var(--map-bottom-nav-gap) + var(--map-bottom-nav-extra));
            --map-toolbar-bottom: calc(var(--map-bottom-safe) + 4px);
        }
    }

    .map-page-wrapper > .relative > .absolute.top-4.left-4.right-4 {
        top: var(--map-top) !important;
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
    }

    #search-wrapper {
        width: 100% !important;
        padding: clamp(4px, 1.4vw, 6px) !important;
        border-radius: var(--map-radius) !important;
    }

    #copilot-panel {
        top: calc(var(--map-top) + var(--map-search-height) + var(--map-left-gap)) !important;
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
        bottom: calc(var(--map-bottom-safe) + var(--map-collection-closed-height) + var(--map-left-gap)) !important;
        width: auto !important;
        max-height: none !important;
        border-radius: var(--map-panel-radius) !important;
    }

    #search-wrapper input {
        min-height: var(--map-control);
        font-size: var(--map-font-sm) !important;
        padding-left: clamp(8px, 2.5vw, 12px) !important;
        padding-right: clamp(8px, 2.5vw, 12px) !important;
    }

    #btn-search,
    #mobile-search-toggle,
    #btn-layer-switcher,
    #btn-poi-filters {
        width: var(--map-control) !important;
        height: var(--map-control) !important;
        min-width: var(--map-control) !important;
        border-radius: calc(var(--map-radius) - 5px) !important;
    }

    #btn-search svg,
    #mobile-search-toggle svg,
    #btn-layer-switcher svg,
    #btn-poi-filters svg {
        width: var(--map-icon) !important;
        height: var(--map-icon) !important;
    }

    #btn-mode-routes,
    #btn-mode-planner {
        min-height: var(--map-control) !important;
        padding: 0 clamp(8px, 2.5vw, 14px) !important;
        border-radius: calc(var(--map-radius) - 4px) !important;
        font-size: var(--map-font-xs) !important;
        letter-spacing: 0.06em !important;
        line-height: 1 !important;
    }

    #track-recording-stats {
        top: calc(var(--map-top) + var(--map-control) + 12px) !important;
        max-width: calc(100vw - (var(--map-edge) * 2)) !important;
        padding: clamp(7px, 2vw, 10px) clamp(10px, 3vw, 14px) !important;
        gap: clamp(8px, 2.5vw, 14px) !important;
        border-radius: var(--map-radius) !important;
    }

    #planner-toolbar {
        bottom: var(--map-toolbar-bottom) !important;
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
        padding: 0 !important;
    }

    #planner-toolbar > div {
        width: max-content !important;
        max-width: 100% !important;
        padding: clamp(5px, 1.6vw, 8px) !important;
        border-radius: var(--map-radius) !important;
        gap: var(--map-gap) !important;
    }

    #planner-toolbar button {
        width: auto !important;
        height: var(--map-control) !important;
        min-width: 0 !important;
        padding-left: clamp(7px, 2vw, 10px) !important;
        padding-right: clamp(7px, 2vw, 10px) !important;
        border-radius: calc(var(--map-radius) - 7px) !important;
    }

    #planner-toolbar svg {
        width: var(--map-icon) !important;
        height: var(--map-icon) !important;
    }

    #planner-toolbar .flex.flex-1 {
        gap: clamp(2px, 1vw, 5px) !important;
        padding: clamp(3px, 1vw, 5px) !important;
        margin-right: 0 !important;
        border-radius: calc(var(--map-radius) - 5px) !important;
    }

    #planner-toolbar .w-px {
        height: calc(var(--map-control) - 8px) !important;
    }

    #planner-sidebar,
    #route-info-card {
        top: var(--map-floating-panel-top) !important;
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
        bottom: var(--map-bottom-safe) !important;
        width: auto !important;
        border-radius: var(--map-panel-radius) !important;
        margin: 0 !important;
    }

    #planner-sidebar input,
    #planner-sidebar textarea,
    #planner-sidebar select {
        font-size: var(--map-font-sm) !important;
        border-radius: clamp(10px, 3vw, 14px) !important;
    }

    #planner-sidebar label,
    #planner-sidebar button,
    #route-info-card button {
        letter-spacing: 0.06em !important;
    }

    #planner-sidebar .flex-1.overflow-y-auto,
    #route-info-card .overflow-y-auto {
        padding: clamp(12px, 3.6vw, 16px) !important;
    }

    #layer-switcher-menu,
    #poi-filter-menu {
        top: var(--map-floating-panel-top) !important;
        bottom: var(--map-bottom-safe) !important;
        right: var(--map-edge) !important;
        left: var(--map-edge) !important;
        width: auto !important;
        max-height: calc(100dvh - var(--map-floating-panel-top) - var(--map-bottom-safe)) !important;
        border-radius: var(--map-panel-radius) var(--map-panel-radius) calc(var(--map-panel-radius) - 8px) calc(var(--map-panel-radius) - 8px) !important;
        z-index: 220 !important;
        transform-origin: bottom center !important;
    }

    #layer-switcher-menu {
        padding: clamp(12px, 3.5vw, 16px) !important;
    }

    #layer-switcher-menu .grid {
        gap: clamp(6px, 2vw, 10px) !important;
    }

    #layer-switcher-menu button,
    #layer-switcher-menu label,
    #poi-filter-menu button,
    #poi-filter-menu label {
        font-size: var(--map-font-xs) !important;
        letter-spacing: 0.06em !important;
    }

    #poi-filter-menu {
        max-width: none !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] {
        right: var(--map-edge) !important;
        bottom: calc(var(--map-bottom-safe) + clamp(128px, 34vw, 164px)) !important;
        gap: var(--map-gap) !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] button {
        width: var(--map-control) !important;
        height: var(--map-control) !important;
    }

    .map-page-wrapper .absolute.bottom-\[170px\] svg {
        width: var(--map-icon) !important;
        height: var(--map-icon) !important;
    }

    #left-collection-menu {
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
        bottom: var(--map-bottom-safe) !important;
        width: auto !important;
        /* Опустили коллекцию под все остальные окна: было 70, стало 35 */
        z-index: 35 !important;
        pointer-events: none;
    }

    #left-collection-menu > div {
        pointer-events: auto; /* Ловим клики на самой панели */

    }

    /* ИСПРАВЛЕНИЕ: Убрали жесткий !important для закрытого состояния коллекции */
    #collection-content {
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ИСПРАВЛЕНИЕ: Ограничиваем высоту только когда меню открыто */
    #left-collection-menu.collection-open #collection-content {
        max-height: min(42dvh, 360px) !important;
    }

    #radar-sidebar {
        left: var(--map-edge) !important;
        right: var(--map-edge) !important;
        bottom: var(--map-bottom-safe) !important;
        width: auto !important;
        height: min(48dvh, 390px) !important;
        border-radius: var(--map-panel-radius) !important;
    }

    #planner-modal {
        padding: var(--map-edge) !important;
        padding-bottom: var(--map-bottom-safe) !important;
    }

    #planner-modal > div {
        max-height: calc(100dvh - var(--map-bottom-safe) - var(--map-edge)) !important;
        border-radius: var(--map-panel-radius) !important;
    }

    .maplibregl-ctrl-bottom-right,
    .maplibregl-ctrl-bottom-left {
        bottom: calc(var(--map-bottom-safe) + 4px) !important;
    }

    @media (max-width: 374px) {
        .map-page-wrapper {
            --map-edge: 8px;
            --map-control: 30px;
            --map-icon: 14px;
            --map-radius: 14px;
        }

        #btn-mode-routes,
        #btn-mode-planner {
            padding-left: 7px !important;
            padding-right: 7px !important;
            font-size: 7.5px !important;
            letter-spacing: 0.04em !important;
        }

        #planner-toolbar > div {
            overflow-x: auto !important;
        }
    }
}


/* ==========================================================================
   4. АНИМАЦИИ И ПЕРЕХОДЫ
   ========================================================================== */
#collection-content { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
#collection-arrow { transition: transform 0.3s ease; }

#route-info-card {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(150%);
    z-index: 150 !important;
}
#route-info-card.active { transform: translateY(0); }

#planner-sidebar {
    z-index: 120 !important;
}

#left-collection-menu {
    z-index: 130 !important;
}

#layer-switcher-menu,
#poi-filter-menu {
    z-index: 220 !important;
}


/* ==========================================================================
   5. КАСТОМИЗАЦИЯ POPUP
   ========================================================================== */
.maplibregl-popup-content {
    padding: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1) !important;
    border: 1px solid #f3f4f6 !important;
}

.maplibregl-popup-close-button {
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ==========================================================================
   6. СКРОЛЛБАРЫ
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 20px; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ==========================================================================
   7. ГИД ПЛАНИРОВЩИКА
   ========================================================================== */
.planner-guide-theme.driver-popover {
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(249, 115, 22, 0.14) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24) !important;
    font-family: 'Inter', sans-serif !important;
}
.planner-guide-theme .driver-popover-title {
    margin-bottom: 8px !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}
.planner-guide-theme .driver-popover-description {
    color: #4b5563 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}
.planner-guide-theme .driver-popover-progress-text {
    color: #9ca3af !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.planner-guide-theme .driver-popover-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 18px !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.planner-guide-theme .driver-popover-next-btn,
.planner-guide-theme .driver-popover-prev-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    padding: 9px 14px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.planner-guide-theme .driver-popover-navigation-btns {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.planner-guide-theme .driver-popover-next-btn {
    background: #f97316 !important;
    border: 0 !important;
    color: #fff !important;
}
.planner-guide-theme .driver-popover-prev-btn {
    background: #f3f4f6 !important;
    border: 0 !important;
    color: #4b5563 !important;
}
.planner-guide-theme .driver-popover-close-btn {
    top: 14px !important;
    right: 14px !important;
    color: #9ca3af !important;
}

/* Верхняя строка карты на широких десктопах: поиск и режимы на уровне общей шапки. */
@media (min-width: 1536px) {
    body.page-map .site-topbar {
        width: clamp(960px, calc(100vw - 760px), 1168px) !important;
    }

    .map-page-wrapper {
        --desktop-nav-offset: 26px;
        --map-search-height: 42px;
        --map-left-panel-width: clamp(260px, 18vw, 330px);
        --map-floating-panel-top: 92px;
    }

    body.page-map .map-page-wrapper #map-top-overlay {
        top: var(--desktop-nav-offset) !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 110 !important;
    }

    body.page-map .map-page-wrapper #map-top-overlay > .flex > .flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    body.page-map .map-page-wrapper #map-top-overlay > .flex > .flex > div:first-child {
        flex: 0 0 var(--map-left-panel-width) !important;
        width: var(--map-left-panel-width) !important;
        max-width: var(--map-left-panel-width) !important;
    }

    body.page-map .map-page-wrapper #search-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-height: var(--map-search-height) !important;
        height: var(--map-search-height) !important;
        padding: 4px !important;
        gap: 5px !important;
        align-items: center !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 248, 0.82) !important;
    }

    body.page-map .map-page-wrapper #search-wrapper input {
        min-height: 34px !important;
        height: 34px !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body.page-map .map-page-wrapper #search-suggestions {
        top: calc(100% + 10px) !important;
    }

    body.page-map .map-page-wrapper #btn-search,
    body.page-map .map-page-wrapper #btn-layer-switcher,
    body.page-map .map-page-wrapper #btn-poi-filters {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 12px !important;
    }

    body.page-map .map-page-wrapper #map-mode-controls {
        flex: 0 0 auto !important;
        align-self: center !important;
        width: auto !important;
        max-width: clamp(284px, 18.5vw, 316px) !important;
        min-height: var(--map-search-height) !important;
        height: var(--map-search-height) !important;
        padding: 4px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        border-radius: 16px !important;
    }

    body.page-map .map-page-wrapper #btn-mode-routes,
    body.page-map .map-page-wrapper #btn-mode-planner {
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 13px !important;
    }
}