/* ======================================================
   Sarekam CSS — location-modal.css
   Extracted from index.html | Phase 1 Refactor
   DO NOT add styles from other sections to this file.
   ====================================================== */

        .location-modal-panel {
            background: #fff;
            width: 380px;
            height: auto;
            max-height: 100vh;
            overflow-y: auto;
            padding: 0;
            border-radius: 0 14px 14px 0;
            box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12), 2px 0 8px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            animation: slideInLeft 0.25s ease-out;
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0);
            }
        }

        @media (max-width: 800px) {
            .location-modal-panel {
                width: 100%;
                padding: 0;
                border-radius: 0 0 14px 14px;
                animation: slideUp 0.25s ease-out;
            }

            @keyframes slideUp {
                from {
                    transform: translateY(100%);
                }

                to {
                    transform: translateY(0);
                }
            }
        }

        /* ================= CENTERED LOGIN CARD MODE ================= */
        .location-modal-panel.loc-centered {
            width: 400px;
            max-width: 92vw;
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
            animation: centerPop 0.25s ease-out;
        }
        @keyframes centerPop {
            from { transform: scale(0.92); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        
        /* ================= PREMIUM SIDEBAR OVERLAY ================= */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            z-index: 4000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* Make location panels slide from left */
        .location-view, .edit-address-view, .full-map-view {
            right: auto !important;
            left: 0;
            transform: translateX(-100%) !important;
            box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
        }
        .location-view.active, .edit-address-view.active, .full-map-view.active {
            transform: translateX(0) !important;
        }