/* ==========================================================================
   Luxe by Lotels - Website Mobile Responsive Fixes
   Loaded after the theme CSS in base.html; applies only to the public
   website pages (lotels_app). Keep rules scoped to small screens.
   ========================================================================== */

/* Prevent horizontal scroll caused by animated/offset elements */
html,
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Tablet and below
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

    /* Google map takes less vertical space on smaller screens */
    .contact__area-map iframe {
        height: 400px;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Theme only reduces section padding to 95px - still too tall on phones */
    .section-padding {
        padding: 60px 0px;
    }

    /* Page banners (inner page headers) - tighter on phones */
    .page__banner-title h1 {
        font-size: 32px;
    }

    /* Home banner text */
    .banner__two-content h1 {
        font-size: 34px;
        line-height: 1.25;
    }

    .banner__two-content span {
        font-size: 15px;
    }

    /* Hide the decorative "Scroll Down" strip on phones - it overlaps content */
    .banner__two-video {
        display: none;
    }

    /* Call-to-action strip: stack heading and phone number */
    .call__area-bg-left h2 {
        font-size: 26px;
        text-align: center;
        margin-bottom: 20px;
    }

    .call__area-bg-right {
        justify-content: center;
    }

    /* Contact page: long address/email links wrap instead of overflowing */
    .contact__area-info-item-content h6 a,
    .footer__area-widget-contact-item-content span a {
        word-break: break-word;
    }

    .contact__area-map iframe {
        height: 320px;
    }

    /* Room cards: slightly shorter images on phones */
    .deluxe__cards .deluxe__two-item-image img {
        height: 210px;
    }

    /* Room details sidebar spacing when stacked */
    .room__details .all__sidebar {
        margin-bottom: 30px;
    }

    /* Any raw tables scroll inside their own box instead of the page */
    main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {

    /* iOS Safari zooms into inputs below 16px - keep form fields at 16px */
    input.form-control,
    select.form-select,
    textarea.form-control,
    .contact__area-form-item input,
    .contact__area-form-item textarea,
    .nice-select {
        font-size: 16px !important;
    }

    .page__banner-title h1 {
        font-size: 28px;
    }

    .banner__two-content h1 {
        font-size: 28px;
    }

    /* Footer widgets: consistent spacing when all columns stack */
    .footer__area-widget {
        margin-bottom: 25px;
    }

    .copyright__area-left p {
        text-align: center;
        font-size: 14px;
    }
}