/* ============================================================
   FLEXXISTAY MOBILE APP REDESIGN
   Scope: ALL rules are scoped to mobile (max-width: 768px) or
   are desktop-hidden helpers. Desktop is 100% unaffected.
   Loaded AFTER all existing CSS to win the cascade.
   ============================================================ */

/* ---------- Desktop safety: hide ALL mobile-only elements ---------- */
@media (min-width: 769px) {
  .mobile-only,
  .mobile-bottom-nav,
  .mobile-sticky-bookbar,
  .mobile-app-header,
  .mobile-hero-search,
  .mobile-location-chips,
  .mobile-duration-chips,
  .mobile-filter-sheet,
  .mobile-filter-sheet-backdrop,
  .mobile-fab,
  .mobile-wishlist-badge,
  .mobile-wishlist-heart,
  .mobile-hotel-duration-row,
  .mobile-filters-container,
  .mobile-brand-bar { display: none !important; }
}

/* ============================================================
   MOBILE BASE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --m-primary: #6366f1;
    --m-primary-dark: #4338ca;
    --m-primary-light: #818cf8;
    --m-accent: #f59e0b;
    --m-accent-light: #fbbf24;
    --m-success: #10b981;
    --m-danger: #ef4444;
    --m-bg: #f4f6fb;
    --m-card: #ffffff;
    --m-text: #0f172a;
    --m-text2: #475569;
    --m-muted: #94a3b8;
    --m-border: #e4e9f1;
    --m-border-soft: #eef1f6;
    --m-radius: 18px;
    --m-radius-sm: 12px;
    --m-radius-pill: 999px;
    --m-shadow: 0 6px 18px -6px rgba(15,23,42,0.16), 0 2px 6px -2px rgba(15,23,42,0.08);
    --m-shadow-lg: 0 16px 40px -12px rgba(15,23,42,0.26);
    --m-gradient: linear-gradient(135deg, #6366f1 0%, #4338ca 60%, #f59e0b 130%);
  }

  html, body {
    background: var(--m-bg) !important;
    overflow-x: hidden !important;
    font-size: 15px !important;
  }

  /* Neutralize legacy over-aggressive full-width/centering hacks from prior CSS */
  body .main-content,
  body .hotel-main-wrap,
  body .hotel-gallery-col,
  body .mobile-hotel-name-section,
  body .mobile-description-prices-section,
  body .amenities-section,
  body .location-section,
  body .policies-section,
  body .cancellation-section,
  body .testimonial-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Universal touch */
  button, input, select, textarea, a { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; }
}

/* ============================================================
   MOBILE APP HEADER
   A clean, app-like header with logo + location + notification/profile.
   Designed to sit in place of the existing desktop header on mobile.
   ============================================================ */
@media (max-width: 768px) {
  .main-header,
  .main-navbar {
    height: 62px !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(15,23,42,0.08) !important;
    box-shadow: 0 2px 12px -4px rgba(15,23,42,0.12) !important;
  }

  /* Compact the header container */
  .header-container,
  .navbar-container {
    height: 62px !important;
    padding: 0 14px !important;
  }

  /* Logo sizing */
  .brand-logo--md { height: 44px !important; width: auto !important; }
  .brand-logo--left-nudge { margin-left: 0 !important; transform: none !important; }
  .brand-logo { height: 44px !important; }

  /* Hide desktop nav + phone button (they don't belong on a mobile app header) */
  .main-nav,
  .navbar-links,
  .navbar-phone-btn {
    display: none !important;
  }

  body.home .header-auth > .header-link:last-child {
    display: none !important;
  }

  .navbar-actions > .navbar-cta-btn:last-child,
  .navbar-toggle {
    display: none !important;
  }

  /* Header actions on the right */
  .header-auth,
  .navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* Notification bell icon */
  .mobile-notif-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5fb !important;
    color: var(--m-primary) !important;
    font-size: 16px !important;
    position: relative !important;
    border: 1px solid var(--m-border) !important;
    cursor: pointer !important;
  }
  .mobile-notif-btn .notif-dot {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--m-danger) !important;
    border: 2px solid #fff !important;
  }

  /* Compact login / user button */
  .header-link,
  .navbar-login-btn,
  .navbar-cta-btn {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
    min-height: 38px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(99,102,241,0.5) !important;
    border: none !important;
  }
  .header-link span, .navbar-login-btn span { display: none !important; }
  .header-link i, .navbar-login-btn i { font-size: 1rem !important; }

  /* User dropdown compact */
  .user-dropdown { min-width: 200px !important; border-radius: 16px !important; }
}

/* ============================================================
   MOBILE HOME SHELL (Homepage only)
   A clean hero + prominent search card + location shortcuts
   + hourly duration chips. Hidden on desktop.
   ============================================================ */
@media (max-width: 768px) {
  /* Shift homepage content below the fixed 62px header + hero */
  body.home { padding-top: 62px !important; }

  /* Hide the heavy desktop hero visuals on mobile for a clean app feel */
  body.home .hero-section { padding: 18px 14px 0 !important; min-height: auto !important; background: transparent !important; }
  body.home .hero-inner { padding: 0 !important; text-align: left !important; gap: 0 !important; }
  body.home .hero-content { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; align-items: flex-start !important; }
  body.home .hero-badge { align-self: flex-start !important; }
  body.home .hero-title, body.home .hero-subtitle { text-align: left !important; }
  body.home .hero-features, body.home .hero-visual, body.home .hero-image-mobile { display: none !important; }
  body.home .hero-actions { justify-content: flex-start !important; width: 100% !important; gap: 10px !important; }
  body.home .hero-btn-primary, body.home .hero-btn-secondary { width: auto !important; flex: 1 !important; justify-content: center !important; padding: 12px 14px !important; font-size: 0.85rem !important; min-height: 46px !important; }

  /* Compact the locations section that follows */
  body.home .locations-available { padding: 14px !important; margin: 0 !important; }
  body.home .locations-container { margin: 0 !important; }
  body.home .loc-hero { padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
  body.home .loc-hero-grid { display: block !important; }
  body.home .loc-hero-left { padding: 0 !important; }
  body.home .loc-eyebrow { display: none !important; }
  body.home .loc-hero-media, body.home .loc-hero-right { display: none !important; }
  body.home .loc-hero-title { font-size: 1.7rem !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
  body.home .loc-badges { justify-content: flex-start !important; }
  body.home .loc-hero-keywords { display: none !important; }
  body.home .locations-stats { display: none !important; }
  body.home .locations-grid { display: flex !important; overflow-x: auto !important; gap: 12px !important; padding: 6px 0 4px !important; scroll-snap-type: x mandatory !important; }
  body.home .location-card { flex: 0 0 74% !important; scroll-snap-align: start !important; padding: 8px !important; border-radius: 18px !important; }
  body.home .location-media { aspect-ratio: 16 / 10 !important; min-height: 0 !important; border-radius: 14px !important; }
  body.home .location-cta { opacity: 1 !important; transform: none !important; }

  /* ===== MOBILE HOME SEARCH CARD ===== */
  .mobile-home-search {
    display: block !important;
    background: var(--m-card) !important;
    border-radius: 22px !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 16px 16px 18px !important;
    margin: 14px 14px 0 !important;
    border: 1px solid var(--m-border) !important;
    position: relative !important;
  }
  .mobile-home-search .mhs-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--m-text) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .mobile-home-search .mhs-title i { color: var(--m-primary) !important; }

  /* Location chips */
  .mhs-location-row { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; overflow-x: auto !important; }
  .mhs-loc-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    border-radius: 14px !important;
    background: #f0f4fb !important;
    border: 1.5px solid var(--m-border) !important;
    color: var(--m-text2) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .mhs-loc-chip.active {
    background: var(--m-primary) !important;
    color: #fff !important;
    border-color: var(--m-primary) !important;
    box-shadow: 0 4px 12px -4px rgba(99,102,241,0.5) !important;
  }

  /* Date fields */
  .mhs-dates-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 12px !important; }
  .mhs-date-field { position: relative !important; }
  .mhs-date-field label {
    display: block !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: var(--m-primary) !important;
    margin: 0 0 4px 2px !important;
  }
  .mhs-date-field .mhs-input-wrap {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: 14px !important;
    height: 52px !important;
    padding: 0 12px 0 10px !important;
    gap: 8px !important;
  }
  .mhs-date-field .mhs-input-wrap:focus-within { border-color: var(--m-primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important; }
  .mhs-date-field .mhs-input-wrap i { color: var(--m-primary) !important; font-size: 14px !important; }
  .mhs-date-field input {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--m-text) !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .mhs-date-field input::placeholder { color: var(--m-muted) !important; font-weight: 500 !important; }

  /* Duration chips */
  .mhs-duration-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: var(--m-primary) !important;
    margin: 0 0 6px 4px !important;
  }
  .mhs-duration-row { display: flex !important; gap: 6px !important; margin-bottom: 14px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .mhs-dur-chip {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    background: #f0f4fb !important;
    border: 1.5px solid var(--m-border) !important;
    color: var(--m-text2) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
  }
  .mhs-dur-chip.active {
    background: var(--m-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px -4px rgba(99,102,241,0.5) !important;
  }

  /* Search button */
  .mhs-submit-btn {
    width: 100% !important;
    height: 54px !important;
    border: none !important;
    border-radius: 16px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 24px -8px rgba(99,102,241,0.55) !important;
  }
  .mhs-submit-btn:active { transform: translateY(1px) !important; }
}

/* ============================================================
   MOBILE HOTEL LISTING CARDS
   Redesign .hotel-card-modern & related for mobile: image on top,
   clean overlay, title, rating, location, price + duration pills, CTAs.
   ============================================================ */
@media (max-width: 768px) {
  .results { order: 1 !important; width: 100% !important; padding: 0 12px !important; }
  .results-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px !important; border-radius: 18px !important; }
  .results-count h3 { font-size: 1.2rem !important; }
  .results-info { font-size: 0.85rem !important; }
  .sort-by-section { width: 100% !important; min-width: 0 !important; }
  .sort-by-section span { display: none !important; }
  #sortBySelect { width: 100% !important; min-width: 0 !important; }

  /* Hotel card */
  .hotel-card-modern {
    display: block !important;
    border-radius: 20px !important;
    margin: 14px 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .hotel-card-modern:hover { transform: translateY(-2px) !important; box-shadow: var(--m-shadow-lg) !important; }

  .hotel-card-left {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex: none !important;
    display: block !important;
  }

  /* Carousel */
  .hotel-carousel { width: 100% !important; flex-direction: column !important; }
  .carousel-main {
    width: 100% !important;
    max-width: 100% !important;
    height: 210px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .carousel-image { height: 210px !important; width: 100% !important; border-radius: 0 !important; aspect-ratio: auto !important; }
  .hotel-badge { top: 10px !important; left: 10px !important; font-size: 0.72rem !important; padding: 5px 10px !important; border-radius: 10px !important; }
  .carousel-btn { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; background: rgba(15,23,42,0.5) !important; color: #fff !important; }
  .carousel-btn.prev { left: 8px !important; }
  .carousel-btn.next { right: 8px !important; }
  .carousel-thumbs-wrapper { display: none !important; }

  /* Card body */
  .hotel-card-right {
    display: block !important;
    padding: 14px 14px 16px !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  .hotel-header-row { display: block !important; }
  .hotel-title-wrap { width: 100% !important; }
  .hotel-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--m-text) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 6px !important;
  }
  .hotel-header-right { display: none !important; }

  .hotel-location {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: space-between !important;
    margin: 0 0 10px !important;
    font-size: 0.9rem !important;
    color: var(--m-text2) !important;
  }
  .hotel-location-text { white-space: normal !important; overflow: visible !important; text-overflow: initial !important; }
  .hotel-meta-mobile { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }
  .hotel-meta-mobile .hotel-rating {
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
    background: var(--m-success) !important;
    border-radius: 12px !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
  }
  .hotel-meta-mobile .hotel-premium {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    background: var(--m-accent-light) !important;
    color: #7c4a03 !important;
    border-radius: 12px !important;
    width: auto !important;
    height: auto !important;
  }

  .hotel-tags { gap: 8px !important; margin-bottom: 10px !important; }
  .hotel-tags span { font-size: 0.78rem !important; color: var(--m-text2) !important; }

  .hotel-amenities { gap: 8px !important; margin-bottom: 12px !important; }
  .hotel-amenities i { width: 30px !important; height: 30px !important; font-size: 0.85rem !important; }
  .hotel-amenities .more-amenities { font-size: 0.78rem !important; }

  /* Price row */
  .hotel-bottom-row { display: block !important; margin-top: 0 !important; }
  .hotel-bottom-left { width: 100% !important; display: block !important; }

  /* Duration pills */
  .mobile-hotel-duration-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    margin-bottom: 12px !important;
  }
  .mobile-duration-pill {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    background: #f0f4fb !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .mobile-duration-pill .pill-label { font-size: 0.72rem !important; font-weight: 700 !important; color: var(--m-text2) !important; }
  .mobile-duration-pill .pill-price { font-size: 0.95rem !important; font-weight: 800 !important; color: var(--m-primary) !important; }
  .mobile-duration-pill.active { background: var(--m-gradient) !important; border-color: transparent !important; }
  .mobile-duration-pill.active .pill-label { color: rgba(255,255,255,0.9) !important; }
  .mobile-duration-pill.active .pill-price { color: #fff !important; }

  /* CTA row */
  .hotel-action-buttons { flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 !important; }
  .view-details-btn {
    flex: 1 !important;
    height: 46px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f4fb !important;
    color: var(--m-primary) !important;
    border: 1.5px solid var(--m-border) !important;
    min-width: 0 !important;
    min-height: 46px !important;
    width: auto !important;
  }
  .cta-btn.book-btn {
    flex: 1 !important;
    height: 46px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  .cta-btn.book-btn .cta-main-text { font-size: 0.9rem !important; }
  .cta-btn.book-btn .cta-price, .cta-btn.book-btn .original-price { display: none !important; }

  /* Hide the big pricing-cards on mobile (replaced by duration pills) */
  .hotel-pricing-cards { display: none !important; }
  .load-more-link, .load-more-btn { width: 100% !important; height: 50px !important; background: #fff !important; border: 1px solid var(--m-border) !important; border-radius: 14px !important; color: var(--m-primary) !important; font-weight: 700 !important; }
}

/* ============================================================
   MOBILE FILTERS as BOTTOM SHEET
   ============================================================ */
@media (max-width: 768px) {
  /* Mobile filters toggle */
  .mobile-filters-toggle { display: block !important; margin: 10px 0 !important; }
  .mobile-filters-btn {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
    background: #fff !important;
    color: var(--m-primary) !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  .mobile-filters-btn:hover { background: #f0f4fb !important; }

  /* Hide the desktop filters sidebar */
  .filters, aside.filters { display: none !important; }

  /* Bottom sheet container */
  .mobile-filter-sheet {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10001 !important;
    background: #fff !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(15,23,42,0.24) !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mobile-filter-sheet.open { transform: translateY(0) !important; }
  .mobile-filter-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,0.45) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
  }
  .mobile-filter-sheet-backdrop.show { opacity: 1 !important; }

  .mobile-filter-sheet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--m-border-soft) !important;
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 1 !important;
  }
  .mobile-filter-sheet-header h4 { margin: 0 !important; font-size: 1.05rem !important; font-weight: 800 !important; color: var(--m-text) !important; }
  .mobile-filter-sheet-close { background: none !important; border: none !important; font-size: 1.4rem !important; color: var(--m-muted) !important; cursor: pointer !important; }

  .mobile-filter-sheet-body { padding: 14px 18px 20px !important; }
  .mobile-filter-sheet-body .filter-group { margin-bottom: 18px !important; background: #f8fafc !important; border-radius: 14px !important; border: 1px solid var(--m-border-soft) !important; }
  .mobile-filter-sheet-body .filter-label { font-size: 0.9rem !important; }
  .mobile-filter-sheet-body .filter-duration-btn { border-radius: 10px !important; min-height: 42px !important; }
  .mobile-filter-sheet-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--m-border-soft) !important;
  }
  .mobile-filter-sheet-footer .apply-filters-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
  }
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   Home • Explore • Wishlist • Bookings • Profile
   ============================================================ */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10050 !important;
    height: 62px !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--m-border) !important;
    box-shadow: 0 -4px 20px rgba(15,23,42,0.08) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mbn-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: var(--m-muted) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .mbn-item i { font-size: 1.15rem !important; line-height: 1 !important; }
  .mbn-item.active, .mbn-item:hover { color: var(--m-primary) !important; }
  .mbn-item.active { font-weight: 800 !important; }

  /* Reserve bottom space so content isn't hidden behind nav */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  .main-footer, .modern-footer { margin-bottom: 70px !important; }
}

/* ============================================================
   MOBILE HOTEL DETAILS
   ============================================================ */
@media (max-width: 768px) {
  /* Reset legacy centering on details */
  .hotel-main-wrap { display: block !important; padding: 0 !important; }
  .hotel-gallery-col { padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
  .hotel-info-col { display: none !important; }

  /* Search bar on details, make it clean */
  .search-bar-modern-wrap { padding: 12px 12px 4px !important; margin: 0 !important; }
  .search-bar-modern { background: #fff !important; border: 1px solid var(--m-border) !important; border-radius: 18px !important; padding: 14px !important; box-shadow: var(--m-shadow) !important; }
  .mobile-search-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  .mobile-date-pair { gap: 10px !important; }
  .mobile-input-wrap { height: 52px !important; border-radius: 14px !important; padding: 0 12px 0 10px !important; }
  .mobile-search-gradient-btn { height: 52px !important; border-radius: 14px !important; }

  /* Mobile hotel name */
  .mobile-hotel-name-section {
    display: block !important;
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow) !important;
    padding: 18px 16px !important;
    margin: 12px !important;
  }
  .mobile-hotel-name { font-size: 1.4rem !important; font-weight: 800 !important; text-align: center !important; }
  .mobile-hotel-rating-box { justify-content: center !important; }

  /* Gallery */
  .hotel-gallery-col { margin: 0 !important; }
  .hotel-gallery-main-wrap { width: 100% !important; margin: 0 !important; border-radius: 0 !important; max-height: 260px !important; min-height: 220px !important; aspect-ratio: 16 / 10.5 !important; }
  .hotel-gallery-main { width: 100% !important; height: 100% !important; max-height: 260px !important; min-height: 220px !important; border-radius: 0 !important; }
  .hotel-gallery-thumbs { padding: 10px 12px !important; gap: 8px !important; justify-content: flex-start !important; }
  .hotel-gallery-thumbs img { width: 58px !important; height: 44px !important; }

  /* Description + pricing card */
  .mobile-description-prices-section {
    display: block !important;
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow) !important;
    padding: 18px 16px !important;
    margin: 12px !important;
  }
  .mobile-description-label { text-align: center !important; font-size: 1.05rem !important; }
  .mobile-description { text-align: center !important; font-size: 0.92rem !important; line-height: 1.6 !important; color: var(--m-text2) !important; }

  /* Mobile booking options grid -> clean 2x2 */
  .mobile-booking-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .book-btn.mobile-book-btn {
    width: 100% !important;
    min-height: 96px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f0f4fb 0%, #e8eefc 100%) !important;
    color: var(--m-text) !important;
    border: 1.5px solid var(--m-border) !important;
    padding: 14px 10px !important;
    box-shadow: none !important;
  }
  .book-btn.mobile-book-btn.green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; border-color: #a7f3d0 !important; }
  .book-btn.mobile-book-btn.green .label { color: #047857 !important; }
  .book-btn.mobile-book-btn .label { font-size: 0.85rem !important; color: var(--m-text2) !important; font-weight: 700 !important; }
  .book-btn.mobile-book-btn .price-badge { font-size: 1.15rem !important; color: var(--m-primary) !important; background: transparent !important; padding: 0 !important; min-width: 0 !important; border: none !important; box-shadow: none !important; }
  .book-btn.mobile-book-btn .original-price { color: var(--m-muted) !important; font-size: 0.75rem !important; }

  /* Amenities / location / policies / cancellation / testimonial cards */
  .amenities-section, .location-section, .policies-section, .cancellation-section, .testimonial-section {
    display: block !important;
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow) !important;
    padding: 18px !important;
    margin: 12px !important;
  }
  .amenities-section h3, .location-section h3, .policies-section h3, .cancellation-section h3, .testimonial-section h3 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--m-text) !important;
    text-align: center !important;
    background: none !important;
    -webkit-text-fill-color: var(--m-text) !important;
    margin-bottom: 14px !important;
  }
  .amenities-section .hotel-features { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; margin: 0 !important; }
  .amenities-section .hotel-features span {
    background: #f6f8fc !important;
    border: 1px solid var(--m-border-soft) !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    padding: 12px 8px !important;
    text-align: center !important;
    color: var(--m-text2) !important;
  }
  .amenities-section .hotel-features span i { color: var(--m-primary) !important; }
  .hotel-map { width: 100% !important; border-radius: 14px !important; }
  .get-direction-btn { width: 100% !important; height: 48px !important; border-radius: 14px !important; }
  .hotel-policy-list li { font-size: 0.82rem !important; padding: 8px 12px !important; background: #f6f8fc !important; border-radius: 10px !important; }

  /* ===== STICKY BOOK NOW BAR ===== */
  .mobile-sticky-bookbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* Sit ABOVE the 62px bottom nav so the two never overlap */
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10040 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--m-border) !important;
    box-shadow: 0 -4px 20px rgba(15,23,42,0.12) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* Reserve space for the book bar (above nav) so it never hides content */
  body.has-mobile-bookbar {
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-sticky-bookbar .sb-price { flex: 1 !important; min-width: 0 !important; }
  .mobile-sticky-bookbar .sb-price-label { display: block !important; font-size: 0.7rem !important; color: var(--m-muted) !important; font-weight: 600 !important; }
  .mobile-sticky-bookbar .sb-price-value { display: block !important; font-size: 1.5rem !important; font-weight: 900 !important; color: var(--m-primary) !important; line-height: 1 !important; }
  .mobile-sticky-bookbar .sb-book-btn {
    height: 50px !important;
    padding: 0 24px !important;
    border-radius: 14px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px -6px rgba(99,102,241,0.5) !important;
  }

}

/* ============================================================
   MOBILE BOOKING / BILL MODAL
   The modal JS (customer-modal-popup.js) forces centered
   positioning via inline !important styles. Keep only safe,
   non-conflicting mobile-friendly rules (no positioning fights,
   prevent iOS input zoom, full-width buttons on small screens).
   ============================================================ */
@media (max-width: 768px) {
  /* Card-like modals must be scrollable + touch-friendly on mobile */
  .modal-overlay .modal-content,
  #customerInfoModal .modal-content,
  #bookingBillModal .modal-content,
  .modal-content.booking-modal,
  #bookingBillModal .modal-content.compact-bill-modal {
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  /* Prevent iOS auto-zoom when focusing fields */
  .modal-overlay input, .modal-overlay select, .modal-overlay textarea,
  #customerInfoModal input, #customerInfoModal select, #customerInfoModal textarea,
  #bookingBillModal input, #bookingBillModal select, #bookingBillModal textarea {
    font-size: 16px !important;
  }

  /* Close button must be tappable + not overlap content */
  .modal-overlay .close,
  #customerInfoModal .close,
  #bookingBillModal .close,
  .modal-overlay .modal-content .close {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.4rem !important;
    background: #f1f5f9 !important;
    position: absolute !important;
    z-index: 5 !important;
  }

  /* Header compact */
  .modal-header { padding: 4px 0 12px !important; margin-bottom: 12px !important; }
  .modal-icon svg { width: 44px !important; height: 44px !important; }
  .modal-title { font-size: 1.1rem !important; color: var(--m-primary) !important; }
  .modal-subtitle { font-size: 0.82rem !important; color: var(--m-text2) !important; }

  /* Form fields */
  .form-group { margin-bottom: 12px !important; }
  .form-group label { font-size: 0.8rem !important; font-weight: 700 !important; color: var(--m-text) !important; }
  .form-group input, .icon-input input {
    width: 100% !important;
    height: 50px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--m-border) !important;
    background: #f6f8fc !important;
    color: var(--m-text) !important;
    min-height: 50px !important;
  }
  .form-group input:focus, .icon-input input:focus { border-color: var(--m-primary) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important; }
  .form-row { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }

  /* Booking summary box */
  .booking-summary-box {
    background: #f6f8fc !important;
    border: 1px solid var(--m-border-soft) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    font-size: 0.85rem !important;
    color: var(--m-text2) !important;
  }
  .booking-summary-box b { color: var(--m-text) !important; }

  /* Submit / primary buttons */
  .gradient-btn, .compact-submit-btn {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    background: var(--m-gradient) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border: none !important;
    margin-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 24px -8px rgba(99,102,241,0.55) !important;
  }

  /* Bill summary */
  .booking-bill-summary { background: #f6f8fc !important; border: 1px solid var(--m-border-soft) !important; border-radius: 14px !important; padding: 14px !important; margin-bottom: 12px !important; }
  .bill-row { font-size: 0.86rem !important; padding: 8px 0 !important; }
  .bill-label { color: var(--m-text2) !important; }
  .bill-total { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--m-primary) !important; }

  /* Payment buttons -> full width stacked */
  #bookingBillModal .modal-content > div:last-child { padding: 14px 0 !important; margin-top: 12px !important; border-top: 1px solid var(--m-border-soft) !important; background: transparent !important; box-shadow: none !important; }
  #bookingBillModal .cta-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    min-width: 0 !important;
  }
  #bookingBillModal .compact-payment-btn { min-height: 50px !important; }
}

/* ============================================================
   MOBILE AUTH MODAL (Login / Sign Up / OTP)
   Clean, professional, recognizes registered users.
   ============================================================ */
@media (max-width: 768px) {
  .auth-modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(15,23,42,0.5) !important;
  }
  .auth-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 24px 20px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 92vh !important;
    animation: mobileSheetUp 0.32s cubic-bezier(0.4,0,0.2,1) !important;
  }
  .auth-close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    background: #f1f5f9 !important;
  }
  .auth-title { font-size: 1.2rem !important; }
  .auth-input {
    height: 52px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    background: #f6f8fc !important;
    border: 1.5px solid var(--m-border) !important;
    padding: 0 14px !important;
  }
  .auth-input:focus { border-color: var(--m-primary) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important; }
  .auth-btn {
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    background: var(--m-gradient) !important;
  }
  .auth-btn-ghost { background: #f6f8fc !important; color: var(--m-primary) !important; border: 1.5px solid var(--m-border) !important; }
  .auth-loading { border-radius: 24px 24px 0 0 !important; }
}

/* ============================================================
   MOBILE BOOKING CONFIRMATION PAGE
   ============================================================ */
@media (max-width: 768px) {
  body:has(.confirmation-box) {
    background: var(--m-bg) !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .confirmation-box {
    margin: 18px auto 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    padding: 24px 18px !important;
    box-shadow: var(--m-shadow-lg) !important;
    border: 1px solid var(--m-border) !important;
  }
  .confirmation-box h2 { font-size: 1.4rem !important; color: #5e1bd7 !important; }
  .details { border-radius: 14px !important; padding: 14px !important; font-size: 0.85rem !important; }
  .confirmation-actions a { width: 100% !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; }
}

/* ============================================================
   MOBILE WISHLIST (heart toggle + bottom sheet)
   ============================================================ */
@keyframes mobileSheetUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) {
  /* Wishlist heart on hotel card image */
  .hotel-card-modern { position: relative !important; }
  .carousel-main { position: relative !important; }
  .mobile-wishlist-heart {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 6 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.14) !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .mobile-wishlist-heart.saved { color: #ef4444 !important; }
  .mobile-wishlist-heart.detail-heart {
    position: static !important;
    display: inline-flex !important;
    margin: 10px auto 0 !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Wishlist rows inside the bottom sheet */
  .wishlist-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--m-border-soft) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    color: var(--m-text) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
  .wishlist-row-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #eef2ff !important;
    color: var(--m-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .wishlist-row-label { flex: 1 !important; font-size: 0.92rem !important; }
  .wishlist-row > i:last-child { color: var(--m-muted) !important; }
  .wishlist-empty { text-align: center !important; padding: 30px 16px !important; color: var(--m-muted) !important; }
  .wishlist-empty i { font-size: 2.4rem !important; color: #cbd5e1 !important; margin-bottom: 10px !important; display: block !important; }
  .wishlist-empty p { color: var(--m-muted) !important; font-size: 0.9rem !important; margin: 0 !important; line-height: 1.5 !important; }
}

/* ============================================================
   EXISTING MOBILE FILTERS -> BOTTOM SHEET (CSS-only)
   The listing page's initializeMobileFilters toggles .show on
   #mobileFiltersContainer; style that container as a slide-up
   bottom sheet without touching the working JS.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-filters-container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10060 !important;
    background: #fff !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(15,23,42,0.24) !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mobile-filters-container.show { transform: translateY(0) !important; }
  .mobile-filters-container .mobile-filters-content { padding: 0 18px 16px !important; }
}

/* ============================================================
   MOBILE TOASTS / LOADING / ERROR MESSAGES
   ============================================================ */
@media (max-width: 768px) {
  .mobile-toast {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: 74px !important;
    z-index: 10060 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1e293b !important;
    color: #fff !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15,23,42,0.3) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    transform: translateY(-140%) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  }
  .mobile-toast.show { transform: translateY(0) !important; }
  .mobile-toast.success { background: #059669 !important; }
  .mobile-toast.error { background: #dc2626 !important; }
  .mobile-toast.info { background: #2563eb !important; }

  /* Page-level spinner */
  .mobile-page-loader {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(244,246,251,0.9) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 10070 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  .mobile-page-loader .mpl-spinner {
    width: 44px !important;
    height: 44px !important;
    border: 4px solid #e2e8f0 !important;
    border-top-color: var(--m-primary) !important;
    border-radius: 50% !important;
    animation: mplSpin 0.7s linear infinite !important;
  }
  .mobile-page-loader p { color: var(--m-text2) !important; font-size: 0.9rem !important; font-weight: 600 !important; margin: 0 !important; }
  @keyframes mplSpin { to { transform: rotate(360deg); } }

  /* Error banner compact */
  .error-banner {
    top: 62px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 0 0 12px 12px !important;
  }
}