/* ==========================================================================
   ULTRA-HIGH READABILITY STANDARD FONT SYSTEM (SENIOR & ALL AGES OPTIMIZED)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*, *::before, *::after, html, body, h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, select, textarea, label, table, th, td, code, pre {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   ASTAR EV MOBILITY — COMPREHENSIVE MOBILE FIX
   Appends on top of index.css to fix all mobile issues.
   Covers: Nav, Hero, Cards, Grids, Footer, Forms, Shop, Login
   Breakpoints: 1150px (tablet), 768px (mobile), 480px (small)
   ============================================================ */

/* ── 0. GLOBAL PREVENT OVERFLOW & VIEWPORT LOCK ──────────────── */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

main,
section,
.site-wrapper,
.hero-section,
.certifications-section,
.features-section,
.cert-floating-stage,
.cert-floating-ribbon-stage,
.features-marquee-stage {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.header {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

img, video, iframe, embed {
  max-width: 100%;
  height: auto;
}

/* ── 1. HAMBURGER MENU — SIGNATURE NEON EMERALD CYBER TOUCH ─────────────────────── */
@media (max-width: 1150px) {
  /* Show hamburger with Signature Emerald Green styling */
  .mobile-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5.5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.16) 0%, rgba(5, 16, 9, 0.95) 100%) !important;
    border: 1.5px solid rgba(0, 255, 136, 0.5) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.3), inset 0 0 10px rgba(0, 255, 136, 0.12) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1005 !important;
  }

  .mobile-toggle-btn .bar {
    width: 22px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #00ff88, #66ff33, #00ff88) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.8), 0 0 2px #00ff88 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
  }

  .mobile-toggle-btn:hover,
  .mobile-toggle-btn:focus-visible {
    border-color: #00ff88 !important;
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.6), inset 0 0 14px rgba(0, 255, 136, 0.25) !important;
    transform: scale(1.06) !important;
  }

  .mobile-toggle-btn.active {
    background: rgba(0, 255, 136, 0.22) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 28px rgba(0, 255, 136, 0.7), inset 0 0 16px rgba(0, 255, 136, 0.35) !important;
  }

  .mobile-toggle-btn.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
    background: #00ff88 !important;
    box-shadow: 0 0 10px #00ff88 !important;
  }

  .mobile-toggle-btn.active .bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .mobile-toggle-btn.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
    background: #00ff88 !important;
    box-shadow: 0 0 10px #00ff88 !important;
  }

  /* Hide desktop nav by default, show as futuristic Emerald Cyber slide-down */
  .nav, #nav-menu {
    display: flex !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    background: rgba(4, 12, 7, 0.98) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
    border-bottom: 2px solid #00ff88 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 255, 136, 0.2) !important;
    padding: 1.5rem 1.25rem 2rem !important;
    gap: 0.75rem !important;
    transform: translateY(-115%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease,
                visibility 0.35s ease !important;
  }

  /* Open state */
  .nav.active, #nav-menu.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Nav link style in mobile drawer */
  .nav .nav-link, #nav-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.9rem 1.25rem !important;
    border-radius: 12px !important;
    background: rgba(0, 255, 136, 0.05) !important;
    border: 1px solid rgba(0, 255, 136, 0.25) !important;
    color: #ffffff !important;
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
  }

  .nav .nav-link:hover,
  .nav .nav-link.active,
  #nav-menu .nav-link:hover,
  #nav-menu .nav-link.active {
    background: rgba(0, 255, 136, 0.18) !important;
    border-color: #00ff88 !important;
    color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.35) !important;
    transform: translateX(4px) !important;
  }

  /* Dropdown inside mobile nav drawer */
  .nav.active .nav-dropdown-container,
  #nav-menu.active .nav-dropdown-container {
    width: 100% !important;
  }
  .nav.active .nav-dropdown-menu,
  #nav-menu.active .nav-dropdown-menu {
    position: static !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    min-width: unset !important;
    width: 100% !important;
  }
  .nav.active .nav-dropdown-container.open .nav-dropdown-menu,
  #nav-menu.active .nav-dropdown-container.open .nav-dropdown-menu,
  .nav.active .nav-dropdown-container:hover .nav-dropdown-menu,
  #nav-menu.active .nav-dropdown-container:hover .nav-dropdown-menu {
    display: flex !important;
  }
  .nav-dropdown-menu a {
    display: block !important;
    padding: 0.7rem 1rem !important;
    color: #a0aec0 !important;
    border-radius: 8px !important;
    background: rgba(0, 240, 255, 0.04) !important;
    border: 1px solid rgba(0, 240, 255, 0.1) !important;
    text-align: center !important;
    font-size: 0.85rem !important;
  }

  /* Hide "BOOK TEST RIDE" button in header on mobile */
  .nav-book-btn {
    display: none !important;
  }

  /* Header layout on mobile - Obsidian Glass Shield with Emerald Cyber Glow */
  .header {
    height: 68px !important;
    padding: 0.65rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(4, 10, 6, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.28) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 255, 136, 0.2) !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }
}

/* ── 2. ULTRA-PREMIUM MOBILE HERO SECTION & BADGE FIXES ─────────────────── */
@media (max-width: 1150px) {
  .hero-section,
  .shop-hero-section,
  .contact-hero-section,
  .about-hero-section,
  .page-hero,
  .hero {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: calc(68px + 2.2rem + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 768px) {
  .hero-section,
  .shop-hero-section,
  .hero-section,
  .contact-hero-section,
  .about-hero-section,
  .page-hero,
  .hero {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: calc(78px + 2.6rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 3.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-video-bg-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .hero-video-element,
  .hero-video-bg-container video,
  .contact-hero-video-bg video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
    display: block !important;
  }

  .hero-video-surge-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 50%, rgba(5, 10, 5, 0.25) 0%, rgba(5, 10, 5, 0.75) 75%, #050a05 100%),
                linear-gradient(180deg, rgba(5, 10, 5, 0.5) 0%, rgba(13, 22, 13, 0.2) 50%, #050a05 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .hero-grid-container,
  .surge-centered-hero {
    position: relative !important;
    z-index: 10 !important;
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .hero-left-col,
  .hero-center-col,
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Ultra-Visible Cockpit Top Badge 1 (.hero-tag) - Perfectly Proportioned Across All Mobile Viewports */
  .hero-tag,
  .contact-hero-tag,
  .about-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    margin: 1.5rem auto 1rem auto !important;
    padding: 0.42rem 1.05rem !important;
    font-size: clamp(0.68rem, 2.9vw, 0.76rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(8, 26, 16, 0.92) 0%, rgba(4, 16, 12, 0.95) 100%) !important;
    border: 1.4px solid rgba(0, 255, 136, 0.6) !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 255, 136, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    max-width: 95% !important;
    white-space: nowrap !important;
  }

  .hero-tag span {
    font-size: clamp(0.68rem, 2.9vw, 0.76rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .hero-tag .dot {
    width: 7px !important;
    height: 7px !important;
    background: #00ff88 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #00ff88 !important;
    flex-shrink: 0 !important;
  }

  /* Ultra-Visible Cockpit Model Tech Badge 2 (.hero-tech-badge) */
  .hero-model-tech-badge-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  .hero-tech-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    color: #00ff88 !important;
    padding: 0.4rem 1.1rem !important;
    background: rgba(0, 255, 136, 0.14) !important;
    border: 1.5px solid #00ff88 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.35) !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.8) !important;
    text-transform: uppercase !important;
  }

  /* Main Headline Title H1 - Ultra Visible & Balanced Scale */
  .hero-title,
  #hero-dynamic-h1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1.4rem, 6.2vw, 2.1rem) !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin: 0 auto 0.8rem auto !important;
    padding: 0 0.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-title span,
  .hero-title .title-white-line,
  .hero-title .grad-cyan-neon,
  #hero-dynamic-line1,
  #hero-dynamic-highlight {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    min-height: 1.3em !important;
    margin-bottom: 0.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    filter: none !important;
  }

  #hero-dynamic-line1,
  .hero-title .title-white-line {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  }

  #hero-dynamic-highlight,
  .hero-title .grad-cyan-neon {
    color: #00ff88 !important;
    -webkit-text-fill-color: #00ff88 !important;
    text-shadow: 0 0 16px rgba(0, 255, 136, 0.85) !important;
    font-weight: 900 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    filter: none !important;
  }

  /* 3D Flip Fade Text Letter Visibility Guarantee for Mobile */
  .hero-title .flip-fade-container,
  .flip-fade-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.12em !important;
    margin: 0 auto !important;
  }

  .hero-title .flip-fade-container > div,
  .flip-fade-container > div {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .hero-title .flip-fade-letter,
  .flip-fade-letter,
  #hero-dynamic-h1 .flip-fade-letter,
  #hero-dynamic-line1 .flip-fade-letter,
  #hero-dynamic-highlight .flip-fade-letter {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    font-style: normal !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
  }

  .flip-fade-letter.out {
    opacity: 0 !important;
  }

  /* Description paragraph - High Contrast & Premium Readability */
  .hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    max-width: 95% !important;
    margin: 0 auto 1.35rem auto !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important;
  }

  /* Hero action buttons */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-actions .btn,
  .hero-actions .btn-pill-primary,
  .hero-actions .btn-pill-secondary {
    width: 100% !important;
    max-width: 300px !important;
    padding: 0.82rem 1.3rem !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Audio Mute Button Container on Mobile */
  .hero-mute-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.6rem !important;
    position: relative !important;
    width: 100% !important;
  }

  /* Permanently hide all Mute / Unmute Text Hint Badges on Mobile */
  .hero-mute-hint-badge,
  #store-hero-mute-hint-badge,
  #hero-mute-hint-badge,
  #heroMuteHintBadge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep the Speaker Mute / Unmute Button Sleek & Accessible on Mobile */
  .btn-hero-mute-toggle,
  #hero-audio-toggle-btn,
  #store-hero-audio-toggle-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    z-index: 10 !important;
  }

  /* Hero specs bar (2-Column Grid on Mobile) */
  .hero-specs-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    padding: 1rem 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(10, 22, 14, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(0, 255, 136, 0.35) !important;
    border-radius: 20px !important;
    margin-top: 0.85rem !important;
    margin-bottom: 3.5rem !important; /* Clearance for floating widgets */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    box-sizing: border-box !important;
  }

  .hero-specs-bar .spec-item {
    padding: 0.5rem 0.3rem !important;
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero-specs-bar .spec-val {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #00ff88 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .hero-specs-bar .spec-unit {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .hero-specs-bar .spec-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-top: 0.2rem !important;
    line-height: 1.25 !important;
  }

  /* Hide hero right column on mobile */
  .hero-right-col {
    display: none !important;
  }

  /* Prevent Floating Chatbot Overlap on Mobile */
  #bot-trigger,
  .chat-widget-toggle,
  .cyber-bot-bubble,
  .chatbot-floater,
  .astar-support-widget {
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 9999 !important;
  }

  .astar-fab {
    width: 44px !important;
    height: 44px !important;
  }

  .astar-fab-logo {
    width: 26px !important;
    height: 26px !important;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0.45rem 0.65rem !important;
  }
  .header-actions {
    gap: 0.3rem !important;
  }
  .cyber-theme-toggle-btn,
  .nav-profile-icon-btn,
  .nav-cart-btn {
    transform: scale(0.88) !important;
  }
  .hero-tag,
  .contact-hero-tag,
  .about-tag-badge {
    font-size: clamp(0.64rem, 2.8vw, 0.72rem) !important;
    padding: 0.35rem 0.9rem !important;
    margin: 1.4rem auto 0.9rem auto !important;
  }
  .hero-tag span {
    font-size: clamp(0.64rem, 2.8vw, 0.72rem) !important;
  }
  .hero-tech-badge {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.95rem !important;
  }
  .hero-title {
    font-size: clamp(1.3rem, 5.8vw, 1.8rem) !important;
  }
  .hero-desc {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }
  .hero-actions .btn {
    font-size: 0.8rem !important;
    padding: 0.75rem 1.1rem !important;
  }
  .hero-mute-hint-badge {
    font-size: 0.68rem !important;
  }
  .hero-specs-bar {
    grid-template-columns: 1fr 1fr !important;
    padding: 0.75rem 0.4rem !important;
  }
  .hero-specs-bar .spec-val {
    font-size: 1.1rem !important;
  }
  .hero-specs-bar .spec-unit {
    font-size: 0.68rem !important;
  }
  .hero-specs-bar .spec-label {
    font-size: 0.65rem !important;
  }
}

/* ── 3. SECTION TITLES & GLOBAL TYPOGRAPHY ───────────────────── */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  .section-subtitle,
  .section-desc {
    font-size: 0.9rem !important;
    text-align: center !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent huge font sizes */
  h1 { font-size: clamp(1.8rem, 7vw, 3rem) !important; }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2.4rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.6rem) !important; }
}

/* ── 4. STATS SECTION ────────────────────────────────────────── */
@media (max-width: 768px) {
  .premium-stats-section {
    display: block !important;
    width: 100% !important;
    padding: 2.5rem 1rem !important;
    box-sizing: border-box !important;
  }

  .premium-stats-grid,
  .stats-grid,
  .stat-counter-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .stat-number,
  .stat-val {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  .stat-lbl,
  .stat-label {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .premium-stats-grid,
  .stats-grid,
  .stat-counter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

/* ── 5. MODEL CARDS / PRODUCT CARDS ─────────────────────────── */
@media (max-width: 768px) {
  /* Force all card grids to single column or 2-col */
  .ather-ev-grid,
  .models-grid,
  .scooter-models-grid,
  .podium-models-grid,
  .product-grid,
  .ecom-products-grid,
  .features-grid,
  .pillar-grid,
  .cert-grid,
  .engineer-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
  }

  /* Cards full width on very small screens */
  .ather-ev-card,
  .shop-card,
  .ecom-product-card,
  .pillar-card-3d,
  .cert-glass-card,
  .engineer-card,
  .testimonial-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .ather-ev-grid,
  .models-grid,
  .ecom-products-grid,
  .features-grid,
  .pillar-grid,
  .cert-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. HORIZONTAL SCROLLERS (Scooter Model Track) ───────────── */
@media (max-width: 768px) {
  .scooter-models-track,
  .models-slider-track,
  [class*="-track"] {
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 7. SHOWROOM / DEALER MAP GRID ───────────────────────────── */
@media (max-width: 768px) {
  .showroom-grid,
  .dealer-grid,
  .dealer-list {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── 8. TESTIMONIALS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonial-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── 9. EV SAVINGS CALCULATOR BESPOKE MOBILE REDESIGN ────────── */
@media (max-width: 768px) {
  .kerala-banner-section {
    padding: 3rem 1rem 3.5rem !important;
    max-width: 100% !important;
  }

  /* Hide floating 3D decorative images on mobile to prevent overflow */
  .floating-3d-calc-badge {
    display: none !important;
  }

  .ref-calc-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .ref-calc-left {
    padding: 0 !important;
    gap: 1.1rem !important;
  }

  .ref-distance-header {
    justify-content: space-between !important;
  }

  .ref-label-title {
    font-size: 0.95rem !important;
  }

  .ref-distance-val {
    font-size: 1.2rem !important;
  }

  .ref-green-slider {
    height: 8px !important;
  }

  .ref-green-slider::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }

  .ref-slider-limits {
    font-size: 0.76rem !important;
  }

  .ref-fuel-note {
    font-size: 0.84rem !important;
    padding: 0.75rem 0.9rem !important;
    background: rgba(0, 255, 136, 0.06) !important;
    border: 1px solid rgba(0, 255, 136, 0.25) !important;
    border-radius: 12px !important;
  }

  .ref-disclaimer {
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
    opacity: 0.75 !important;
  }

  /* Right Box Results Card */
  .ref-calc-right {
    padding: 1.35rem 1.15rem !important;
    border-radius: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(145deg, rgba(12, 28, 20, 0.96) 0%, rgba(6, 16, 22, 0.98) 100%) !important;
    border: 1.5px solid rgba(0, 255, 136, 0.4) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 255, 136, 0.15) !important;
  }

  /* Top Costs 2-Column Comparison */
  .ref-top-costs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
    padding-bottom: 1.2rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-align: left !important;
  }

  .ref-col-divider {
    display: none !important;
  }

  .ref-col-label {
    font-size: 0.72rem !important;
    margin-bottom: 0.3rem !important;
    white-space: nowrap !important;
  }

  .ref-cost-title {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .ref-cost-title strong {
    display: block !important;
    font-size: 1.05rem !important;
    margin-top: 0.2rem !important;
  }

  /* Bottom Savings Section */
  .ref-bottom-savings-section {
    padding-top: 1.2rem !important;
    gap: 0.75rem !important;
  }

  .ref-savings-title {
    font-size: 0.84rem !important;
    margin-bottom: 0.2rem !important;
  }

  .ref-saving-box {
    padding: 0.85rem 1.1rem !important;
    border-radius: 14px !important;
  }

  .ref-box-label {
    font-size: 0.9rem !important;
  }

  .ref-box-val {
    font-size: 1.15rem !important;
  }

  .calc-reserve-pill,
  .capsule-pulse-btn {
    padding: 0.7rem 1.1rem !important;
    font-size: 0.8rem !important;
    border-radius: 30px !important;
  }
}

/* Studio Light Mode Overrides for EV Calculator */
[data-theme="light"] .kerala-banner-section,
body.light-theme .kerala-banner-section {
  background: transparent !important;
}

[data-theme="light"] .ref-label-title,
body.light-theme .ref-label-title {
  color: #0f172a !important;
}

[data-theme="light"] .ref-fuel-note,
body.light-theme .ref-fuel-note {
  color: #334155 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="light"] .ref-disclaimer,
body.light-theme .ref-disclaimer {
  color: #64748b !important;
}

[data-theme="light"] .ref-calc-right,
body.light-theme .ref-calc-right {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 246, 0.98) 100%) !important;
  border: 1.5px solid rgba(0, 180, 100, 0.35) !important;
  box-shadow: 0 12px 35px rgba(0, 40, 20, 0.08), 0 0 15px rgba(0, 180, 100, 0.12) !important;
}

[data-theme="light"] .ref-cost-title,
body.light-theme .ref-cost-title,
[data-theme="light"] .ref-cost-title strong,
body.light-theme .ref-cost-title strong {
  color: #0f172a !important;
}

[data-theme="light"] .petrol-green,
body.light-theme .petrol-green {
  color: #dc2626 !important;
}

[data-theme="light"] .ebike-green,
body.light-theme .ebike-green {
  color: #059669 !important;
}

[data-theme="light"] .ref-savings-title,
body.light-theme .ref-savings-title {
  color: #059669 !important;
}

[data-theme="light"] .ref-saving-box,
body.light-theme .ref-saving-box {
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
}

[data-theme="light"] .ref-box-label,
body.light-theme .ref-box-label {
  color: #0f172a !important;
}

[data-theme="light"] .ref-box-val,
body.light-theme .ref-box-val {
  color: #0f172a !important;
}

[data-theme="light"] .green-savings-val,
body.light-theme .green-savings-val {
  color: #059669 !important;
}

/* ── 10. FAQ SECTION ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-grid,
  .faq-list {
    grid-template-columns: 1fr !important;
  }

  .faq-item {
    width: 100% !important;
  }
}

/* ── 11. FOOTER ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer,
  .site-footer,
  .cta-footer-section {
    padding: 2rem 1rem !important;
  }

  .footer-grid,
  .footer-columns,
  .footer-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .footer-brand,
  .footer-logo-col {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .footer-bottom,
  .footer-copyright {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .footer-grid,
  .footer-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ── 12. CONTACT PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid,
  .contact-two-col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .contact-card {
    padding: 1.25rem !important;
  }
}

/* ── 13. SHOP PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .shop-layout,
  .shop-grid-layout {
    display: block !important;
  }

  .shop-sidebar,
  .filter-sidebar {
    width: 100% !important;
    position: static !important;
    margin-bottom: 1.5rem !important;
  }

  .shop-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 1rem !important;
  }

  .shop-hero-title,
  .page-hero-title {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .shop-products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 14. LOGIN / REGISTER FORMS ──────────────────────────────── */
@media (max-width: 768px) {
  .auth-section-stage,
  .auth-section,
  .login-section,
  .register-section {
    padding: 1rem !important;
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-glass-card,
  .login-card,
  .register-card,
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }

  .auth-tabs,
  .login-tabs {
    flex-direction: row !important;
    width: 100% !important;
  }

  .auth-tab,
  .login-tab {
    flex: 1 !important;
    text-align: center !important;
    font-size: 0.85rem !important;
  }

  /* Inputs: prevent iOS zoom (min 16px) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* Two-col form rows collapse on mobile */
  .form-row,
  .input-row,
  .form-two-col {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .form-row > *,
  .form-two-col > * {
    width: 100% !important;
  }
}

/* ── 15. DASHBOARD PAGES ─────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-layout,
  .dashboard-wrapper,
  .admin-layout {
    flex-direction: column !important;
    display: block !important;
  }

  .sidebar,
  .dashboard-sidebar,
  .admin-sidebar {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .dashboard-main,
  .admin-main,
  .main-content {
    width: 100% !important;
    padding: 1rem !important;
  }

  .dashboard-cards-grid,
  .kpi-grid,
  .stats-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .dashboard-table,
  .data-table {
    overflow-x: auto !important;
    display: block !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .dashboard-cards-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 16. PRODUCT DETAIL PAGE (PDP) ───────────────────────────── */
@media (max-width: 768px) {
  .pdp-layout,
  .product-detail-grid {
    display: block !important;
  }

  .pdp-gallery,
  .product-images {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .pdp-info,
  .product-info {
    width: 100% !important;
    padding: 0 !important;
  }

  .pdp-price {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .pdp-specs-grid,
  .specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 17. CART / CHECKOUT ─────────────────────────────────────── */
@media (max-width: 768px) {
  .cart-layout,
  .checkout-layout {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .cart-items,
  .order-summary {
    width: 100% !important;
  }

  .cart-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
}

/* ── 18. ABOUT / CAREERS / MEDIA PAGES ───────────────────────── */
@media (max-width: 768px) {
  .about-grid,
  .team-grid,
  .timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .about-hero-title {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    text-align: center !important;
  }
}

/* ── 19. SECTION PADDING NORMALIZATION ───────────────────────── */
@media (max-width: 768px) {
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .container,
  .section-container,
  .content-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }
}

/* ── 20. MODAL / POPUP FIXES ─────────────────────────────────── */
@media (max-width: 768px) {
  .modal-content,
  .popup-card,
  .preorder-modal-inner,
  .preorder-box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90svh !important;
    overflow-y: auto !important;
    padding: 1.25rem !important;
    margin: 1rem auto !important;
    border-radius: 16px !important;
  }
}

/* ── 21. SMALL PHONE FINAL FIXES (<= 380px) ──────────────────── */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.7rem !important;
  }

  .hero-actions .btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.75rem !important;
  }

  .mobile-toggle-btn {
    padding: 0.5rem 0.6rem !important;
  }

  .logo-brand-name {
    font-size: 1rem !important;
  }

  .logo-brand-sub {
    font-size: 0.55rem !important;
  }
}

/* ── 22. FIX FIXED-WIDTH ELEMENTS THAT CAUSE OVERFLOW ───────── */
/* Override any elements using fixed pixel widths > 100vw */
@media (max-width: 768px) {
  [style*="width: 1200"],
  [style*="width: 1100"],
  [style*="width: 1000"],
  [style*="width: 900"],
  [style*="width: 800"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Announcement bar scroll fix */
  .top-announcement-bar {
    white-space: nowrap;
    overflow: hidden;
  }

  /* Table horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ── 23. CERTIFICATIONS & ACCREDITATION MOBILE INFINITE AUTO-SCROLL MARQUEE ── */
@media (max-width: 768px) {
  .certifications-section {
    padding: 3rem 0.5rem 3.5rem !important;
    max-width: 100% !important;
  }

  .cert-floating-stage {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .cert-floating-ribbon-stage,
  .cert-marquee-container {
    position: relative !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    margin: 1.5rem 0 1rem 0 !important;
    padding: 0.8rem 0 1rem 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 255, 136, 0.5) transparent !important;
  }

  .cert-floating-ribbon-stage::-webkit-scrollbar,
  .cert-marquee-container::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
  }

  .cert-floating-ribbon-stage::-webkit-scrollbar-track,
  .cert-marquee-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
  }

  .cert-floating-ribbon-stage::-webkit-scrollbar-thumb,
  .cert-marquee-container::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.5) !important;
    border-radius: 4px !important;
  }

  .cert-laser-line {
    display: none !important;
  }

  /* Infinite Smooth Auto-Scrolling Marquee Track with Touch Drag Support */
  .cert-floating-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    width: max-content !important;
    animation: mobileCertMarquee 22s linear infinite !important;
    will-change: transform !important;
    touch-action: pan-x pan-y !important;
  }

  .cert-floating-ribbon-stage:active .cert-floating-track,
  .cert-floating-ribbon-stage:hover .cert-floating-track,
  .cert-floating-track.is-touch-dragging {
    animation-play-state: paused !important;
  }

  @keyframes mobileCertMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Re-enable all duplicated cards for seamless 360 loop */
  .cert-floating-track > .cert-emblem-item {
    display: flex !important;
    scroll-snap-align: start !important;
  }

  /* Compact Horizontal Cyber Glass Marquee Card */
  .cert-emblem-item {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    width: 275px !important;
    max-width: 275px !important;
    min-width: 275px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    background: linear-gradient(135deg, rgba(12, 28, 20, 0.95) 0%, rgba(6, 16, 22, 0.98) 100%) !important;
    border: 1.5px solid rgba(0, 255, 136, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 255, 136, 0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-sizing: border-box !important;
    gap: 0.95rem !important;
    cursor: pointer !important;
  }

  /* Laser Shimmer Ray Sweep Animation */
  .cert-emblem-item::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 70% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.25), transparent) !important;
    transform: skewX(-25deg) !important;
    transition: left 0.8s ease !important;
    pointer-events: none !important;
  }

  .cert-emblem-item:hover::before,
  .cert-emblem-item:active::before {
    left: 140% !important;
  }

  /* Left Circular Emblem Lens with Continuous Breathing Pulse */
  .emblem-halo-lens {
    height: 52px !important;
    width: 52px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.18) 0%, rgba(0, 255, 136, 0.04) 100%) !important;
    border: 1.8px solid #00ff88 !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
    animation: certHaloPulse 3s infinite ease-in-out !important;
  }

  @keyframes certHaloPulse {
    0%, 100% {
      box-shadow: 0 0 14px rgba(0, 255, 136, 0.35), inset 0 0 8px rgba(0, 255, 136, 0.15);
      border-color: rgba(0, 255, 136, 0.75);
    }
    50% {
      box-shadow: 0 0 24px rgba(0, 255, 136, 0.8), inset 0 0 14px rgba(0, 255, 136, 0.4);
      border-color: #00ff88;
    }
  }

  .emblem-logo-img {
    max-height: 36px !important;
    max-width: 36px !important;
    object-fit: contain !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.25) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)) !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
  }

  .cert-emblem-item:hover .emblem-logo-img {
    transform: scale(1.12) rotate(3deg) !important;
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(0, 255, 136, 0.9)) !important;
  }

  /* Right Side Content Info Box */
  .emblem-info-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    width: calc(100% - 62px) !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  /* Pill Tag with Pulsing Beacon Dot */
  .emblem-pill-tag {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: 30px !important;
    margin-bottom: 0.1rem !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .emblem-pill-tag::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    background: currentColor !important;
    border-radius: 50% !important;
    margin-right: 0.4rem !important;
    box-shadow: 0 0 8px currentColor !important;
    animation: beaconPulse 1.8s infinite ease-in-out !important;
  }

  @keyframes beaconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.65); }
  }

  .emblem-title {
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  .emblem-sub {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }
}

/* Mobile Trust Indicator Capsules */
@media (max-width: 768px) {
  .cert-minimal-trust-line {
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding-top: 1.5rem !important;
    width: 100% !important;
  }

  .trust-line-item {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 0.5rem 0.85rem !important;
    box-sizing: border-box !important;
  }
}

/* ── 24. ABOUT / FEATURES MARQUEE SECTION MOBILE REDESIGN ────── */
@media (max-width: 768px) {
  .features-section {
    padding: 3rem 0.5rem 3.5rem !important;
    max-width: 100% !important;
  }

  .features-marquee-stage {
    position: relative !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    padding: 1rem 0 1.2rem 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 255, 136, 0.5) transparent !important;
  }

  .features-marquee-stage::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
  }

  .features-marquee-stage::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
  }

  .features-marquee-stage::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.5) !important;
    border-radius: 4px !important;
  }

  .features-marquee-track {
    gap: 1rem !important;
    animation: featureMarqueeMobile 26s linear infinite !important;
    touch-action: pan-x pan-y !important;
  }

  .features-marquee-stage:active .features-marquee-track,
  .features-marquee-stage:hover .features-marquee-track,
  .features-marquee-track.is-touch-dragging {
    animation-play-state: paused !important;
  }

  @keyframes featureMarqueeMobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Compact Responsive Mobile Feature Card - Prevents Right-Edge Clipping */
  .luxury-feature-card {
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    flex-shrink: 0 !important;
    padding: 1.25rem 1.15rem !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(8, 24, 16, 0.94) 0%, rgba(4, 16, 12, 0.96) 100%) !important;
    border: 1.5px solid rgba(0, 255, 136, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 255, 136, 0.15) !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .feature-card-visual {
    height: 145px !important;
    border-radius: 14px !important;
    margin-bottom: 0.9rem !important;
  }

  .feature-card-top-bar {
    margin-bottom: 0.85rem !important;
  }

  .feature-badge-pill {
    font-size: 0.6rem !important;
    padding: 0.25rem 0.65rem !important;
  }

  .feature-hud-code {
    font-size: 0.6rem !important;
  }

  .feature-name {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.25 !important;
  }

  .feature-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .feature-card-footer {
    margin-top: 0.85rem !important;
  }

  .feature-status-tag {
    font-size: 0.68rem !important;
    padding: 0.3rem 0.75rem !important;
  }
}

/* ── 25. HIDE GALLERY FILTER TABS & SPEC BADGES ON MOBILE ────── */
@media (max-width: 768px) {
  .gallery-filter-tabs,
  .gallery-spec-badges-bar {
    display: none !important;
  }
}

/* Studio Light Mode Overrides for Gallery Filter Tabs & Spec Matrix */
[data-theme="light"] .gallery-filter-tabs,
body.light-theme .gallery-filter-tabs,
[data-theme="light"] .surge-gallery-section .gallery-filter-tabs,
body.light-theme .surge-gallery-section .gallery-filter-tabs {
  background: rgba(241, 245, 249, 0.95) !important;
  border: 1.2px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .gallery-tab-btn,
body.light-theme .gallery-tab-btn,
[data-theme="light"] .surge-gallery-section .gallery-tab-btn,
body.light-theme .surge-gallery-section .gallery-tab-btn {
  color: #1e293b !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

[data-theme="light"] .gallery-tab-btn.active,
body.light-theme .gallery-tab-btn.active,
[data-theme="light"] .surge-gallery-section .gallery-tab-btn.active,
body.light-theme .surge-gallery-section .gallery-tab-btn.active {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.3) !important;
}

[data-theme="light"] .gallery-spec-badge,
body.light-theme .gallery-spec-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 246, 0.98) 100%) !important;
  border: 1.2px solid rgba(0, 180, 100, 0.3) !important;
  box-shadow: 0 6px 20px rgba(0, 40, 20, 0.06) !important;
}

[data-theme="light"] .gallery-spec-badge span:first-of-type,
body.light-theme .gallery-spec-badge span:first-of-type {
  color: #059669 !important;
}

[data-theme="light"] .gallery-spec-badge span:last-of-type,
body.light-theme .gallery-spec-badge span:last-of-type {
  color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ⚡ GLOBAL OFFICIAL COMPANY LOGO & PERMANENT STABLE HEADER OVERRIDE
   ────────────────────────────────────────────────────────────────────────── */
.header .logo .logo-cyber-circle,
.header .logo .logo-brand-wrap,
.logo .logo-cyber-circle,
.logo .logo-brand-wrap {
  display: none !important;
}

.logo-lightning-mobile-img {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.45)) drop-shadow(0 0 20px rgba(0, 255, 184, 0.2)) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease !important;
  margin: auto 0 !important;
}

.logo:hover .logo-lightning-mobile-img,
.logo-lightning-mobile-img:active {
  transform: scale(1.05) translateY(-1px) !important;
  filter: drop-shadow(0 0 16px rgba(0, 255, 184, 0.85)) drop-shadow(0 0 24px rgba(0, 114, 255, 0.6)) !important;
}

/* ⚡ DYNAMIC SCROLL LOGO ENGINE */

/* 1. Universal / Dark Mode & Home/Shop/About Unscrolled Header (Pure vibrant white with cyan neon glow) */
.header .logo-lightning-mobile-img,
[data-theme="dark"] .header .logo-lightning-mobile-img,
html:not([data-theme="light"]):not(.light-theme) body:not(.light-theme) .header .logo-lightning-mobile-img,
body.home-page.light-theme .header:not(.scrolled) .logo-lightning-mobile-img,
body.home-page[data-theme="light"] .header:not(.scrolled) .logo-lightning-mobile-img,
body.shop-page.light-theme .header:not(.scrolled) .logo-lightning-mobile-img,
body.shop-page[data-theme="light"] .header:not(.scrolled) .logo-lightning-mobile-img,
body.about-page.light-theme .header:not(.scrolled) .logo-lightning-mobile-img,
body.about-page[data-theme="light"] .header:not(.scrolled) .logo-lightning-mobile-img {
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.45)) drop-shadow(0 0 20px rgba(0, 255, 184, 0.2)) !important;
}

/* 2. Light Mode Scrolled Header: Crisp Dark Logo */
body.light-theme .header.scrolled .logo-lightning-mobile-img,
[data-theme="light"] .header.scrolled .logo-lightning-mobile-img,
body:not(.home-page):not(.shop-page):not(.about-page).light-theme .header .logo-lightning-mobile-img,
body:not(.home-page):not(.shop-page):not(.about-page)[data-theme="light"] .header .logo-lightning-mobile-img,
body.auth-page.light-theme .header .logo-lightning-mobile-img,
body.auth-page[data-theme="light"] .header .logo-lightning-mobile-img,
body.auth-page.light-mode .header .logo-lightning-mobile-img {
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

body.light-theme .header.scrolled .logo:hover .logo-lightning-mobile-img,
[data-theme="light"] .header.scrolled .logo:hover .logo-lightning-mobile-img,
body:not(.home-page):not(.shop-page):not(.about-page).light-theme .header .logo:hover .logo-lightning-mobile-img,
body:not(.home-page):not(.shop-page):not(.about-page)[data-theme="light"] .header .logo:hover .logo-lightning-mobile-img,
body.auth-page.light-theme .header .logo:hover .logo-lightning-mobile-img,
body.auth-page[data-theme="light"] .header .logo:hover .logo-lightning-mobile-img,
body.auth-page.light-mode .header .logo:hover .logo-lightning-mobile-img,
body.light-theme .header.scrolled .logo-lightning-mobile-img:active,
body:not(.home-page):not(.shop-page):not(.about-page).light-theme .header .logo-lightning-mobile-img:active,
[data-theme="light"] .header.scrolled .logo-lightning-mobile-img:active {
  transform: scale(1.05) translateY(-1px) !important;
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

/* 3. Header Actions in Light Mode */
[data-theme="light"] .header .mobile-toggle-btn,
html.light-theme .header .mobile-toggle-btn,
body.light-theme .header .mobile-toggle-btn,
body.light-mode .header .mobile-toggle-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 168, 89, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .header .mobile-toggle-btn .bar,
html.light-theme .header .mobile-toggle-btn .bar,
body.light-theme .header .mobile-toggle-btn .bar,
body.light-mode .header .mobile-toggle-btn .bar {
  background: linear-gradient(90deg, #008746, #00a859) !important;
  box-shadow: none !important;
}

[data-theme="light"] .header .nav-profile-icon-btn,
html.light-theme .header .nav-profile-icon-btn,
body.light-theme .header .nav-profile-icon-btn,
body.light-mode .header .nav-profile-icon-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  color: #008746 !important;
  box-shadow: 0 4px 15px rgba(0, 168, 89, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .header .nav-profile-icon-btn svg,
html.light-theme .header .nav-profile-icon-btn svg,
body.light-theme .header .nav-profile-icon-btn svg {
  fill: #008746 !important;
}

[data-theme="light"] .header .cyber-theme-toggle-btn,
html.light-theme .header .cyber-theme-toggle-btn,
body.light-theme .header .cyber-theme-toggle-btn,
body.light-mode .header .cyber-theme-toggle-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 168, 89, 0.15) !important;
}

/* Ensure Header Layout Remains 100% Permanent & Stable When Scrolling */
.header,
.header.scrolled {
  padding: 0.75rem 2rem !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

@media (min-width: 1151px) {
  .mobile-toggle-btn {
    display: none !important;
  }
  .nav.nav-centered,
  .nav-centered {
    display: flex !important;
    gap: clamp(1.2rem, 1.8vw, 2.4rem) !important;
  }
}

@media (max-width: 1150px) {
  .nav.nav-centered,
  .nav-centered,
  .nav {
    display: none !important;
  }
  
  .mobile-toggle-btn {
    display: flex !important;
  }

  .header,
  .header.scrolled,
  #header,
  #header.scrolled {
    padding: 0.65rem 1rem !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 2000 !important;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, border-bottom 0.35s ease, box-shadow 0.35s ease !important;
  }

  /* Unscrolled Header in Mobile: Transparent over hero section for Home, Shop and About */
  .header:not(.scrolled),
  #header:not(.scrolled),
  :root:not([data-theme="light"]) .header:not(.scrolled),
  body:not(.light-theme) .header:not(.scrolled),
  body.home-page.light-theme .header:not(.scrolled),
  body.home-page[data-theme="light"] .header:not(.scrolled),
  body.shop-page.light-theme .header:not(.scrolled),
  body.shop-page[data-theme="light"] .header:not(.scrolled),
  body.about-page.light-theme .header:not(.scrolled),
  body.about-page[data-theme="light"] .header:not(.scrolled) {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Scrolled Header in Light Mode — White Glass */
  body.light-theme .header.scrolled,
  body.light-mode .header.scrolled,
  [data-theme="light"] .header.scrolled,
  body:not(.home-page):not(.shop-page):not(.about-page).light-theme .header,
  body:not(.home-page):not(.shop-page):not(.about-page)[data-theme="light"] .header,
  body:not(.home-page):not(.shop-page):not(.about-page).light-mode .header {
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1.5px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  }

  /* Scrolled Header in Dark Mode: Obsidian cyber glass */
  :root:not([data-theme="light"]) .header.scrolled,
  body:not(.light-theme) .header.scrolled,
  :root:not([data-theme="light"]) #header.scrolled,
  body:not(.light-theme) #header.scrolled {
    background: rgba(4, 10, 6, 0.94) !important;
    background-color: rgba(4, 10, 6, 0.94) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.25) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 255, 136, 0.2) !important;
  }

  /* ==========================================================================
     ⚡ PIXEL-PERFECT HEADER ACTIONS VERTICAL ALIGNMENT (THEME, PROFILE, MENU)
     ========================================================================== */
  .header-actions,
  .header.scrolled .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }

  .logo-lightning-mobile-img,
  .header.scrolled .logo-lightning-mobile-img {
    height: 42px !important;
    max-width: 210px !important;
  }
}

@media (max-width: 480px) {
  .header,
  .header.scrolled {
    padding: 0.5rem 0.75rem !important;
  }

  .header-actions,
  .header.scrolled .header-actions {
    gap: 0.45rem !important;
  }

  .logo-lightning-mobile-img,
  .header.scrolled .logo-lightning-mobile-img {
    height: 36px !important;
    max-width: 175px !important;
  }
}

/* ==========================================================================
   ⚡ ULTRA-LUXURY CYBER EV MOBILE MENU DRAWER (PORSCHE / ATHER / TESLA STYLE)
   ========================================================================== */
.mobile-menu-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

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

/* Dark Frosted Glass Backdrop */
.drawer-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(2, 6, 14, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: opacity 0.35s ease !important;
}

/* Sliding Right Glass Panel */
.drawer-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 90vw !important;
  max-width: 420px !important;
  height: 100% !important;
  background: linear-gradient(165deg, rgba(6, 14, 26, 0.98) 0%, rgba(2, 6, 14, 0.99) 100%) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-left: 1.5px solid rgba(0, 240, 255, 0.25) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.9), -5px 0 25px rgba(0, 240, 255, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.mobile-menu-drawer.open .drawer-panel {
  transform: translateX(0) !important;
}

/* Drawer Header */
.drawer-header {
  padding: 1.1rem 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12) !important;
  background: rgba(0, 240, 255, 0.02) !important;
}

.drawer-logo-img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)) !important;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #00f0ff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25) !important;
}

.drawer-close-btn:hover,
.drawer-close-btn:active {
  background: rgba(0, 240, 255, 0.2) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.7) !important;
}

/* Drawer Scrollable Body */
.drawer-body {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 1.3rem 1.3rem 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Feature Card: Free Test Ride Banner */
.drawer-test-ride-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  padding: 1.25rem 1.3rem !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16) 0%, rgba(0, 255, 136, 0.08) 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.45) !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.drawer-test-ride-banner:hover,
.drawer-test-ride-banner:active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.24) 0%, rgba(0, 255, 136, 0.15) 100%) !important;
  border-color: #00f0ff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(0, 240, 255, 0.4) !important;
}

.banner-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.banner-badge {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  color: #000000 !important;
  background: linear-gradient(135deg, #00f0ff 0%, #00ff88 100%) !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 20px !important;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6) !important;
  white-space: nowrap !important;
}

.banner-title {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.banner-sub {
  font-size: 0.76rem !important;
  color: #cbd5e1 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.banner-arrow {
  color: #00ff88 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  transition: transform 0.25s ease !important;
}

.drawer-test-ride-banner:hover .banner-arrow {
  transform: translateX(5px) !important;
}

/* Light Mode Styling for Enquire Now Banner */
body.light-theme .drawer-test-ride-banner,
[data-theme="light"] .drawer-test-ride-banner,
body.light-mode .drawer-test-ride-banner {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(0, 255, 136, 0.1) 100%) !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 8px 25px rgba(0, 168, 89, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .drawer-test-ride-banner .banner-title,
[data-theme="light"] .drawer-test-ride-banner .banner-title,
body.light-mode .drawer-test-ride-banner .banner-title {
  color: #0f172a !important;
}

body.light-theme .drawer-test-ride-banner .banner-sub,
[data-theme="light"] .drawer-test-ride-banner .banner-sub,
body.light-mode .drawer-test-ride-banner .banner-sub {
  color: #475569 !important;
}

body.light-theme .drawer-test-ride-banner .banner-badge,
[data-theme="light"] .drawer-test-ride-banner .banner-badge,
body.light-mode .drawer-test-ride-banner .banner-badge {
  background: linear-gradient(135deg, #00f0ff 0%, #00ff88 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

.drawer-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.drawer-section-title {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.25em !important;
  color: #00f0ff !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
}

/* Navigation Links */
.drawer-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.drawer-nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.9rem 1.1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  transition: all 0.25s ease !important;
}

.drawer-nav-link.highlight-link {
  border-color: rgba(0, 240, 255, 0.35) !important;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.nav-svg-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 0.85rem !important;
  color: #00ff88 !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.4)) !important;
}

.nav-link-text {
  flex: 1 !important;
}

.nav-badge-pulse {
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  color: #000000 !important;
  background: #00ff88 !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 20px !important;
  margin-right: 0.5rem !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6) !important;
}

.nav-link-arrow {
  color: #00ff88 !important;
  font-size: 1.05rem !important;
  transition: transform 0.25s ease !important;
}

.drawer-nav-link:hover,
.drawer-nav-link:active {
  background: rgba(0, 255, 136, 0.14) !important;
  border-color: rgba(0, 255, 136, 0.6) !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2) !important;
}

.drawer-nav-link:hover .nav-link-arrow {
  transform: translateX(4px) !important;
}

/* Scooter Lineup Cards Grid */
.drawer-models-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.65rem !important;
}

.drawer-model-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.9rem 0.65rem !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.drawer-model-card img {
  height: 55px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.3s ease !important;
}

.model-details {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0.45rem !important;
  gap: 0.15rem !important;
}

.model-title {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
}

.model-badge {
  font-size: 0.58rem !important;
  color: #00ff88 !important;
  font-weight: 600 !important;
}

.drawer-model-card:hover,
.drawer-model-card:active {
  background: rgba(0, 255, 136, 0.08) !important;
  border-color: rgba(0, 255, 136, 0.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.25) !important;
}

.drawer-model-card:hover img {
  transform: scale(1.08) translateY(-2px) !important;
}

/* Action Tiles */
.drawer-action-tiles {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.drawer-tile-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.8rem 0.95rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #cbd5e1 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.tile-svg {
  width: 18px !important;
  height: 18px !important;
  color: #00ff88 !important;
  flex-shrink: 0 !important;
}

.drawer-tile-link:hover {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(0, 255, 136, 0.4) !important;
}

/* Sublinks Grid */
.drawer-sublinks-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.55rem !important;
}

.drawer-sublinks-grid a {
  padding: 0.65rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.drawer-sublinks-grid a:hover {
  background: rgba(0, 255, 136, 0.12) !important;
  color: #00ff88 !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
}

/* Primary Order CTA Button */
.drawer-cta-container {
  margin-top: 0.5rem !important;
}

.drawer-main-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.05rem 1.25rem !important;
  background: linear-gradient(135deg, #00ff88 0%, #059669 100%) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  color: #042f2e !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  box-shadow: 0 8px 30px rgba(0, 255, 136, 0.45) !important;
  transition: all 0.3s ease !important;
}

.drawer-main-cta-btn:hover,
.drawer-main-cta-btn:active {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(0, 255, 136, 0.7) !important;
}

.drawer-main-cta-btn:hover,
.drawer-main-cta-btn:active {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.7) !important;
}

/* Drawer Footer */
.drawer-footer {
  text-align: center !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-tagline {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: #00ff88 !important;
  margin: 0 0 0.3rem !important;
}

.footer-subtext {
  font-size: 0.7rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* ==========================================================================
   ⚡ AUTH 3D STAGE SHOWCASE MOBILE RESPONSIVE FIXES (LOGIN & REGISTER)
   ========================================================================== */
@media (max-width: 992px) {
  .auth-3d-stage-column {
    margin-bottom: 1.5rem !important;
  }

  .auth-3d-card-wrapper {
    min-height: auto !important;
    padding: 1.3rem 1.1rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .auth-3d-top-bar {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 0.75rem !important;
  }

  .auth-3d-cutout-box {
    height: 190px !important;
    margin: 0.5rem auto 0.75rem auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .auth-scooter-circle-stage {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto !important;
  }

  .auth-3d-cutout-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 180px !important;
    max-height: 180px !important;
    object-fit: cover !important;
  }

  .auth-trust-badges-banner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
    margin: 1rem 0 1.25rem 0 !important;
    justify-items: center !important;
    width: 100% !important;
  }

  .round-trust-badge-card {
    gap: 0.3rem !important;
  }

  .round-badge-title {
    font-size: 0.58rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  .auth-3d-card-wrapper {
    padding: 1rem 0.85rem !important;
    border-radius: 20px !important;
  }

  .auth-3d-cutout-box {
    height: 165px !important;
    margin: 0.4rem auto 0.5rem auto !important;
  }

  .auth-scooter-circle-stage {
    width: 155px !important;
    height: 155px !important;
  }

  .auth-3d-cutout-img {
    max-width: 155px !important;
    max-height: 155px !important;
  }

  .auth-trust-badges-banner {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.25rem !important;
    margin: 0.85rem 0 1rem 0 !important;
  }

  .round-badge-title {
    font-size: 0.52rem !important;
    letter-spacing: 0.02em !important;
  }

  .auth-model-switcher-ribbon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    justify-content: center !important;
    margin-top: 0.75rem !important;
  }

  .auth-model-pill {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.68rem !important;
  }
}

/* ==========================================================================
   ⚡ ULTRA-LUXURY CORPORATE CERTIFICATION & TRUST BADGES BANNER
   ========================================================================== */
.footer-pro-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12) !important;
  width: 100% !important;
}

.footer-pro-top .logo-lightning-mobile-img {
  height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.55)) !important;
  background: transparent !important;
}

.footer-pro-certifications,
body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-certifications {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.85rem !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

.cert-pill,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  gap: 0.55rem !important;
  background: linear-gradient(135deg, rgba(8, 20, 36, 0.9) 0%, rgba(3, 10, 20, 0.95) 100%) !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  border-radius: 30px !important;
  padding: 0.5rem 0.75rem !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.cert-pill svg,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 8px currentColor) !important;
}

.cert-pill:hover,
.cert-pill:active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill:active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18) 0%, rgba(0, 255, 136, 0.1) 100%) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.35) !important;
}

/* ==========================================================================
   ⚡ ULTRA-LUXURY FOOTER PRO MOBILE SPECIFICATION (ALL PAGES)
   ========================================================================== */
@media (max-width: 992px) {
  .footer-pro,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro {
    padding: 3.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)) 1.5rem !important;
  }

  .footer-pro-certifications,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-certifications {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    max-width: 520px !important;
    width: 100% !important;
  }

  .cert-pill,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 0.7rem !important;
    width: 100% !important;
  }

  .footer-pro-grid,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.2rem 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .footer-pro,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro {
    padding: 3rem 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px)) 1.2rem !important;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.98) 0%, #03070f 100%) !important;
    border-top: 1px solid rgba(0, 240, 255, 0.15) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .footer-pro-container,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .footer-pro-top,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-top {
    gap: 1.4rem !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-pro-certifications,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-certifications {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cert-pill,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.45rem 0.5rem !important;
    font-size: 0.68rem !important;
    border-radius: 30px !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .cert-pill svg,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .cert-pill svg {
    width: 16px !important;
    height: 16px !important;
  }

  .footer-pro-grid,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
    text-align: left !important;
  }

  .footer-pro-col-title,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-col-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.9rem !important;
  }

  .footer-pro-desc,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-desc {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    color: #94a3b8 !important;
    margin-bottom: 1rem !important;
  }

  .footer-contact-row,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    font-size: 0.82rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 0.65rem !important;
    line-height: 1.4 !important;
  }

  .footer-social-icons,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
  }

  .social-icon-btn,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .social-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .footer-pro-list,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .footer-pro-link,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-link {
    font-size: 0.84rem !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .footer-pro-bottom,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding-top: 1.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
  }

  .footer-pro-legal-links,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-legal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 1.25rem !important;
    font-size: 0.76rem !important;
  }

  .footer-pro-legal-links a,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-legal-links a {
    color: #94a3b8 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 480px) {
  .footer-pro,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro {
    padding: 2.5rem 0.85rem calc(1.75rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
  }

  .footer-pro-top,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-top {
    gap: 1.2rem !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 1.5rem !important;
  }

  .footer-pro-top .logo-lightning-mobile-img {
    height: 38px !important;
  }

  .footer-pro-certifications,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-certifications {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .cert-pill,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill {
    padding: 0.65rem 0.45rem !important;
    font-size: 0.62rem !important;
    border-radius: 18px !important;
    gap: 0.4rem !important;
  }

  .cert-pill svg {
    width: 14px !important;
    height: 14px !important;
  }

  .footer-pro-col-title,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-col-title {
    font-size: 0.98rem !important;
  }

  .footer-pro-desc,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-desc,
  .footer-contact-row,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row,
  .footer-pro-link,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-link {
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   ⚡ MOBILE RESPONSIVE ATHER SPEC TRIAD & CARD METRICS PERFECTION
   ========================================================================== */
@media (max-width: 900px) {
  .ather-ev-card {
    padding: 1.5rem 1.25rem !important;
  }
  .ather-spec-triad {
    padding: 0.7rem 0.55rem !important;
    gap: 0.15rem !important;
  }
  .spec-triad-item .spec-val {
    font-size: 0.98rem !important;
  }
  .spec-triad-item .spec-val small {
    font-size: 0.58rem !important;
  }
  .spec-triad-item .spec-lbl {
    font-size: 0.55rem !important;
  }
}

@media (max-width: 600px) {
  .ather-ev-card {
    padding: 1.35rem 1rem !important;
    border-radius: 20px !important;
  }
  .ather-model-title {
    font-size: 1.25rem !important;
  }
  .ather-scooter-stage {
    height: 260px !important;
  }
  .ather-scooter-img {
    max-height: 245px !important;
  }
  .ather-spec-triad {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.65rem 0.45rem !important;
    margin-bottom: 1.2rem !important;
    border-radius: 12px !important;
    gap: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .spec-triad-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 1px !important;
  }
  .spec-triad-item .spec-val {
    font-size: 0.88rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.2rem !important;
    white-space: normal !important; word-break: break-word !important;
  }
  .spec-triad-item .spec-val small {
    font-size: 0.52rem !important;
    margin-left: 2px !important;
  }
  .spec-triad-item .spec-lbl {
    font-size: 0.5rem !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
  }
  .spec-divider {
    height: 18px !important;
    margin: 0 2px !important;
  }
}

@media (max-width: 380px) {
  .ather-ev-card {
    padding: 1.15rem 0.8rem !important;
  }
  .ather-spec-triad {
    padding: 0.55rem 0.3rem !important;
  }
  .spec-triad-item .spec-val {
    font-size: 0.78rem !important;
  }
  .spec-triad-item .spec-val small {
    font-size: 0.48rem !important;
    margin-left: 1px !important;
  }
  .spec-triad-item .spec-lbl {
    font-size: 0.46rem !important;
    letter-spacing: 0 !important;
  }
  .spec-divider {
    height: 16px !important;
    margin: 0 1px !important;
  }
}

/* ==========================================================================
   ⚡ SINGLE COMPACT SHOP FILTER BAR & FLOATING DROPDOWN (APPLE / PORSCHE STYLE)
   ========================================================================== */
.shop-filter-bar-compact {
  max-width: 1400px !important;
  margin: 1.5rem auto 1.5rem auto !important;
  padding: 0 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}

.filter-count-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.filter-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #00ff88 !important;
  box-shadow: 0 0 10px #00ff88 !important;
  display: inline-block !important;
}

.filter-count-text {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
}

.filter-button-dropdown-wrap {
  position: relative !important;
  display: inline-block !important;
}

.compact-filter-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.65rem 1.25rem !important;
  background: linear-gradient(135deg, rgba(6, 24, 20, 0.9) 0%, rgba(2, 12, 10, 0.95) 100%) !important;
  border: 1.5px solid #00ff88 !important;
  border-radius: 30px !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 255, 136, 0.25) !important;
  transition: all 0.3s ease !important;
}

.compact-filter-pill-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(6, 24, 20, 0.95) 100%) !important;
  box-shadow: 0 6px 25px rgba(0, 255, 136, 0.4) !important;
  transform: translateY(-2px) !important;
}

.compact-filter-pill-btn svg {
  stroke: #00ff88 !important;
  flex-shrink: 0 !important;
}

.compact-filter-pill-btn .chevron-down-svg {
  transition: transform 0.3s ease !important;
}

.compact-filter-pill-btn.open .chevron-down-svg {
  transform: rotate(180deg) !important;
}

/* Floating Dropdown Menu */
.compact-filter-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 270px !important;
  background: linear-gradient(165deg, rgba(6, 20, 18, 0.98) 0%, rgba(2, 10, 8, 0.99) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(0, 255, 136, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 255, 136, 0.2) !important;
  padding: 0.75rem !important;
  z-index: 1000 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  box-sizing: border-box !important;
  animation: filterDropdownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.compact-filter-menu.open {
  display: flex !important;
}

@keyframes filterDropdownFade {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.filter-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.3rem 0.5rem 0.5rem 0.5rem !important;
  border-bottom: 1px solid rgba(0, 255, 136, 0.15) !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  color: #00ff88 !important;
}

.filter-menu-close {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}

.filter-menu-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  margin-top: 0.35rem !important;
}

.filter-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 0.85rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.filter-menu-item .item-icon-name {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.filter-menu-item .item-icon-name svg {
  stroke: #00ff88 !important;
  width: 16px !important;
  height: 16px !important;
}

.filter-menu-item .item-badge-count {
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.25) !important;
  color: #00ff88 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.1rem 0.45rem !important;
  border-radius: 12px !important;
}

.filter-menu-item:hover {
  background: rgba(0, 255, 136, 0.12) !important;
  color: #ffffff !important;
}

.filter-menu-item.active {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
  border-color: rgba(0, 255, 136, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.filter-menu-item.active .item-badge-count {
  background: #00ff88 !important;
  color: #022016 !important;
}

/* Mobile full width responsiveness */
@media (max-width: 768px) {
  .shop-filter-bar-compact {
    padding: 0 0.85rem !important;
    margin: 1rem auto 1.2rem auto !important;
    gap: 0.5rem !important;
  }
  .filter-count-text {
    font-size: 0.82rem !important;
  }
  .compact-filter-pill-btn {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.75rem !important;
    gap: 0.45rem !important;
  }
  .compact-filter-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 250px !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
}

/* ==========================================================================
   ⚡ MOBILE FILTER BOTTOM SHEET DRAWER OVERLAY (DEDICATED FOR MOBILE)
   ========================================================================== */
.mobile-filter-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483600 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

.mobile-filter-drawer-overlay.open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-filter-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(2, 10, 8, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.mobile-filter-panel {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 82vh !important;
  max-height: 82dvh !important;
  background: linear-gradient(175deg, rgba(6, 22, 18, 0.98) 0%, rgba(2, 10, 8, 0.99) 100%) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-top: 1.5px solid rgba(0, 255, 136, 0.4) !important;
  border-radius: 26px 26px 0 0 !important;
  box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.95), 0 -2px 25px rgba(0, 255, 136, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-bottom: env(safe-area-inset-bottom, 12px) !important;
}

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

.mobile-filter-drag-handle {
  width: 38px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
  margin: 10px auto 4px auto !important;
}

.mobile-filter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.8rem 1.4rem 0.9rem 1.4rem !important;
  border-bottom: 1px solid rgba(0, 255, 136, 0.15) !important;
}

.mobile-filter-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.06em !important;
}

.mobile-filter-title svg {
  stroke: #00ff88 !important;
}

.mobile-filter-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
  color: #00ff88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mobile-filter-close-btn:hover {
  background: rgba(0, 255, 136, 0.2) !important;
  transform: scale(1.08) !important;
}

.mobile-filter-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.1rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.mobile-filter-group-label {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: #00ff88 !important;
  text-transform: uppercase !important;
}

.mobile-filter-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.mobile-filter-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.85rem 1.1rem !important;
  background: rgba(10, 24, 20, 0.6) !important;
  border: 1.5px solid rgba(0, 255, 136, 0.18) !important;
  border-radius: 14px !important;
  color: #cbd5e1 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.mobile-filter-item .filter-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
}

.mobile-filter-item .filter-item-left svg {
  flex-shrink: 0 !important;
}

.mobile-filter-item .filter-item-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.mobile-filter-item .filter-item-count {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
}

.mobile-filter-item .filter-check-mark {
  display: none !important;
  color: #00ff88 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.mobile-filter-item.active {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.22) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  border-color: #00ff88 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
}

.mobile-filter-item.active .filter-item-count {
  color: #00ff88 !important;
  font-weight: 800 !important;
}

.mobile-filter-item.active .filter-check-mark {
  display: inline-block !important;
}

.mobile-filter-footer {
  padding: 1rem 1.4rem 0.8rem 1.4rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.mobile-filter-apply-btn {
  width: 100% !important;
  padding: 0.95rem 1.25rem !important;
  background: linear-gradient(135deg, #00ff88 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #022016 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4) !important;
  transition: all 0.25s ease !important;
}

.mobile-filter-apply-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 12px 35px rgba(0, 255, 136, 0.6) !important;
}

/* ==========================================================================
   ⚡ DUAL-THEME LIGHT MODE OVERRIDES FOR DRAWERS & HAMBURGER (EMERALD GREEN)
   ========================================================================== */

/* 1. Hamburger Toggle Button Light Mode */
body.light-theme #mobile-toggle-btn,
body.light-mode #mobile-toggle-btn,
[data-theme="light"] #mobile-toggle-btn {
  background: #ffffff !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.2), 0 0 10px rgba(5, 150, 105, 0.1) !important;
}

body.light-theme #mobile-toggle-btn .bar,
body.light-theme #mobile-toggle-btn span,
body.light-mode #mobile-toggle-btn .bar,
body.light-mode #mobile-toggle-btn span,
[data-theme="light"] #mobile-toggle-btn .bar,
[data-theme="light"] #mobile-toggle-btn span {
  background: linear-gradient(90deg, #059669, #10b981) !important;
  box-shadow: 0 0 4px rgba(5, 150, 105, 0.4) !important;
}

body.light-theme #mobile-toggle-btn svg,
body.light-mode #mobile-toggle-btn svg,
[data-theme="light"] #mobile-toggle-btn svg {
  stroke: #059669 !important;
  color: #059669 !important;
}

body.light-theme #mobile-toggle-btn.active,
body.light-mode #mobile-toggle-btn.active,
[data-theme="light"] #mobile-toggle-btn.active {
  border-color: #059669 !important;
  background: rgba(5, 150, 105, 0.08) !important;
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.4) !important;
}

/* 2. Mobile Navigation Drawer Light Mode */
body.light-theme .drawer-backdrop,
body.light-mode .drawer-backdrop,
[data-theme="light"] .drawer-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(16px) !important;
}

body.light-theme .drawer-panel,
body.light-mode .drawer-panel,
[data-theme="light"] .drawer-panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.99) 100%) !important;
  border-left: 1.5px solid rgba(5, 150, 105, 0.25) !important;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.18), -5px 0 25px rgba(5, 150, 105, 0.15) !important;
}

body.light-theme .drawer-header,
body.light-mode .drawer-header,
[data-theme="light"] .drawer-header {
  border-bottom: 1px solid rgba(5, 150, 105, 0.15) !important;
  background: rgba(5, 150, 105, 0.04) !important;
}

body.light-theme .drawer-close-btn,
body.light-mode .drawer-close-btn,
[data-theme="light"] .drawer-close-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
  color: #059669 !important;
}

body.light-theme .drawer-close-btn:hover,
body.light-mode .drawer-close-btn:hover,
[data-theme="light"] .drawer-close-btn:hover {
  background: rgba(5, 150, 105, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.4) !important;
}

body.light-theme .drawer-group-title,
body.light-mode .drawer-group-title,
[data-theme="light"] .drawer-group-title {
  color: #059669 !important;
}

body.light-theme .drawer-nav-link,
body.light-mode .drawer-nav-link,
[data-theme="light"] .drawer-nav-link {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(5, 150, 105, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.06) !important;
}

body.light-theme .drawer-nav-link:hover,
body.light-mode .drawer-nav-link:hover,
[data-theme="light"] .drawer-nav-link:hover {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  border-color: #059669 !important;
  color: #059669 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.2) !important;
}

body.light-theme .drawer-nav-link .link-icon-wrap,
body.light-mode .drawer-nav-link .link-icon-wrap,
[data-theme="light"] .drawer-nav-link .link-icon-wrap {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}

body.light-theme .drawer-scooter-card,
body.light-mode .drawer-scooter-card,
[data-theme="light"] .drawer-scooter-card {
  background: #ffffff !important;
  border: 1px solid rgba(5, 150, 105, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .drawer-scooter-name,
body.light-mode .drawer-scooter-name,
[data-theme="light"] .drawer-scooter-name {
  color: #0f172a !important;
}

body.light-theme .drawer-footer,
body.light-mode .drawer-footer,
[data-theme="light"] .drawer-footer {
  border-top: 1px solid rgba(5, 150, 105, 0.12) !important;
  background: rgba(240, 253, 244, 0.8) !important;
}

body.light-theme .footer-tagline,
body.light-mode .footer-tagline,
[data-theme="light"] .footer-tagline {
  color: #059669 !important;
}

body.light-theme .footer-subtext,
body.light-mode .footer-subtext,
[data-theme="light"] .footer-subtext {
  color: #64748b !important;
}

/* 3. Shop Filter Drawer Light Mode */
body.light-theme .shop-filter-open-btn,
body.light-mode .shop-filter-open-btn,
[data-theme="light"] .shop-filter-open-btn {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  border-color: #059669 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.15) !important;
}

body.light-theme .shop-filter-open-btn svg,
body.light-mode .shop-filter-open-btn svg,
[data-theme="light"] .shop-filter-open-btn svg {
  stroke: #059669 !important;
}

body.light-theme .filter-drawer-backdrop,
body.light-mode .filter-drawer-backdrop,
[data-theme="light"] .filter-drawer-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}

body.light-theme .filter-drawer-panel,
body.light-mode .filter-drawer-panel,
[data-theme="light"] .filter-drawer-panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.99) 100%) !important;
  border-left: 1.5px solid rgba(5, 150, 105, 0.25) !important;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.2), -5px 0 25px rgba(5, 150, 105, 0.15) !important;
}

body.light-theme .filter-drawer-header,
body.light-mode .filter-drawer-header,
[data-theme="light"] .filter-drawer-header {
  border-bottom: 1px solid rgba(5, 150, 105, 0.15) !important;
  background: rgba(5, 150, 105, 0.04) !important;
}

body.light-theme .filter-drawer-title,
body.light-mode .filter-drawer-title,
[data-theme="light"] .filter-drawer-title {
  color: #0f172a !important;
}

body.light-theme .filter-drawer-close-btn,
body.light-mode .filter-drawer-close-btn,
[data-theme="light"] .filter-drawer-close-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
  color: #059669 !important;
}

body.light-theme .filter-group-label,
body.light-mode .filter-group-label,
[data-theme="light"] .filter-group-label {
  color: #059669 !important;
}

body.light-theme .filter-drawer-pills .shop-pill,
body.light-mode .filter-drawer-pills .shop-pill,
[data-theme="light"] .filter-drawer-pills .shop-pill {
  background: #ffffff !important;
  border: 1.5px solid rgba(5, 150, 105, 0.2) !important;
  color: #1e293b !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .filter-drawer-pills .shop-pill.active,
body.light-mode .filter-drawer-pills .shop-pill.active,
[data-theme="light"] .filter-drawer-pills .shop-pill.active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.16) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  border-color: #059669 !important;
  color: #059669 !important;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.25) !important;
}

body.light-theme .filter-drawer-footer,
body.light-mode .filter-drawer-footer,
[data-theme="light"] .filter-drawer-footer {
  border-top: 1px solid rgba(5, 150, 105, 0.12) !important;
  background: rgba(240, 253, 244, 0.8) !important;
}

body.light-theme .filter-apply-btn,
body.light-mode .filter-apply-btn,
[data-theme="light"] .filter-apply-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(5, 150, 105, 0.35) !important;
}

/* 4. Compact Filter Bar & Pill Dropdown Light Mode */
body.light-theme .shop-filter-bar-compact,
body.light-mode .shop-filter-bar-compact,
[data-theme="light"] .shop-filter-bar-compact {
  background: transparent !important;
}

body.light-theme .filter-count-text,
body.light-mode .filter-count-text,
[data-theme="light"] .filter-count-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .filter-live-dot,
body.light-mode .filter-live-dot,
[data-theme="light"] .filter-live-dot {
  background: #059669 !important;
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.5) !important;
}

body.light-theme .compact-filter-pill-btn,
body.light-mode .compact-filter-pill-btn,
[data-theme="light"] .compact-filter-pill-btn {
  background: #ffffff !important;
  border: 1.5px solid #059669 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(5, 150, 105, 0.12) !important;
}

body.light-theme .compact-filter-pill-btn span,
body.light-mode .compact-filter-pill-btn span,
[data-theme="light"] .compact-filter-pill-btn span,
body.light-theme #selected-filter-label,
body.light-mode #selected-filter-label,
[data-theme="light"] #selected-filter-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .compact-filter-pill-btn svg,
body.light-mode .compact-filter-pill-btn svg,
[data-theme="light"] .compact-filter-pill-btn svg {
  stroke: #059669 !important;
}

body.light-theme .compact-filter-pill-btn .chevron-down-svg,
body.light-mode .compact-filter-pill-btn .chevron-down-svg,
[data-theme="light"] .compact-filter-pill-btn .chevron-down-svg {
  stroke: #475569 !important;
}

body.light-theme .compact-filter-pill-btn:hover,
body.light-mode .compact-filter-pill-btn:hover,
[data-theme="light"] .compact-filter-pill-btn:hover {
  background: #f0fdf4 !important;
  border-color: #047857 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* Compact Filter Desktop Menu Light Mode */
body.light-theme .compact-filter-menu,
body.light-mode .compact-filter-menu,
[data-theme="light"] .compact-filter-menu {
  background: #ffffff !important;
  border: 1.5px solid rgba(5, 150, 105, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(5, 150, 105, 0.08) !important;
}

body.light-theme .filter-menu-header,
body.light-mode .filter-menu-header,
[data-theme="light"] .filter-menu-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #059669 !important;
}

body.light-theme .filter-menu-close,
body.light-mode .filter-menu-close,
[data-theme="light"] .filter-menu-close {
  color: #64748b !important;
}

body.light-theme .filter-menu-close:hover,
body.light-mode .filter-menu-close:hover,
[data-theme="light"] .filter-menu-close:hover {
  color: #ef4444 !important;
}

body.light-theme .filter-menu-item,
body.light-mode .filter-menu-item,
[data-theme="light"] .filter-menu-item {
  color: #334155 !important;
  background: transparent !important;
}

body.light-theme .filter-menu-item:hover,
body.light-mode .filter-menu-item:hover,
[data-theme="light"] .filter-menu-item:hover {
  background: #f0fdf4 !important;
  color: #0f172a !important;
}

body.light-theme .filter-menu-item .item-icon-name svg,
body.light-mode .filter-menu-item .item-icon-name svg,
[data-theme="light"] .filter-menu-item .item-icon-name svg {
  stroke: #059669 !important;
}

body.light-theme .filter-menu-item .item-badge-count,
body.light-mode .filter-menu-item .item-badge-count,
[data-theme="light"] .filter-menu-item .item-badge-count {
  background: rgba(5, 150, 105, 0.1) !important;
  border: 1px solid rgba(5, 150, 105, 0.22) !important;
  color: #059669 !important;
}

body.light-theme .filter-menu-item.active,
body.light-mode .filter-menu-item.active,
[data-theme="light"] .filter-menu-item.active {
  background: #ecfdf5 !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
  color: #047857 !important;
  font-weight: 800 !important;
}

body.light-theme .filter-menu-item.active .item-badge-count,
body.light-mode .filter-menu-item.active .item-badge-count,
[data-theme="light"] .filter-menu-item.active .item-badge-count {
  background: #059669 !important;
  color: #ffffff !important;
}

/* Compact Filter Mobile Panel Light Mode */
body.light-theme .mobile-filter-panel,
body.light-mode .mobile-filter-panel,
[data-theme="light"] .mobile-filter-panel {
  background: #ffffff !important;
  border-top: 1.5px solid rgba(5, 150, 105, 0.25) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .mobile-filter-drag-handle,
body.light-mode .mobile-filter-drag-handle,
[data-theme="light"] .mobile-filter-drag-handle {
  background: #cbd5e1 !important;
}

body.light-theme .mobile-filter-header,
body.light-mode .mobile-filter-header,
[data-theme="light"] .mobile-filter-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .mobile-filter-title,
body.light-mode .mobile-filter-title,
[data-theme="light"] .mobile-filter-title {
  color: #0f172a !important;
}

body.light-theme .mobile-filter-title svg,
body.light-mode .mobile-filter-title svg,
[data-theme="light"] .mobile-filter-title svg {
  stroke: #059669 !important;
}

body.light-theme .mobile-filter-close-btn,
body.light-mode .mobile-filter-close-btn,
[data-theme="light"] .mobile-filter-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

body.light-theme .mobile-filter-close-btn:hover,
body.light-mode .mobile-filter-close-btn:hover,
[data-theme="light"] .mobile-filter-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .mobile-filter-group-label,
body.light-mode .mobile-filter-group-label,
[data-theme="light"] .mobile-filter-group-label {
  color: #059669 !important;
}

body.light-theme .mobile-filter-item,
body.light-mode .mobile-filter-item,
[data-theme="light"] .mobile-filter-item {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
}

body.light-theme .mobile-filter-item .filter-item-left svg,
body.light-mode .mobile-filter-item .filter-item-left svg,
[data-theme="light"] .mobile-filter-item .filter-item-left svg {
  stroke: #059669 !important;
}

body.light-theme .mobile-filter-item .filter-item-name,
body.light-mode .mobile-filter-item .filter-item-name,
[data-theme="light"] .mobile-filter-item .filter-item-name {
  color: #0f172a !important;
}

body.light-theme .mobile-filter-item .filter-item-count,
body.light-mode .mobile-filter-item .filter-item-count,
[data-theme="light"] .mobile-filter-item .filter-item-count {
  color: #64748b !important;
}

body.light-theme .mobile-filter-item.active,
body.light-mode .mobile-filter-item.active,
[data-theme="light"] .mobile-filter-item.active {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #047857 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.15) !important;
}

body.light-theme .mobile-filter-item.active .filter-item-name,
body.light-mode .mobile-filter-item.active .filter-item-name,
[data-theme="light"] .mobile-filter-item.active .filter-item-name {
  color: #047857 !important;
}

body.light-theme .mobile-filter-item.active .filter-item-count,
body.light-mode .mobile-filter-item.active .filter-item-count,
[data-theme="light"] .mobile-filter-item.active .filter-item-count {
  color: #059669 !important;
}

body.light-theme .mobile-filter-item.active .filter-check-mark,
body.light-mode .mobile-filter-item.active .filter-check-mark,
[data-theme="light"] .mobile-filter-item.active .filter-check-mark {
  color: #059669 !important;
}

body.light-theme .mobile-filter-footer,
body.light-mode .mobile-filter-footer,
[data-theme="light"] .mobile-filter-footer {
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
}

body.light-theme .mobile-filter-apply-btn,
body.light-mode .mobile-filter-apply-btn,
[data-theme="light"] .mobile-filter-apply-btn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3) !important;
}

/* ==========================================================================
   ⚡ UNCLUTTERED & 100% GUARANTEED FLOATING ACTION BUTTONS (MOBILE & DESKTOP)
   ========================================================================== */

/* ==========================================================================
   ⚡ PIXEL-PERFECT BALANCED FLOATING ACTION BUTTONS (AI CHAT & SCROLL-TO-TOP)
   ========================================================================== */

/* 1. Outer Positioning & Dimensions (Desktop Default > 768px) */
.floating-ai-left-widget,
.floating-ai-fab-container,
.astar-support-widget,
#floating-ai-widget {
  position: fixed !important;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  left: calc(1.5rem + env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483640 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.scroll-top-btn,
#scroll-top-btn {
  position: fixed !important;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483640 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #041d1a !important;
  border: 2px solid #00ff88 !important;
  color: #00ff88 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 136, 0.5) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.9) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.scroll-top-btn.visible,
#scroll-top-btn.visible,
.floating-ai-left-widget.scrolled-visible,
.floating-ai-fab-container.scrolled-visible,
.astar-support-widget.scrolled-visible,
#floating-ai-widget.scrolled-visible,
.round-ai-fab-btn.scrolled-visible,
#round-ai-fab-btn.scrolled-visible,
.scrolled-visible .round-ai-fab-btn,
body.is-scrolled .floating-ai-left-widget,
body.is-scrolled #floating-ai-widget,
body.is-scrolled .round-ai-fab-btn,
body.is-scrolled #round-ai-fab-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.round-ai-fab-btn,
.ai-fab-btn,
.astar-fab,
#round-ai-fab-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #041d1a !important;
  border: 2px solid #00ff88 !important;
  color: #00ff88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 136, 0.5) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.round-ai-fab-btn:hover,
.ai-fab-btn:hover,
.astar-fab:hover,
.scroll-top-btn:hover,
#scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.06) !important;
  border-color: #00ff88 !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 255, 136, 0.8) !important;
}

.ai-avatar-svg-wrap,
.round-ai-fab-btn svg,
.ai-fab-btn svg,
.astar-fab svg,
.scroll-top-btn svg,
#scroll-top-btn svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #00ff88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.round-pulse-ring,
.fab-pulse-ring,
.astar-fab-pulse {
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  right: -4px !important;
  bottom: -4px !important;
  border-radius: 50% !important;
  border: 1.5px solid #00ff88 !important;
  animation: fabPulse 2s infinite !important;
  pointer-events: none !important;
}

@keyframes fabPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* 2. Tablet & Mobile Viewports (≤ 768px) — Exact Matching 46px Size & 1rem Spacing */
@media (max-width: 768px) {
  .floating-ai-left-widget,
  .floating-ai-fab-container,
  .astar-support-widget,
  #floating-ai-widget {
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(1rem + env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    width: 46px !important;
    height: 46px !important;
  }

  .scroll-top-btn,
  #scroll-top-btn {
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(1rem + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  .round-ai-fab-btn,
  .ai-fab-btn,
  .astar-fab,
  #round-ai-fab-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  .ai-avatar-svg-wrap,
  .round-ai-fab-btn svg,
  .ai-fab-btn svg,
  .astar-fab svg,
  .scroll-top-btn svg,
  #scroll-top-btn svg {
    width: 21px !important;
    height: 21px !important;
  }

  /* Clear sticky bottom booking bar on PDP pages */
  body.pdp-page-body .floating-ai-left-widget,
  body.pdp-page-body .floating-ai-fab-container,
  body.pdp-page-body .astar-support-widget,
  body.pdp-page-body #floating-ai-widget,
  body.pdp-page-body .scroll-top-btn,
  body.pdp-page-body #scroll-top-btn,
  body.pdp-page-body .scroll-to-top-btn,
  body.pdp-page-body #scroll-to-top-btn,
  body.pdp-page-body #floating-chat-widget,
  body.pdp-page-body .floating-chat-bubble,
  body.pdp-page-body .whatsapp-floating-btn {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ai-mini-popup-window {
    bottom: 60px !important;
    left: 0 !important;
    width: calc(100vw - 2rem) !important;
    max-width: 310px !important;
  }
}

/* 3. Ultra-Compact Phones (≤ 420px) — Exact Matching 42px Size & 0.85rem Spacing */
@media (max-width: 420px) {
  .floating-ai-left-widget,
  .floating-ai-fab-container,
  .astar-support-widget,
  #floating-ai-widget {
    bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(0.85rem + env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    width: 42px !important;
    height: 42px !important;
  }

  .scroll-top-btn,
  #scroll-top-btn {
    bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(0.85rem + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .round-ai-fab-btn,
  .ai-fab-btn,
  .astar-fab,
  #round-ai-fab-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .ai-avatar-svg-wrap,
  .round-ai-fab-btn svg,
  .ai-fab-btn svg,
  .astar-fab svg,
  .scroll-top-btn svg,
  #scroll-top-btn svg {
    width: 19px !important;
    height: 19px !important;
  }
}

/* 4. Light Mode Specification for FABs */
body.light-theme #round-ai-fab-btn,
body.light-mode #round-ai-fab-btn,
[data-theme="light"] #round-ai-fab-btn,
html.light-theme #round-ai-fab-btn,
body.light-theme .round-ai-fab-btn,
body.light-mode .round-ai-fab-btn,
[data-theme="light"] .round-ai-fab-btn,
html.light-theme .round-ai-fab-btn,
body.light-theme .ai-fab-btn,
body.light-mode .ai-fab-btn,
[data-theme="light"] .ai-fab-btn,
body.light-theme .astar-fab,
body.light-mode .astar-fab,
[data-theme="light"] .astar-fab {
  background: #ffffff !important;
  border: 2px solid #059669 !important;
  color: #059669 !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.25), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #round-ai-fab-btn:hover,
body.light-mode #round-ai-fab-btn:hover,
[data-theme="light"] #round-ai-fab-btn:hover,
body.light-theme .round-ai-fab-btn:hover,
body.light-mode .round-ai-fab-btn:hover,
[data-theme="light"] .round-ai-fab-btn:hover {
  background: #f0fdf4 !important;
  border-color: #047857 !important;
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.35) !important;
  transform: translateY(-3px) scale(1.06) !important;
}

body.light-theme #round-ai-fab-btn svg,
body.light-mode #round-ai-fab-btn svg,
[data-theme="light"] #round-ai-fab-btn svg,
body.light-theme .round-ai-fab-btn svg,
body.light-mode .round-ai-fab-btn svg,
[data-theme="light"] .round-ai-fab-btn svg,
body.light-theme .ai-avatar-svg-wrap svg,
[data-theme="light"] .ai-avatar-svg-wrap svg {
  color: #059669 !important;
  stroke: #059669 !important;
  fill: rgba(5, 150, 105, 0.15) !important;
}

body.light-theme #round-ai-fab-btn svg path,
[data-theme="light"] #round-ai-fab-btn svg path,
body.light-theme .round-ai-fab-btn svg path,
[data-theme="light"] .round-ai-fab-btn svg path {
  stroke: #059669 !important;
}

body.light-theme #round-ai-fab-btn svg circle,
[data-theme="light"] #round-ai-fab-btn svg circle,
body.light-theme .round-ai-fab-btn svg circle,
[data-theme="light"] .round-ai-fab-btn svg circle {
  fill: #059669 !important;
}

body.light-theme .round-pulse-ring,
body.light-theme .fab-pulse-ring,
body.light-theme .astar-fab-pulse,
body.light-mode .round-pulse-ring,
body.light-mode .fab-pulse-ring,
body.light-mode .astar-fab-pulse,
[data-theme="light"] .round-pulse-ring,
[data-theme="light"] .fab-pulse-ring,
[data-theme="light"] .astar-fab-pulse {
  border: 1.5px solid rgba(5, 150, 105, 0.45) !important;
}

body.light-theme .scroll-top-btn,
body.light-mode .scroll-top-btn,
[data-theme="light"] .scroll-top-btn,
body.light-theme #scroll-top-btn,
body.light-mode #scroll-top-btn,
[data-theme="light"] #scroll-top-btn {
  background: #ffffff !important;
  border-color: #059669 !important;
  color: #059669 !important;
  box-shadow: 0 10px 25px rgba(5, 150, 105, 0.3) !important;
}

body.light-theme .scroll-top-btn svg,
body.light-mode .scroll-top-btn svg,
[data-theme="light"] .scroll-top-btn svg {
  stroke: #059669 !important;
}

body.light-theme .scroll-top-btn:hover,
body.light-mode .scroll-top-btn:hover,
[data-theme="light"] .scroll-top-btn:hover,
body.light-theme #scroll-top-btn:hover,
body.light-mode #scroll-top-btn:hover,
[data-theme="light"] #scroll-top-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 12px 35px rgba(5, 150, 105, 0.45) !important;
}

body.light-theme .scroll-top-btn:hover svg,
body.light-mode .scroll-top-btn:hover svg,
[data-theme="light"] .scroll-top-btn:hover svg {
  stroke: #ffffff !important;
}

/* ==========================================================================
   ⚡ ULTRA 60FPS SCROLL RENDER PERFORMANCE ENGINE v2
   
   WHY THIS EXISTS:
   index.css contains 104 infinite animations, 201 backdrop-filters, and
   385 box-shadow/text-shadow/filter:blur — ALL with !important.
   
   The v1 fix used `*` selector which has ZERO specificity and was
   completely overridden by every specific selector in index.css.
   
   v2 uses the :not(#_) hack to inject ID-level specificity (1,0,0)
   which beats any class/element selector even with !important.
   ========================================================================== */

/* ---------- PHASE 1: Kill ALL infinite CSS animations (ALL viewports) ----------
   The :not(#_) trick gives this rule specificity 1,0,0 which beats
   any .class or element selector in index.css, even with !important. */

body:not(.light-theme):not([data-theme="light"]):not(#_) *,
body:not(.light-theme):not([data-theme="light"]):not(#_) *::before,
body:not(.light-theme):not([data-theme="light"]):not(#_) *::after {
  animation-duration: 0s !important;
  animation: none !important;
}

/* ---------- PHASE 1b: Force animation-dependent hidden elements VISIBLE ----------
   113 elements in index.css start at opacity:0 waiting for animations.
   Since we killed all animations, we must force them to their final state.
   Also overrides .text-fade-out which JS adds with opacity:0!important. */

body:not(.light-theme):not([data-theme="light"]):not(#_) .flip-fade-letter,
body:not(.light-theme):not([data-theme="light"]):not(#_) .flip-fade-letter.in,
body:not(.light-theme):not([data-theme="light"]):not(#_) .flip-fade-letter.out,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-text-slide.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) #hero-dynamic-h1,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-headline,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-tagline,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-desc,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-tech-badge,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-model-tech-badge-wrap,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-text-rotator-container,
body:not(.light-theme):not([data-theme="light"]):not(#_) #hero-dynamic-prefix,
body:not(.light-theme):not([data-theme="light"]):not(#_) #hero-dynamic-line1,
body:not(.light-theme):not([data-theme="light"]):not(#_) #hero-dynamic-highlight,
body:not(.light-theme):not([data-theme="light"]):not(#_) #hero-dynamic-desc,
body:not(.light-theme):not([data-theme="light"]):not(#_) .title-white-line,
body:not(.light-theme):not([data-theme="light"]):not(#_) .grad-cyan-neon,
body:not(.light-theme):not([data-theme="light"]):not(#_) .reveal.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-cta-btn,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-hud-chip,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-feature-glass-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .section-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) .section-subtitle,
body:not(.light-theme):not([data-theme="light"]):not(#_) .feature-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .model-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .spec-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hub-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .testimonial-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-marquee-item,
body:not(.light-theme):not([data-theme="light"]):not(#_) .about-hero-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) .about-hero-subtitle,
body:not(.light-theme):not([data-theme="light"]):not(#_) .shop-hero-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) .contact-hero-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) .contact-hero-subtitle {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Override .text-fade-out which JS adds with opacity:0!important during transitions */
body:not(.light-theme):not([data-theme="light"]):not(#_) .text-fade-out {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Whitelist: preserve only essential UI transition and marquee scrolling animations */
body:not(.light-theme):not([data-theme="light"]):not(#_) .nav-menu,
body:not(.light-theme):not([data-theme="light"]):not(#_) .nav-menu.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .mobile-nav-backdrop,
body:not(.light-theme):not([data-theme="light"]):not(#_) .mobile-nav-backdrop.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .scroll-top-btn,
body:not(.light-theme):not([data-theme="light"]):not(#_) .scroll-top-btn.visible,
body:not(.light-theme):not([data-theme="light"]):not(#_) .auth-modal,
body:not(.light-theme):not([data-theme="light"]):not(#_) .auth-modal.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item .faq-answer,
body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item.active .faq-answer,
body:not(.light-theme):not([data-theme="light"]):not(#_) .round-ai-fab-btn,
body:not(.light-theme):not([data-theme="light"]):not(#_) .ai-mini-popup-window,
body:not(.light-theme):not([data-theme="light"]):not(#_) .ai-mini-popup-window.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-text-slide,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-text-slide.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-scooter-img,
body:not(.light-theme):not([data-theme="light"]):not(#_) .config-image,
body:not(.light-theme):not([data-theme="light"]):not(#_) .config-image.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .ticker-item,
body:not(.light-theme):not([data-theme="light"]):not(#_) .ticker-item.active,
body:not(.light-theme):not([data-theme="light"]):not(#_) .reveal,
body:not(.light-theme):not([data-theme="light"]):not(#_) .reveal.active {
  animation: unset !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Explicitly redeclare marquee scrolling animations to override the blanket animation: none */
body:not(.light-theme):not([data-theme="light"]):not(#_) .features-marquee-track {
  animation: featureMarquee 32s linear infinite !important;
}
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-floating-track {
  animation: floatingRibbon 30s linear infinite !important;
}

@media (max-width: 768px) {
  body:not(.light-theme):not([data-theme="light"]):not(#_) .features-marquee-track {
    animation: featureMarqueeMobile 26s linear infinite !important;
  }
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-floating-track {
    animation: mobileCertMarquee 22s linear infinite !important;
  }
}

/* ---------- PHASE 2: Kill ALL backdrop-filter (ALL viewports) ---------- */
body:not(.light-theme):not([data-theme="light"]):not(#_) *,
body:not(.light-theme):not([data-theme="light"]):not(#_) *::before,
body:not(.light-theme):not([data-theme="light"]):not(#_) *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- PHASE 3: Strip heavy box-shadows (ALL viewports) ---------- */
body:not(.light-theme):not([data-theme="light"]):not(#_) .feature-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .surge-model-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .model-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .tech-feature-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .spec-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hub-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .testimonial-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cta-banner-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-feature-glass-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-3d-scooter-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-floating-stage,
body:not(.light-theme):not([data-theme="light"]):not(#_) .podium-showcase-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .specs-summary-bar,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-marquee-container,
body:not(.light-theme):not([data-theme="light"]):not(#_) .calc-cockpit-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item,
body:not(.light-theme):not([data-theme="light"]):not(#_) .showroom-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .about-pillar-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .blog-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .gallery-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .career-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .notice-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .product-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cart-item-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .checkout-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- PHASE 4: Kill text-shadow and decorative filter:blur ---------- */
body:not(.light-theme):not([data-theme="light"]):not(#_) h1,
body:not(.light-theme):not([data-theme="light"]):not(#_) h2,
body:not(.light-theme):not([data-theme="light"]):not(#_) h3,
body:not(.light-theme):not([data-theme="light"]):not(#_) h4,
body:not(.light-theme):not([data-theme="light"]):not(#_) h5,
body:not(.light-theme):not([data-theme="light"]):not(#_) h6,
body:not(.light-theme):not([data-theme="light"]):not(#_) .section-title,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-headline,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-tagline,
body:not(.light-theme):not([data-theme="light"]):not(#_) .spec-number,
body:not(.light-theme):not([data-theme="light"]):not(#_) .config-name-val,
body:not(.light-theme):not([data-theme="light"]):not(#_) .config-price-val,
body:not(.light-theme):not([data-theme="light"]):not(#_) .nav-link,
body:not(.light-theme):not([data-theme="light"]):not(#_) .logo-brand-name {
  text-shadow: none !important;
}

body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-shadow-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .config-shadow-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-bg-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-ambient-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-ambient-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .test-ambient-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .card-stage-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .podium-stage-glow,
body:not(.light-theme):not([data-theme="light"]):not(#_) .auth-stage-radial-glow {
  filter: none !important;
  opacity: 0.4 !important;
}

/* ---------- PHASE 5: Header laser bar ::before — kill it ---------- */
body:not(.light-theme):not([data-theme="light"]):not(#_) .header::before {
  display: none !important;
}

/* ---------- PHASE 6: Content-visibility & containment ---------- */
main > section,
.site-wrapper > section {
  content-visibility: auto !important;
  contain-intrinsic-size: 1px 600px !important;
}

section {
  contain: layout style paint !important;
}

/* ---------- PHASE 7: Shorten transition durations ---------- */
body:not(.light-theme):not([data-theme="light"]):not(#_) .feature-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .model-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .spec-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .hub-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .testimonial-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .blog-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .product-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .gallery-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .showroom-card,
body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item {
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* ---------- PHASE 8: Mobile-specific extra optimizations ---------- */
@media (max-width: 768px) {

  /* Hide canvas particle overlays — pure GPU waste on mobile */
  #hero-particle-canvas,
  #hero-network-canvas,
  #global-particles-canvas,
  #hero-particles-canvas,
  #auth-particles-canvas {
    display: none !important;
  }

  /* Kill 3D transforms on cards — they create GPU compositing layers */
  body:not(.light-theme):not([data-theme="light"]):not(#_) .model-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .tech-feature-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .calc-cockpit-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .hub-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .testimonial-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .cta-banner-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-feature-glass-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .feature-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .spec-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .hero-3d-scooter-card {
    transform: none !important;
    perspective: none !important;
  }

  html {
    will-change: scroll-position;
  }

  body {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mobile-friendly TFT Speedometer & dashboard optimizations */
  .smart-dash-grid {
    margin-top: 1.5rem !important;
    gap: 1.5rem !important;
  }

  .dash-viewport-card {
    border-radius: 20px !important;
    padding: 0.8rem 0.6rem 0.6rem 0.6rem !important;
    border-width: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dash-viewport-card::after {
    border-radius: 16px !important;
  }

  .tft-main-display {
    padding: 0 0.2rem !important;
    gap: 0.4rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .tft-speed-num {
    font-size: 1.8rem !important;
  }

  .tft-speed-unit {
    font-size: 0.7rem !important;
  }

  .tft-gear-box {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
  }

  .tft-nav-block,
  .tft-alert-block,
  .tft-cricket-block,
  .tft-call-block,
  .tft-location-block,
  .tft-chat-block {
    padding: 0.4rem 0.5rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tft-nav-instruction {
    font-size: 0.85rem !important;
  }

  .tft-nav-street {
    font-size: 0.7rem !important;
  }

  .tft-indicator-lights {
    gap: 0.8rem !important;
    margin-bottom: 0.8rem !important;
    padding: 0.35rem 1.1rem !important;
    max-width: 210px !important;
  }

  .tft-indicator-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .dash-stage-badge {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.65rem !important;
    margin-bottom: 1rem !important;
  }

  .dash-viewport-img {
    max-height: 260px !important;
  }

  .dash-caption-bar {
    padding: 0.5rem 0.9rem !important;
    border-radius: 10px !important;
  }

  .dash-caption-text {
    font-size: 0.78rem !important;
  }

  .dash-tiles-grid {
    gap: 0.8rem !important;
  }

  .dash-tile-card {
    padding: 1.1rem 1rem !important;
    border-radius: 16px !important;
    touch-action: manipulation !important;
  }

  .dash-tile-title {
    font-family: 'Inter', 'Outfit', -apple-system, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
  }

  .dash-tile-sub {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  .tft-footnote-container {
    margin-top: 1.5rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 10px !important;
    gap: 0.4rem !important;
  }

  .tft-footnote-container span {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .dash-tiles-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .dash-tile-card {
    padding: 1.15rem 1.1rem !important;
    border-radius: 16px !important;
  }
  .dash-tile-title {
    font-size: 1rem !important;
  }
  .dash-tile-sub {
    font-size: 0.82rem !important;
  }
}

/* ==========================================================================
   INTERACTIVE DESIGN STUDIO MOBILE PERFECTION (≤ 768px & ≤ 480px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Customizer Section Header & Spacing */
  .customizer-section,
  #customizer {
    padding: 2.5rem 0.8rem 7.5rem 0.8rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .luxury-section-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    margin: 0 auto 0.6rem auto !important;
  }

  .luxury-section-subtitle {
    font-size: 0.88rem !important;
    margin: 0 auto 1.8rem auto !important;
    padding: 0 0.5rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 480px !important;
  }

  .luxury-eyebrow-badge {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.9rem !important;
    letter-spacing: 0.18em !important;
    margin: 0 auto 0.8rem auto !important;
    display: inline-flex !important;
  }

  /* 2. Container Deck */
  .luxury-configurator-container,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-configurator-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1rem 0.6rem 1.4rem 0.6rem !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(8, 14, 24, 0.7) 0%, rgba(4, 8, 16, 0.85) 100%) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 3. 3D Visual Stage */
  .luxury-visual-stage,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-visual-stage {
    min-height: 270px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.4rem 0.4rem 2rem 0.4rem !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    background: radial-gradient(ellipse at 50% 55%, rgba(0, 240, 255, 0.12) 0%, rgba(0, 255, 136, 0.05) 40%, rgba(4, 8, 16, 0.95) 75%) !important;
  }

  .luxury-studio-spotlight,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-studio-spotlight {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
  }

  /* 4. HUD Badges (Pill status tags) */
  .luxury-hud-badge,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-hud-badge {
    position: absolute !important;
    top: 0.6rem !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.28rem 0.55rem !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    max-width: 46% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .luxury-hud-badge.top-left,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-hud-badge.top-left {
    left: 0.4rem !important;
    right: auto !important;
  }

  .luxury-hud-badge.top-right,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-hud-badge.top-right {
    right: 0.4rem !important;
    left: auto !important;
  }

  .luxury-hud-badge svg {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
  }

  /* 5. Scooter Image Viewport & Mask */
  .luxury-image-viewport,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-image-viewport {
    width: 100% !important;
    max-width: 290px !important;
    height: 190px !important;
    margin: 0.3rem auto 0.8rem auto !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .luxury-scooter-image,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-scooter-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    position: absolute !important;
    mix-blend-mode: normal !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 20px rgba(0, 255, 136, 0.2)) !important;
  }

  .luxury-scooter-image.active,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-scooter-image.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .luxury-podium-ring,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-podium-ring {
    position: absolute !important;
    bottom: 5px !important;
    width: 85% !important;
    height: 45px !important;
    border: 1px dashed rgba(0, 255, 136, 0.25) !important;
    transform: rotateX(75deg) !important;
    border-radius: 50% !important;
  }

  /* 6. Perspective Hint */
  .luxury-interactive-hint,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-interactive-hint {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.62rem !important;
    color: #94a3b8 !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 0 0.4rem !important;
    box-sizing: border-box !important;
    margin-top: 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* 7. Cockpit & Variant Selection */
  .luxury-configurator-cockpit,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-configurator-cockpit {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .luxury-variant-selector-wrapper,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-variant-selector-wrapper {
    width: 100% !important;
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .luxury-meta-eyebrow {
    font-size: 0.68rem !important;
    margin-bottom: 0.6rem !important;
    display: block !important;
  }

  .luxury-variant-grid,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-variant-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.45rem !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .luxury-variant-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-variant-card {
    flex: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.8rem 0.3rem !important;
    border-radius: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: rgba(10, 16, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .luxury-variant-card.active,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-variant-card.active {
    border-color: #00ff88 !important;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 240, 255, 0.08)) !important;
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.25) !important;
  }

  .luxury-variant-card .variant-name {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .luxury-variant-card .variant-price {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    color: #00ff88 !important;
    display: block !important;
    margin: 2px 0 !important;
  }

  .luxury-variant-card .variant-meta {
    font-size: 0.56rem !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .luxury-active-header {
    margin-bottom: 1rem !important;
  }

  .luxury-active-eyebrow {
    font-size: 0.65rem !important;
  }

  .luxury-active-title {
    font-size: 1.35rem !important;
  }

  /* 8. Specs Grid */
  .luxury-specs-grid,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-specs-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-bottom: 1.2rem !important;
  }

  .luxury-spec-card {
    padding: 0.85rem 1rem !important;
    border-radius: 14px !important;
  }

  .luxury-spec-card.full-width {
    grid-column: span 1 !important;
  }

  /* 9. Purchase Zone & Reservation Cockpit Mobile Layout */
  .luxury-purchase-zone,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-purchase-zone {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1.2rem !important;
    box-shadow: none !important;
    margin-top: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .luxury-reservation-card,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-reservation-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.25rem 1.15rem !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    border-radius: 20px !important;
    flex: none !important;
  }

  .res-card-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .res-live-beacon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .res-live-title {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  .res-instant-chip {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.65rem !important;
    white-space: nowrap !important;
  }

  .res-status-display {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .res-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .res-status-text {
    font-size: 1.35rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }

  .res-tagline {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
  }

  .res-perks-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    width: 100% !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .res-perk-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.74rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  .luxury-action-row,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-action-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
    flex: none !important;
    margin-top: 0 !important;
  }

  .luxury-btn-primary,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-btn-primary {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.95rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    min-height: 48px !important;
    white-space: nowrap !important;
    flex: none !important;
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.35) !important;
  }

  .luxury-btn-secondary,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-btn-secondary,
  body:not(.light-theme):not([data-theme="light"]):not(#_) a.luxury-btn-secondary {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.9rem 1.2rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    white-space: nowrap !important;
    flex: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 400px) {
  .luxury-section-title {
    font-size: 1.25rem !important;
  }

  .luxury-visual-stage,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-visual-stage {
    min-height: 240px !important;
    padding: 2.2rem 0.2rem 1.6rem 0.2rem !important;
  }

  .luxury-image-viewport,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-image-viewport {
    max-width: 240px !important;
    height: 160px !important;
  }

  .luxury-hud-badge,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .luxury-hud-badge {
    font-size: 0.56rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  .luxury-variant-card {
    padding: 0.65rem 0.15rem !important;
  }

  .luxury-variant-card .variant-name {
    font-size: 0.68rem !important;
  }

  .luxury-variant-card .variant-price {
    font-size: 0.64rem !important;
  }

  .luxury-variant-card .variant-meta {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE-PERFECT FAQ ACCORDION ENGINE (SCOPED STRICTLY TO MOBILE/TABLET <= 991px)
   ========================================================================== */
@media (max-width: 991px) {
  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-section,
  .faq-section {
    padding: 3.5rem 1.15rem 4.5rem 1.15rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-section .section-title,
  .faq-section .section-title {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.6rem !important;
    padding: 0 0.5rem !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-section .section-subtitle,
  .faq-section .section-subtitle {
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    padding: 0 0.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Category Filter Tabs on Mobile */
  body:not(.light-theme):not([data-theme="light"]):not(#_) .sp-faq-tabs,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-tabs,
  .sp-faq-tabs,
  .faq-tabs {
    display: flex !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px 8px 2px !important;
    margin-bottom: 1.25rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .sp-tab-btn,
  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-tab-btn,
  .sp-tab-btn,
  .faq-tab-btn {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 20px !important;
  }

  /* Order layout: Questions FIRST, Support Card SECOND on mobile */
  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-hub-layout,
  .faq-hub-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-accordion-list,
  .faq-accordion-list {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Card Container */
  body:not(.light-theme):not([data-theme="light"]) .faq-card-item {
    background: rgba(10, 18, 24, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item:hover {
    border-color: rgba(0, 255, 136, 0.35) !important;
    box-shadow: 0 6px 22px rgba(0, 255, 136, 0.1) !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item.active {
    border: 1.5px solid rgba(0, 255, 136, 0.55) !important;
    background: linear-gradient(145deg, rgba(8, 28, 20, 0.96) 0%, rgba(5, 16, 22, 0.98) 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 255, 136, 0.18) !important;
  }

  /* Question Header Button */
  body:not(.light-theme):not([data-theme="light"]) .faq-question-btn {
    width: 100% !important;
    padding: 0.95rem 1.05rem !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    cursor: pointer !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Title & Icon Wrapper */
  body:not(.light-theme):not([data-theme="light"]) .faq-question-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Left Icon Container - Compact & Clean on Mobile */
  body:not(.light-theme):not([data-theme="light"]) .faq-question-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 9px !important;
    background: rgba(0, 255, 136, 0.08) !important;
    border: 1px solid rgba(0, 255, 136, 0.25) !important;
    color: #00ff88 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    transition: all 0.3s ease !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-question-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item.active .faq-question-icon {
    background: linear-gradient(135deg, #00ff88 0%, #00d26a 100%) !important;
    color: #060b14 !important;
    border-color: transparent !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.45) !important;
  }

  /* Question Text Typography */
  body:not(.light-theme):not([data-theme="light"]) .faq-question-text {
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(0.9rem, 3.8vw, 0.98rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    transition: color 0.25s ease !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item.active .faq-question-text {
    color: #00ff88 !important;
  }

  /* Right Chevron Indicator */
  body:not(.light-theme):not([data-theme="light"]) .faq-chevron {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-chevron svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.5 !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item.active .faq-chevron {
    transform: rotate(180deg) !important;
    background: #00ff88 !important;
    border-color: #00ff88 !important;
    color: #040810 !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.45) !important;
  }

  /* Answer Body Accordion */
  body:not(.light-theme):not([data-theme="light"]) .faq-answer-body {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 1.05rem !important;
    margin: 0 !important;
    border-top: none !important;
    color: #cbd5e1 !important;
    font-size: 0.86rem !important;
    line-height: 1.65 !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, padding 0.35s ease, margin 0.35s ease !important;
  }

  body:not(.light-theme):not([data-theme="light"]) .faq-card-item.active .faq-answer-body {
    max-height: 500px !important;
    opacity: 1 !important;
    padding: 0.8rem 1.05rem 1.15rem 1.05rem !important;
    margin-top: 0.1rem !important;
    border-top: 1px solid rgba(0, 255, 136, 0.15) !important;
  }

  /* Bottom Support Card on Mobile */
  body:not(.light-theme):not([data-theme="light"]) .faq-support-card {
    order: 2 !important;
    position: static !important;
    margin-top: 1.25rem !important;
    padding: 1.6rem 1.25rem !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(10, 22, 32, 0.95) 0%, rgba(6, 14, 20, 0.98) 100%) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.08) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-badge,
  .faq-support-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: rgba(0, 240, 255, 0.1) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
    border-radius: 20px !important;
    margin-bottom: 0.75rem !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-title,
  .faq-support-title {
    font-size: 1.25rem !important;
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 0.4rem !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-sub,
  .faq-support-sub {
    font-size: 0.84rem !important;
    color: #94a3b8 !important;
    line-height: 1.55 !important;
    margin: 0 auto 1.25rem auto !important;
    max-width: 440px !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-contact-btn-group,
  .faq-contact-btn-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  @media (max-width: 420px) {
    body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-contact-btn-group,
    .faq-contact-btn-group {
      grid-template-columns: 1fr !important;
    }
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-phone-btn,
  .faq-phone-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00e5ff 100%) !important;
    color: #040810 !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    padding: 0.8rem 1.1rem !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.3) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-phone-btn svg,
  .faq-phone-btn svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
  }

  body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-insta-btn,
  .faq-insta-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 0.75rem 0.9rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  /* Light Theme Support */
  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item,
  body.light-theme .faq-card-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item.active,
  body.light-theme .faq-card-item.active {
    background: #f8fafc !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.14) !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-question-text,
  body.light-theme .faq-question-text {
    color: #0f172a !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item.active .faq-question-text,
  body.light-theme .faq-card-item.active .faq-question-text {
    color: #059669 !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-question-icon,
  body.light-theme .faq-question-icon {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-chevron,
  body.light-theme .faq-chevron {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item.active .faq-chevron,
  body.light-theme .faq-card-item.active .faq-chevron {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-answer-body,
  body.light-theme .faq-answer-body {
    color: #334155 !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-card-item.active .faq-answer-body,
  body.light-theme .faq-card-item.active .faq-answer-body {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-card,
  body.light-theme .faq-support-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-title,
  body.light-theme .faq-support-title {
    color: #0f172a !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-support-sub,
  body.light-theme .faq-support-sub {
    color: #64748b !important;
  }

  [data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .faq-insta-btn,
  body.light-theme .faq-insta-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }
}

/* ==========================================================================
   ⚡ FEATURE MARQUEE TAP-TO-EXPAND & PAUSE STYLES
   ========================================================================== */

/* Force pause marquee track when class is-paused is applied */
body:not(.light-theme):not([data-theme="light"]):not(#_) .features-marquee-track.is-paused,
.features-marquee-track.is-paused,
.features-marquee-track.is-paused *,
body:not(.light-theme):not([data-theme="light"]):not(#_) .features-marquee-track.is-touch-dragging,
.features-marquee-track.is-touch-dragging {
  animation-play-state: paused !important;
  animation: none !important;
}

/* Modal / Lightbox for Expanded Feature Card */
.feature-card-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483640 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

.feature-card-modal-overlay.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.feature-modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(2, 8, 6, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.feature-modal-dialog {
  position: relative !important;
  z-index: 10 !important;
  width: 92vw !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  background: linear-gradient(165deg, rgba(8, 26, 20, 0.98) 0%, rgba(3, 12, 10, 0.99) 100%) !important;
  border: 1.5px solid rgba(0, 255, 136, 0.45) !important;
  border-radius: 28px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 255, 136, 0.3) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  animation: modalPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.feature-modal-close-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 20 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1.5px solid rgba(0, 255, 136, 0.4) !important;
  color: #00ff88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important;
  transition: all 0.2s ease !important;
}

.feature-modal-close-btn:hover {
  background: rgba(0, 255, 136, 0.25) !important;
  transform: scale(1.1) rotate(90deg) !important;
  color: #ffffff !important;
}

.feature-modal-body {
  padding: 1.5rem 1.4rem 1rem 1.4rem !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

.feature-expanded-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.feature-expanded-card .feature-card-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 2.5rem !important;
}

.feature-expanded-card .feature-card-visual {
  width: 100% !important;
  height: 190px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid rgba(0, 255, 136, 0.25) !important;
}

.feature-expanded-card .feature-visual-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.feature-expanded-card .feature-icon-overlay-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1.5px solid #00ff88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.4) !important;
}

.feature-expanded-title {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 0.5rem 0 !important;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important;
}

.feature-expanded-desc {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

.feature-expanded-card .feature-card-footer {
  margin-top: 0.5rem !important;
}

.feature-modal-footer {
  padding: 0.8rem 1.4rem 1.4rem 1.4rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.feature-modal-resume-btn {
  width: 100% !important;
  padding: 0.95rem 1.25rem !important;
  background: linear-gradient(135deg, #00ff88 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #022016 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4) !important;
  transition: all 0.25s ease !important;
}

.feature-modal-resume-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 12px 35px rgba(0, 255, 136, 0.65) !important;
}

/* ==========================================================================
   ⚡ CERTIFICATION MARQUEE TAP-TO-EXPAND & PAUSE STYLES
   ========================================================================== */
body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-floating-track.is-paused,
.cert-floating-track.is-paused,
.cert-floating-track.is-paused * {
  animation-play-state: paused !important;
}

.cert-expanded-modal-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.1rem !important;
  align-items: center !important;
  text-align: center !important;
}

.cert-expanded-modal-card .feature-card-top-bar {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 2.2rem !important;
}

.cert-modal-emblem-visual {
  position: relative !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, rgba(0, 255, 136, 0.05) 70%, transparent 100%) !important;
  border: 2px solid rgba(0, 255, 136, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.5rem auto !important;
  box-shadow: 0 0 35px rgba(0, 255, 136, 0.35), inset 0 0 20px rgba(0, 240, 255, 0.2) !important;
}

.cert-modal-emblem-img {
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.6)) !important;
}

.cert-emblem-glow-ring {
  position: absolute !important;
  top: -6px !important;
  left: -6px !important;
  right: -6px !important;
  bottom: -6px !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(0, 240, 255, 0.4) !important;
  animation: certRingRotate 15s linear infinite !important;
}

@keyframes certRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   ⚡ ULTRA-LUXURY FOOTER PRO LIGHT MODE (MOBILE & DESKTOP MASTER OVERRIDES)
   ========================================================================== */
html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro,
body.light-theme .footer-pro,
body.light-mode .footer-pro,
[data-theme="light"] .footer-pro {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%) !important;
  background-color: #f1f5f9 !important;
  border-top: 2px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-top,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-top,
body.light-theme .footer-pro-top,
[data-theme="light"] .footer-pro-top {
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-top .logo-lightning-mobile-img,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-top .logo-lightning-mobile-img,
body.light-theme .footer-pro-top .logo-lightning-mobile-img,
[data-theme="light"] .footer-pro-top .logo-lightning-mobile-img {
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .cert-pill,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .cert-pill,
body.light-theme .cert-pill,
body.light-mode .cert-pill,
[data-theme="light"] .cert-pill {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .cert-pill:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .cert-pill:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .cert-pill:hover,
body.light-theme .cert-pill:hover,
[data-theme="light"] .cert-pill:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border-color: #008746 !important;
  color: #008746 !important;
  box-shadow: 0 8px 24px rgba(0, 168, 89, 0.22) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-col-title,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-col-title,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro-col-title,
body.light-theme .footer-pro-col-title,
[data-theme="light"] .footer-pro-col-title {
  color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-col-title::after,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-col-title::after,
body.light-theme .footer-pro-col-title::after,
[data-theme="light"] .footer-pro-col-title::after {
  background: #008746 !important;
  box-shadow: 0 0 8px rgba(0, 135, 70, 0.5) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-col-title svg,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-col-title svg,
body.light-theme .footer-pro-col-title svg,
[data-theme="light"] .footer-pro-col-title svg {
  stroke: #008746 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-desc,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-desc,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro-desc,
body.light-theme .footer-pro-desc,
[data-theme="light"] .footer-pro-desc {
  color: #1e293b !important;
  font-weight: 600 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-contact-row,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-contact-row,
body.light-theme .footer-contact-row,
[data-theme="light"] .footer-contact-row {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row strong,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-contact-row strong,
body.light-theme .footer-contact-row strong,
[data-theme="light"] .footer-contact-row strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row svg,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-contact-row svg,
body.light-theme .footer-contact-row svg,
[data-theme="light"] .footer-contact-row svg {
  stroke: #008746 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-contact-row a,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-contact-row a,
body.light-theme .footer-contact-row a,
[data-theme="light"] .footer-contact-row a {
  color: #008746 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-link,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-link,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro-link,
body.light-theme .footer-pro-link,
[data-theme="light"] .footer-pro-link {
  color: #1e293b !important;
  font-weight: 600 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-link:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-link:hover,
body.light-theme .footer-pro-link:hover,
[data-theme="light"] .footer-pro-link:hover {
  color: #008746 !important;
  transform: translateX(4px) !important;
  text-shadow: none !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .social-icon-btn,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .social-icon-btn,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .social-icon-btn,
body.light-theme .social-icon-btn,
[data-theme="light"] .social-icon-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  color: #0f172a !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .social-icon-btn:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .social-icon-btn:hover,
body.light-theme .social-icon-btn:hover,
[data-theme="light"] .social-icon-btn:hover {
  background: #008746 !important;
  border-color: #008746 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 135, 70, 0.35) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-bottom,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-bottom,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro-bottom,
body.light-theme .footer-pro-bottom,
[data-theme="light"] .footer-pro-bottom {
  border-top: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
  font-weight: 600 !important;
  padding-bottom: 2rem !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-legal-links a,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-legal-links a,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-mode .footer-pro-legal-links a,
body.light-theme .footer-pro-legal-links a,
[data-theme="light"] .footer-pro-legal-links a {
  color: #334155 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] body:not(.light-theme):not([data-theme="light"]):not(#_) .footer-pro-legal-links a:hover,
body:not(.light-theme):not([data-theme="light"]):not(#_).light-theme .footer-pro-legal-links a:hover,
body.light-theme .footer-pro-legal-links a:hover,
[data-theme="light"] .footer-pro-legal-links a:hover {
  color: #008746 !important;
}

/* ── MOBILE VIEW MODEL BUTTON CENTERING ─────────────────────── */
@media (max-width: 768px) {
  .surge-gallery-grid .ather-card-footer,
  .surge-gallery-section .ather-card-footer,
  .ather-ev-card .ather-card-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .surge-gallery-grid .btn-ather-primary,
  .surge-gallery-section .btn-ather-primary,
  .ather-ev-card .ather-card-footer > .btn-ather-primary,
  .ather-ev-card .btn-ather-primary {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}






















/* ─────────────────────────────────────────────────────────────
   ⚡ HAMBURGER MENU & ASTAR LOGO LIGHT MODE OPTIMIZATIONS
   ───────────────────────────────────────────────────────────── */

/* 1. Header Logo & Branding in Light Mode */
[data-theme="light"] .header .logo-brand-name,
html.light-theme .header .logo-brand-name,
body.light-theme .header .logo-brand-name,
body.light-mode .header .logo-brand-name {
  color: #0f172a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

[data-theme="light"] .header .logo-brand-sub,
html.light-theme .header .logo-brand-sub,
body.light-theme .header .logo-brand-sub,
body.light-mode .header .logo-brand-sub {
  color: #008746 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .header .logo-lightning-mobile-img,
html.light-theme .header .logo-lightning-mobile-img,
body.light-theme .header .logo-lightning-mobile-img,
body.light-mode .header .logo-lightning-mobile-img {
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

[data-theme="light"] .header .logo-cyber-circle,
html.light-theme .header .logo-cyber-circle,
body.light-theme .header .logo-cyber-circle,
body.light-mode .header .logo-cyber-circle {
  border-color: rgba(0, 168, 89, 0.35) !important;
  background: rgba(0, 200, 83, 0.06) !important;
  box-shadow: 0 2px 10px rgba(0, 200, 83, 0.15) !important;
}

/* 2. Hamburger Toggle Button in Light Mode */
[data-theme="light"] .header .mobile-toggle-btn,
html.light-theme .header .mobile-toggle-btn,
body.light-theme .header .mobile-toggle-btn,
body.light-mode .header .mobile-toggle-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 168, 89, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .header .mobile-toggle-btn .bar,
html.light-theme .header .mobile-toggle-btn .bar,
body.light-theme .header .mobile-toggle-btn .bar,
body.light-mode .header .mobile-toggle-btn .bar {
  background: #0f172a !important;
  box-shadow: none !important;
}

[data-theme="light"] .header .mobile-toggle-btn.active .bar,
html.light-theme .header .mobile-toggle-btn.active .bar,
body.light-theme .header .mobile-toggle-btn.active .bar,
body.light-mode .header .mobile-toggle-btn.active .bar {
  background: #00c853 !important;
  box-shadow: 0 0 10px rgba(0, 200, 83, 0.5) !important;
}

/* 3. Mobile Hamburger Navigation Menu Drawer in Light Mode */
[data-theme="light"] .nav,
[data-theme="light"] #nav-menu,
html.light-theme .nav,
html.light-theme #nav-menu,
body.light-theme .nav,
body.light-theme #nav-menu,
body.light-mode .nav,
body.light-mode #nav-menu {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Unscrolled Header Nav Links in Light Mode: WHITE text */
[data-theme="light"] .header:not(.scrolled) .nav .nav-link,
[data-theme="light"] .header:not(.scrolled) #nav-menu .nav-link,
html.light-theme .header:not(.scrolled) .nav .nav-link,
html.light-theme .header:not(.scrolled) #nav-menu .nav-link,
body.light-theme .header:not(.scrolled) .nav .nav-link,
body.light-theme .header:not(.scrolled) #nav-menu .nav-link,
body.light-mode .header:not(.scrolled) .nav .nav-link,
body.light-mode .header:not(.scrolled) #nav-menu .nav-link {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Scrolled Header Nav Links in Light Mode: BLACK text */
[data-theme="light"] .header.scrolled .nav .nav-link,
[data-theme="light"] .header.scrolled #nav-menu .nav-link,
html.light-theme .header.scrolled .nav .nav-link,
html.light-theme .header.scrolled #nav-menu .nav-link,
body.light-theme .header.scrolled .nav .nav-link,
body.light-theme .header.scrolled #nav-menu .nav-link,
body.light-mode .header.scrolled .nav .nav-link,
body.light-mode .header.scrolled #nav-menu .nav-link {
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .nav .nav-link:hover,
[data-theme="light"] .nav .nav-link.active,
[data-theme="light"] #nav-menu .nav-link:hover,
[data-theme="light"] #nav-menu .nav-link.active,
html.light-theme .nav .nav-link.active,
html.light-theme #nav-menu .nav-link.active,
body.light-theme .nav .nav-link.active,
body.light-theme #nav-menu .nav-link.active,
body.light-mode .nav .nav-link.active,
body.light-mode #nav-menu .nav-link.active {
  background: transparent !important;
  border: none !important;
  color: #00ff88 !important;
  box-shadow: none !important;
}

/* 4. Side-Drawer Mobile Menu Panel & Header ASTAR Logo in Light Mode */
[data-theme="light"] .mobile-menu-drawer .drawer-panel,
html.light-theme .mobile-menu-drawer .drawer-panel,
body.light-theme .mobile-menu-drawer .drawer-panel,
body.light-mode .mobile-menu-drawer .drawer-panel {
  background: #ffffff !important;
  border-left: 1.5px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .drawer-header,
html.light-theme .drawer-header,
body.light-theme .drawer-header,
body.light-mode .drawer-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1.5px solid rgba(0, 200, 83, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .drawer-logo-img,
html.light-theme .drawer-logo-img,
body.light-theme .drawer-logo-img,
body.light-mode .drawer-logo-img {
  filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
  transition: all 0.3s ease !important;
}

[data-theme="light"] .drawer-logo:hover .drawer-logo-img,
html.light-theme .drawer-logo:hover .drawer-logo-img,
body.light-theme .drawer-logo:hover .drawer-logo-img,
body.light-mode .drawer-logo:hover .drawer-logo-img {
  filter: brightness(0.18) contrast(170%) drop-shadow(0 2px 10px rgba(0, 200, 83, 0.45)) !important;
  transform: scale(1.03) !important;
}

[data-theme="light"] .drawer-close-btn,
html.light-theme .drawer-close-btn,
body.light-theme .drawer-close-btn,
body.light-mode .drawer-close-btn {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1.5px solid rgba(0, 168, 89, 0.3) !important;
  color: #008746 !important;
  box-shadow: 0 2px 8px rgba(0, 168, 89, 0.12) !important;
}

/* Responsive Podium Specs HUD & Visual Stage Overrides */
@media (max-width: 768px) {
  .podium-specs-hud {
    padding: 0.95rem 0.4rem !important;
    gap: 0.35rem !important;
  }
  .spec-num {
    font-size: 1.05rem !important;
    gap: 0.2rem !important;
  }
  .spec-num small {
    font-size: 0.65rem !important;
  }
  .spec-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.05em !important;
  }
  .luxury-scooter-image {
    width: 100% !important;
    height: 100% !important;
  }
}

[data-theme="light"] .drawer-close-btn:hover,
html.light-theme .drawer-close-btn:hover,
body.light-theme .drawer-close-btn:hover,
body.light-mode .drawer-close-btn:hover {
  background: #00c853 !important;
  color: #ffffff !important;
  border-color: #00c853 !important;
  box-shadow: 0 0 15px rgba(0, 200, 83, 0.4) !important;
}

/* --- Global Links Dropdown Menu Light Mode Styles --- */
[data-theme="light"] .nav-dropdown-menu,
html.light-theme .nav-dropdown-menu,
body.light-theme .nav-dropdown-menu,
body.light-mode .nav-dropdown-menu,
[data-theme="light"] .account-header-dropdown,
html.light-theme .account-header-dropdown,
body.light-theme .account-header-dropdown,
body.light-mode .account-header-dropdown,
[data-theme="light"] .updates-dropdown-panel,
html.light-theme .updates-dropdown-panel,
body.light-theme .updates-dropdown-panel,
body.light-mode .updates-dropdown-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14), 0 5px 15px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

[data-theme="light"] .nav-dropdown-menu a,
html.light-theme .nav-dropdown-menu a,
body.light-theme .nav-dropdown-menu a,
body.light-mode .nav-dropdown-menu a,
[data-theme="light"] .acc-dropdown-item,
html.light-theme .acc-dropdown-item,
body.light-theme .acc-dropdown-item,
body.light-mode .acc-dropdown-item {
  color: #1e293b !important;
  font-weight: 700 !important;
  border-left: 3px solid transparent !important;
}

[data-theme="light"] .nav-dropdown-menu a:hover,
html.light-theme .nav-dropdown-menu a:hover,
body.light-theme .nav-dropdown-menu a:hover,
body.light-mode .nav-dropdown-menu a:hover,
[data-theme="light"] .acc-dropdown-item:hover,
html.light-theme .acc-dropdown-item:hover,
body.light-theme .acc-dropdown-item:hover,
body.light-mode .acc-dropdown-item:hover {
  background: rgba(0, 168, 84, 0.08) !important;
  color: #00a854 !important;
  border-left-color: #00a854 !important;
}

[data-theme="light"] .nav-dropdown-menu a.active,
html.light-theme .nav-dropdown-menu a.active,
body.light-theme .nav-dropdown-menu a.active,
body.light-mode .nav-dropdown-menu a.active {
  color: #00a854 !important;
  border-left-color: #00a854 !important;
  background: rgba(0, 168, 84, 0.06) !important;
}

/* ==========================================================================
   ⚡ ULTRA-PREMIUM LIGHT MODE ACCREDITATION & FEATURE CARD LIGHTBOX MODAL
   ========================================================================== */
.cert-modal-sub-tag {
  color: #00ff88;
}

[data-theme="light"] .cert-modal-sub-tag,
html.light-theme .cert-modal-sub-tag,
body.light-theme .cert-modal-sub-tag,
body.light-mode .cert-modal-sub-tag {
  color: #008746 !important;
}

[data-theme="light"] .feature-modal-backdrop,
html.light-theme .feature-modal-backdrop,
body.light-theme .feature-modal-backdrop,
body.light-mode .feature-modal-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

[data-theme="light"] .feature-modal-dialog,
html.light-theme .feature-modal-dialog,
body.light-theme .feature-modal-dialog,
body.light-mode .feature-modal-dialog {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.18), 0 0 35px rgba(0, 200, 83, 0.15) !important;
}

[data-theme="light"] .feature-modal-close-btn,
html.light-theme .feature-modal-close-btn,
body.light-theme .feature-modal-close-btn,
body.light-mode .feature-modal-close-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  color: #008746 !important;
  box-shadow: 0 2px 8px rgba(0, 168, 89, 0.15) !important;
}

[data-theme="light"] .feature-modal-close-btn:hover,
html.light-theme .feature-modal-close-btn:hover,
body.light-theme .feature-modal-close-btn:hover,
body.light-mode .feature-modal-close-btn:hover {
  background: #00c853 !important;
  color: #ffffff !important;
  border-color: #00c853 !important;
  box-shadow: 0 0 15px rgba(0, 200, 83, 0.4) !important;
}

[data-theme="light"] .feature-expanded-title,
html.light-theme .feature-expanded-title,
body.light-theme .feature-expanded-title,
body.light-mode .feature-expanded-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .feature-expanded-desc,
html.light-theme .feature-expanded-desc,
body.light-theme .feature-expanded-desc,
body.light-mode .feature-expanded-desc {
  color: #334155 !important;
}

[data-theme="light"] .feature-hud-code,
html.light-theme .feature-hud-code,
body.light-theme .feature-hud-code,
body.light-mode .feature-hud-code {
  color: #475569 !important;
}

[data-theme="light"] .feature-badge-pill,
html.light-theme .feature-badge-pill,
body.light-theme .feature-badge-pill,
body.light-mode .feature-badge-pill {
  background: rgba(0, 168, 89, 0.1) !important;
  border-color: rgba(0, 168, 89, 0.35) !important;
  color: #008746 !important;
}

[data-theme="light"] .cert-modal-emblem-visual,
html.light-theme .cert-modal-emblem-visual,
body.light-theme .cert-modal-emblem-visual,
body.light-mode .cert-modal-emblem-visual {
  background: radial-gradient(circle, rgba(0, 200, 83, 0.12) 0%, rgba(0, 135, 70, 0.04) 70%, transparent 100%) !important;
  border: 2px solid rgba(0, 168, 89, 0.35) !important;
  box-shadow: 0 0 25px rgba(0, 200, 83, 0.2) !important;
}

[data-theme="light"] .cert-modal-emblem-img,
html.light-theme .cert-modal-emblem-img,
body.light-theme .cert-modal-emblem-img,
body.light-mode .cert-modal-emblem-img {
  filter: drop-shadow(0 2px 8px rgba(0, 168, 89, 0.25)) !important;
}

[data-theme="light"] .cert-emblem-glow-ring,
html.light-theme .cert-emblem-glow-ring,
body.light-theme .cert-emblem-glow-ring,
body.light-mode .cert-emblem-glow-ring {
  border-color: rgba(0, 168, 89, 0.35) !important;
}

[data-theme="light"] .feature-status-tag,
html.light-theme .feature-status-tag,
body.light-theme .feature-status-tag,
body.light-mode .feature-status-tag {
  background: rgba(0, 168, 89, 0.08) !important;
  border: 1.5px solid rgba(0, 168, 89, 0.35) !important;
  color: #008746 !important;
}

[data-theme="light"] .feature-modal-footer,
html.light-theme .feature-modal-footer,
body.light-theme .feature-modal-footer,
body.light-mode .feature-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .feature-modal-resume-btn,
html.light-theme .feature-modal-resume-btn,
body.light-theme .feature-modal-resume-btn,
body.light-mode .feature-modal-resume-btn {
  background: linear-gradient(135deg, #00c853 0%, #008746 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 200, 83, 0.35) !important;
}

[data-theme="light"] .feature-modal-resume-btn:hover,
html.light-theme .feature-modal-resume-btn:hover,
body.light-theme .feature-modal-resume-btn:hover,
body.light-mode .feature-modal-resume-btn:hover {
  background: linear-gradient(135deg, #00e65c 0%, #00994d 100%) !important;
  box-shadow: 0 12px 35px rgba(0, 200, 83, 0.5) !important;
}

[data-theme="light"] .feature-expanded-card .feature-icon-overlay-badge,
html.light-theme .feature-expanded-card .feature-icon-overlay-badge,
body.light-theme .feature-expanded-card .feature-icon-overlay-badge,
body.light-mode .feature-expanded-card .feature-icon-overlay-badge {
  background: #ffffff !important;
  border: 1.5px solid #00c853 !important;
  box-shadow: 0 4px 15px rgba(0, 200, 83, 0.2) !important;
}


/* ── LIGHT MODE PRODUCT LIST "VIEW MODEL" BUTTON (BLACK BOX & WHITE TEXT) ── */
/* ── LIGHT MODE PRODUCT LIST "VIEW MODEL" & "DETAILS" BUTTONS (BLACK BOX & CRISP WHITE TEXT) ── */
body.light-theme .btn-ather-primary,
body.light-theme .btn-ather-details,
body.light-theme .rel-cta-btn,
body.light-theme a.btn-ather-details,
body.light-theme button.btn-ather-primary,
body.light-theme a.rel-cta-btn,
body.light-theme .btn-ather-primary span,
body.light-theme .btn-ather-details span,
body.light-theme .rel-cta-btn span,
body.light-theme .btn-ather-primary *,
body.light-theme .btn-ather-details *,
body.light-theme .rel-cta-btn *,
[data-theme="light"] .btn-ather-primary,
[data-theme="light"] .btn-ather-details,
[data-theme="light"] .rel-cta-btn,
[data-theme="light"] a.btn-ather-details,
[data-theme="light"] button.btn-ather-primary,
[data-theme="light"] a.rel-cta-btn,
[data-theme="light"] .btn-ather-primary span,
[data-theme="light"] .btn-ather-details span,
[data-theme="light"] .rel-cta-btn span,
[data-theme="light"] .btn-ather-primary *,
[data-theme="light"] .btn-ather-details *,
[data-theme="light"] .rel-cta-btn *,
html.light-theme .btn-ather-primary,
html.light-theme .btn-ather-details,
html.light-theme .rel-cta-btn,
html.light-theme a.btn-ather-details,
html.light-theme button.btn-ather-primary,
html.light-theme a.rel-cta-btn,
html.light-theme .btn-ather-primary span,
html.light-theme .btn-ather-details span,
html.light-theme .rel-cta-btn span,
html.light-theme .btn-ather-primary *,
html.light-theme .btn-ather-details *,
html.light-theme .rel-cta-btn *,
body.light-mode .btn-ather-primary,
body.light-mode .btn-ather-details,
body.light-mode .rel-cta-btn,
body.light-mode a.btn-ather-details,
body.light-mode button.btn-ather-primary,
body.light-mode a.rel-cta-btn,
body.light-mode .btn-ather-primary span,
body.light-mode .btn-ather-details span,
body.light-mode .rel-cta-btn span,
body.light-mode .btn-ather-primary *,
body.light-mode .btn-ather-details *,
body.light-mode .rel-cta-btn * {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.light-theme .btn-ather-primary:hover,
body.light-theme .btn-ather-details:hover,
body.light-theme .rel-cta-btn:hover,
body.light-theme a.btn-ather-details:hover,
body.light-theme button.btn-ather-primary:hover,
body.light-theme a.rel-cta-btn:hover,
body.light-theme .btn-ather-primary:hover span,
body.light-theme .btn-ather-details:hover span,
body.light-theme .rel-cta-btn:hover span,
[data-theme="light"] .btn-ather-primary:hover,
[data-theme="light"] .btn-ather-details:hover,
[data-theme="light"] .rel-cta-btn:hover,
[data-theme="light"] a.btn-ather-details:hover,
[data-theme="light"] button.btn-ather-primary:hover,
[data-theme="light"] a.rel-cta-btn:hover,
[data-theme="light"] .btn-ather-primary:hover span,
[data-theme="light"] .btn-ather-details:hover span,
[data-theme="light"] .rel-cta-btn:hover span,
html.light-theme .btn-ather-primary:hover,
html.light-theme .btn-ather-details:hover,
html.light-theme .rel-cta-btn:hover,
html.light-theme a.btn-ather-details:hover,
html.light-theme button.btn-ather-primary:hover,
html.light-theme a.rel-cta-btn:hover,
html.light-theme .btn-ather-primary:hover span,
html.light-theme .btn-ather-details:hover span,
html.light-theme .rel-cta-btn:hover span,
body.light-mode .btn-ather-primary:hover,
body.light-mode .btn-ather-details:hover,
body.light-mode .rel-cta-btn:hover,
body.light-mode a.btn-ather-details:hover,
body.light-mode button.btn-ather-primary:hover,
body.light-mode a.rel-cta-btn:hover,
body.light-mode .btn-ather-primary:hover span,
body.light-mode .btn-ather-details:hover span,
body.light-mode .rel-cta-btn:hover span {
  background: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   OPTIMIZED LIGHT MODE & MOBILE STYLES FOR MODEL VARIANT & COMPARISON DECK
   ========================================================================== */
body.light-mode .luxury-meta-eyebrow,
body.light-theme .luxury-meta-eyebrow,
[data-theme="light"] .luxury-meta-eyebrow {
  color: #059669 !important;
}

body.light-mode .luxury-variant-card,
body.light-theme .luxury-variant-card,
[data-theme="light"] .luxury-variant-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .luxury-variant-card:hover,
body.light-theme .luxury-variant-card:hover,
[data-theme="light"] .luxury-variant-card:hover {
  background: #f8fafc !important;
  border-color: #059669 !important;
}

body.light-mode .luxury-variant-card.active,
body.light-theme .luxury-variant-card.active,
[data-theme="light"] .luxury-variant-card.active {
  background: rgba(5, 150, 105, 0.08) !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15) !important;
}

body.light-mode .luxury-variant-card .variant-name,
body.light-theme .luxury-variant-card .variant-name,
[data-theme="light"] .luxury-variant-card .variant-name {
  color: #0f172a !important;
}

body.light-mode .luxury-variant-card .variant-meta,
body.light-theme .luxury-variant-card .variant-meta,
[data-theme="light"] .luxury-variant-card .variant-meta {
  color: #64748b !important;
}

body.light-mode .luxury-active-eyebrow,
body.light-theme .luxury-active-eyebrow,
[data-theme="light"] .luxury-active-eyebrow {
  color: #059669 !important;
}

body.light-mode .luxury-active-title,
body.light-theme .luxury-active-title,
[data-theme="light"] .luxury-active-title {
  color: #0f172a !important;
}

body.light-mode .luxury-spec-card,
body.light-theme .luxury-spec-card,
[data-theme="light"] .luxury-spec-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .luxury-spec-label,
body.light-theme .luxury-spec-label,
[data-theme="light"] .luxury-spec-label {
  color: #64748b !important;
}

body.light-mode .luxury-spec-value,
body.light-mode .luxury-spec-value-large,
body.light-theme .luxury-spec-value,
body.light-theme .luxury-spec-value-large,
[data-theme="light"] .luxury-spec-value,
[data-theme="light"] .luxury-spec-value-large {
  color: #0f172a !important;
}

body.light-mode .luxury-progress-track,
body.light-theme .luxury-progress-track,
[data-theme="light"] .luxury-progress-track {
  background: #e2e8f0 !important;
}

body.light-mode .luxury-progress-fill,
body.light-theme .luxury-progress-fill,
[data-theme="light"] .luxury-progress-fill {
  background: linear-gradient(90deg, #0284c7 0%, #059669 100%) !important;
}

body.light-mode .luxury-reservation-card,
body.light-theme .luxury-reservation-card,
[data-theme="light"] .luxury-reservation-card {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.07) 0%, #ffffff 100%) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.light-mode .res-live-title,
body.light-theme .res-live-title,
[data-theme="light"] .res-live-title {
  color: #059669 !important;
}

body.light-mode .res-instant-chip,
body.light-theme .res-instant-chip,
[data-theme="light"] .res-instant-chip {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
}

body.light-mode .res-status-badge,
body.light-theme .res-status-badge,
[data-theme="light"] .res-status-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

body.light-mode .res-status-text,
body.light-theme .res-status-text,
[data-theme="light"] .res-status-text {
  color: #059669 !important;
  text-shadow: none !important;
}

body.light-mode .res-tagline,
body.light-theme .res-tagline,
[data-theme="light"] .res-tagline {
  color: #475569 !important;
}

body.light-mode .res-perks-row,
body.light-theme .res-perks-row,
[data-theme="light"] .res-perks-row {
  border-top-color: #e2e8f0 !important;
}

body.light-mode .res-perk-pill,
body.light-theme .res-perk-pill,
[data-theme="light"] .res-perk-pill {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

body.light-mode .res-perk-pill.highlight,
body.light-theme .res-perk-pill.highlight,
[data-theme="light"] .res-perk-pill.highlight {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
  color: #0284c7 !important;
}

body.light-mode .luxury-btn-primary,
body.light-theme .luxury-btn-primary,
[data-theme="light"] .luxury-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3) !important;
}

body.light-mode .luxury-btn-secondary,
body.light-theme .luxury-btn-secondary,
[data-theme="light"] .luxury-btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* Light Mode Comparison Deck (Podium Grid) */
body.light-mode .podium-card,
body.light-theme .podium-card,
[data-theme="light"] .podium-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .podium-card:hover,
body.light-theme .podium-card:hover,
[data-theme="light"] .podium-card:hover {
  border-color: #059669 !important;
  box-shadow: 0 20px 50px rgba(5, 150, 105, 0.15) !important;
}

body.light-mode .podium-card.featured-podium,
body.light-theme .podium-card.featured-podium,
[data-theme="light"] .podium-card.featured-podium {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.06) 0%, #ffffff 100%) !important;
  border: 2px solid rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 20px 50px rgba(5, 150, 105, 0.12) !important;
}

body.light-mode .podium-popular-banner,
body.light-theme .podium-popular-banner,
[data-theme="light"] .podium-popular-banner {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 20px rgba(5, 150, 105, 0.3) !important;
}

body.light-mode .podium-tag-cyan,
body.light-theme .podium-tag-cyan,
[data-theme="light"] .podium-tag-cyan {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}

body.light-mode .podium-tag-green,
body.light-theme .podium-tag-green,
[data-theme="light"] .podium-tag-green {
  background: rgba(5, 150, 105, 0.1) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  color: #059669 !important;
}

body.light-mode .podium-tag-gold,
body.light-theme .podium-tag-gold,
[data-theme="light"] .podium-tag-gold {
  background: rgba(217, 119, 6, 0.1) !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
  color: #d97706 !important;
}

body.light-mode .podium-emi-tag,
body.light-theme .podium-emi-tag,
[data-theme="light"] .podium-emi-tag {
  color: #64748b !important;
}

body.light-mode .podium-model-name,
body.light-theme .podium-model-name,
[data-theme="light"] .podium-model-name {
  color: #0f172a !important;
}

body.light-mode .podium-model-subtitle,
body.light-theme .podium-model-subtitle,
[data-theme="light"] .podium-model-subtitle {
  color: #475569 !important;
}

body.light-mode .podium-specs-hud,
body.light-theme .podium-specs-hud,
[data-theme="light"] .podium-specs-hud {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.light-mode .podium-spec-col:not(:last-child),
body.light-theme .podium-spec-col:not(:last-child),
[data-theme="light"] .podium-spec-col:not(:last-child) {
  border-right-color: #cbd5e1 !important;
}

body.light-mode .spec-num,
body.light-theme .spec-num,
[data-theme="light"] .spec-num {
  color: #0f172a !important;
}

body.light-mode .spec-num small,
body.light-theme .spec-num small,
[data-theme="light"] .spec-num small {
  color: #059669 !important;
}

body.light-mode .spec-label,
body.light-theme .spec-label,
[data-theme="light"] .spec-label {
  color: #64748b !important;
}

body.light-mode .podium-reservation-box,
body.light-theme .podium-reservation-box,
[data-theme="light"] .podium-reservation-box {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .podium-res-title,
body.light-theme .podium-res-title,
[data-theme="light"] .podium-res-title {
  color: #64748b !important;
}

body.light-mode .podium-res-badge-live,
body.light-theme .podium-res-badge-live,
[data-theme="light"] .podium-res-badge-live {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.1) !important;
  border: 1px solid rgba(5, 150, 105, 0.28) !important;
  text-shadow: none !important;
}

body.light-mode .podium-res-micro-features,
body.light-theme .podium-res-micro-features,
[data-theme="light"] .podium-res-micro-features {
  color: #334155 !important;
  border-top-color: #e2e8f0 !important;
}

body.light-mode .podium-cta-btn,
body.light-theme .podium-cta-btn,
[data-theme="light"] .podium-cta-btn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3) !important;
}

@media (max-width: 992px) {
  .luxury-configurator-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 1.8rem 1.25rem !important;
    border-radius: 24px !important;
  }
  
  .luxury-visual-stage {
    min-height: 320px !important;
  }
  
  .luxury-image-viewport {
    height: 260px !important;
    max-width: 100% !important;
  }
  
  .podium-deck-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
  }

  .podium-card.featured-podium {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .luxury-variant-selector-wrapper {
    width: 100% !important;
  }

  .luxury-variant-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .luxury-variant-card {
    padding: 0.85rem 1rem !important;
    border-radius: 16px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  .luxury-variant-card .variant-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  .luxury-variant-card .variant-meta {
    font-size: 0.75rem !important;
  }

  .luxury-active-title {
    font-size: 1.5rem !important;
  }

  .luxury-specs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .luxury-spec-card.full-width {
    grid-column: span 2 !important;
  }

  .luxury-reservation-card {
    padding: 1.1rem 1.1rem !important;
    border-radius: 18px !important;
  }

  .res-card-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .res-status-badge {
    width: 100% !important;
    justify-content: center !important;
  }

  .res-status-text {
    font-size: 1.25rem !important;
  }

  .res-perks-row {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  .res-perk-pill {
    width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  .luxury-action-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .luxury-btn-primary,
  .luxury-btn-secondary {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.9rem 1.2rem !important;
    min-height: 48px !important;
  }

  .podium-card {
    padding: 1.4rem 1.15rem !important;
    border-radius: 22px !important;
  }

  .podium-badge-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
  }

  .podium-stage-viewport {
    height: 180px !important;
  }

  .podium-model-name {
    font-size: 1.35rem !important;
  }

  .podium-model-subtitle {
    font-size: 0.78rem !important;
    margin-bottom: 1.1rem !important;
  }

  .podium-specs-hud {
    padding: 0.75rem 0.25rem !important;
  }

  .spec-num {
    font-size: 0.95rem !important;
  }

  .spec-num small {
    font-size: 0.62rem !important;
  }

  .spec-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.02em !important;
  }

  .podium-reservation-box {
    padding: 0.85rem 0.95rem !important;
    border-radius: 14px !important;
    margin-bottom: 1.1rem !important;
  }

  .podium-res-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .podium-res-badge-live {
    align-self: center !important;
  }

  .podium-res-micro-features {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    font-size: 0.68rem !important;
  }

  .podium-cta-btn {
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.88rem !important;
    min-height: 48px !important;
  }
}

@media (max-width: 480px) {
  .podium-stage-viewport {
    height: 150px !important;
  }

  .spec-num {
    font-size: 0.88rem !important;
  }

  .spec-num small {
    font-size: 0.58rem !important;
  }

  .spec-label {
    font-size: 0.54rem !important;
  }

  .podium-badge-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
  }
}

/* ==========================================================================
   ⚡ SINGLE-LINE HELPLINE & EQUAL-WIDTH SPEC BADGES FIX
   ========================================================================== */
.luxury-btn-secondary,
a.luxury-btn-secondary,
.luxury-action-row a,
.luxury-action-row button {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  word-break: keep-all !important;
}

.luxury-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.luxury-spec-card {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0.9rem 0.95rem !important;
  box-sizing: border-box !important;
}

.luxury-spec-card.full-width {
  grid-column: span 2 !important;
}

.luxury-spec-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.luxury-spec-label {
  white-space: nowrap !important;
  font-size: 0.74rem !important;
  flex-shrink: 0 !important;
}

.luxury-spec-value {
  white-space: nowrap !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}

/* Master Light Mode Overrides for Customizer Section & Mobile View */
body.light-mode:not(#_) .customizer-section,
body.light-theme:not(#_) .customizer-section,
html.light-mode:not(#_) .customizer-section,
html.light-theme:not(#_) .customizer-section,
[data-theme="light"]:not(#_) .customizer-section,
body.light-mode:not(#_) #customizer,
body.light-theme:not(#_) #customizer,
html.light-mode:not(#_) #customizer,
html.light-theme:not(#_) #customizer,
[data-theme="light"]:not(#_) #customizer {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light-mode:not(#_) .customizer-section h1,
body.light-mode:not(#_) .customizer-section h2,
body.light-mode:not(#_) .customizer-section h3,
body.light-mode:not(#_) .customizer-section .luxury-section-title,
body.light-theme:not(#_) .customizer-section h1,
body.light-theme:not(#_) .customizer-section h2,
body.light-theme:not(#_) .customizer-section h3,
body.light-theme:not(#_) .customizer-section .luxury-section-title,
[data-theme="light"]:not(#_) .customizer-section h1,
[data-theme="light"]:not(#_) .customizer-section h2,
[data-theme="light"]:not(#_) .customizer-section h3,
[data-theme="light"]:not(#_) .customizer-section .luxury-section-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

body.light-mode:not(#_) .customizer-section p,
body.light-mode:not(#_) .customizer-section .luxury-section-subtitle,
body.light-theme:not(#_) .customizer-section p,
body.light-theme:not(#_) .customizer-section .luxury-section-subtitle,
[data-theme="light"]:not(#_) .customizer-section p,
[data-theme="light"]:not(#_) .customizer-section .luxury-section-subtitle {
  color: #475569 !important;
}

body.light-mode:not(#_) .luxury-eyebrow-badge,
body.light-theme:not(#_) .luxury-eyebrow-badge,
[data-theme="light"]:not(#_) .luxury-eyebrow-badge {
  background: rgba(5, 150, 105, 0.08) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  color: #059669 !important;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.08) !important;
}

body.light-mode:not(#_) .luxury-configurator-container,
body.light-theme:not(#_) .luxury-configurator-container,
[data-theme="light"]:not(#_) .luxury-configurator-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode:not(#_) .luxury-visual-stage,
body.light-theme:not(#_) .luxury-visual-stage,
[data-theme="light"]:not(#_) .luxury-visual-stage {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode:not(#_) .luxury-studio-spotlight,
body.light-theme:not(#_) .luxury-studio-spotlight,
[data-theme="light"]:not(#_) .luxury-studio-spotlight {
  background: radial-gradient(circle at 50% 50%, rgba(5, 150, 105, 0.15) 0%, transparent 70%) !important;
}

body.light-mode:not(#_) .luxury-hud-badge,
body.light-theme:not(#_) .luxury-hud-badge,
[data-theme="light"]:not(#_) .luxury-hud-badge {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode:not(#_) .luxury-hud-badge span,
body.light-theme:not(#_) .luxury-hud-badge span,
[data-theme="light"]:not(#_) .luxury-hud-badge span {
  color: #0f172a !important;
}

body.light-mode:not(#_) .luxury-interactive-hint,
body.light-theme:not(#_) .luxury-interactive-hint,
[data-theme="light"]:not(#_) .luxury-interactive-hint {
  color: #475569 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-mode:not(#_) .pulse-dot,
body.light-theme:not(#_) .pulse-dot,
[data-theme="light"]:not(#_) .pulse-dot {
  background: #059669 !important;
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.6) !important;
}

body.light-mode:not(#_) .luxury-podium-ring,
body.light-theme:not(#_) .luxury-podium-ring,
[data-theme="light"]:not(#_) .luxury-podium-ring {
  background: radial-gradient(ellipse at center, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0) 75%) !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
}

body.light-mode:not(#_) .luxury-meta-eyebrow,
body.light-theme:not(#_) .luxury-meta-eyebrow,
[data-theme="light"]:not(#_) .luxury-meta-eyebrow {
  color: #059669 !important;
}

body.light-mode:not(#_) .luxury-variant-card,
body.light-theme:not(#_) .luxury-variant-card,
[data-theme="light"]:not(#_) .luxury-variant-card {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode:not(#_) .luxury-variant-card:hover,
body.light-theme:not(#_) .luxury-variant-card:hover,
[data-theme="light"]:not(#_) .luxury-variant-card:hover {
  background: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.15) !important;
}

body.light-mode:not(#_) .luxury-variant-card.active,
body.light-theme:not(#_) .luxury-variant-card.active,
[data-theme="light"]:not(#_) .luxury-variant-card.active {
  background: rgba(5, 150, 105, 0.1) !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.2) !important;
}

body.light-mode:not(#_) .luxury-variant-card .variant-name,
body.light-theme:not(#_) .luxury-variant-card .variant-name,
[data-theme="light"]:not(#_) .luxury-variant-card .variant-name {
  color: #0f172a !important;
}

body.light-mode:not(#_) .luxury-variant-card .variant-meta,
body.light-theme:not(#_) .luxury-variant-card .variant-meta,
[data-theme="light"]:not(#_) .luxury-variant-card .variant-meta {
  color: #475569 !important;
}

body.light-mode:not(#_) .luxury-active-eyebrow,
body.light-theme:not(#_) .luxury-active-eyebrow,
[data-theme="light"]:not(#_) .luxury-active-eyebrow {
  color: #059669 !important;
}

body.light-mode:not(#_) .luxury-active-title,
body.light-theme:not(#_) .luxury-active-title,
[data-theme="light"]:not(#_) .luxury-active-title {
  color: #0f172a !important;
}

body.light-mode:not(#_) .luxury-spec-card,
body.light-theme:not(#_) .luxury-spec-card,
[data-theme="light"]:not(#_) .luxury-spec-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode:not(#_) .luxury-spec-label,
body.light-theme:not(#_) .luxury-spec-label,
[data-theme="light"]:not(#_) .luxury-spec-label {
  color: #475569 !important;
}

body.light-mode:not(#_) .luxury-spec-value,
body.light-mode:not(#_) .luxury-spec-value-large,
body.light-theme:not(#_) .luxury-spec-value,
body.light-theme:not(#_) .luxury-spec-value-large,
[data-theme="light"]:not(#_) .luxury-spec-value,
[data-theme="light"]:not(#_) .luxury-spec-value-large {
  color: #0f172a !important;
}

body.light-mode:not(#_) .luxury-progress-track,
body.light-theme:not(#_) .luxury-progress-track,
[data-theme="light"]:not(#_) .luxury-progress-track {
  background: #cbd5e1 !important;
}

body.light-mode:not(#_) .luxury-progress-fill,
body.light-theme:not(#_) .luxury-progress-fill,
[data-theme="light"]:not(#_) .luxury-progress-fill {
  background: linear-gradient(90deg, #0284c7 0%, #059669 100%) !important;
}

body.light-mode:not(#_) .luxury-reservation-card,
body.light-theme:not(#_) .luxury-reservation-card,
[data-theme="light"]:not(#_) .luxury-reservation-card {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, #ffffff 100%) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

body.light-mode:not(#_) .res-live-title,
body.light-theme:not(#_) .res-live-title,
[data-theme="light"]:not(#_) .res-live-title {
  color: #059669 !important;
}

body.light-mode:not(#_) .res-instant-chip,
body.light-theme:not(#_) .res-instant-chip,
[data-theme="light"]:not(#_) .res-instant-chip {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
}

body.light-mode:not(#_) .res-status-badge,
body.light-theme:not(#_) .res-status-badge,
[data-theme="light"]:not(#_) .res-status-badge {
  background: rgba(5, 150, 105, 0.12) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.4) !important;
}

body.light-mode:not(#_) .res-status-text,
body.light-theme:not(#_) .res-status-text,
[data-theme="light"]:not(#_) .res-status-text {
  color: #059669 !important;
  text-shadow: none !important;
}

body.light-mode:not(#_) .res-tagline,
body.light-theme:not(#_) .res-tagline,
[data-theme="light"]:not(#_) .res-tagline {
  color: #334155 !important;
}

body.light-mode:not(#_) .res-perks-row,
body.light-theme:not(#_) .res-perks-row,
[data-theme="light"]:not(#_) .res-perks-row {
  border-top: 1px solid #cbd5e1 !important;
}

body.light-mode:not(#_) .res-perk-pill,
body.light-theme:not(#_) .res-perk-pill,
[data-theme="light"]:not(#_) .res-perk-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-mode:not(#_) .res-perk-pill.highlight,
body.light-theme:not(#_) .res-perk-pill.highlight,
[data-theme="light"]:not(#_) .res-perk-pill.highlight {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}

body.light-mode:not(#_) .luxury-btn-primary,
body.light-theme:not(#_) .luxury-btn-primary,
[data-theme="light"]:not(#_) .luxury-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3) !important;
}

body.light-mode:not(#_) .luxury-btn-secondary,
body.light-theme:not(#_) .luxury-btn-secondary,
[data-theme="light"]:not(#_) .luxury-btn-secondary,
body.light-mode:not(#_) a.luxury-btn-secondary,
body.light-theme:not(#_) a.luxury-btn-secondary,
[data-theme="light"]:not(#_) a.luxury-btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

body.light-mode:not(#_) .luxury-btn-secondary:hover,
body.light-theme:not(#_) .luxury-btn-secondary:hover,
[data-theme="light"]:not(#_) .luxury-btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #059669 !important;
  color: #059669 !important;
}

body.light-mode:not(#_) .podium-card,
body.light-theme:not(#_) .podium-card,
[data-theme="light"]:not(#_) .podium-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode:not(#_) .podium-card:hover,
body.light-theme:not(#_) .podium-card:hover,
[data-theme="light"]:not(#_) .podium-card:hover {
  border-color: #059669 !important;
  box-shadow: 0 20px 50px rgba(5, 150, 105, 0.15) !important;
}

body.light-mode:not(#_) .podium-card.featured-podium,
body.light-theme:not(#_) .podium-card.featured-podium,
[data-theme="light"]:not(#_) .podium-card.featured-podium {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.08) 0%, #ffffff 100%) !important;
  border: 2px solid rgba(5, 150, 105, 0.45) !important;
  box-shadow: 0 20px 50px rgba(5, 150, 105, 0.15) !important;
}

body.light-mode:not(#_) .podium-popular-banner,
body.light-theme:not(#_) .podium-popular-banner,
[data-theme="light"]:not(#_) .podium-popular-banner {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%) !important;
  color: #ffffff !important;
}

body.light-mode:not(#_) .podium-model-name,
body.light-theme:not(#_) .podium-model-name,
[data-theme="light"]:not(#_) .podium-model-name {
  color: #0f172a !important;
}

body.light-mode:not(#_) .podium-model-subtitle,
body.light-theme:not(#_) .podium-model-subtitle,
[data-theme="light"]:not(#_) .podium-model-subtitle {
  color: #475569 !important;
}

body.light-mode:not(#_) .podium-specs-hud,
body.light-theme:not(#_) .podium-specs-hud,
[data-theme="light"]:not(#_) .podium-specs-hud {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-mode:not(#_) .spec-num,
body.light-theme:not(#_) .spec-num,
[data-theme="light"]:not(#_) .spec-num {
  color: #0f172a !important;
}

body.light-mode:not(#_) .spec-label,
body.light-theme:not(#_) .spec-label,
[data-theme="light"]:not(#_) .spec-label {
  color: #475569 !important;
}




/* ==========================================================================
   REDESIGNED SPEC TRIAD SYSTEM (ZERO OVERFLOW, SENIOR-FRIENDLY LEGIBILITY)
   ========================================================================== */
.ather-spec-triad {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  padding: 0.75rem 0.5rem !important;
  margin: 1rem 0 1.4rem 0 !important;
  gap: 0.35rem !important;
}

:root:not([data-theme="light"]) .ather-spec-triad,
[data-theme="dark"] .ather-spec-triad {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.spec-triad-item {
  flex: 1 1 0% !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 0 0.2rem !important;
}

.spec-triad-item .spec-val {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #00994d !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
}

:root:not([data-theme="light"]) .spec-triad-item .spec-val,
[data-theme="dark"] .spec-triad-item .spec-val {
  color: #00ff88 !important;
}

.spec-triad-item .spec-lbl {
  display: block !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

:root:not([data-theme="light"]) .spec-triad-item .spec-lbl,
[data-theme="dark"] .spec-triad-item .spec-lbl {
  color: #94a3b8 !important;
}

.spec-divider {
  width: 1px !important;
  height: 28px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
}

:root:not([data-theme="light"]) .spec-divider,
[data-theme="dark"] .spec-divider {
  background: rgba(255, 255, 255, 0.12) !important;
}


/* ==========================================================================
   PERFECT LIGHT & DARK MODE SYSTEM FOR RESERVATION & TEST RIDE MODALS
   ========================================================================== */

/* Light Theme Modal Overlay & Card */
body.light-theme .modal-card,
[data-theme="light"] .modal-card,
body.light-theme #preorder-modal .modal-card,
[data-theme="light"] #preorder-modal .modal-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 255, 136, 0.1) !important;
  color: #0f172a !important;
}

body.light-theme .modal-title,
[data-theme="light"] .modal-title,
body.light-theme .modal-card h3,
[data-theme="light"] .modal-card h3 {
  color: #020617 !important;
  font-weight: 900 !important;
}

body.light-theme .modal-subtitle,
[data-theme="light"] .modal-subtitle,
body.light-theme .modal-card p,
[data-theme="light"] .modal-card p {
  color: #475569 !important;
}

body.light-theme .modal-card .form-label,
[data-theme="light"] .modal-card .form-label,
body.light-theme .modal-card label,
[data-theme="light"] .modal-card label,
body.light-theme .modal-card span,
[data-theme="light"] .modal-card span {
  color: #1e293b !important;
}

body.light-theme .modal-card .form-input,
body.light-theme .modal-card .form-select,
[data-theme="light"] .modal-card .form-input,
[data-theme="light"] .modal-card .form-select {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
}

body.light-theme .modal-card .form-input::placeholder,
[data-theme="light"] .modal-card .form-input::placeholder {
  color: #94a3b8 !important;
}

body.light-theme .modal-card .form-input:focus,
body.light-theme .modal-card .form-select:focus,
[data-theme="light"] .modal-card .form-input:focus,
[data-theme="light"] .modal-card .form-select:focus {
  border-color: #00b359 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0, 179, 89, 0.15) !important;
  outline: none !important;
}

body.light-theme .modal-card .modal-close,
[data-theme="light"] .modal-card .modal-close {
  color: #64748b !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 50% !important;
}

body.light-theme .modal-card .modal-close:hover,
[data-theme="light"] .modal-card .modal-close:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .modal-card button[type="submit"],
body.light-theme .modal-card .btn-submit,
body.light-theme .modal-card .btn-modal-submit,
[data-theme="light"] .modal-card button[type="submit"],
[data-theme="light"] .modal-card .btn-submit,
[data-theme="light"] .modal-card .btn-modal-submit {
  background: linear-gradient(135deg, #00e676 0%, #00b0ff 100%) !important;
  color: #030712 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 25px rgba(0, 230, 118, 0.3) !important;
}

/* Dark Theme Modal Card explicit rules */
:root:not([data-theme="light"]) .modal-card,
[data-theme="dark"] .modal-card {
  background: #0d111a !important;
  border: 1px solid rgba(0, 255, 136, 0.2) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 255, 136, 0.15) !important;
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) .modal-title,
[data-theme="dark"] .modal-title,
:root:not([data-theme="light"]) .modal-card h3,
[data-theme="dark"] .modal-card h3 {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .modal-subtitle,
[data-theme="dark"] .modal-subtitle,
:root:not([data-theme="light"]) .modal-card p,
[data-theme="dark"] .modal-card p {
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .modal-card .form-label,
[data-theme="dark"] .modal-card .form-label,
:root:not([data-theme="light"]) .modal-card label,
[data-theme="dark"] .modal-card label,
:root:not([data-theme="light"]) .modal-card span,
[data-theme="dark"] .modal-card span {
  color: #cbd5e1 !important;
}

:root:not([data-theme="light"]) .modal-card .form-input,
:root:not([data-theme="light"]) .modal-card .form-select,
[data-theme="dark"] .modal-card .form-input,
[data-theme="dark"] .modal-card .form-select {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}


/* ==========================================================================
   ⚡ HIGH-CONTRAST LIGHT MODE STYLING FOR FLOATING MENU BUTTON (.admin-drawer-trigger-btn)
   ========================================================================== */

/* 1. Base Dark Guard: ensure base dark pill background only applies in Dark Mode */
body.light-theme .admin-drawer-trigger-btn,
body[data-theme="light"] .admin-drawer-trigger-btn,
html[data-theme="light"] .admin-drawer-trigger-btn,
html.light-theme .admin-drawer-trigger-btn,
body.light-theme:not(#_) .admin-drawer-trigger-btn,
[data-theme="light"] body:not(#_) .admin-drawer-trigger-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-top: 1.5px solid rgba(16, 185, 129, 0.5) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 2. Menu Text Label: High-Contrast Dark Navy */
body.light-theme .menu-label-text,
body[data-theme="light"] .menu-label-text,
html[data-theme="light"] .menu-label-text,
html.light-theme .menu-label-text,
body.light-theme:not(#_) .menu-label-text,
[data-theme="light"] body:not(#_) .menu-label-text,
.admin-drawer-trigger-btn .menu-label-text {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .admin-drawer-trigger-btn span,
body[data-theme="light"] .admin-drawer-trigger-btn span {
  color: #0f172a !important;
}

/* 3. Hamburger Icon Bars: Crisp Vibrant Emerald */
body.light-theme .menu-burger-bars .bar,
body[data-theme="light"] .menu-burger-bars .bar,
html[data-theme="light"] .menu-burger-bars .bar,
[data-theme="light"] body:not(#_) .menu-burger-bars .bar {
  background: #059669 !important;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.4) !important;
}

/* 4. Radar Spark Dot: Vivid Green Pulse */
body.light-theme .menu-spark-dot,
body[data-theme="light"] .menu-spark-dot,
html[data-theme="light"] .menu-spark-dot,
[data-theme="light"] body:not(#_) .menu-spark-dot {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981, 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

/* 5. Hover State: Elevated Light Slate Pill */
body.light-theme .admin-drawer-trigger-btn:hover,
body[data-theme="light"] .admin-drawer-trigger-btn:hover,
html[data-theme="light"] .admin-drawer-trigger-btn:hover,
[data-theme="light"] body:not(#_) .admin-drawer-trigger-btn:hover {
  background: #f8fafc !important;
  border-color: #10b981 !important;
  color: #047857 !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.18), inset 0 0 10px rgba(16, 185, 129, 0.08) !important;
  transform: translateY(-1.5px) !important;
}

body.light-theme .admin-drawer-trigger-btn:hover .menu-label-text,
body[data-theme="light"] .admin-drawer-trigger-btn:hover .menu-label-text {
  color: #047857 !important;
}

body.light-theme .admin-drawer-trigger-btn:hover .menu-burger-bars .bar,
body[data-theme="light"] .admin-drawer-trigger-btn:hover .menu-burger-bars .bar {
  background: #047857 !important;
}


/* ==========================================================================
   ⚡ SLEEK HORIZONTAL CAPSULE PILL FIX FOR MENU BUTTON (.admin-drawer-trigger-btn)
   ========================================================================== */
.admin-drawer-trigger-btn,
button.admin-drawer-trigger-btn,
#admin-drawer-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.48rem 1.15rem !important;
  border-radius: 50px !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
}

.admin-drawer-trigger-btn:focus,
.admin-drawer-trigger-btn:focus-visible,
.admin-drawer-trigger-btn:active {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

body.light-theme .admin-drawer-trigger-btn,
body[data-theme="light"] .admin-drawer-trigger-btn,
html[data-theme="light"] .admin-drawer-trigger-btn,
html.light-theme .admin-drawer-trigger-btn,
body.light-theme:not(#_) .admin-drawer-trigger-btn,
[data-theme="light"] body:not(#_) .admin-drawer-trigger-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .menu-label-text,
body[data-theme="light"] .menu-label-text,
html[data-theme="light"] .menu-label-text,
html.light-theme .menu-label-text,
body.light-theme:not(#_) .menu-label-text,
[data-theme="light"] body:not(#_) .menu-label-text,
.admin-drawer-trigger-btn .menu-label-text {
  color: #0f172a !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  line-height: 1 !important;
}

body.light-theme .menu-burger-bars .bar,
body[data-theme="light"] .menu-burger-bars .bar,
html[data-theme="light"] .menu-burger-bars .bar,
[data-theme="light"] body:not(#_) .menu-burger-bars .bar {
  background: #059669 !important;
  box-shadow: 0 0 4px rgba(5, 150, 105, 0.3) !important;
}

body.light-theme .menu-spark-dot,
body[data-theme="light"] .menu-spark-dot,
html[data-theme="light"] .menu-spark-dot,
[data-theme="light"] body:not(#_) .menu-spark-dot {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}


/* ==========================================================================
   ⚡ EXPLICIT LIGHT MODE OPTIMIZATION FOR FAQ ACCORDIONS (STUDIO WHITE)
   ========================================================================== */
body.light-theme .faq-card-item,
body.light-theme .sp-faq-item,
body[data-theme="light"] .faq-card-item,
body[data-theme="light"] .sp-faq-item,
html[data-theme="light"] .faq-card-item,
html[data-theme="light"] .sp-faq-item,
.faq-card-item.light-mode,
.sp-faq-item.light-mode {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .faq-card-item.active,
body.light-theme .sp-faq-item.active,
body[data-theme="light"] .faq-card-item.active,
body[data-theme="light"] .sp-faq-item.active,
html[data-theme="light"] .faq-card-item.active,
html[data-theme="light"] .sp-faq-item.active {
  background: #f8fafc !important;
  border-color: #10b981 !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.14) !important;
}

body.light-theme .faq-question-btn,
body.light-theme .sp-faq-question,
body[data-theme="light"] .faq-question-btn,
body[data-theme="light"] .sp-faq-question,
html[data-theme="light"] .faq-question-btn,
html[data-theme="light"] .sp-faq-question {
  background: transparent !important;
  color: #0f172a !important;
}

body.light-theme .faq-question-text,
body.light-theme .sp-faq-question .faq-question-text,
body[data-theme="light"] .faq-question-text,
body[data-theme="light"] .sp-faq-question .faq-question-text,
html[data-theme="light"] .faq-question-text,
html[data-theme="light"] .sp-faq-question .faq-question-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .faq-card-item.active .faq-question-text,
body.light-theme .sp-faq-item.active .faq-question-text,
body[data-theme="light"] .faq-card-item.active .faq-question-text,
body[data-theme="light"] .sp-faq-item.active .faq-question-text,
html[data-theme="light"] .faq-card-item.active .faq-question-text,
html[data-theme="light"] .sp-faq-item.active .faq-question-text {
  color: #047857 !important;
  font-weight: 800 !important;
}

body.light-theme .sp-faq-toggle-icon,
body.light-theme .faq-chevron,
body[data-theme="light"] .sp-faq-toggle-icon,
body[data-theme="light"] .faq-chevron,
html[data-theme="light"] .sp-faq-toggle-icon,
html[data-theme="light"] .faq-chevron {
  color: #059669 !important;
}

body.light-theme .faq-answer-body,
body.light-theme .sp-faq-answer,
body.light-theme .faq-answer-body p,
body.light-theme .sp-faq-answer p,
body[data-theme="light"] .faq-answer-body,
body[data-theme="light"] .sp-faq-answer,
body[data-theme="light"] .faq-answer-body p,
body[data-theme="light"] .sp-faq-answer p,
html[data-theme="light"] .faq-answer-body,
html[data-theme="light"] .sp-faq-answer,
html[data-theme="light"] .faq-answer-body p,
html[data-theme="light"] .sp-faq-answer p {
  color: #475569 !important;
}


  /* SVG Arrow Alignments for Mobile Drawer */
  .banner-arrow svg,
  .nav-link-arrow svg {
    display: block !important;
    transition: transform 0.25s ease !important;
  }
  .drawer-test-ride-banner:hover .banner-arrow svg {
    transform: translateX(5px) !important;
  }
  .drawer-nav-link:hover .nav-link-arrow svg {
    transform: translateX(4px) !important;
  }