/* ═══════════════════════════════════════════════════════════════
   TheBookFlight — Mobile App Shell CSS
   Transforms the web experience into a native app feel
   Breakpoint: ≤768px | Safe for WebView wrapping
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (App-specific) ── */
:root {
  --app-nav-height: 60px;
  --app-tab-height: 56px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-gutter: 16px;
  --app-radius: 16px;
  --app-radius-sm: 10px;
  --app-bg: #0B1220;
  --app-surface: rgba(255,255,255,0.04);
  --app-surface-raised: rgba(255,255,255,0.07);
  --app-border: rgba(255,255,255,0.06);
  --app-primary: #D0021B;
  --app-primary-glow: rgba(208,2,27,0.25);
  --app-text: #f8fafc;
  --app-text-dim: #94a3b8;
  --app-text-muted: #64748b;
  --app-success: #10b981;
  --app-transition: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 768px) {

  /* ═══════════════════════════════════
     1. GLOBAL APP FEEL
  ═══════════════════════════════════ */

  /* System font stack for native feel */
  html {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }

  body {
    font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: contain; /* Prevents pull-to-refresh bounce on inner scroll */
    padding-top: calc(var(--app-nav-height) + var(--app-safe-top)) !important;
    padding-bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 64px) !important;
    background: var(--app-bg) !important;
  }

  /* Remove scrollbar (app feel) */
  ::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none; }

  /* Touch targets — Apple HIG 44px minimum */
  button, a, input, select, textarea, [role="button"] {
    min-height: 44px;
  }

  /* Input zoom prevention (16px minimum on iOS) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ═══════════════════════════════════
     2. APP HEADER (Compact)
  ═══════════════════════════════════ */

  /* Kill the announcement banner on mobile — wastes viewport */
  #tbfNoticeBanner {
    display: none !important;
  }

  .tbf-topbar {
    display: none !important;
  }

  .tbf-header {
    top: 0 !important;
    height: var(--app-nav-height) !important;
    padding-top: var(--app-safe-top);
    background: rgba(11, 18, 32, 0.96) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: none !important;
  }

  .tbf-navbar {
    height: 100% !important;
    padding: 0 var(--app-gutter) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Centered logo — app style */
  .tbf-navbar > .tbf-brand {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
  }

  .tbf-brand img {
    height: 28px !important;
  }

  /* Hide desktop nav items */
  .tbf-nav,
  .primary-cta,
  #desktopLoginBtn_nav,
  #userAccountBtn_nav {
    display: none !important;
  }

  /* Hamburger / mobile toggle */
  .tbf-mobile-toggle {
    display: flex !important;
    position: absolute;
    right: var(--app-gutter);
    background: none;
    border: none;
    color: var(--app-text);
    font-size: 22px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: background 0.2s;
  }

  .tbf-mobile-toggle:active {
    background: var(--app-surface);
  }

  /* ═══════════════════════════════════
     3. BOTTOM TAB BAR (iOS-style)
  ═══════════════════════════════════ */

  .tbf-mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--app-tab-height) + var(--app-safe-bottom)) !important;
    padding-bottom: var(--app-safe-bottom) !important;
    background: rgba(11, 18, 32, 0.97) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 0.5px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.03), 0 -8px 32px rgba(0,0,0,0.3) !important;
    z-index: 9990 !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    transition: transform 0.35s var(--app-transition) !important;
  }

  /* Auto-hide on scroll */
  .tbf-mobile-bottom-nav.nav-hidden {
    transform: translateY(100%) !important;
  }

  .tbf-mobile-bottom-nav .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: var(--app-text-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    flex: 1 !important;
    gap: 2px !important;
    padding: 4px 0 !important;
    position: relative !important;
    transition: color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .tbf-mobile-bottom-nav .nav-item .icon {
    font-size: 22px !important;
    line-height: 1 !important;
    transition: transform 0.25s var(--app-transition) !important;
  }

  .tbf-mobile-bottom-nav .nav-item .label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  /* Active state — colored icon + dot indicator */
  .tbf-mobile-bottom-nav .nav-item.active {
    color: var(--app-primary) !important;
  }

  .tbf-mobile-bottom-nav .nav-item.active .icon {
    transform: scale(1.08) !important;
  }

  .tbf-mobile-bottom-nav .nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: var(--app-primary) !important;
  }

  /* Tap feedback */
  .tbf-mobile-bottom-nav .nav-item:active .icon {
    transform: scale(0.88) !important;
  }

  /* ═══════════════════════════════════
     4. STICKY CTA BAR (Redesigned)
  ═══════════════════════════════════ */

  .tbf-sticky-cta {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom)) !important;
    height: auto !important;
    padding: 8px var(--app-gutter) 10px !important;
    background: linear-gradient(to top, var(--app-bg) 60%, transparent) !important;
    z-index: 9989 !important;
    pointer-events: none !important;
    transition: bottom 0.35s var(--app-transition) !important;
  }

  /* When nav is hidden, CTA drops to bottom */
  .tbf-mobile-bottom-nav.nav-hidden ~ .tbf-sticky-cta {
    bottom: 0 !important;
  }

  .tbf-sticky-cta .cta-btn {
    pointer-events: all !important;
    width: 100% !important;
    padding: 14px 24px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--app-primary), #e8002a) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px var(--app-primary-glow), 0 1px 3px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  .tbf-sticky-cta .cta-btn:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 12px var(--app-primary-glow) !important;
  }

  /* ═══════════════════════════════════
     5. SUPPORT DOCK (Redesigned)
  ═══════════════════════════════════ */

  .tbf-support-dock {
    display: none !important; /* Hide floating support — it's in the tab bar now */
  }

  /* Also hide the Tawk.to / chatbot widget on mobile */
  #tbf-chatbot-widget,
  .tawk-min-container {
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 60px) !important;
  }

  /* ═══════════════════════════════════
     6. BOTTOM SHEET COMPONENT
  ═══════════════════════════════════ */

  .app-bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .app-bottom-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .app-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #111827;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.4s var(--app-transition);
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: var(--app-safe-bottom);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  }

  .app-bottom-sheet.active {
    transform: translateY(0);
  }

  .app-bottom-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    margin: 10px auto 0;
  }

  .app-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--app-border);
  }

  .app-bottom-sheet-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
  }

  .app-bottom-sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-surface);
    border: none;
    color: var(--app-text-dim);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .app-bottom-sheet-body {
    padding: 16px 20px;
  }

  /* ═══════════════════════════════════
     7. APP CARDS (Universal)
  ═══════════════════════════════════ */

  .app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: var(--app-gutter);
    margin-bottom: 12px;
  }

  .app-card-interactive {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .app-card-interactive:active {
    transform: scale(0.98);
    box-shadow: 0 0 0 2px var(--app-primary-glow);
  }

  /* ═══════════════════════════════════
     8. HORIZONTAL CAROUSEL (Snap Scroll)
  ═══════════════════════════════════ */

  .app-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--app-gutter) 16px;
    margin: 0 calc(var(--app-gutter) * -1);
  }

  .app-carousel > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .app-carousel::-webkit-scrollbar { display: none; }

  /* ═══════════════════════════════════
     9. HOMEPAGE SECTIONS
  ═══════════════════════════════════ */

  /* Hero / Promo Banner */
  .hp-offer-banner {
    margin: 0 var(--app-gutter) 16px !important;
    border-radius: var(--app-radius) !important;
  }

  /* Search Form Container */
  .hp-search-glass,
  .hp-search-standalone {
    margin: 0 var(--app-gutter) !important;
    border-radius: var(--app-radius) !important;
    padding: 16px !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface-raised) !important;
  }

  /* Quick Action Grid (below search) */
  .app-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px var(--app-gutter) 8px;
  }

  .app-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--app-text);
  }

  .app-quick-action__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.2s;
  }

  .app-quick-action__icon:active {
    transform: scale(0.9);
  }

  .app-quick-action__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--app-text-dim);
    text-align: center;
  }

  /* Section headers */
  .hp-section__header {
    padding: 0 var(--app-gutter) !important;
    margin-bottom: 16px !important;
  }

  .hp-section__header h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .hp-section__header p {
    font-size: 13px !important;
    color: var(--app-text-dim) !important;
  }

  /* Route cards — horizontal carousel */
  .hp-routes__grid,
  .hp-routes-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 var(--app-gutter) 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hp-routes__grid::-webkit-scrollbar,
  .hp-routes-grid::-webkit-scrollbar { display: none; }

  .hp-route__card,
  .hp-route-card {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    width: 280px !important;
    border-radius: var(--app-radius) !important;
  }

  /* Destination cards — 2-column grid */
  .hp-destinations__scroll,
  .hp-destinations-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 var(--app-gutter) !important;
    overflow-x: visible !important;
  }

  .hp-dest__card,
  .hp-dest-card {
    width: auto !important;
    border-radius: var(--app-radius) !important;
  }

  /* Feature cards */
  .hp-features__grid,
  .hp-features-grid,
  .hp-trust__grid,
  .hp-trust-grid {
    padding: 0 var(--app-gutter) !important;
    gap: 10px !important;
  }

  /* Testimonials — swipeable */
  .hp-testimonials__grid,
  .hp-testimonials-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 var(--app-gutter) 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hp-testimonials__grid::-webkit-scrollbar,
  .hp-testimonials-grid::-webkit-scrollbar { display: none; }

  .hp-testimonial__card,
  .hp-testimonial-card {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    width: calc(100vw - 48px) !important;
    border-radius: var(--app-radius) !important;
  }

  /* Holiday grid — single column on mobile */
  .hp-holiday-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 var(--app-gutter) !important;
  }

  .hp-holiday-hero {
    border-radius: var(--app-radius) !important;
  }

  .hp-holiday-card {
    border-radius: var(--app-radius) !important;
  }

  /* FAQ Section */
  .hp-faq__list,
  .hp-faq-list {
    padding: 0 var(--app-gutter) !important;
  }

  .hp-faq__item,
  .hp-faq-item {
    border-radius: var(--app-radius-sm) !important;
    margin-bottom: 8px !important;
  }

  /* ═══════════════════════════════════
     10. SEARCH RESULTS PAGE
  ═══════════════════════════════════ */

  /* Filter chip bar */
  .app-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px var(--app-gutter);
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: var(--app-nav-height);
    z-index: 100;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
  }

  .app-filter-chips::-webkit-scrollbar { display: none; }

  .app-filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-text-dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
  }

  .app-filter-chip.active,
  .app-filter-chip:active {
    background: rgba(208,2,27,0.12);
    border-color: var(--app-primary);
    color: var(--app-primary);
  }

  /* Flight cards — compact */
  .sr-flight-card {
    margin: 0 var(--app-gutter) 10px !important;
    border-radius: var(--app-radius) !important;
    padding: 14px !important;
  }

  /* Sort tabs */
  .sr-sort-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    padding: 0 var(--app-gutter) !important;
  }

  .sr-sort-tabs::-webkit-scrollbar { display: none; }

  /* Price calendar strip */
  .sr-date-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 var(--app-gutter) !important;
  }

  .sr-date-strip::-webkit-scrollbar { display: none; }

  /* ═══════════════════════════════════
     11. PASSENGER DETAILS PAGE
  ═══════════════════════════════════ */

  /* Slim stepper */
  .pd-stepper {
    padding: 12px var(--app-gutter) !important;
    gap: 0 !important;
  }

  .pd-stepper .step-label {
    font-size: 0 !important; /* Hide text labels — icon only */
  }

  /* Form inputs — full width with floating labels */
  .pd-form-group input,
  .pd-form-group select {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: var(--app-radius-sm) !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    font-size: 16px !important;
  }

  .pd-form-group input:focus,
  .pd-form-group select:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 3px var(--app-primary-glow) !important;
  }

  /* Title selector — pill toggle */
  .pd-title-group {
    display: flex !important;
    gap: 8px !important;
  }

  .pd-title-btn {
    flex: 1 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface) !important;
    color: var(--app-text-dim) !important;
    transition: all 0.2s !important;
  }

  .pd-title-btn.active,
  .pd-title-btn:active {
    background: rgba(208,2,27,0.12) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
  }

  /* Sticky payment bar at bottom */
  .pd-payment-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9980 !important;
    background: rgba(11,18,32,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--app-border) !important;
    padding: 12px var(--app-gutter) calc(12px + var(--app-safe-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .pd-payment-bar__total {
    font-size: 20px;
    font-weight: 800;
    color: var(--app-text);
  }

  .pd-payment-bar__btn {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--app-primary), #e8002a);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px var(--app-primary-glow);
    transition: transform 0.15s;
  }

  .pd-payment-bar__btn:active {
    transform: scale(0.96);
  }

  /* ═══════════════════════════════════
     12. BOOKING CONFIRMATION
  ═══════════════════════════════════ */

  .bc-status-header {
    padding: 32px var(--app-gutter) 24px !important;
  }

  .bc-icon-wrapper {
    width: 72px !important;
    height: 72px !important;
    font-size: 36px !important;
  }

  .bc-title {
    font-size: 22px !important;
  }

  .bc-ticket-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 var(--app-gutter) !important;
  }

  .bc-card {
    margin: 12px var(--app-gutter) !important;
    border-radius: var(--app-radius) !important;
  }

  .bc-actions {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 var(--app-gutter) !important;
    gap: 10px !important;
  }

  .bc-btn {
    border-radius: var(--app-radius-sm) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  /* ═══════════════════════════════════
     13. FOOTER (Condensed Mobile)
  ═══════════════════════════════════ */

  .tbf-footer {
    padding-bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 80px) !important;
  }

  /* Footer accordion — collapsed by default */
  .mobile-accordion ul {
    display: none;
    transition: all 0.3s ease;
  }

  .mobile-accordion.expanded ul {
    display: block;
  }

  .mobile-accordion h4 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--app-border);
    font-size: 15px !important;
  }

  .mobile-accordion h4::after {
    content: '+';
    font-size: 20px;
    color: var(--app-text-dim);
    font-weight: 400;
    transition: transform 0.3s;
  }

  .mobile-accordion.expanded h4::after {
    content: '−';
  }

  /* ═══════════════════════════════════
     14. PAGE TRANSITIONS
  ═══════════════════════════════════ */

  @keyframes app-slide-in {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes app-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Main content entry animation */
  #main-content,
  .container:first-of-type {
    animation: app-fade-up 0.4s var(--app-transition) both;
  }

  /* ═══════════════════════════════════
     15. OFFCANVAS MENU (App Style)
  ═══════════════════════════════════ */

  .offcanvas {
    width: 85vw !important;
    max-width: 320px !important;
    background: var(--app-bg) !important;
    border-left: 1px solid var(--app-border) !important;
  }

  .offcanvas-header {
    padding: calc(var(--app-safe-top) + 16px) 20px 16px !important;
  }

  .mobile-links a {
    padding: 16px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--app-border) !important;
  }

  .mobile-links a .icon-left {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--app-surface) !important;
    border-radius: 10px !important;
    margin-right: 14px !important;
    font-size: 18px !important;
  }

  /* ═══════════════════════════════════
     16. PULL TO REFRESH INDICATOR
  ═══════════════════════════════════ */

  .app-pull-refresh {
    position: fixed;
    top: calc(var(--app-nav-height) + var(--app-safe-top) - 48px);
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-surface-raised);
    border: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--app-text-dim);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
  }

  .app-pull-refresh.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(56px);
  }

  .app-pull-refresh.refreshing i {
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ═══════════════════════════════════
     17. TOAST NOTIFICATIONS (App-style)
  ═══════════════════════════════════ */

  .tbf-toast,
  [class*="toast"] {
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 70px) !important;
    left: var(--app-gutter) !important;
    right: var(--app-gutter) !important;
    border-radius: var(--app-radius) !important;
  }

  /* ═══════════════════════════════════
     18. LOADING SKELETON (App-style)
  ═══════════════════════════════════ */

  .app-skeleton {
    background: linear-gradient(90deg, var(--app-surface) 25%, var(--app-surface-raised) 50%, var(--app-surface) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--app-radius-sm);
  }

  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ═══════════════════════════════════
     19. COOKIE BANNER (App-positioned)
  ═══════════════════════════════════ */

  #cookieConsent {
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom)) !important;
    border-radius: var(--app-radius) var(--app-radius) 0 0 !important;
  }

  /* ═══════════════════════════════════
     20. LIVE BOOKING TICKER
  ═══════════════════════════════════ */

  .hp-live-ticker {
    margin: 0 var(--app-gutter) !important;
    border-radius: var(--app-radius) !important;
  }

  /* ═══════════════════════════════════
     CRITIQUE PASS 1 — FIXES (HP-01 to HP-16)
  ═══════════════════════════════════ */

  /* ── HP-01: iOS Toggle Switches for Checkboxes ── */
  #directFlightsToggle,
  #flexibleDatesToggle,
  .search-form-container input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 48px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }

  #directFlightsToggle::after,
  #flexibleDatesToggle::after,
  .search-form-container input[type="checkbox"]::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.3s var(--app-transition), background 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  }

  #directFlightsToggle:checked,
  #flexibleDatesToggle:checked,
  .search-form-container input[type="checkbox"]:checked {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
  }

  #directFlightsToggle:checked::after,
  #flexibleDatesToggle:checked::after,
  .search-form-container input[type="checkbox"]:checked::after {
    transform: translateX(20px) !important;
  }

  /* Label alignment with toggles */
  .search-form-container label:has(input[type="checkbox"]),
  label[for="directFlightsToggle"],
  label[for="flexibleDatesToggle"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    color: var(--app-text) !important;
    cursor: pointer !important;
  }

  /* ── HP-02: Live Ticker Position Above Sticky CTA ── */
  .tbf-live-toast,
  [class*="live-toast"],
  .booking-toast {
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 72px) !important;
    z-index: 9990 !important;
    left: var(--app-gutter) !important;
    right: var(--app-gutter) !important;
    width: auto !important;
    border-radius: var(--app-radius) !important;
  }

  /* ── HP-03: Remove Dead Space Below Footer ── */
  .tbf-footer,
  footer,
  .footer-section:last-child,
  .tbf-absolute-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
  }

  /* Ensure body padding doesn't create excessive gap */
  body::after {
    content: none !important;
  }

  .copyright-section,
  .tbf-copyright {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }

  /* ── HP-04: Compact Promo Banner ── */
  .hp-promo-banner,
  .promo-alert-card,
  [class*="promo-banner"],
  .hp-hero .promo-card {
    padding: 12px 16px !important;
    margin: 8px var(--app-gutter) 12px !important;
    border-radius: var(--app-radius-sm) !important;
  }

  .hp-promo-banner h3,
  .promo-alert-card h3,
  [class*="promo-banner"] h3 {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  .hp-promo-banner p,
  .promo-alert-card p,
  [class*="promo-banner"] p {
    font-size: 12px !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
  }

  .hp-promo-banner .promo-icon,
  .promo-alert-card .promo-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  /* ── HP-05: Route Card Fix — Book Button + No Truncation ── */
  .hp-route-card,
  .route-card {
    min-width: 260px !important;
    max-width: 280px !important;
  }

  .hp-route-card .route-card__dest,
  .route-card .route-city {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .hp-route-card .route-card__cta,
  .route-card .book-btn,
  .route-card a[href*="search"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  /* ── HP-06: Holiday Grid — Show Secondary Cards ── */
  .hp-holiday-grid,
  .holiday-grid,
  .destination-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 var(--app-gutter) !important;
  }

  .hp-holiday-grid .holiday-card,
  .holiday-grid .card,
  .destination-grid .dest-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: var(--app-radius) !important;
    overflow: hidden !important;
  }

  /* ── HP-07: Testimonial Scroll Indicators ── */
  .hp-testimonials .testimonial-carousel,
  .testimonial-slider {
    position: relative !important;
  }

  /* Scroll indicator dots */
  .hp-testimonials::after,
  .testimonials-section::after {
    content: '● ○ ○' !important;
    display: block !important;
    text-align: center !important;
    padding: 12px 0 4px !important;
    font-size: 10px !important;
    letter-spacing: 6px !important;
    color: rgba(255,255,255,0.3) !important;
  }

  /* Peek next card edge for swipability hint */
  .hp-testimonials .testimonial-carousel,
  .testimonial-slider {
    padding-right: 40px !important;
  }

  .hp-testimonials .testimonial-carousel .testimonial-card:last-child,
  .testimonial-slider .testimonial-item:last-child {
    margin-right: 40px !important;
  }

  /* ── HP-08: Newsletter Form — No Chat Widget Overlap ── */
  .newsletter-form,
  .tbf-newsletter form,
  .subscribe-form {
    padding-right: 52px !important;
  }

  .newsletter-form .btn,
  .tbf-newsletter .subscribe-btn,
  .subscribe-form button {
    white-space: nowrap !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* ── HP-09: Deduplicate Hero CTA (hide inline, keep sticky) ── */
  .hp-hero .hero-cta-inline,
  .hero-search-link,
  .hero-section > a.btn-primary:first-of-type {
    display: none !important;
  }

  /* ── HP-10: Hide Return Field on One-Way ── */
  .trip-type-oneway ~ .return-field,
  .search-form-container .return-date-wrapper[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── HP-11: Fare Type Pills — Active/Inactive States ── */
  .fare-type-btn,
  .pax-type-pill,
  [class*="fare-type"],
  .special-fare-tabs .tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background: transparent !important;
    color: var(--app-text-dim) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
  }

  .fare-type-btn.active,
  .pax-type-pill.active,
  [class*="fare-type"].active,
  .special-fare-tabs .tab-btn.active {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px var(--app-primary-glow) !important;
  }

  /* ── HP-12: Quick Action Icon Backgrounds ── */
  .app-quick-action__icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin: 0 auto 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  }

  .app-quick-action__icon--flights {
    background: linear-gradient(135deg, #D0021B, #ff1a3a) !important;
  }
  .app-quick-action__icon--hotels {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
  }
  .app-quick-action__icon--holidays {
    background: linear-gradient(135deg, #059669, #10b981) !important;
  }
  .app-quick-action__icon--offers {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  }

  /* ── HP-13: How It Works Card — No Text Truncation ── */
  .hp-step-card,
  .how-it-works .step-card,
  [class*="step-card"] {
    min-height: auto !important;
    overflow: visible !important;
  }

  .hp-step-card p,
  .how-it-works .step-card p,
  [class*="step-card"] p {
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: var(--app-text-dim) !important;
  }

  /* ── HP-15: Payment Badge Dark Mode ── */
  .footer-payment-badge,
  .payment-logo,
  .we-accept img,
  .payment-methods img,
  .payment-methods span {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    filter: brightness(0.95) !important;
  }

  .we-accept,
  .payment-methods {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ── HP-16: Airline Partners — Styled Pills ── */
  .airline-partners span,
  .airline-partner-name,
  .our-partners span {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: var(--app-text-dim) !important;
    margin: 3px !important;
    white-space: nowrap !important;
  }

  /* ── GLOBAL: Chat Widget Mobile Position Fix (HP-T03) ── */
  .tawk-min-container,
  [id*="tidio"],
  .chat-widget,
  #zsiq_float {
    bottom: calc(var(--app-tab-height) + var(--app-safe-bottom) + 130px) !important;
    right: 12px !important;
    z-index: 9998 !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* ═══════════════════════════════════
     CRITIQUE PASS 2 — P0 + P1 FIXES
  ═══════════════════════════════════ */

  /* ── HP-T01 [P0]: Compact Promo Banner — Push Search Above Fold ── */
  .ai-promo-wrapper {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  .ai-promo-banner {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: auto !important;
    max-height: 60px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Hide the large glow effect on mobile */
  .ai-promo-banner > div:first-child {
    display: none !important;
  }

  /* Compact the icon */
  .ai-promo-banner div[style*="border-radius: 50%"]:first-of-type {
    padding: 8px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ai-promo-banner div[style*="border-radius: 50%"]:first-of-type i {
    font-size: 18px !important;
  }

  /* Compact the text */
  .ai-promo-banner div[style*="font-weight: 900"] {
    font-size: 13px !important;
    margin-bottom: 0 !important;
    gap: 6px !important;
    line-height: 1.2 !important;
  }

  /* Hide "LIVE" badge on mobile to save space */
  .ai-promo-banner div[style*="font-weight: 900"] span {
    display: none !important;
  }

  /* Hide description text */
  .ai-promo-banner div[style*="clamp(14px"] {
    display: none !important;
  }

  /* Compact claim CTA */
  .ai-promo-banner span[style*="CLAIM"],
  .ai-promo-banner span[style*="Claim"] {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .ai-promo-banner div[style*="width: 44px"] {
    width: 32px !important;
    height: 32px !important;
  }

  .ai-promo-banner div[style*="width: 44px"] i {
    font-size: 16px !important;
  }

  /* Push hero text higher */
  .hp-hero__text {
    margin-top: 8px !important;
  }

  .hp-hero__title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }

  .hp-hero__tagline {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }

  .hp-hero__sub {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* ── HP-T02 [P0]: Route Cards — Full Width Stacked ── */
  .hp-routes__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .hp-route-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hp-route-card__city {
    font-size: 16px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .hp-route-card__body {
    padding: 16px !important;
  }

  .hp-route-card__footer {
    padding: 0 16px 16px !important;
  }

  /* Route card sash — position it ABOVE the card to avoid text overlap */
  .hp-route-card__sash {
    position: relative !important;
    display: inline-block !important;
    margin: 12px 0 0 12px !important;
    z-index: 2 !important;
  }

  /* Ensure Book button is visible on ALL cards */
  .hp-btn-card {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
  }

  /* ── HP-T04 [P1]: Hide Cursor Plane/Trail on Mobile ── */
  .cursor-plane,
  .cursor-trail,
  #cursorPlane,
  #cursorTrail {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ── HP-T07 [P0]: Fare Type Active Pill — Force Solid Fill ── */
  /* DOM structure: label.se5-fare > input[type=radio][name=fare_type] + span */
  /* IMPORTANT: DOM uses snake_case name="fare_type", NOT camelCase "fareType" */

  .se5-fare span,
  .se5-sf-pill {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
  }

  /* Active fare pill — checked radio = solid red fill */
  .se5-fare input[name="fare_type"]:checked + span,
  .se5-fare:has(input[name="fare_type"]:checked) span,
  .se5-fare input:checked + span,
  .se5-sf-pill.se5-sf-pill--active {
    background: #D0021B !important;
    border-color: #D0021B !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px rgba(208, 2, 27, 0.4) !important;
  }

  /* Inactive fare pills — subtle transparent */
  .se5-fare input[name="fare_type"]:not(:checked) + span,
  .se5-fare:has(input[name="fare_type"]:not(:checked)) span,
  .se5-fare input:not(:checked) + span,
  .se5-sf-pill.se5-sf-pill--inactive {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.6) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  /* ── HP-T05 [P1]: Header Login Icon ── */
  .tbf-mobile-user-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    font-size: 18px !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
  }

  .tbf-mobile-user-icon:active {
    background: rgba(255,255,255,0.15) !important;
  }

  /* ══════════════════════════════════════════════════════
     P1 SPRINT — Homepage Fixes
  ══════════════════════════════════════════════════════ */

  /* ── HP-P1-01: Promo banner → slim single-line strip ── */
  .ai-promo-wrapper {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  .ai-promo-banner {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    gap: 10px !important;
    min-height: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Hide the large icon circle and glow on mobile */
  .ai-promo-banner > div:first-child {
    display: none !important;
  }

  /* Compact the text content */
  .ai-promo-banner > div:nth-child(2) {
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .ai-promo-banner > div:nth-child(2) > div:first-child > div:first-child {
    font-size: 13px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  .ai-promo-banner > div:nth-child(2) > div:first-child > div:last-child {
    display: none !important;
  }

  /* Compact CTA */
  .ai-promo-banner > div:last-child > span {
    font-size: 12px !important;
  }

  .ai-promo-banner > div:last-child > div {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── HP-P1-02: Chat widget repositioned above sticky bar ── */
  /* Common Freshchat / Tidio / custom chat widgets */
  #fc_frame,
  .fc-widget-normal,
  [id*="freshchat"],
  [id*="tidio"],
  .chat-widget,
  iframe[title*="chat"],
  div[class*="chat-widget"] {
    bottom: 130px !important;
    right: 12px !important;
    z-index: 8999 !important;
  }

  /* ── HP-P1-03: Feature cards → 2×2 compact grid ── */
  .hp-features__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 var(--app-gutter, 16px) !important;
  }

  .hp-feature-card {
    padding: 16px 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .hp-feature-card__icon-wrap {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
  }

  .hp-feature-card__icon-wrap i {
    font-size: 20px !important;
  }

  .hp-feature-card__icon-bg {
    display: none !important;
  }

  .hp-feature-card__title {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  .hp-feature-card__desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.5) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* ── HP-P1-04: "No Hidden Convenience Fee" → prominent badge ── */
  .se5-no-hidden-fee,
  [class*="no-hidden"],
  .hp-search-glass .se5-search-btn ~ * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #10b981 !important;
    padding: 6px 12px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    border-radius: 20px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
    width: fit-content !important;
  }

} /* End @media (max-width: 768px) */