/* ===================== PLOT MAP - MOBILE CSS ===================== */

@media (max-width: 768px) {

    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        touch-action: none;
    }

    .map-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow: hidden;
        position: fixed;
        inset: 0;
        background: #f4f6f9;
    }

    #svgMap {
        width: 100% !important;
        height: 100% !important;
        display: block;
        touch-action: none !important;
        transition: transform 0.08s linear;
        will-change: transform;
        backface-visibility: hidden;
    }

    #svgMap text {
        font-size: 8px !important;
        pointer-events: none;
    }

    .tooltip { display: none !important; }

    .controls {
        position: fixed;
        top: 12px !important;
        right: 10px !important;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .controls button {
        width: 48px;
        height: 48px;
        padding: 0 !important;
        font-size: 20px;
        border-radius: 12px;
    }

    .legend {
        left: 10px !important;
        bottom: 10px !important;
        max-width: 90vw;
        overflow: auto;
        padding: 10px;
        border-radius: 12px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .popup { align-items: flex-end !important; }

    .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 88vh;
        overflow-y: auto;
    }

    #svgMap { transform-origin: center center !important; }
}