/* ============================================================
   GLOBAL LISTING RESPONSIVE (Hotels, Tours, Events, Packages)
   ============================================================ */

/* ============================================================
   GLOBAL FIX: Unified Wishlist / Favorite / Like / Share buttons
   All heart/like/share icons across the app use a consistent
   dark-glass style so the white icon always stays visible
   regardless of photo brightness (light OR dark images).
   Affected pages: Hotel list/index/details, Package list/details,
   Event index/details, Tour details, Venue list/index/details,
   Car list/details, Boat list/details, Wishlist page, Custom Package.
   ============================================================ */

/* --- Default (unwishlisted / idle) state --- */
.main-img-wrap .wishlist-btn,
.btn-fav,
.venue-fav,
.hd-icon-btn,
.ev-action-btn,
.listing-like,
.room-type-favorite,
.fav-remove-btn,
.wishlist-heart,
.car-img-wishlist,
.boat-img-wishlist,
.share-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-shadow: none !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Default icon color (override colored/gray icons in originals) */
.main-img-wrap .wishlist-btn > i,
.btn-fav > i,
.venue-fav > i,
.hd-icon-btn > i,
.ev-action-btn > i,
.listing-like > i,
.room-type-favorite > i,
.wishlist-heart > i,
.car-img-wishlist > i,
.boat-img-wishlist > i,
.share-btn > i {
    color: #fff !important;
}

/* --- Hover state (tap-feedback on touch devices too) --- */
.main-img-wrap .wishlist-btn:hover,
.btn-fav:hover,
.venue-fav:hover,
.hd-icon-btn:hover,
.ev-action-btn:hover,
.listing-like:hover,
.room-type-favorite:hover,
.fav-remove-btn:hover,
.share-btn:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    transform: scale(1.07);
}

/* --- Active (wishlisted) state: white bg + orange heart --- */
.btn-fav.active,
.venue-fav.active,
.wishlist-btn.active,
.hd-icon-btn.wishlist-btn.active,
.ev-action-btn.wishlist-btn.active,
.listing-like.active,
.room-type-favorite.active,
.fav-remove-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(244, 116, 25, 0.4) !important;
}

.btn-fav.active > i,
.venue-fav.active > i,
.wishlist-btn.active > i,
.hd-icon-btn.wishlist-btn.active > i,
.ev-action-btn.wishlist-btn.active > i,
.listing-like.active > i,
.room-type-favorite.active > i,
.fav-remove-btn > i {
    color: #F47419 !important;
}

/* Remove-from-wishlist (on /wishlist page) turns red on hover */
.fav-remove-btn:hover {
    background: rgba(239, 68, 68, 0.95) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.fav-remove-btn:hover > i {
    color: #fff !important;
}

/* ============================================================
   GLOBAL FIX: Hide mobile filter trigger on desktop
   The markup uses Bootstrap's .d-lg-none class, but Bootstrap
   isn't loaded in the app layout, so the button showed on all
   viewports. Force-hide by default; the ≤992px block below
   re-enables it as a floating pill on mobile/tablet.
   ============================================================ */

.mobile-filter-bar,
.filters-overlay {
    display: none;
}

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

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

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 1. HERO AREA REPLICATION (Targeting .flights-search-page structure) */
@media (max-width: 992px) {
    .flights-search-page {
        height: auto !important;
        min-height: 480px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 60px 0 !important;
        /* Vertical padding to space the box on the image */
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f47419 !important;
        /* Fallback brand color */
        overflow: hidden !important;
    }

    .flights-search-page .search-bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        z-index: 1 !important;
        display: block !important;
        margin: 0 !important;
        opacity: 0.8 !important;
        /* Slight dimming for search box readability */
    }

    .flights-search-page .search-wrapper {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        padding: 0 15px !important;
        margin: 0 !important;
        z-index: 10 !important;
        text-align: center !important;
    }

    .flights-search-page .search-box {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        padding: 25px 20px !important;
        background: #fff !important;
        border-radius: 24px !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2) !important;
        z-index: 20 !important;
        display: block !important;
        float: none !important;
    }



    /* Trip Buttons & Form Stacking */
    .trip-buttons {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 5px 2px !important;
        margin-bottom: 20px !important;
        scrollbar-width: none !important;
    }

    .trip-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .trip-btn {
        flex: 0 0 auto !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        border-radius: 30px !important;
        white-space: nowrap !important;
    }

    .search-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-field {
        width: 100% !important;
        padding: 12px 15px !important;
        background: #fcfcfc !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 15px !important;
    }

    .search-btn-square {
        width: 100% !important;
        height: 50px !important; /* Slightly shorter */
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: row !important; /* Force horizontal alignment */
        align-items: center !important;
        justify-content: center !important;
        margin-top: 10px !important;
        font-size: 16px !important; /* Smaller text */
        gap: 8px !important;
        white-space: nowrap !important;
    }


    .search-btn-square i {
        font-size: 16px !important; /* Smaller icon */
    }

}

@media (max-width: 768px) {
    .flights-search-page {
        min-height: 420px !important;
        padding: 40px 0 !important;
    }
}

/* 2. MOBILE FILTER DRAWER LOGIC */
@media (max-width: 991px) {
    .flights-main {
        flex-direction: column !important;
        margin-top: 40px !important;
        /* Stacked below search box */
        padding-bottom: 80px !important;
        display: flex !important;
    }

    .flights-filters {
        position: fixed !important;
        top: 0 !important;
        left: -110% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        margin: 0 !important;
        border-radius: 0 24px 24px 0 !important;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.2) !important;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
        overflow-y: auto !important;
        padding: 25px !important;
        visibility: hidden !important;
    }

    .flights-filters.active {
        left: 0 !important;
        visibility: visible !important;
    }

    .filters-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        display: none !important;
        backdrop-filter: blur(4px) !important;
    }

    .filters-overlay.active {
        display: block !important;
    }

    /* Sticky Filter Bar */
    .mobile-filter-bar {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 999 !important;
        background: #fff !important;
        padding: 10px 25px !important;
        border-radius: 50px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #F47419 !important;
    }

    .btn-open-filters {
        background: none !important;
        border: none !important;
        color: #333 !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 14px !important;
    }

    .btn-open-filters i {
        color: #F47419 !important;
        font-size: 18px !important;
    }
}

/* 3. TESTIMONIALS SECTION (Journeys Shared) */
@media (max-width: 992px) {
    .hotel-testimonials-section {
        padding: 50px 0 !important;
        min-height: auto !important;
        display: block !important;
        height: auto !important;
    }

    .testimonials-flex {
        flex-direction: column !important;
        text-align: center !important;
    }

    .testimonials-left-girl {
        display: none !important;
        /* Huge image doesn't work well on mobile */
    }

    .testimonials-right-content {
        width: 100% !important;
    }

    .testimonials-main-title {
        align-items: center !important;
        margin: 0 auto 40px !important;
    }

    .testimonials-main-title h2 {
        font-size: 32px !important;
    }

    .testimonials-main-title span {
        align-self: center !important;
    }

    .premium-testimonial-stacks {
        align-items: center !important;
        gap: 20px !important;
    }

    .premium-testi-card {
        width: 100% !important;
        min-height: auto !important;
        border-radius: 20px !important;
        padding: 25px !important;
        text-align: left !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }

    .premium-testi-card:nth-child(2) {
        width: 100% !important;
        min-height: auto !important;
        padding: 25px !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    }

    .vertical-slider-indicator {
        display: none !important;
    }
}

/* 4. PREMIUM CARD REFINEMENT (Global) */
@media (max-width: 991px) {
    .results-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 24px !important;
        padding: 16px 20px !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #f0f0f0 !important;
    }

    .results-count {
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .count-num {
        color: #F47419 !important;
        font-weight: 800 !important;
    }

    .sort-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .sort-label {
        font-size: 13px !important;
        color: #666 !important;
        font-weight: 500 !important;
        display: none !important;
        /* Hide label on small phones to save space */
    }

    @media (min-width: 480px) {
        .sort-label {
            display: block !important;
        }
    }

    .sort-select {
        padding: 8px 12px !important;
        border: 1.5px solid #eee !important;
        border-radius: 10px !important;
        background: #fbfbfb !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        min-width: 140px !important;
    }


    .flights-list {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

    .hotel-list-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 450px !important; /* Premium centered look on larger mobile */
        margin: 0 auto 30px !important;
        padding: 0 !important;
        border-radius: 28px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
        background: #fff !important;
        border: 1px solid #f0f0f0 !important;
    }

    .hotel-list-media {
        width: 100% !important;
        height: 220px !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 0 !important;
    }

    .main-img-wrap {
        height: 100% !important;
        border-radius: 0 !important;
    }

    .hotel-list-content {
        padding: 24px !important;
        width: 100% !important;
    }

    .hotel-list-content .title {
        font-size: 19px !important;
        margin: 12px 0 !important;
    }

    .hotel-list-price-action {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px dashed #eee !important;
        padding: 20px 24px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #fafafa !important;
    }

    .hotel-list-price-action .price-section {
        text-align: left !important;
    }

    .hotel-list-price-action .btn-view {
        width: auto !important;
        min-width: 130px !important;
        padding: 12px 20px !important;
        border-radius: 14px !important;
    }
}

/* ============================================================
   5. DETAILS PAGE RESPONSIVENESS (Global Standards)
   ============================================================ */

@media (max-width: 991px) {

    /* Shared Container Spacing */
    .hotel-details-container,
    .tour-details-container,
    .event-details-container {
        padding: 0 15px 40px !important;
        margin-top: 15px !important;
    }

    /* Hero Stacking (Hotels, Tours, Events, Packages) */
    .hd-top-section,
    .tour-hero,
    .ev-hero {
        flex-direction: column !important;
        gap: 25px !important;
        margin-bottom: 30px !important;
        display: flex !important;
    }

    /* Media Sections Full Width */
    .hd-media,
    .tour-media,
    .ev-media {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* Main Image Height Optimization */
    .hd-main-img-wrap,
    .tour-main-img,
    .ev-main-img {
        height: 280px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .hd-main-img-wrap img,
    .tour-main-img img,
    .ev-main-img img {
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Thumbnail Gallery Optimization */
    .hd-thumbnails,
    .tour-thumbnails,
    .ev-thumbnails {
        height: 75px !important;
        gap: 8px !important;
        margin-top: 5px !important;
        display: flex !important;
        overflow-x: auto !important;
    }

    .hd-thumbnails img,
    .tour-thumbnails img,
    .ev-thumbnails img {
        width: 95px !important;
        height: 70px !important;
        border-radius: 12px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    /* Info Sections Full Width */
    .hd-info,
    .tour-info,
    .ev-info {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        flex: 1 !important;
    }

    /* Typography Adjustments */
    .hd-title,
    .tour-title,
    .ev-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    /* Meta Rows & Grids */
    .meta-row,
    .tour-icon-list,
    .ev-icon-list {
        flex-wrap: wrap !important;
        gap: 12px 20px !important;
    }

    .booking-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Room Card Sub-components (Hotel Details) */
    .hotel-list-card .price-action {
        width: 100% !important;
        border-top: 1px dashed #eee !important;
        padding-top: 20px !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .hotel-list-card .price-action .price-info {
        display: flex !important;
        align-items: baseline !important;
        gap: 10px !important;
    }

    .hotel-list-card .price-action form {
        display: flex !important;
        flex-direction: column !important; /* Stack form elements too */
        gap: 12px !important;
        width: 100% !important;
    }

    .hotel-list-card .price-action select {
        width: 100% !important;
        height: 48px !important;
    }

    .hotel-list-card .price-action .book-now {
        width: 100% !important;
        height: 50px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hotel-list-card .features-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .hotel-list-card .amenities-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 15px 0 !important;
    }

    .hotel-list-card .tag {
        margin: 0 !important;
    }

    /* Event Tickets (Event Details) */
    .tickets-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ticket-card {
        flex-direction: column !important;
        padding: 15px !important;
        border-radius: 24px !important;
    }

    .ticket-card .t-media {
        min-width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        margin-bottom: 15px !important;
    }

    .ticket-card .t-info {
        padding: 0 !important;
    }

    /* Sections Stacking */
    .hdm-content,
    .ev-details-grid {
        flex-direction: column !important;
        gap: 25px !important;
        display: flex !important;
    }

    .hdm-map-box,
    .ev-overview {
        width: 100% !important;
    }

    .hdm-map-box iframe,
    .hdm-map-box img {
        height: 300px !important;
    }

    /* Action Buttons (Sticky improvement suggested, but keeping existing layout for now) */
    .action-buttons {
        gap: 12px !important;
    }

    /* Horizontal Sliders & Premium Cards (Global) */
    .week-slider,
    .review-slider-new,
    #similarToursSlider {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        gap: 15px !important;
    }

    .venue-premium-card,
    .review-card-new,
    .event-card {
        flex: 0 0 320px !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }

    /* Section Headers */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 10px !important;
    }

    .airline-nav-buttons,
    .similar-tours .section-header > div:last-child {
        display: none !important; /* Hide slider buttons on mobile touch */
    }

    /* FAQ Stacking */
    .faq-container {
        flex-direction: column !important;
        gap: 40px !important;
        display: flex !important;
    }

    .faq-left, .faq-right {
        width: 100% !important;
    }

    /* Modals & Overlays */
    .reviews-modal-content,
    .inquiry-modal-content,
    .rm-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        padding: 20px !important;
    }

    /* Fixed Width Button Overrides */
    .hd-book-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 55px !important; /* Slightly taller for mobile touch */
        border-radius: 16px !important;
    }

    .hd-more-options {
        width: 100% !important;
        margin-top: 15px !important;
    }

    /* Tour Details: Attribute Selector Overrides (No HTML changes) */
    .tour-details-container > div[style*="padding: 40px"] {
        padding: 20px !important;
        grid-template-columns: 1fr !important; /* Fixes Includes/Excludes grid */
    }

    .tour-map-section div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important; /* Fixes Nearby Places grid */
    }

    /* Guest Details Layouts (Hotel, Tour, Package) */
    .gd-container {
        padding: 20px 15px !important;
    }

    .gd-section-card {
        padding: 20px !important;
    }

    .gd-form-grid,
    .gd-form-grid.primary-guest,
    .gd-form-grid.secondary-guest,
    .gd-form-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    /* Guest Details Mobile - Custom Grid Layout */
    .guest-block {
        display: grid !important;
        grid-template-columns: 80px 1fr 1fr !important;
        gap: 15px !important;
    }

    .guest-block > h2 {
        grid-column: 1 / -1 !important;
        margin-bottom: 0 !important;
    }

    .guest-block .primary-guest,
    .guest-block .secondary-guest,
    .guest-block .gd-form-row {
        display: contents !important;
    }

    /* Primary Guest Placements */
    .primary-guest .gd-field-group:nth-child(1) { grid-area: 2 / 1 / 3 / 2 !important; } /* Title */
    .primary-guest .gd-field-group:nth-child(2) { grid-area: 2 / 2 / 3 / 3 !important; } /* First Name */
    .primary-guest .gd-field-group:nth-child(3) { grid-area: 2 / 3 / 3 / 4 !important; } /* Last Name */
    
    .gd-form-row .gd-field-group:nth-child(1) { grid-area: 3 / 1 / 4 / 3 !important; } /* Email */
    .primary-guest .gd-field-group:nth-child(4) { grid-area: 3 / 3 / 4 / 4 !important; } /* Age */
    
    .gd-form-row .gd-field-group:nth-child(2) { grid-area: 4 / 1 / 5 / 4 !important; } /* Phone */

    /* Secondary Guest Placements (Default / Hotel / Tour) */
    .secondary-guest .gd-field-group:nth-child(1) { grid-area: 2 / 1 / 3 / 2 !important; } /* Title */
    .secondary-guest .gd-field-group:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; } /* First Name */
    .secondary-guest .gd-field-group:nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important; } /* Last Name */
    .secondary-guest .gd-field-group:nth-child(2) { grid-area: 3 / 1 / 4 / 2 !important; } /* Age */

    /* --- PACKAGE SPECIFIC OVERRIDES --- */
    /* Package HTML order is different: Title(1), Age(2), First(3), Last(4) */
    form[action*="package"] .primary-guest .gd-field-group:nth-child(1) { grid-area: 2 / 1 / 3 / 2 !important; } /* Title */
    form[action*="package"] .primary-guest .gd-field-group:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; } /* First Name */
    form[action*="package"] .primary-guest .gd-field-group:nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important; } /* Last Name */
    
    form[action*="package"] .gd-form-row .gd-field-group:nth-child(1) { grid-area: 3 / 1 / 4 / 3 !important; } /* Email */
    form[action*="package"] .primary-guest .gd-field-group:nth-child(2) { grid-area: 3 / 3 / 4 / 4 !important; } /* Age */
    
    form[action*="package"] .gd-form-row .gd-field-group:nth-child(2) { grid-area: 4 / 1 / 5 / 4 !important; } /* Phone */
    form[action*="package"] .gd-form-row .gd-field-group:nth-child(3) { grid-area: 5 / 1 / 6 / 4 !important; } /* Total Guests */

    /* Secondary Guest Packages */
    form[action*="package"] .secondary-guest .gd-field-group:nth-child(1) { grid-area: 2 / 1 / 3 / 2 !important; } /* Title */
    form[action*="package"] .secondary-guest .gd-field-group:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; } /* First Name */
    form[action*="package"] .secondary-guest .gd-field-group:nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important; } /* Last Name */
    form[action*="package"] .secondary-guest .gd-field-group:nth-child(2) { grid-area: 3 / 1 / 4 / 2 !important; } /* Age */

    /* Booking For Radio Option Fixes */
    .gd-section-card div.meal-plan-list[style*="flex-direction: row"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Address Details Mobile Grids */
    .gd-section-card > div[style*="border-radius: 12px"] {
        padding: 15px !important;
    }

    .gd-section-card div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Meal Plan Fixes */
    .meal-plan-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .meal-plan-left {
        align-items: flex-start !important;
    }

    .meal-plan-item input[type="radio"] {
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .meal-plan-price {
        padding-left: 32px !important; /* Align price with the text, leaving room for radio */
    }

    .gd-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }

    .gd-btn-next,
    .gd-btn-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Section Header Typography (Matches Index Pages) */
    .section-title,
    .airline-heading h2,
    .section-header h2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        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,
    .section-header h2 span {
        font-size: 18px !important;
        font-style: italic !important;
        font-family: 'Playfair Display', 'Georgia', serif !important;
    }

    .hd-main-img-wrap,
    .tour-main-img,
    .ev-main-img {
        height: 240px !important;
    }

    .hd-title,
    .tour-title,
    .ev-title {
        font-size: 22px !important;
    }

    /* Premium Card Body Typography (Matches Index) */
    .venue-premium-body,
    .event-card .venue-premium-body {
        padding: 14px !important;
    }

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

    .venue-name {
        font-size: 15px !important;
        margin-bottom: 8px !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;
    }
    
    .price-action-row .label {
        font-size: 10px !important;
    }

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

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

    /* Guest Details Mobile */
    .gd-form-grid,
    .gd-form-grid.primary-guest,
    .gd-form-grid.secondary-guest,
    .gd-form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .meal-plan-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .gd-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }

    .gd-btn-next,
    .gd-btn-back {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* =============================================================
   REVIEW & CHECKOUT PAGES — TABLET (Hotel, Tour, Package, Event)
   ============================================================= */
@media (max-width: 992px) {

    /* --- HOTEL & PACKAGE: Reorder so price summary appears BEFORE buttons --- */
    .rb-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px 15px !important;
        gap: 0 !important;
    }

    .rb-left,
    .rb-right {
        display: contents !important;
    }

    /* All children get proper width and spacing */
    .rb-left > *,
    .rb-right > * {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Right column content (coupons, addons, price summary) comes after left content */
    .rb-right > * {
        order: 50 !important;
    }

    /* Push button rows / forms at the bottom of rb-left to the VERY END */
    .rb-left > form:last-child,
    .rb-left > div:last-child {
        order: 99 !important;
    }

    /* Ensure the card before buttons doesn't also get order 99 */
    .rb-left > .rb-card,
    .rb-left > .gd-breadcrumb,
    .rb-left > .rb-title,
    .rb-left > h2,
    .rb-left > .rb-info-bar,
    .rb-left > div[style*="margin-top: 24px"] {
        order: 0 !important;
        text-align: left !important;
    }

    /* Package Review: Selection Summary Card - Tablet Refinement */
    .rb-card[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .rb-card[style*="display: flex"][style*="justify-content: space-between"] div[style*="text-align: right"] {
        text-align: left !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px solid #f0f0f0 !important;
        padding-top: 15px !important;
    }

    /* Style the 'Change' link as a button for better visibility */
    .rb-card[style*="display: flex"][style*="justify-content: space-between"] a[style*="text-decoration: none"] {
        background: #F47419 !important;
        color: #fff !important;
        padding: 6px 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        transition: opacity 0.2s !important;
    }

    /* Shared Review Components: Tablet Refinements */
    .rb-info-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }

    .rb-info-item {
        border-right: 1px solid #f0f0f0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .rb-info-item:nth-child(2n) {
        border-right: none !important;
    }

    .rb-info-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .rb-feat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .rb-feat-item {
        font-size: 13px !important;
    }

    /* --- EVENT REVIEW: Grid → Single Column --- */
    .review-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px 15px !important;
        gap: 0 !important;
        grid-template-columns: 1fr !important;
    }

    .review-container > .rb-left,
    .review-container > .rb-right {
        display: contents !important;
    }

    .review-container > .rb-left > *,
    .review-container > .rb-right > * {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .review-container > .rb-right > * {
        order: 50 !important;
    }

    .review-container > .rb-left > form:last-child {
        order: 99 !important;
    }

    /* Event: Image + Info → Stack Vertically */
    .event-info-header {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .event-info-img {
        width: 100% !important;
        height: 180px !important;
        border-radius: 14px !important;
    }

    .event-info-header > div[style*="text-align:right"] {
        text-align: left !important;
    }

    /* Event: Info Grid → 1-col or 2-col */
    .info-summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .info-summary-grid .info-item-box:last-child {
        grid-column: 1 / -1 !important;
    }

    /* Hotel Card: Image + Info Side-by-Side → Stack */
    .rb-hotel-card {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .rb-hotel-img {
        width: 100% !important;
        height: 180px !important;
        border-radius: 12px !important;
    }

    .rb-hotel-name {
        font-size: 18px !important;
    }

    /* Info Bar: 4-col → 2-col */
    .rb-info-bar {
        grid-template-columns: 1fr 1fr !important;
    }

    .rb-info-item {
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .rb-info-item:last-child {
        border-bottom: none !important;
    }

    /* Feature Grid → 2-col */
    .rb-feat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .rb-feat-grid > div[style*="grid-row: span 2"] {
        grid-row: auto !important;
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    /* Checks Bar: 4-col → 2-col */
    .rb-checks-bar {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Checkout Info/Guest Bars: Wrap */
    .checkout-info-row {
        flex-wrap: wrap !important;
    }

    .checkout-guest-bar {
        flex-wrap: wrap !important;
    }

    .checkout-guest-item {
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }

    /* Price Summary Row Wrapping */
    .rb-bill-row {
        gap: 8px !important;
    }

    .rb-bill-row.total {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .rb-bill-row.total .rb-price {
        font-size: 22px !important;
    }

    /* Payment Options */
    .pay-method-header {
        padding: 14px 16px !important;
    }

    .saved-cards-row {
        gap: 12px !important;
    }

    .saved-card {
        width: 140px !important;
        height: 90px !important;
    }

    .add-card-btn {
        width: 100px !important;
        height: 90px !important;
    }

    /* Package Review: Info Grid 4-col → 2-col */
    .rb-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Package Review: Mini Card Refinements */
    .package-mini-card {
        flex-direction: column !important;
        gap: 0 !important;
        border-radius: 16px !important;
    }

    .package-mini-img {
        width: 100% !important;
        height: 220px !important;
    }

    .package-mini-content {
        padding: 24px !important;
        text-align: left !important;
    }

    .package-mini-title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
    }

    .package-mini-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: flex-start !important;
        border-top: 1px solid #f8f8f8 !important;
        padding-top: 15px !important;
    }

    /* Summary Row Wrapping */
    .summary-row {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    /* --- TOUR: Two-Column → Single-Column Stack --- */
    .flight-upgrade-section {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
        margin: 30px auto !important;
    }

    .left-upgrades,
    .right-upgrades {
        flex: unset !important;
        width: 100% !important;
    }

    /* Tour: Venue Horizontal Card → Stack */
    .venue-horizontal-card {
        flex-direction: column !important;
    }

    .venue-card-image {
        width: 100% !important;
        height: 180px !important;
    }

    .venue-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Tour: Search Form Fields → Wrap */
    .search-form {
        flex-wrap: wrap !important;
    }

    .form-field-venue {
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }

    /* Tour: Payment Tabs */
    .payment-tab {
        flex-wrap: nowrap !important;
    }

    .tab-middle h4 {
        font-size: 14px !important;
    }

    .tab-middle p {
        font-size: 11px !important;
    }

    /* Tour: Navigation Footer → full width */
    .navigation-footer {
        flex-direction: row !important;
        gap: 12px !important;
    }

    .navigation-footer .back-btn,
    .navigation-footer .next-btn {
        flex: 1 !important;
        text-align: center !important;
    }

    /* Tour: Flight Summary Card */
    .flight-summary-card {
        padding: 16px !important;
    }

    .summary-row .summary-value {
        word-break: break-word !important;
    }

    /* Shared: Bottom Button Rows */
    div[style*="display: flex"][style*="justify-content: space-between"][style*="margin-top"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Payment Success Modal */
    .payment-modal-content {
        width: 90% !important;
        max-width: 380px !important;
        padding: 30px !important;
    }

    /* --- USER DASHBOARD & PROFILE: Tablet --- */
    .user-main-content {
        padding: 25px 20px !important;
    }

    .dashboard-header h1 {
        font-size: 26px !important;
    }

    .content-card-box {
        padding: 25px !important;
        border-radius: 20px !important;
    }

    .profile-input-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .profile-form-container {
        max-width: 100% !important;
    }

    /* User Dashboard: Tables & Details */
    .premium-table-wrapper {
        border-radius: 16px !important;
    }

    .premium-table th, 
    .premium-table td {
        padding: 15px !important;
    }

    .bd-columns {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .bd-hero-card {
        flex-direction: row !important;
    }

    .bd-hero-img {
        width: 200px !important;
    }

    /* --- MY BOOKINGS LIST: Tablet (Card-Style Conversion for 769-992px gap) --- */
    .premium-table-wrapper {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .premium-table {
        display: block !important;
        border-collapse: separate !important;
    }

    .premium-table thead {
        display: none !important;
    }

    .premium-table tbody {
        display: block !important;
    }

    .premium-table tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 20px !important;
        padding: 18px !important;
        margin-bottom: 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    }

    .premium-table tr:hover td {
        background: transparent !important;
    }

    .premium-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f7f7f7 !important;
        width: 100% !important;
    }

    .premium-table td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .premium-table td::before {
        content: attr(data-label) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #aaa !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
    }

    /* Service column → block layout, no label, full-width separator below */
    .premium-table td[data-label="Service"] {
        display: block !important;
        padding: 0 0 14px 0 !important;
        border-bottom: 1.5px solid #f5f5f5 !important;
        margin-bottom: 6px !important;
    }

    .premium-table td[data-label="Service"]::before {
        display: none !important;
    }

    .table-service-box {
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .table-service-img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 12px !important;
        flex-shrink: 0 !important;
    }

    .table-service-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .table-service-info h4 {
        font-size: 15px !important;
        word-break: break-word !important;
    }

    /* Right-align the value side for ID & Travel Date (which contain stacked divs) */
    .premium-table td[data-label="ID"],
    .premium-table td[data-label="Travel Date"] {
        align-items: flex-start !important;
    }

    .premium-table td[data-label="ID"] > div,
    .premium-table td[data-label="Travel Date"] > div {
        text-align: right !important;
    }

    .premium-table td .table-text-muted {
        justify-content: flex-end !important;
    }

    /* Action buttons row → top border separator, button row right aligned */
    .premium-table td[data-label="Action"] {
        padding-top: 14px !important;
        margin-top: 4px !important;
        border-top: 1.5px solid #f5f5f5 !important;
        border-bottom: none !important;
        text-align: right !important;
    }

    .premium-table td[data-label="Action"] > div {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    /* Empty state padding refinement */
    .content-card-box > div[style*="text-align: center"][style*="padding: 100px"] {
        padding: 60px 20px !important;
    }

    /* =============================================================
       CUSTOM PACKAGE PAGE: Tablet (create_custom.blade.php)
       ============================================================= */

    /* Container */
    .booking-tabs-container {
        padding: 0 15px !important;
        margin: 25px auto !important;
    }

    /* Sticky Tab Header → horizontal scroll, smaller pills */
    .booking-tabs-header {
        top: 60px !important;
        border-radius: 16px !important;
        padding: 4px !important;
        gap: 4px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

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

    .booking-tab-item {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        padding: 10px 18px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }

    .booking-tab-item i {
        font-size: 16px !important;
    }

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

    /* Premium Search Wrapper → vertical stack */
    .premium-search-wrapper {
        flex-direction: column !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 16px !important;
        margin-bottom: 30px !important;
    }

    .premium-search-wrapper .search-item {
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 12px 18px !important;
        border-radius: 12px !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }

    .premium-search-wrapper .search-item:last-child {
        border-bottom: none !important;
    }

    .search-item-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 17px !important;
        border-radius: 10px !important;
    }

    .search-item-value,
    .search-input-mock {
        font-size: 16px !important;
    }

    /* Custom popovers: keep within viewport */
    .custom-popover {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        left: 8px !important;
        right: 8px !important;
    }

    /* Stay duration badge realignment */
    #stay-duration-badge {
        bottom: -14px !important;
        font-size: 10px !important;
    }

    /* Booking-For radios → 2-up wrap */
    .gd-section-card .meal-plan-list[style*="flex-direction: row"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .gd-section-card .meal-plan-list .book-for-item {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        padding: 12px 18px !important;
    }

    /* Guest 4-col grid → 2-col */
    .guest-block > div[style*="grid-template-columns: 100px 100px 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* Primary 3-col → 2-col */
    .guest-block > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    /* Section card sizing */
    .booking-tabs-container .gd-section-card {
        padding: 22px !important;
        border-radius: 16px !important;
    }

    .booking-tabs-container .gd-section-title {
        font-size: 17px !important;
        margin-bottom: 18px !important;
    }

    /* Tab page H1 titles */
    .booking-tab-content > h1 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }

    /* Inline tab search input */
    .search-input-field {
        height: 54px !important;
        font-size: 15px !important;
        padding: 0 56px 0 20px !important;
    }

    /* Flights → 2 columns */
    .flight-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .flight-card-image {
        height: 180px !important;
    }

    /* Hotel Wide Card → stacked column */
    .hotel-premium-card-wide {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .hotel-card-left {
        width: 100% !important;
    }

    .hotel-main-img-wrap {
        height: 220px !important;
        margin-bottom: 8px !important;
    }

    .hotel-thumb {
        height: 70px !important;
    }

    .hotel-name-title {
        font-size: 20px !important;
    }

    .hotel-rating-badge {
        font-size: 14px !important;
    }

    .hotel-price-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .hotel-price-val > div {
        font-size: 20px !important;
    }

    .hotel-badges-grid {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin-bottom: 15px !important;
    }

    .hotel-extra-list {
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
        justify-content: flex-start !important;
        font-size: 13px !important;
    }

    .btn-hotel-select {
        padding: 10px 28px !important;
        font-size: 14px !important;
    }

    /* Car Wide Card → stacked column */
    .car-wide-card {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .car-img-wrap {
        width: 100% !important;
        height: 200px !important;
    }

    .car-name {
        font-size: 19px !important;
    }

    .car-specs {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 18px !important;
    }

    .car-price-val strong {
        font-size: 24px !important;
    }

    .btn-car-select {
        padding: 10px 28px !important;
        font-size: 14px !important;
    }

    /* Boats → 2 columns */
    .boat-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .boat-card-img-wrap {
        height: 180px !important;
    }

    .boat-card-name {
        font-size: 17px !important;
    }

    /* Empty state full-width (override grid-column: span 3) */
    .empty-tab-state {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        padding: 50px 20px !important;
        color: #888 !important;
    }

    .empty-tab-state i {
        font-size: 48px !important;
        color: #ccc !important;
        margin-bottom: 14px !important;
    }

    /* Tab Footer Actions */
    .tab-footer-actions {
        gap: 10px !important;
        padding: 16px 0 !important;
        margin-top: 20px !important;
    }

    .btn-tab-prev,
    .btn-tab-next {
        padding: 12px 28px !important;
        font-size: 14px !important;
        min-width: 110px !important;
    }

    /* Pagination */
    .pg-btn,
    .pg-arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    /* =============================================================
       FOOTER: Tablet (partials/footer.blade.php)
       ============================================================= */

    .footer {
        padding: 60px 40px 30px !important;
        border-radius: 50px 50px 0 0 !important;
        margin-top: 70px !important;
    }

    .footer-wrapper {
        gap: 36px !important;
        flex-direction: column !important;
    }

    .footer-left {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .footer-left p {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    .brand-logo-img {
        height: 44px !important;
    }

    /* Right side → 2×2 grid (cleaner than 4-row vertical stack) */
    .footer-right {
        flex: 1 1 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 24px 32px !important;
    }

    .footer-column {
        flex: 1 1 calc(50% - 16px) !important;
        min-width: 0 !important;
    }

    .footer-column.footer-contact {
        flex: 1 1 100% !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;
    }

    /* Social icons compact */
    .footer-social {
        margin-top: 20px !important;
    }

    .social-title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .social-icons {
        gap: 10px !important;
    }

    .social-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Contact items: 2-col grid on tablet */
    .footer-contact .contact-info-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 24px !important;
    }

    /* Newsletter compact */
    .footer-newsletter {
        margin: 24px auto 0 !important;
        padding: 16px 20px !important;
    }

    .newsletter-form {
        gap: 8px !important;
    }

    .newsletter-form input[type="email"] {
        padding: 11px 16px !important;
        font-size: 13px !important;
    }

    .newsletter-btn {
        padding: 11px 20px !important;
        font-size: 13px !important;
    }

    /* Bottom bar */
    .footer-bottom {
        margin-top: 40px !important;
        font-size: 13px !important;
        padding-top: 16px !important;
    }

    /* =============================================================
       IMAGE LIGHTBOX (hotel / event / tour / package details)
       Prev/Next/Close aren't visible on touch (no :hover) — show them
       as solid circular buttons on mobile/tablet.
       ============================================================= */

    .lg-main-img {
        max-width: 92vw !important;
        max-height: 78vh !important;
    }

    .lg-nav {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        font-size: 18px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.55) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .lg-nav:hover,
    .lg-nav:active {
        opacity: 1 !important;
        background: rgba(244, 116, 25, 0.9) !important;
    }

    .lg-prev {
        left: 10px !important;
    }

    .lg-next {
        right: 10px !important;
    }

    .lg-close {
        top: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 22px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.55) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .lg-counter {
        bottom: 20px !important;
        font-size: 13px !important;
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
        z-index: 10 !important;
    }
}

/* =============================================================
   REVIEW & CHECKOUT PAGES — MOBILE (Hotel, Tour, Package, Event)
   ============================================================= */
@media (max-width: 480px) {

    .rb-container {
        padding: 15px 12px !important;
    }

    /* Reduce global child spacing on mobile to fix 'jyafda spacing' */
    .rb-left > *,
    .rb-right > * {
        margin-bottom: 12px !important;
    }

    /* Override inline margin-top on selection cards to avoid double spacing */
    .rb-card[style*="margin-top: 25px"],
    .rb-card[style*="margin-top: 24px"],
    div[style*="margin-top: 24px"] {
        margin-top: 0 !important;
    }

    .rb-title {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .gd-breadcrumb {
        margin-bottom: 15px !important;
        font-size: 12px !important;
    }

    .rb-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
    }

    /* Hotel Card */
    .rb-hotel-img {
        height: 160px !important;
    }

    .rb-hotel-name {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

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

    .rb-hotel-rating {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .rb-hotel-rating i {
        font-size: 12px !important;
    }

    .rb-hotel-rating span {
        font-size: 12px !important;
    }

    .rb-hotel-loc {
        font-size: 12px !important;
    }

    /* Info Bar: 2-col → 1-col on tiny phones */
    .rb-info-bar {
        grid-template-columns: 1fr !important;
    }

    .rb-info-item {
        padding: 12px 16px !important;
    }

    .rb-info-label {
        font-size: 11px !important;
    }

    .rb-info-val {
        font-size: 13px !important;
    }

    /* Feature Grid → 1-col */
    .rb-feat-grid {
        grid-template-columns: 1fr !important;
    }

    .rb-feat-item {
        font-size: 12px !important;
    }

    /* Price Box */
    .rb-price-main {
        font-size: 28px !important;
    }

    /* Tags Wrap */
    .rb-tag-group {
        gap: 8px !important;
    }

    .rb-tag-item {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Checks Bar → 1-col */
    .rb-checks-bar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .rb-check-item {
        font-size: 12px !important;
        white-space: normal !important;
    }

    /* Checkout Info & Guest Bars → Stack */
    .checkout-info-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .checkout-info-item {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .checkout-guest-bar {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .checkout-guest-item {
        flex: unset !important;
        width: 100% !important;
        font-size: 12px !important;
    }

    /* Bill Rows */
    .rb-bill-row {
        font-size: 13px !important;
    }

    .rb-bill-row.total span:first-child {
        font-size: 14px !important;
    }

    .rb-bill-row.total .rb-price {
        font-size: 20px !important;
    }

    /* Payment Options */
    .pay-method-header {
        padding: 12px 14px !important;
    }

    .pay-method-header h4 {
        font-size: 14px !important;
    }

    .pay-method-header p {
        font-size: 11px !important;
    }

    .pay-method-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .pay-method-icon i {
        font-size: 14px !important;
    }

    .saved-cards-row {
        gap: 10px !important;
    }

    .saved-card {
        width: 120px !important;
        height: 75px !important;
    }

    .add-card-btn {
        width: 80px !important;
        height: 75px !important;
    }

    /* Package Review: Info Grid → 2-col stays fine */
    .rb-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .rb-info-box {
        padding: 12px !important;
    }

    .rb-info-box .label {
        font-size: 10px !important;
    }

    .rb-info-box .val {
        font-size: 13px !important;
    }

    /* Package Mini Card */
    .package-mini-card {
        padding: 14px !important;
    }

    /* Package Review: Mini Card Refinement */
    .package-mini-card {
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    .package-mini-img {
        width: 100% !important;
        height: 160px !important;
    }

    .package-mini-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .package-mini-content {
        padding: 15px !important;
        text-align: left !important;
    }

    .package-mini-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .package-mini-meta {
        flex-wrap: wrap !important;
        gap: 10px !important;
        font-size: 11px !important;
        justify-content: flex-start !important;
    }

    .rb-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Coupon Card */
    .coupon-card {
        padding: 16px !important;
    }

    .coupon-input-wrap {
        padding: 0 10px !important;
    }

    .coupon-input-wrap input {
        font-size: 13px !important;
    }

    /* --- TOUR SPECIFIC MOBILE --- */
    .flight-upgrade-section {
        padding: 0 10px !important;
        margin: 20px auto !important;
        gap: 16px !important;
    }

    .venue-horizontal-card {
        border-radius: 12px !important;
    }

    .venue-card-image {
        height: 160px !important;
    }

    .venue-card-content {
        padding: 14px !important;
    }

    .venue-title {
        font-size: 16px !important;
    }

    /* Tour: Form Fields → 1-col */
    .form-field-venue {
        flex: 1 1 100% !important;
    }

    .form-field-venue .field-main-venue {
        font-size: 14px !important;
    }

    /* Tour: Upgrade Cards */
    .upgrade-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

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

    /* Tour: Price Summary Bill */
    .price-summary-bill li {
        font-size: 13px !important;
    }

    .price-summary-bill li.total {
        font-size: 15px !important;
    }

    .upgrade-card-bill {
        padding: 16px !important;
    }

    /* Tour: Payment Tabs */
    .payment-tab {
        padding: 12px !important;
    }

    .payment-logo {
        width: 32px !important;
        height: 32px !important;
    }

    .tab-middle h4 {
        font-size: 13px !important;
    }

    .tab-middle p {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* Tour: Flight Summary */
    .flight-summary-card {
        padding: 14px !important;
    }

    .flight-summary-card h3 {
        font-size: 16px !important;
    }

    .summary-row .summary-label {
        font-size: 12px !important;
    }

    .summary-row .summary-value {
        font-size: 12px !important;
    }

    /* Tour: Navigation Footer → Stack */
    .navigation-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .navigation-footer .back-btn,
    .navigation-footer .next-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Shared: Back/Next Button Rows */
    div[style*="display: flex"][style*="justify-content: space-between"][style*="margin-top: 40px"],
    div[style*="display: flex"][style*="justify-content: space-between"][style*="margin-top: 20px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .gd-btn-back,
    .btn-back {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        padding: 12px !important;
    }

    .gd-btn-next,
    .btn-next {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        padding: 12px !important;
    }

    /* Selection Summary Card (Package Review inline flex) */
    .rb-card[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding: 15px !important;
    }

    .rb-card[style*="display: flex"][style*="justify-content: space-between"] div[style*="text-align: right"] {
        text-align: left !important;
        width: 100% !important;
        border-top: 1px solid #f0f0f0 !important;
        padding-top: 12px !important;
        margin-top: 5px !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .rb-card[style*="display: flex"][style*="justify-content: space-between"] a[style*="text-decoration: none"] {
        background: #FFF0E6 !important;
        color: #F47419 !important;
        padding: 4px 12px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* Selection Summary Grid (Hotel Review inline grid) */
    div[style*="display: grid"][style*="repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Selection Summary bottom bar (Hotel Review) */
    div[style*="display: flex"][style*="justify-content: space-between"][style*="padding-top: 15px"] {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* Payment Modal */
    .payment-modal-content {
        width: 92% !important;
        max-width: 350px !important;
        padding: 24px !important;
    }

    .payment-modal-content h3 {
        font-size: 20px !important;
    }

    /* Policy Modal */
    .policy-modal-content {
        width: 95% !important;
        max-height: 80vh !important;
    }

    .policy-modal-header {
        padding: 14px 16px !important;
    }

    .policy-modal-header h3 {
        font-size: 15px !important;
    }

    .policy-modal-body {
        padding: 8px 16px 16px !important;
    }

    .policy-item h4 {
        font-size: 13px !important;
    }

    .policy-item p {
        font-size: 13px !important;
    }

    /* --- EVENT REVIEW SPECIFIC MOBILE --- */
    .review-container {
        padding: 15px 12px !important;
    }

    .event-info-header {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .event-info-img {
        height: 160px !important;
    }

    .event-info-header h3 {
        font-size: 18px !important;
    }

    .info-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .info-summary-grid .info-item-box:last-child {
        grid-column: auto !important;
    }

    .info-item-box {
        padding: 10px 12px !important;
    }

    .info-item-box .value {
        font-size: 13px !important;
    }

    /* Event: Section Title */
    .rb-section-title {
        font-size: 18px !important;
    }

    /* Event: Ticket Card */
    .rb-ticket-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .rb-ticket-card h4 {
        font-size: 16px !important;
    }

    /* Event: Price Summary Card */
    .price-summary-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .summary-title {
        font-size: 16px !important;
    }

    .price-row {
        font-size: 13px !important;
    }

    .price-row.total {
        font-size: 15px !important;
    }

    .price-row.total #summary-grand-total {
        font-size: 22px !important;
    }

    /* Event: Attendee Cards */
    .review-container div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 12px"] > div {
        padding: 10px !important;
    }
    /* --- USER DASHBOARD & PROFILE: Mobile --- */
    .user-dashboard-wrapper {
        flex-direction: column !important;
    }

    .user-sidebar-nav {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
        padding: 15px !important;
        border-right: none !important;
        border-bottom: 1.5px solid #f0f0f0 !important;
    }

    .user-profile-header {
        display: none !important;
    }

    .nav-menu-list {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 5px 0 !important;
        scrollbar-width: none !important;
    }

    .nav-menu-list::-webkit-scrollbar {
        display: none !important;
    }

    .nav-menu-list li {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .nav-menu-list a {
        padding: 10px 15px !important;
        font-size: 13px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }

    .nav-menu-list a.logout-btn {
        margin-top: 0 !important;
    }

    .user-main-content {
        padding: 20px 12px !important;
    }

    .dashboard-header {
        margin-bottom: 25px !important;
    }

    .dashboard-header h1 {
        font-size: 22px !important;
    }

    .content-card-box {
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }

    .form-section-head {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .avatar-upload-wrap {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
        gap: 15px !important;
    }

    .avatar-upload-wrap .current-avatar {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto !important;
    }

    .profile-input-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }

    .profile-input {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }

    .btn-save-profile {
        width: 100% !important;
        padding: 16px !important;
        font-size: 15px !important;
    }

    /* User Dashboard: Content Polish */
    .premium-table tr {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 16px !important;
    }

    .table-service-box {
        gap: 12px !important;
    }

    .table-service-img {
        width: 45px !important;
        height: 45px !important;
    }

    .table-service-info h4 {
        font-size: 14px !important;
    }

    /* Booking Details Refinement */
    .bd-status-bar {
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .bd-badge {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }

    .bd-hero-card {
        flex-direction: column !important;
        border-radius: 16px !important;
    }

    .bd-hero-img {
        width: 100% !important;
        height: 160px !important;
    }

    .bd-hero-body {
        padding: 15px !important;
    }

    .bd-hero-title {
        font-size: 18px !important;
    }

    .bd-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .bd-info-card {
        padding: 15px !important;
    }

    .bd-section {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .bd-section-title {
        font-size: 15px !important;
    }

    /* Wishlist Grid Fix */
    .wishlist-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .fav-card {
        border-radius: 16px !important;
    }

    .fav-img-wrap {
        height: 160px !important;
    }

    .fav-body {
        padding: 15px !important;
    }

    .fav-title {
        font-size: 16px !important;
    }

    /* Alerts in dashboard */
    div[style*="background: #e8f5e9"],
    div[style*="background: #ffebee"] {
        padding: 14px 16px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    /* --- MY BOOKINGS LIST: Small Mobile Refinements --- */
    .premium-table tr {
        padding: 14px !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
    }

    .premium-table td {
        font-size: 13px !important;
        padding: 10px 0 !important;
    }

    .premium-table td::before {
        font-size: 10px !important;
        margin-right: 8px !important;
    }

    .table-service-img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 10px !important;
    }

    .table-service-info h4 {
        font-size: 14px !important;
    }

    .booking-type-tag {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    .table-text-id {
        font-size: 12px !important;
    }

    .table-text-muted {
        font-size: 11px !important;
        margin-top: 2px !important;
    }

    .table-price {
        font-size: 15px !important;
    }

    .status-badge {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }

    .btn-view {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }

    .btn-view i {
        font-size: 12px !important;
    }

    /* Pagination smaller buttons on mobile */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .page-link {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Empty State Mobile */
    .content-card-box > div[style*="text-align: center"][style*="padding: 100px"] {
        padding: 50px 15px !important;
    }

    .content-card-box > div[style*="text-align: center"] i.fa-calendar-xmark {
        font-size: 48px !important;
    }

    .content-card-box > div[style*="text-align: center"] h3 {
        font-size: 18px !important;
    }

    /* =============================================================
       CUSTOM PACKAGE PAGE: Mobile (create_custom.blade.php)
       ============================================================= */

    /* Container */
    .booking-tabs-container {
        padding: 0 12px !important;
        margin: 20px auto !important;
    }

    .booking-tabs-container > .gd-breadcrumb {
        font-size: 11px !important;
        margin-bottom: 18px !important;
    }

    /* Sticky tabs reset for mobile header */
    .booking-tabs-header {
        top: 56px !important;
        border-radius: 12px !important;
        padding: 4px !important;
        margin-bottom: 22px !important;
    }

    .booking-tab-item {
        padding: 8px 14px !important;
        gap: 6px !important;
        border-radius: 10px !important;
    }

    .booking-tab-item i {
        font-size: 14px !important;
    }

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

    /* Premium search smaller items */
    .premium-search-wrapper .search-item {
        padding: 10px 14px !important;
        gap: 12px !important;
    }

    .search-item-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
    }

    .search-item-label {
        font-size: 11px !important;
    }

    .search-item-value,
    .search-input-mock {
        font-size: 14px !important;
    }

    .date-val-day {
        font-size: 16px !important;
    }

    .date-val-small {
        font-size: 12px !important;
    }

    .date-val-weekday {
        font-size: 10px !important;
    }

    #stay-duration-badge {
        bottom: -12px !important;
        font-size: 9px !important;
        padding: 2px 8px !important;
    }

    /* Booking-For radios → 1-col (existing rule already collapses; ensure padding) */
    .gd-section-card .meal-plan-list .book-for-item {
        flex: 1 1 100% !important;
        padding: 12px 16px !important;
    }

    .gd-section-card .meal-plan-list .book-for-item span {
        font-size: 13px !important;
    }

    /* Reset outer .guest-block grid for Custom Package
       (existing 715-721 rule sets it to 3-col grid for guest-details page;
       Custom Package uses inline-style inner grids that would otherwise be squeezed) */
    .booking-tabs-container .guest-block {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }

    /* Guest 4-col grid → 2-col on tiny phones */
    .booking-tabs-container .guest-block > div[style*="grid-template-columns: 100px 100px 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Primary contact 3-col → 1-col */
    .booking-tabs-container .guest-block > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .booking-tabs-container .gd-section-card {
        padding: 18px !important;
    }

    .booking-tabs-container .gd-section-title {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Tab page H1 */
    .booking-tab-content > h1 {
        font-size: 20px !important;
        margin-bottom: 18px !important;
    }

    /* Inline tab search */
    .search-input-field {
        height: 50px !important;
        font-size: 14px !important;
        padding: 0 50px 0 18px !important;
    }

    .search-icon-btn {
        right: 18px !important;
        font-size: 16px !important;
    }

    .search-container-box {
        margin-bottom: 22px !important;
    }

    /* Flights → 1 col */
    .flight-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .flight-card-image {
        height: 200px !important;
    }

    .flight-card-location {
        font-size: 17px !important;
    }

    .flight-card-time {
        font-size: 15px !important;
    }

    .flight-card-price {
        font-size: 20px !important;
    }

    .btn-select-flight-simple {
        padding: 8px 24px !important;
        font-size: 13px !important;
    }

    /* Hotel Wide Card mobile refinement */
    .hotel-main-img-wrap {
        height: 180px !important;
    }

    .hotel-thumb {
        height: 56px !important;
    }

    .hotel-name-title {
        font-size: 17px !important;
    }

    .hotel-rating-badge {
        font-size: 12px !important;
        gap: 4px !important;
    }

    .hotel-loc-text {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    .hotel-price-val > div {
        font-size: 18px !important;
    }

    .hotel-badge-item {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .hotel-extra-list {
        font-size: 12px !important;
        gap: 8px 14px !important;
        padding-top: 14px !important;
    }

    .btn-hotel-select {
        padding: 9px 24px !important;
        font-size: 13px !important;
    }

    /* Car Wide Card mobile */
    .car-img-wrap {
        height: 180px !important;
    }

    .car-name {
        font-size: 17px !important;
    }

    .car-desc {
        font-size: 12px !important;
    }

    .car-spec-item {
        font-size: 12px !important;
    }

    .car-price-val strong {
        font-size: 22px !important;
    }

    .btn-car-select {
        padding: 9px 22px !important;
        font-size: 13px !important;
    }

    .car-discount-badge {
        top: 14px !important;
        right: 14px !important;
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Boats → 1-col */
    .boat-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .boat-card-img-wrap {
        height: 200px !important;
    }

    .boat-card-body {
        padding: 14px 16px !important;
    }

    .boat-card-name {
        font-size: 16px !important;
    }

    .boat-card-desc {
        font-size: 12px !important;
    }

    .boat-card-specs {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .boat-spec-item {
        font-size: 11px !important;
    }

    .boat-price-val strong {
        font-size: 18px !important;
    }

    .btn-boat-select {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    /* Tab Footer Actions → stack with Next on top */
    .tab-footer-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        padding: 14px 0 !important;
    }

    .tab-footer-actions > div[style*="flex: 1"] {
        display: none !important;
    }

    .btn-tab-prev,
    .btn-tab-next {
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px !important;
    }

    /* Add Guest button full width */
    .add-guest-btn {
        width: 100% !important;
    }

    /* Custom popovers full viewport on mobile */
    .custom-popover {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
    }

    /* Empty state mobile */
    .empty-tab-state {
        padding: 40px 16px !important;
    }

    .empty-tab-state i {
        font-size: 40px !important;
    }

    .empty-tab-state p {
        font-size: 13px !important;
    }

    /* Pagination */
    .pagination-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .pg-btn,
    .pg-arrow {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* =============================================================
       FOOTER: Mobile
       ============================================================= */

    .footer {
        padding: 40px 20px 25px !important;
        border-radius: 30px 30px 0 0 !important;
        margin-top: 50px !important;
    }

    .footer-wrapper {
        gap: 28px !important;
    }

    .brand-logo-img {
        height: 38px !important;
    }

    .footer-left p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Right columns → 2-column grid (Company | Services / Support | Contact) */
    .footer-right {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 22px 18px !important;
    }

    .footer-column {
        flex: 1 1 calc(50% - 9px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 9px) !important;
    }

    .footer-column.footer-contact {
        flex: 1 1 calc(50% - 9px) !important;
        max-width: calc(50% - 9px) !important;
    }

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

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

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

    /* Social icons mobile */
    .footer-social {
        margin-top: 16px !important;
    }

    .social-title {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    .social-icons {
        gap: 8px !important;
    }

    .social-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    /* Contact items single col */
    .footer-contact .contact-info-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .contact-item i {
        font-size: 14px !important;
    }

    .contact-item strong {
        font-size: 11px !important;
    }

    .contact-item a {
        font-size: 11px !important;
    }

    /* Newsletter form stacks */
    .footer-newsletter {
        padding: 14px 16px !important;
        margin: 20px auto 0 !important;
        border-radius: 10px !important;
    }

    .newsletter-form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .newsletter-form input[type="email"] {
        width: 100% !important;
        padding: 11px 14px !important;
        font-size: 13px !important;
    }

    .newsletter-btn {
        width: 100% !important;
        padding: 11px !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

    /* Bottom bar */
    .footer-bottom {
        margin-top: 30px !important;
        padding-top: 14px !important;
        font-size: 12px !important;
    }
}