/* Mobile City Selector Styles */

@media (max-width: 768px) {
    .mobile-city-selector {
        position: static;
        z-index: 1;
        background: transparent;
        padding: 0;
        box-shadow: none;
        border: none;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .city-select-mobile {
        min-width: 180px;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1.5px solid #E0E0E0;
        font-size: 15px;
        font-weight: 600;
        background: white;
        color: var(--text-primary);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 40px;
    }

    .city-select-mobile:focus {
        outline: none;
        border-color: var(--primary);
    }

    /* Hide city FAB on mobile when city selector is visible */
    .city-fab {
        display: none !important;
    }

    /* Adjust map section to account for header height (logo + city selector) */
    #mapSection .map-wrapper {
        margin-top: 0;
        height: calc(100vh - 64px - 60px); /* header with selector + bottom nav */
    }

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

/* Desktop: Hide mobile city selector */
@media (min-width: 769px) {
    .mobile-city-selector {
        display: none;
    }
}