/* ============================================================
   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 nav on desktop */
.mobile-only-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: 28px !important;
    width: auto !important;
}

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

.burger-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.burger-menu:active {
    background: #f0f1f3 !important;
}

.burger-menu .burger-bar {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #1a1a2e !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* Burger → X */
.site-header.nav-active {
    z-index: 10001 !important;
}

.site-header.nav-active .burger-menu .burger-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}
.site-header.nav-active .burger-menu .burger-bar:nth-child(2) {
    opacity: 0 !important;
}
.site-header.nav-active .burger-menu .burger-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
}

/* Slide-in Nav */
.site-header.nav-active .utility-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important;
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #fff !important;
    z-index: 10000 !important;
    flex-direction: column !important;
    padding: 80px 0 16px !important;
    box-shadow: -6px 0 20px rgba(0,0,0,0.08) !important;
    overflow-y: auto !important;
    animation: mSlideIn 0.25s cubic-bezier(0.32,0.72,0,1) !important;
}

@keyframes mSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.site-header.nav-active .utility-nav a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f5f7 !important;
}

.site-header.nav-active .utility-nav a:active {
    background: #f4f5f7 !important;
}

/* Mobile-only navigation section */
.mobile-nav-section {
    display: flex !important;
    flex-direction: column !important;
}

.mobile-nav-header {
    padding: 0 24px 12px !important;
    margin-bottom: 4px !important;
}

.mobile-nav-logo {
    height: 24px !important;
    width: auto !important;
    opacity: 0.8 !important;
}

.site-header.nav-active .utility-nav a.mobile-nav-active {
    color: #28a745 !important;
    font-weight: 600 !important;
    background: rgba(40, 167, 69, 0.06) !important;
}

.site-header.nav-active .utility-nav a i {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #6b7280 !important;
}

.site-header.nav-active .utility-nav a.mobile-nav-active i {
    color: #28a745 !important;
}

.mobile-nav-divider {
    height: 1px !important;
    background: #e8ecf0 !important;
    margin: 8px 24px !important;
}

/* Overlay */
.nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.3) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.site-header.nav-active + .nav-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 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 → bottom-sheet */
.currency-menu, #currencyMenu {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 55vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10) !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: none !important;
}

.currency-menu::before, #currencyMenu::before {
    content: '' !important;
    display: block !important;
    width: 36px !important; height: 4px !important;
    background: #d0d5dd !important;
    border-radius: 2px !important;
    margin: 4px auto 12px !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 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-align: center !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    padding: 0 16px !important;
    font-style: italic !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: 6px !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: center !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !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: 8px 14px !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: 36px !important;
    max-height: 40px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-direction: row !important;          /* override column from style.css */
}

.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;
}

.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;
}

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

/* Return date input (when visible) */
.search-form .form-group-return-date-input,
.search-form-fields .form-group-return-date-input,
#returnDateInputGroup {
    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 positioned */
    .currency-menu, #currencyMenu {
        position: absolute !important;
        bottom: auto !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: 240px !important;
        border-radius: 10px !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;
    }
}