/* ============================================================
   1860 Travels — Authoritative Mobile Stylesheet  ≤ 991 px
   Written directly from: 1860 After - Proposed.html
   Loaded LAST — overrides every other stylesheet.
   Do NOT import or override from other files.
   ============================================================ */

/* ── DESKTOP DEFAULT: hide all mobile-only elements ─────────
   These elements are only revealed inside the @media blocks
   below. Without this rule they render as normal block
   elements on desktop.
   ─────────────────────────────────────────────────────────── */
.mobile-logo-badge,
.mobile-user-btn,
.mobile-drawer-auth {
    display: none !important;
}

/* ── 0. BOX-SIZING + OVERFLOW GUARD ─────────────────────────── */
@media (max-width: 991px) {
    *, *::before, *::after { box-sizing: border-box !important; }
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }
    img, iframe, video, embed { max-width: 100% !important; }
}

/* ── 0b. GLOBAL SELECT2 / NICE-SELECT KILL ON MOBILE ─────────
   Applied globally (no parent scope) so it catches containers
   that select2 JS appends anywhere in the DOM.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* Hide every select2 element — no exceptions */
    span.select2,
    span.select2-container,
    .select2,
    .select2-container,
    .select2-container--default,
    .select2-container--open,
    .select2-dropdown,
    .select2-results,
    .nice-select,
    .select-product-nice {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Restore any native <select> that select2 hid with inline style */
    select.form-control {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        clip: auto !important;
        width: 100% !important;
        height: 46px !important;
        border: 1.5px solid #e2e6ea !important;
        border-radius: 10px !important;
        background: #fff !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        color: #1f2937 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
}

/* ── 1. HIDE DESKTOP-ONLY STRIPS + CLOSE GAP ────────────────── */
@media (max-width: 991px) {
    #slidepanel,
    .header-top,
    .header-middle,
    #loginpanel,
    .ow-navigation > .col-md-3 { display: none !important; }

    /* Nav bar: flush to top, no gaps */
    .menu-block {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    /* The photoslider2 wrapper sits directly below the nav.
       Remove any padding/margin that creates a white gap. */
    .photoslider2,
    .photoslider2-carousel {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* The booking-form-section should connect flush to the nav */
    .booking-form-section {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ow-navigation .col-md-9 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Ensure the nav itself has no bottom padding creating the gap */
    .ow-navigation,
    nav.navbar.ow-navigation {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
}

/* ── 2. NAVIGATION BAR  (matches .m-nav) ────────────────────── */
@media (max-width: 991px) {

    /* Navbar header row */
    .ow-navigation .navbar-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    /* Desktop brand: hide */
    .ow-navigation .navbar-brand { display: none !important; }

    /* Logo: far left, pushes hamburger right via margin-right:auto */
    .ow-navigation .mobile-logo {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        text-decoration: none !important;
        margin-right: auto !important;
        order: 1 !important;
    }

    /* White circular badge around company logo */
    .mobile-logo-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .mobile-logo-badge .mlb-img {
        width: 48px !important;
        height: 48px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Logged-in account button */
    .mobile-user-btn {
        order: 2 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,0.18) !important;
        color: #fff !important;
        font-size: 18px !important;
        text-decoration: none !important;
    }

    /* Hamburger: far right, dark circle */
    .ow-navigation .navbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,0.25) !important;
        border: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        order: 3 !important;
    }

    .ow-navigation .navbar-toggle .icon-bar {
        display: block !important;
        width: 20px !important;
        height: 2.5px !important;
        border-radius: 2px !important;
        background: #fff !important;
        margin: 0 !important;
    }

    .ow-navigation .navbar-toggle .sr-only { display: none !important; }

    /* Collapsed drawer: orange dropdown */
    .ow-navigation .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #f3a316 !important;
        margin-top: 8px !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.2) !important;
        z-index: 1000 !important;
    }

    .ow-navigation .nav.navbar-nav { padding: 6px 0 !important; margin: 0 !important; }

    .ow-navigation .nav.navbar-nav > li {
        border-top: 1px solid rgba(255,255,255,0.18) !important;
        float: none !important;
        width: 100% !important;
    }
    .ow-navigation .nav.navbar-nav > li:first-child { border-top: none !important; }

    .ow-navigation .nav.navbar-nav li > a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 13px 18px !important;
        min-height: 48px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #fff !important;
        text-transform: none !important;
    }

    .ow-navigation .nav.navbar-nav li > a > i,
    .ow-navigation .nav.navbar-nav li > a > span {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #0775B8 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
    }

    .ow-navigation .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: rgba(0,0,0,0.12) !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Auth drawer footer */
    .mobile-drawer-auth {
        display: flex !important;
        gap: 10px !important;
        padding: 14px 18px 18px !important;
        border-top: 1px solid rgba(255,255,255,0.28) !important;
    }
    .mobile-drawer-auth-btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 11px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        min-height: 44px !important;
    }
    .mobile-drawer-login { background: rgba(255,255,255,0.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.4) !important; }
    .mobile-drawer-signup { background: #fff !important; color: #0775B8 !important; border: none !important; }

    /* Currency drawer item */
    .ow-navigation .navbar-nav .currency-menu-item {
        border-top: 1px solid rgba(255,255,255,0.28) !important;
        padding: 12px 18px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .ow-navigation .navbar-nav .currency-menu-item .cur-label { color: #fff !important; font-size: 15px !important; font-weight: 500 !important; }
    .ow-navigation .navbar-nav .currency-menu-item select#ddlCurrency {
        margin-left: auto !important;
        background: rgba(255,255,255,0.16) !important;
        border: 1px solid rgba(255,255,255,0.4) !important;
        color: #fff !important;
        border-radius: 999px !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        width: auto !important;
        min-width: 90px !important;
        height: auto !important;
    }
}

/* ── 3. BOOKING FORM  (matches .m-booking / .m-tab / .m-card) ── */
@media (max-width: 991px) {

    /* Kill Bootstrap row negative margins */
    .flightDiv, .flightDiv > .row,
    .fromTo, #dvSearchFlight > .row,
    .inner-card > .row, #exTab3 > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Outer wrapper: blue gradient (.m-booking) */
    .booking-form-section {
        background: linear-gradient(135deg, #0775B8 0%, #048ED3 100%) !important;
        padding: 0 !important;
        position: relative !important;
    }
    .booking-form-section .container { padding-left: 10px !important; padding-right: 10px !important; }
    .bookingform, #exTab3 { display: block !important; width: 100% !important; }

    /* ─ TAB BAR ─ */
    .booking-form-section .nav-tabs,
    #exTab3 .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        border-bottom: none !important;
        list-style: none !important;
        background: transparent !important;
    }

    .booking-form-section .nav-tabs > li,
    #exTab3 .nav-tabs > li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Icon above text label (.m-tab) */
    .booking-form-section .nav-tabs > li > a,
    #exTab3 .nav-tabs > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 9px 2px !important;
        min-height: 56px !important;
        width: 100% !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.9) !important;
        background: rgba(255,255,255,0.14) !important;
        border: none !important;
        border-radius: 10px 10px 0 0 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .booking-form-section .nav-tabs > li > a > i,
    #exTab3 .nav-tabs > li > a > i {
        font-size: 17px !important;
        line-height: 1 !important;
        color: inherit !important;
        display: block !important;
    }

    /* Active tab: cream bg + blue (.m-tab.active) */
    .booking-form-section .nav-tabs > li.active > a,
    #exTab3 .nav-tabs > li.active > a {
        background: #fff7e6 !important;
        color: #0775B8 !important;
    }

    /* ─ TAB PANES ─ */
    .booking-form-section .tab-content,
    #exTab3 .tab-content { display: block !important; }

    .booking-form-section .tab-pane,
    #exTab3 .tab-pane { display: none !important; }

    .booking-form-section .tab-pane.active,
    #exTab3 .tab-pane.active { display: block !important; opacity: 1 !important; }

    /* ─ FORM CARD (.m-card) ─ */
    .booking-form-section .inner-card,
    #exTab3 .inner-card {
        background: #fff7e6 !important;
        border-radius: 0 0 14px 14px !important;
        padding: 18px 16px !important;
        box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
        margin: 0 0 10px !important;
        overflow: hidden !important;
    }

    /* Hide ALL select2 / nice-select duplicates across every tab */
    .booking-form-section .select2,
    .booking-form-section .select2-container,
    .booking-form-section .nice-select,
    .booking-form-section .select-product-nice,
    #exTab3 .select2,
    #exTab3 .select2-container,
    #exTab3 .nice-select,
    #exTab3 .select-product-nice { display: none !important; }

    /* ─ LABELS (.m-card label) ─ */
    .inner-card label,
    .inner-card .label-text,
    .flightDiv label,
    .flightDiv .label-text,
    .fromTo label,
    #exTab3 .tab-pane label,
    #exTab3 .tab-pane .label-text,
    #exTab3 .tab-pane .input-title {
        display: block !important;
        color: #1f2937 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        text-shadow: none !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    /* ─ ALL INPUTS (.ctl) ─ */
    .inner-card .form-control,
    #exTab3 .tab-pane .form-control,
    #exTab3 .tab-pane input.form-control,
    #exTab3 .tab-pane select.form-control {
        width: 100% !important;
        height: 46px !important;
        border: 1.5px solid #e2e6ea !important;
        border-radius: 10px !important;
        background: #fff !important;
        font-size: 14px !important;
        color: #1f2937 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        display: block !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    /* ─ CALENDAR ICON: fix inline float:right; margin-top:-19% ─ */
    .input-date-group { position: relative !important; display: block !important; }
    .input-date-group .form-control { padding-right: 40px !important; }
    .input-date-group i,
    .input-date-group .icon-calendar {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
        float: none !important;
        font-size: 15px !important;
        color: #6b7280 !important;
        pointer-events: none !important;
    }

    /* ─ FLIGHT TAB ─ */

    /* Trip-type radios (One-way / Round Trip / Multi Leg) */
    .flightDiv .row1:first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 0 16px !important;
    }
    .flightDiv .row1:first-child > [class*="col-"] { flex: 0 0 auto !important; width: auto !important; padding: 0 !important; }
    .flightDiv .radio {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        min-height: 44px !important;
        background: #fff !important;
        border: 1.5px solid #e2e6ea !important;
        border-radius: 10px !important;
        cursor: pointer;
        white-space: nowrap !important;
    }
    .flightDiv .radio label {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        line-height: 1.2 !important;
        cursor: pointer;
        white-space: nowrap !important;
    }
    .flightDiv .radio input[type="radio"] { width: 16px !important; height: 16px !important; margin: 0 !important; flex-shrink: 0 !important; accent-color: #0775B8; }

    /* Flying class + Language: 2-column (.m-grid2) */
    .flightDiv .col-12.col-md-7.row1,
    .flightDiv .row1:last-of-type {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 0 14px !important;
    }
    /* Beat Bootstrap .w-100 with 3-class specificity */
    .flightDiv .flex2,
    .flightDiv .flex2.w-100,
    .flightDiv [class*="col-"].flex2 {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    .flightDiv .flex2 .mx-2,
    .flightDiv .flex2 .qty,
    .flightDiv .flex2 .no-icon { margin: 0 !important; width: 100% !important; }
    .flightDiv .flex2 .form-control,
    .flightDiv .flex2 select {
        width: 100% !important;
        height: 46px !important;
        border: 1.5px solid #e2e6ea !important;
        border-radius: 10px !important;
        background: #fff !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        color: #1f2937 !important;
        display: block !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    /* From / Swap / To / Departure: single column flex */
    .fromTo {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: static !important;    /* remove any inherited absolute */
        width: 100% !important;
        overflow: visible !important;
    }
    .fromTo .form-group[class*="col-"],
    .fromTo > [class*="col-"],
    #all-dep, #round-dep, #flightReturnDV {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 14px !important;
    }

    /* Swap button (.m-swap button) — full position reset */
    .changeBtn {
        /* Reset every possible base-CSS position trick */
        position: relative !important;
        inset: auto !important;          /* top/right/bottom/left all → auto */
        transform: none !important;
        float: none !important;
        /* Centering in the flex-column .fromTo */
        display: flex !important;
        align-self: center !important;
        margin: 8px auto 8px !important;
        /* Appearance */
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        background: #f3a316 !important;
        border: 3px solid #fff7e6 !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.18) !important;
        cursor: pointer;
        z-index: 2 !important;
    }
    .changeBtn .swap-img { width: 18px !important; height: 18px !important; }

    /* Passengers: 3 equal columns (.m-grid3) */
    .inner-card .col-md-2.col-sm-12,
    .inner-card .col-md-2.col-xs-12 {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 14px !important;
    }

    /* Input-box: hide the decorative FA icons on mobile.
       The reference HTML has NO icons inside passenger selects.
       On iOS, padding-left is ignored on native selects, so the icon
       overlaps the selected value — clean labels-only is the fix. */
    .inner-card .input-box {
        position: static !important;
    }
    .inner-card .input-box > .fa,
    .inner-card .input-box > i.fa {
        display: none !important;
    }
    /* Passenger selects: full width, normal padding (no icon offset) */
    .inner-card .input-box select.form-control {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    /* Search button (.m-search) */
    .biz-btn, button.biz-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        float: none !important;
        margin-top: 16px !important;
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        background: #f3a316 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 6px 16px rgba(243,163,22,0.4) !important;
        cursor: pointer !important;
        letter-spacing: 0.02em !important;
        text-decoration: none !important;
    }
    .biz-btn img, button.biz-btn img { width: 18px !important; height: 18px !important; filter: brightness(0) invert(1) !important; }

    /* ─ HOTEL TAB: strip the inline orange background ─ */
    .search-hotels__form,
    #exTab3 .tab-pane form {
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
    }

    /* Hotel date row: stack */
    .search-hotels__form .form-group-date { flex-wrap: wrap !important; gap: 0 !important; }
    .search-hotels__form .form-group-date [class*="col-"] { width: 100% !important; max-width: 100% !important; padding: 0 0 10px !important; }
    .search-hotels__form .bullet, #exTab3 .bullet { display: none !important; }

    /* Hotel guest selectors: 2-column */
    .hotel-guest-selectors {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .hotel-guest-selectors .mx-2 { flex: 1 1 calc(50% - 5px) !important; min-width: 120px !important; margin: 0 !important; }

    /* All tab search buttons */
    #exTab3 .tab-pane .biz-btn,
    #exTab3 .tab-pane button.biz-btn,
    #exTab3 .tab-pane #find,
    #exTab3 .tab-pane #tourseach,
    #exTab3 .tab-pane #insseach,
    #exTab3 .tab-pane input[type="submit"],
    .margin-top.biz-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 16px !important;
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        background: #f3a316 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 6px 16px rgba(243,163,22,0.4) !important;
        cursor: pointer !important;
        float: none !important;
    }

    /* ─ TOURS TAB: full-width stacked fields ─────────────────────
       NOTE: CSS IDs starting with a digit must use attribute
       selector syntax — #3b is invalid CSS and silently ignored.  */
    [id="3b"] .filter-box,
    [id="3b"] .row.filter-box {
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Every column in the tours form: full width, stacked */
    [id="3b"] .filter-box [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 14px !important;
        float: none !important;
    }

    /* Adults + Child: side-by-side 2-column */
    [id="3b"] .col-md-1.col-sm-6,
    [id="3b"] .col-md-1.col-xs-12 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 14px !important;
    }

    /* Remove the mar-top-30 that creates a gap before the search button */
    [id="3b"] .mar-top-30 { margin-top: 0 !important; }

    /* ─ TAB EDGE OVERFLOW FIX ────────────────────────────────────
       The booking container clips the tabs so there is no bleed.  */
    .booking-form-section .container {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Tabs: no side padding so they reach edge-to-edge cleanly */
    .booking-form-section .nav-tabs,
    #exTab3 .nav-tabs {
        overflow: visible !important;
        padding: 10px 0 0 !important;
    }

    /* First tab: square left corners flush against the container */
    .booking-form-section .nav-tabs > li:first-child > a,
    #exTab3 .nav-tabs > li:first-child > a {
        border-radius: 10px 0 0 0 !important;
    }

    /* Last tab: square right corners flush against the container */
    .booking-form-section .nav-tabs > li:last-child > a,
    #exTab3 .nav-tabs > li:last-child > a {
        border-radius: 0 10px 0 0 !important;
    }

    /* Inner card: also flush to container edges */
    .booking-form-section .inner-card,
    #exTab3 .inner-card {
        margin: 0 !important;
        border-radius: 0 0 14px 14px !important;
    }
}

/* ── 4. HERO CAROUSEL ────────────────────────────────────────── */
@media (max-width: 991px) {
    .photoslider2, .photoslider2-carousel { min-height: auto !important; height: auto !important; overflow: visible !important; }
    #photoslider2-carousel { min-height: 210px !important; }
    #photoslider2-carousel .item { min-height: 210px !important; position: relative !important; overflow: hidden !important; }
    #photoslider2-carousel .item img { height: 210px !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }
    .photoslider2-carousel .photoslider2-content {
        display: block !important;
        position: absolute !important;
        bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        padding: 14px 16px 18px !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
        transform: none !important;
    }
    .photoslider2-content .container, .photoslider2-content .row { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .photoslider2-content [class*="col-"] { width: 100% !important; padding: 0 !important; float: none !important; }
    .photoslider2-content h3 { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important; margin: 0 !important; text-transform: none !important; }
}

/* ── 5. CAROUSELS — 1 full card per view ─────────────────────── */
@media (max-width: 991px) {
    .destinations-carousel-wrapper,
    .top-deals-carousel-wrapper,
    .deals-carousel-wrapper { padding: 0 !important; overflow: hidden !important; position: relative !important; max-width: 100% !important; }

    .destinations-carousel,
    .top-deals-carousel,
    .deals-carousel {
        gap: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 0 1rem !important;
        scrollbar-width: none !important;
    }
    .destinations-carousel::-webkit-scrollbar,
    .top-deals-carousel::-webkit-scrollbar,
    .deals-carousel::-webkit-scrollbar { display: none !important; }

    .destination-deal-card,
    .top-deal-card,
    .deal-card,
    .destinations-carousel > *,
    .top-deals-carousel > *,
    .deals-carousel > * {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
    }

    .top-deals-nav {
        width: 36px !important; height: 36px !important; top: 100px !important;
        transform: none !important; background: rgba(255,255,255,0.92) !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
        position: absolute !important; display: flex !important;
        align-items: center !important; justify-content: center !important;
        border-radius: 50% !important; z-index: 6 !important;
        border: none !important; cursor: pointer !important;
    }
    .top-deals-nav.prev { left: 4px !important; right: auto !important; }
    .top-deals-nav.next { right: 4px !important; left: auto !important; }
    .deals-carousel-wrapper .carousel-nav { display: none !important; }

    .top-destinations-section, .top-deals-section, .modern-deals-section { padding: 26px 0 !important; }
    .destinations-title, .top-deals-title, .deals-title { font-size: 1.5rem !important; }
}

/* ── 6. CONTACT BANNER ──────────────────────────────────────── */
@media (max-width: 991px) {
    .modern-banner-section { padding: 0 !important; }
    .banner-contact-slide { padding: 30px 18px !important; }
    .banner-contact-content h2 { font-size: 20px !important; }
    .banner-contact-info { flex-direction: column !important; gap: 12px !important; }
    .payment-cards img { max-width: 100% !important; height: auto !important; }
}

/* ── 7. FOOTER ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .footer-widgetblock { padding: 30px 0 10px !important; }

    .footer-main .ftr-widget,
    .footer-main .about_widget,
    .footer-main .link_widget,
    .footer-main .openinghours_widget,
    .footer-main .populardestination_widget {
        width: 100% !important; max-width: 100% !important;
        flex: 0 0 100% !important; margin-bottom: 26px !important;
    }

    /* Useful links: grid on the <ul> so each <li> is a grid item */
    .footer-main .link_widget {
        display: block !important;
    }
    .footer-main .link_widget ul,
    .footer-main .link_widget ol {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 12px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .footer-main .link_widget li {
        margin: 0 !important;
        padding: 0 !important;
    }
    .footer-main .link_widget a {
        display: block !important;
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        white-space: normal !important;
    }

    .footer-main .populardestination_widget ul { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
    .footer-main .populardestination_widget img { width: 84px !important; height: 84px !important; object-fit: contain !important; background: #fff !important; border-radius: 8px !important; padding: 6px !important; }

    .footer-main .openinghours_widget .fb-page,
    .footer-main .openinghours_widget iframe { width: 100% !important; max-width: 100% !important; }

    /* Newsletter */
    .ftr-newsletter { padding: 0 16px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
    .ftr-newsletter form,
    .ftr-newsletter .input-group,
    .ftr-newsletter form > div { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
    .ftr-newsletter [class*="col-"] { width: 100% !important; max-width: 100% !important; padding: 0 !important; float: none !important; margin: 0 !important; }
    .ftr-newsletter .form-control { width: 100% !important; height: 48px !important; border-radius: 10px !important; font-size: 15px !important; box-sizing: border-box !important; display: block !important; }
    .ftr-newsletter .btn,
    .ftr-newsletter input[type="submit"] { width: 100% !important; height: 48px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 700 !important; background: #f3a316 !important; color: #fff !important; border: none !important; margin-top: 10px !important; display: block !important; box-sizing: border-box !important; cursor: pointer !important; }

    .footer-bottom { padding: 14px 0 !important; font-size: 11px !important; }
}