/* ============================================
   TRICHY AMMU TRAVELS — Responsive Styles
   Universal Mobile-First System & Breakpoints (350px - 1440px)
   ============================================ */

/* ── Universal Global Zero Horizontal Overflow Protection ── */
html,
body {
  max-width: 100vw !important;
  overflow-x: clip !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ── Fare Breakup Toggle: Hidden on Desktop (always visible breakdown) ── */
@media (min-width: 481px) {
  .fare-breakup-toggle {
    display: none !important;
  }
}

/* ── Mobile (up to 480px) ── */
@media (max-width: 480px) {
  :root {
    --text-6xl: 2.25rem;
    --text-5xl: 1.85rem;
    --text-4xl: 1.55rem;
    --text-3xl: 1.35rem;
    --text-2xl: 1.15rem;
  }

  .container {
    padding: 0 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section {
    padding: var(--space-10) 0;
  }

  .hero {
    min-height: auto;
  }

  .hero-actions {
    flex-direction: column;
    gap: 8px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-stat {
    flex: 1 1 45%;
    min-width: 120px;
  }

  .search-form {
    grid-template-columns: 1fr;
  }

  .search-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .search-tabs::-webkit-scrollbar {
    display: none;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

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

  .testimonial-card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .stepper {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .stepper-line {
    display: none;
  }

  .stepper-label {
    display: none;
  }

  .modal {
    width: calc(100vw - 16px) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal-header {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
  }

  .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px !important;
  }

  .modal-footer {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
  }

  .whatsapp-float {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    z-index: 9980 !important;
  }

  .whatsapp-btn {
    width: 52px;
    height: 52px;
  }

  .whatsapp-tooltip {
    display: none;
  }

  .back-to-top {
    bottom: 80px;
    right: 20px;
    width: 38px;
    height: 38px;
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
  }
}

/* ── Small Tablet (481px - 768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --text-6xl: 3rem;
    --text-5xl: 2.5rem;
  }

  .container {
    padding: 0 var(--space-5);
  }


  .search-form {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet & Below (max 1024px) ── */
@media (max-width: 1024px) {
  .header {
    height: var(--header-height-mobile);
  }

  .header-logo img {
    width: 36px;
    height: 36px;
  }

  .header-logo-text {
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    letter-spacing: -0.35px !important;
    color: #FFFFFF !important;
  }

  .header-logo-tagline {
    display: none !important;
  }

  .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .header-actions .lang-toggle,
  .header-actions #langToggle {
    padding: 2px 5px !important;
    font-size: 10px !important;
    height: 25px !important;
    line-height: 20px !important;
    border-radius: 6px !important;
  }

  .header-actions .theme-toggle,
  .header-actions #themeToggle {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    padding: 0 !important;
  }

  .header-actions #customerNotifBell,
  .header-actions .header-alerts-bell,
  .header-actions button#customerNotifBell.btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;
  }

  /* Mobile Navigation Drawer */
  .nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 300px !important;
    height: 100vh !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: var(--primary-navy) !important;
    padding: var(--space-20) var(--space-6) var(--space-6) !important;
    transition: right var(--transition-base) !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3) !important;
    gap: var(--space-1) !important;
    overflow-y: auto !important;
    z-index: var(--z-fixed) !important;
  }

  .nav.open {
    right: 0 !important;
  }

  .nav-link {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-base) !important;
  }

  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: var(--space-4) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height var(--transition-slow) !important;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 300px !important;
  }

  .mobile-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .header .container {
    padding: 0 4px !important;
  }

  .header-logo img {
    width: 24px !important;
    height: 24px !important;
  }

  .header-logo-text {
    max-width: none !important;
    font-size: 11px !important;
    letter-spacing: -0.4px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .header-actions {
    gap: 2px !important;
  }

  .header-actions .lang-toggle {
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  .header-actions .theme-toggle {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }

  .header-actions a[href="/auth"].btn,
  .header-actions .btn {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }
}

/* Mobile guest login button */
.header-actions a[href="/auth"].btn,
.header-actions .btn-primary.btn-sm,
.header-actions .btn {
  display: inline-flex !important;
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  height: 25px !important;
  border-radius: 999px !important;
  gap: 2px !important;
  white-space: nowrap !important;
  line-height: 20px !important;
}

/* Mobile User Account Action Sheet - Above blurred backdrop (z-index: 1000005) */
.mobile-user-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #111827 !important;
  color: #f8fafc !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
  z-index: 1000005 !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: 16px 20px max(24px, env(safe-area-inset-bottom, 24px)) !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: none;
}

.mobile-user-sheet.active {
  display: block !important;
  transform: translateY(0) !important;
}

.user-sheet-handle {
  width: 44px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  margin: 0 auto 14px;
}

.user-sheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  position: relative;
}

.user-sheet-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
  flex-shrink: 0;
}

.user-sheet-info {
  flex: 1;
  min-width: 0;
}

.user-sheet-name {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-sheet-phone {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.user-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-sheet-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.user-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.15s ease;
}

.user-sheet-item:hover,
.user-sheet-item:active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.user-sheet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
}

.user-sheet-logout-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.user-sheet-logout-btn:hover,
.user-sheet-logout-btn:active {
  background: #ef4444;
  color: #ffffff;
}

/* Mobile Navigation Drawer Profile Card (Logged-in Customer) */
.nav-drawer-user-profile {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.drawer-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.drawer-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-user-details {
  flex: 1;
  min-width: 0;
}

.drawer-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-user-phone {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 1px;
}

.drawer-user-logout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.drawer-user-logout:hover {
  background: #ef4444;
  color: #ffffff;
}

.google-float-badge,
#googleFloatBadge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* No horizontal overflow (using clip to preserve position: sticky) */
html,
body,
.main,
.footer,
.hero,
.section {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

/* ── Mobile Viewport Optimization (max 768px) ── */
@media (max-width: 768px) {

  /* Hide footer section on all public main and sub pages only in mobile view */
  footer.footer,
  #footer,
  .footer {
    display: none !important;
  }

  /* Request 1 & 2: Compact Search Card Padding */
  .search-card,
  #homeSearchSection .search-card {
    padding: var(--space-3) !important;
    border-radius: 18px !important;
  }

  .search-card .search-tabs {
    margin-bottom: var(--space-3) !important;
  }

  /* Clean mobile header - strictly zero vertical overflow & 100% viewport fit */
  .header {
    height: 56px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .header .container {
    height: 100% !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-logo {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-logo img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  .header-logo-text {
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: nowrap !important;
    letter-spacing: -0.35px !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
  }

  .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: visible !important;
    max-height: 56px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .header-actions .lang-toggle,
  .header-actions #langToggle {
    padding: 2px 5px !important;
    font-size: 10px !important;
    height: 25px !important;
    line-height: 20px !important;
    border-radius: 6px !important;
  }

  .header-actions .theme-toggle,
  .header-actions #themeToggle {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    padding: 0 !important;
  }

  .header-actions a[href="/auth"].btn,
  .header-actions .btn-primary.btn-sm,
  .header-actions .btn {
    display: inline-flex !important;
    padding: 2px 7px !important;
    font-size: 10.5px !important;
    height: 25px !important;
    border-radius: 999px !important;
    gap: 2px !important;
    white-space: nowrap !important;
    line-height: 20px !important;
  }

  /* Completely remove scrollbars from tabs and carousels */
  .tabs,
  .search-tabs,
  #destinations .tabs,
  .filter-chips-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs::-webkit-scrollbar,
  .search-tabs::-webkit-scrollbar,
  #destinations .tabs::-webkit-scrollbar,
  .filter-chips-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Explore South India tab pills */
  #destinations .tabs,
  .tabs {
    justify-content: flex-start !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
  }

  #destinations .tab,
  .tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* Popular Tour Packages mobile grid */
  #packageGrid {
    grid-template-columns: 1fr !important;
  }

  /* Explore Our Fleet mobile grid */
  #fleetGrid {
    grid-template-columns: 1fr !important;
  }

  /* ── Item 1.3: Explore South India Destinations 2-Column Mobile Grid ── */
  #destinationGrid,
  #destinationGrid.grid-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #destinationGrid .destination-card {
    aspect-ratio: 4 / 4.8 !important;
    border-radius: 14px !important;
  }

  #destinationGrid .destination-card-content {
    padding: 10px 10px !important;
  }

  #destinationGrid .destination-card-state {
    font-size: 9.5px !important;
    margin-bottom: 2px !important;
    letter-spacing: 0.05em !important;
  }

  #destinationGrid .destination-card-name {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  #destinationGrid .destination-card-desc {
    display: none !important;
  }

  /* ── Item 1.4: Why Choose Us Compact 2x2 Grid & Sleek Cards ── */
  #whyChooseUs .grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #whyChooseUs .card-glass {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #whyChooseUs .card-glass>div:first-child {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin: 0 auto 8px !important;
    flex-shrink: 0 !important;
  }

  #whyChooseUs .card-glass>div:first-child svg {
    width: 20px !important;
    height: 20px !important;
  }

  #whyChooseUs .card-glass h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  #whyChooseUs .card-glass p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}




/* ══════════════════════════════════════════════════════════════════
   MOBILE APP-STYLE UI FOR BOOK-CAB & BOOKING PAGES (UBER / OLA UX)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 0. Prevent Horizontal Scroll on Mobile ── */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .page-book-cab .container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── 1. Book-Cab Hero & Layout ── */
  .page-book-cab .page-hero,
  .cab-hero-section {
    padding: calc(var(--header-height, 56px) + 14px) 16px 18px !important;
    text-align: left !important;
    min-height: auto !important;
  }

  .page-book-cab .page-hero .section-label,
  .cab-hero-section .section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    background: rgba(232, 163, 23, 0.2) !important;
    border: 1px solid rgba(232, 163, 23, 0.35) !important;
    color: var(--primary-saffron) !important;
    margin-bottom: 6px !important;
  }

  .page-book-cab .page-hero h1,
  .cab-hero-section h1 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 4px 0 6px !important;
    color: #ffffff !important;
  }

  .page-book-cab .page-hero p,
  .cab-hero-section p {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: var(--neutral-300) !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .page-book-cab .cab-booking-section {
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  .page-book-cab .section.section-alt {
    margin-top: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 74px !important;
  }

  .page-book-cab .card-glass {
    padding: 12px 12px 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }

  /* ── 2. Ride Type Segmented Tabs: 3 Rows (2 in Row 1, 2 in Row 2, 5th in Row 3) ── */
  .cab-service-tabs,
  .search-tabs,
  .search-tabs.cab-tabs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    overflow-x: visible !important;
    width: 100% !important;
    background: #f1f5f9 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .cab-service-tabs::-webkit-scrollbar,
  .search-tabs::-webkit-scrollbar,
  .search-tabs.cab-tabs-grid::-webkit-scrollbar {
    display: none !important;
  }

  .cab-service-tab,
  .search-tab.cab-tab,
  .search-tab.cab-service-tab {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    text-align: left !important;
    border: 1.5px solid transparent !important;
    background: var(--bg-card, #ffffff) !important;
    color: #475569 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  /* 5th trip type spans entire third row */
  .cab-service-tabs>button:nth-child(5),
  .search-tabs>button:nth-child(5),
  .cab-service-tab:nth-child(5),
  #tabRunningCab,
  #tabRunning {
    grid-column: 1 / -1 !important;
  }

  .cab-service-tab.active,
  .search-tab.cab-tab.active,
  .search-tab.cab-service-tab.active,
  .cab-tab.active {
    background: #FFFBEB !important;
    border-color: #F59E0B !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.16) !important;
    font-weight: 800 !important;
    transform: translateY(-2px) !important;
    position: relative !important;
  }

  .cab-service-tab.active::after,
  .search-tab.cab-service-tab.active::after,
  .cab-tab.active::after {
    display: none !important;
  }

  .cab-service-tab.active .tab-icon,
  .search-tab.cab-service-tab.active .tab-icon,
  .cab-tab.active .tab-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28) !important;
    border-radius: 9px !important;
    border: none !important;
  }

  .cab-service-tab.active .tab-icon svg,
  .search-tab.cab-service-tab.active .tab-icon svg,
  .cab-tab.active .tab-icon svg {
    stroke: #FFFFFF !important;
    stroke-width: 2.2 !important;
  }

  .cab-service-tab .tab-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cab-service-tab .tab-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .cab-service-tab .tab-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .cab-service-tab .tab-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .cab-service-tab.active .tab-title,
  .search-tab.cab-service-tab.active .tab-title,
  .cab-tab.active .tab-title {
    color: #0F172A !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  .cab-service-tab .tab-sub {
    font-size: 9px !important;
    color: #64748b !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .cab-service-tab.active .tab-sub,
  .search-tab.cab-service-tab.active .tab-sub,
  .cab-tab.active .tab-sub {
    color: #B45309 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  .local-packages-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .local-pkg-btn {
    padding: 8px 4px !important;
  }

  .local-pkg-btn .pkg-duration {
    font-size: 11px !important;
  }

  .local-pkg-btn .pkg-distance {
    font-size: 9px !important;
  }

  .local-pkg-btn .pkg-pill-badge {
    display: none !important;
  }

  /* ── 3. Popular Route Quick Chips (Smooth Carousel, 0 Scrollbars) ── */
  .route-chips-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 2px 6px !important;
  }

  .route-chips-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .route-preset-chip {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
  }

  .route-preset-chip.active {
    border-color: var(--primary-saffron) !important;
    background: rgba(232, 163, 23, 0.1) !important;
    color: #d97706 !important;
  }

  /* ── 4. Uber/Ola Vertical Location Card ── */
  .cities-grid {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: var(--bg-card-alt, #f8fafc) !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    border-radius: 16px !important;
    padding: 10px 12px 10px 34px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .cities-grid::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    border-left: 2px dashed #cbd5e1;
    z-index: 1;
  }

  .cities-grid .form-group {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .cities-grid .form-group:first-child .form-label::before {
    content: '🟢';
    position: absolute;
    left: -22px;
    top: 1px;
    font-size: 10px;
    z-index: 2;
  }

  .cities-grid .form-group:last-child .form-label::before {
    content: '🔴';
    position: absolute;
    left: -22px;
    top: 1px;
    font-size: 10px;
    z-index: 2;
  }

  .cities-grid .form-label {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin-bottom: 3px !important;
  }

  .cities-grid .form-input {
    width: 100% !important;
    height: 40px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 9px !important;
    padding: 0 42px 0 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .cities-grid .city-swap-container,
  .home-cab-row-1 .city-swap-container,
  .booking-route-row .city-swap-container {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: center !important;
    margin: -4px auto !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    display: none !important;
  }

  .cities-grid .city-swap-btn,
  .home-cab-row-1 .city-swap-btn,
  .booking-route-row .city-swap-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f59e0b 0%, #e8a317 50%, #d97706 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(232, 163, 23, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .cities-grid .city-swap-btn:active,
  .home-cab-row-1 .city-swap-btn:active,
  .booking-route-row .city-swap-btn:active {
    transform: rotate(90deg) scale(0.92) !important;
    box-shadow: 0 1px 4px rgba(232, 163, 23, 0.25) !important;
  }

  .cities-grid .city-swap-btn svg,
  .home-cab-row-1 .city-swap-btn svg,
  .booking-route-row .city-swap-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  /* ── 5. Date & Time 2-Column Responsive Grid ── */
  .datetime-pax-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .datetime-pax-grid .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    flex: none !important;
  }

  .datetime-pax-grid .form-label {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
  }

  .datetime-pax-grid .form-input,
  .datetime-pax-grid .form-select {
    width: 100% !important;
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
  }

  .datetime-pax-grid .form-group:last-child {
    grid-column: 1 / -1 !important;
  }

  /* ── 6. Compact Route Telemetry Strip ── */
  .route-telemetry-card {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    margin-bottom: 10px !important;
  }

  .route-telemetry-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  #telemetryRouteTitle {
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  #telemetryHighwayBadge {
    font-size: 10px !important;
  }

  .telemetry-badges-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .telemetry-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid #dcfce7 !important;
    font-weight: 700 !important;
  }

  .route-visual-strip {
    display: none !important;
  }

  /* ── 7. Compact Add-on Toggles ── */
  .calculator-toggles-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .calc-toggle-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: auto !important;
  }

  /* ── 8. Ola/Uber Horizontal Ride Tier Cards ── */
  /* ── 8. Book Cab: Select Vehicle Cards Mobile Enhancement ── */
  #cabVehicleSelectGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .cab-vehicle-card-v2 {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
    position: relative !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    gap: 8px !important;
    min-height: auto !important;
  }

  .cab-vehicle-card-v2:hover {
    transform: none !important;
  }

  .cab-vehicle-card-v2.selected {
    border-color: var(--primary-saffron, #e8a317) !important;
    background: var(--bg-card-alt, #fffcf5) !important;
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.35) !important;
  }

  .cab-vehicle-card-v2::after {
    display: none !important;
  }

  .cab-vehicle-img-wrapper {
    width: 100% !important;
    height: 125px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--bg-card-alt, #f8fafc) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cab-vehicle-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
  }

  .cab-vehicle-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .cab-vehicle-category-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    background: #fef3c7 !important;
    padding: 2.5px 8px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: fit-content !important;
    box-sizing: border-box !important;
  }

  .cab-vehicle-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 3px 0 1px 0 !important;
    line-height: 1.2 !important;
  }

  .cab-vehicle-capacity-sub {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  .cab-vehicle-price {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--primary-saffron, #e8a317) !important;
    line-height: 1.1 !important;
  }

  .cab-vehicle-rate-sub {
    font-size: 10px !important;
    color: #64748b !important;
  }

  .cab-vehicle-specs-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 4px 0 !important;
    font-size: 10.5px !important;
  }

  .cab-vehicle-specs-row span {
    background: #f1f5f9 !important;
    color: #334155 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .cab-vehicle-body .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
  }

  /* ── 9. Book Cab: Static Fare Summary Card (Inline) & Sticky Mobile CTA Bar ── */
  .fare-summary-box {
    position: static !important;
    width: 100% !important;
    background: linear-gradient(135deg, #fffcf5 0%, #fff8eb 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(232, 163, 23, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
    border: 1.5px solid rgba(232, 163, 23, 0.2) !important;
    margin-top: 14px !important;
  }

  .fare-summary-box>div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fare-summary-box>div:first-child>div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #calcVehicleName {
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  #calcTotalFare {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: var(--primary-saffron) !important;
    line-height: 1.1 !important;
  }

  #calcDistance {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 700 !important;
  }

  #calcRateMeta {
    font-size: 10px !important;
    color: var(--text-tertiary) !important;
    line-height: 1.4 !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
  }

  #cabProceedBtn {
    width: 100% !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 8px 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(232, 163, 23, 0.38) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, var(--primary-saffron) 0%, var(--primary-saffron-dark) 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  .cab-vehicle-card-v2 .btn,
  #cabVehicleList .btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
  }

  /* ── Book Cab: Return Schedule — Full Width Date, Full Width Dropdown Match ── */
  #returnScheduleRow,
  .return-schedule-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #returnScheduleRow .retdate-col,
  .return-schedule-row .retdate-col,
  #returnDateGroup,
  #cabReturnDate {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .return-schedule-row #returnHelperNote {
    display: none !important;
  }

  /* ── Book Cab: Popular Routes Header — No Text Break ── */
  #popularChipsContainer>div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  #popularChipsLabel {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  #popularChipsContainer>div:first-child>span:last-child {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Enhanced Bottom Mobile Sticky Booking Bar */
  .mobile-sticky-booking-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 2px solid var(--primary-saffron, #e8a317) !important;
    padding: 10px 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
    backdrop-filter: blur(10px) !important;
  }

  .mobile-sticky-booking-bar .msb-fare-wrap {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
  }

  .mobile-sticky-booking-bar .msb-label {
    font-size: 10px !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  .mobile-sticky-booking-bar .msb-price {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: var(--primary-saffron, #e8a317) !important;
  }

  .mobile-sticky-booking-bar .msb-vehicle {
    font-size: 10.5px !important;
    color: #475569 !important;
    font-weight: 700 !important;
  }

  .mobile-sticky-booking-bar .btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(232, 163, 23, 0.35) !important;
  }

  /* ── Fare Breakdown Swipe-Up Expandable Panel ── */
  .fare-breakdown-details {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .fare-breakdown-details.expanded {
    max-height: 600px !important;
    overflow: visible !important;
    border-top: 1px dashed rgba(232, 163, 23, 0.25) !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  /* ── Page Hero Spacing Fix — Remove gap between navbar and hero ── */
  .page-hero {
    padding-top: calc(var(--header-height, 64px) + 16px) !important;
    padding-bottom: 20px !important;
    margin-top: 0 !important;
  }

  .page-hero h1 {
    font-size: 1.45rem !important;
    margin-bottom: 6px !important;
  }

  .page-hero p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .page-hero .section-label {
    font-size: 10.5px !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }

  /* ── Packages & Destinations: Enhanced Filter Bar Section ── */
  .filter-controls-row {
    width: 100% !important;
    flex-direction: column !important;
  }

  .filter-controls-row .form-input {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .filter-controls-row .filter-select-box {
    width: 100% !important;
  }

  .filter-controls-row .filter-select-box .form-select {
    width: 100% !important;
    font-size: 12.5px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
  }

  /* State Filter Tabs — Compact Horizontal Scroll Pills */
  .filter-state-tab,
  .dest-tab {
    font-size: 11px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
  }

  /* Category / Theme Chips Row */
  .category-chips-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .category-chips-row>span:first-child {
    width: 100% !important;
    margin-right: 0 !important;
    font-size: 10.5px !important;
  }

  .filter-cat-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Radius Chips Row — Label on Own Row */
  .radius-chips-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .radius-chips-row>span:first-child {
    width: 100% !important;
    margin-right: 0 !important;
    font-size: 10.5px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px dashed var(--border-light, #e2e8f0) !important;
  }

  .dest-radius-pill {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Packages Grid — Single Column on Mobile */
  #packagesList.grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Destinations Grid — Single Column on Mobile */
  #destinationsFullGrid.grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Package Count & Info Bar */
  #packageCount,
  #destCount {
    font-size: 12.5px !important;
    width: 100% !important;
  }

  /* Enhanced Official Vehicle Tariff Cards */
  .mobile-tariff-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tariff-mobile-card {
    background: var(--bg-card, #ffffff) !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .tariff-mobile-card.highlight {
    border-color: var(--primary-saffron, #e8a317) !important;
    background: var(--bg-card-alt, #fffcf5) !important;
  }

  .tariff-mobile-card-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-primary, #0f172a) !important;
  }

  .tariff-mobile-card-sub {
    font-size: 11.5px !important;
    color: var(--text-tertiary, #64748b) !important;
    margin-top: 2px !important;
  }

  .tariff-mobile-row {
    font-size: 12px !important;
    color: var(--text-primary, #0f172a) !important;
  }

  .tariff-mobile-row-label {
    font-size: 11.5px !important;
    color: var(--text-secondary, #475569) !important;
  }

  .tariff-mobile-row-val {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #0f172a) !important;
  }

  /* ── 10. Booking Page: Step Indicator (Compact 4-Step Pill Bar) ── */
  .page-booking main,
  .page-booking .booking-main-wrap {
    margin-top: 0 !important;
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
    /* Clean, exact clearance for mobile bottom nav (64px) & sticky bar (~58px) with zero empty void */
  }

  .step-indicator {
    position: sticky !important;
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    transition: top 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-medium, #e2e8f0) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    margin: 0 -14px 16px -14px !important;
    gap: 0 !important;
    box-shadow: 0 4px 14px rgba(10, 22, 40, 0.08) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }

  body.header-hidden .step-indicator,
  body.header-is-hidden .step-indicator,
  .header.header-hidden~main .step-indicator,
  body:has(.header.header-hidden) .step-indicator {
    top: env(safe-area-inset-top, 0px) !important;
  }

  [data-theme="dark"] .step-indicator {
    background: #0f172a !important;
    border-color: #334155 !important;
  }

  .step-indicator::before {
    display: none !important;
    content: none !important;
  }

  [data-theme="dark"] .step-indicator::before {
    display: none !important;
    content: none !important;
  }

  .step-indicator-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Connecting line ONLY between steps: step 1->2, 2->3, 3->4. ZERO line before step 1 or after step 4 */
  .step-indicator-item:not(:last-child)::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    width: 100% !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
    background: var(--border-medium, #cbd5e1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  [data-theme="dark"] .step-indicator-item:not(:last-child)::after {
    background: #334155 !important;
  }

  .step-indicator-item:last-child::after {
    display: none !important;
    content: none !important;
  }

  .step-circle {
    position: relative !important;
    z-index: 2 !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: var(--bg-secondary, #f8fafc) !important;
    border: 2px solid var(--border-medium, #cbd5e1) !important;
  }

  [data-theme="dark"] .step-circle {
    background: #1e293b !important;
    border-color: #475569 !important;
  }

  .step-indicator-item.active .step-circle {
    background: var(--primary-saffron, #e8a317) !important;
    border-color: var(--primary-saffron, #e8a317) !important;
    color: var(--primary-navy, #0a1628) !important;
    box-shadow: 0 0 0 4px rgba(232, 163, 23, 0.2) !important;
  }

  .step-indicator-item.completed .step-circle,
  .step-indicator-item.step-4-confirmed .step-circle {
    background: var(--accent-emerald, #10b981) !important;
    border-color: var(--accent-emerald, #10b981) !important;
    color: #ffffff !important;
  }

  .step-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 72px !important;
    word-break: normal !important;
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-secondary, #64748b) !important;
  }

  .step-indicator-item.active .step-label {
    color: var(--primary-navy, #0a1628) !important;
    font-weight: 800 !important;
  }

  [data-theme="dark"] .step-label {
    color: #94a3b8 !important;
  }

  [data-theme="dark"] .step-indicator-item.active .step-label {
    color: #f8fafc !important;
  }

  /* Booking Route Row Mobile Stacking */
  .booking-route-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    position: relative !important;
    grid-template-columns: none !important;
  }

  .booking-route-row .form-group {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .booking-route-row .city-swap-container {
    position: relative !important;
    align-self: center !important;
    margin: -4px auto !important;
    z-index: 5 !important;
    transform: none !important;
  }

  .booking-route-row .city-swap-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(90deg) !important;
  }

  /* ── 11. Booking Page: Step 1 Vehicle Preview & Form Controls ── */
  .page-booking main {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .booking-layout,
  .booking-layout>div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }

  .booking-step-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  .booking-step-content * {
    box-sizing: border-box !important;
  }

  .booking-step-content h3 {
    font-size: 17px !important;
    margin-bottom: 10px !important;
  }

  .booking-step-content .form-label {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  .booking-vehicle-preview {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    background: var(--bg-card-alt, #f8fafc) !important;
    border: 1px solid var(--border-medium, #e2e8f0) !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .booking-vehicle-img {
    width: 68px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: var(--bg-card, #ffffff) !important;
    flex-shrink: 0 !important;
  }

  .booking-vehicle-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .booking-vehicle-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    word-break: break-word !important;
  }

  .booking-vehicle-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }

  .vehicle-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid #cbd5e1 !important;
  }

  /* Form Grid on Step 1: Full width stacked inputs */
  .booking-step-1-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .booking-step-1-grid .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .booking-datetime-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .booking-datetime-row .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .booking-datetime-row .form-input {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 8px !important;
    font-size: 12.5px !important;
  }

  .field-label-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: auto !important;
    margin-bottom: 6px !important;
  }

  /* Pickup Location & Use Location ALWAYS strictly in the same row */
  .pickup-group .field-label-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 6px !important;
  }

  .pickup-group .field-label-header .form-label {
    white-space: nowrap !important;
    margin-bottom: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11.5px !important;
  }

  .pickup-group .btn-field-micro {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
  }

  #lblBookingDrop {
    white-space: normal !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .btn-field-micro {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }

  .multi-stop-builder {
    padding: 12px 14px !important;
    margin: 6px 0 10px !important;
  }

  .add-stop-row {
    flex-direction: row !important;
    gap: 6px !important;
  }

  .add-stop-row .form-input {
    min-width: 0 !important;
    font-size: 12.5px !important;
    height: 44px !important;
  }

  .add-stop-row .btn {
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    height: 44px !important;
  }

  /* ── 12. Booking Page: Step 2 Passenger Information ── */
  .cust-name-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    grid-template-columns: none !important;
    position: relative !important;
  }

  .cust-name-row>div:first-child {
    width: 82px !important;
    flex-shrink: 0 !important;
  }

  .cust-name-row>div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .cust-phone-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    grid-template-columns: none !important;
  }

  .cust-phone-row .form-group {
    width: 100% !important;
    margin-bottom: 0 !important;
    position: relative !important;
  }

  .cust-phone-row .form-label {
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  /* Special Requests and Address Textareas Without Scroll */
  .booking-step-content .form-textarea {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
  }

  #custNotes,
  .booking-step-content #custNotes {
    min-height: 98px !important;
    height: auto !important;
    overflow-y: hidden !important;
    resize: none !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
  }

  #custAddress,
  .booking-step-content #custAddress {
    min-height: 64px !important;
    padding: 9px 12px !important;
  }

  /* Validation Popover: Keep completely within viewport */
  .form-error-popover {
    white-space: normal !important;
    max-width: calc(100vw - 36px) !important;
    width: max-content !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  /* Step Action Buttons (Reduced Sleek Sizes for Mobile: 42px Height) */
  .booking-step-actions,
  .booking-step-content>div:last-child {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .booking-step-actions button,
  .booking-step-actions a,
  .booking-step-content>div:last-child button,
  .booking-step-content>div:last-child a {
    margin: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .booking-step-actions .btn-secondary,
  .booking-step-content>div:last-child button.btn-secondary,
  .booking-step-content>div:last-child a.btn-secondary {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .btn-step1-back .btn-text-full {
    display: inline !important;
  }

  .btn-step1-back .btn-text-short {
    display: none !important;
  }

  /* Keep forward CTAs exclusively in the mobile sticky thumb card; hide redundant duplicate from in-form area */
  .booking-step-actions .btn-primary,
  .booking-step-content>div:last-child button.btn-primary,
  #btnSubmitBooking {
    display: none !important;
  }

  /* ── 13. Booking Page: Step 3 Review, Cost Breakdown & Payment Options ── */
  /* Step 3: Passenger Details Card */
  .step3-passenger-card {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    border: 1px solid var(--border-medium, #e2e8f0) !important;
    background: #f8fafc !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .step3-passenger-card h4 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    color: var(--primary-navy) !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-light, #edf2f7) !important;
  }

  .step3-passenger-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .step3-passenger-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #edf2f7 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .step3-passenger-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .step3-item-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    flex-shrink: 0 !important;
    max-width: 40% !important;
  }

  .step3-passenger-item strong,
  .step3-passenger-item span:not(.step3-item-label) {
    text-align: right !important;
    word-break: break-word !important;
    font-size: 12.5px !important;
  }

  #revPhone {
    white-space: nowrap !important;
    font-family: monospace !important;
    font-size: 12.5px !important;
  }

  /* Step 3: Detailed Cost Breakdown Receipt Card */
  .step3-breakdown-card {
    border: 1px solid var(--border-medium, #e2e8f0) !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .step3-breakdown-header {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .step3-breakdown-body {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    line-height: normal !important;
  }

  .step3-breakdown-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 12px !important;
    flex-wrap: nowrap !important;
  }

  .step3-breakdown-row>span:first-child {
    color: #475569 !important;
    flex: 1 1 auto !important;
    line-height: 1.35 !important;
  }

  .step3-breakdown-row>span:last-child {
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-align: right !important;
  }

  .step3-breakdown-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
    border-top: 2px dashed #cbd5e1 !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
  }

  .step3-breakdown-total #breakdownTotal {
    font-size: 18px !important;
    color: var(--primary-saffron-dark, #b45309) !important;
  }

  .promo-code-wrap {
    display: flex !important;
    gap: 6px !important;
    max-width: 100% !important;
  }

  .promo-code-wrap .promo-input {
    flex: 1 !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    min-width: 0 !important;
  }

  .promo-code-wrap .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .payment-methods-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .payment-method-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .payment-method-card.selected {
    border-color: var(--primary-saffron) !important;
    background: #fffcf0 !important;
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.16) !important;
  }

  .payment-card-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .payment-card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    min-width: 0 !important;
  }

  .payment-card-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .payment-card-desc {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 3px 0 0 !important;
    line-height: 1.35 !important;
  }

  .upi-qr-container {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .upi-qr-svg-wrapper img {
    width: 140px !important;
    height: 140px !important;
    max-width: 100% !important;
  }

  #btnOpenUpiApp {
    width: 100% !important;
    font-size: 12.5px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
  }

  .upi-app-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }

  .upi-app-pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* Step 3: Sleek Compact UPI ID Pill & Copy Button */
  .upi-id-pill-wrapper {
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .upi-id-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 3px 4px 3px 10px !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  .upi-pill-lbl {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }

  .upi-pill-code {
    font-family: monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--primary-navy, #0f172a) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .btn-upi-copy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    color: var(--primary-navy, #0f172a) !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
  }

  .btn-upi-copy:active {
    transform: scale(0.95) !important;
    background: #e2e8f0 !important;
  }

  .upi-pill-merchant {
    font-size: 11px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  /* ── Step 3: Dynamic UPI Trust & Security Strip (Instant Refund & GST Merchant) ── */
  .upi-trust-strip {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .upi-trust-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #334155 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .upi-trust-lock-icon {
    display: inline-flex !important;
    align-items: center !important;
    color: #059669 !important;
    flex-shrink: 0 !important;
  }

  .upi-trust-badges {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .upi-trust-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 4px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .upi-trust-pill.refund {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
  }

  .upi-trust-pill.gst {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
  }

  .upi-trust-pill svg {
    flex-shrink: 0 !important;
  }

  [data-theme="dark"] .upi-trust-strip {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] .upi-trust-header {
    color: #94a3b8 !important;
  }

  [data-theme="dark"] .upi-trust-pill.refund {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
  }

  [data-theme="dark"] .upi-trust-pill.gst {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

  /* ── 14. Booking Page: Step 4 Confirmation Redesign (Digital Boarding Ticket) ── */
  #stepContent4.conf-step-card,
  #stepContent4 {
    padding: 14px 14px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin-top: 6px !important;
  }

  .conf-celebration {
    margin-top: 2px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .conf-success-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 6px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
  }

  .conf-main-title {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: var(--primary-navy, #0a1628) !important;
    margin: 0 0 3px !important;
    letter-spacing: -0.3px !important;
  }

  .conf-main-sub {
    font-size: 12px !important;
    color: var(--text-secondary, #64748b) !important;
    margin: 0 auto 8px !important;
    max-width: 320px !important;
    line-height: 1.35 !important;
  }

  .conf-ref-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
  }

  .conf-ref-label {
    color: #92400e !important;
    font-weight: 600 !important;
  }

  .conf-ref-code {
    font-family: monospace !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #b45309 !important;
    letter-spacing: 0.5px !important;
  }

  /* Boarding Ticket Card */
  .conf-ticket-card {
    background: #ffffff !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    border-radius: 12px !important;
    margin: 0 auto 10px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .conf-ticket-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 7px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .conf-ticket-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary-navy, #0f172a) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .conf-ticket-status {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
  }

  .conf-ticket-body {
    padding: 9px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .conf-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .conf-row-label {
    color: #64748b !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }

  .conf-row-val {
    color: #0f172a !important;
    font-weight: 700 !important;
    text-align: right !important;
    word-break: break-word !important;
    flex: 1 1 auto !important;
  }

  .conf-row-val.mono {
    font-family: monospace !important;
  }

  .conf-row-val.text-success {
    color: #059669 !important;
  }

  .conf-row-val.text-primary {
    color: #2563eb !important;
  }

  .conf-row-val.text-amber {
    color: #d97706 !important;
  }

  .conf-divider-dashed {
    border-top: 1px dashed #cbd5e1 !important;
    margin: 3px 0 !important;
  }

  .conf-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 6px !important;
    border-top: 1.5px solid #e2e8f0 !important;
    margin-top: 1px !important;
  }

  .conf-total-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--primary-navy, #0f172a) !important;
  }

  .conf-total-val {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--primary-saffron-dark, #b45309) !important;
  }

  /* SLA Notice */
  .conf-sla-card {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 9px !important;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    margin-bottom: 9px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #166534 !important;
  }

  .conf-sla-icon {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Account Notice */
  .conf-account-notice {
    background: #f0fdfa !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 9px !important;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .conf-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .conf-account-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .conf-account-title {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .conf-member-badge {
    font-size: 9px !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
  }

  .conf-account-desc {
    font-size: 10.5px !important;
    color: #64748b !important;
    margin-top: 1px !important;
    line-height: 1.3 !important;
  }

  /* Streamlined Action Buttons (WhatsApp 42px, Mini actions 38px) */
  .conf-actions-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .conf-btn-wa {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 8px rgba(3, 115, 176, 0.3) !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
  }

  .conf-grid-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .btn-conf-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
  }

  .btn-conf-duty {
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
  }

  .btn-conf-gst {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
  }

  .btn-conf-cab {
    background: #f0fdf4 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
  }

  .btn-conf-acc {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
  }

  .btn-conf-chat {
    background: #eff6ff !important;
    border: 1px solid #93c5fd !important;
    color: #0284c7 !important;
  }

  .conf-home-wrap {
    margin-top: 2px !important;
    text-align: center !important;
  }

  .conf-home-link {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    padding: 5px 14px !important;
    border-radius: 16px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* Dark mode overrides for Step 4 */
  [data-theme="dark"] .conf-ticket-card {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] .conf-ticket-header {
    background: #0f172a !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] .conf-ticket-brand,
  [data-theme="dark"] .conf-row-val,
  [data-theme="dark"] .conf-main-title {
    color: #f1f5f9 !important;
  }

  [data-theme="dark"] .conf-account-notice {
    background: rgba(15, 118, 110, 0.15) !important;
    border-color: rgba(15, 118, 110, 0.3) !important;
  }

  [data-theme="dark"] .conf-sla-card {
    background: rgba(22, 101, 52, 0.15) !important;
    border-color: rgba(22, 101, 52, 0.3) !important;
    color: #86efac !important;
  }

  /* On mobile, Order Summary is handled exclusively by the Sticky Bottom Bar & Drawer.
     Hiding the desktop sidebar removes unwanted ~800px empty space after step content */
  .booking-layout>.booking-sidebar-card,
  #bookingSidebarCard.booking-sidebar-card,
  .booking-sidebar-card {
    display: none !important;
  }

  /* Hide Mobile Sticky Bar when Step 4 is active */
  body.step-4-active #bookingMobileStickyBar,
  #bookingMobileStickyBar.hidden-step4,
  body:has(#stepContent4[style*="display: block"]) #bookingMobileStickyBar {
    display: none !important;
  }

  /* Sticky Step Indicator and Page Layout Overflow */
  html.page-booking,
  body.page-booking,
  html:has(body.page-booking) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     MOBILE STICKY ORDER SUMMARY BAR & SLIDE-UP DRAWER
     ══════════════════════════════════════════════════════════════════ */
  .booking-mobile-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    padding: 8px 12px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }

  .bmsb-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
  }

  /* Left Tap Zone: Interactive trigger for Fare Breakup sheet */
  .bmsb-left-zone {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    cursor: pointer !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }

  .bmsb-left-zone:active {
    background: rgba(245, 158, 11, 0.1) !important;
    transform: scale(0.98) !important;
  }

  .bmsb-label-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .bmsb-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-tertiary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .bmsb-breakup-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: #d97706 !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    transition: all 0.2s ease !important;
  }

  .bmsb-left-zone:hover .bmsb-breakup-pill {
    background: rgba(245, 158, 11, 0.22) !important;
  }

  .bmsb-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .bmsb-price {
    font-size: 1.22rem !important;
    font-weight: 900 !important;
    color: var(--primary-saffron-dark, #d97706) !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .bmsb-meta {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #475569) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 180px !important;
    flex: 1 1 auto !important;
  }

  /* Right Action CTA: Advances Wizard Step */
  .bmsb-right-zone {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .bmsb-action-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.3) !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .bmsb-action-cta:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
  }

  .bmsb-action-cta.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  }

  .bmsb-action-cta.pulse-action {
    animation: bmsbPulse 2s infinite ease-in-out !important;
  }

  @keyframes bmsbPulse {

    0%,
    100% {
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    }

    50% {
      box-shadow: 0 4px 22px rgba(16, 185, 129, 0.7);
    }
  }

  .bmsb-action-icon {
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
  }

  .bmsb-action-cta:hover .bmsb-action-icon {
    transform: translateX(3px) !important;
  }

  /* Slide-Up Drawer Backdrop & Sheet */
  .mobile-summary-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(10, 22, 40, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1000001 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.25s ease !important;
  }

  .mobile-summary-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-summary-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 86vh !important;
    background: var(--bg-card, #ffffff) !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25) !important;
    z-index: 1000002 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-summary-drawer.open {
    transform: translateY(0) !important;
  }

  .msd-drag-handle {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 0 6px !important;
    cursor: grab !important;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .msd-drag-handle:active {
    cursor: grabbing !important;
  }

  .msd-pill {
    width: 44px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  .msd-drag-handle:active .msd-pill {
    background: var(--primary-saffron, #f59e0b) !important;
    transform: scaleX(1.1) !important;
  }

  .msd-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 16px 12px !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
  }

  .msd-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--primary-navy, #0a1628) !important;
    margin: 0 !important;
  }

  .msd-route-preview {
    font-size: 11.5px !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
    display: block !important;
  }

  .msd-close-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--bg-secondary, #f1f5f9) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-secondary, #475569) !important;
    cursor: pointer !important;
  }

  .msd-content {
    padding: 14px 16px 36px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
  }

  .msd-content h4 {
    display: none !important;
    /* Hide duplicate header inside drawer body */
  }

  /* Dark mode overrides for drawer & sticky bar */
  [data-theme="dark"] .booking-mobile-sticky-bar {
    background: rgba(30, 41, 59, 0.96) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  [data-theme="dark"] .bmsb-price {
    color: #fbbf24 !important;
  }

  [data-theme="dark"] .bmsb-breakup-pill {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
  }

  [data-theme="dark"] .bmsb-meta {
    color: #94a3b8 !important;
  }

  [data-theme="dark"] .mobile-summary-drawer {
    background: #1e293b !important;
    border-top: 1px solid #334155 !important;
  }

  [data-theme="dark"] .msd-header {
    border-bottom-color: #334155 !important;
  }

  [data-theme="dark"] .msd-title {
    color: #f8fafc !important;
  }

  [data-theme="dark"] .msd-close-btn {
    background: #334155 !important;
    color: #cbd5e1 !important;
  }

  /* ── 15. WhatsApp Floating Button Position ── */
  .page-book-cab .whatsapp-float,
  .page-booking .whatsapp-float {
    display: none !important;
    /* Hide completely during booking/checkout so forms/buttons are 100% unobstructed */
  }

  /* ══════════════════════════════════════════════════════════════════
     MOBILE HORIZONTAL SWIPEABLE VEHICLE CAROUSEL (TOUCH GESTURE)
     ══════════════════════════════════════════════════════════════════ */
  .mobile-vehicle-carousel-wrap {
    display: block !important;
    margin: 8px 0 18px 0 !important;
    position: relative !important;
  }

  .booking-vehicle-select-group {
    display: none !important;
    /* On mobile viewports, the horizontal swipeable carousel replaces the dropdown */
  }

  .mvc-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
  }

  .mvc-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--text-tertiary, #64748b) !important;
  }

  .mvc-swipe-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--primary-saffron-dark, #d97706) !important;
    background: rgba(245, 158, 11, 0.12) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    animation: mvcHintPulse 2.5s infinite ease-in-out !important;
  }

  @keyframes mvcHintPulse {

    0%,
    100% {
      opacity: 0.8;
      transform: translateX(0);
    }

    50% {
      opacity: 1;
      transform: translateX(3px);
    }
  }

  .mobile-vehicle-carousel {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 4px 12px 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .mobile-vehicle-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .mvc-card {
    flex: 0 0 144px !important;
    scroll-snap-align: center !important;
    background: var(--bg-card, #ffffff) !important;
    border: 2px solid var(--border-light, #e2e8f0) !important;
    border-radius: 16px !important;
    padding: 8px 10px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mvc-card:active {
    transform: scale(0.96) !important;
  }

  .mvc-card.active {
    border-color: #f59e0b !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.22) !important;
    transform: translateY(-2px) !important;
  }

  .mvc-badge {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: var(--text-tertiary, #64748b) !important;
    background: var(--bg-secondary, #f1f5f9) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    align-self: flex-start !important;
    margin-bottom: 6px !important;
  }

  .mvc-card.active .mvc-badge {
    background: #f59e0b !important;
    color: #ffffff !important;
  }

  .mvc-img-wrap {
    width: 100% !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
  }

  .mvc-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
  }

  .mvc-card:hover .mvc-img,
  .mvc-card.active .mvc-img {
    transform: scale(1.05) !important;
  }

  .mvc-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text-primary, #0f172a) !important;
    margin: 0 0 4px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .mvc-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .mvc-seats {
    color: var(--text-secondary, #64748b) !important;
  }

  .mvc-rate {
    color: var(--primary-saffron-dark, #d97706) !important;
    font-weight: 800 !important;
  }

  .mvc-check-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .mvc-card.active .mvc-check-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* Dark mode for vehicle carousel */
  [data-theme="dark"] .mvc-card {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] .mvc-img-wrap {
    background: #0f172a !important;
  }

  [data-theme="dark"] .mvc-name {
    color: #f8fafc !important;
  }

  [data-theme="dark"] .mvc-badge {
    background: #334155 !important;
    color: #94a3b8 !important;
  }

  [data-theme="dark"] .mvc-card.active {
    border-color: #f59e0b !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.03) 100%) !important;
  }

  /* ── Public Cab Booking Page Mobile Swipe Carousel (Issue 4) ── */
  .cab-vehicles-hint-desktop {
    display: none !important;
  }

  .cab-vehicles-swipe-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary-saffron-dark, #b45309) !important;
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
  }

  #cabVehicleSelectGrid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 6px 4px 14px 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin-bottom: 8px !important;
    grid-template-columns: none !important;
  }

  #cabVehicleSelectGrid::-webkit-scrollbar {
    display: none !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 {
    flex: 0 0 164px !important;
    width: 164px !important;
    min-width: 164px !important;
    max-width: 164px !important;
    scroll-snap-align: center !important;
    background: var(--bg-card, #ffffff) !important;
    border: 2px solid var(--border-light, #e2e8f0) !important;
    border-radius: 16px !important;
    padding: 8px 10px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2:active {
    transform: scale(0.96) !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2.selected {
    border-color: #f59e0b !important;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.22) !important;
    transform: translateY(-2px) !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2.selected::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 10px no-repeat !important;
    z-index: 3 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4) !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-category-tag {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15px !important;
    color: var(--text-tertiary, #64748b) !important;
    background: var(--bg-secondary, #f1f5f9) !important;
    padding: 2.5px 7px !important;
    border-radius: 6px !important;
    max-width: calc(100% - 16px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3.5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    line-height: 1.2 !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-category-tag svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2.selected .cab-vehicle-category-tag {
    background: #f59e0b !important;
    color: #ffffff !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2.selected .cab-vehicle-category-tag svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-img-wrapper {
    width: 100% !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-img-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2:hover .cab-vehicle-img-wrapper img,
  #cabVehicleSelectGrid .cab-vehicle-card-v2.selected .cab-vehicle-img-wrapper img {
    transform: scale(1.05) !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-body {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-end !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-body>div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-bottom: 0 !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text-primary, #0f172a) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-body>div:first-child>div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-capacity-sub {
    font-size: 10px !important;
    color: var(--text-secondary, #64748b) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-price {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: var(--primary-saffron-dark, #d97706) !important;
    white-space: nowrap !important;
  }

  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-rate-sub,
  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-specs-row,
  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-body>div[style*="font-size:11px"],
  #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-body>div[style*="font-size:10.5px"],
  #cabVehicleSelectGrid .cab-vehicle-card-v2 button.btn {
    display: none !important;
  }

  [data-theme="dark"] #cabVehicleSelectGrid .cab-vehicle-card-v2 {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  [data-theme="dark"] #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-img-wrapper {
    background: #0f172a !important;
  }

  [data-theme="dark"] #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-title {
    color: #f8fafc !important;
  }

  [data-theme="dark"] #cabVehicleSelectGrid .cab-vehicle-card-v2 .cab-vehicle-category-tag {
    background: #334155 !important;
    color: #94a3b8 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 3: ANDROID SYSTEM INTEGRATIONS
   - Material Pull-To-Refresh Indicator
   - Native Skeleton Shimmer Loaders
   - Native Web Share UI & Drawer Action Buttons
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. ANDROID MATERIAL PULL-TO-REFRESH ── */
.android-ptr-wrap {
  position: fixed !important;
  top: -65px !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  opacity: 0;
  will-change: transform, opacity;
}

.android-ptr-indicator {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.android-ptr-arrow {
  color: #d97706 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, opacity 0.2s ease !important;
}

.android-ptr-spinner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.android-ptr-spinner svg {
  width: 100% !important;
  height: 100% !important;
  transform-origin: center !important;
}

.android-ptr-track {
  stroke: #f1f5f9 !important;
}

.android-ptr-head {
  stroke: #f59e0b !important;
  stroke-linecap: round !important;
}

/* Ready threshold reached */
.android-ptr-wrap.ptr-ready .android-ptr-indicator {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35), 0 2px 8px rgba(15, 23, 42, 0.12) !important;
  transform: scale(1.08) !important;
}

.android-ptr-wrap.ptr-ready .android-ptr-arrow {
  color: #b45309 !important;
}

/* Refreshing active animation */
.android-ptr-wrap.ptr-refreshing .android-ptr-arrow {
  display: none !important;
}

.android-ptr-wrap.ptr-refreshing .android-ptr-spinner {
  display: flex !important;
}

.android-ptr-wrap.ptr-refreshing .android-ptr-spinner svg {
  animation: ptr-spin 0.85s linear infinite !important;
}

@keyframes ptr-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

[data-theme="dark"] .android-ptr-indicator {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .android-ptr-track {
  stroke: #334155 !important;
}

/* ── 2. NATIVE SKELETON SHIMMER LOADERS ── */
@keyframes android-skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.skeleton-shimmer {
  position: relative !important;
  overflow: hidden !important;
  background-color: #e2e8f0 !important;
  border-radius: 6px !important;
  color: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
  box-shadow: none !important;
}

.skeleton-shimmer * {
  visibility: hidden !important;
}

.skeleton-shimmer::after {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: translateX(-100%) !important;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.65) 50%,
      transparent 100%) !important;
  animation: android-skeleton-shimmer 1.35s infinite !important;
  content: '' !important;
  z-index: 10 !important;
}

[data-theme="dark"] .skeleton-shimmer {
  background-color: #334155 !important;
}

[data-theme="dark"] .skeleton-shimmer::after {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer::after {
    animation: none !important;
    background: rgba(255, 255, 255, 0.25) !important;
  }
}

/* ── 3. NATIVE WEB SHARE UI & BUTTONS ── */
.btn-share-trip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-share-trip svg {
  color: #d97706 !important;
  flex-shrink: 0 !important;
}

.btn-share-trip:hover {
  background: #ffffff !important;
  border-color: #f59e0b !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important;
  transform: translateY(-1px) !important;
}

.btn-share-trip:active {
  transform: scale(0.96) !important;
}

[data-theme="dark"] .btn-share-trip {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .btn-share-trip:hover {
  background: #334155 !important;
  border-color: #f59e0b !important;
  color: #f8fafc !important;
}

/* Order Summary Drawer Share Action Footer */
.msd-footer-actions {
  padding: 10px 18px 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #fafafa !important;
  margin-top: 10px !important;
}

.msd-share-action-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.msd-share-action-btn svg {
  color: #d97706 !important;
}

.msd-share-action-btn:hover {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

.msd-share-action-btn:active {
  transform: scale(0.98) !important;
}

[data-theme="dark"] .msd-footer-actions {
  background: #0f172a !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .msd-share-action-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .msd-share-action-btn:hover {
  background: #334155 !important;
  border-color: #f59e0b !important;
}

/* ══════════════════════════════════════════════════════════════════
   PUBLIC MOBILE MORE NAVIGATION DRAWER & BACKDROP (Native App Style)
   ══════════════════════════════════════════════════════════════════ */
.public-more-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(10, 22, 40, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1000001 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
}

.public-more-backdrop.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── Native Mobile Bottom Navigation Dock ── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .whatsapp-float {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }

  .back-to-top {
    bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
    right: 18px !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
    z-index: 9995 !important;
    padding: 0 4px calc(env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: content-box !important;
    align-items: center !important;
    justify-content: space-around !important;
    margin: 0 !important;
  }

  [data-theme="dark"] .mobile-bottom-nav {
    background: rgba(10, 22, 40, 0.96) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5) !important;
  }

  .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 6px 2px 4px !important;
    color: #64748B !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 1.2 !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
  }

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

  .mobile-bottom-nav-item .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 2px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .mobile-bottom-nav-item .icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    stroke: currentColor !important;
  }

  .mobile-bottom-nav-item span:not(.icon) {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    letter-spacing: -0.2px !important;
  }

  .mobile-bottom-nav-item.active {
    color: #E8A317 !important;
    font-weight: 800 !important;
  }

  .mobile-bottom-nav-item.active .icon {
    transform: translateY(-2px) !important;
  }

  .mobile-bottom-nav-item.active .icon svg {
    stroke: #E8A317 !important;
  }

  [data-theme="dark"] .mobile-bottom-nav-item {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .mobile-bottom-nav-item.active {
    color: #F5C96B !important;
  }

  [data-theme="dark"] .mobile-bottom-nav-item.active .icon svg {
    stroke: #F5C96B !important;
  }
}

/* ── Public More Bottom Sheet ── */
.public-more-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 24px 24px 0 0 !important;
  z-index: 1000002 !important;
  transform: translateY(100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.25) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
  color: #0F172A !important;
}

.public-more-sheet.open {
  transform: translateY(0%) !important;
}

[data-theme="dark"] .public-more-sheet {
  background: #0A1628 !important;
  border-top: 1px solid rgba(232, 163, 23, 0.35) !important;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.7) !important;
  color: #F8FAFC !important;
}

.public-more-handle {
  width: 44px !important;
  height: 4px !important;
  background: #CBD5E1 !important;
  border-radius: 999px !important;
  margin: 10px auto 6px auto !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .public-more-handle {
  background: rgba(255, 255, 255, 0.25) !important;
}

.public-more-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 18px 12px 18px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .public-more-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.public-more-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-theme="dark"] .public-more-title {
  color: #FFFFFF !important;
}

.public-more-sub {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .public-more-sub {
  color: #94A3B8 !important;
}

.public-more-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.public-more-close:hover {
  background: #E2E8F0 !important;
}

[data-theme="dark"] .public-more-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .public-more-close:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* User Profile Banner in More Sheet */
.public-more-user-card {
  margin: 10px 16px 4px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.public-more-user-card.guest {
  background: #FFFBEB !important;
  border: 1.5px solid #FCD34D !important;
}

.public-more-user-card.guest .public-more-user-name {
  color: #92400E !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.public-more-user-card.guest .public-more-user-sub {
  color: #B45309 !important;
  font-size: 12px !important;
}

.public-more-user-card.logged-in {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
}

.public-more-user-card.logged-in .public-more-user-name {
  color: #0284C7 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.public-more-user-card.logged-in .public-more-user-sub {
  color: #64748B !important;
  font-size: 12px !important;
}

[data-theme="dark"] .public-more-user-card.guest {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .public-more-user-card.guest .public-more-user-name {
  color: #FCD34D !important;
}

[data-theme="dark"] .public-more-user-card.guest .public-more-user-sub {
  color: #94A3B8 !important;
}

[data-theme="dark"] .public-more-user-card.logged-in {
  background: rgba(2, 132, 199, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.32) !important;
}

[data-theme="dark"] .public-more-user-card.logged-in .public-more-user-name {
  color: #38BDF8 !important;
}

[data-theme="dark"] .public-more-user-card.logged-in .public-more-user-sub {
  color: #94A3B8 !important;
}

.public-more-body {
  padding: 14px 16px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  flex: 1 !important;
}

.public-more-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  text-decoration: none !important;
  color: #0F172A !important;
  transition: all 0.2s ease !important;
}

.public-more-item:hover,
.public-more-item:active {
  background: #FFFBEB !important;
  border-color: #E8A317 !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .public-more-item {
  background: #132240 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .public-more-item:hover,
[data-theme="dark"] .public-more-item:active {
  background: #1E293B !important;
  border-color: #F5C96B !important;
}

.public-more-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2px !important;
}

.public-more-item-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: rgba(232, 163, 23, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #D97706 !important;
}

[data-theme="dark"] .public-more-item-icon {
  background: rgba(232, 163, 23, 0.18) !important;
  color: #F5C96B !important;
}

.public-more-item-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  display: block !important;
}

.public-more-item.active {
  background: rgba(232, 163, 23, 0.12) !important;
  border-color: var(--primary-saffron, #E8A317) !important;
  box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.4) !important;
}

[data-theme="dark"] .public-more-item.active {
  background: rgba(232, 163, 23, 0.2) !important;
  border-color: #F5C96B !important;
}

.public-more-item-badge {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(232, 163, 23, 0.15) !important;
  color: #D97706 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

[data-theme="dark"] .public-more-item-badge {
  color: #F5C96B !important;
  background: rgba(232, 163, 23, 0.22) !important;
}

.public-more-item-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .public-more-item-title {
  color: #F8FAFC !important;
}

.public-more-item-desc {
  font-size: 11px !important;
  color: #64748B !important;
  line-height: 1.3 !important;
}

[data-theme="dark"] .public-more-item-desc {
  color: #94A3B8 !important;
}

.public-more-hotline {
  padding: 10px 16px !important;
  border-top: 1px solid #F1F5F9 !important;
  display: flex !important;
  gap: 10px !important;
}

[data-theme="dark"] .public-more-hotline {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.public-more-hotline a {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

.public-more-hotline a:active {
  transform: scale(0.97) !important;
}

.hotline-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.hotline-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.25 !important;
}

.hotline-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  opacity: 0.95 !important;
}

.hotline-number {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.btn-hotline-call {
  background: #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-hotline-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
}

/* ── STRICT DESKTOP VIEWPORT ISOLATION (≥769px) ── */
@media (min-width: 769px) {

  .public-more-sheet,
  .public-more-backdrop,
  .mobile-bottom-nav,
  .admin-mobile-nav,
  .driver-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   UNIVERSAL ZERO-OVERFLOW & COMPACT MOBILE ENGINE (DOWN TO 350px VIEWPORT)
   Public • Admin • Driver • Customer Account • Modals • Tables • Multilingual
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Global Zero Overflow across all pages and containers */
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .container,
  .section,
  .hero,
  main,
  header,
  footer,
  .page-wrapper,
  .admin-wrapper,
  .driver-app-container,
  .account-wrapper {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 2. Public Home Cab Search Widget Mobile Ergonomics */
  .home-cab-row-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .home-cab-row-1 .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-cab-row-1 .city-swap-container {
    align-self: center !important;
    margin: -3px 0 !important;
  }

  .home-cab-row-1 .city-swap-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f59e0b 0%, #e8a317 50%, #d97706 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(232, 163, 23, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(90deg) !important;
    font-size: 16px !important;
    color: #ffffff !important;
    cursor: pointer !important;
  }

  .home-cab-row-1 .city-swap-btn svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  /* Destination Page: Radius Label on Separate Row */
  .radius-chips-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .radius-chips-row>span:first-child {
    width: 100% !important;
    margin-right: 0 !important;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed var(--border-light, #e2e8f0) !important;
  }

  /* Packages & Destinations: Category Chips Row Label on Own Row */
  .category-chips-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .category-chips-row>span:first-child {
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Destination/Packages: Filter Controls Stack Vertically */
  .filter-controls-row {
    width: 100% !important;
  }

  .filter-controls-row .form-input,
  .filter-controls-row .filter-select-box {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .home-cab-row-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .home-cab-row-2 .form-group {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin-bottom: 0 !important;
  }

  .home-cab-row-2 #homeCabSubmitBtn {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  /* 3. Horizontal Swipable Pills (Destinations, Gallery, Filters) */
  .tabs,
  .destinations-tabs,
  .category-filter-pills {
    display: flex !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
  }

  .tabs::-webkit-scrollbar,
  .destinations-tabs::-webkit-scrollbar,
  .category-filter-pills::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  .tab,
  .destinations-tabs .tab,
  .category-filter-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
  }

  /* 4. Testimonials & Google Reviews Mobile Polish */
  .google-business-card {
    padding: 14px !important;
  }

  .gb-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-top: 10px !important;
  }

  .gb-right a,
  .gb-right button,
  .btn-google-review,
  .btn-google-maps,
  .btn-google-qr {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 3px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 7px !important;
    text-align: center !important;
    letter-spacing: -0.2px !important;
  }

  .gb-right svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* ── Home Page: Remove Empty Spacer above Book Cab Button on Mobile (Issue 2) ── */
  .desktop-only-label-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── CTA Section: Compact Adventure Buttons on Mobile (Issue 3) ── */
  .section-dark .btn-xl {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    gap: 6px !important;
  }

  .section-dark .btn-xl svg {
    width: 16px !important;
    height: 16px !important;
  }

  .review-filter-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .review-filter-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  #testimonialsGrid,
  .testimonials-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .testimonial-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .testimonial-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .testimonial-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
    word-break: break-word !important;
  }

  /* 5. Fluid Responsive Modals across Admin, Public & Driver */
  .modal,
  .admin-modal,
  .review-qr-modal,
  .track-cab-modal,
  .app-dialog-card {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 20px) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 30px) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 10001 !important;
  }

  .modal-header,
  .admin-modal-header {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--border-light, #e2e8f0) !important;
    background: inherit !important;
  }

  .modal-title,
  .admin-modal-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .modal-close,
  .admin-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .modal-body,
  .admin-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  .modal-footer,
  .admin-modal-footer {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--border-light, #e2e8f0) !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  /* Customer Account Reschedule & Cancel Modal: Zero Blank Space & Fluid Responsive Footers */
  #rescheduleModalOverlay .modal,
  #cancelModalOverlay .modal {
    height: auto !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #rescheduleModalOverlay .modal form,
  #cancelModalOverlay .modal form {
    height: auto !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #rescheduleModalOverlay .modal-body,
  #cancelModalOverlay .modal-body {
    flex: 0 1 auto !important;
    max-height: calc(90vh - 140px) !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
  }

  #rescheduleModalOverlay .modal-footer,
  #cancelModalOverlay .modal-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  #rescheduleModalOverlay .modal-footer .btn,
  #cancelModalOverlay .modal-footer .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  .btn-action-locked,
  #rescheduleModalOverlay .modal-footer .btn-action-locked,
  #cancelModalOverlay .modal-footer .btn-action-locked {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1.5px solid #f87171 !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
  }

  /* Customer Account Booking Card Action Buttons Grid */
  /* Customer Account Booking Card Action Buttons Grid */
  .ubc-actions-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .ubc-doc-actions,
  .ubc-status-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .ubc-doc-actions>*:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .ubc-doc-actions .btn,
  .ubc-status-actions .btn,
  .ubc-doc-actions button,
  .ubc-status-actions button,
  .ubc-status-actions .user-booking-rating-badge {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 8px !important;
  }

  .ubc-status-actions .user-booking-rating-badge .rating-badge-pill {
    width: 100% !important;
    height: 38px !important;
    justify-content: center !important;
    display: inline-flex !important;
  }

  .ubc-status-actions .btn-whatsapp,
  .ubc-status-actions .btn-action-whatsapp {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }

  /* 6. Standardized Mobile Alert & Toast Banners */
  .toast-container {
    position: fixed !important;
    top: calc(var(--header-height-mobile, 64px) + 12px) !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 9999999 !important;
  }

  .toast {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  /* 7. Contained Responsive Tables (Zero Page Scroll) */
  .table-responsive,
  .admin-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* 8. WhatsApp Float & PWA Deconfliction with Mobile Bottom Nav */
  .whatsapp-float {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 9980 !important;
  }

  .whatsapp-btn {
    width: 48px !important;
    height: 48px !important;
  }

  .pwa-install-banner {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Ultra-Compact Micro Mobile (Down to 350px Viewport) ── */
@media (max-width: 380px) {
  .container {
    padding: 0 10px !important;
  }

  .hero {
    min-height: 420px !important;
    padding-top: calc(var(--header-height-mobile, 56px) + 12px) !important;
    padding-bottom: 28px !important;
  }

  .hero-title,
  html[lang="en"] .hero-title {
    font-size: 1.05rem !important;
    line-height: 1.22 !important;
  }

  html[lang="ta"] .hero-title {
    font-size: 0.95rem !important;
    line-height: 1.24 !important;
  }

  .hero-description,
  html[lang="en"] .hero-description {
    font-size: 11px !important;
    line-height: 1.38 !important;
  }

  html[lang="ta"] .hero-description {
    font-size: 10.5px !important;
    line-height: 1.38 !important;
  }

  .hero-stat-number {
    font-size: 1rem !important;
  }

  .hero-stat-label {
    font-size: 8px !important;
  }

  .cab-service-tab {
    padding: 8px 6px !important;
  }

  .cab-service-tab .tab-icon {
    font-size: 14px !important;
  }

  .cab-service-tab .tab-title {
    font-size: 10px !important;
  }

  .cab-service-tab .tab-sub {
    font-size: 8.5px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 10px 8px !important;
  }

  .stat-number {
    font-size: 1.35rem !important;
  }

  .stat-label {
    font-size: 10.5px !important;
  }

  .package-card-title,
  .vehicle-card-title {
    font-size: 14px !important;
  }

  .package-card-actions,
  .vehicle-card-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .package-card-actions .btn,
  .vehicle-card-actions .btn {
    width: 100% !important;
  }

  .modal,
  .admin-modal,
  .review-qr-modal,
  .track-cab-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 12px !important;
  }

  .modal-body,
  .admin-modal-body {
    padding: 10px 10px !important;
  }
}

/* ── Multilingual Tamil (ta) Precision Tuning ── */
html[lang="ta"] body {
  word-break: break-word;
  overflow-wrap: anywhere;
}

html[lang="ta"] .cab-service-tab .tab-title {
  font-size: 10px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}

html[lang="ta"] .btn,
html[lang="ta"] .tab,
html[lang="ta"] .nav-link,
html[lang="ta"] .badge {
  word-break: break-word;
}

@media (max-width: 768px) {
  html[lang="ta"] .section-title {
    font-size: 1.35rem !important;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE DETAIL & FLEET LAYOUTS
   (Zero horizontal overflow on mobile viewports)
   ═══════════════════════════════════════════ */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8, 32px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.detail-sidebar-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  width: 100%;
  box-sizing: border-box;
  z-index: 20;
}

.detail-hero-banner {
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  height: 420px;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4, 16px);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.package-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-6, 24px);
  width: 100%;
  box-sizing: border-box;
}

.inc-exc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6, 24px);
  width: 100%;
  box-sizing: border-box;
}

.quick-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-8, 32px);
  width: 100%;
  box-sizing: border-box;
}

.estimator-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6, 24px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8, 32px);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.detail-layout>* {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .detail-sidebar-wrap {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .detail-hero-banner {
    height: clamp(220px, 50vw, 320px) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
  }

  .detail-hero-banner>div:last-child {
    padding: var(--space-4) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .detail-sidebar-wrap .card-glass {
    padding: clamp(18px, 4vw, 24px) !important;
  }

  .form-select,
  .form-input {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis;
  }

  .package-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .inc-exc-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .quick-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .quick-fact-card {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 6px !important;
    word-break: break-word !important;
    overflow: hidden !important;
  }

  .estimator-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Item 1.5: Fleet Estimator Tabs (Horizontal Scrolling Pill Bar) ── */
  .estimator-trip-tabs,
  #estimatorTripTabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 4px 10px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

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

  .estimator-trip-tabs .est-tab-sub {
    display: none !important;
  }

  .estimator-trip-tabs .est-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  .estimator-trip-tabs .est-tab-btn svg {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .estimator-trip-tabs .est-tab-label {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .estimator-trip-tabs .est-tab-btn.active {
    background: linear-gradient(135deg, #0a1628 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(232, 163, 23, 0.55) !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(10, 22, 40, 0.28) !important;
  }

  [data-theme="dark"] .estimator-trip-tabs .est-tab-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #cbd5e1 !important;
  }

  [data-theme="dark"] .estimator-trip-tabs .est-tab-btn.active {
    background: var(--primary-saffron, #e8a317) !important;
    color: #0a1628 !important;
    border-color: var(--primary-saffron, #e8a317) !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(232, 163, 23, 0.4) !important;
  }

  /* ── Packages, Destinations & Gallery Tabs Mobile Polish ── */
  .tabs:has(.filter-state-tab),
  .tabs:has(.dest-tab),
  .tabs:has(.gallery-tab),
  .gallery-tab-container,
  .page-packages .tabs,
  .packages-filter-tabs,
  .dest-tabs-container,
  #destinations .tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 2px 6px !important;
    margin: 0 0 16px !important;
    border: none !important;
    border-bottom: none !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tabs:has(.filter-state-tab)::-webkit-scrollbar,
  .tabs:has(.dest-tab)::-webkit-scrollbar,
  .tabs:has(.gallery-tab)::-webkit-scrollbar,
  .page-packages .tabs::-webkit-scrollbar,
  #destinations .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .filter-state-tab,
  .dest-tab,
  .gallery-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  .filter-state-tab:hover,
  .dest-tab:hover,
  .gallery-tab:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
  }

  /* Active State Tab: Executive dark navy contrast pill with amber accent */
  .filter-state-tab.active,
  .dest-tab.active,
  .gallery-tab.active {
    background: linear-gradient(135deg, #0a1628 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(232, 163, 23, 0.55) !important;
    border-bottom: 1px solid rgba(232, 163, 23, 0.55) !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(10, 22, 40, 0.28) !important;
  }

  [data-theme="dark"] .filter-state-tab,
  [data-theme="dark"] .dest-tab,
  [data-theme="dark"] .gallery-tab,
  #destinations .dest-tab,
  .section-dark .dest-tab {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
    color: #cbd5e1 !important;
  }

  [data-theme="dark"] .dest-tab:hover,
  #destinations .dest-tab:hover,
  .section-dark .dest-tab:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  [data-theme="dark"] .filter-state-tab.active,
  [data-theme="dark"] .dest-tab.active,
  [data-theme="dark"] .gallery-tab.active,
  #destinations .dest-tab.active,
  .section-dark .dest-tab.active {
    background: var(--primary-saffron, #e8a317) !important;
    color: #0a1628 !important;
    border-color: var(--primary-saffron, #e8a317) !important;
    border-bottom-color: var(--primary-saffron, #e8a317) !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(232, 163, 23, 0.4) !important;
  }

  /* Mobile Live Dispatch Alerts Drawer */
  #ammuNotifDrawer {
    top: 56px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px !important;
  }

  .page-packages .tabs::-webkit-scrollbar,
  .packages-filter-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .filter-controls-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ── Issue 10: Packages Theme Chips Horizontal Row-Wise ── */
  .category-chips-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .category-chips-label,
  .category-chips-row>span {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-tertiary) !important;
  }

  .category-pills-scroll {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .category-pills-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .category-pills-scroll .filter-cat-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  /* ── Issue 11: Destinations Radius Chips Horizontal Row-Wise ── */
  .radius-chips-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .radius-chips-label,
  .radius-chips-row>span {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-tertiary) !important;
  }

  .radius-pills-scroll {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .radius-pills-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .radius-pills-scroll .filter-cat-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  /* ── Issue 12: Destinations Search Input Full Width ── */
  .filter-controls-row .filter-search-box,
  .filter-controls-row>div:first-child {
    width: 100% !important;
  }

  .filter-controls-row .filter-search-box .form-input,
  .filter-controls-row>div:first-child .form-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #packageSearchInput {
    width: 100% !important;
  }

  .filter-controls-row .filter-select-box {
    width: 100% !important;
    display: flex !important;
    flex: 1 !important;
  }

  .category-chips-row {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 6px 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .category-chips-row::-webkit-scrollbar {
    display: none !important;
  }

  .filter-cat-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  /* ── Package Detail Mobile Polish (Issue 7) ── */
  .page-package-detail .detail-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .page-package-detail .detail-hero-banner {
    height: 220px !important;
    border-radius: 14px !important;
  }

  /* ── Destinations Page & Detail Polish (Issues 11, 12, 15) ── */
  .radius-chips-row,
  .destinations-filter-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 4px 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .radius-chips-row::-webkit-scrollbar,
  .destinations-filter-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .radius-chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  .dest-cab-callout {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dest-cab-callout .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── Gallery Tabs & Lightbox Mobile Polish (Issue 18) ── */
  .page-gallery .tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 4px 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-gallery .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .gallery-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  .gallery-masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Gallery Lightbox Mobile Perfection (Issue 5) ── */
  .lightbox-modal {
    padding: 16px 14px 20px !important;
    display: none;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .lightbox-modal.active {
    display: flex !important;
  }

  .lightbox-content-box {
    width: 100% !important;
    max-width: 440px !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
  }

  .lightbox-image-wrap {
    width: 100% !important;
    max-height: 54vh !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .lightbox-image-wrap img {
    max-height: 54vh !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .lightbox-nav-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: rgba(10, 22, 40, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10005 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  }

  .lightbox-nav-btn:active {
    background: rgba(10, 22, 40, 0.9) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(0.92) !important;
  }

  .lightbox-prev-btn {
    left: 8px !important;
  }

  .lightbox-next-btn {
    right: 8px !important;
  }

  .lightbox-close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    background: rgba(10, 22, 40, 0.72) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10010 !important;
  }

  .lightbox-meta-bar {
    margin-top: 12px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .lightbox-meta-text {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
  }

  .lightbox-counter {
    background: rgba(232, 163, 23, 0.2) !important;
    color: var(--primary-saffron, #E8A317) !important;
    border: 1px solid rgba(232, 163, 23, 0.4) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
  }

  .lightbox-caption {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .lightbox-caption div:first-child {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .lightbox-caption div:last-child {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    margin-top: 2px !important;
  }

  #lightboxWaBtn,
  .lightbox-wa-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
    text-decoration: none !important;
  }

  #lightboxWaBtn:active,
  .lightbox-wa-btn:active {
    transform: scale(0.98) !important;
    background: #20ba59 !important;
  }

  /* ── Page Breadcrumbs & Detail Section Spacing Fix (Issue 13) ── */
  .page-breadcrumbs {
    margin-top: 56px !important;
    padding: 6px 0 !important;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .account-wrapper,
  .page-account .account-wrapper {
    padding-top: calc(56px + 12px) !important;
  }

  .detail-main-section,
  .page-breadcrumbs+.section {
    padding-top: 10px !important;
    padding-bottom: 24px !important;
  }

  .breadcrumb-inner {
    font-size: 12px !important;
    gap: 5px !important;
    line-height: 1.35 !important;
  }

  .detail-header-block {
    margin-bottom: 14px !important;
  }

  /* ── Fare Estimator Toll Inclusion Pill (Issue 4) ── */
  .est-toll-pill {
    margin-top: 6px !important;
    padding: 8px 12px !important;
    background: rgba(5, 150, 105, 0.08) !important;
    border: 1px solid rgba(5, 150, 105, 0.22) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .est-toll-pill-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .est-toll-pill-label {
    font-weight: 700 !important;
    color: #047857 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .est-toll-fuel-tag {
    font-weight: 700 !important;
    font-size: 11px !important;
    color: #047857 !important;
    background: rgba(5, 150, 105, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .est-toll-pill-sub {
    font-size: 11px !important;
    color: #065f46 !important;
    padding-left: 18px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  /* ── Destination Detail Attraction Slider (Issue 2) ── */
  .attraction-slide {
    height: 270px !important;
  }

  #destSliderPrev,
  #destSliderNext,
  .slider-nav-btn {
    top: 36% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    background: rgba(10, 22, 40, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 10 !important;
  }

  #destSliderPrev,
  .slider-nav-prev {
    left: 10px !important;
  }

  #destSliderNext,
  .slider-nav-next {
    right: 10px !important;
  }

  #destSliderPrev:active,
  #destSliderNext:active,
  .slider-nav-btn:active {
    transform: translateY(-50%) scale(0.92) !important;
    background: rgba(10, 22, 40, 0.9) !important;
    color: #ffffff !important;
  }

  .attraction-slide-overlay {
    padding: 12px 14px 22px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 40, 0.45) 30%, rgba(10, 22, 40, 0.94) 100%) !important;
  }

  .attraction-slide-title {
    font-size: 1.22rem !important;
    margin: 2px 0 3px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  .attraction-slide-subtitle {
    font-size: 11.5px !important;
    margin-bottom: 6px !important;
    color: #cbd5e1 !important;
  }

  #destSliderDots {
    bottom: 8px !important;
    z-index: 11 !important;
  }

  /* ── Itinerary Card Mobile Alignment (Issue 3) ── */
  .itinerary-item-card {
    padding: 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-light) !important;
    background: var(--bg-card) !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .itinerary-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: wrap !important;
  }

  .itinerary-day-badge {
    background: linear-gradient(135deg, var(--primary-saffron, #E8A317), #d97706) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2.5px 9px !important;
    border-radius: var(--radius-full, 9999px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(232, 163, 23, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  .itinerary-card-title,
  .itinerary-item-card h4 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--primary-navy, #0A1628) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .itinerary-card-desc,
  .itinerary-item-card p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary, #475569) !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* ── Customer Account Page Mobile Polish (Issues A, B, C) ── */
  .account-hero-card {
    padding: 14px 14px !important;
    border-radius: 14px !important;
    margin-bottom: var(--space-4) !important;
  }

  .account-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .account-user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .account-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  #dashUserName {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }

  .tier-badge {
    padding: 2px 8px !important;
    font-size: 10px !important;
  }

  .account-user-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    margin-top: 3px !important;
  }

  .account-rewards-box {
    width: 100% !important;
    min-width: unset !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 10px !important;
    margin-top: 2px !important;
  }

  #dashPoints {
    font-size: 1.25rem !important;
  }

  /* Quick Action Bar: 2-column grid + WhatsApp full width */
  .quick-action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: var(--space-4) !important;
  }

  .quick-action-bar .btn {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .quick-action-bar .btn-whatsapp {
    grid-column: 1 / -1 !important;
  }

  /* Test Bookings Alert Banner: Compact, Side-by-Side Symmetrical Buttons */
  .test-bookings-alert-box {
    padding: 12px 14px !important;
    gap: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: var(--space-4) !important;
  }

  .test-bookings-alert-text {
    width: 100% !important;
    font-size: 12.5px !important;
  }

  .test-bookings-btn-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .test-bookings-btn-group .btn {
    flex: 1 1 50% !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Bookings Trips Section: Cards on Mobile, Hidden Desktop Table */
  .account-trips-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: var(--space-5) !important;
  }

  .account-trips-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .account-trips-card {
    padding: 16px 14px 20px !important;
    margin-bottom: 16px !important;
    border-radius: 16px !important;
  }

  .account-trips-header {
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  .booking-filter-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 2px 2px 2px !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

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

  .booking-filter-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
  }

  .account-table-desktop-wrap {
    display: none !important;
  }

  .account-mobile-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .user-booking-mobile-card {
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-medium, #e2e8f0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    gap: 10px !important;
  }

  .ub-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .ub-booking-id {
    font-size: 11.5px !important;
    padding: 2px 6px !important;
  }

  .ub-trip-title {
    font-size: 14px !important;
  }

  .ub-status-badge {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    flex-shrink: 0 !important;
  }

  .ub-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }

  .ub-actions-grid .btn,
  .user-booking-mobile-card .btn,
  .user-booking-mobile-card a.btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
  }

  .ub-actions-grid .btn svg,
  .user-booking-mobile-card .btn svg,
  .user-booking-mobile-card a.btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* ── Dedicated Travel Concierge Action Buttons Alignment (Issue 3) ── */
  .concierge-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .concierge-btn-group .concierge-btn,
  .concierge-btn-group a.concierge-btn,
  .concierge-btn-group button.concierge-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  /* ── Issue 1: Permanent Booking Page Empty Space Removal Across Steps 1-4 ── */
  body.page-booking,
  body.page-booking:not(.page-admin):not(.page-driver),
  body:has(#bookingMobileStickyBar).page-booking {
    padding-bottom: 0 !important;
  }

  body.page-booking.step-4-active,
  body.page-booking.step-4-active:not(.page-admin):not(.page-driver) {
    padding-bottom: 0 !important;
  }

  .page-booking main,
  .page-booking .booking-main-wrap {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.page-booking.step-4-active main,
  body.page-booking.step-4-active .booking-main-wrap,
  body.page-booking:has(#stepContent4:not([style*="display: none"])) main,
  body.page-booking:has(#stepContent4:not([style*="display: none"])) .booking-main-wrap {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Item 1.2: Strict Booking Step Isolation (Prevent Step 2 Spilling into Step 1) ── */
  .booking-step-content[style*="display: none"],
  .booking-step-content[style*="display:none"],
  .booking-step-content:not(.active):not([style*="display: block"]):not([style*="display: flex"]) {
    display: none !important;
  }

  /* Shorter steps (e.g. Step 2 Passenger Info) cleanly stretch ONLY when active */
  #stepContent2.active,
  #stepContent2[style*="display: block"]:not([style*="display: none"]):not([style*="display:none"]) {
    min-height: calc(100vh - 56px - 130px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100dvh - 56px - 130px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #stepContent2:not(.active):not([style*="display: block"]),
  #stepContent2[style*="display: none"],
  #stepContent2[style*="display:none"] {
    display: none !important;
  }

  #stepContent2.active .booking-step-actions,
  #stepContent2[style*="display: block"] .booking-step-actions {
    margin-top: auto !important;
    padding-top: 14px !important;
  }

  /* ── Issue 15: Public More Menu Active Item Highlighting ── */
  .public-more-item.active {
    border-color: var(--primary-saffron, #e8a317) !important;
    background: rgba(232, 163, 23, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(232, 163, 23, 0.25) !important;
  }

  .public-more-item.active .public-more-item-title {
    color: var(--primary-saffron-dark, #b45309) !important;
    font-weight: 800 !important;
  }

  .public-more-item.active .public-more-item-badge {
    background: var(--primary-saffron, #e8a317) !important;
    color: #ffffff !important;
  }

  .mobile-bottom-nav-item#publicMoreNavBtn.active,
  #publicMoreNavBtn.active {
    color: var(--primary-saffron) !important;
  }

  .mobile-bottom-nav-item#publicMoreNavBtn.active .icon svg,
  #publicMoreNavBtn.active .icon svg {
    stroke: var(--primary-saffron) !important;
  }

  /* ── About Page Mobile Polish (Issue 20) ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .about-grid>div:last-child {
    height: 220px !important;
    border-radius: 14px !important;
    order: -1;
  }

  .about-grid .section-title {
    font-size: 1.45rem !important;
  }
}

@media (max-width: 480px) {
  .quick-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .quick-fact-card {
    padding: 8px 4px !important;
  }

  .card-glass {
    padding: var(--space-4, 14px) !important;
  }

  #destAttractionsSlider {
    max-width: 100% !important;
  }

  .attraction-slide {
    height: 265px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 4: PWA APP EXPERIENCE & OFFLINE POLISH
   - Network Status Indicator Banner (Offline / Back Online)
   - PWA Standalone Viewport Optimizations
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. NETWORK STATUS INDICATOR BANNER ── */
.network-status-banner {
  position: fixed !important;
  top: -52px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000010 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
  will-change: top, opacity !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.network-status-banner.visible {
  top: 0 !important;
  opacity: 1 !important;
}

.network-status-banner.offline {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
}

.network-status-banner.online {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
}

.network-status-banner .nsb-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.network-status-banner .nsb-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.network-status-banner .nsb-dismiss {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  line-height: 1 !important;
}

/* Push down page content when banner is showing at top */
.network-status-banner.visible~.header,
.network-status-banner.visible~#mainHeader {
  transition: margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes nsb-pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.network-status-banner.offline .nsb-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #fecaca !important;
  animation: nsb-pulse-dot 1.2s ease-in-out infinite !important;
  margin-right: 2px !important;
}

/* ── 2. PWA STANDALONE DISPLAY OPTIMIZATIONS ── */
@media (display-mode: standalone) {

  /* Remove browser address bar visual artifacts while reserving generous bottom nav clearance */
  body:not(.page-admin):not(.page-driver) {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:not(.page-admin):not(.page-driver):has(#bookingMobileStickyBar:not(.hidden-step4)) {
    padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Fix bottom nav in standalone mode */
  .mobile-bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Give PWA sticky bar extra bottom spacing */
  .bmsb-main {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Slightly taller header in standalone for status bar clearance */
  .header {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  /* PWA install banner should not show in standalone mode */
  .pwa-install-banner {
    display: none !important;
  }
}

/* Standalone mode on iOS Safari */
@media (display-mode: standalone) and (-webkit-min-device-pixel-ratio: 2) {
  .header {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE A: CORE ANDROID APP FEEL (NATIVE SYSTEM BEHAVIORS)
   - Android Top Indeterminate Loading Progress Bar
   - Android Activity Page Transition Animations
   - Android Collapsing / Elevating Mobile App Bar
   - Android Edge Swipe-Back Gesture Bubble
   - Android Material Ink Ripple & Tactile Press Micro-Interactions
   - Full-Screen Native Android Search Sheet & Filter Chips
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. ANDROID TOP LOADING PROGRESS BAR ── */
#androidProgressBar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0% !important;
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 45%, #2563eb 100%) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.7) !important;
  z-index: 1000050 !important;
  pointer-events: none !important;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

#androidProgressBar.loading {
  width: 78% !important;
}

#androidProgressBar.done {
  width: 100% !important;
  opacity: 0 !important;
  transition: width 0.12s ease, opacity 0.25s ease 0.1s !important;
}

/* ── 2. ANDROID ACTIVITY PAGE TRANSITION ANIMATIONS (DISABLED SHAKE/FLICKER) ── */
body.android-page-animating,
body.android-page-exit-left,
body.android-page-exit-right {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* ── 3. ANDROID COLLAPSING / ELEVATING MOBILE APP BAR ── */
@media (max-width: 768px) {
  .header {
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), height 0.22s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  }

  .header.header-compact {
    height: 54px !important;
    background: rgba(10, 22, 40, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
  }

  .header.header-compact .header-logo img,
  .header.header-compact .logo-img {
    /* height: 32px !important; */
  }

  .header.header-compact .header-logo-text {
    font-size: 15px !important;
  }

  .header.header-compact .header-logo-tagline {
    display: none !important;
  }

  .header.header-hidden {
    transform: translateY(-100%) !important;
  }
}

/* ── 4. ANDROID EDGE SWIPE-BACK GESTURE BUBBLE ── */
#androidBackIndicator {
  position: fixed !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-100%) !important;
  z-index: 1000040 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 22px 22px 0 !important;
  background: rgba(10, 22, 40, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-left: none !important;
  box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, box-shadow 0.15s ease !important;
  opacity: 0;
  will-change: transform, opacity;
}

#androidBackIndicator.active {
  opacity: 1 !important;
}

#androidBackIndicator.ready {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  box-shadow: 2px 4px 22px rgba(217, 119, 6, 0.65) !important;
  border-color: #fbbf24 !important;
  transform: translateY(-50%) translateX(0) scale(1.08) !important;
}

#androidBackIndicator svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  stroke-width: 2.8 !important;
}

/* ── 5. MATERIAL INK RIPPLE & TACTILE PRESS MICRO-INTERACTIONS ── */
.material-ripple-surface {
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}

.material-ripple-wave {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  transform: scale(0) !important;
  pointer-events: none !important;
  animation: materialRippleWave 0.42s cubic-bezier(0.2, 0, 0, 1) forwards !important;
}

.card .material-ripple-wave,
.vehicle-card .material-ripple-wave,
.package-card .material-ripple-wave {
  background: rgba(217, 119, 6, 0.22) !important;
}

@keyframes materialRippleWave {
  0% {
    transform: scale(0);
    opacity: 0.9;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* Tactile Active Press on Mobile */
@media (hover: none) and (pointer: coarse) {

  .btn:active,
  .bmsb-btn:active,
  .tab-btn:active,
  .cab-service-tab:active,
  .mobile-nav-item:active {
    transform: scale(0.96) !important;
    transition: transform 0.08s ease !important;
  }

  .card:active,
  .vehicle-card:active,
  .package-card:active {
    transform: scale(0.985) !important;
    transition: transform 0.1s ease !important;
  }
}

/* ── 6. FULL-SCREEN NATIVE ANDROID SEARCH SHEET ── */
#androidSearchSheet {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000030 !important;
  background: #0a1628 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

#androidSearchSheet.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ass-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.ass-back-btn {
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ass-input-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
}

.ass-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  outline: none !important;
}

.ass-input::placeholder {
  color: #94a3b8 !important;
}

.ass-clear-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

.ass-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  -webkit-overflow-scrolling: touch !important;
}

.ass-section-title {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  margin: 14px 0 10px !important;
}

.ass-chips-scroll {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 6px !important;
  scrollbar-width: none !important;
}

.ass-chips-scroll::-webkit-scrollbar {
  display: none !important;
}

.ass-chip {
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ass-chip:active,
.ass-chip.active {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #ffffff !important;
  border-color: #f59e0b !important;
}

.ass-route-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.ass-route-item:active {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.ass-route-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ass-route-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.ass-route-sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.ass-route-price {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.14) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

.ass-recent-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ass-clear-recent {
  background: none !important;
  border: none !important;
  color: #f59e0b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE B: BOOKING EXPERIENCE ENHANCEMENT
   - Digital Booking Ticket / E-Receipt Boarding Pass
   - Post-Trip Rating & Review Bottom Sheet
   - Smart Nearby Location-Aware Quick Booking Card
   - Booking Confirmation Confetti Celebration & Dispatch Countdown
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. DIGITAL BOOKING TICKET / E-RECEIPT MODAL ── */
#digitalBookingTicketModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000060 !important;
  background: rgba(10, 22, 40, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#digitalBookingTicketModal.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dbt-wrapper {
  background: #ffffff !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  position: relative !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5) !important;
  color: #0f172a !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  transform: translateY(20px) scale(0.96) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dbt-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#digitalBookingTicketModal.open .dbt-wrapper {
  transform: translateY(0) scale(1) !important;
}

.dbt-header {
  background: linear-gradient(135deg, #0a1628 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  padding: 18px 20px !important;
  border-radius: 24px 24px 0 0 !important;
  position: relative !important;
}

.dbt-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

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

.dbt-brand img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.dbt-brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
}

.dbt-brand-sub {
  font-size: 10.5px !important;
  color: #f59e0b !important;
  font-weight: 600 !important;
}

.dbt-pnr-badge {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
  font-family: monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.dbt-route-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dbt-city-block {
  display: flex !important;
  flex-direction: column !important;
}

.dbt-city-code {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
}

.dbt-city-name {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.dbt-flight-arrow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #f59e0b !important;
}

/* Perforated tear line between top & body - Inward notches that never spill outside */
.dbt-perforated-strip {
  position: relative !important;
  height: 22px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.dbt-perforated-strip::before,
.dbt-perforated-strip::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 22px !important;
  background: #0a1628 !important;
  z-index: 2 !important;
}

.dbt-perforated-strip::before {
  left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
}

.dbt-perforated-strip::after {
  right: 0 !important;
  border-radius: 14px 0 0 14px !important;
}

body.printing-digital-ticket .dbt-perforated-strip::before,
body.printing-digital-ticket .dbt-perforated-strip::after {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

.dbt-dash-line {
  width: 80% !important;
  border-bottom: 2px dashed #cbd5e1 !important;
}

.dbt-body {
  padding: 8px 20px 24px !important;
}

.dbt-grid-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.dbt-info-cell {
  background: #f8fafc !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
}

.dbt-cell-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.dbt-cell-val {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.dbt-qr-section {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.dbt-qr-code {
  width: 78px !important;
  height: 78px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 5px !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  flex-shrink: 0 !important;
  image-rendering: pixelated !important;
}

.dbt-qr-text {
  font-size: 11.5px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
}

.dbt-qr-text strong {
  color: #0f172a !important;
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
}

.dbt-actions {
  display: flex !important;
  gap: 8px !important;
}

.dbt-action-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.1s ease !important;
}

.dbt-action-btn:active {
  transform: scale(0.96) !important;
}

.dbt-btn-wa {
  background: #25D366 !important;
  color: #ffffff !important;
}

.dbt-btn-save {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.dbt-btn-img {
  background: #0f766e !important;
  color: #ffffff !important;
}

.dbt-btn-close {
  background: #e2e8f0 !important;
  color: #475569 !important;
  max-width: 44px !important;
}

@media (max-width: 640px) {
  #digitalBookingTicketModal .dbt-wrapper {
    width: 95vw !important;
    max-width: 95vw !important;
    border-radius: 20px !important;
  }

  .dbt-header {
    padding: 14px 16px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .dbt-header-top {
    margin-bottom: 10px !important;
  }

  .dbt-brand img {
    width: 32px !important;
    height: 32px !important;
  }

  .dbt-brand-name {
    font-size: 13.5px !important;
    letter-spacing: normal !important;
  }

  .dbt-brand-sub {
    font-size: 9.5px !important;
  }

  .dbt-pnr-badge {
    font-size: 11.5px !important;
    padding: 3px 8px !important;
  }

  .dbt-route-strip {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .dbt-city-code {
    font-size: 18px !important;
  }

  .dbt-city-name {
    font-size: 10.5px !important;
    max-width: 95px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dbt-body {
    padding: 6px 14px 16px !important;
  }

  .dbt-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 8px !important;
  }

  .dbt-actions .dbt-btn-wa {
    grid-column: 1 / -1 !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
  }

  .dbt-actions .dbt-action-btn:not(.dbt-btn-wa) {
    padding: 10px 8px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  .dbt-actions .dbt-btn-close {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-width: 44px !important;
  }
}

/* ── 2. POST-TRIP RATING & REVIEW BOTTOM SHEET ── */
#postTripRatingSheet {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000070 !important;
  background: rgba(10, 22, 40, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease !important;
}

#postTripRatingSheet.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.rating-sheet-container {
  background: #0a1628 !important;
  border-radius: 28px 28px 0 0 !important;
  padding: 16px 20px 28px !important;
  width: 100% !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  color: #ffffff !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(100%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 20px)) !important;
}

#postTripRatingSheet.open .rating-sheet-container {
  transform: translateY(0) !important;
}

.rating-sheet-handle {
  width: 40px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 3px !important;
  margin: 0 auto 16px !important;
}

.rating-stars-wrap {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 18px 0 8px !important;
}

.rating-star-btn {
  background: none !important;
  border: none !important;
  color: #475569 !important;
  font-size: 36px !important;
  cursor: pointer !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease !important;
  line-height: 1 !important;
  padding: 4px !important;
}

.rating-star-btn.active {
  color: #f59e0b !important;
  transform: scale(1.18) !important;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)) !important;
}

.rating-reaction-text {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  min-height: 22px !important;
  margin-bottom: 16px !important;
}

.rating-chips-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.rating-tag-chip {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  padding: 7px 12px !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.rating-tag-chip.selected {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.rating-textarea {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  padding: 12px !important;
  font-size: 13.5px !important;
  outline: none !important;
  resize: none !important;
  height: 80px !important;
  margin-bottom: 16px !important;
}



/* ── 4. BOOKING CONFIRMATION CELEBRATION & COUNTDOWN ── */
#celebrationConfettiCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1000080 !important;
}

.confirmation-dispatch-timer {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #065f46 !important;
}

.cdt-label {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cdt-clock {
  font-family: monospace !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #059669 !important;
  background: #ffffff !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* Package & Trip Details Desktop/Mobile Share Visibility & Full Width Button Alignment */
.pkg-card-actions {
  display: grid !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 6px !important;
  margin-top: var(--space-3, 12px) !important;
}

.pkg-card-actions>* {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.pkg-card-actions a.btn,
.pkg-card-actions button.btn {
  white-space: nowrap !important;
  text-align: center !important;
}

@media (min-width: 769px) {

  .btn-share-pkg,
  #sharePkgDetailBtn,
  .btn-share-trip {
    display: none !important;
  }

  /* Desktop: 3 items (WhatsApp, Details, Book Now) expand to fill 100% width cleanly */
  .pkg-card-actions {
    grid-template-columns: auto 1fr 1fr !important;
  }
}

@media (max-width: 768px) {

  .btn-share-pkg,
  #sharePkgDetailBtn {
    display: inline-flex !important;
  }

  /* Mobile: 4 items (WhatsApp, Share, Details, Book Now) expand to fill 100% width cleanly */
  .pkg-card-actions {
    grid-template-columns: auto auto 1fr 1fr !important;
  }
}

/* Auth Method Selector 2-Button Full Width Without Text Break */
.auth-method-selector {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-auth-method {
  width: 100% !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* ── Item 1.7: Customer Auth Page Vertical Centering & Centered Logo ── */
@media (max-width: 768px) {

  .page-auth main,
  .auth-main-wrap {
    min-height: calc(100dvh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .page-auth .container {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    /* padding: 0 !important; */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .page-auth .card {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .auth-brand-logo,
  #authFormBox img,
  #authFormBox .auth-brand-logo {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .voucher-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

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

  .voucher-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .voucher-top-bar .voucher-top-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .voucher-top-bar .voucher-top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-align: left !important;
  }

  .voucher-mode-switcher {
    margin-top: 10px !important;
  }

  .voucher-mode-switcher .voucher-mode-tab-btn {
    font-size: 10.5px !important;
    padding: 6px 4px !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.2 !important;
  }

  .voucher-mode-switcher .voucher-desc-pill {
    font-size: 9px !important;
    opacity: 0.85 !important;
  }

  .voucher-body {
    padding: 14px 16px !important;
    max-height: 75dvh !important;
  }

  .voucher-detail-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed rgba(203, 213, 225, 0.6) !important;
  }

  .voucher-detail-row:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .voucher-detail-row .voucher-detail-lbl {
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  .voucher-detail-row .voucher-detail-val {
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
  }
}

@media (min-width: 769px) {

  .nav-drawer-user-profile,
  .nav .nav-drawer-user-profile,
  #mainNav .nav-drawer-user-profile {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* ── Contact Page Mobile & Tablet Viewport Optimization ── */
@media (max-width: 991px) {
  .contact-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-layout>div,
  .contact-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  .contact-layout {
    gap: 20px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .contact-form-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #contactForm {
    gap: 12px !important;
    width: 100% !important;
  }

  #contactForm .form-group {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #contactForm .form-input,
  #contactForm .form-select,
  #contactForm .form-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  #contactForm .form-textarea {
    height: auto !important;
    min-height: 90px !important;
  }

  #contactForm button[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
  }
}

/* Base Concierge Action Buttons */
.concierge-btn-group {
  display: flex;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  align-items: center;
}

.concierge-btn-group .concierge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Base Cab Vehicles Swipe Hint (Hidden on Desktop) */
.cab-vehicles-swipe-hint {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   LIVING EDITORIAL HERO RESPONSIVE BREAKPOINTS
   2. In mobile view: hide le-headline-wrap and c1-side-cards,
      show ONLY le-main-card and adjust full width
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

  .hero.le-hero-section,
  .le-hero-section {
    padding-top: calc(var(--header-height-mobile, 64px) + 8px) !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .hero.le-hero-section .le-hero-container,
  .le-hero-container {
    padding: 0 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Requirement 2: Don't show headline-wrap on mobile */
  .le-headline-wrap,
  #leHeroHeadline {
    display: none !important;
  }

  /* Requirement 2: Don't show c1-side-cards on mobile */
  .c1-side-cards,
  #heroSideCards {
    display: none !important;
  }

  /* Grid becomes full width single container */
  .le-bento-grid {
    display: block !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Requirement 2: Show ONLY le-main-card and adjust full width */
  .le-main-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 280px !important;
    height: 280px !important;
    border-radius: 22px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px -6px rgba(10, 22, 40, 0.25) !important;
  }

  .le-scoop-pocket-tl {
    padding: 6px 12px !important;
    border-top-left-radius: 22px !important;
    border-bottom-right-radius: 16px !important;
    gap: 6px !important;
    top: -1px !important;
    left: -1px !important;
  }

  .le-curve-svg-tl-right,
  .le-curve-svg-tl-bottom,
  .le-curve-svg-br-top,
  .le-curve-svg-br-left {
    width: 16px !important;
    height: 16px !important;
  }

  .le-avatar {
    width: 20px !important;
    height: 20px !important;
    margin-left: -4px !important;
  }

  .le-trust-text strong {
    font-size: 11px !important;
  }

  .le-trust-text span {
    font-size: 9px !important;
  }

  /* Mobile View: Hide 15-min priority dispatch guaranteed pill on mobile view as requested */
  .le-dispatch-pill {
    display: none !important;
  }

  .le-slide-caption {
    display: none !important;
  }

  .le-carousel-dots {
    bottom: 14px !important;
    left: 14px !important;
    right: auto !important;
    transform: none !important;
    padding: 3px 6px !important;
  }

  .le-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .le-dot.active {
    width: 14px !important;
  }

  .le-scoop-pocket-br {
    padding: 6px 12px !important;
    border-bottom-right-radius: 22px !important;
    border-top-left-radius: 16px !important;
    bottom: -1px !important;
    right: -1px !important;
  }

  .le-cta-btn {
    padding: 7px 14px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
  }

  .le-cta-arrow {
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }

  .search-widget,
  #homeSearchSection {
    margin-top: 14px !important;
    width: 100% !important;
    scroll-margin-top: calc(var(--header-height-mobile, 64px) + 16px) !important;
  }
}

/* ── Persistent Mobile Bottom Nav Dock (Desktop Guard) ── */
@media (min-width: 769px) {

  .mobile-bottom-nav,
  #mobileBottomNav,
  .public-more-sheet,
  .public-more-backdrop {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP STICKY SIDEBAR PRESERVATION (Book Cab Telemetry & Booking Summary)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .cab-booking-section,
  .booking-main-wrap,
  .page-booking main {
    overflow: visible !important;
    overflow-x: clip !important;
  }

  .compact-split-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 70%) minmax(0, calc(30% - 20px)) !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .compact-telemetry-sticky {
    position: sticky !important;
    top: 76px !important;
    align-self: start !important;
    z-index: 30 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
    max-height: none !important;
  }

  #cabTelemetryMediaContainer {
    flex-shrink: 0 !important;
    min-height: 140px !important;
    height: 140px !important;
    width: 100% !important;
    display: flex !important;
    margin-bottom: 0 !important;
  }

  .booking-layout {
    display: grid !important;
    grid-template-columns: 58fr 42fr !important;
    gap: var(--space-6) !important;
    align-items: start !important;
    min-height: calc(100vh + 350px) !important;
    overflow: visible !important;
  }

  .booking-sidebar-card {
    position: sticky !important;
    top: 76px !important;
    align-self: start !important;
    z-index: 30 !important;
    overflow: visible !important;
    max-height: none !important;
  }
}