/*
 * map-panels.css — shared layout for all map pages (venues, tours, etc.)
 *
 * Classes:
 *   .map-app        — full-height flex column wrapper
 *   .map-container  — flex:1 relative container holding the map + panels
 *   .map-view       — the Leaflet map div (fills container)
 *   .map-left       — floating left panel (search, list, etc.)
 *   .map-right      — floating right panel (results, detail, etc.)
 *   .sheet-handle   — drag handle inside .map-right; hidden on desktop,
 *                     shown on mobile to enable bottom-sheet drag
 */

/* ── Page scaffold ───────────────────────────────────────────────────────── */
.map-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.map-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.map-view {
    width: 100%;
    height: 100%;
}

/* ── Panel base (desktop) ────────────────────────────────────────────────── */
.map-left,
.map-right {
    position: absolute;
    z-index: 1000;
    background: var(--panel-bg, #fff);
    border-radius: 10px;
    box-shadow: var(--panel-shadow, 0 2px 14px rgba(0, 0, 0, .22));
}

.map-left {
    top: 10px;
    left: 10px;
}

.map-right {
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Handle hidden on desktop */
.sheet-handle {
    display: none;
}

/* ── Mobile (≤ 767px) ────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Left panel: full-width bar at top, limited height */
    .map-left {
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        width: auto !important;
        max-height: 60vh !important;
    }

    /* Right panel: bottom sheet */
    .map-right {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: none !important;   /* height is managed by JS */
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .18) !important;
    }

    /* Drag handle */
    .sheet-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: var(--dim, #ddd);
        border-radius: 2px;
        margin: 10px auto 2px;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }
}