/* ============================================================
   HOTEL INDEX PAGE — RESPONSIVE OVERRIDES
   ------------------------------------------------------------
   Loaded ONLY on hotel index page (/, /hotel).
   Desktop unaffected. All rules in max-width media queries.
   Existing CSS files (flight.css, hotels.css, venue.css, etc.)
   are NOT modified — this file overrides via specificity.
   ------------------------------------------------------------
   Breakpoints:
     lg-tablet  : <=1200px
     tablet     : <=992px
     sm-tablet  : <=768px
     mobile     : <=600px
     sm-mobile  : <=480px
     xs-mobile  : <=375px
   ============================================================ */


/* ============================================================
   SECTION 0: UNIVERSAL GUARDS (mobile/tablet)
   ============================================================ */
@media (max-width: 992px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* CRITICAL: flight.css sets .container { width: 80%; margin: 40px auto; }
       which causes 10% gutter on each side. Override to 100% on mobile. */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Decorative Vector PNGs cause overflow due to fixed 1901px width */
    .best-of-week>img[src*="Vector"],
    section.best-of-week>img[src*="Vector"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        opacity: 0.35 !important;
    }

    /* Sliders break out of container for full-bleed edge-to-edge feel.
       Negative margins counter the container padding. First/last items
       get padding-inline on the slider itself for proper start/end gap. */
    .venue-deals-section .container>.venue-deals-grid,
    section.best-of-week .container>.week-slider,
    .popular-cities-section>.week-slider,
    .popular-cities-section .container>.week-slider {
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .venue-deals-section .container>.venue-deals-grid,
    section.best-of-week .container>.week-slider,
    .popular-cities-section>.week-slider,
    .popular-cities-section .container>.week-slider {
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .venue-deals-section .container>.venue-deals-grid,
    section.best-of-week .container>.week-slider,
    .popular-cities-section>.week-slider,
    .popular-cities-section .container>.week-slider {
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 600px) {

    /* Hide decorative vectors entirely on phones */
    .best-of-week>img[src*="Vector"],
    section.best-of-week>img[src*="Vector"] {
        display: none !important;
    }
}


/* ============================================================
   SECTION 1: HERO SECTION + BACKGROUND + HERO TEXT
   "For Weddings, Parties & Corporate" / "Venues"
   ------------------------------------------------------------
   STRUCTURAL FIX for mobile:
   On desktop, search-box overlaps hero image (decorative).
   On mobile, this caused overflow + stats-row collision.
   Solution: Hero-section becomes auto-height. Hero-bg-wrap
   stays absolute as a top banner image. Hero-container gets
   padding-top equal to banner height so search-wrapper
   flows BELOW the image instead of overlapping it.
   ============================================================ */

@media (max-width: 1200px) {
    section.hero-section .hero-container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 992px) {

    /* Banner image height becomes 280px + FULL EDGE-TO-EDGE on mobile.
       Override flight.css desktop card-style: width: calc(100% - 90px);
       margin: 30px auto 0; border-radius: 24px; */
    section.hero-section {
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .hero-bg-wrap {
        height: 280px !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    .hero-bg {
        height: 280px !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    section.hero-section .hero-container {
        padding-top: 300px !important;
        /* 280 image + 20 gap */
        padding-bottom: 24px !important;
        bottom: auto !important;
        /* defensive: kill leftover bottom:-80px */
        position: static !important;
    }

    section.hero-section .search-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    section.hero-section .search-box {
        padding: 85px 22px 26px !important;
        width: 100% !important;
    }

    .hero-text-hotel {
        left: 30px !important;
        top: 14px !important;
    }

    .hotel-badge-line1 {
        font-size: 22px !important;
        padding: 7px 16px !important;
    }

    .hotel-badge-line2 {
        font-size: 34px !important;
        padding: 10px 18px !important;
    }

    /* Stats row no longer needs huge margin (no overlap) */
    .stats-row {
        margin-top: 32px !important;
    }
}

@media (max-width: 768px) {
    .hero-bg-wrap {
        height: 240px !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    .hero-bg {
        height: 240px !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    section.hero-section .hero-container {
        padding-top: 256px !important;
        /* 240 image + 16 gap */
        padding-bottom: 20px !important;
    }

    section.hero-section .search-box {
        padding: 75px 18px 22px !important;
    }

    .hero-text-hotel {
        left: 20px !important;
        top: 12px !important;
    }

    .hotel-badge-line1 {
        font-size: 19px !important;
        padding: 6px 14px !important;
    }

    .hotel-badge-line2 {
        font-size: 30px !important;
        padding: 8px 16px !important;
    }

    .stats-row {
        margin-top: 24px !important;
    }
}

@media (max-width: 600px) {
    .hero-bg-wrap {
        height: 220px !important;
        border-radius: 0 !important;
    }

    .hero-bg {
        height: 220px !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    section.hero-section .hero-container {
        padding-top: 234px !important;
    }

    section.hero-section .search-box {
        padding: 70px 14px 20px !important;
        border-radius: 16px !important;
    }

    .hero-text-hotel {
        left: 16px !important;
        top: 12px !important;
    }

    .hotel-badge-line1 {
        font-size: 16px !important;
        padding: 5px 12px !important;
    }

    .hotel-badge-line2 {
        font-size: 24px !important;
        padding: 7px 14px !important;
    }
}

@media (max-width: 480px) {
    .hero-bg-wrap {
        height: 200px !important;
        border-radius: 0 !important;
    }

    .hero-bg {
        height: 200px !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    section.hero-section .hero-container {
        padding-top: 212px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    section.hero-section .search-box {
        padding: 65px 12px 16px !important;
    }

    .hero-text-hotel {
        left: 14px !important;
        top: 10px !important;
    }

    .hotel-badge-line1 {
        font-size: 13px !important;
        padding: 4px 10px !important;
    }

    .hotel-badge-line2 {
        font-size: 19px !important;
        padding: 6px 12px !important;
    }

    .stats-row {
        margin-top: 16px !important;
    }
}

@media (max-width: 375px) {
    .hero-bg-wrap {
        height: 180px !important;
        border-radius: 0 !important;
    }

    .hero-bg {
        height: 180px !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    section.hero-section .hero-container {
        padding-top: 192px !important;
    }

    .hotel-badge-line1 {
        font-size: 12px !important;
    }

    .hotel-badge-line2 {
        font-size: 17px !important;
    }
}


/* ============================================================
   SECTION 2: SEARCH TABS + TRIP BUTTONS + SEARCH FORM
   ============================================================ */

/* --- 2.1 Booking tabs (Hotel/Flight/Tour switcher) --- */
@media (max-width: 600px) {
    .booking-tabs {
        gap: 6px !important;
        overflow-x: auto;
        max-width: calc(100vw - 40px);
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
    }

    .booking-tabs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    .booking-tabs {
        font-size: 11px !important;
    }

    .booking-tabs button,
    .booking-tabs a {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* --- 2.2 Trip buttons (Luxury / Deluxe / Economy Rooms) --- */
@media (max-width: 768px) {

    #roomTypeButtons.trip-buttons,
    section.hero-section .trip-buttons {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 14px !important;
        gap: 8px !important;
        padding-bottom: 4px;
        /* Allow scroll past container padding for full reach */
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #roomTypeButtons.trip-buttons::-webkit-scrollbar,
    section.hero-section .trip-buttons::-webkit-scrollbar {
        display: none;
    }

    #roomTypeButtons .trip-btn,
    section.hero-section .trip-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {

    #roomTypeButtons .trip-btn,
    section.hero-section .trip-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* --- 2.3 Search form grid (2-column compact on mobile) --- */
@media (max-width: 992px) {
    section.hero-section .search-box .form-field {
        min-height: 78px !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 768px) {

    /* Custom 2-col compact grid:
       Row 1: Location (full)
       Row 2: Check-in | Check-out
       Row 3: Persons (full)
       Row 4: Search button (full)
    */
    .hero-section .search-form,
    section.hero-section .search-form {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .hero-section .search-form>.form-field#locationBox {
        grid-column: 1 / -1 !important;
    }

    .hero-section .search-form>.form-field#personsBox {
        grid-column: 1 / -1 !important;
    }

    .hero-section .search-form>.search-btn-square,
    section.hero-section .search-form>.search-btn-square {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 52px !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    section.hero-section .search-form>.search-btn-square i {
        font-size: 18px !important;
    }

    section.hero-section .search-form>.search-btn-square .search-text {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    section.hero-section .search-box .form-field {
        min-height: 70px !important;
        padding: 10px 12px !important;
    }

    section.hero-section .search-box .field-top-row {
        gap: 4px !important;
    }

    section.hero-section .search-box .field-location-img {
        width: 14px !important;
        height: 14px !important;
    }

    .field-main {
        font-size: 13px !important;
    }

    .field-sub {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    section.hero-section .search-box .form-field {
        min-height: 64px !important;
        padding: 8px 10px !important;
    }

    .field-main {
        font-size: 12px !important;
    }

    .field-sub {
        font-size: 10px !important;
    }

    section.hero-section .search-box .field-arrow {
        font-size: 10px !important;
    }
}

/* --- 2.4 Popovers (Location suggestions, Persons counter) --- */
@media (max-width: 768px) {
    .custom-popover {
        width: calc(100vw - 40px) !important;
        max-width: 320px;
        max-height: 45vh !important;
    }

    #personsPopover.custom-popover {
        width: calc(100vw - 40px) !important;
        max-width: 280px;
        padding: 16px !important;
    }

    .popover-list li {
        padding: 10px 14px !important;
    }

    .popover-list li .pop-title {
        font-size: 14px !important;
    }

    .popover-list li .pop-sub {
        font-size: 11px !important;
    }

    .counter-row {
        margin-bottom: 12px !important;
    }

    .counter-btns button {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
}

/* --- 2.5 Location clear button (already responsive, just verify) --- */
@media (max-width: 480px) {
    #locationClearBtn {
        right: 26px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }
}


/* ============================================================
   SECTION 3: STATS ROW (4 boxes below hero)
   ------------------------------------------------------------
   Desktop has margin: 330px auto 40px, padding: 30px 40px,
   width: 80%. All overridden aggressively below.
   ============================================================ */
@media (max-width: 992px) {
    .stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        width: calc(100% - 40px) !important;
        margin: 24px auto !important;
        padding: 18px 20px !important;
    }

    .stats-box {
        width: auto !important;
        height: auto !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .stats-image {
        width: 38px !important;
        height: 38px !important;
    }

    .stats-count {
        font-size: 20px !important;
    }

    .stats-text {
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    .stats-row {
        margin: 20px auto !important;
        padding: 16px !important;
        gap: 12px !important;
        border-radius: 16px !important;
    }

    .stats-box {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .stats-image {
        width: 34px !important;
        height: 34px !important;
    }

    .stats-count {
        font-size: 17px !important;
    }

    .stats-text {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .stats-row {
        margin: 16px auto !important;
        padding: 14px !important;
        gap: 10px !important;
        width: calc(100% - 32px) !important;
    }

    .stats-box {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .stats-image {
        width: 30px !important;
        height: 30px !important;
    }

    .stats-count {
        font-size: 15px !important;
    }

    .stats-text {
        font-size: 9px !important;
    }
}

@media (max-width: 375px) {
    .stats-row {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   SECTION 4: SECTION HEADERS (shared across all sections)
   .section-header / .section-title (title-main + highlight + suffix)
   .airline-nav-buttons / .airline-topbar / .airline-heading
   .deals-header / .deals-filters
   ============================================================ */
@media (max-width: 992px) {

    .section-title .title-main,
    .section-title .title-suffix,
    .airline-heading h2 .title-main,
    .airline-heading h2 .title-suffix {
        font-size: 28px !important;
    }

    .section-title .highlight,
    .airline-heading h2 .highlight {
        font-size: 36px !important;
    }

    .airline-nav-buttons button {
        width: 45px !important;
        height: 45px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {

    .section-header,
    .airline-topbar,
    .deals-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .section-title,
    .airline-heading h2,
    .section-header h2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 6px !important;
        line-height: 1.2 !important;
    }

    .section-title .title-main,
    .section-title .title-suffix,
    .airline-heading h2 .title-main,
    .airline-heading h2 .title-suffix,
    .section-header h2 {
        font-size: 20px !important;
    }

    .section-title .highlight,
    .airline-heading h2 .highlight,
    .section-header h2 .highlight {
        font-size: 22px !important;
        margin: 0 !important;
        font-style: italic !important;
        font-family: 'Playfair Display', 'Georgia', serif !important;
    }

    /* Remove staggered indent on mobile — keeps title clean & left-aligned */
    .section-title .title-suffix,
    .airline-heading h2 .title-suffix {
        padding-left: 0 !important;
        align-self: auto !important;
    }

    .airline-nav-buttons button {
        width: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 600px) {
    .deals-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        padding-bottom: 4px;
    }

    .deals-filters::-webkit-scrollbar {
        display: none;
    }

    .deals-filter-btn {
        flex-shrink: 0;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {

    .section-title,
    .airline-heading h2,
    .section-header h2 {
        gap: 4px !important;
    }

    .section-title .title-main,
    .section-title .title-suffix,
    .airline-heading h2 .title-main,
    .airline-heading h2 .title-suffix,
    .section-header h2 {
        font-size: 16px !important;
    }

    .section-title .highlight,
    .airline-heading h2 .highlight,
    .section-header h2 .highlight {
        font-size: 18px !important;
        font-style: italic !important;
        font-family: 'Playfair Display', 'Georgia', serif !important;
    }

    /* Hide nav arrows on small phones — touch users swipe */
    .airline-nav-buttons {
        display: none !important;
    }
}

@media (max-width: 375px) {

    .section-title .highlight,
    .airline-heading h2 .highlight {
        font-size: 21px !important;
    }
}


/* ============================================================
   SECTION 5: TOP VENUE DEALS (col-main / col-2 / col-3)
   ------------------------------------------------------------
   Key fix: explicitly set overflow-y: hidden on the grid.
   By default browsers auto-promote overflow-y to auto when
   overflow-x is auto, causing unwanted vertical scroll.
   col-2/col-3 also get explicit deal-card height to match
   the smaller info-box heights set below.
   ============================================================ */
@media (max-width: 1200px) {
    .venue-deals-grid {
        height: 460px !important;
        overflow-y: hidden !important;
    }

    .deals-col.col-main {
        width: 440px !important;
    }

    .deals-col.col-2,
    .deals-col.col-3 {
        width: 320px !important;
    }
}

@media (max-width: 992px) {
    .venue-deals-grid {
        height: 380px !important;
        gap: 14px !important;
        overflow-y: hidden !important;
    }

    .deals-col.col-main {
        width: 280px !important;
    }

    .deals-col.col-2,
    .deals-col.col-3 {
        width: 240px !important;
        gap: 14px !important;
    }

    .deals-info-box {
        max-width: 260px !important;
        height: 78px !important;
        padding: 12px 16px !important;
        border-radius: 20px !important;
    }

    /* Recalculate deal-card height with new info-box height (78) + gap (14) = 92 */
    .col-2 .deal-card,
    .col-3 .deal-card {
        height: calc(100% - 78px - 14px) !important;
        border-radius: 28px !important;
    }

    .col-main .deal-card {
        border-radius: 36px !important;
    }

    .deal-card-overlay h3 {
        font-size: 19px !important;
    }

    .deal-card-overlay p {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {

    .venue-deals-section .venue-deals-grid,
    section.venue-deals-section .venue-deals-grid {
        height: 420px !important;
        gap: 14px !important;
        margin-right: 0 !important;
        overflow-y: hidden !important;
    }

    .venue-deals-grid .deals-col.col-main,
    section.venue-deals-section .deals-col.col-main {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 360px !important;
        min-width: 0 !important;
    }

    .venue-deals-grid .deals-col.col-2,
    .venue-deals-grid .deals-col.col-3,
    section.venue-deals-section .deals-col.col-2,
    section.venue-deals-section .deals-col.col-3 {
        flex: 0 0 75vw !important;
        width: 75vw !important;
        max-width: 320px !important;
        min-width: 0 !important;
        gap: 14px !important;
    }

    .deals-info-box {
        max-width: 220px !important;
        height: 64px !important;
        padding: 10px 14px !important;
        border-radius: 16px !important;
    }

    .col-2 .deal-card,
    .col-3 .deal-card {
        height: calc(100% - 64px - 12px) !important;
        border-radius: 22px !important;
    }

    .col-main .deal-card {
        border-radius: 28px !important;
    }

    .deals-info-box p {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .deal-card-overlay {
        padding: 14px !important;
    }

    .deal-card-overlay h3 {
        font-size: 16px !important;
    }

    .deal-card-overlay p {
        font-size: 12px !important;
    }

    .quote-icon {
        font-size: 18px !important;
    }

    .deals-info-box .quote-icon {
        top: 8px !important;
        right: 12px !important;
    }
}

@media (max-width: 600px) {
    .venue-deals-grid {
        height: 300px !important;
        overflow-y: hidden !important;
    }

    .deals-col.col-main {
        width: 240px !important;
    }

    .deals-col.col-2,
    .deals-col.col-3 {
        width: 190px !important;
    }

    .deals-info-box {
        max-width: 190px !important;
        height: 58px !important;
        padding: 8px 12px !important;
    }

    .col-2 .deal-card,
    .col-3 .deal-card {
        height: calc(100% - 58px - 12px) !important;
    }
}

@media (max-width: 480px) {
    .venue-deals-grid {
        height: 270px !important;
        gap: 10px !important;
        overflow-y: hidden !important;
    }

    .deals-col.col-main {
        width: 210px !important;
    }

    .deals-col.col-2,
    .deals-col.col-3 {
        width: 170px !important;
        gap: 10px !important;
    }

    .deals-info-box {
        max-width: 170px !important;
        height: 52px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
    }

    .col-2 .deal-card,
    .col-3 .deal-card {
        height: calc(100% - 52px - 10px) !important;
        border-radius: 18px !important;
    }

    .col-main .deal-card {
        border-radius: 24px !important;
    }

    .deals-info-box p {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .deals-info-box .quote-icon {
        font-size: 14px !important;
        top: 6px !important;
        right: 10px !important;
    }

    .deal-card-overlay {
        padding: 12px !important;
    }

    .deal-card-overlay h3 {
        font-size: 14px !important;
    }

    .deal-card-overlay p {
        font-size: 11px !important;
    }
}


/* ============================================================
   SECTION 6: TRENDING + BEST OF WEEK (week-slider + cards)
   ============================================================ */

/* --- 6.1 Slider container --- */
@media (max-width: 768px) {
    .week-slider {
        margin-right: 0 !important;
        gap: 16px !important;
        padding: 20px 0 !important;
    }
}

@media (max-width: 480px) {
    .week-slider {
        gap: 12px !important;
    }
}

/* --- 6.2 venue-premium-card sizing — viewport-relative for ironclad scaling --- */
@media (max-width: 1200px) {

    .week-slider .venue-premium-card,
    section.best-of-week .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 360px !important;
        width: 360px !important;
        max-width: 360px !important;
        min-width: 0 !important;
    }

    .week-slider .card-image-wrap {
        height: 270px !important;
    }
}

@media (max-width: 992px) {

    .week-slider .venue-premium-card,
    section.best-of-week .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
    }

    .week-slider .card-image-wrap {
        height: 220px !important;
    }
}

@media (max-width: 768px) {

    .week-slider .venue-premium-card,
    section.best-of-week .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 360px !important;
        min-width: 0 !important;
    }

    .week-slider .card-image-wrap {
        height: 220px !important;
    }
}

@media (max-width: 600px) {

    .week-slider .venue-premium-card,
    section.best-of-week .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 340px !important;
    }

    .week-slider .card-image-wrap {
        height: 200px !important;
    }
}

@media (max-width: 480px) {

    .week-slider .venue-premium-card,
    section.best-of-week .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 320px !important;
    }

    .week-slider .card-image-wrap {
        height: 180px !important;
    }
}

@media (max-width: 375px) {

    .week-slider .venue-premium-card,
    .week-slider>.venue-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 280px !important;
    }

    .week-slider .card-image-wrap {
        height: 160px !important;
    }
}

/* --- 6.3 Card overlays: badge-rating, btn-fav, image-dots --- */
@media (max-width: 768px) {
    .badge-rating {
        top: 20px !important;
        left: 20px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .btn-fav {
        top: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .image-dots {
        bottom: 20px !important;
        gap: 5px !important;
    }

    .image-dots .dot {
        width: 6px !important;
        height: 6px !important;
    }

    .image-dots .dot.active {
        width: 18px !important;
    }
}

@media (max-width: 480px) {
    .badge-rating {
        top: 14px !important;
        left: 14px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .btn-fav {
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .image-dots {
        bottom: 14px !important;
    }

    .image-dots .dot {
        width: 5px !important;
        height: 5px !important;
    }

    .image-dots .dot.active {
        width: 14px !important;
    }
}

/* --- 6.4 Card body: cat, name, details-grid, price-action, highlights --- */
@media (max-width: 992px) {
    .venue-premium-body {
        padding: 18px 20px !important;
    }

    .venue-cat {
        font-size: 13px !important;
    }

    .venue-name {
        font-size: 19px !important;
        margin-bottom: 12px !important;
    }

    .det-item span {
        font-size: 13px !important;
    }

    .price-action-row .amount {
        font-size: 22px !important;
    }

    .btn-book-now {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .venue-premium-body {
        padding: 16px 18px !important;
        padding-bottom: 20px !important;
    }

    .venue-cat {
        font-size: 12px !important;
    }

    .venue-name {
        font-size: 17px !important;
        margin-bottom: 10px !important;
    }

    .details-grid {
        gap: 8px !important;
    }

    .det-item span {
        font-size: 12px !important;
    }

    .price-action-row .amount {
        font-size: 20px !important;
    }

    .price-action-row .label {
        font-size: 11px !important;
    }

    .btn-book-now {
        padding: 9px 18px !important;
        font-size: 13px !important;
    }

    .card-highlights {
        gap: 10px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .venue-premium-body {
        padding: 14px !important;
    }

    .venue-cat {
        font-size: 11px !important;
    }

    .venue-name {
        font-size: 15px !important;
    }

    /* Single column details on small mobile */
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .det-item span {
        font-size: 11px !important;
    }

    .det-item i {
        font-size: 13px !important;
    }

    .price-action-row .amount {
        font-size: 18px !important;
    }

    .btn-book-now {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    .card-highlights {
        gap: 8px !important;
        font-size: 10px !important;
    }
}


/* ============================================================
   SECTION 7: POPULAR CITIES (city-premium-card)
   ============================================================ */
@media (max-width: 992px) {

    #popularCitiesSlider .city-premium-card,
    .popular-cities-section .city-premium-card {
        flex: 0 0 380px !important;
        width: 380px !important;
        max-width: 380px !important;
        min-width: 0 !important;
    }

    .city-premium-card img {
        height: 240px !important;
    }
}

@media (max-width: 768px) {

    #popularCitiesSlider .city-premium-card,
    .popular-cities-section .city-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 360px !important;
    }

    .city-premium-card img {
        height: 220px !important;
    }

    .city-premium-body {
        padding: 16px !important;
    }

    .city-info-text h3 {
        font-size: 18px !important;
    }

    .city-info-text p {
        font-size: 12px !important;
    }

    .btn-explore-now {
        padding: 9px 18px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 600px) {

    #popularCitiesSlider .city-premium-card,
    .popular-cities-section .city-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 340px !important;
    }

    .city-premium-card img {
        height: 200px !important;
    }
}

@media (max-width: 480px) {

    #popularCitiesSlider .city-premium-card,
    .popular-cities-section .city-premium-card {
        flex: 0 0 88vw !important;
        width: 88vw !important;
        max-width: 320px !important;
    }

    .city-premium-card img {
        height: 180px !important;
    }

    .city-premium-body {
        padding: 14px !important;
    }

    .city-info-text h3 {
        font-size: 16px !important;
    }

    .city-info-text p {
        font-size: 11px !important;
    }

    .btn-explore-now {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   SECTION 8: HOTEL PARTNERS (airline-* classes)
   ============================================================ */
@media (max-width: 992px) {
    section.airline-showcase.hotel-partners-section {
        padding: 70px 0 !important;
    }

    .airline-carousel {
        gap: 28px !important;
    }

    .airline-logo-box {
        width: 140px !important;
        height: 110px !important;
    }

    .airline-name-box {
        width: 180px !important;
        height: 90px !important;
    }

    .airline-partner-name {
        font-size: 15px !important;
    }

    .airline-subtitle {
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    section.airline-showcase.hotel-partners-section {
        padding: 50px 0 !important;
    }

    .airline-carousel-wrapper {
        margin-right: 0 !important;
    }

    .airline-carousel {
        gap: 20px !important;
        padding-left: 16px !important;
    }

    .airline-logo-box {
        width: 120px !important;
        height: 96px !important;
    }

    .airline-name-box {
        width: 160px !important;
        height: 80px !important;
    }

    .airline-partner-name {
        font-size: 14px !important;
    }

    .airline-subtitle {
        font-size: 11px !important;
    }
}

@media (max-width: 600px) {
    .airline-logo-box {
        width: 100px !important;
        height: 80px !important;
    }

    .airline-name-box {
        width: 140px !important;
        height: 70px !important;
    }

    .airline-partner-name {
        font-size: 13px !important;
    }

    .airline-subtitle {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    section.airline-showcase.hotel-partners-section {
        padding: 40px 0 !important;
    }

    .airline-carousel {
        gap: 14px !important;
        padding-left: 12px !important;
    }

    .airline-logo-box {
        width: 90px !important;
        height: 72px !important;
    }

    .airline-name-box {
        width: 120px !important;
        height: 64px !important;
    }

    .airline-partner-name {
        font-size: 12px !important;
    }

    .airline-subtitle {
        font-size: 9px !important;
    }
}


/* ============================================================
   SECTION 9: WHY-BOOK (already partially responsive)
   ============================================================ */
@media (max-width: 768px) {
    .why-top {
        gap: 16px !important;
    }

    .why-top h2 {
        font-size: 26px !important;
    }

    .why-features {
        gap: 16px !important;
    }

    .why-card {
        padding: 22px 18px !important;
    }
}

@media (max-width: 480px) {
    .why-top h2 {
        font-size: 22px !important;
    }

    .why-card {
        padding: 18px 16px !important;
    }

    .why-card h3 {
        font-size: 13px !important;
    }

    .why-card p {
        font-size: 11px !important;
    }
}


/* ============================================================
   SECTION 10: TESTIMONIALS (premium-testi-card)
   ============================================================ */
@media (max-width: 991px) {

    .premium-testi-card,
    .premium-testi-card:nth-child(2) {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .premium-testi-card {
        padding: 24px !important;
        min-height: auto !important;
    }

    .premium-testi-card:nth-child(2) {
        min-height: auto !important;
        padding: 28px !important;
    }

    .premium-testi-card h4 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .premium-testi-card p {
        font-size: 13px !important;
    }

    .testi-quote-icon {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {

    .premium-testi-card,
    .premium-testi-card:nth-child(2) {
        padding: 20px !important;
        border-radius: 24px !important;
    }

    .premium-testi-card h4 {
        font-size: 17px !important;
    }

    .premium-testi-card p {
        font-size: 12px !important;
    }

    .testi-quote-icon {
        font-size: 26px !important;
    }
}


/* ============================================================
   SECTION 11: VIDEO TESTIMONIALS
   ============================================================ */
@media (max-width: 768px) {
    .video-testimonials-section {
        padding: 50px 0 !important;
    }

    .video-testimonials-header {
        margin-bottom: 32px !important;
    }

    .video-testimonials-title h2 {
        font-size: 30px !important;
    }

    .video-testimonials-title p,
    .video-testimonials-title span {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .video-testimonials-section {
        padding: 40px 0 !important;
    }

    .video-testimonials-title h2 {
        font-size: 22px !important;
    }

    .video-testimonials-title p,
    .video-testimonials-title span {
        font-size: 12px !important;
    }
}


/* ============================================================
   SECTION 12: FAQ
   ============================================================ */
@media (max-width: 992px) {
    .faq-container {
        gap: 28px !important;
    }
}

@media (max-width: 768px) {
    .faq-question {
        padding: 16px 18px !important;
        font-size: 14px !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 18px 16px !important;
    }

    .faq-toggle {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 16px 14px !important;
        font-size: 12px !important;
    }

    .faq-list .faq-item {
        margin-bottom: 10px !important;
    }
}


/* ============================================================
   SECTION 13: FOOTER
   ============================================================ */
@media (max-width: 768px) {
    .footer-wrapper {
        gap: 32px !important;
    }

    .footer-column h4 {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }

    .footer-column ul li {
        margin-bottom: 8px !important;
    }

    .footer-column ul li a {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .footer-wrapper {
        gap: 28px !important;
    }

    .footer-column h4 {
        font-size: 14px !important;
    }

    .footer-column ul li a {
        font-size: 12px !important;
    }
}


/* ============================================================
   SECTION 14: TOUCH/SCROLL OPTIMIZATIONS (universal)
   ============================================================ */
@media (max-width: 992px) {

    .week-slider,
    .venue-deals-grid,
    #popularCitiesSlider,
    #bestOfWeekSlider,
    #hotelSlider,
    #venueDealsSlider,
    #hotelPartnerCarousel,
    .airline-carousel-wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .venue-premium-card,
    .city-premium-card,
    .deals-col,
    .airline-item {
        scroll-snap-align: start;
    }
}


/* ============================================================
   SECTION 15: VERTICAL SECTION SPACING (compress on mobile)
   ============================================================ */
@media (max-width: 992px) {

    .section-header,
    .deals-header,
    .airline-topbar {
        margin-bottom: 24px !important;
    }

    /* Sliders padding (inline on most: padding: 30px 0) */
    .week-slider,
    .venue-deals-grid,
    #popularCitiesSlider,
    #bestOfWeekSlider,
    #hotelSlider,
    #venueDealsSlider {
        padding: 16px 0 !important;
    }
}

@media (max-width: 768px) {

    .section-header,
    .deals-header,
    .airline-topbar {
        margin-bottom: 18px !important;
    }

    .week-slider,
    .venue-deals-grid,
    #popularCitiesSlider,
    #bestOfWeekSlider,
    #hotelSlider,
    #venueDealsSlider {
        padding: 12px 0 !important;
    }

    /* Compact section vertical spacing */
    section.venue-deals-section,
    section.best-of-week,
    section.popular-cities-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

@media (max-width: 480px) {

    .section-header,
    .deals-header,
    .airline-topbar {
        margin-bottom: 14px !important;
    }

    section.venue-deals-section,
    section.best-of-week,
    section.popular-cities-section {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}

/* ============================================================
   GLOBAL MOBILE BORDER RADIUS FIX FOR CARDS
   ============================================================ */
@media (max-width: 768px) {

    .hotel-item,
    .venue-card,
    .event-card,
    .package-card,
    .deals-card,
    .destination-card,
    .listing-card,
    .property-card,
    .explore-card,
    .airline-card {
        border-radius: 14px !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   GLOBAL MOBILE OVERRIDE: HERO BADGE (WEB STYLE)
   Ensures the badge touches the top of the hero image and 
   maintains the stair-step design from desktop.
   ============================================================ */
@media (max-width: 992px) {

    .hero-text-hotel,
    .hero-text-tour,
    .hero-text-event,
    .hero-text-venue,
    .hero-text-boat {
        left: 20px !important;
        top: 0 !important;
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .hotel-badge-line1,
    .hero-line1-tour,
    .hero-line1-event,
    .venue-badge-line1,
    .boat-badge-line1 {
        background: #fff !important;
        border-radius: 0 0 15px 0 !important;
        white-space: nowrap !important;
        width: fit-content !important;
        display: inline-block !important;
        position: static !important;
        top: auto !important;
    }

    .hotel-badge-line2,
    .hero-line2-tour,
    .hero-line2-event,
    .venue-badge-line2,
    .boat-badge-line2 {
        background: #fff !important;
        border-radius: 0 0 25px 15px !important;
        white-space: nowrap !important;
        width: fit-content !important;
        display: inline-block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
    }

    .hero-text-tour h1,
    .hero-text-event h1 {
        margin: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 576px) {

    .hero-text-hotel,
    .hero-text-tour,
    .hero-text-event {
        left: 10px !important;
    }
}