/* Responsive Styles */

/* For screens smaller than 768px (e.g., tablets and mobile phones) */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.5em;
    }

    .main-content {
        flex-direction: column;
    }

    #map {
        height: 60vh; /* Map takes up 60% of viewport height on smaller screens */
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .hotel-details-panel {
        position: relative; /* Change to relative positioning */
        width: 100%;
        height: auto; /* Adjust height automatically */
        right: 0; /* Always visible below the map */
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
        padding-top: 50px; /* Space for close button */
    }

    .hotel-details-panel.open {
        right: 0; /* Ensure it stays open */
    }

    .hotel-details-panel .close-btn {
        position: absolute; /* Keep close button absolute within panel */
        top: 10px;
        right: 10px;
        left: auto;
        transform: none;
    }

    .hotel-details-panel h2 {
        font-size: 1.5em;
    }

    .hotel-details-panel .hotel-images img {
        width: 150px;
        height: 100px;
    }
}

/* For screens smaller than 480px (e.g., mobile phones) */
@media (max-width: 480px) {
    header {
        padding: 10px 15px;
    }

    header h1 {
        font-size: 1.2em;
    }

    #map {
        height: 50vh; /* Further reduce map height on very small screens */
    }

    .hotel-details-panel {
        padding: 15px;
    }

    .hotel-details-panel h2 {
        font-size: 1.3em;
    }

    .hotel-details-panel .info-section ul li {
        font-size: 0.8em;
        padding: 6px 10px;
    }

    .hotel-details-panel .pricing {
        font-size: 1em;
        padding: 10px;
    }
}