/* Mobile First & Responsive Adjustments */

@media (max-width: 768px) {
    header {
        height: 60px;
        padding: 0 15px;
    }

    .logo {
        font-size: 1.2rem;
    }

    /* Map occupies full smartphone height */
    #map-section, #map {
        height: 100vh;
        height: 100svh; /* Stable height on mobile browsers */
    }

    .search-floating {
        top: 80px;
        width: 94%;
    }

    .search-input {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }

    /* Bottom Sheet Style for Mobile Analysis */
    .side-panel {
        top: auto;
        bottom: -100%;
        right: 0;
        left: 0;
        width: 100%;
        height: 75vh;
        border-radius: 30px 30px 0 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
        padding: 0; /* Padding moves to #panel-content */
    }

    .side-panel.active {
        bottom: 0;
    }

    #panel-content {
        padding: 2rem 1.5rem;
    }

    .close-panel {
        top: -20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1.6rem;
        background: var(--bg-light); /* Better contrast on mobile */
    }

    /* Minimalist Footer for Mobile */
    .map-footer {
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        flex-direction: row; /* FORCE SAME LINE */
        justify-content: center;
        gap: 2rem; /* Large gap for touch */
        padding: 12px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .desktop-only {
        display: none;
    }
}