/* 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: #e7e1d6;
}

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

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

.loader-overlay p {
    margin-top: 18px;
    color: #2a251e;
    font-size: 14px;
    font-weight: 650;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #d6cfc1;
    border-top: 4px solid #ac8548;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* --- 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: 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: rgba(20, 29, 56, 0.92);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(172, 133, 72, 0.16);
    box-shadow: 0 18px 50px rgba(20, 29, 56, 0.28);
    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;
    width: 150px;
    max-width: 100%;
    height: auto;
}

.map-brand-subtitle {
    margin-top: 6px;
    color: rgba(246, 243, 237, 0.52);
    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: rgba(246, 243, 237, 0.2);
    flex-shrink: 0;
    margin: 0 1px;
}

.map-route-btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.map-brand-actions .map-account-pill.active {
    background: rgba(246, 243, 237, 0.16) !important;
    color: #e8dcc0 !important;
}

.map-account-pill {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(246, 243, 237, 0.08);
    color: #f6f3ed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid rgba(246, 243, 237, 0.1);
    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: rgba(246, 243, 237, 0.14);
    }
}


.map-account-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(246, 243, 237, 0.72);
    box-shadow: 0 0 0 2px #2a251e;
}

/* active account */
.map-account-pill.active {
    background: #ac8548;
    color: #141d38;
    border-color: #ac8548;
}

.map-account-pill.active:hover {
    background: #ac8548;
    color: #141d38;
}

.map-account-pill.active .map-account-dot {
    background: #141d38;
    box-shadow: 0 0 0 2px #ac8548;
}

.map-brand-action {
    height: 38px;
    border-radius: 15px;
    background: rgba(246, 243, 237, 0.08);
    color: #f6f3ed;
    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: rgba(246, 243, 237, 0.14);
        transform: translateY(-1px);
    }
}

.map-brand-action.prime {
    background: #ac8548;
    color: #141d38;
}

/* --- 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: rgba(252, 251, 248, 0.62);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(214, 207, 193, 0.6);
    border-radius: 20px;
    padding: 0 20px;
    height: 48px;
    font-size: 14px;
    font-weight: 750;
    color: #141d38;
    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: rgba(252, 251, 248, 0.78);
    }
}

.filter-btn.active {
    background: #ac8548;
    color: #141d38;
    border-color: #ac8548;
}

.filter-btn.prime-locked:hover {
    border-color: rgba(172, 133, 72, 0.55);
    background: rgba(252, 251, 248, 0.76);
}

.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: rgba(252, 251, 248, 0.9);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(214, 207, 193, 0.6);
    border-radius: 30px;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 8px 32px rgba(20, 29, 56, 0.1);
    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 {
    width: 300px;
    padding: 0 18px;
    gap: 12px;
    border-color: #ac8548;
    box-shadow: 0 0 20px rgba(172, 133, 72, 0.2);
    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: #141d38;
    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: #fcfbf8;
    border-radius: 20px;
    border: 1px solid rgba(20, 29, 56, 0.05);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 15px 45px rgba(20, 29, 56, 0.15);
    z-index: 9999 !important;
}

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

.search-item:hover {
    background: #f9f5ee;
}

.search-item .item-title {
    font-weight: 650;
    font-size: 14px;
    color: #141d38;
}

/* --- 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: #fcfbf8;
    box-shadow: -10px 0 40px rgba(20, 29, 56, 0.15);
    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 rgba(20, 29, 56, 0.16);
    }

    .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: #2a251e;
    color: #ac8548;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 850;
    display: inline-block;
}

.tag.price-tag {
    background: #2a251e;
    color: #ac8548;
}

h2 {
    font-size: 24px;
    margin: 15px 0 10px;
    color: #141d38;
    font-weight: 850;
    letter-spacing: -0.03em;
}

p {
    line-height: 1.6;
    color: #2a251e;
    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: rgba(252, 251, 248, 0.75);
    backdrop-filter: blur(10px);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #141d38;
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.action-btn {
    width: 100%;
    background: #ac8548;
    color: #141d38;
    border: none;
    padding: 18px;
    border-radius: 20px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(172, 133, 72, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

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

/* --- GUIDE TIP --- */
.guide-tip-container {
    background: #e7e1d6;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    color: #141d38;
}

.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 rgba(214, 207, 193, 0.3);
    flex-shrink: 0;
}

.guide-name {
    font-size: 16px;
    font-weight: 850;
    color: #141d38;
    margin-bottom: 2px;
}

.guide-status {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #78705f;
    margin-bottom: 10px;
}

.guide-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    font-weight: 500;
    color: #2a251e;
}

.guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #141d38;
    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: #141d38;
    display: inline-flex;
    align-items: center;
}

.link-icon svg {
    color: #141d38;
    stroke: currentColor;
}

/* --- AUDIO PLAYER --- */
.apple-audio-player {
    background: #141d38;
    border-radius: 22px;
    padding: 12px 16px;
    margin-bottom: 25px;
    border: 1px solid rgba(252, 251, 248, 0.1);
    box-shadow: 0 10px 25px rgba(20, 29, 56, 0.15);
}

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

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ac8548;
    color: #141d38;
    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: #fcfbf8;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(252, 251, 248, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: #ac8548;
    transition: width 0.1s linear;
}

/* --- MARKERS --- */
.custom-marker {
    background: #fcfbf8;
    color: #141d38;
    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 rgba(20, 29, 56, 0.15);
    border: 2px solid #fcfbf8;
    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: #ac8548;
    }
}

.custom-marker.active-marker {
    background: #141d38 !important;
    color: #ac8548 !important;
    border-color: #ac8548 !important;
    box-shadow: 0 0 25px rgba(172, 133, 72, 0.5);
    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: #fcfbf8;
    color: #141d38;
    border: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 15px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(20, 29, 56, 0.1);
    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: rgba(20, 29, 56, 0.34);
    backdrop-filter: blur(14px);
}

.prime-teaser-card {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    background: #141d38;
    color: #f6f3ed;
    border-radius: 34px;
    padding: 28px;
    box-shadow: 0 30px 90px rgba(20, 29, 56, 0.36);
    border: 1px solid rgba(172, 133, 72, 0.18);
    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: rgba(246, 243, 237, 0.08);
    color: #f6f3ed;
    cursor: pointer;
}

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

.prime-teaser-card h2 {
    color: #f6f3ed;
    font-size: 30px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin: 0 0 16px;
}

.prime-teaser-card p {
    color: rgba(246, 243, 237, 0.72);
    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: rgba(246, 243, 237, 0.07);
    border: 1px solid rgba(246, 243, 237, 0.08);
    padding: 14px 12px;
    box-sizing: border-box;
}

.prime-teaser-mini span {
    display: block;
    color: #f6f3ed;
    font-weight: 900;
    font-size: 15px;
    margin-bottom: 8px;
}

.prime-teaser-mini small {
    color: rgba(246, 243, 237, 0.56);
    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: #ac8548;
    color: #141d38;
}

.prime-teaser-secondary {
    border: 1px solid rgba(246, 243, 237, 0.14);
    background: transparent;
    color: #f6f3ed;
}

/* --- 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%;
    }

    .right-panel.focus-up {
        transform: translateY(-115px);
    }

    .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 rgba(214, 207, 193, 0.5);
    }

    .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 rgba(172, 133, 72, 0.22);
    }
}

/* =========================================================
   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: #141d38 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.nearby-header small {
    font-size: 12px !important;
    color: #78705f !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 rgba(214, 207, 193, 0.55) !important;
    background: #f6f3ed !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: #fcfbf8 !important;
        border-color: rgba(172, 133, 72, 0.75) !important;
    }
}

.nearby-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #141d38 !important;
    color: #ac8548 !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: #141d38 !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: #78705f !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 rgba(214, 207, 193, 0.5) !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 {
    height: 44px !important;
    min-height: 44px !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 тёмный · #ac8548 акцент · #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: rgba(246, 243, 237, 0.05);
    border: 1px solid rgba(246, 243, 237, 0.09);
    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: rgba(246, 243, 237, 0.08);
        border-color: rgba(172, 133, 72, 0.4);
        transform: translateY(-1px);
    }
}
.prime-preview-kicker {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ac8548;
    margin-bottom: 6px;
}
.prime-preview-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f6f3ed;
    margin-bottom: 6px;
}
.prime-preview-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(246, 243, 237, 0.6);
    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: rgba(246, 243, 237, 0.82);
    background: linear-gradient(
        to top,
        rgba(20, 29, 56, 0.97) 42%,
        rgba(20, 29, 56, 0)
    );
    backdrop-filter: blur(1.5px);
}
.prime-preview-fade svg {
    width: 13px;
    height: 13px;
    color: #ac8548;
}

/* ---- Цена прямо в тизере ---- */
.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: #f6f3ed;
}
.prime-teaser-price span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(246, 243, 237, 0.55);
}

/* ---- Честная строка доверия ---- */
.prime-teaser-proof {
    margin-top: 14px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(246, 243, 237, 0.42);
}

/* ---- Отзыв (рендерится ТОЛЬКО если заполнен PRIME_TESTIMONIALS) ---- */
.prime-teaser-quote {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(172, 133, 72, 0.06);
    border: 1px solid rgba(172, 133, 72, 0.16);
}
.prime-teaser-quote p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #f6f3ed;
}
.prime-teaser-quote small {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgba(246, 243, 237, 0.5);
}

/* ---- Заметнее «премиальные» фильтры (приглашение тапнуть) ---- */
.filter-btn.prime-locked {
    border-color: rgba(172, 133, 72, 0.45);
}

/* ---- Постоянная 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 rgba(172, 133, 72, 0.22);
    border-radius: 24px;
    background: #141d38;
    color: #f6f3ed;
    font-family: inherit;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(20, 29, 56, 0.32);
    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: #211d16;
    }
}
.prime-pill-spark {
    display: flex;
    color: #ac8548;
}
.prime-pill-price {
    color: #ac8548;
}
.prime-pill-close {
    margin-left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(246, 243, 237, 0.1);
    color: rgba(246, 243, 237, 0.7);
    font-size: 11px;
    line-height: 1;
}
.prime-pill-close:hover {
    background: rgba(246, 243, 237, 0.18);
    color: #f6f3ed;
}
.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 rgba(20, 29, 56, 0.32),
            0 0 0 0 rgba(172, 133, 72, 0);
    }
    50% {
        box-shadow:
            0 14px 34px rgba(20, 29, 56, 0.32),
            0 0 0 6px rgba(172, 133, 72, 0.1);
    }
}

/* Прячем таблетку, когда открыта карточка места или сам тизер */
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: rgba(20, 29, 56, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(172, 133, 72, 0.18);
    color: #f6f3ed;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 16px 40px rgba(20, 29, 56, 0.3);
    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: #ac8548;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(172, 133, 72, 0.18);
}

/* Прячем 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 rgba(172, 133, 72, 0.6);
    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 rgba(172, 133, 72, 0.16);
  border-radius: 22px;
  background: rgba(20, 29, 56, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #f6f3ed;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  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: rgba(172, 133, 72, 0.4);
}
.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: #ac8548;
  color: #1c1a14;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(20, 29, 56, 0.9);
}

.city-now__panel {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: 26px;
  overflow: hidden;
  background: rgba(20, 29, 56, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  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, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 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: rgba(246, 243, 237, 0.6);
  font-size: 13px;
  padding: 10px 8px;
}
.city-now__signal {
  border-radius: 16px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(172, 133, 72, 0.5);
}
.city-now__signal--warn {
  border-left-color: #c6a063;
}
.city-now__signal--alert {
  border-left-color: #bd7a52;
}
.city-now__signal-title {
  color: #f6f3ed;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.city-now__signal-body {
  color: rgba(246, 243, 237, 0.7);
  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: #211d16;
  color: #ac8548;
  border: 1px solid #ac8548;
  box-shadow: none;
}
.action-btn--ghost:hover {
  background: #141d38;
  border-color: #ac8548;
}

.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: rgba(20, 29, 56, 0.95);
  border: 1px solid rgba(172, 133, 72, 0.25);
  color: #f6f3ed;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  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 rgba(255, 255, 255, 0.08);
  text-align: center;
}
.prime-teaser-sub-label {
  display: block;
  font-size: 12.5px;
  color: rgba(246, 243, 237, 0.6);
  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 rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f6f3ed;
  font-family: inherit;
  font-size: 14px;
}
.prime-teaser-sub-input::placeholder {
  color: rgba(246, 243, 237, 0.4);
}
.prime-teaser-sub-input:focus {
  outline: none;
  border-color: rgba(172, 133, 72, 0.5);
}
.prime-teaser-sub-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ed;
  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: rgba(172, 133, 72, 0.5);
  background: rgba(255, 255, 255, 0.12);
}
.prime-teaser-sub-status {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(172, 133, 72, 0.85);
}

/* Image loading: avoid white flash before the place photo loads */
#sb-img {
  background-color: #141d38;
}

/* === 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: #101a33;
  border: 2px solid #c6a063;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.sample-marker .sample-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(198, 160, 99, 0.25);
  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: #f6f3ed;
}
.sample-marker.active-marker .sample-pin::after {
  box-shadow: 0 0 0 6px rgba(198, 160, 99, 0.3);
}
@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: #101a33;
  border: 1px solid rgba(198, 160, 99, 0.4);
}
.sb-prime-flag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #101a33;
  background: #c6a063;
  padding: 4px 11px;
  border-radius: 999px;
}
.sb-prime-note {
  margin: 10px 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #f6f3ed;
}
.sb-prime-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #c6a063;
  color: #101a33;
  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: #c6a063;
  color: #101a33;
}
.filter-btn.prime-locked:hover {
  border-color: rgba(198, 160, 99, 0.55);
}
.prime-teaser-kicker {
  color: #c6a063;
}
.prime-teaser-primary {
  background: #c6a063;
  color: #101a33;
}
.prime-teaser-primary:hover {
  background: #d9bc8a;
}



/* === Prime pill ("от €29") + locked filters — full Prime world (navy+cyan+cream) === */
.prime-pill {
  background: #101a33;
  border-color: rgba(198, 160, 99, 0.32);
  box-shadow: 0 14px 34px rgba(16, 26, 51, 0.36);
}
.prime-pill:hover {
  background: #141d38;
}
.prime-pill-spark,
.prime-pill-price {
  color: #c6a063;
}
.filter-btn.prime-locked {
  border-color: rgba(198, 160, 99, 0.45);
}
@keyframes primePillPulse {
  0%, 100% {
    box-shadow: 0 14px 34px rgba(16, 26, 51, 0.36), 0 0 0 0 rgba(198, 160, 99, 0);
  }
  50% {
    box-shadow: 0 14px 34px rgba(16, 26, 51, 0.36), 0 0 0 6px rgba(198, 160, 99, 0.16);
  }
}

/* === Prime teaser — FINAL: dark-navy card, cream text, cyan boxes, reverse buttons === */
.prime-teaser-card {
  background: #101a33 !important;
  color: #f6f3ed !important;
  border: 1px solid rgba(198, 160, 99, 0.25) !important;
}
.prime-teaser-close {
  background: rgba(246, 243, 237, 0.1) !important;
  color: #f6f3ed !important;
}
.prime-teaser-close:hover { background: rgba(246, 243, 237, 0.18) !important; }
.prime-teaser-kicker { color: #c6a063 !important; }
.prime-teaser-card h2 { color: #f6f3ed !important; }
.prime-teaser-card p { color: rgba(246, 243, 237, 0.72) !important; }

/* category preview cards = cyan boxes, dark-navy text */
.prime-preview-card {
  background: #c6a063 !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
  padding: 14px 16px 50px !important;
}
.prime-preview-kicker { color: rgba(16, 26, 51, 0.62) !important; }
.prime-preview-title { color: #101a33 !important; }
.prime-preview-text { color: rgba(16, 26, 51, 0.66) !important; }
/* "Открыть в Prime" band = reverse: dark navy + cream */
.prime-preview-fade {
  background: #101a33 !important;
  color: #f6f3ed !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 700;
}
.prime-preview-fade svg { color: #c6a063 !important; }

/* mini stats = cyan boxes */
.prime-teaser-mini {
  background: #c6a063 !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}
.prime-teaser-mini span { color: #101a33 !important; }
.prime-teaser-mini small { color: rgba(16, 26, 51, 0.62) !important; }

/* testimonial quote = cyan box */
.prime-teaser-quote {
  background: #c6a063 !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}
.prime-teaser-quote p { color: #101a33 !important; }
.prime-teaser-quote small { color: rgba(16, 26, 51, 0.6) !important; }

/* price */
.prime-teaser-price b { color: #c6a063 !important; }
.prime-teaser-price span { color: rgba(246, 243, 237, 0.6) !important; }

/* main actions = reverse: primary cyan, secondary cream outline */
.prime-teaser-primary {
  background: #c6a063 !important;
  color: #101a33 !important;
}
.prime-teaser-primary:hover { filter: brightness(1.05) !important; }
.prime-teaser-secondary {
  background: transparent !important;
  border: 1px solid rgba(246, 243, 237, 0.28) !important;
  color: #f6f3ed !important;
}

/* proof line + subscribe footer */
.prime-teaser-proof { color: rgba(246, 243, 237, 0.42) !important; }
.prime-teaser-sub-label { color: rgba(246, 243, 237, 0.62) !important; }
.prime-teaser-sub-input {
  background: rgba(246, 243, 237, 0.08) !important;
  border: 1px solid rgba(246, 243, 237, 0.16) !important;
  color: #f6f3ed !important;
}
.prime-teaser-sub-input::placeholder { color: rgba(246, 243, 237, 0.4) !important; }
.prime-teaser-sub-btn {
  background: #c6a063 !important;
  color: #101a33 !important;
}
.prime-teaser-sub-status { color: rgba(246, 243, 237, 0.5) !important; }

/* === Teaser tweaks: cyan open-band w/ white text, white mini boxes, centered stacked price === */
.prime-preview-fade {
  background: #c6a063 !important;
  color: #ffffff !important;
}
.prime-preview-fade svg { color: #ffffff !important; }

.prime-teaser-mini {
  background: #f6f3ed !important;
}
.prime-teaser-mini span { color: #101a33 !important; }
.prime-teaser-mini small { color: rgba(16, 26, 51, 0.58) !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: #c6a063 !important; }
.prime-teaser-price span { color: rgba(246, 243, 237, 0.62) !important; }

/* === Account pill: blue when active Prime (not lime) === */
.map-account-pill.prime {
  background: #c6a063 !important;
  border-color: #c6a063 !important;
  color: #101a33 !important;
}
.map-account-pill.prime:hover {
  background: #c6a063 !important;
  color: #101a33 !important;
}
.map-account-pill.prime .map-account-dot {
  background: #101a33 !important;
  box-shadow: 0 0 0 2px #c6a063 !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 rgba(246, 243, 237, 0.12) !important;
  background: rgba(20, 29, 56, 0.92) !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: rgba(246, 243, 237, 0.28) !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: rgba(12, 18, 36, 0.3);
  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 rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !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: #101a33 !important;
  border: 1px solid rgba(198, 160, 99, 0.5) !important;
  color: #c6a063 !important;
  font-weight: 750 !important;
  white-space: nowrap;
}
.filter-prime-cta:hover {
  background: #141d38 !important;
  border-color: #c6a063 !important;
}
.filter-prime-spark {
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  color: #c6a063;
}
.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: rgba(20, 29, 56, 0.93) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(246, 243, 237, 0.1) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0;
}
.map-brand-main .map-brand-logo-img {
  width: auto !important;
  height: 22px !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: rgba(20, 29, 56, 0.93) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(246, 243, 237, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !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 rgba(246, 243, 237, 0.16) !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: rgba(246, 243, 237, 0.16) !important; }
.city-now__chip-icon { color: #ac8548 !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: rgba(246, 243, 237, 0.08) !important;
}
.map-brand-actions #map-account-pill {
  background: rgba(246, 243, 237, 0.1) !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: 20px !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: rgba(20, 29, 56, 0.93) !important;
  border: 1px solid rgba(246, 243, 237, 0.1) !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: rgba(20, 29, 56, 0.93) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(246, 243, 237, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24) !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: block !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;
  height: auto !important;
  width: 105px !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 { width: 95px !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: #101a33 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !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: #ffffff !important;
}
.map-brand-actions .map-account-pill svg {
  stroke: #ffffff !important;
}
.city-now__chip-icon { color: #ffffff !important; }
.city-now__chip-icon svg { color: #ffffff !important; }
.city-now__chip-temp { color: #ffffff !important; }
.city-now__chip { border-right-color: rgba(255, 255, 255, 0.18) !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%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.04) 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 rgba(255, 255, 255, 0.50);
  box-shadow:
    0 8px 22px rgba(16, 26, 51, 0.16),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.98),
    inset 0 -4px 9px rgba(255, 255, 255, 0.30),
    inset 3px 0 6px rgba(255, 255, 255, 0.16),
    inset -3px -3px 7px rgba(16, 26, 51, 0.10);
  color: #101a33;
}
.custom-marker:hover {
  background: radial-gradient(118% 92% at 30% 22%, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.09) 62%);
  border-color: rgba(172, 133, 72, 0.75);
  box-shadow:
    0 12px 28px rgba(16, 26, 51, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -4px 9px rgba(255, 255, 255, 0.36),
    0 0 16px rgba(172, 133, 72, 0.32);
}

/* ============================================================
   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: #211d16;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  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 rgba(0, 0, 0, 0.34);
}

.route-bar {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 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: rgba(28, 26, 20, 0.66);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.route-bar-back {
  flex-shrink: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  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 rgba(128, 128, 128, 0.22);
}
.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 rgba(128, 128, 128, 0.16);
}
.route-next-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.18);
  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;
}

#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: rgba(28, 26, 20, 0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 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: 0.5;
  padding: 8px 12px 10px;
}

.route-picker-exit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.route-picker-exit:hover {
  background: rgba(255, 255, 255, 0.14);
}
.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: #fff;
  cursor: pointer;
  text-align: left;
}
.route-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.route-picker-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.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: 0.55;
}

.route-bar-close {
  flex-shrink: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  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: rgba(255, 255, 255, 0.2);
}

@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: rgba(255, 255, 255, 0.28);
  }
}

/* --- 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: #ac8548;
  color: #211d16;
  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: #c6a063; }
.route-finish-btn:active { transform: scale(0.98); }