/* ==================== RESPONSIVE DESIGN - MOBILE MAPS ==================== */

@media (max-width: 768px) {

    /* Locator Section - Mobile */
    .locator-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    .locator-map {
        height: 350px !important;
        min-height: 350px !important;
        width: 100% !important;
        order: -1;
        /* Map first on mobile */
    }

    #recycling-map {
        width: 100% !important;
        height: 100% !important;
        min-height: 350px !important;
    }

    .locator-sidebar {
        order: 1;
    }

    /* Footer Map - Mobile */
    .footer-map {
        height: 200px !important;
        width: 100% !important;
    }

    #footer-map {
        width: 100% !important;
        height: 100% !important;
    }

    /* Form Rows - Mobile */
    .form-row {
        flex-direction: column;
    }

    .form-row.three-cols {
        flex-direction: column;
    }
}

@media (max-width: 480px) {

    /* Smaller Maps for Small Phones */
    .locator-map {
        height: 280px !important;
        min-height: 280px !important;
    }

    #recycling-map {
        min-height: 280px !important;
    }

    .footer-map {
        height: 180px !important;
    }
}