/* Mapbox container, marker hardening, clusters, and debug styles. */

@media (min-width: 992px) {
.map-section {
        position: sticky;
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h));
        overflow: hidden;
    }

#leafletMap {
        height: 100% !important;
    }
}

#leafletMap {
    position: relative;
}

#leafletMap,
    #leafletMap * {
        -webkit-user-select: none;
        user-select: none;
    }

#leafletMap .mapboxgl-canvas {
            z-index: 0 !important;
            outline: none;
        }

#leafletMap .mapboxgl-marker {
            z-index: 600;
            pointer-events: auto;
            overflow: visible !important;
        }

.mb-marker-host,
.mb-marker,
.mb-pin,
.mb-icon,
.mb-shadow,
.mb-cluster,
.mb-cluster-count {
    display: none !important;
}

.mapboxgl-canvas {
    cursor: grab;
}

.mapboxgl-canvas:active {
        cursor: grabbing;
    }

.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-bottom-left {
    user-select: none;
}

.mapboxgl-popup {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    pointer-events: none;
    will-change: transform;
    z-index: 30;
}

.mapboxgl-popup-content {
    position: relative;
    pointer-events: auto;
}

.mapboxgl-popup-tip {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    z-index: 1;
}

.mapboxgl-popup-content {
    font-family: inherit;
}

#businessListContainer.has-highlight article.is-highlighted {
    outline: 2px solid rgba(239, 68, 68, 0.55);
    outline-offset: 2px;
}

#businessListContainer article.is-pulsing {
    animation: bizPulse 650ms ease-out 1;
}

@keyframes bizPulse {
    0% {
        transform: translateZ(0) scale(1);
    }

    45% {
        transform: translateZ(0) scale(1.01);
    }

    100% {
        transform: translateZ(0) scale(1.01);
    }
}

body.region-transitioning #businessListContainer img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 225px;
}

.map-debug-control {
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: .5rem .6rem;
    border-radius: .5rem;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    max-width: 380px;
}

.map-debug-control b {
        font-weight: 700;
    }