/* Responsive CSS for Mobile Friendliness */

/* For small devices (phones, tablets in portrait) */
@media screen and (max-width: 767px) {
    /* --- General --- */
    :root {
        --biggest-font-size: 2.75rem;
        --bigger-font-size: 2rem;
        --big-font-size: 1.75rem;
    }

    .container {
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .section {
        padding: 3.5rem 0 1rem;
    }

    /* --- Booking Page --- */
    .tour-options-container {
        grid-template-columns: 1fr;
    }

    .tour-option {
        height: auto;
    }
    
    /* --- Home Page Banner --- */
    /* Hide the complex hover banner on mobile as it's not user-friendly */
    .banner {
        display: none;
    }

    .home__data {
        padding-top: 2rem;
    }
    .home__title {
        top: -3rem;
        line-height: 3rem;
        font-size: var(--biggest-font-size);
    }
    
    .home__video {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 350px;
        margin: 2rem auto 0;
    }

    /* --- Admin Page --- */
    .admin__container.grid {
        grid-template-columns: 1fr;
    }

    .status-toggle {
        flex-direction: column;
    }
    .status-toggle label:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--first-color-lighten);
    }

    /* --- Modals --- */
    .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 1.5rem;
    }
    
    #booking-details-list .booking-item {
        flex-direction: column;
        align-items: flex-start;
    }
    #booking-details-list .delete-booking-btn {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }

    /* --- Footer --- */
    .footer__container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer__links {
        align-items: center;
    }
    .footer__social {
        justify-content: center;
    }
}