/* =============================================================================
   Mobile responsiveness & spacing tightening (theme-independent)
   -----------------------------------------------------------------------------
   Loaded after the theme so it can trim the large paddings/margins the template
   keeps on phones, shrink the oversized navbar logo, and stop horizontal
   overflow. Everything is inside @media queries so desktop is untouched.
   ========================================================================== */

/* ------------------------------------------------------------------ Overflow */
@media (max-width: 991px) {
    html {
        overflow-x: hidden;
    }
    body {
        overflow-x: clip;              /* clip: no scroll container, keeps sticky */
        max-width: 100%;
    }
    /* Common overflow culprits: full-bleed rows must not exceed the viewport */
    .row {
        --bs-gutter-x: 1.25rem;
    }
    img,
    table,
    .table-responsive {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------- Navbar/logo */
@media (max-width: 991px) {
    .navbar {
        height: auto !important;
        min-height: 56px;
    }
    .logo-wrapper,
    .nav-scroll .logo-wrapper {
        padding: 12px 15px !important;
    }
    .logo-img,
    .nav-scroll .logo-img {
        width: 96px !important;
    }
    .navbar button {
        margin-top: 0 !important;
    }
    /* Roomier, tidier mobile dropdown menu */
    .navbar .navbar-nav {
        padding: 14px 18px !important;
    }
    .navbar .navbar-collapse {
        border-radius: 0 0 14px 14px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
    .navbar .navbar-nav .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 480px) {
    .logo-img,
    .nav-scroll .logo-img {
        width: 80px !important;
    }
    .logo-wrapper,
    .nav-scroll .logo-wrapper {
        padding: 10px 12px !important;
    }
}

/* ----------------------------------------------- Section / block spacing trim */
@media (max-width: 767px) {
    /* Interior pages open with an inline "padding: 88px 0 0 0" to clear the
       navbar; keep just enough clearance on mobile. */
    section[style*="88px"] {
        padding-top: 66px !important;
    }

    /* Tighter container gutters = more usable width */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Cards / form panels: trim generous inner padding */
    .reservation-form,
    .vrc-showprc-prices-wrap,
    .vrc-showprc-options-wrap {
        padding: 15px !important;
    }
    .sticky-lg-top {
        padding: 14px !important;
    }
    .booking-box,
    .booking-inner {
        padding: 10px !important;
    }
    .car-details {
        padding: 20px 0 !important;
    }

    /* Reservation wrappers use big auto margins -> collapse them */
    .wrap.container {
        margin: 0 auto !important;
    }

    /* Oversized spacing utilities the template scatters around */
    .mt-120, .mt-90, .mt-60 { margin-top: 40px !important; }
    .mb-120, .mb-90, .mb-60 { margin-bottom: 40px !important; }
    .pt-120, .pt-90 { padding-top: 40px !important; }
    .pb-120, .pb-90 { padding-bottom: 40px !important; }
    .py-4, .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .my-4, .my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
    .p-4, .p-5 { padding: 1rem !important; }
    .m-auto { margin: 0 auto !important; }
}

/* Hero slider must stay flush at the top on mobile (no added padding) */
@media (max-width: 767px) {
    .header.slider-fade,
    .header {
        padding-top: 0 !important;
    }
}

/* Very small phones: even tighter */
@media (max-width: 480px) {
    section:not(.header) {
        padding-top: 34px;
        padding-bottom: 34px;
    }
    .reservation-form,
    .vrc-showprc-prices-wrap,
    .vrc-showprc-options-wrap {
        padding: 12px !important;
    }
    h1, .h1 { font-size: 1.7rem !important; }
    h2, .h2 { font-size: 1.4rem !important; }
}