/**
 * Mobile (≤940px): location list as bottom drawer; map full-bleed; detail panel as bottom sheet.
 */

.map-theme-drawer-handle,
.map-theme-drawer-backdrop {
    display: none;
}

@media (max-width: 940px) {
    /* Above Google Maps / marker layers (they use high z-index) */
    #map {
        position: relative !important;
        z-index: 1 !important;
    }

    .site_sidebar_toggle {
        z-index: 999998 !important;
    }

    /* No dimming overlay — keeps the map pannable/zoomable while the drawer is open */
    .map-theme-drawer-backdrop {
        display: none !important;
    }

    .map-theme-drawer-backdrop.is-visible {
        display: none !important;
    }

    .closed_logo {
        display: none !important;
    }

    /* Bottom drawer: height from JS (must NOT use !important on height — it blocks JS updates) */
    .nav_side_menu {
        --map-theme-drawer-peek: 20px;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 30vh;
        max-height: 92vh;
        min-height: var(--map-theme-drawer-peek);
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4) !important;
        z-index: 999999 !important;
        transform: none !important;
        transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: rgba(0, 0, 0, 0.92) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    .nav_side_menu.map-theme-drawer--dragging {
        transition: none !important;
    }

    /* Do not hide entire panel when legacy “navbar_close” is present */
    .nav_side_menu.navbar_close {
        display: flex !important;
    }

    /* While a location detail is open: tuck categories drawer off-screen (restored on detail close) */
    .nav_side_menu.map-theme-hide-for-location-detail {
        transform: translateY(calc(100% + 32px)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, visibility 0.28s !important;
    }

    .map-theme-drawer-handle {
        position: relative;
        display: flex !important;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--map-theme-drawer-peek);
        height: var(--map-theme-drawer-peek);
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        background: rgba(30, 30, 30, 0.98);
        color: #fff;
        cursor: grab;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .map-theme-drawer-handle:active {
        cursor: grabbing;
    }

    .map-theme-drawer-handle__pill {
        width: 32px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.4);
        pointer-events: none;
    }

    .map-theme-drawer-body {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 16px;
        touch-action: pan-y;
    }

    .map-theme-drawer-body .site_logo {
        padding-top: 4px !important;
        height: auto !important;
        min-height: 0;
    }

    .map-theme-drawer-body .site_logo a img {
        max-height: 40px;
    }

    .map-theme-drawer-body .site_links {
        height: auto !important;
        max-height: none !important;
    }

    /* Location detail: full-viewport root; street view fixed top bar; title/desc bottom sheet */
    #info-window {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: 1000000 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .map-theme-info-sv-top {
        display: none;
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: 30vh;
        max-height: 280px;
        min-height: 140px;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.96) !important;
        z-index: 1000001 !important;
        pointer-events: auto !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    .admin-bar .map-theme-info-sv-top {
        top: 46px !important;
        max-height: calc(280px - 0px);
    }

    .map-theme-info-sv-top.is-visible {
        display: flex !important;
    }

    .map-theme-info-sv-inner {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .map-theme-info-sv-inner #streetview-content {
        flex: 1;
        min-height: 0;
        width: 100% !important;
        overflow: hidden;
    }

    .map-theme-info-sv-inner #streetview-content iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 120px !important;
        border: 0 !important;
    }

    #info-window-bottom-wrap {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        height: 38vh;
        max-height: none;
        border-radius: 0 !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45) !important;
        background: rgba(0, 0, 0, 0.92) !important;
        pointer-events: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden !important;
    }

    #info-window-bottom-wrap.map-theme-info-bottom--dragging {
        transition: none !important;
    }

    .map-theme-info-bottom-handle {
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 20px;
        min-height: 20px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 0;
        background: rgba(35, 35, 35, 0.98);
        color: #fff;
        cursor: grab;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .map-theme-info-bottom-handle:active {
        cursor: grabbing;
    }

    .map-theme-info-bottom-handle__pill {
        width: 32px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.4);
        pointer-events: none;
    }

    #info-window #content-canvas {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
        padding-top: 48px !important;
        box-sizing: border-box;
    }

    #info-window #content-canvas #title {
        flex-shrink: 0;
    }

    #info-window #content-canvas #description {
        flex: 1;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #info-window #close-info-window {
        top: 12px !important;
        right: 12px !important;
        z-index: 2;
    }
}