/* Inter (self-hosted, с кириллицей) — без внешней зависимости от Google Fonts (GDPR) */
@font-face{font-family:"Inter";src:url("/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/InterVariable-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

/* --- BASE --- */
html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "slnt" 0;
    letter-spacing: -0.01em;
    overflow: hidden;
    background: var(--bg-sunken);
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- LOADER --- */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-raised);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-overlay p {
    margin-top: 18px;
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--hairline-strong);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Геометрия правой зоны шапки — ЕДИНСТВЕННЫЙ источник правды.
   Отсюда её читают и .right-panel/.search-box ниже, и расчёт центра
   меню-островка в @media (min-width: 1200px) в конце файла. Поменяешь
   значение здесь — центр пересчитается сам, руками ничего не искать. */
:root {
    --search-reserve: 300px; /* ширина .right-panel: резерв под раскрытие поиска */
    --search-collapsed: 48px; /* ширина свёрнутого .search-box: видимая лупа */
}

/* --- MAIN MAP UI --- */
.ui-layout {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1500;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.left-panel,
.right-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: auto;
}

.left-panel {
    width: fit-content;
    align-items: flex-start;
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}

.left-panel.hidden-up {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
}

.right-panel {
    width: var(--search-reserve); /* = 300px, резерв под раскрытие поиска */
    align-items: flex-end;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- BRAND BENTO --- */
.map-brand-bento {
    width: 248px;
    padding: 16px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--bg-inverse) 92%, transparent);
    backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--accent-hover) 16%, transparent);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--bg-inverse) 28%, transparent);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.map-brand-main {
    display: block;
    text-decoration: none;
}

.map-brand-logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.map-brand-subtitle {
    margin-top: 6px;
    color: color-mix(in srgb, var(--text-inverse) 52%, transparent);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.map-brand-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-brand-divider {
    width: 1px;
    height: 20px;
    background: color-mix(in srgb, var(--text-inverse) 20%, transparent);
    flex-shrink: 0;
    margin: 0 1px;
}

.map-route-btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.map-brand-actions .map-account-pill.active {
    background: color-mix(in srgb, var(--text-inverse) 16%, transparent) !important;
    color: var(--text-inverse) !important;
}

.map-account-pill {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-inverse) 8%, transparent);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent);
    box-shadow: none;
    box-sizing: border-box;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .map-account-pill:hover {
        transform: translateY(-1px);
        background: color-mix(in srgb, var(--text-inverse) 14%, transparent);
    }
}


.map-account-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-inverse) 72%, transparent);
    box-shadow: 0 0 0 2px var(--bg-inverse-warm);
}

/* active account */
.map-account-pill.active {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}

.map-account-pill.active:hover {
    background: var(--accent);
    color: var(--text);
}

.map-account-pill.active .map-account-dot {
    background: var(--bg-inverse);
    box-shadow: 0 0 0 2px var(--accent);
}

.map-brand-action {
    height: 38px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-inverse) 8%, transparent);
    color: var(--text-inverse);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 850;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .map-brand-action:hover {
        background: color-mix(in srgb, var(--text-inverse) 14%, transparent);
        transform: translateY(-1px);
    }
}

.map-brand-action.prime {
    background: var(--accent);
    color: var(--text);
}

/* --- FILTERS --- */
.vertical-filters-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    order: 1;
    flex-grow: 1;
}

.vertical-filters-container::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-raised) 62%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--hairline-strong) 60%, transparent);
    border-radius: 20px;
    padding: 0 20px;
    height: 48px;
    font-size: 14px;
    font-weight: 750;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .filter-btn:hover {
        transform: translateY(-1px);
        background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
    }
}

.filter-btn.active {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}

.filter-btn.prime-locked:hover {
    border-color: color-mix(in srgb, var(--accent-hover) 55%, transparent);
    background: color-mix(in srgb, var(--bg-raised) 76%, transparent);
}

.lock-icon {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.7;
}

.search-item svg,
.filter-btn svg {
    width: 18px;
    height: 18px;
}

/* --- SEARCH --- */
.search-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    z-index: 600;
    order: 2;
}

.search-box {
    position: relative;
    background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
    backdrop-filter: blur(20px);
    border: 2px solid color-mix(in srgb, var(--hairline-strong) 60%, transparent);
    border-radius: 30px;
    width: var(--search-collapsed); /* = 48px, видимая лупа */
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--bg-inverse) 10%, transparent);
    transition: width 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        gap 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
}

.search-box:hover,
.search-box:focus-within {
    /* Раскрытый поиск занимает ВЕСЬ резерв .right-panel — потому и та же
       переменная: иначе раскрытие не заполнило бы зарезервированную ширину. */
    width: var(--search-reserve); /* = 300px */
    padding: 0 18px;
    gap: 12px;
    border-color: var(--accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent-hover) 20%, transparent);
    cursor: text;
}

#map-search {
    background: transparent;
    border: none;
    outline: none;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 16px;
    font-weight: 550;
    color: var(--text);
    transition: width 0.26s ease, opacity 0.26s ease;
}

.search-box:hover #map-search,
.search-box:focus-within #map-search {
    width: 100%;
    opacity: 1;
}

.search-results-dropdown {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    background: var(--bg-raised);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--bg-inverse) 5%, transparent);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 15px 45px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
    z-index: 9999 !important;
}

.search-item {
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--hairline);
}

.search-item:hover {
    background: var(--bg-raised);
}

.search-item .item-title {
    font-weight: 650;
    font-size: 14px;
    color: var(--text);
}

/* --- SIDEBAR --- */
.sidebar {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    contain: paint;
    isolation: isolate;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(130%);
    background: var(--bg-raised);
    box-shadow: -10px 0 40px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

@media (min-width: 769px) {
    .sidebar {
        top: 90px;
        right: 20px;
        width: 380px;
        max-height: calc(100vh - 120px);
        border-radius: 36px;
        box-shadow: -16px 0 32px -10px color-mix(in srgb, var(--bg-inverse) 16%, transparent);
    }

    .sidebar.active {
        transform: translateX(0);
    }
}

#sb-img {
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: 280px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-content {
    padding: 24px 28px 60px;
    overflow-y: visible;
    flex-grow: 1;
}

.tags-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tag {
    background: var(--bg-inverse-warm);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 850;
    display: inline-block;
}

.tag.price-tag {
    background: var(--bg-inverse-warm);
    color: var(--accent);
}

h2 {
    font-size: 24px;
    margin: 15px 0 10px;
    color: var(--text);
    font-weight: 850;
    letter-spacing: -0.03em;
}

p {
    line-height: 1.6;
    color: var(--text);
    font-size: 16px;
    margin-bottom: 25px;
}

.close-btn {
    position: sticky;
    top: 20px;
    align-self: flex-end;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: -56px;
    background: color-mix(in srgb, var(--bg-raised) 75%, transparent);
    backdrop-filter: blur(10px);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--text);
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.action-btn {
    width: 100%;
    background: var(--accent);
    color: var(--text);
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent-hover) 25%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.action-btn svg {
    width: 18px;
    height: 18px;
}

/* --- GUIDE TIP --- */
.guide-tip-container {
    background: var(--bg-sunken);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    color: var(--text);
}

.guide-header {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.guide-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--hairline-strong) 30%, transparent);
    flex-shrink: 0;
}

.guide-name {
    font-size: 16px;
    font-weight: 850;
    color: var(--text);
    margin-bottom: 2px;
}

.guide-status {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.guide-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    font-weight: 500;
    color: var(--text);
}

.guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    transition: opacity 0.2s;
}

.guide-link:hover {
    opacity: 0.8;
}

.link-icon {
    font-size: 14px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
}

.link-icon svg {
    color: var(--text);
    stroke: currentColor;
}

/* --- AUDIO PLAYER --- */
.apple-audio-player {
    background: var(--bg-inverse);
    border-radius: 22px;
    padding: 12px 16px;
    margin-bottom: 25px;
    border: 1px solid color-mix(in srgb, var(--bg-raised) 10%, transparent);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
}

.player-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.play-btn:active {
    transform: scale(0.9);
}

.audio-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.audio-label {
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-inverse);
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: color-mix(in srgb, var(--bg-raised) 15%, transparent);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transition: width 0.1s linear;
}

/* --- MARKERS --- */
.custom-marker {
    background: var(--bg-raised);
    color: var(--text);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
    border: 2px solid var(--hairline);
    transition:
        border-color 0.3s,
        box-shadow 0.3s,
        background 0.3s,
        transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .custom-marker:hover {
        transform: scale(1.15);
        border-color: var(--accent);
    }
}

.custom-marker.active-marker {
    background: var(--bg-inverse) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 25px color-mix(in srgb, var(--accent-hover) 50%, transparent);
    transform: scale(1.25);
    z-index: 999;
}

.custom-marker svg {
    width: 16px;
    height: 16px;
    transition: color 0.3s ease;
}

/* --- MAP STYLE SWITCHER --- */
.style-switcher {
    position: absolute;
    bottom: 30px;
    left: 20px;
    z-index: 100;
    background: var(--bg-raised);
    color: var(--text);
    border: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 15px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--bg-inverse) 10%, transparent);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.style-switcher svg {
    width: 18px;
    height: 18px;
}

.mapboxgl-ctrl-bottom-left {
    bottom: 80px !important;
    left: 10px !important;
    z-index: 100;
}

/* --- PRIME TEASER MODAL --- */
.prime-teaser-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.prime-teaser-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.prime-teaser-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-inverse) 34%, transparent);
    backdrop-filter: blur(14px);
}

.prime-teaser-card {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    background: var(--bg-inverse);
    color: var(--text-inverse);
    border-radius: 34px;
    padding: 28px;
    box-shadow: 0 30px 90px color-mix(in srgb, var(--bg-inverse) 36%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-hover) 18%, transparent);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.prime-teaser-modal.active .prime-teaser-card {
    transform: translateY(0) scale(1);
}

.prime-teaser-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-inverse) 8%, transparent);
    color: var(--text-inverse);
    cursor: pointer;
}

.prime-teaser-kicker {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 18px;
}

.prime-teaser-card h2 {
    color: var(--text-inverse);
    font-size: 30px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin: 0 0 16px;
}

.prime-teaser-card p {
    color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.prime-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.prime-teaser-mini {
    min-height: 76px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--text-inverse) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-inverse) 8%, transparent);
    padding: 14px 12px;
    box-sizing: border-box;
}

.prime-teaser-mini span {
    display: block;
    color: var(--text-inverse);
    font-weight: 900;
    font-size: 15px;
    margin-bottom: 8px;
}

.prime-teaser-mini small {
    color: color-mix(in srgb, var(--text-inverse) 56%, transparent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.prime-teaser-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.prime-teaser-primary,
.prime-teaser-secondary {
    min-height: 52px;
    width: 100%;
    border-radius: 18px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1;
    white-space: normal;
    text-align: center;
}

.prime-teaser-primary {
    background: var(--accent);
    color: var(--text);
}

.prime-teaser-secondary {
    border: 1px solid color-mix(in srgb, var(--text-inverse) 14%, transparent);
    background: transparent;
    color: var(--text-inverse);
}

/* --- SIDEBAR SWIPE ANIMATION --- */
.sidebar-swipe-anim .sidebar-content {
    animation: appleSwipe 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes appleSwipe {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .ui-layout {
        flex-direction: column;
        top: 15px;
        left: 10px;
        right: 10px;
        bottom: auto;
        justify-content: flex-start;
    }

    .left-panel {
        width: 100%;
        align-items: stretch;
    }

    .map-brand-bento {
        width: 100%;
        border-radius: 24px;
        padding: 12px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .map-brand-logo-img {
        width: 128px;
    }

    .map-brand-subtitle {
        font-size: 9px;
        margin-top: 4px;
    }

    .map-brand-actions {
        width: auto;
        flex-shrink: 0;
    }

    .map-brand-action {
        height: 34px;
        font-size: 11px;
        border-radius: 13px;
    }

    .vertical-filters-container {
        display: flex;
        flex-direction: row;
        width: calc(100% + 20px);
        margin-left: -10px;
        padding-left: 10px;
        padding-right: 20px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
    }

    .right-panel {
        width: 100%;
    }

    /* БАГ 2: при открытии карточки меню улетает, и лупа поднимается РОВНО на
       место меню (на его верхний край), не выше. Сдвиг посчитан замером на
       настоящих 360/390/412 (не фейковый headless-504): в покое лупа top=111,
       меню top=10 -> нужно -101px, тогда лупа встаёт на y=10 = верх меню.
       Старый -115 перелетал на 4px (лупа y=-4, обрезалась за верхом) — это была
       ошибка ВЕЛИЧИНЫ, а не «двигать нельзя». Высоты меню и лупы равны (44),
       так что лупа ложится ровно на меню. transition transform 0.42s
       cubic-bezier(0.16,1,0.3,1) наследуется от .right-panel — синхронно с
       улётом меню (.left-panel, та же кривая/длительность). */
    .right-panel.focus-up {
        transform: translateY(-101px);
    }

    .search-box:hover,
    .search-box:focus-within {
        width: 100%;
    }

    .sidebar {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 75vh;
        border-radius: 40px 40px 0 0;
        transform: translateY(110%);
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--hairline-strong) 50%, transparent);
    }

    .sidebar.active {
        transform: translateY(0);
    }

    .prime-teaser-card {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 18px;
        width: auto;
        max-width: none;
        border-radius: 32px;
        padding: 24px;
    }

    .prime-teaser-card h2 {
        font-size: 26px;
    }

    .prime-teaser-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .prime-teaser-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .prime-teaser-primary,
    .prime-teaser-secondary {
        min-height: 54px;
        width: 100%;
        padding: 0 20px;
        font-size: 14px;
        border-radius: 19px;
        display: flex;
        flex: none;
    }

    .prime-teaser-primary {
        box-shadow: 0 14px 28px color-mix(in srgb, var(--accent-hover) 22%, transparent);
    }
}

/* =========================================================
   NEARBY PLACES — FINAL STABLE VERSION
   Desktop: vertical compact list
   Mobile: edge-to-edge horizontal swipe
========================================================= */

/* Чуть уменьшаем общие отступы карточки */
.sidebar-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

/* На desktop блок "Рядом" обычный, без горизонтального скролла */
.nearby-block {
    margin-top: 26px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

.nearby-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

.nearby-header span {
    font-size: 12px !important;
    font-weight: 850 !important;
    color: var(--text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.nearby-header small {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    font-weight: 550 !important;
}

/* DESKTOP: вертикальный список */
.nearby-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
    padding: 0 !important;

    scroll-snap-type: none !important;
    touch-action: auto !important;
}

.nearby-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;

    border: 1px solid color-mix(in srgb, var(--hairline-strong) 55%, transparent) !important;
    background: var(--bg-raised) !important;
    border-radius: 22px !important;

    padding: 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;

    text-align: left !important;
    cursor: pointer !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .nearby-card:hover {
        transform: translateY(-2px) !important;
        background: var(--bg-raised) !important;
        border-color: color-mix(in srgb, var(--accent-hover) 75%, transparent) !important;
    }
}

.nearby-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--bg-inverse) !important;
    color: var(--accent) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}

.nearby-card-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.nearby-card-content {
    min-width: 0 !important;
    flex: 1 !important;
}

.nearby-card-title {
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    color: var(--text) !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    margin-bottom: 6px !important;
}

.nearby-card-meta {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* MOBILE: edge-to-edge horizontal swipe */
@media (max-width: 768px) {
    .sidebar-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

.nearby-block {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

.nearby-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.nearby-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 6px !important;

        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }

    .nearby-list::-webkit-scrollbar {
        display: none !important;
    }

    .nearby-card {
    flex: 0 0 calc(100vw - 72px) !important;
    width: calc(100vw - 72px) !important;
    min-width: calc(100vw - 72px) !important;
    max-width: 320px !important;

    scroll-snap-align: start !important;
    touch-action: pan-x !important;
}
}

/* =========================================================
   iOS SAFARI MOBILE VIEWPORT / SIDEBAR FIX
   Fixes hidden card peeking from bottom on iPhone Safari
========================================================= */

html,
body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    min-height: 100svh;
}

#map {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
}

@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }

    #map {
        height: 100dvh;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        max-height: min(75dvh, 680px) !important;

        border-radius: 40px 40px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid color-mix(in srgb, var(--hairline-strong) 50%, transparent) !important;

        transform: translate3d(
            0,
            calc(100% + env(safe-area-inset-bottom, 0px) + 32px),
            0
        ) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar.active {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .style-switcher {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mapboxgl-ctrl-bottom-left {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* =========================================================
   MOBILE TOP UI SOFT COMPACT POLISH
   Only reduces height/gaps. Does not change search logic.
========================================================= */

@media (max-width: 768px) {
    .ui-layout {
        top: 10px !important;
    }

    .left-panel,
    .right-panel {
        gap: 8px !important;
    }

    /* Black logo bento: lower height, same structure */
    .map-brand-bento {
        padding: 9px 12px !important;
        border-radius: 22px !important;
        min-height: 54px !important;
        gap: 8px !important;
    }

    .map-brand-logo-img {
        width: 122px !important;
    }

    /* Hide subtitle to save vertical space */
    .map-brand-subtitle {
        display: none !important;
    }

   .map-brand-actions {
    width: 172px !important;
    grid-template-columns: 1fr 1fr 32px !important;
    gap: 6px !important;
    flex-shrink: 0;
}

.map-account-pill {
    width: 32px !important;
    height: 32px !important;
}

.map-account-pill svg {
    width: 15px !important;
    height: 15px !important;
}

.map-account-dot {
    top: 5px !important;
    right: 5px !important;
    width: 7px !important;
    height: 7px !important;
}

    /* Filters closer to logo block, still edge-scrollable */
    .vertical-filters-container {
        gap: 8px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .filter-btn {
        height: 42px !important;
        padding: 0 16px !important;
        border-radius: 18px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        gap: 7px !important;
    }

    .filter-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .lock-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    /* Search: keep original expand behavior, only slightly compact height */
.search-wrapper {
    margin-top: 0 !important;
}

.search-box {
    /* БАГ 1: свёрнутая лупа — РОВНЫЙ КРУГ. Было height:44 !important при
       width:48 (базовое) -> овал 48x44. Приравниваем ширину к высоте,
       радиус 50%. hover ниже раскрывает width:100% -> круг только в покое. */
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
}

.search-box:hover,
.search-box:focus-within {
    width: 100% !important;
    height: 44px !important;
    border-radius: 22px !important;
}

#map-search {
    font-size: 15px !important;
}

.search-results-dropdown {
    top: 52px !important;
}
}

/* =========================================================
   ITAPROFILE — CONVERSION & MOBILE-CLARITY LAYER
   Дополнение к существующей дизайн-системе (НЕ переписывает её).
   Токены: #141d38 тёмный · #887760 акцент · #f6f3ed светлый · Inter.
========================================================= */

/* ---- Prime-тизер: скролл на случай высокого контента ---- */
.prime-teaser-card {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prime-teaser-card::-webkit-scrollbar {
    display: none;
}

/* ---- Тизер качества Prime: 2–3 точки с «размытым низом» ---- */
.prime-teaser-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.prime-preview-card {
    position: relative;
    display: block;
    text-align: left;
    text-decoration: none;
    background: color-mix(in srgb, var(--text-inverse) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-inverse) 9%, transparent);
    border-radius: 20px;
    padding: 14px 16px 40px;
    overflow: hidden;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .prime-preview-card:hover {
        background: color-mix(in srgb, var(--text-inverse) 8%, transparent);
        border-color: color-mix(in srgb, var(--accent-hover) 40%, transparent);
        transform: translateY(-1px);
    }
}
.prime-preview-kicker {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 6px;
}
.prime-preview-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-inverse);
    margin-bottom: 6px;
}
.prime-preview-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
    margin: 0;
}
.prime-preview-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--bg-inverse) 97%, transparent) 42%,
        transparent
    );
    backdrop-filter: blur(1.5px);
}
.prime-preview-fade svg {
    width: 13px;
    height: 13px;
    color: var(--accent);
}

/* ---- Цена прямо в тизере ---- */
.prime-teaser-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 18px;
}
.prime-teaser-price b {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-inverse);
}
.prime-teaser-price span {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-inverse) 55%, transparent);
}

/* ---- Честная строка доверия ---- */
.prime-teaser-proof {
    margin-top: 14px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    color: color-mix(in srgb, var(--text-inverse) 42%, transparent);
}

/* ---- Отзыв (рендерится ТОЛЬКО если заполнен PRIME_TESTIMONIALS) ---- */
.prime-teaser-quote {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent-hover) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-hover) 16%, transparent);
}
.prime-teaser-quote p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-inverse);
}
.prime-teaser-quote small {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: color-mix(in srgb, var(--text-inverse) 50%, transparent);
}

/* ---- Заметнее «премиальные» фильтры (приглашение тапнуть) ---- */
.filter-btn.prime-locked {
    border-color: color-mix(in srgb, var(--accent-hover) 45%, transparent);
}

/* ---- Постоянная Prime-таблетка: всегда видимый апсейл + цена ---- */
.prime-pill {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 1400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 8px 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent-hover) 22%, transparent);
    border-radius: 24px;
    background: var(--bg-inverse);
    color: var(--text-inverse);
    font-family: inherit;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-inverse) 32%, transparent);
    animation: primePillPulse 3.6s ease-in-out infinite;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease,
        background 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .prime-pill:hover {
        transform: translateY(-2px);
        background: var(--bg-inverse-warm);
    }
}
.prime-pill-spark {
    display: flex;
    color: var(--accent);
}
.prime-pill-price {
    color: var(--accent);
}
.prime-pill-close {
    margin-left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
    color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
    font-size: 11px;
    line-height: 1;
}
.prime-pill-close:hover {
    background: color-mix(in srgb, var(--text-inverse) 18%, transparent);
    color: var(--text-inverse);
}
.prime-pill.collapsed {
    width: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.prime-pill.collapsed .prime-pill-label,
.prime-pill.collapsed .prime-pill-price,
.prime-pill.collapsed .prime-pill-close {
    display: none;
}

@keyframes primePillPulse {
    0%,
    100% {
        box-shadow:
            0 14px 34px color-mix(in srgb, var(--bg-inverse) 32%, transparent),
            0 0 0 0 transparent;
    }
    50% {
        box-shadow:
            0 14px 34px color-mix(in srgb, var(--bg-inverse) 32%, transparent),
            0 0 0 6px color-mix(in srgb, var(--accent-hover) 10%, transparent);
    }
}

/* Прячем таблетку, когда открыта карточка места или сам тизер */
body:has(.sidebar.active) .prime-pill,
body:has(.prime-teaser-modal.active) .prime-pill {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* ---- Coach mark: одноразовая подсказка про тап по точке ---- */
.coach-mark {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 1390;
    max-width: min(420px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-inverse) 92%, transparent);
    backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--accent-hover) 18%, transparent);
    color: var(--text-inverse);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--bg-inverse) 30%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.coach-mark.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.coach-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-hover) 18%, transparent);
}

/* Прячем coach mark при открытой карточке */
body:has(.sidebar.active) .coach-mark {
    opacity: 0 !important;
    pointer-events: none;
}

/* ---- Доступность: видимый фокус с клавиатуры ---- */
.filter-btn:focus-visible,
.map-brand-action:focus-visible,
.map-account-pill:focus-visible,
.action-btn:focus-visible,
.play-btn:focus-visible,
.style-switcher:focus-visible,
.prime-pill:focus-visible,
.prime-preview-card:focus-visible,
.prime-teaser-primary:focus-visible,
.prime-teaser-secondary:focus-visible,
.prime-teaser-close:focus-visible,
#map-search:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-hover) 60%, transparent);
    outline-offset: 2px;
}

/* ---- Мобильная посадка таблетки и coach mark (safe-area) ---- */
@media (max-width: 768px) {
    .prime-pill {
        right: 12px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        height: 44px;
        font-size: 12.5px;
    }
    .coach-mark {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
        padding: 11px 14px;
    }
    .prime-teaser-card {
        max-height: 86dvh;
    }
}

/* ---- Уважение к prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .prime-pill {
        animation: none !important;
    }
    .sidebar-swipe-anim .sidebar-content {
        animation: none !important;
    }
    .coach-mark {
        transition: opacity 0.2s ease !important;
    }
    .left-panel,
    .right-panel {
        transition: opacity 0.2s ease !important;
        transform: none !important;
    }
    .sidebar {
        transition: none !important;
    }
    .sample-marker .sample-pin::after {
        animation: none !important;
    }
}


/* =========================================================
   ФАЗА 1 — CITY NOW (погода + сигналы). Плавающий виджет.
   Десктоп: сверху по центру. Мобайл: снизу по центру, раскрытие вверх.
   ========================================================= */
.city-now {
  position: fixed;
  z-index: 1600;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  pointer-events: none;
}
.city-now > * {
  pointer-events: auto;
}

@media (min-width: 769px) {
  .city-now {
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
  }
  .city-now__panel {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .city-now {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }
  .city-now__panel {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }
}

.city-now__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--accent-hover) 16%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-inverse) 82%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: var(--text-inverse);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--onyx) 28%, transparent);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.city-now__chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-hover) 40%, transparent);
}
.city-now__chip-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.city-now__chip-icon svg {
  width: 20px;
  height: 20px;
}
.city-now__chip-temp {
  font-variant-numeric: tabular-nums;
}
.city-now__chip-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  /* Замер: --text-inverse на золоте = 2.77:1. --on-accent = 6.57:1. */
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-inverse) 90%, transparent);
}

.city-now__panel {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: 26px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-inverse) 92%, transparent);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid color-mix(in srgb, var(--bg-raised) 8%, transparent);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--onyx) 45%, transparent);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.28s ease, translate 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.city-now--open .city-now__panel {
  opacity: 1;
  translate: 0 0;
}

.city-now__weather {
  padding: 18px;
  background-image: linear-gradient(135deg, #3a5083, #93a6cc);
  background-size: cover;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.city-now__weather::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--onyx) 20%, transparent) 100%);
  pointer-events: none;
}
.city-now__weather > * {
  position: relative;
  z-index: 1;
}
.city-now__weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.city-now__weather-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
}
.city-now__weather-icon svg {
  width: 34px;
  height: 34px;
}
.city-now__weather-temp {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.city-now__weather-cond {
  font-size: 13px;
  opacity: 0.92;
  margin-top: 3px;
}
.city-now__weather-meta {
  text-align: right;
}
.city-now__weather-city {
  font-size: 14px;
  font-weight: 600;
}
.city-now__weather-now {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin-top: 2px;
}

.city-now__signals {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.city-now__signals-empty {
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
  font-size: 13px;
  padding: 10px 8px;
}
.city-now__signal {
  border-radius: 16px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--bg-raised) 5%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent-hover) 50%, transparent);
}
.city-now__signal--warn {
  border-left-color: var(--accent);
}
.city-now__signal--alert {
  border-left-color: #bd7a52;
}
.city-now__signal-title {
  color: var(--text-inverse);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.city-now__signal-body {
  color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 3px;
}

/* Прячем виджет, когда открыта карточка места или тизер Prime — чтобы не мешал. */
body:has(.sidebar.active) .city-now,
body:has(.prime-teaser-modal.active) .city-now {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .city-now__chip,
  .city-now__panel {
    transition: none;
  }
}


/* =========================================================
   ФАЗА 4 — кнопка «Поделиться» (вторичная) + тост
   ========================================================= */
.action-btn--ghost {
  margin-top: 10px;
  background: var(--bg-inverse-warm);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
/* Hover — только там, где есть настоящий указатель (стандарт проекта):
   на тач-устройствах он залипал бы после тапа. */
@media (hover: hover) and (pointer: fine) {
  .action-btn--ghost:hover {
    background: var(--bg-inverse);
    border-color: var(--accent);
  }
}

/* --- Кнопки сайдбара «Проложить» + «Поделиться»: ОДИН РЯД ---
   Своего контейнера у них не было: кнопка маршрута лежит в разметке, а share
   вставляется script.js afterend от неё — обе были прямыми детьми сайдбара и
   тянулись во всю ширину (width:100% + margin-top у ghost). Обёртка .sb-cta-row
   добавлена в index.html; share попадает внутрь сама. */
.sb-cta-row {
  display: flex;
  gap: 10px;
}
.sb-cta-row .action-btn {
  flex: 1 1 0;
  width: auto;        /* было width:100% — оно и растягивало в стопку */
  min-width: 0;       /* иначе длинный текст не даст ужаться и сломает ряд */
  white-space: nowrap;
  padding: 18px 12px; /* по вертикали как было, по бокам ужимаем под 50/50 */
}
.sb-cta-row .action-btn--ghost {
  margin-top: 0;      /* вертикальный отступ стопки больше не нужен */
}
/* Узкие экраны: сайдбар ~340px контента, две кнопки 50/50 с иконкой и текстом.
   Слегка ужимаем шрифт, поля и иконку, чтобы текст остался в одну строку. */
@media (max-width: 420px) {
  .sb-cta-row {
    gap: 8px;
  }
  .sb-cta-row .action-btn {
    padding: 15px 8px;
    font-size: 13px;
    gap: 7px;
    border-radius: 16px;
  }
  .sb-cta-row .action-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* --- «Заказать гида»: отдельная строка ПОД рядом .sb-cta-row ---
   Цвета, типографика, hover и focus переиспользуются у кнопки «Поделиться»
   (.action-btn + .action-btn--ghost на самом элементе) — поэтому здесь только
   то, чем гида отличается: форма-пилюля и снятое подчёркивание ссылки.
   Ширину 100% даёт .action-btn, отступ сверху 10px — .action-btn--ghost
   (внутри ряда он обнулён, но эта кнопка вне ряда, так что отступ работает). */
.sb-guide-btn {
  /* .action-btn считает width:100% по content-box (глобального border-box в
     проекте нет), поэтому паддинги и бордер добавлялись сверху и кнопка
     вылезала за сайдбар на 38px, а .sidebar с overflow-x:hidden срезал бы её
     молча. С border-box ширина совпадает с рядом .sb-cta-row. */
  box-sizing: border-box;
  border-radius: 999px; /* пилюля: торцы скруглены полностью */
  text-decoration: none; /* это <a>, а не <button> */
}

.ita-toast {
  position: fixed;
  left: 50%;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  z-index: 1800;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-inverse) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 25%, transparent);
  color: var(--text-inverse);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--onyx) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ita-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ita-toast {
    transition: none;
  }
}


/* =========================================================
   EMAIL CAPTURE in Prime teaser (subscribe non-buyers)
   ========================================================= */
.prime-teaser-sub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--bg-raised) 8%, transparent);
  text-align: center;
}
.prime-teaser-sub-label {
  display: block;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
  margin-bottom: 10px;
}
.prime-teaser-sub-form {
  display: flex;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
}
.prime-teaser-sub-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bg-raised) 12%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 6%, transparent);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 14px;
}
.prime-teaser-sub-input::placeholder {
  color: color-mix(in srgb, var(--text-inverse) 40%, transparent);
}
.prime-teaser-sub-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-hover) 50%, transparent);
}
.prime-teaser-sub-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bg-raised) 14%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 8%, transparent);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.prime-teaser-sub-btn:hover {
  border-color: color-mix(in srgb, var(--accent-hover) 50%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 12%, transparent);
}
.prime-teaser-sub-status {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--accent-hover) 85%, transparent);
}

/* Image loading: avoid white flash before the place photo loads */
#sb-img {
  background-color: var(--bg-inverse);
}

/* === Prime sample marker + sidebar teaser (Try Prime) === */
.custom-marker.sample-marker {
  cursor: pointer;
}
.sample-marker .sample-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-inverse);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--onyx) 45%, transparent);
}
.sample-marker .sample-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  pointer-events: none;
  animation: samplePulse 2.4s ease-in-out infinite;
}
.sample-marker .sample-pin .key-icon {
  width: 11px;
  height: auto;
  display: block;
}
.sample-marker.active-marker .sample-pin {
  border-color: var(--hairline);
}
.sample-marker.active-marker .sample-pin::after {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
@keyframes samplePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.22); opacity: 1; }
}

.sb-prime-sample {
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--bg-inverse);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.sb-prime-flag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--accent);
  padding: 4px 11px;
  border-radius: 999px;
}
.sb-prime-note {
  margin: 10px 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-inverse);
}
.sb-prime-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.sb-prime-cta:hover {
  filter: brightness(1.06);
}

/* === Prime brand palette (cyan) — map overrides ===
   Only Prime surfaces. Lime stays the site accent
   (route button, active filter, markers, search). === */
.map-brand-action.prime {
  background: var(--accent);
  color: var(--text);
}
.filter-btn.prime-locked:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.prime-teaser-kicker {
  color: var(--accent);
}
.prime-teaser-primary {
  background: var(--accent);
  color: var(--text);
}
.prime-teaser-primary:hover {
  background: var(--accent-muted);
}



/* === Prime pill ("от €29") + locked filters — full Prime world (navy+cyan+cream) === */
.prime-pill {
  background: var(--bg-inverse);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-inverse) 36%, transparent);
}
.prime-pill:hover {
  background: var(--bg-inverse);
}
.prime-pill-spark,
.prime-pill-price {
  color: var(--accent);
}
.filter-btn.prime-locked {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
@keyframes primePillPulse {
  0%, 100% {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-inverse) 36%, transparent), 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-inverse) 36%, transparent), 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

/* === Prime teaser — FINAL: dark-navy card, cream text, cyan boxes, reverse buttons === */
.prime-teaser-card {
  background: var(--bg-inverse) !important;
  color: var(--text-inverse) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
.prime-teaser-close {
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
  color: var(--text-inverse) !important;
}
.prime-teaser-close:hover { background: color-mix(in srgb, var(--text-inverse) 18%, transparent) !important; }
.prime-teaser-kicker { color: var(--accent) !important; }
.prime-teaser-card h2 { color: var(--text-inverse) !important; }
.prime-teaser-card p { color: color-mix(in srgb, var(--text-inverse) 72%, transparent) !important; }

/* category preview cards = cyan boxes, dark-navy text */
.prime-preview-card {
  background: var(--accent) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--onyx) 30%, transparent) !important;
  padding: 14px 16px 50px !important;
}
.prime-preview-kicker { color: color-mix(in srgb, var(--text) 62%, transparent) !important; }
.prime-preview-title { color: var(--text) !important; }
.prime-preview-text { color: color-mix(in srgb, var(--text) 66%, transparent) !important; }
/* "Открыть в Prime" band = reverse: dark navy + cream */
.prime-preview-fade {
  background: var(--bg-inverse) !important;
  color: var(--text-inverse) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 700;
}
.prime-preview-fade svg { color: var(--accent) !important; }

/* mini stats = cyan boxes */
.prime-teaser-mini {
  background: var(--accent) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--onyx) 24%, transparent) !important;
}
.prime-teaser-mini span { color: var(--text) !important; }
.prime-teaser-mini small { color: color-mix(in srgb, var(--text) 62%, transparent) !important; }

/* testimonial quote = cyan box */
.prime-teaser-quote {
  background: var(--accent) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--onyx) 24%, transparent) !important;
}
.prime-teaser-quote p { color: var(--text) !important; }
.prime-teaser-quote small { color: color-mix(in srgb, var(--text) 60%, transparent) !important; }

/* price */
.prime-teaser-price b { color: var(--accent) !important; }
.prime-teaser-price span { color: color-mix(in srgb, var(--text-inverse) 60%, transparent) !important; }

/* main actions = reverse: primary cyan, secondary cream outline */
.prime-teaser-primary {
  background: var(--accent) !important;
  color: var(--text) !important;
}
.prime-teaser-primary:hover { filter: brightness(1.05) !important; }
.prime-teaser-secondary {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 28%, transparent) !important;
  color: var(--text-inverse) !important;
}

/* proof line + subscribe footer */
.prime-teaser-proof { color: color-mix(in srgb, var(--text-inverse) 42%, transparent) !important; }
.prime-teaser-sub-label { color: color-mix(in srgb, var(--text-inverse) 62%, transparent) !important; }
.prime-teaser-sub-input {
  background: color-mix(in srgb, var(--text-inverse) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 16%, transparent) !important;
  color: var(--text-inverse) !important;
}
.prime-teaser-sub-input::placeholder { color: color-mix(in srgb, var(--text-inverse) 40%, transparent) !important; }
.prime-teaser-sub-btn {
  background: var(--accent) !important;
  color: var(--text) !important;
}
.prime-teaser-sub-status { color: color-mix(in srgb, var(--text-inverse) 50%, transparent) !important; }

/* === Teaser tweaks: cyan open-band w/ white text, white mini boxes, centered stacked price === */
.prime-preview-fade {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}
.prime-preview-fade svg { color: var(--text-inverse) !important; }

.prime-teaser-mini {
  background: var(--bg-raised) !important;
}
.prime-teaser-mini span { color: var(--text) !important; }
.prime-teaser-mini small { color: color-mix(in srgb, var(--text) 58%, transparent) !important; }

.prime-teaser-price {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
}
.prime-teaser-price b { font-size: 28px !important; color: var(--accent) !important; }
.prime-teaser-price span { color: color-mix(in srgb, var(--text-inverse) 62%, transparent) !important; }

/* === Account pill: blue when active Prime (not lime) === */
.map-account-pill.prime {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.map-account-pill.prime:hover {
  background: var(--accent) !important;
  color: var(--text) !important;
}
.map-account-pill.prime .map-account-dot {
  background: var(--bg-inverse) !important;
  box-shadow: 0 0 0 2px var(--accent) !important;
}

/* Remove cluttered city descriptor on desktop */
@media (min-width: 769px) {
  .map-brand-subtitle { display: none !important; }
}

/* ============================================================
   MAP UI — Apple-clean: header weather chip, centered weather
   modal w/ blur, Prime filter chip, floating pill removed.
   ============================================================ */

/* Weather chip now lives inside the header (not floating) */
.city-now {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}
body:has(.sidebar.active) .city-now,
body:has(.prime-teaser-modal.active) .city-now {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.city-now__chip {
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 12%, transparent) !important;
  background: color-mix(in srgb, var(--bg-inverse) 92%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  gap: 6px !important;
}
.city-now__chip:hover { border-color: color-mix(in srgb, var(--text-inverse) 28%, transparent) !important; }
.city-now__chip-icon,
.city-now__chip-icon svg { width: 17px !important; height: 17px !important; }

/* Weather modal: centered card + blurred backdrop */
.city-now__backdrop {
  position: fixed;
  inset: 0;
  z-index: 3400;
  background: color-mix(in srgb, var(--bg-inverse) 30%, transparent);
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.city-now__backdrop.active { opacity: 1; }

.city-now__panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -46%) !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  z-index: 3500 !important;
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--bg-raised) 10%, transparent) !important;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--onyx) 50%, transparent) !important;
  opacity: 0;
  translate: 0 0 !important;
  transition: opacity 0.3s ease,
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.city-now--open .city-now__panel {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}
.city-now__weather-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}

/* Prime CTA chip in the filter row (before locked categories) */
.filter-prime-cta {
  background: var(--bg-inverse) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 750 !important;
  white-space: nowrap;
}
.filter-prime-cta:hover {
  background: var(--bg-inverse) !important;
  border-color: var(--accent) !important;
}
.filter-prime-spark {
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  color: var(--accent);
}
.filter-prime-spark svg { width: 15px; height: 15px; }

/* Floating Prime pill removed — now lives in filters */
.prime-pill { display: none !important; }

/* === Weather modal lives in <body> now (escapes header containing block) === */
body.city-now-modal-open .city-now__panel {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

/* === Map controls moved to the right edge === */
.mapboxgl-ctrl-bottom-right {
  bottom: 92px !important;
  right: 12px !important;
  z-index: 100;
}

/* Desktop: unify radius of bottom-right Mapbox controls (attribution pill +
   ⓘ button + zoom group) so the corner reads as one rounding, not several. */
@media (min-width: 769px) {
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group,
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib {
    border-radius: 12px !important;
  }
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib-button {
    border-radius: 12px !important;
  }
}
.mapboxgl-ctrl-bottom-left {
  bottom: 8px !important;
  left: 8px !important;
}
.style-switcher {
  left: auto !important;
  right: 20px !important;
  bottom: 30px !important;
}
@media (max-width: 768px) {
  .mapboxgl-ctrl-bottom-right {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
  }
  .mapboxgl-ctrl-bottom-left {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
  }
  .style-switcher {
    left: auto !important;
    right: 12px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* === Home button: round house dot, matches the account pill === */
.map-home-pill svg { width: 17px; height: 17px; }

/* Weather chip is a static readout now (no modal, no badge) */
.city-now__chip { cursor: default !important; }

/* ============================================================
   HEADER REDESIGN — two floating islands.
   Logo and the control cluster (weather · home · account)
   become separate frosted-dark pills; the gap shows the map.
   Search stays its own button in the right panel.
   ============================================================ */

/* Bento is now a transparent wrapper, not a solid bar */
.map-brand-bento {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  pointer-events: none !important;
}
/* Let map clicks pass through the empty gap between islands */
.left-panel { pointer-events: none !important; }
.map-brand-main,
.map-brand-actions,
#filter-buttons-scroll { pointer-events: auto !important; }

/* Island 1 — logo */
.map-brand-main {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px;
  padding: 0 18px !important;
  background: color-mix(in srgb, var(--bg-inverse) 93%, transparent) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--onyx) 20%, transparent) !important;
  flex-shrink: 0;
}
.map-brand-main .map-brand-logo-img {
  width: auto !important;
  height: 12px !important;
  display: block;
}

/* Island 2 — control cluster */
.map-brand-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  height: 44px;
  padding: 0 6px !important;
  background: color-mix(in srgb, var(--bg-inverse) 93%, transparent) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--onyx) 20%, transparent) !important;
  grid-template-columns: none !important;
  flex-shrink: 0;
}

/* Weather inside the cluster: bare icon + temp, lime glyph, right divider */
.city-now { display: inline-flex !important; }
.city-now__chip {
  height: 34px !important;
  padding: 0 10px 0 8px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid color-mix(in srgb, var(--text-inverse) 16%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-right: 3px !important;
  gap: 6px !important;
  cursor: default !important;
}
.city-now__chip:hover { transform: none !important; border-color: color-mix(in srgb, var(--text-inverse) 16%, transparent) !important; }
.city-now__chip-icon { color: var(--accent) !important; }
.city-now__chip-icon svg { width: 17px !important; height: 17px !important; }
.city-now__chip-temp { color: #f6f3ed !important; font-weight: 600 !important; font-size: 14px !important; }

/* Home + account: transparent circular icon buttons inside the cluster */
.map-brand-actions .map-account-pill {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.map-brand-actions .map-account-pill:hover {
  background: color-mix(in srgb, var(--text-inverse) 8%, transparent) !important;
}
.map-brand-actions #map-account-pill {
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
}

/* Desktop: logo left, cluster pulled to the right edge */
@media (min-width: 769px) {
  .left-panel { flex: 1 1 auto !important; width: auto !important; }
  .map-brand-bento { width: 100% !important; justify-content: space-between !important; }
}

/* Mobile: slightly smaller islands, spanning the top */
@media (max-width: 768px) {
  .map-brand-bento { width: 100% !important; justify-content: space-between !important; gap: 8px !important; }
  .map-brand-main { height: 40px !important; padding: 0 14px !important; border-radius: 13px !important; }
  .map-brand-main .map-brand-logo-img { height: 12px !important; width: auto !important; }
  .map-brand-actions { height: 40px !important; padding: 0 5px !important; border-radius: 20px !important; }
  .map-brand-actions .map-account-pill { width: 30px !important; height: 30px !important; }
  .city-now__chip { height: 30px !important; }
}

/* ============================================================
   HEADER v3 — bare dark logo + control cluster moved into the
   filter block (sized like a filter button, dark color kept).
   ============================================================ */

/* Logo: no box, just a dark wordmark on the map */
.map-brand-main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  height: auto !important;
}
.map-brand-main .map-brand-logo-img {
  filter: brightness(0) invert(0.1) !important;
  height: auto !important;
  width: 142px !important;
}

/* Desktop: revert the pull-right; logo hugs top-left again */
@media (min-width: 769px) {
  .left-panel { flex: 0 0 auto !important; width: fit-content !important; }
  .map-brand-bento { width: auto !important; justify-content: flex-start !important; }
}

/* Control cluster: now the first item in the filter block.
   Match the filter-button shape (48px tall, 20px radius), keep dark color. */
.map-brand-actions {
  height: 48px !important;
  border-radius: 20px !important;
  padding: 0 8px !important;
  gap: 4px !important;
  justify-content: flex-start !important;
  width: auto !important;
  flex-shrink: 0 !important;
  background: color-mix(in srgb, var(--bg-inverse) 93%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
  box-shadow: none !important;
}
/* control circles a touch bigger to sit well in the 48px pill */
.map-brand-actions .map-account-pill {
  width: 36px !important;
  height: 36px !important;
}

@media (max-width: 768px) {
  .map-brand-main .map-brand-logo-img { width: 118px !important; }
  .map-brand-actions { height: 48px !important; }
}

/* Hide the cluster while it is briefly inside the bento on load;
   it becomes visible once JS moves it into the filter block. */
.map-brand-bento .map-brand-actions { display: none !important; }

/* ============================================================
   HEADER v4 — one dark box: logo (top, light) over the control
   row (weather . home . account). Categories live in a separate
   block below (own horizontal scroll row on mobile). Box is taller.
   ============================================================ */

/* The box */
.map-brand-bento {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 12px 16px !important;
  background: color-mix(in srgb, var(--bg-inverse) 93%, transparent) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--onyx) 24%, transparent) !important;
  pointer-events: auto !important;
}
.left-panel { pointer-events: auto !important; }

/* Logo: inside the box, light (original colors), no box of its own */
.map-brand-main {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  height: auto !important;
  pointer-events: auto !important;
}
.map-brand-main .map-brand-logo-img {
  filter: none !important;
  /* Нормализация по ВЫСОТЕ: у open (572x95) и prime (638x77) разные пропорции,
     поэтому общая ширина давала разный оптический размер. Высота равная у обоих
     продуктов, ширина течёт от неё (City ~72px, Prime ~99px) — разная длина при
     равной высоте нормальна, в «Prime» просто больше букв. */
  height: 12px !important;
  width: auto !important;
  display: block !important;
}

/* Control row: bare row inside the box (undo the filter-button look + the anti-flash hide) */
.map-brand-bento .map-brand-actions { display: inline-flex !important; }
.map-brand-actions {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: auto !important;
  height: 38px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.map-brand-actions .map-account-pill {
  width: 34px !important;
  height: 34px !important;
}

/* Desktop: box hugs top-left */
@media (min-width: 769px) {
  .left-panel { flex: 0 0 auto !important; width: fit-content !important; align-items: flex-start !important; }
  .map-brand-bento { width: auto !important; }
}

/* Mobile: box hugs top-left (not full width); categories keep their own scroll row below */
@media (max-width: 768px) {
  .map-brand-bento {
    width: auto !important;
    align-self: flex-start !important;
    flex-direction: column !important;
    padding: 10px 14px !important;
    min-height: 0 !important;
  }
  .map-brand-main .map-brand-logo-img { height: 12px !important; width: auto !important; }
}

/* ============================================================
   HEADER v5 — solid Prime-navy box (#101a33), all-white content.
   Desktop: box stretches to the category-button width (logo top,
   controls below). Mobile: full-width horizontal box
   (logo left, weather/home/account right). No nested dark pill.
   ============================================================ */

/* Box: one solid navy surface */
.map-brand-bento {
  background: var(--bg-inverse) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--bg-raised) 8%, transparent) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--onyx) 28%, transparent) !important;
}

/* Logo -> white */
.map-brand-main .map-brand-logo-img {
  filter: brightness(0) invert(1) !important;
}

/* Controls: no own background, white glyphs */
.map-brand-actions { background: transparent !important; }
.map-brand-actions .map-account-pill {
  background: transparent !important;
  border: none !important;
  color: var(--text-inverse) !important;
}
.map-brand-actions .map-account-pill svg {
  stroke: var(--text-inverse) !important;
}
.city-now__chip-icon { color: var(--text-inverse) !important; }
.city-now__chip-icon svg { color: var(--text-inverse) !important; }
.city-now__chip-temp { color: #ffffff !important; }
.city-now__chip { border-right-color: color-mix(in srgb, var(--bg-raised) 18%, transparent) !important; }

/* Desktop: box stretches to match the category column width; column layout */
@media (min-width: 769px) {
  .left-panel { align-items: stretch !important; }
  .map-brand-bento {
    width: auto !important;
    align-self: stretch !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 18px !important;
  }
}

/* Mobile: full-width horizontal box -- logo left, controls right */
@media (max-width: 768px) {
  .left-panel { align-items: stretch !important; }
  .map-brand-bento {
    width: auto !important;
    align-self: stretch !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
  }
}

/* Search input: drop its own square focus outline (the rounded field
   border already indicates focus). Keeps the wrapper contour intact. */
#map-search:focus,
#map-search:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Mobile: nudge the logo down a touch so the top of the letters lines up
   with the top of the degrees / home / account (the "p" tail in "map"
   throws off optical centering). */
@media (max-width: 768px) {
  .map-brand-main { transform: none !important; }
}

/* ============================================================
   MOBILE controls — tidy them into the bottom-right corner
   instead of floating mid-screen. Satellite becomes a round
   icon button to match the zoom / geolocate stack.
   ============================================================ */
@media (max-width: 768px) {
  /* geolocate + zoom: low in the corner */
  .mapboxgl-ctrl-bottom-right {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
  /* satellite -> round icon button at the very corner */
  .style-switcher {
    left: auto !important;
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .style-switcher span { display: none !important; }
  /* mapbox logo + attribution: bottom-left corner, out of the way */
  .mapboxgl-ctrl-bottom-left {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
  }
}

/* ============================================================
   MOBILE controls v2 — one horizontal row along the bottom-right:
   zoom . geolocate . satellite, equal 40px, low at the edge.
   ============================================================ */
@media (max-width: 768px) {
  /* mapbox group (zoom + geolocate) -> horizontal, bottom edge */
  .mapboxgl-ctrl-bottom-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    right: 62px !important;
  }
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
    display: flex !important;
    flex-direction: row !important;
    border-radius: 12px !important;
  }
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button {
    width: 40px !important;
    height: 40px !important;
  }
  /* keep the (i) attribution small and out of the button row */
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib { order: -1 !important; }

  /* satellite -> matching 40px button at the far-right end of the row */
  .style-switcher {
    left: auto !important;
    right: 12px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }
  .style-switcher span { display: none !important; }
}

/* Mobile controls: make the row buttons noticeably smaller (40 -> 30px) */
@media (max-width: 768px) {
  .mapboxgl-ctrl-bottom-right {
    right: 46px !important;
    gap: 6px !important;
  }
  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group button {
    width: 30px !important;
    height: 30px !important;
  }
  .style-switcher {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    right: 10px !important;
    border-radius: 10px !important;
  }
  .style-switcher svg { width: 16px !important; height: 16px !important; }
}

/* ===== Open liquid glass pins — clear lens (lime accent) ===== */
.custom-marker {
  background: radial-gradient(118% 92% at 30% 22%, color-mix(in srgb, var(--bg-raised) 40%, transparent), color-mix(in srgb, var(--bg-raised) 4%, transparent) 62%);
  -webkit-backdrop-filter: brightness(1.12) saturate(1.8) contrast(1.04) blur(0.4px);
  backdrop-filter: brightness(1.12) saturate(1.8) contrast(1.04) blur(0.4px);
  border: 1px solid color-mix(in srgb, var(--bg-raised) 50%, transparent);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--bg-inverse) 16%, transparent),
    inset 0 1.5px 1px color-mix(in srgb, var(--bg-raised) 98%, transparent),
    inset 0 -4px 9px color-mix(in srgb, var(--bg-raised) 30%, transparent),
    inset 3px 0 6px color-mix(in srgb, var(--bg-raised) 16%, transparent),
    inset -3px -3px 7px color-mix(in srgb, var(--bg-inverse) 10%, transparent);
  color: var(--text);
}
.custom-marker:hover {
  background: radial-gradient(118% 92% at 30% 22%, color-mix(in srgb, var(--bg-raised) 54%, transparent), color-mix(in srgb, var(--bg-raised) 9%, transparent) 62%);
  border-color: color-mix(in srgb, var(--accent-hover) 75%, transparent);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--bg-inverse) 22%, transparent),
    inset 0 1.5px 1px var(--bg-raised),
    inset 0 -4px 9px color-mix(in srgb, var(--bg-raised) 36%, transparent),
    0 0 16px color-mix(in srgb, var(--accent-hover) 32%, transparent);
}

/* ============================================================
   ROUTE MODE — pins, bar, order controls, next-points list
   Theme-neutral: pins and bar are dark; sidebar parts inherit
   the sidebar text colour so they read on light (open) and dark
   (prime) maps alike. Active pin colour is set inline by JS.
   ============================================================ */
.route-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-inverse-warm);
  color: var(--text-inverse);
  border: 2px solid color-mix(in srgb, var(--bg-raised) 90%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--onyx) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.route-pin-active {
  transform: scale(1.24);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--onyx) 34%, transparent);
}

/* Свёрнутая плашка активного маршрута («Маршруты | название | ✕»).
   Отдельный элемент #route-bar (ребёнок body), не состояние #route-picker:
   список маршрутов — свой элемент и остаётся айвори, его тут не касаемся.

   ЦВЕТ: тот же синий, что у главного меню (.map-brand-bento): var(--bg-inverse)
   без прозрачности, без backdrop-filter, граница color-mix(--bg-raised 8%).
   Текст --text-inverse, 15.90:1 на синем.

   ПОЗИЦИЯ — РАЗНАЯ ПО БРЕЙКПОИНТУ, и это не прихоть:
   * <1200 — внизу по центру окна, как было до двухъярусной правки.
     Второй ярус тут делать НЕЛЬЗЯ: .ui-layout на этих ширинах — КОЛОНКА, где
     .right-panel (поиск) стоит под .left-panel. Любой реальный ярус для плашки
     увеличивает высоту .left-panel и толкает поиск вниз — замер показал сдвиг
     поиска на 59px (111..155 -> 170..214) и наезд на карточку (181..214).
     Плюс .left-panel улетает ТРАНСФОРМОМ, её место в раскладке остаётся, и под
     всплывшей плашкой зияла пустая полоса.
   * >=1200 — два яруса под меню. Там .left-panel — РЯД, поиск в своей колонке
     справа и от высоты левой панели не зависит, поэтому ярус безопасен. */
.route-bar {
  position: fixed;
  top: auto;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(88vw, 560px);
  padding: 9px 10px 9px 12px;
  border-radius: 999px;
  background: var(--bg-inverse);
  border: 1px solid color-mix(in srgb, var(--bg-raised) 8%, transparent);
  color: var(--text-inverse);
}
/* Мобила: внизу полоса контролов (атрибуция слева, зум+Satellite справа)
   начинается примерно с 48px от низа, а коридор между ними несимметричен —
   поднимаем плашку НАД полосой, тогда длинное EN-название безопасно. */
@media (max-width: 768px) {
  .route-bar {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}
/* >=1200: второй ярус под меню. Плашка стоит на УРОВНЕ меню и в покое сдвинута
   вниз на ярус через translateY. Ярус 54px = высота меню 44 + gap язык↔лого 10
   (замерено). Когда меню улетело (.left-panel.hidden-up — карточка, список
   ROUTES или избранное), translateY снимается и плашка всплывает на
   освободившийся уровень. Кривая и длительность взяты ДОСЛОВНО из .left-panel —
   рассинхрона нет по построению. Анимируется только transform.
   Горизонталь на этих ширинах ставит JS (syncRouteBarX) по центру меню: меню
   центрировано флексом в полосе чипы↔поиск, и центр окна промахивается на 94px. */
@media (min-width: 1200px) {
  .route-bar {
    top: calc(20px + env(safe-area-inset-top, 0px));
    bottom: auto;
    transform: translateX(-50%) translateY(54px);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body:has(.left-panel.hidden-up) .route-bar {
    transform: translateX(-50%) translateY(0);
  }
}
.route-bar-back {
  flex-shrink: 0;
  border: 0;
  background: color-mix(in srgb, var(--bg-raised) 12%, transparent);
  color: var(--text-inverse);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.route-bar-title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.route-ctrls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.route-ctrl {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: 0.85;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.route-ctrl:hover {
  opacity: 1;
}

.route-next {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
}
.route-next-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.45;
  margin-bottom: 12px;
}
.route-next-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 16%, transparent);
}
.route-next-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 18%, transparent);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.route-next-title {
  font-size: 14px;
  font-weight: 550;
  color: inherit;
  line-height: 1.25;
}
.route-next-end {
  font-size: 13px;
  color: inherit;
  opacity: 0.55;
  line-height: 1.4;
}

/* --- Route overlay v2: dimmed context + picker ------------------------------ */
body.route-active .mapboxgl-marker:not(.route-pin) {
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#route-chip svg {
  width: 18px;
  height: 18px;
}

/* Панель «Маршруты» — та же поверхность, что у сайдбара карточки точки:
   сплошной айвори var(--bg-raised), тёмный текст var(--text). Была тёмным
   стеклом (--bg-inverse-warm 82% + blur) — отсюда серо-коричневый вид.
   Прозрачность и backdrop-filter убраны намеренно: сайдбар непрозрачный.
   Анимация приведена к чипам (.left-panel): 0.42s cubic-bezier(0.16,1,0.3,1). */
#route-picker {
  position: fixed;
  top: 90px;
  left: 20px;
  z-index: 1100;
  width: 320px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 24px;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--onyx) 35%, transparent);
  color: var(--text);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: none;
}
#route-picker::-webkit-scrollbar {
  display: none;
}
#route-picker.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.route-picker-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* было opacity:.5 поверх светлого текста — на айвори это дало бы ~3:1.
     Берём токен вместо прозрачности, иначе затемнение сложилось бы дважды. */
  color: var(--text-secondary);
  padding: 8px 12px 10px;
}

.route-picker-exit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  /* было color-mix(--bg-raised 8%) — ОСВЕТЛЕНИЕ: на тёмном работало, на айвери
     стало бы невидимым. Врезка на светлом = --bg-sunken. */
  background: var(--bg-sunken);
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.route-picker-exit:hover {
  background: var(--hairline-strong); /* шаг темнее врезки, а не светлее */
}
.route-picker-exit-x {
  opacity: 0.6;
}

.route-picker-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding: 11px 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
/* hover/active были осветлением (--bg-raised 8/12/18%) — на айвори исчезли бы
   полностью. Переводим на затемнение токенами. */
.route-picker-item:hover {
  background: var(--bg-sunken);
}
.route-picker-item.is-active {
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.route-picker-item.is-locked {
  opacity: 0.6;
}
.route-picker-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.25;
}
.route-picker-lock {
  display: inline-flex;
  opacity: 0.6;
}
.route-picker-meta {
  font-size: 12px;
  /* было opacity:.55 — вторичный текст берём токеном, не прозрачностью */
  color: var(--text-secondary);
}

.route-bar-close {
  flex-shrink: 0;
  border: 0;
  background: color-mix(in srgb, var(--bg-raised) 12%, transparent);
  color: var(--text-inverse);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-bar-close:hover {
  background: color-mix(in srgb, var(--bg-raised) 20%, transparent);
}

@media (max-width: 768px) {
  #route-picker {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 74vh;
    border-radius: 26px 26px 0 0;
    padding: 6px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(18px);
  }
  #route-picker.open {
    transform: translateY(0);
  }
  #route-picker::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 6px auto 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-raised) 28%, transparent);
  }
}

/* --- Corner integrity: children round THEMSELVES ---------------------------
   iOS Safari (and mobile WebKit in general) is known to drop the parent's
   border-radius clipping on composited children during scroll or transform
   animation. The top photo sits exactly in the corners, so it must carry
   its own matching radius instead of relying on the sidebar's clip. */
@media (min-width: 769px) {
  #sb-img {
    border-radius: 36px 36px 0 0;
  }
}
@media (max-width: 768px) {
  #sb-img {
    border-radius: 40px 40px 0 0 !important;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
}

/* Кнопка «Завершить маршрут» на финальной точке */
.route-finish-btn {
  margin-top: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.route-finish-btn:hover { background: var(--accent); }
.route-finish-btn:active { transform: scale(0.98); }


/* Плейсхолдер картинки сайдбара: бежевый фон + логотип, фото проявляется fade-in */
.sb-img-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-raised) url("/app/logo-full.svg") center / 120px no-repeat;
}
@media (min-width: 769px) {
  .sb-img-wrap { border-radius: 36px 36px 0 0; }
}
@media (max-width: 768px) {
  .sb-img-wrap { border-radius: 40px 40px 0 0; transform: translateZ(0); }
}
#sb-img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.18s ease;
}
#sb-img.is-loaded { opacity: 1; }

/* ── Столбик языка должен ложиться ПОВЕРХ чипов фильтров ──────────────────────
   У .map-brand-actions есть backdrop-filter, а он создаёт stacking context —
   поэтому z-index выпадающего столбика заперт ВНУТРИ острова и не мог
   конкурировать с #filter-buttons-scroll (сосед, идущий позже в DOM).
   Поднимаем сам остров над соседями внутри .ui-layout. */
.map-brand-actions {
  position: relative;
  z-index: 10;
}

/* ============================================================
   ШАПКА по журнальной логике: [пин] · [бокс] · [кабинет]
   Ряд .ig-lang-row строит скрипт в index.html — он же выносит кабинет
   из бокса вправо. Механизм сжатия портальный (portal-style.css:2612):
   пин flex:0 0 auto, бокс — сжимаемый сосед, min-width:0 обязателен.
   Размеры из журнала: бокс 44, иконки 32/глиф 19, кабинет 44, лого 13-14.
   ============================================================ */
.ig-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  align-self: stretch;
}
/* Пин — фирменный синий бокса (журнал так же красит свой: --ig-pin-dark:#211d16).
   Красится ТОЛЬКО закрытое состояние, раскрытое остаётся общим. */
.ig-lang-row .ig-pill { --ig-pin-dark: var(--bg-inverse); }
/* Бокс — сжимаемый сосед пина. Ряд, а не колонка: лого слева, иконки справа. */
.ig-lang-row .map-brand-bento {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  align-self: auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 8px 0 16px !important;
  border-radius: 22px !important;
}
/* Лого слева, иконки прижаты к правому краю бокса */
.ig-lang-row .map-brand-main {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}
/* Высота лого — журнальная (.jbox .jh-logo img{height:14px}) */
.ig-lang-row .map-brand-main .map-brand-logo-img {
  height: 14px !important;
  width: auto !important;
}
/* Prime равняем по КАПИТЕЛИ, а не по высоте холста. Замер файлов: буква "I" одинаковая
   (73.05 и 73.65 юнита), но холсты разные — 95 у open против 77 у prime, потому что у
   open под базовой линией 20.33 юнита занимает выносной элемент "y" в слове "City",
   а в "Prime" выносных элементов нет. При равной CSS-высоте буквы Prime выходили на 24%
   крупнее (12.43px против 10.00px). Отношение капитель/холст: 0.7690 против 0.9565,
   отсюда коэффициент 0.8039. */
.ig-lang-row .map-brand-main .map-brand-logo-img[src$="logo-prime.svg"] {
  height: 11.25px !important;
}
.ig-lang-row .map-brand-actions {
  flex: 0 0 auto !important;
  height: auto !important;
  gap: 4px !important;
}
/* Порядок: лого · избранное · маршруты · афиша. favorites.js вставляет свою
   пилюлю перед маршрутами, поэтому порядок задаём order'ом, а не правкой скрипта. */
.ig-lang-row #ita-fav-pill { order: 1; }
.ig-lang-row #map-route-btn { order: 2; }
.ig-lang-row #map-afisha-btn { order: 3; }
.ig-lang-row .map-brand-divider { display: none !important; }
/* Сервисные иконки — как в журнале: круг 32, глиф 19 */
.ig-lang-row .map-brand-actions .map-account-pill {
  width: 32px !important;
  height: 32px !important;
}
.ig-lang-row .map-brand-actions .map-account-pill svg {
  width: 19px !important;
  height: 19px !important;
}
/* Кабинет справа — белый чип 44 вне бокса, поэтому при раскрытии языка
   не сжимается и не исчезает (как .profile-chip на портале). */
.ig-lang-row .ig-acc-right {
  position: relative;
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent) !important;
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--bg-raised) 65%, transparent) !important;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--onyx) 6%, transparent) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .22s cubic-bezier(.22, 1, .36, 1), color .22s cubic-bezier(.22, 1, .36, 1);
}
.ig-lang-row .ig-acc-right svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
}
/* Точка-статус на белом чипе — журнальная, а не светлая «на тёмном» */
.ig-lang-row .ig-acc-right .map-account-dot {
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .ig-lang-row .ig-acc-right:hover { background: var(--bg-raised) !important; color: var(--text) !important; transform: translateY(-1px); }
}
.ig-lang-row .ig-acc-right:active { transform: scale(.965); }
/* Раскрытие языка: иконки внутри бокса уходят, лого остаётся целым.
   overflow:hidden — ТОЛЬКО на время скрытия. В покое он резал счётчик избранного:
   #ita-fav-count намеренно торчит за пилюлю (top:-3px;right:-3px), и обрезка
   выглядела как круглая маска поверх счётчика. */
.ig-lang-row .map-brand-actions .map-account-pill {
  transition: opacity .18s ease, max-width .26s cubic-bezier(.22, 1, .36, 1), margin .26s cubic-bezier(.22, 1, .36, 1);
}
.ig-lang-row .ig-pill.is-open ~ .map-brand-bento .map-account-pill {
  overflow: hidden;
  opacity: 0;
  max-width: 0;
  margin-left: -4px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .ig-lang-row .map-brand-bento { padding: 0 8px 0 14px !important; }
  .ig-lang-row .map-brand-main .map-brand-logo-img { height: 13px !important; }
  .ig-lang-row .map-brand-main .map-brand-logo-img[src$="logo-prime.svg"] { height: 10.45px !important; }
}
/* Десктоп: меню независимо от колонки чипов.
   .left-panel{width:fit-content} берёт ширину по самому широкому ребёнку, а её
   детей v5 растягивал (align-items:stretch) — из-за этого раскрытый пин делал ряд
   шире чипов и тянул чипы за собой. Снимаем растяжку: ряд и чипы меряются каждый
   по себе, как на мобилке. Раскрытие языка теперь растёт вправо и чипов не трогает. */
@media (min-width: 769px) {
  .left-panel { align-items: flex-start !important; }
  /* align-self ряда должен уступить: иначе он перебьёт align-items панели */
  .ig-lang-row { align-self: flex-start; }
}
/* Узкие экраны (<=380): у Prime иконок три и слово длиннее — замер на 360 дал
   переполнение бокса на 6px. Ужимаем зазоры и лого на 1px (13 -> 12);
   на 375+ журнальные 13px остаются нетронутыми. */
@media (max-width: 380px) {
  .ig-lang-row .map-brand-bento { gap: 8px !important; padding: 0 6px 0 12px !important; }
  .ig-lang-row .map-brand-actions { gap: 2px !important; }
  .ig-lang-row .map-brand-main .map-brand-logo-img { height: 12px !important; }
  .ig-lang-row .map-brand-main .map-brand-logo-img[src$="logo-prime.svg"] { height: 9.65px !important; }
}

/* ============================================================
   ДЕСКТОП ≥1200px: меню-островок — в центр полосы между колонкой
   чипов и видимой лупой поиска. Ниже 1200px не применяется ничего:
   раскладка остаётся прежней (чипы и меню слева, колонкой).

   Центр делается ФЛЕКСОМ и НИ ОДНОГО transform: transform на
   .left-panel — собственность анимации улёта (.left-panel.hidden-up,
   translateY(-150%)). transform это одно свойство, а не список:
   translateX затёрло бы улёт целиком, и меню дёргалось бы вбок.
   Меню остаётся потомком .left-panel, поэтому улетает вместе с чипами
   как и раньше — анимацию не трогаем вовсе.
   ============================================================ */
@media (min-width: 1200px) {
  /* --search-reserve / --search-collapsed объявлены один раз в :root вверху
     файла, и оттуда же их читают .right-panel и .search-box. Дублировать их
     здесь нельзя: тогда источник снова стал бы двойным и разъехался. */

  /* Полоса + ряд: [чипы слева][меню по центру остатка].
     margin-right — дотяжка правой границы полосы с левого края
     ЗАРЕЗЕРВИРОВАННОЙ ширины поиска до левого края ВИДИМОЙ лупы:
     резерв (300px) держится всегда, чтобы раскрытие поиска не двигало
     раскладку, но занято из него лишь 48px. Разницу и снимаем. */
  .left-panel {
    /* !important тут вынужденный, а не от лени: выше по файлу, внутри
       @media (min-width: 769px), лежат волны
         .left-panel { flex: 0 0 auto !important; width: fit-content !important }
       (строки ~2752 и ~2859). Без !important панель осталась бы fit-content,
       не растянулась бы на полосу — и центрировать было бы нечего (auto-поля
       схлопнулись бы в 0). Чинить те волны у источника нельзя: они общие для
       769–1199, а этот диапазон должен остаться ровно как на проде. */
    flex: 1 1 auto !important;
    width: auto !important;
    flex-direction: row;
    align-items: flex-start !important; /* кромки чипов и меню — на уровне */
    /* gap съедал бы полосу ДО auto-полей, и меню центрировалось бы в отрезке
       [чипы+gap .. лупа] — то есть на полгэпа правее истинного центра.
       Разделение чипов и меню держат сами auto-поля (на 1200px это ~390px). */
    gap: 0;
    margin-right: calc(-1 * (var(--search-reserve) - var(--search-collapsed)));
  }

  /* В колонке чипы тянулись (flex-grow:1) — в ряду это съело бы всю полосу
     и центрировать стало бы нечего. */
  .vertical-filters-container {
    flex-grow: 0;
    flex-shrink: 0;
  }

  /* Островок: после чипов, по центру остатка полосы, прижат к верхней кромке.
     align-self отменяет stretch из .ig-lang-row — в ряду он растянул бы
     островок на высоту колонки чипов. Ширина островка не меняется.
     Центр — равные auto-поля: они делят весь остаток полосы после чипов,
     поэтому меню стоит ровно посередине [правый край чипов .. левый край
     лупы]. На 1200px остаток ~780px, упереться в чипы не выйдет. */
  .ig-lang-row {
    order: 2; /* у чипов уже order:1 -> получается [чипы][меню] */
    align-self: flex-start;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Растянув панель на полосу (flex:1 + margin-right), мы превратили её в
     прозрачную коробку 1334x559 поверх карты, а на ней висит
     .left-panel { pointer-events: auto !important } (строка ~2821) — из-за
     этого пины переставали кликаться почти по всей верхней части карты, а
     живы оставались только ниже колонки чипов. Гасим тело панели, события
     ловят только её реальные дети.
     :not(.hidden-up) нужен, чтобы вернуть клики только в покое: во время
     улёта меню снова наследует none от панели. На чипы эта оговорка НЕ
     действует — их держит id-форс, см. отдельное правило ниже. */
  .left-panel {
    pointer-events: none !important;
  }
  .left-panel:not(.hidden-up) > .ig-lang-row,
  .left-panel:not(.hidden-up) > .vertical-filters-container {
    pointer-events: auto;
  }
  /* Чипы отдельно и по id: #filter-buttons-scroll { pointer-events: auto
     !important } (строка ~2649) — специфичность 1,0,0, она перебивает и
     правило выше (0,3,0), и родное .left-panel.hidden-up{pointer-events:none}.
     Из-за этого чипы оставались кликабельны в полёте ещё до центрирования.
     Бьём тем же оружием: 1,2,0 + !important. */
  .left-panel.hidden-up > #filter-buttons-scroll {
    pointer-events: none !important;
  }

  /* Полоса заходит на пустой резерв поиска, а .right-panel идёт позже по
     разметке и перехватывал бы клики по правой части меню своей пустой
     коробкой. Гасим коробку, события ловят только сама лупа и выпадашка
     результатов (иначе сломался бы выбор из поиска). */
  .right-panel,
  .search-wrapper {
    pointer-events: none;
  }
  .search-box,
  .search-results-dropdown {
    pointer-events: auto;
  }
}