/* ============================================================
   MOBILE & TABLET OVERRIDE — NoviTrip
   Omio-Inspired · Clean · Professional
   Scope: max-width 992px ONLY — Desktop UNTOUCHED
   
   Strategy: ALL rules use !important + higher specificity 
   selectors to beat style.css @media (max-width: 768px) rules
   ============================================================ */

/* Hide mobile-only elements on desktop */
.mobile-only-nav { display: none; }
.mobile-header-account { display: none; }
.burger-menu { display: none; }

/* Hide mobile utility-nav slide-out on desktop */
.utility-nav { display: none; }

/* ************************************************************
   MOBILE + TABLET  ( ≤ 992px )
   ************************************************************ */

@media (max-width: 992px) {

/* — Tap highlight — */
* { -webkit-tap-highlight-color: transparent; }


/* =============================================================
   HEADER
   ============================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 56px !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: box-shadow 0.2s ease !important;
}

.site-header.scrolled {
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

.site-header .nav-container {
    max-width: 100% !important;
    padding: 0 16px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.site-header .logo img {
    height: 36px !important;
    width: auto !important;
    max-width: 140px !important;
}

/* Hide desktop nav — show burger + account icon */
.utility-nav {
    display: none !important;
}

/* Mobile header right actions: account + burger */
.site-header .nav-container {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Show account icon in header (outside nav) */
.mobile-header-account {
    display: block !important;
    color: #495057 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    order: 3 !important;
    flex-shrink: 0 !important;
}

.site-header .logo {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.burger-menu {
    display: block !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    order: 2 !important;
    z-index: 1001 !important;
    margin-left: auto !important;
}

.burger-menu:active {
    background: #f0f1f3 !important;
    border-radius: 8px !important;
}

.burger-menu .burger-bar {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #333 !important;
    margin: 5px 0 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    border-radius: 2px !important;
}

/* Old utility-nav / slide-in nav / overlay rules removed — 
   mobile-menu.js now handles the mobile slide-out menu */

/* Currency btn */
.currency-btn, #currencyBtn {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #f0f1f3 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    height: 30px !important;
}

/* Currency menu → inline expand in nav overlay
   (position:fixed broken by backdrop-filter on header) */
.currency-menu, #currencyMenu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-height: 50vh !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 #e8ecf0 !important;
    padding: 4px 0 !important;
    overflow-y: auto !important;
    background: #f9fafb !important;
    border: none !important;
    margin-top: 4px !important;
}

.currency-dropdown.active .currency-menu,
.currency-dropdown.active #currencyMenu {
    display: flex !important;
    flex-direction: column !important;
}

.currency-menu::before, #currencyMenu::before {
    display: none !important;
}

.currency-menu .currency-option, #currencyMenu .currency-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
}

.currency-menu .currency-option:active, #currencyMenu .currency-option:active {
    background: #f4f5f7 !important;
}


/* =============================================================
   HERO
   ============================================================= */

.hero {
    min-height: auto !important;
    height: auto !important;
    padding: 80px 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-attachment: scroll !important;
}

.hero-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.40) 0%,
        rgba(0,0,0,0.30) 50%,
        rgba(0,0,0,0.50) 100%
    ) !important;
}

.content-wrapper {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
}

main#mainContent {
    padding-top: 0 !important;
}

.hero .main-headline, .hero h1 {
    display: none !important;
}

.hero .subtitle, .hero p:not(.main-headline) {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.80) !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    padding: 0 20px !important;
}


/* =============================================================
   TAB NAVIGATION — pill tabs  
   ============================================================= */

.tab-navigation, .tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 16px 8px !important;
    margin: 0 0 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    scroll-snap-type: x mandatory !important;
}

.tab-navigation::-webkit-scrollbar, .tabs::-webkit-scrollbar {
    display: none !important;
}

/* Tab buttons — horizontal pills (NOT column) */
.tab-navigation .tab-btn,
.tabs .tab-btn,
.tab-button {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    max-height: 42px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-direction: row !important;
    scroll-snap-align: center !important;
}

.tab-navigation .tab-btn i, .tabs .tab-btn i {
    font-size: 14px !important;
    color: rgba(255,255,255,0.8) !important;
}

.tab-navigation .tab-btn span, .tabs .tab-btn span {
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: left !important;
}

.tab-navigation .tab-btn:active, .tabs .tab-btn:active {
    transform: scale(0.96) !important;
}

.tab-navigation .tab-btn.active, .tabs .tab-btn.active, .tab-button.active {
    background: #fff !important;
    color: #1a1a2e !important;
    border-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}

.tab-navigation .tab-btn.active i, .tabs .tab-btn.active i {
    color: #28a745 !important;
}


/* =============================================================
   SEARCH FORM — OMIO STYLE  
   
   CRITICAL: Must beat style.css @media(max-width:768px) which:
     • sets .form-group { flex-direction: column }
     • sets .swap-icon { display: none !important }
     • sets .input-icon { position: absolute; left:16px; bottom:14px }
     • sets .search-form-fields { overflow: hidden }
   
   Solution: Use HIGHER specificity (.search-form-fields .X) 
   + !important on everything
   ============================================================= */

/* ---- Form Card ---- */
form.search-form,
.search-form,
#searchForm {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 0 12px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
}

/* ---- Tab Content ---- */
.tab-content {
    display: none !important;
}

.tab-content.active {
    display: block !important;
}

/* ---- KILL FIELD SEPARATORS ---- */
/* Specificity: 0,2,0 + !important → beats style.css 0,1,0 + !important */
.search-form .field-separator,
.search-form-fields .field-separator,
.tab-content .field-separator {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex: 0 0 0px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* ---- Fields Container — flex wrap ---- */
/* Override style.css: flex-direction: column; overflow: hidden */
.search-form .search-form-fields,
.tab-content .search-form-fields,
#searchForm .search-form-fields {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;      /* CRITICAL: override hidden */
    border: none !important;
}


/* ---- Form Group (base): full-width row, horizontal flex ---- */
/* Override style.css: flex-direction: column */
.search-form .search-form-fields .form-group,
.tab-content .search-form-fields .form-group,
.search-form .form-group,
.tab-content .form-group,
#transport-content .form-group,
#car-rental-content .form-group,
#tours-content .form-group,
#hotels-content .form-group,
#services-content .form-group {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;            /* CRITICAL: override style.css min-width:100% */
    display: flex !important;
    flex-direction: row !important;     /* CRITICAL: override column */
    align-items: center !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e8ecf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    transition: background 0.15s ease !important;
}

.search-form .search-form-fields .form-group:focus-within,
.tab-content .search-form-fields .form-group:focus-within,
#transport-content .form-group:focus-within,
#car-rental-content .form-group:focus-within,
#tours-content .form-group:focus-within,
#hotels-content .form-group:focus-within,
#services-content .form-group:focus-within {
    background: #f8fafc !important;
}

/* Last form-group — no bottom border */
.search-form .search-form-fields .form-group:last-of-type,
.tab-content .search-form-fields .form-group:last-of-type,
#transport-content .form-group:last-of-type,
#car-rental-content .form-group:last-of-type,
#tours-content .form-group:last-of-type,
#hotels-content .form-group:last-of-type,
#services-content .form-group:last-of-type {
    border-bottom: none !important;
}


/* ---- Input Icons — IN flex flow (not absolute) ---- */
/* Override style.css: position: absolute; left:16px; bottom:14px */
.search-form .search-form-fields .input-icon,
.search-form .search-form-fields .form-group .input-icon,
.tab-content .search-form-fields .input-icon,
.tab-content .search-form-fields .form-group .input-icon,
.search-form .form-group .input-icon,
.tab-content .form-group .input-icon {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: #64748b !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}


/* ---- Inputs & Selects ---- */
.search-form .search-form-fields .form-group input,
.search-form .search-form-fields .form-group select,
.tab-content .search-form-fields .form-group input,
.tab-content .search-form-fields .form-group select {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 16px 0 !important;
    padding-left: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    background: transparent !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.search-form .search-form-fields .form-group input::placeholder,
.tab-content .search-form-fields .form-group input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* ---- Field Labels (car rental etc) ---- */
.search-form-fields .field-label,
.tab-content .field-label {
    position: absolute !important;
    top: 5px !important;
    left: 44px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    pointer-events: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

/* If field-label present, adjust input padding */
.search-form-fields .field-label ~ input,
.search-form-fields .field-label ~ select,
.tab-content .field-label ~ input,
.tab-content .field-label ~ select {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

/* sr-only */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}


/* =============================================================
   TRANSPORT TAB — SWAP ICON
   ============================================================= */

/* CRITICAL: .swap-icon must override style.css:
   ".field-separator, .swap-icon { display: none !important; }"
   style.css specificity = 0,1,0 with !important
   Our specificity = 0,2,0 with !important → WE WIN */

.search-form-fields .swap-icon,
.search-form .search-form-fields .swap-icon,
.tab-content .search-form-fields .swap-icon,
#transport-content .search-form-fields .swap-icon {
    display: flex !important;
    position: absolute !important;
    right: 12px !important;
    top: 36px !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    background: #fff !important;
    border: 1.5px solid #e8ecf0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: none !important;
    transform: rotate(90deg) !important;
    transition: all 0.2s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.search-form-fields .swap-icon:active {
    background: #e8f5e9 !important;
    border-color: #28a745 !important;
    transform: rotate(90deg) scale(0.9) !important;
}

.search-form-fields .swap-icon i {
    font-size: 12px !important;
    color: #64748b !important;
}

/* Origin: extra right padding for the swap button */
.search-form-fields .form-group-origin,
.search-form .form-group-origin,
#transport-content .form-group-origin {
    padding-right: 56px !important;
}

/* ----- Date (left 50%) + Return Link (right 50%) — split row ----- */
.search-form .form-group-date,
.search-form-fields .form-group-date,
#transport-content .form-group-date {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
    float: none !important;
}

.search-form .form-group-return-link,
.search-form-fields .form-group-return-link,
#transport-content .form-group-return-link,
#addReturnLinkContainer {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    float: none !important;
    justify-content: center !important;
    padding-left: 12px !important;
}

.form-group-return-link::before,
#addReturnLinkContainer::before {
    display: none !important;
    content: none !important;
}

.form-group-return-link .add-return-link, .add-return-link {
    color: #28a745 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: normal !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.add-return-link i {
    color: #28a745 !important;
    margin-right: 4px !important;
}

/* Return date input — hidden by default, shown via .visible class */
#transport-content #returnDateInputGroup,
.search-form #returnDateInputGroup,
.tab-content #returnDateInputGroup,
#returnDateInputGroupTrips,
.search-form #returnDateInputGroupTrips {
    display: none !important;
}
#transport-content #returnDateInputGroup.visible,
.search-form #returnDateInputGroup.visible,
.tab-content #returnDateInputGroup.visible,
#returnDateInputGroupTrips.visible,
.search-form #returnDateInputGroupTrips.visible {
    display: flex !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}
.search-form .form-group-return-date-input,
.search-form-fields .form-group-return-date-input {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}


/* =============================================================
   CAR RENTAL TAB
   ============================================================= */

/* Pickup date (left) + Pickup time (right) */
.search-form .form-group-pickup-date,
.search-form-fields .form-group-pickup-date,
#car-rental-content .form-group-pickup-date {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
}

.search-form .form-group-pickup-time,
.search-form-fields .form-group-pickup-time,
#car-rental-content .form-group-pickup-time {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}

/* Dropoff date (left) + Dropoff time (right) */
.search-form .form-group-dropoff-date,
.search-form-fields .form-group-dropoff-date,
#car-rental-content .form-group-dropoff-date {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
}

.search-form .form-group-dropoff-time,
.search-form-fields .form-group-dropoff-time,
#car-rental-content .form-group-dropoff-time {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}

/* Dropoff checkbox */
.dropoff-checkbox-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
}

.dropoff-checkbox {
    accent-color: #28a745 !important;
    width: 18px !important; height: 18px !important;
}

.dropoff-checkbox-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
}


/* =============================================================
   TOURS TAB
   ============================================================= */

/* Destination (left) + Tour Type (right) */
.search-form .tour-destination-group,
.search-form-fields .tour-destination-group,
#tours-content .tour-destination-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
}

.search-form .tour-type-group,
.search-form-fields .tour-type-group,
#tours-content .tour-type-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}


/* =============================================================
   HOTELS TAB
   ============================================================= */

/* Check-in/out (left) + Rooms/Guests (right) */
.search-form .checkin-checkout-group,
.search-form-fields .checkin-checkout-group,
#hotels-content .checkin-checkout-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
}

.search-form .rooms-guests-group,
.search-form-fields .rooms-guests-group,
#hotels-content .rooms-guests-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}

/* Rooms-Guests selector */
.rooms-guests-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 16px 0 !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
}

.rooms-guests-display {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =============================================================
   SERVICES TAB
   ============================================================= */

/* Location (left) + Date (right) */
.search-form .service-location-group,
.search-form-fields .service-location-group,
#services-content .service-location-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    border-right: 1px solid #e8ecf0 !important;
}

.search-form .service-date-group,
.search-form-fields .service-date-group,
#services-content .service-date-group {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
}

/* Service type container */
.service-type-dropdown-container {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
}

.service-type-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    padding: 16px 0 !important;
}

.service-type-display {
    color: #94a3b8 !important;
}

.service-type-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    z-index: 9999 !important;
    border: 1px solid #e8ecf0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.service-type-dropdown .service-categories {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 8px !important;
}

.service-category-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
}

.service-category-item:active {
    background: #f4f5f7 !important;
}

.service-category-item i {
    font-size: 16px !important;
    color: #28a745 !important;
    width: 24px !important;
    text-align: center !important;
}


/* =============================================================
   SEARCH BUTTON — Full-width green CTA
   ============================================================= */

/* Override style.css blue gradient → green flat */
.search-form .search-form-fields .btn-search-main,
.search-form .btn-search-main,
.search-form-fields .btn-search-main,
.tab-content .btn-search-main,
#searchForm .btn-search-main,
.btn-search-main,
.cta-button {
    flex: 0 0 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    height: 50px !important;
    margin: 10px 16px 16px !important;
    border-radius: 10px !important;
    background: #28a745 !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
    letter-spacing: 0.01em !important;
    transition: background 0.2s ease !important;
    min-height: auto !important;
    float: none !important;
}

.btn-search-main:active, .cta-button:active {
    background: #1e8e3a !important;
    transform: scale(0.98) !important;
}


/* =============================================================
   DROPDOWNS — Bottom sheets
   ============================================================= */

/* Passenger Dropdown */
.passenger-dropdown {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 70vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10) !important;
    z-index: 10005 !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    animation: mSlideUp 0.25s cubic-bezier(0.32,0.72,0,1) !important;
}

@keyframes mSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.passenger-dropdown .done-btn {
    background: #28a745 !important;
    border-radius: 10px !important;
    height: 46px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100% !important;
    border: none !important;
    color: #fff !important;
    margin-top: 12px !important;
    cursor: pointer !important;
}

/* Rooms/Guests Dropdown */
.rooms-guests-dropdown {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10) !important;
    z-index: 10005 !important;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    animation: mSlideUp 0.25s cubic-bezier(0.32,0.72,0,1) !important;
}

/* Suggestions Dropdown */
.suggestions-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: -16px !important;
    right: -16px !important;
    width: auto !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    border: 1px solid #e8ecf0 !important;
    z-index: 9999 !important;
    padding: 4px 0 !important;
}

.suggestion-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

.suggestion-item:active {
    background: #f4f5f7 !important;
}


/* =============================================================
   CONTENT SECTIONS & CARDS
   ============================================================= */

.content-category {
    padding: 28px 0 !important;
    background: #f8f9fb !important;
}

.content-category .section-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.content-category h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    padding: 0 16px !important;
}

/* Horizontal scroll cards — single card per screen */
.card-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
    position: relative !important;
}

.card-grid::-webkit-scrollbar { display: none !important; }

.card-style-a, .card-style-b {
    flex: 0 0 auto !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    min-width: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    scroll-snap-align: center !important;
    border: 1px solid #e8ecf0 !important;
    margin-right: 0 !important;
    background: #fff !important;
}

.card-style-a:active, .card-style-b:active {
    transform: scale(0.98) !important;
}

.card-style-a .card-image-container img {
    height: 150px !important;
    border-radius: 0 !important;
}

.card-style-a .card-content {
    padding: 12px !important;
}

.card-style-a .card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.card-style-a .card-subtitle {
    font-size: 12px !important;
    color: #64748b !important;
}

.card-style-a .image-overlay-tag {
    top: 8px !important; left: 8px !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.card-style-b img {
    height: 180px !important;
    border-radius: 0 !important;
}

.card-style-b .card-text-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%) !important;
    padding: 30px 14px 14px !important;
}

.card-style-b .card-title-overlay {
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* =============================================================
   POPULAR ROUTES
   ============================================================= */

.popular-routes-section {
    padding: 28px 0 !important;
    background: #f8f9fb !important;
}

.popular-routes-section .container {
    max-width: 100% !important;
    padding: 0 !important;
}

.popular-routes-section .section-header-modern {
    margin-bottom: 12px !important;
    text-align: center !important;
    padding: 0 16px !important;
}

.popular-routes-section .section-title-modern {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

.popular-routes-section .section-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.popular-routes-section .section-badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
}

.popular-routes-section .routes-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 9vw 8px !important;
    margin-bottom: 16px !important;
    grid-template-columns: none !important;
}

.popular-routes-section .routes-grid::-webkit-scrollbar { display: none !important; }

.popular-routes-section .route-card {
    flex: 0 0 auto !important;
    width: 82vw !important;
    max-width: none !important;
    scroll-snap-align: center !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border: 1px solid #e8ecf0 !important;
}

.popular-routes-section .route-image {
    height: 130px !important;
}

.popular-routes-section .route-content {
    padding: 12px !important;
}

.popular-routes-section .route-city-name {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.popular-routes-section .route-info {
    font-size: 11px !important;
}

.popular-routes-section .routes-cta {
    padding: 0 16px !important;
}

.popular-routes-section .btn-explore-routes {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
}


/* =============================================================
   SHARING EXPERIENCES
   ============================================================= */

.sharing-experiences-section {
    padding: 28px 0 !important;
    background: #f8f9fb !important;
}

.sharing-experiences-section .sharing-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    text-align: left !important;
    padding: 0 16px !important;
    margin-bottom: 4px !important;
}

.sharing-experiences-section .sharing-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    text-align: left !important;
    padding: 0 16px !important;
    margin-bottom: 14px !important;
}

.sharing-experiences-section .carousel-arrow {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
}

.sharing-experiences-section .sharing-cta-buttons {
    padding: 0 16px !important;
    gap: 10px !important;
}

.sharing-experiences-section .sharing-cta-primary {
    background: #28a745 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.sharing-experiences-section .sharing-cta-secondary {
    border-radius: 10px !important;
    font-size: 14px !important;
}


/* =============================================================
   eSIM
   ============================================================= */

.esim-section {
    padding: 28px 16px !important;
    background: #f8f9fb !important;
}

.esim-section .esim-content {
    border-radius: 16px !important;
    padding: 20px !important;
    gap: 16px !important;
    border: 1px solid #e8ecf0 !important;
}

.esim-section .esim-content:hover {
    transform: none !important;
}

.esim-section .esim-text h2 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

.esim-section .esim-text p {
    font-size: 14px !important;
    color: #64748b !important;
}

.esim-section .esim-button {
    background: #28a745 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.esim-section .esim-icon {
    width: 80px !important; height: 80px !important;
}


/* =============================================================
   SUBSCRIBE
   ============================================================= */

.subscribe-animated-section {
    padding: 28px 16px !important;
}

.subscribe-animated-section .subscribe-title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

.subscribe-animated-section .subscribe-subtitle {
    font-size: 14px !important;
}


/* =============================================================
   FOOTER
   ============================================================= */

.site-footer-main {
    background: #1a1a2e !important;
    color: #9ca3af !important;
    padding: 28px 16px 0 !important;
    font-size: 14px !important;
}

.footer-container {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
}

.footer-column {
    flex-basis: 100% !important;
    text-align: center !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    margin-bottom: 0 !important;
    min-width: auto !important;
}

.footer-column:last-child {
    border-bottom: none !important;
}

.footer-column h4 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.footer-column h4::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    background: #28a745 !important;
}

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

.footer-column .social-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
}

.footer-column .social-icons a {
    width: 38px !important; height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

.footer-column .payment-icons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.footer-bottom {
    text-align: center !important;
    padding: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 12px !important;
    color: #6b7280 !important;
}


/* =============================================================
   MODALS & MISC
   ============================================================= */

.abandoned-booking-card {
    margin: 12px !important;
    border-radius: 16px !important;
}

#shareTripModal .modal-content, .modal-content {
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    animation: mSlideUp 0.3s cubic-bezier(0.32,0.72,0,1) !important;
}

.toast-notification {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important; right: 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    z-index: 99999 !important;
}


} /* ===== END @media (max-width: 992px) ===== */



/* ************************************************************
   TABLET ONLY ( 768px – 992px )
   ************************************************************ */

@media (min-width: 768px) and (max-width: 992px) {

    /* Search form centered + wider */
    .search-form, #searchForm {
        width: 100% !important;
        max-width: 540px !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
    }

    /* Hero bigger */
    .hero .main-headline, .hero h1 {
        font-size: 2rem !important;
    }

    /* Cards wider */
    .card-style-a, .card-style-b {
        width: 42vw !important;
        max-width: 260px !important;
    }

    .card-grid {
        padding: 0 24px 10px !important;
    }

    /* Content padding */
    .content-category {
        padding: 32px 24px !important;
    }

    .content-category h2 {
        font-size: 1.4rem !important;
        padding: 0 !important;
    }

    /* Currency dropdown — same inline approach as phone */
    .currency-menu, #currencyMenu {
        position: static !important;
        width: 100% !important;
        max-height: 50vh !important;
        border-radius: 12px !important;
    }

    .currency-menu::before, #currencyMenu::before {
        display: none !important;
    }

    /* Dropdowns positioned (not bottom sheet) */
    .passenger-dropdown {
        position: absolute !important;
        bottom: auto !important;
        left: 0 !important;
        top: calc(100% + 5px) !important;
        width: 310px !important;
        border-radius: 10px !important;
        animation: none !important;
        padding: 15px !important;
    }

    .rooms-guests-dropdown {
        position: absolute !important;
        bottom: auto !important;
        left: 0 !important;
        top: calc(100% + 5px) !important;
        width: 310px !important;
        border-radius: 10px !important;
        animation: none !important;
        padding: 15px !important;
    }

    /* Routes grid on tablet */
    .popular-routes-section .routes-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        overflow: visible !important;
        padding: 0 24px 8px !important;
    }

    .popular-routes-section .route-card {
        width: auto !important;
        max-width: none !important;
    }

    .popular-routes-section .section-header-modern {
        text-align: center !important;
    }

    .popular-routes-section .btn-explore-routes {
        width: auto !important;
    }

    /* Footer 2-col */
    .footer-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .footer-column {
        flex-basis: calc(50% - 8px) !important;
        text-align: left !important;
        border-bottom: none !important;
    }

    .footer-column h4::after {
        left: 0 !important;
        transform: none !important;
    }

    .footer-column .social-icons,
    .footer-column .payment-icons {
        justify-content: flex-start !important;
    }
}



/* ************************************************************
   SMALL MOBILE ( ≤ 380px )
   ************************************************************ */

@media (max-width: 380px) {
    .hero .main-headline, .hero h1 {
        font-size: 1.25rem !important;
    }

    .tab-navigation .tab-btn, .tabs .tab-btn {
        padding: 7px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }

    .search-form, #searchForm {
        width: calc(100% - 16px) !important;
        margin: 0 8px !important;
    }

    .card-style-a, .card-style-b {
        width: 78vw !important;
    }

    .popular-routes-section .route-card {
        width: 78vw !important;
    }
}



/* ************************************************************
   SWIPE HAND ANIMATION — shows on first card section visit
   ************************************************************ */

@keyframes swipeHandSlide {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateX(30px); }
    10%  { opacity: 0.7; transform: translate(-50%, -50%) translateX(30px); }
    50%  { opacity: 0.7; transform: translate(-50%, -50%) translateX(-30px); }
    70%  { opacity: 0.5; transform: translate(-50%, -50%) translateX(10px); }
    90%  { opacity: 0.3; transform: translate(-50%, -50%) translateX(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateX(0); }
}

.card-grid .swipe-hint {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    animation: swipeHandSlide 2.2s ease-in-out 0.8s 2 forwards !important;
}

.card-grid .swipe-hint .hand-icon {
    width: 40px !important;
    height: 40px !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)) !important;
}

.card-grid .swipe-hint .swipe-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
    letter-spacing: 0.5px !important;
}

.card-grid.swiped .swipe-hint {
    display: none !important;
}


/* ************************************************************
   ACCESSIBILITY
   ************************************************************ */

@media (max-width: 992px) {
    :focus-visible {
        outline: 2px solid #28a745 !important;
        outline-offset: 2px !important;
    }
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ************************************************************
   AIRPORT TRANSFERS TAB — MOBILE OVERRIDES
   Must override the generic #services-content .form-group rules
   ************************************************************ */

@media (max-width: 992px) {

/* Override the generic form-group styling for transfers */
#services-content .transfers-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Transfers toggle row */
#services-content .transfers-toggle-row {
    display: flex !important;
    gap: 8px !important;
    flex: none !important;
    width: auto !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
}

/* Transfers locations row */
#services-content .transfers-locations-row {
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* Form groups inside locations row */
#services-content .transfers-locations-row .form-group {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-right: none !important;
    min-height: 50px !important;
    background: transparent !important;
    border-radius: 0 !important;
}

#services-content .transfers-locations-row .form-group:last-of-type {
    border-bottom: none !important;
}

/* Swap button between stacked inputs */
#services-content .transfers-swap-btn {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) rotate(90deg) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    z-index: 10 !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
}

/* Details row — 2 cols on mobile */
#services-content .transfers-details-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    flex: none !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
}

/* Form groups inside details row */
#services-content .transfers-details-row .form-group {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    min-height: 50px !important;
}

/* DateTime merged group */
#services-content .transfers-datetime-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

#services-content .transfers-datetime-group #transfer-date {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
}

#services-content .transfers-datetime-group #transfer-time {
    width: auto !important;
    min-width: 55px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    padding-right: 4px !important;
}

#services-content .transfers-datetime-group .datetime-separator {
    width: 1px !important;
    height: 20px !important;
    background: #d1d5db !important;
    margin: 0 6px !important;
    flex-shrink: 0 !important;
}

#services-content .transfers-datetime-group .input-icon {
    font-size: 14px !important;
    margin-right: 6px !important;
}

#services-content .transfers-passengers-group {
    /* same row as datetime */
}

/* Pax selector — let it flex after the icon */
#services-content .transfers-pax-selector {
    flex: 1 1 auto !important;
    padding-left: 28px !important;
    min-width: 0 !important;
}

/* Search button — consistent blue gradient like other tabs */
#services-content .transfers-search-btn {
    flex: none !important;
    width: 100% !important;
    margin: 4px 0 8px !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

    @media (max-width: 480px) {
        #services-content .transfers-details-row {
            grid-template-columns: 1fr !important;
        }
        #services-content .transfers-passengers-group {
            grid-column: auto !important;
        }
    }

} /* ===== END Airport Transfers mobile overrides @media ===== */