* {
      font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ============================================
       iOS DYNAMIC TYPE FIX
       Prevents iOS accessibility large text from breaking layout
       -webkit-text-size-adjust: 100% tells Safari not to auto-scale text
       ============================================ */
    html {
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* ============================================
       iOS SAFARI SAFE-AREA FIX
       Safari uses html background color for status bar & bottom toolbar
       Using !important and CSS variables for theme sync
       ============================================ */

    /* CSS Variables for page background - MUST match theme-color meta tags */
    :root {
      --page-bg: #FFFFFF;

      /* New color palette (UI/UX Pro Max recommended) */
      --color-primary: #3B82F6;
      --color-primary-hover: #2563EB;
      --color-cta: #F97316;  /* keep orange for CTAs */
      --color-success: #10B981;
      --color-text-dark: #1E293B;
      --color-text-muted: #64748B;
    }

    :root.dark,
    html.dark {
      --page-bg: #000000;
      --color-primary: #60A5FA;
      --color-text-dark: #F1F5F9;
      --color-text-muted: #94A3B8;
    }

    html, body {
      /* Use dvh for iOS Safari dynamic viewport */
      min-height: 100dvh;
      margin: 0;
      padding: 0;
      /* Use CSS variable for instant theme sync */
      background: var(--page-bg) !important;
      background-color: var(--page-bg) !important;
      /* Hint to Safari for UI color scheme */
      color-scheme: light dark;
    }

    /* Redundant selector for maximum specificity on html.dark */
    html.dark, html.dark body {
      background: var(--page-bg) !important;
      background-color: var(--page-bg) !important;
      color-scheme: light dark;
    }

    /* NOTE: body::after safe-area filler removed - was causing gray
       background conflict with Safari iOS bottom toolbar.
       Now relying on .premium-gradient-bg::before to fill safe-area. */

    html {
      scroll-behavior: smooth;
    }

    /* Logo dark/light mode switching */
    .logo-dark {
      opacity: 1;
      transition: opacity 0.2s ease;
    }

    .logo-light {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    html.dark .logo-dark {
      opacity: 0;
    }

    html.dark .logo-light {
      opacity: 1;
    }

    /* ========================================
       ANIMATION TOKENS (Mobile-First)
       Consistent timing across all animations
       ======================================== */
    :root {
      /* Durations */
      --anim-duration-instant: 0ms;
      --anim-duration-fast: 150ms;
      --anim-duration-normal: 250ms;
      --anim-duration-slow: 400ms;
      --anim-duration-skeleton: 1.5s;

      /* Easings */
      --anim-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
      --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --anim-ease-linear: linear;

      /* Stagger */
      --anim-stagger: 50ms;

      /* Max sequence time */
      --anim-max-sequence: 600ms;
    }

    /* ========================================
       REDUCED MOTION (Accessibility)
       Respect user preferences
       ======================================== */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ========================================
       MOBILE ANIMATION OPTIMIZATIONS
       Disable heavy/decorative animations on mobile
       to save battery and reduce CPU usage
       ======================================== */
    @media (max-width: 1023px) {
      /* === BLOB ANIMATIONS (heavy GPU) === */
      .gradient-blob {
        animation: none !important;
      }

      /* === STICKY CTA PULSE === */
      .sticky-chat-card--pulse {
        animation: none !important;
      }

      /* === SECTION DIVIDERS (decorative) === */
      .section-divider-steps .step-dot {
        animation: none !important;
        opacity: 0.6;
      }

      [class*="divider-pulse"],
      [class*="sparkle-pulse"],
      [class*="pulse-gentle"] {
        animation: none !important;
      }

      /* === MASCOT ANIMATIONS (heavy) === */
      .mascot-container,
      [class*="mascot-float"],
      [class*="mascot-blink"],
      [class*="mascot-wave"] {
        animation: none !important;
      }

      /* === CAR ANIMATIONS (heavy) === */
      .car-body,
      .car-wheel {
        animation: none !important;
      }

      /* === VIN ANIMATIONS (heavy, multiple) === */
      [class*="vin-scan"],
      [class*="vin-char"],
      [class*="vin-error"],
      [class*="vin-success"] {
        animation: none !important;
      }

      /* === SCROLL ARROWS (decorative) === */
      [class*="scroll-arrow"],
      [class*="arrow-bounce"],
      [class*="bounceDown"] {
        animation: none !important;
      }

      /* === DECORATIVE PULSES (low priority) === */
      [class*="tagPulse"],
      [class*="iconPulse"],
      [class*="ctaGlow"],
      [class*="ctaPulse"],
      [class*="garageCTAPulse"] {
        animation: none !important;
      }

      /* === PATH GLOW (decorative SVG) === */
      [class*="path-glow"] {
        animation: none !important;
      }

      /* === SHIMMER OPTIMIZATIONS ===
         Keep shimmer but reduce frequency */
      .skeleton-loading,
      [class*="skeleton"] {
        animation-duration: 2s !important;
      }
    }

    /* Hide scrollbar but allow scrolling */
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }

    /* ========================================
       HORIZONTAL SCROLL INDICATORS (Mobile)
       Visual cue that content is scrollable
       ======================================== */
    .scroll-container {
      position: relative;
    }

    .scroll-container::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 40px;
      background: linear-gradient(to left, var(--bg-color, white) 0%, transparent 100%);
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .scroll-container.scrolled-end::after {
      opacity: 0;
    }

    .dark .scroll-container::after {
      --bg-color: #0B0B0B;
    }

    /* Scroll hint arrow */
    .scroll-hint {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      animation: scroll-hint-bounce 1.5s ease-in-out infinite;
      opacity: 0.6;
      pointer-events: none;
    }

    @keyframes scroll-hint-bounce {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      50% { transform: translateY(-50%) translateX(4px); }
    }

    /* ========================================
       PULL TO REFRESH (Native-feel)
       ======================================== */
    @media (max-width: 768px) {
      html {
        /* Enable native pull-to-refresh in Chrome/Edge */
        overscroll-behavior-y: auto;
      }

      /* PTR indicator (optional custom implementation) */
      .ptr-indicator {
        position: fixed;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.2s ease;
        z-index: 9999;
      }

      .ptr-indicator.active {
        top: 20px;
      }

      .ptr-indicator svg {
        width: 24px;
        height: 24px;
        color: #F97316;
        animation: ptr-spin 1s linear infinite;
      }

      @keyframes ptr-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    }

    /* ========================================
       SKELETON LOADING (Mobile optimized)
       GPU-accelerated for smooth animation
       ======================================== */
    .skeleton {
      background: linear-gradient(90deg,
        #E5E5E5 25%,
        #F0F0F0 50%,
        #E5E5E5 75%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
      border-radius: 8px;
      /* GPU compositing for smooth animation */
      will-change: background-position;
      transform: translateZ(0);
    }

    .dark .skeleton {
      background: linear-gradient(90deg,
        #2A2A2A 25%,
        #3A3A3A 50%,
        #2A2A2A 75%
      );
      background-size: 200% 100%;
    }

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

    .skeleton-text {
      height: 1em;
      margin-bottom: 0.5em;
    }

    .skeleton-text:last-child {
      width: 80%;
    }

    .skeleton-circle {
      border-radius: 50%;
    }

    .skeleton-card {
      padding: 16px;
      border-radius: 12px;
    }

    @media (prefers-reduced-motion: reduce) {
      .skeleton {
        animation: none;
      }
    }

    /* Image Skeleton Loading
       Shows shimmer animation while images load */
    .image-skeleton-container {
      position: relative;
      background: linear-gradient(90deg,
        #E5E5E5 25%,
        #F0F0F0 50%,
        #E5E5E5 75%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }

    .dark .image-skeleton-container {
      background: linear-gradient(90deg,
        #2A2A2A 25%,
        #3A3A3A 50%,
        #2A2A2A 75%
      );
      background-size: 200% 100%;
    }

    .image-skeleton-container img {
      position: relative;
      z-index: 1;
      transition: opacity 0.3s ease;
    }

    /* Stop animation when image is loaded */
    .image-skeleton-container.skeleton-loaded {
      animation: none;
      background: white;
    }

    .dark .image-skeleton-container.skeleton-loaded {
      background: white;
    }

    @media (prefers-reduced-motion: reduce) {
      .image-skeleton-container {
        animation: none;
      }
    }

    /* ========================================
       MOBILE SCROLL PERFORMANCE
       Prevent fixed element jank during fast scrolling
       Note: overscroll-behavior kept as 'auto' to allow pull-to-refresh
       ======================================== */
    @media (max-width: 768px) {
      /* Fixed/sticky elements get their own compositor layer */
      .sticky-cta-mobile,
      .site-header,
      .chat-widget-container {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Force element to stay in its own layer */
        will-change: transform;
      }

      /* Prevent bounce on scrollable containers, not html/body */
      .scroll-lock {
        overscroll-behavior: contain;
      }
    }

    /* Theme transition - only on specific properties, not box-shadow (expensive) */
    html.theme-transition,
    html.theme-transition *,
    html.theme-transition *::before,
    html.theme-transition *::after {
      transition: background-color 0.25s ease-out,
                  color 0.25s ease-out,
                  border-color 0.25s ease-out !important;
    }

    .moon-icon, .sun-icon {
      transition: opacity 0.2s ease;
    }

    /* ========================================
       HERO FEATURE BADGES (Fast, Accurate, Safe) - NEUTRAL
       ======================================== */
    .hero-feature-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: all 0.2s ease;
      cursor: default;
      /* All badges now neutral gray */
      background: transparent;
      border: 1px solid #D0D0D0;
      color: #777777;
      box-shadow: none;
    }

    .hero-feature-badge span {
      text-transform: uppercase;
    }

    .hero-feature-badge svg {
      opacity: 0.6;
      color: #888888;
    }

    /* All color variants now neutral */
    .hero-feature-badge--green,
    .hero-feature-badge--blue,
    .hero-feature-badge--orange {
      background: transparent;
      border: 1px solid #D0D0D0;
      color: #777777;
      box-shadow: none;
    }

    .hero-feature-badge--green svg,
    .hero-feature-badge--blue svg,
    .hero-feature-badge--orange svg {
      color: #888888;
    }

    .hero-feature-badge:hover {
      border-color: #B0B0B0;
      color: #555555;
    }

    /* Dark mode - all neutral */
    .dark .hero-feature-badge,
    .dark .hero-feature-badge--green,
    .dark .hero-feature-badge--blue,
    .dark .hero-feature-badge--orange {
      background: transparent;
      border-color: #3A3A3A;
      color: #888888;
      box-shadow: none;
    }

    .dark .hero-feature-badge svg,
    .dark .hero-feature-badge--green svg,
    .dark .hero-feature-badge--blue svg,
    .dark .hero-feature-badge--orange svg {
      color: #777777;
    }

    .dark .hero-feature-badge:hover {
      border-color: #4A4A4A;
      color: #AAAAAA;
    }

    /* ========================================
       LANGUAGE SWITCHER BUTTON - Neutral like Google
       ======================================== */
    .lang-switcher-btn {
      background: transparent;
      color: #555555;
      border: 1px solid #D0D0D0;
      box-shadow: none;
    }

    .lang-switcher-btn:hover {
      background: #F5F5F5;
      border-color: #B0B0B0;
      box-shadow: none;
    }

    .dark .lang-switcher-btn {
      background: transparent;
      color: #AAAAAA;
      border: 1px solid #3A3A3A;
      box-shadow: none;
    }

    .dark .lang-switcher-btn:hover {
      background: #2A2A2A;
      border-color: #4A4A4A;
      box-shadow: none;
    }

    /* Language dropdown menu */
    .lang-dropdown-menu {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(251, 191, 36, 0.3);
    }

    .dark .lang-dropdown-menu {
      background: rgba(30, 30, 30, 0.95);
      border-color: rgba(251, 191, 36, 0.4);
    }

    .lang-dropdown-menu a:hover {
      background: rgba(251, 191, 36, 0.1);
    }

    .dark .lang-dropdown-menu a:hover {
      background: rgba(251, 191, 36, 0.2);
    }

    /* Theme toggle icon button - override inherited white color */
    .theme-icon-btn {
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .dark .theme-icon-btn {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Theme toggle icon visibility - CSS fallback for Tailwind dark:block/dark:hidden */
    .theme-icon-btn .theme-icon-sun {
      display: none;
    }
    .theme-icon-btn .theme-icon-moon {
      display: block;
    }
    .dark .theme-icon-btn .theme-icon-sun {
      display: block;
    }
    .dark .theme-icon-btn .theme-icon-moon {
      display: none;
    }

    /* ========================================
       iOS-STYLE THEME TOGGLE SWITCH - Neutral colors (DEPRECATED)
       ======================================== */
    .theme-toggle-ios {
      position: relative;
      width: 44px;
      height: 24px;
      border-radius: 9999px;
      border: 1px solid #D0D0D0;
      cursor: pointer;
      padding: 2px;
      transition: all 0.25s ease-out;
      flex-shrink: 0;
      /* Extend tap target to 44px height while keeping visual size */
      margin: 10px 0;
      box-sizing: content-box;
    }

    /* Invisible tap area extension */
    .theme-toggle-ios::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -5px;
      right: -5px;
      bottom: -10px;
      /* This extends the clickable area */
    }

    /* Track background - Light mode (default) - neutral gray */
    .theme-toggle-ios {
      background-color: #E8E8E8;
    }

    /* Track background - Dark mode - subtle gray, not orange */
    /* Using .dark class on <html> for instant styling without JS delay */
    .dark .theme-toggle-ios {
      background-color: #4A4A4A;
      border-color: #5A5A5A;
    }

    /* Knob (the white circle) */
    .theme-toggle-ios .toggle-knob {
      position: absolute;
      /* Vertically center the knob */
      top: 50%;
      transform: translateY(-50%);
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 9999px;
      background-color: #FFFFFF;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
      transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Knob position - Dark mode (right side) */
    /* Using .dark class on <html> for instant styling without JS delay */
    /* Use calc: 100% width - knob width (20px) - right padding (2px) */
    .dark .theme-toggle-ios .toggle-knob {
      left: calc(100% - 22px);
      /* Keep vertical centering */
      transform: translateY(-50%);
    }

    /* Hover effects */
    .theme-toggle-ios:hover {
      opacity: 0.9;
    }

    .theme-toggle-ios:active {
      opacity: 0.8;
    }

    /* Focus ring for accessibility */
    .theme-toggle-ios:focus-visible {
      outline: 2px solid #007AFF;
      outline-offset: 2px;
    }

    /* ========================================
       LANGUAGE TOGGLE BUTTON
       ======================================== */
    .locale-toggle {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
      color: white;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 600;
    }

    .locale-toggle:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .locale-toggle.is-russian {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    }

    .locale-toggle.is-russian:hover {
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .locale-toggle:focus-visible {
      outline: 2px solid #007AFF;
      outline-offset: 2px;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
      letter-spacing: -0.02em;
      font-weight: 700;
    }

    /* ========================================
       STRIPE/LINEAR PREMIUM ANIMATED BACKGROUND
       Inspired by stripe.com and linear.app
       ======================================== */

    /* Base container for premium background */
    .premium-gradient-bg {
      position: relative;
      min-height: 100dvh; /* Dynamic viewport height for iOS Safari */
      overflow-x: hidden;
      /* Use page background to prevent flicker during theme transitions */
      /* The ::before pseudo-element adds gradient overlay on top */
      background-color: var(--page-bg);
    }

    /* Fixed background layer that covers entire viewport including iOS safe-area.
       This ensures the gradient extends behind Safari's bottom URL bar.
       IMPORTANT: Uses CSS variable --page-bg for instant theme sync.
       NOTE: bottom uses negative safe-area-inset to extend INTO the safe-area zone. */
    .premium-gradient-bg::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      /* Extend into safe-area zone below viewport */
      bottom: calc(0px - env(safe-area-inset-bottom, 0px));
      z-index: -1;
      pointer-events: none;
      /* Light mode: explicit #FFFFFF for Safari safe-area matching */
      background-color: #FFFFFF;
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 210, 180, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255, 180, 150, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse 50% 30% at 0% 100%, rgba(210, 225, 255, 0.1) 0%, transparent 40%);
    }

    .dark .premium-gradient-bg::before {
      /* Dark mode: explicit #000000 for Safari safe-area matching */
      background-color: #000000;
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 140, 90, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255, 120, 80, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse 50% 30% at 0% 100%, rgba(120, 160, 255, 0.04) 0%, transparent 40%);
    }

    /* Animated gradient blobs container - DISABLED */
    .gradient-blobs {
      display: none;
    }

    /* Individual blob styling */
    .gradient-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 1;
      mix-blend-mode: normal;
      will-change: transform;
      transform: translateZ(0);
    }

    /* Light mode blob colors - premium black/white/gray palette */
    .gradient-blob-1 {
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(180, 180, 180, 0.2) 0%, rgba(160, 160, 160, 0.1) 40%, transparent 70%);
      top: -250px;
      right: -150px;
      animation: blob-float-1 20s ease-in-out infinite;
    }

    .gradient-blob-2 {
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(200, 200, 200, 0.18) 0%, rgba(180, 180, 180, 0.08) 40%, transparent 70%);
      top: 25%;
      left: -200px;
      animation: blob-float-2 25s ease-in-out infinite;
    }

    .gradient-blob-3 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(170, 170, 170, 0.15) 0%, rgba(150, 150, 150, 0.06) 40%, transparent 70%);
      bottom: -150px;
      right: 15%;
      animation: blob-float-3 22s ease-in-out infinite;
    }

    .gradient-blob-4 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(190, 190, 190, 0.12) 0%, rgba(170, 170, 170, 0.05) 40%, transparent 70%);
      top: 45%;
      right: -80px;
      animation: blob-float-4 18s ease-in-out infinite;
    }

    /* Dark mode blob colors - subtle neutral grays */
    .dark .gradient-blob-1 {
      background: radial-gradient(circle, rgba(100, 100, 100, 0.18) 0%, rgba(80, 80, 80, 0.08) 40%, transparent 70%);
    }

    .dark .gradient-blob-2 {
      background: radial-gradient(circle, rgba(110, 110, 110, 0.14) 0%, rgba(90, 90, 90, 0.06) 40%, transparent 70%);
    }

    .dark .gradient-blob-3 {
      background: radial-gradient(circle, rgba(90, 90, 90, 0.12) 0%, rgba(70, 70, 70, 0.05) 40%, transparent 70%);
    }

    .dark .gradient-blob-4 {
      background: radial-gradient(circle, rgba(105, 105, 105, 0.1) 0%, rgba(85, 85, 85, 0.04) 40%, transparent 70%);
    }

    /* Additional blobs for longer pages - neutral grays */
    .gradient-blob-5 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(185, 185, 185, 0.15) 0%, rgba(165, 165, 165, 0.06) 40%, transparent 70%);
      top: 60%;
      left: -100px;
      animation: blob-float-2 28s ease-in-out infinite;
    }

    .gradient-blob-6 {
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(175, 175, 175, 0.12) 0%, rgba(155, 155, 155, 0.05) 40%, transparent 70%);
      top: 80%;
      right: -80px;
      animation: blob-float-3 24s ease-in-out infinite;
    }

    .dark .gradient-blob-5 {
      background: radial-gradient(circle, rgba(95, 95, 95, 0.12) 0%, rgba(75, 75, 75, 0.05) 40%, transparent 70%);
    }

    .dark .gradient-blob-6 {
      background: radial-gradient(circle, rgba(85, 85, 85, 0.1) 0%, rgba(65, 65, 65, 0.04) 40%, transparent 70%);
    }

    /* Blob animations - smooth floating movement */
    @keyframes blob-float-1 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      25% {
        transform: translate(-30px, 40px) scale(1.05);
      }
      50% {
        transform: translate(20px, -20px) scale(0.95);
      }
      75% {
        transform: translate(-20px, -30px) scale(1.02);
      }
    }

    @keyframes blob-float-2 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(40px, -30px) scale(1.08);
      }
      66% {
        transform: translate(-30px, 40px) scale(0.92);
      }
    }

    @keyframes blob-float-3 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      25% {
        transform: translate(35px, 25px) scale(0.95);
      }
      50% {
        transform: translate(-25px, 35px) scale(1.1);
      }
      75% {
        transform: translate(15px, -40px) scale(1);
      }
    }

    @keyframes blob-float-4 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(-40px, 30px) scale(1.15);
      }
    }

    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      .gradient-blob {
        animation: none;
      }
    }

    /* Mobile optimization - smaller blobs, simpler animation */
    @media (max-width: 768px) {
      .gradient-blob-1 {
        width: 400px;
        height: 400px;
        top: -150px;
        right: -100px;
      }
      .gradient-blob-2 {
        width: 350px;
        height: 350px;
      }
      .gradient-blob-3 {
        width: 300px;
        height: 300px;
      }
      .gradient-blob-4 {
        width: 250px;
        height: 250px;
      }
    }

    /* Noise overlay - DISABLED */
    .noise-overlay {
      display: none;
    }

    .dark .noise-overlay {
      display: none;
    }

    /* Legacy class for backwards compatibility */
    .zalando-clean-bg {
      position: relative;
      min-height: 100dvh;
    }

    /* Keep old glow classes for any remaining usage */
    .apple-glow-accent {
      display: none;
    }

    .glow-blue, .glow-peach, .glow-mint, .glow-lilac {
      display: none;
    }

    /* ========================================
       SCROLL PERFORMANCE OPTIMIZATIONS
       ======================================== */
    /* Smooth scroll for mobile carousel */
    .scroll-container {
      scroll-behavior: smooth;
      scrollbar-width: none;
      /* GPU acceleration - use transform3d for stable layer */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      /* Isolation to prevent fixed element jank */
      isolation: isolate;
      /* Disable iOS momentum scrolling to prevent fixed element lag */
      overscroll-behavior: contain;
    }
    .scroll-container::-webkit-scrollbar {
      display: none;
    }

    /* GPU acceleration for fixed/sticky elements */
    .site-header {
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    /* Prevent layout shifts on sections - disabled due to height collapse issues */
    /* section {
      contain: layout style;
    } */

    /* Optimize images to prevent CLS */
    img {
      max-width: 100%;
      height: auto;
    }

    /* Reduce paint areas for large backgrounds */
    .zalando-clean-bg {
      contain: layout style paint;
      isolation: isolate;
    }

    /* Benefit cards - GPU accelerated for smooth horizontal scroll */
    .benefit-card {
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: auto;
    }

    /* Only enable will-change during scroll on mobile */
    @media (max-width: 1023px) {
      .scroll-container:hover .benefit-card,
      .scroll-container:active .benefit-card {
        will-change: transform;
      }
    }

    /* ========================================
       REVEAL ANIMATIONS (IntersectionObserver)
       Pure CSS - triggered by adding .revealed class
       With JS fallback for first load
       ======================================== */
    [data-controller="reveal"] {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      will-change: opacity, transform;
      /* Fallback: auto-reveal after 1s if JS hasn't loaded */
      animation: autoRevealFallback 0.5s ease-out 1s forwards;
    }

    /* When JS works, it adds .revealed class before fallback animation */
    [data-controller="reveal"].revealed {
      opacity: 1;
      transform: translateY(0);
      animation: none; /* Cancel fallback animation */
    }

    @keyframes autoRevealFallback {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
      [data-controller="reveal"] {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
      }
    }

    /* ========================================
       SCROLL REVEAL - Staggered Item Animations
       Mobile-optimized scroll-triggered reveals
       ======================================== */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .scroll-reveal.scroll-reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-reveal-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .scroll-reveal-item.scroll-reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Slide from left variant */
    .scroll-reveal-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .scroll-reveal-left.scroll-reveal-visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Scale up variant */
    .scroll-reveal-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .scroll-reveal-scale.scroll-reveal-visible {
      opacity: 1;
      transform: scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-reveal,
      .scroll-reveal-item,
      .scroll-reveal-left,
      .scroll-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* Subtle animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.98);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* PREMIUM SHIMMER ANIMATIONS - REVOLUT STYLE */
    @keyframes shimmerRed {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes shimmerGreen {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes shimmerOrange {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out;
    }

    .animate-scale-in {
      animation: scaleIn 0.5s ease-out;
    }

    /* Premium minimal shadows (Zalando-style) */
    .minimal-shadow {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    }

    .minimal-shadow-lg {
      box-shadow:
        0 4px 12px 0 rgba(0, 0, 0, 0.06),
        0 1px 3px 0 rgba(0, 0, 0, 0.04);
    }

    /* PREMIUM PRICE COMPARISON BOX - APPLE + REVOLUT FINTECH */
    .premium-price-box {
      position: relative;
      background: #FFFFFF;
      border: 1px solid #E5E5E5;
      border-radius: 28px;
      padding: 32px 24px;
      overflow: visible; /* Changed from hidden to allow popup to show */
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02);
    }

    /* Mobile centering fix (≤ 640px) */
    @media (max-width: 640px) {
      .premium-price-box {
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media (min-width: 768px) {
      .premium-price-box {
        padding: 48px 40px;
      }
    }

    .dark .premium-price-box {
      background: #141414;
      border-color: #2A2A2A;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* Comparison Title Badge - Neutral, non-attention-grabbing */
    .comparison-title-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #777777;
      background: transparent;
      border: 1px solid #D0D0D0;
      border-radius: 100px;
      box-shadow: none;
    }

    .comparison-title-icon {
      font-size: 14px;
      opacity: 0.7;
    }

    .dark .comparison-title-badge {
      color: #888888;
      background: transparent;
      border-color: #3A3A3A;
      box-shadow: none;
    }

    .price-row {
      position: relative;
      z-index: 1;
    }

    .price-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, #EEEEEE 20%, #EEEEEE 80%, transparent 100%);
      margin: 20px 0;
    }

    .dark .price-divider {
      background: linear-gradient(90deg, transparent 0%, #2A2A2A 20%, #2A2A2A 80%, transparent 100%);
    }

    /* PREMIUM RED BACKGROUND BAND - NEUTRAL */
    .price-row-red {
      position: relative;
      padding: 18px 20px;
      margin: 0 -20px 16px -20px;
      border-radius: 14px;
      background: #F5F5F5;
    }

    .dark .price-row-red {
      background: rgba(255, 255, 255, 0.04);
    }

    /* Premium red badge - expensive indicator - NEUTRAL */
    .price-badge-expensive {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: transparent;
      border: 1px solid #CCCCCC;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #888888;
      width: fit-content;
      box-shadow: none;
    }

    .dark .price-badge-expensive {
      background: transparent;
      border-color: #444444;
      color: #999999;
      box-shadow: none;
    }

    .price-badge-expensive svg {
      width: 12px;
      height: 12px;
    }

    /* PREMIUM GREEN BACKGROUND BAND - NEUTRAL */
    .price-row-green {
      position: relative;
      padding: 18px 20px;
      margin: 0 -20px 20px -20px;
      border-radius: 14px;
      background: #F5F5F5;
    }

    .dark .price-row-green {
      background: rgba(255, 255, 255, 0.04);
    }

    /* Premium green badge - savings indicator - NEUTRAL */
    .price-badge-savings {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: transparent;
      border: 1px solid #CCCCCC;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #888888;
      width: fit-content;
      box-shadow: none;
    }

    .dark .price-badge-savings {
      background: transparent;
      border-color: #444444;
      color: #999999;
      box-shadow: none;
    }

    .price-badge-savings svg {
      width: 12px;
      height: 12px;
    }

    /* Subtle progress indicators behind prices - NEUTRAL */
    .price-progress-high {
      display: none;
    }

    .dark .price-progress-high {
      display: none;
    }

    .price-progress-low {
      display: none;
    }

    .dark .price-progress-low {
      display: none;
    }

    /* Premium arrow connector - from price to savings */
    .savings-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 16px 0;
      position: relative;
    }

    .savings-arrow svg {
      width: 20px;
      height: 20px;
      color: #16A34A;
      opacity: 0.4;
      animation: bounceDown 2s ease-in-out infinite;
    }

    .dark .savings-arrow svg {
      color: #86EFAC;
      opacity: 0.3;
    }

    @keyframes bounceDown {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
      }
      50% {
        transform: translateY(4px);
        opacity: 0.6;
      }
    }

    /* ========================================
       SAVINGS BRIDGE - Central Divider Design
       ======================================== */
    .savings-bridge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 8px -24px;
      position: relative;
    }

    /* Connector lines */
    .savings-bridge-line {
      flex: 1;
      height: 2px;
      position: relative;
    }

    .savings-bridge-line-left {
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(150, 150, 150, 0.2) 30%,
        rgba(150, 150, 150, 0.3) 100%
      );
    }

    .savings-bridge-line-right {
      background: linear-gradient(90deg,
        rgba(150, 150, 150, 0.3) 0%,
        rgba(150, 150, 150, 0.2) 70%,
        transparent 100%
      );
    }

    .dark .savings-bridge-line-left {
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 200, 200, 0.1) 30%,
        rgba(200, 200, 200, 0.2) 100%
      );
    }

    .dark .savings-bridge-line-right {
      background: linear-gradient(90deg,
        rgba(200, 200, 200, 0.2) 0%,
        rgba(200, 200, 200, 0.1) 70%,
        transparent 100%
      );
    }

    /* Central badge - NEUTRAL */
    .savings-bridge-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px 10px 12px;
      background: #FFFFFF;
      border: 1px solid #D0D0D0;
      border-radius: 50px;
      position: relative;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      animation: none;
    }

    .dark .savings-bridge-badge {
      background: #1A1A1A;
      border-color: #3A3A3A;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .savings-bridge-icon {
      width: 32px;
      height: 32px;
      color: #777777;
      flex-shrink: 0;
      animation: none;
    }

    .dark .savings-bridge-icon {
      color: #999999;
    }

    .savings-bridge-content {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .savings-bridge-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #777777;
    }

    .dark .savings-bridge-label {
      color: #999999;
    }

    .savings-bridge-value {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #111111;
      line-height: 1;
    }

    .dark .savings-bridge-value {
      color: #F7F7F7;
    }

    .savings-bridge-percent {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 28px;
      padding: 0 10px;
      background: #666666;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 800;
      color: white;
      box-shadow: none;
    }

    .dark .savings-bridge-percent {
      background: #555555;
      box-shadow: none;
    }

    /* Clickable savings badge styles */
    .savings-bridge-clickable {
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .savings-bridge-clickable:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .dark .savings-bridge-clickable:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .savings-bridge-hint {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #888888;
      color: white;
      font-size: 12px;
      font-weight: 700;
      border-radius: 50%;
      box-shadow: none;
      animation: none;
    }

    /* Savings popup styles */
    .savings-popup {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      width: 320px;
      max-width: calc(100vw - 32px);
    }

    .savings-popup-content {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    }

    .dark .savings-popup-content {
      background: #1E1E1E;
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 10px 25px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .savings-popup-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F5F5F5;
      border: none;
      border-radius: 50%;
      color: #666;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .savings-popup-close:hover {
      background: #E5E5E5;
      color: #333;
    }

    .dark .savings-popup-close {
      background: #2A2A2A;
      color: #999;
    }

    .dark .savings-popup-close:hover {
      background: #333;
      color: #F7F7F7;
    }

    .savings-popup-title {
      font-size: 18px;
      font-weight: 700;
      color: #111;
      margin: 0 0 16px 0;
      padding-right: 24px;
    }

    .dark .savings-popup-title {
      color: #F7F7F7;
    }

    .savings-popup-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .savings-popup-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      color: #555;
      line-height: 1.4;
    }

    .dark .savings-popup-list li {
      color: #C7C7C7;
    }

    .savings-popup-icon {
      font-size: 18px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #F97316;
    }

    .dark .savings-popup-icon {
      color: #FDBA74;
    }

    /* Popup animations */
    .savings-popup-animate-in {
      animation: popupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .savings-popup-animate-out {
      animation: popupSlideOut 0.3s ease-out forwards;
    }

    @keyframes popupSlideIn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    @keyframes popupSlideOut {
      0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.95);
      }
    }

    /* ========================================
       HEADER & NAVIGATION
       ======================================== */
    .site-header {
      position: relative;
      top: 0;
      z-index: 40;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      /* Only transition specific properties - not backdrop-filter */
      transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      /* GPU acceleration for stable layer */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* Desktop (≥1024px): Sticky header - stays in flow, sticks when scrolling */
    @media (min-width: 1024px) {
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        transition: box-shadow 0.2s ease;
      }

      /* Shadow when scrolled - applied by sticky_header_controller.js */
      .site-header.header-scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .dark .site-header.header-scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }
    }

    /* Mobile/Tablet: normal position (scrolls with page) */
    @media (max-width: 1023px) {
      .site-header {
        position: relative !important;
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .dark .site-header {
        background: #0B0B0B !important;
      }
    }

    .dark .site-header {
      background: rgba(11, 11, 11, 0.85);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 500;
      color: #555555;
      text-decoration: none;
      border-radius: 10px;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dark .nav-link {
      color: #C7C7C7;
    }

    .nav-link:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #111111;
      transform: translateY(-1px);
    }

    .dark .nav-link:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #F7F7F7;
    }

    .nav-link.active {
      background: rgba(0, 0, 0, 0.08);
      color: #111111;
      font-weight: 600;
    }

    .dark .nav-link.active {
      background: rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
    }

    /* Hamburger icon - perfect alignment */
    .hamburger {
      width: 28px;
      height: 20px;
      position: relative;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .hamburger span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: #111111;
      border-radius: 2px;
      opacity: 1;
      left: 0;
      /* Smoother spring-like animation */
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                  opacity 0.2s ease-out,
                  top 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                  bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      transform-origin: center center;
    }

    .dark .hamburger span {
      background: #F7F7F7;
    }

    .hamburger span:nth-child(1) {
      top: 2px;
    }

    .hamburger span:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

    .hamburger span:nth-child(3) {
      bottom: 2px;
    }

    /* Open state - elegant X transformation */
    .hamburger.menu-open span:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    .hamburger.menu-open span:nth-child(2) {
      opacity: 0;
      transform: translateY(-50%) scaleX(0);
    }

    .hamburger.menu-open span:nth-child(3) {
      bottom: auto;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }

    /* Mobile menu overlay - full-screen fixed overlay */
    .mobile-menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: #FFFFFF;
      z-index: 9999;
      overflow: hidden;
      /* Slide + fade animation */
      transform: translateX(100%);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                  opacity 0.25s ease-out;
    }

    .mobile-menu-overlay.opacity-100 {
      transform: translateX(0);
      opacity: 1;
    }

    .dark .mobile-menu-overlay {
      background: #0B0B0B;
    }

    /* Staggered menu items animation */
    .mobile-menu-link {
      display: block;
      padding: 14px 20px;
      font-size: 17px;
      font-weight: 500;
      color: #111111;
      text-decoration: none;
      border-radius: 12px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      /* Initial state for stagger animation */
      opacity: 0;
      transform: translateX(20px);
    }

    .mobile-menu-overlay.opacity-100 .mobile-menu-link {
      opacity: 1;
      transform: translateX(0);
    }

    /* Staggered delays for each menu item */
    .mobile-menu-link:nth-child(1) { transition-delay: 0.05s; }
    .mobile-menu-link:nth-child(2) { transition-delay: 0.1s; }
    .mobile-menu-link:nth-child(3) { transition-delay: 0.15s; }
    .mobile-menu-link:nth-child(4) { transition-delay: 0.2s; }
    .mobile-menu-link:nth-child(5) { transition-delay: 0.25s; }
    .mobile-menu-link:nth-child(6) { transition-delay: 0.3s; }

    .dark .mobile-menu-link {
      color: #F7F7F7;
    }

    .mobile-menu-link:active {
      background: rgba(0, 0, 0, 0.06);
      transform: scale(0.98);
    }

    .dark .mobile-menu-link:active {
      background: rgba(255, 255, 255, 0.1);
    }

    /* PREMIUM CTA BUTTON - APPLE-STYLE CONFIDENT PILL */
    .btn-primary-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      /* Apple-style proportions: substantial but elegant */
      padding: 15px 48px;
      width: 100%;
      max-width: 480px;
      /* Typography - confident and clear */
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.4;
      white-space: nowrap;
      color: #FFFFFF;
      /* Warmer red-orange gradient with shimmer animation */
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 25%, #F97316 50%, #EA580C 75%, #DC2626 100%);
      background-size: 200% 200%;
      animation: shimmerOrange 6s ease-in-out infinite;
      border: none;
      border-radius: 9999px;
      /* Soft Apple-style shadow */
      box-shadow:
        0 2px 8px rgba(239, 68, 68, 0.18),
        0 1px 3px rgba(220, 38, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      text-decoration: none;
      /* Mobile touch optimization */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      -webkit-touch-callout: none;
      user-select: none;
    }

    .btn-primary-cta:hover {
      box-shadow:
        0 4px 14px rgba(239, 68, 68, 0.25),
        0 2px 6px rgba(220, 38, 38, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }

    .btn-primary-cta:active {
      transform: translateY(0) scale(0.99);
      box-shadow:
        0 1px 4px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* Very subtle glow (minimal) */
    .btn-primary-cta::before {
      content: '';
      position: absolute;
      inset: -2px;
      background: radial-gradient(circle at center, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
      filter: blur(8px);
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: -1;
      border-radius: 9999px;
    }

    .btn-primary-cta:hover::before {
      opacity: 0.6;
    }

    /* Arrow icon - proportional to text */
    .btn-primary-cta svg {
      width: 20px;
      height: 20px;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }

    .btn-primary-cta:hover svg {
      transform: translateX(3px);
    }

    /* Mobile: full width with substantial tap target */
    @media (max-width: 640px) {
      .btn-primary-cta {
        width: 100%;
        max-width: none;
        font-size: 17px;
        padding: 16px 36px;
      }
    }

    /* Micro-interaction: button press */
    .btn-press {
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-press:active {
      transform: scale(0.98);
    }

    /* ========================================
       HERO MINIMAL - Clean, chat-focused design
       ======================================== */

    .hero-section-minimal {
      padding: 32px 0 48px;
    }

    @media (min-width: 640px) {
      .hero-section-minimal {
        padding: 48px 0 64px;
      }
    }

    @media (min-width: 1024px) {
      .hero-section-minimal {
        padding: 64px 0 80px;
      }
    }

    .hero-minimal-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;
    }

    /* Headline */
    .hero-minimal-headline {
      font-family: 'Rubik', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.2;
      color: #111111;
      margin-bottom: 28px;
      letter-spacing: -0.02em;
      animation: heroFadeIn 0.6s ease-out forwards;
    }

    .dark .hero-minimal-headline {
      color: #F7F7F7;
    }

    @media (min-width: 375px) {
      .hero-minimal-headline {
        font-size: 2.25rem;
      }
    }

    @media (min-width: 640px) {
      .hero-minimal-headline {
        font-size: 2.75rem;
        margin-bottom: 32px;
      }
    }

    @media (min-width: 1024px) {
      .hero-minimal-headline {
        font-size: 3.25rem;
        margin-bottom: 40px;
      }
    }

    @keyframes heroFadeIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Input wrapper */
    .hero-minimal-input-wrapper {
      margin-bottom: 20px;
      animation: heroFadeIn 0.6s ease-out 0.15s forwards;
      opacity: 0;
    }

    /* Fake input (button that looks like CTA) */
    .hero-minimal-input {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 16px 18px;
      background: #FFFFFF;
      border: 2px solid #FF6B00;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 20px rgba(255, 107, 0, 0.15), 0 0 0 1px rgba(255, 107, 0, 0.05);
      text-align: left;
      animation: ctaPulse 2s ease-in-out infinite;
    }

    @keyframes ctaPulse {
      0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 107, 0, 0.15), 0 0 0 1px rgba(255, 107, 0, 0.05);
      }
      50% {
        box-shadow: 0 4px 30px rgba(255, 107, 0, 0.25), 0 0 0 3px rgba(255, 107, 0, 0.1);
      }
    }

    @keyframes ctaPulseDark {
      0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 107, 0, 0.25), 0 0 0 1px rgba(255, 107, 0, 0.1);
      }
      50% {
        box-shadow: 0 4px 30px rgba(255, 107, 0, 0.4), 0 0 0 3px rgba(255, 107, 0, 0.15);
      }
    }

    .dark .hero-minimal-input {
      animation: ctaPulseDark 2s ease-in-out infinite;
      background: linear-gradient(135deg, #1A1A1A 0%, #252525 100%);
      border-color: #FF6B00;
      box-shadow: 0 4px 20px rgba(255, 107, 0, 0.3), 0 0 0 1px rgba(255, 107, 0, 0.1);
    }

    .hero-minimal-input:hover {
      border-color: #FF8C00;
      box-shadow: 0 6px 30px rgba(255, 107, 0, 0.4), 0 0 0 2px rgba(255, 107, 0, 0.2);
      transform: translateY(-2px);
      animation: none;
    }

    .hero-minimal-input:focus {
      outline: none;
      border-color: #FF8C00;
      box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.2), 0 6px 30px rgba(255, 107, 0, 0.4);
      animation: none;
    }

    .hero-minimal-input-icon {
      flex-shrink: 0;
      color: #FF6B00;
    }

    .dark .hero-minimal-input-icon {
      color: #FF8C00;
    }

    /* Chat icon on the right - indicates clickable action */
    .hero-minimal-chat-icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
      border-radius: 10px;
      color: white;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .hero-minimal-chat-icon:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
    }

    .dark .hero-minimal-chat-icon {
      background: linear-gradient(135deg, #FF8533 0%, #FFA366 100%);
    }

    .hero-minimal-input-placeholder {
      flex: 1;
      font-size: 15px;
      color: #666666;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dark .hero-minimal-input-placeholder {
      color: #CCCCCC;
    }

    @media (min-width: 640px) {
      .hero-minimal-input {
        padding: 18px 20px;
      }

      .hero-minimal-input-placeholder {
        font-size: 16px;
      }
    }

    /* Typing animation cursor */
    .hero-minimal-input-placeholder::after,
    .chat-prompt-input-placeholder::after {
      content: '|';
      animation: typing-cursor-blink 1s step-end infinite;
      color: #FF6B00;
      font-weight: 400;
      margin-left: 2px;
    }

    .dark .hero-minimal-input-placeholder::after,
    .dark .chat-prompt-input-placeholder::after {
      color: #FF8533;
    }

    @keyframes typing-cursor-blink {
      50% { opacity: 0; }
    }

    /* Free badge inside input (deprecated - kept for backwards compatibility) */
    .hero-minimal-free-badge {
      flex-shrink: 0;
      padding: 6px 12px;
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: white;
      font-size: 12px;
      font-weight: 600;
      border-radius: 20px;
      letter-spacing: 0.02em;
    }

    @media (min-width: 640px) {
      .hero-minimal-free-badge {
        font-size: 13px;
        padding: 6px 14px;
      }
    }

    /* Example hint */
    .hero-minimal-hint {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #888888;
      animation: heroFadeIn 0.6s ease-out 0.3s forwards;
      opacity: 0;
    }

    .dark .hero-minimal-hint {
      color: #777777;
    }

    .hero-minimal-hint-icon {
      font-size: 16px;
    }

    .hero-minimal-hint-text {
      font-style: italic;
    }

    @media (min-width: 640px) {
      .hero-minimal-hint {
        font-size: 15px;
      }
    }

    /* Search methods section */
    .hero-search-methods {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 107, 0, 0.15);
      animation: heroFadeIn 0.6s ease-out 0.3s forwards;
      opacity: 0;
    }

    .dark .hero-search-methods {
      border-top-color: rgba(255, 107, 0, 0.2);
    }

    .hero-search-methods-label {
      font-size: 13px;
      font-weight: 600;
      color: #FF6B00;
      margin-bottom: 16px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .dark .hero-search-methods-label {
      color: #FF8C00;
    }

    .hero-search-methods-row {
      display: flex;
      justify-content: center;
      gap: 24px;
    }

    .hero-search-method {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: rgba(255, 107, 0, 0.08);
      border-radius: 12px;
      border: 1px solid rgba(255, 107, 0, 0.15);
      transition: all 0.2s ease;
    }

    .hero-search-method:hover {
      background: rgba(255, 107, 0, 0.12);
      border-color: rgba(255, 107, 0, 0.25);
      transform: translateY(-2px);
    }

    .dark .hero-search-method {
      background: rgba(255, 107, 0, 0.1);
      border-color: rgba(255, 107, 0, 0.2);
    }

    .hero-search-method-icon {
      font-size: 28px;
    }

    .hero-search-method-label {
      font-size: 12px;
      font-weight: 600;
      color: #333333;
      letter-spacing: 0.01em;
      text-align: center;
    }

    .dark .hero-search-method-label {
      color: #E5E5E5;
    }

    @media (min-width: 640px) {
      .hero-search-methods {
        margin-top: 48px;
        padding-top: 40px;
      }

      .hero-search-methods-label {
        font-size: 14px;
        margin-bottom: 20px;
      }

      .hero-search-methods-row {
        gap: 48px;
      }

      .hero-search-method-icon {
        font-size: 32px;
      }

      .hero-search-method-label {
        font-size: 13px;
      }
    }

    /* Scroll indicator - visual hint to scroll down */
    .hero-scroll-indicator {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 40px;
      padding: 12px 20px;
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      transition: opacity 0.2s ease;
      animation: heroFadeIn 0.6s ease-out 0.45s forwards;
      opacity: 0;
    }

    .hero-scroll-indicator:hover {
      opacity: 0.8;
    }

    .hero-scroll-text {
      font-size: 12px;
      font-weight: 600;
      color: #FF6B00;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .dark .hero-scroll-text {
      color: #FF8C00;
    }

    .hero-scroll-arrow {
      color: #FF6B00;
      animation: scrollArrowBounce 1.5s ease-in-out infinite;
    }

    @keyframes scrollArrowBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    .dark .hero-scroll-arrow {
      color: #FF8C00;
    }

    @media (min-width: 640px) {
      .hero-scroll-indicator {
        margin-top: 48px;
      }

      .hero-scroll-text {
        font-size: 13px;
      }
    }

    /* Subtle pulse animation for savings badge */
    .animate-pulse-subtle {
      animation: pulse-subtle 2s ease-in-out infinite;
    }

    @keyframes pulse-subtle {
      0%, 100% {
        box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.25);
      }
      50% {
        box-shadow: 0 10px 25px -3px rgba(16, 185, 129, 0.4);
      }
    }

    /* ========================================
       HERO SECTION LAYOUT (Legacy)
       ======================================== */

    .hero-section {
      position: relative;
    }

    /* Hero container - max-width with consistent padding */
    .hero-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px 16px 32px;
    }

    @media (min-width: 640px) {
      .hero-container {
        padding: 32px 24px 48px;
      }
    }

    @media (min-width: 1024px) {
      .hero-container {
        padding: 48px 32px 64px;
      }
    }

    /* Hero row - 2 columns on desktop */
    .hero-row {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    @media (min-width: 1024px) {
      .hero-row {
        display: grid;
        grid-template-columns: 1fr 420px;
        gap: 48px;
        align-items: start;
      }
    }

    @media (min-width: 1280px) {
      .hero-row {
        grid-template-columns: 1fr 480px;
        gap: 64px;
      }
    }

    /* Hero text column */
    .hero-text {
      order: 1;
    }

    @media (min-width: 1024px) {
      .hero-text {
        order: 0;
      }
    }

    /* Hero badges */
    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    @media (min-width: 640px) {
      .hero-badges {
        gap: 12px;
      }
    }

    /* Hero left column (text + garage) */
    .hero-left {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    @media (min-width: 1024px) {
      .hero-left {
        gap: 40px;
      }
    }

    /* Hero garage in left column */
    .hero-garage {
      width: 100%;
      max-width: 480px;
    }

    @media (min-width: 1024px) {
      .hero-garage {
        max-width: 520px;
      }
    }

    /* Hero products side column (right) */
    .hero-products-side {
      order: -1;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }

    @media (min-width: 1024px) {
      .hero-products-side {
        order: 0;
        max-width: none;
        margin: 0;
      }
    }

    .hero-products-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .hero-products-title {
      font-family: 'Rubik', sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: #111111;
      margin-bottom: 8px;
    }

    .dark .hero-products-title {
      color: #F7F7F7;
    }

    @media (min-width: 768px) {
      .hero-products-title {
        font-size: 1.75rem;
      }
    }

    .hero-products-subtitle {
      font-size: 1rem;
      color: #666666;
    }

    .dark .hero-products-subtitle {
      color: #9A9A9A;
    }

    /* Hero headline responsive sizing */
    .hero-headline {
      font-size: 2.25rem; /* 36px - big and bold for mobile */
      line-height: 1.15;
      margin-bottom: 1rem;
      font-weight: 700;
      animation: headlineReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      opacity: 0;
    }

    @keyframes headlineReveal {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Small phones (375px+) */
    @media (min-width: 375px) {
      .hero-headline {
        font-size: 2.5rem; /* 40px */
        line-height: 1.1;
        margin-bottom: 1.125rem;
      }
    }

    @media (min-width: 768px) {
      .hero-headline {
        font-size: 2.25rem;
        line-height: 1.15;
        margin-bottom: 0.875rem;
      }
    }

    @media (min-width: 1024px) {
      .hero-headline {
        font-size: 3.75rem;
        line-height: 1.1;
        margin-bottom: 1rem;
      }
    }

    /* Hero subheadline responsive sizing */
    .hero-subheadline {
      font-size: 1.0625rem; /* 17px - slightly larger */
      line-height: 1.5;
      margin-bottom: 1rem;
    }

    @media (min-width: 375px) {
      .hero-subheadline {
        font-size: 1.125rem; /* 18px */
        line-height: 1.5;
        margin-bottom: 1.125rem;
      }
    }

    @media (min-width: 768px) {
      .hero-subheadline {
        font-size: 1.125rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
      }
    }

    @media (min-width: 1024px) {
      .hero-subheadline {
        font-size: 1.25rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
      }
    }

    /* Hero headline animations */
    @keyframes fadeInSlideUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes breatheGlow {
      0%, 100% {
        filter: brightness(1);
      }
      50% {
        filter: brightness(1.08);
      }
    }

    .headline-line-1 {
      animation: fadeInSlideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      opacity: 0;
    }

    .headline-line-2 {
      animation: fadeInSlideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
      opacity: 0;
    }

    /* Gradient accent for highlighted words */
    .text-gradient-accent {
      background: linear-gradient(135deg, #EF4444 0%, #F97316 50%, #DC2626 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation:
        accentReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards,
        breatheGlow 6s ease-in-out 1.3s infinite;
      position: relative;
      opacity: 0;
      transform: translateY(10px);
    }

    .dark .text-gradient-accent {
      background: linear-gradient(135deg, #F87171 0%, #FB923C 50%, #EF4444 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Accent text reveal animation */
    @keyframes accentReveal {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        filter: blur(4px);
      }
      60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    /* Value proposition text animation */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-value-text {
      animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
      opacity: 0;
    }

    /* Badge animations - sequential appearance */
    @keyframes badgeFadeIn {
      from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .badge-1 {
      animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
      opacity: 0;
    }

    .badge-2 {
      animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
      opacity: 0;
    }

    .badge-3 {
      animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
      opacity: 0;
    }

    /* ========================================
       STICKY MOBILE CTA
       ======================================== */
    .sticky-cta-mobile {
      position: fixed;
      /* Position ABOVE safe-area zone, not inside it */
      bottom: env(safe-area-inset-bottom, 0px);
      left: 0;
      right: 0;
      z-index: 50;
      /* Normal padding - no safe-area adjustment needed since we're above it */
      padding: 16px 20px;
      /* TRANSPARENT container - safe-area below us shows page background */
      background: transparent;
      border: none;
      /* Hidden by default */
      opacity: 0;
      pointer-events: none;
      /* GPU layer */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      /* Smooth fade animation */
      transition: opacity 0.25s ease-out;
    }

    .sticky-cta-mobile.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Sticky Chat Card - Modern gradient card style */
    .sticky-chat-card {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 16px;
      background: linear-gradient(135deg,
        rgba(60, 30, 40, 0.95) 0%,
        rgba(80, 35, 45, 0.95) 50%,
        rgba(50, 25, 35, 0.95) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
      /* Mobile touch optimization */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      -webkit-touch-callout: none;
      user-select: none;
    }

    .sticky-chat-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    .sticky-chat-card:active {
      transform: translateY(0);
    }

    /* Pulse animation for CTA visibility on mobile */
    .sticky-chat-card--pulse {
      animation: sticky-pulse 3s ease-in-out infinite;
    }

    @keyframes sticky-pulse {
      0%, 100% {
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(255, 255, 255, 0.05) inset;
      }
      50% {
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(255, 255, 255, 0.05) inset,
          0 0 20px rgba(249, 115, 22, 0.4);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .sticky-chat-card--pulse {
        animation: none;
      }
    }

    .sticky-chat-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg,
        #E94560 0%,
        #FF6B6B 50%,
        #F97316 100%
      );
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
    }

    .sticky-chat-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .sticky-chat-title {
      font-size: 15px;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 1.3;
    }

    .sticky-chat-subtitle {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.3;
    }

    /* Telegram Button - Contacts section */
    .telegram-btn {
      background-color: #4A8FD8 !important;
    }

    .telegram-btn:hover {
      background-color: #3F7CC4 !important;
    }

    @media (prefers-color-scheme: dark) {
      .telegram-btn {
        background-color: #5B9FED !important;
      }

      .telegram-btn:hover {
        background-color: #4A8FD8 !important;
      }
    }

    .dark .telegram-btn {
      background-color: #5B9FED !important;
    }

    .dark .telegram-btn:hover {
      background-color: #4A8FD8 !important;
    }

    /* Channel Chat Card - For contacts section */
    .channel-chat-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      background: linear-gradient(135deg,
        rgba(60, 30, 40, 0.95) 0%,
        rgba(80, 35, 45, 0.95) 50%,
        rgba(50, 25, 35, 0.95) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    }

    .channel-chat-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    .channel-chat-card:active {
      transform: translateY(0);
    }

    .channel-chat-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg,
        #E94560 0%,
        #FF6B6B 50%,
        #F97316 100%
      );
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
    }

    .channel-chat-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .channel-chat-title {
      font-size: 14px;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 1.3;
    }

    .channel-chat-subtitle {
      font-size: 11px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.3;
    }

    /* Hide completely on desktop (lg: 1024px+) */
    @media (min-width: 1024px) {
      .sticky-cta-mobile {
        display: none !important;
      }
    }

    /* Add bottom padding to body for sticky CTA on mobile (always visible now) */
    /* Must account for: CTA height (~80px) + safe-area below CTA */
    @media (max-width: 1023px) {
      body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* ========================================
       STEPS TIMELINE (How it works)
       ======================================== */
    .steps-timeline {
      position: relative;
      max-width: 600px;
      margin: 0 auto;
    }

    .step-item {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 32px;
      /* Initial hidden state for scroll animation */
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .step-item.scroll-reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .step-number {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
      color: white;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
      z-index: 2;
    }

    .step-content {
      flex: 1;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: #FAFAFA;
      border: 1px solid #E5E5E5;
      border-radius: 16px;
      padding: 20px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .step-content:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .dark .step-content {
      background: #141414;
      border-color: #2A2A2A;
    }

    .dark .step-content:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .step-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      transition: transform 0.2s ease;
    }

    .step-content:hover .step-icon {
      transform: scale(1.1);
    }

    .step-icon svg {
      width: 24px;
      height: 24px;
    }

    /* Icon colors */
    .step-icon--chat {
      background: rgba(59, 130, 246, 0.1);
      color: #3B82F6;
    }
    .dark .step-icon--chat {
      background: rgba(96, 165, 250, 0.15);
      color: #60A5FA;
    }

    .step-icon--tech {
      background: rgba(168, 85, 247, 0.1);
      color: #A855F7;
    }
    .dark .step-icon--tech {
      background: rgba(192, 132, 252, 0.15);
      color: #C084FC;
    }

    .step-icon--agree {
      background: rgba(34, 197, 94, 0.1);
      color: #22C55E;
    }
    .dark .step-icon--agree {
      background: rgba(134, 239, 172, 0.15);
      color: #86EFAC;
    }

    .step-icon--ship {
      background: rgba(249, 115, 22, 0.1);
      color: #F97316;
    }
    .dark .step-icon--ship {
      background: rgba(251, 146, 60, 0.15);
      color: #FB923C;
    }

    .step-icon--sms {
      background: rgba(236, 72, 153, 0.1);
      color: #EC4899;
    }
    .dark .step-icon--sms {
      background: rgba(244, 114, 182, 0.15);
      color: #F472B6;
    }

    .step-text {
      flex: 1;
    }

    .step-title {
      font-size: 18px;
      font-weight: 600;
      color: #111111;
      margin: 0 0 6px 0;
    }

    .dark .step-title {
      color: #F7F7F7;
    }

    .step-desc {
      font-size: 14px;
      line-height: 1.5;
      color: #666666;
      margin: 0;
    }

    .dark .step-desc {
      color: #A0A0A0;
    }

    /* Connector line between steps */
    .step-connector {
      position: absolute;
      left: 17px;
      top: 44px;
      width: 2px;
      height: calc(100% - 44px);
      background: linear-gradient(to bottom, #F97316, #E5E5E5 30%);
    }

    .dark .step-connector {
      background: linear-gradient(to bottom, #F97316, #2A2A2A 30%);
    }

    .step-item:last-child .step-connector {
      display: none;
    }

    /* Steps footer - no calls badge */
    .steps-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid #E5E5E5;
    }

    .dark .steps-footer {
      border-top-color: #2A2A2A;
    }

    .no-calls-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.2);
      border-radius: 100px;
    }

    .dark .no-calls-badge {
      background: rgba(134, 239, 172, 0.08);
      border-color: rgba(134, 239, 172, 0.2);
    }

    .no-calls-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(34, 197, 94, 0.15);
      border-radius: 50%;
      color: #22C55E;
    }

    .no-calls-icon svg {
      width: 18px;
      height: 18px;
    }

    .dark .no-calls-icon {
      background: rgba(134, 239, 172, 0.15);
      color: #86EFAC;
    }

    .no-calls-text {
      display: flex;
      flex-direction: column;
    }

    .no-calls-title {
      font-size: 15px;
      font-weight: 600;
      color: #22C55E;
    }

    .dark .no-calls-title {
      color: #86EFAC;
    }

    .no-calls-desc {
      font-size: 13px;
      color: #666666;
    }

    .dark .no-calls-desc {
      color: #A0A0A0;
    }

    .contact-option {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .contact-option-text {
      font-size: 14px;
      color: #666666;
    }

    .dark .contact-option-text {
      color: #A0A0A0;
    }

    .contact-phone {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: #111111;
      color: white;
      font-size: 14px;
      font-weight: 600;
      border-radius: 100px;
      text-decoration: none;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .contact-phone:hover {
      background: #333333;
      transform: scale(1.02);
    }

    .dark .contact-phone {
      background: #F7F7F7;
      color: #111111;
    }

    .dark .contact-phone:hover {
      background: #E5E5E5;
    }

    .contact-phone svg {
      width: 16px;
      height: 16px;
    }

    /* Process Features: Швидко, Точно, Без помилок */
    .process-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
      padding: 32px;
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.03), rgba(34, 197, 94, 0.03));
      border-radius: 24px;
      border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .dark .process-features {
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(34, 197, 94, 0.05));
      border-color: rgba(255, 255, 255, 0.06);
    }

    .process-feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px 16px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .dark .process-feature {
      background: rgba(255, 255, 255, 0.03);
    }

    .process-feature:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .dark .process-feature:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .process-feature-icon {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .process-feature-icon svg {
      width: 28px;
      height: 28px;
    }

    /* Fast - Orange/Yellow */
    .process-feature--fast .process-feature-icon {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      color: #D97706;
    }

    .dark .process-feature--fast .process-feature-icon {
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
      color: #FBBF24;
    }

    /* Accurate - Blue/Indigo */
    .process-feature--accurate .process-feature-icon {
      background: linear-gradient(135deg, #DBEAFE, #C7D2FE);
      color: #4F46E5;
    }

    .dark .process-feature--accurate .process-feature-icon {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
      color: #818CF8;
    }

    /* Error-free - Green */
    .process-feature--error-free .process-feature-icon {
      background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
      color: #059669;
    }

    .dark .process-feature--error-free .process-feature-icon {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
      color: #34D399;
    }

    .process-feature-title {
      font-size: 18px;
      font-weight: 700;
      color: #111111;
      margin-bottom: 12px;
    }

    .dark .process-feature-title {
      color: #F7F7F7;
    }

    .process-feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .process-feature-list li {
      font-size: 14px;
      color: #666666;
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .dark .process-feature-list li {
      color: #A0A0A0;
    }

    .process-feature-list li::before {
      content: "•";
      color: #22C55E;
      font-weight: bold;
      flex-shrink: 0;
    }

    .dark .process-feature-list li::before {
      color: #4ADE80;
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .step-item {
        gap: 12px;
        padding-bottom: 24px;
      }

      .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
      }

      .step-content {
        padding: 16px;
        gap: 12px;
      }

      .step-icon {
        width: 40px;
        height: 40px;
      }

      .step-icon svg {
        width: 20px;
        height: 20px;
      }

      .step-title {
        font-size: 16px;
      }

      .step-desc {
        font-size: 13px;
      }

      .step-connector {
        left: 15px;
        top: 40px;
        height: calc(100% - 40px);
      }

      .steps-footer {
        margin-top: 32px;
        padding-top: 24px;
      }

      .no-calls-badge {
        padding: 10px 16px;
        gap: 10px;
      }

      .no-calls-icon {
        width: 28px;
        height: 28px;
      }

      .no-calls-icon svg {
        width: 16px;
        height: 16px;
      }

      .no-calls-title {
        font-size: 14px;
      }

      .no-calls-desc {
        font-size: 12px;
      }

      .contact-option {
        flex-direction: column;
        gap: 6px;
      }

      .contact-phone {
        padding: 10px 16px;
      }

      /* Process features mobile */
      .process-features {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
        margin-top: 32px;
      }

      .process-feature {
        padding: 20px 16px;
      }

      .process-feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
      }

      .process-feature-icon svg {
        width: 24px;
        height: 24px;
      }

      .process-feature-title {
        font-size: 16px;
        margin-bottom: 8px;
      }

      .process-feature-list li {
        font-size: 13px;
      }
    }

    /* ========================================
       CHAT DEMO COMPONENT (legacy, can be removed)
       ======================================== */
    .chat-demo-container {
      position: relative;
      max-width: 420px;
      margin: 0 auto;
      background: #FFFFFF;
      border: 1px solid #E5E5E5;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .dark .chat-demo-container {
      background: #141414;
      border-color: #2A2A2A;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .chat-demo-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: #FAFAFA;
      border-bottom: 1px solid #EEEEEE;
    }

    .dark .chat-demo-header {
      background: #1A1A1A;
      border-bottom-color: #2A2A2A;
    }

    .chat-demo-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .chat-demo-avatar svg {
      width: 22px;
      height: 22px;
      color: white;
    }

    .chat-demo-info {
      flex: 1;
    }

    .chat-demo-name {
      font-size: 15px;
      font-weight: 600;
      color: #111111;
    }

    .dark .chat-demo-name {
      color: #F7F7F7;
    }

    .chat-demo-status {
      font-size: 13px;
      color: #16A34A;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chat-demo-status::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #16A34A;
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .chat-demo-body {
      padding: 20px;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Chat messages */
    .chat-message {
      display: flex;
      gap: 10px;
      max-width: 85%;
      opacity: 0;
      transform: translateY(10px);
      animation: messageAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .chat-message.from-user {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .chat-message.from-ai {
      align-self: flex-start;
    }

    @keyframes messageAppear {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Staggered animation delays */
    .chat-message:nth-child(1) { animation-delay: 0.3s; }
    .chat-message:nth-child(2) { animation-delay: 1.2s; }
    .chat-message:nth-child(3) { animation-delay: 2.4s; }
    .chat-message:nth-child(4) { animation-delay: 3.6s; }

    .chat-bubble {
      padding: 12px 16px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.5;
    }

    .chat-message.from-user .chat-bubble {
      background: linear-gradient(135deg, #4B5563 0%, #374151 100%);
      color: white;
      border-bottom-right-radius: 6px;
    }

    .chat-message.from-ai .chat-bubble {
      background: #F5F5F5;
      color: #333333;
      border-bottom-left-radius: 6px;
    }

    .dark .chat-message.from-ai .chat-bubble {
      background: #252525;
      color: #E5E5E5;
    }

    /* Typing indicator */
    .typing-indicator {
      display: flex;
      gap: 4px;
      padding: 12px 16px;
      opacity: 0;
      animation: messageAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .typing-indicator span {
      width: 8px;
      height: 8px;
      background: #AAAAAA;
      border-radius: 50%;
      animation: typingBounce 1.4s ease-in-out infinite;
    }

    .typing-indicator span:nth-child(1) { animation-delay: 0s; }
    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-6px); }
    }

    .dark .typing-indicator span {
      background: #666666;
    }

    /* Result card in chat */
    .chat-result-card {
      background: #FAFAFA;
      border: 1px solid #EEEEEE;
      border-radius: 12px;
      padding: 14px;
      margin-top: 8px;
    }

    .dark .chat-result-card {
      background: #1E1E1E;
      border-color: #333333;
    }

    .chat-result-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #EEEEEE;
    }

    .dark .chat-result-item {
      border-bottom-color: #333333;
    }

    .chat-result-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .chat-result-item:first-child {
      padding-top: 0;
    }

    .chat-result-name {
      font-size: 13px;
      color: #555555;
    }

    .dark .chat-result-name {
      color: #AAAAAA;
    }

    .chat-result-price {
      font-size: 14px;
      font-weight: 600;
      color: #111111;
    }

    .dark .chat-result-price {
      color: #F7F7F7;
    }

    .chat-result-savings {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 10px;
      padding: 6px 10px;
      background: rgba(22, 163, 74, 0.1);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      color: #16A34A;
    }

    .dark .chat-result-savings {
      background: rgba(134, 239, 172, 0.15);
      color: #86EFAC;
    }

    .chat-result-verified {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 6px 10px;
      background: rgba(34, 197, 94, 0.1);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      color: #22C55E;
    }

    .dark .chat-result-verified {
      background: rgba(134, 239, 172, 0.15);
      color: #86EFAC;
    }

    /* Quick Actions in Demo */
    .chat-demo-quick-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0 12px 12px;
    }

    .chat-demo-quick-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: #F3F4F6;
      border: 1px solid #E5E7EB;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 500;
      color: #4B5563;
      transition: all 0.15s ease;
    }

    .dark .chat-demo-quick-btn {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: #D1D5DB;
    }

    .chat-demo-quick-btn--active {
      background: #F97316;
      border-color: #F97316;
      color: white;
    }

    .dark .chat-demo-quick-btn--active {
      background: #F97316;
      border-color: #F97316;
      color: white;
    }

    /* Demo chat formatted bubble (for lists) */
    .chat-bubble--formatted p {
      margin: 0 0 8px 0;
    }

    .chat-bubble--formatted p:last-child {
      margin-bottom: 0;
    }

    .chat-bubble--formatted ol {
      margin: 8px 0;
      padding-left: 20px;
    }

    .chat-bubble--formatted li {
      margin: 4px 0;
    }

    .chat-bubble--formatted strong {
      font-weight: 600;
    }

    /* Demo processing state */
    .chat-demo-processing p {
      margin: 8px 0 0 0;
    }

    .chat-demo-car-info {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: rgba(34, 197, 94, 0.1);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      color: #22C55E;
    }

    .dark .chat-demo-car-info {
      background: rgba(134, 239, 172, 0.15);
      color: #86EFAC;
    }

    /* ========================================
       CHAT WIDGET - Apple/Zalando Style
       ======================================== */

    /* Container */
    .chat-widget-container {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .chat-widget-container.hidden {
      display: none;
    }

    /* Backdrop (mobile only) */
    .chat-widget-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.3s ease-out;
      z-index: 1;
    }

    .chat-widget-backdrop.is-visible {
      opacity: 1;
    }

    /* Panel */
    .chat-widget-panel {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-height: 85vh;
      max-height: 85dvh;
      background: #FFFFFF;
      border-radius: 24px 24px 0 0;
      box-shadow:
        0 -4px 30px rgba(0, 0, 0, 0.12),
        0 -1px 8px rgba(0, 0, 0, 0.06);
      transform: translateY(100px);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                  opacity 0.3s ease-out;
      overflow: hidden;
    }

    .dark .chat-widget-panel {
      background: #141414;
      box-shadow:
        0 -4px 30px rgba(0, 0, 0, 0.5),
        0 -1px 8px rgba(0, 0, 0, 0.3);
    }

    .chat-widget-panel.is-visible {
      transform: translateY(0);
      opacity: 1;
    }

    /* Desktop styles */
    @media (min-width: 1024px) {
      .chat-widget-container {
        padding: 20px;
      }

      .chat-widget-backdrop {
        display: none;
      }

      .chat-widget-panel {
        width: 380px;
        max-width: 380px;
        max-height: 70vh;
        border-radius: 20px;
        transform: translateY(20px) scale(0.95);
      }

      .chat-widget-panel.is-visible {
        transform: translateY(0) scale(1);
      }
    }

    /* Header */
    .chat-widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #EEEEEE;
      background: #FAFAFA;
      flex-shrink: 0;
    }

    .dark .chat-widget-header {
      background: #1A1A1A;
      border-bottom-color: #2A2A2A;
    }

    .chat-widget-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }

    .chat-widget-title {
      font-size: 16px;
      font-weight: 600;
      color: #111111;
      line-height: 1.3;
    }

    .dark .chat-widget-title {
      color: #F7F7F7;
    }

    .chat-widget-subtitle {
      font-size: 13px;
      color: #666666;
      line-height: 1.3;
    }

    .dark .chat-widget-subtitle {
      color: #AAAAAA;
    }

    .chat-widget-close {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #EEEEEE;
      color: #666666;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-widget-close:hover {
      background: #E5E5E5;
      color: #333333;
    }

    .dark .chat-widget-close {
      background: #2A2A2A;
      color: #AAAAAA;
    }

    .dark .chat-widget-close:hover {
      background: #333333;
      color: #F7F7F7;
    }

    /* Language Toggle Button */
    .chat-widget-language {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
      color: white;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 600;
    }

    .chat-widget-language:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .chat-widget-language.is-russian {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    }

    .chat-widget-language.is-russian:hover {
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .dark .chat-widget-language {
      background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    }

    .dark .chat-widget-language.is-russian {
      background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
    }

    /* Messages Container */
    .chat-widget-messages {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px;
      padding-bottom: calc(20px + var(--composer-h, 0px) + var(--keyboard-inset, 0px));
      display: flex;
      flex-direction: column;
      gap: 20px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      position: relative;
    }

    /* Individual Message - override demo styles completely */
    .chat-widget-messages .chat-message {
      display: flex;
      gap: 10px;
      max-width: 85%;
      /* GPU-accelerated properties for smooth animations */
      will-change: opacity, transform;
      /* Fully reset animation from demo chat .chat-message rule */
      animation: none;
    }

    /* =====================================================
       CHAT MESSAGE ENTRANCE ANIMATION
       - Clearly visible fade + slide up effect
       - 220ms duration for smooth, noticeable movement
       - 12px vertical slide for clear visibility
       ===================================================== */

    /* Initial state: invisible and offset - MUST be separate from animation */
    .chat-widget-messages .chat-message.animate-in {
      opacity: 0;
      transform: translateY(12px);
    }

    /* Animation trigger class - applied after reflow */
    .chat-widget-messages .chat-message.animate-in.is-animating {
      animation: chatMessageSlideIn 220ms ease-out forwards;
    }

    /* Client messages slide from right with horizontal offset */
    .chat-widget-messages .chat-message.from-client.animate-in {
      opacity: 0;
      transform: translateY(12px) translateX(8px);
    }

    .chat-widget-messages .chat-message.from-client.animate-in.is-animating {
      animation: chatMessageSlideInClient 220ms ease-out forwards;
    }

    @keyframes chatMessageSlideIn {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes chatMessageSlideInClient {
      0% {
        opacity: 0;
        transform: translateY(12px) translateX(8px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
      }
    }

    /* Final state after animation - ensure visibility */
    .chat-widget-messages .chat-message.animate-complete {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }

    /* Typing indicator animation */
    #typing-indicator {
      opacity: 0;
      transform: translateY(12px);
    }

    #typing-indicator.is-animating {
      animation: chatMessageSlideIn 220ms ease-out forwards;
    }

    .chat-message.from-client {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .chat-message.from-assistant {
      align-self: flex-start;
    }

    .chat-message-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
      margin-top: 4px;
    }

    .chat-message-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 85%;
    }

    .chat-bubble {
      padding: 12px 16px;
      border-radius: 18px;
      font-size: 15px;
      line-height: 1.5;
      word-wrap: break-word;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      width: fit-content;
      max-width: 100%;
    }

    .chat-message.from-client .chat-bubble {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: white;
      border-bottom-right-radius: 6px;
    }

    .chat-message.from-assistant .chat-bubble {
      background: #F5F5F5;
      color: #1F2937;
      border-bottom-left-radius: 6px;
      font-size: 17px;
      font-weight: 500;
    }

    .dark .chat-message.from-assistant .chat-bubble {
      background: #252525;
      color: #F3F4F6;
      font-size: 17px;
      font-weight: 500;
    }

    .chat-message-time {
      font-size: 11px;
      color: #999999;
      padding: 0 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chat-message.from-client .chat-message-time {
      text-align: right;
      justify-content: flex-end;
    }

    .dark .chat-message-time {
      color: #666666;
    }

    .chat-engineer-badge {
      font-size: 10px;
      font-weight: 500;
      color: #16A34A;
      background: rgba(22, 163, 74, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .dark .chat-engineer-badge {
      color: #86EFAC;
      background: rgba(134, 239, 172, 0.15);
    }

    /* Typing Indicator - compact bubble */
    #typing-indicator .chat-bubble {
      padding: 8px 14px !important;
      min-height: auto !important;
      max-width: fit-content !important;
      white-space: normal;  /* Override pre-wrap to fix oversized bubble from template literals */
    }

    .chat-typing-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
    }

    .chat-typing-text {
      font-size: 13px;
      color: #666666;
      transition: opacity 0.15s ease;
    }

    .dark .chat-typing-text {
      color: #999999;
    }

    .chat-typing-dots {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .chat-typing-dots span {
      width: 5px;
      height: 5px;
      background: #AAAAAA;
      border-radius: 50%;
      animation: typingBounce 1.4s ease-in-out infinite;
    }

    .chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
    .chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

    .dark .chat-typing-dots span {
      background: #666666;
    }

    /* Loading State - absolutely positioned to avoid layout shift */
    .chat-loading-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: inherit;
      z-index: 5;
      opacity: 1;
      transition: opacity 0.2s ease;
    }

    .chat-loading-wrapper.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .chat-message-loading {
      display: flex;
      justify-content: center;
      padding: 20px;
    }

    .chat-message-loading.hidden {
      display: none;
    }

    /* Follow-up Actions (shown after quick action response) */
    .chat-followup-actions {
      padding: 16px 20px;
      margin-top: 8px;
    }

    .chat-followup-label {
      font-size: 12px;
      font-weight: 500;
      color: #666666;
      margin-bottom: 10px;
    }

    .dark .chat-followup-label {
      color: #999999;
    }

    .chat-followup-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chat-followup-btn {
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 500;
      color: #4A8FD8;
      background: rgba(74, 143, 216, 0.1);
      border: 1px solid rgba(74, 143, 216, 0.3);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .dark .chat-followup-btn {
      color: #7DD3FC;
      background: rgba(125, 211, 252, 0.1);
      border-color: rgba(125, 211, 252, 0.3);
    }

    .chat-followup-btn:hover {
      background: rgba(74, 143, 216, 0.2);
      border-color: rgba(74, 143, 216, 0.5);
      transform: translateY(-1px);
    }

    .dark .chat-followup-btn:hover {
      background: rgba(125, 211, 252, 0.2);
      border-color: rgba(125, 211, 252, 0.5);
    }

    .chat-followup-btn:active {
      transform: translateY(0);
    }

    /* Order Confirmation Inline Buttons */
    .chat-inline-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px 20px;
      margin: 8px 0;
      animation: fadeIn 0.3s ease-out;
    }

    .chat-inline-buttons.fade-out {
      animation: fadeOut 0.3s ease-out forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

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

    .chat-inline-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 20px;
      border: 1px solid;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .chat-inline-btn.primary {
      color: #FFFFFF;
      background: #4A8FD8;
      border-color: #4A8FD8;
    }

    .chat-inline-btn.primary:hover:not(:disabled) {
      background: #3A7FC8;
      border-color: #3A7FC8;
      transform: translateY(-1px);
    }

    .dark .chat-inline-btn.primary {
      background: #7DD3FC;
      border-color: #7DD3FC;
      color: #0F172A;
    }

    .dark .chat-inline-btn.primary:hover:not(:disabled) {
      background: #67C3EC;
      border-color: #67C3EC;
    }

    .chat-inline-btn.secondary {
      color: #666666;
      background: transparent;
      border-color: #DDDDDD;
    }

    .chat-inline-btn.secondary:hover:not(:disabled) {
      background: #F5F5F5;
      border-color: #CCCCCC;
      transform: translateY(-1px);
    }

    .dark .chat-inline-btn.secondary {
      color: #AAAAAA;
      border-color: #444444;
    }

    .dark .chat-inline-btn.secondary:hover:not(:disabled) {
      background: #2A2A2A;
      border-color: #555555;
    }

    .chat-inline-btn:disabled,
    .chat-inline-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;
    }

    .chat-inline-btn.loading {
      position: relative;
      color: transparent !important;
    }

    .chat-inline-btn.loading::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      border: 2px solid currentColor;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 0.8s linear infinite;
    }

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

    /* Input Area */
    .chat-widget-input-area {
      padding: 16px 20px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      border-top: 1px solid #EEEEEE;
      background: #FFFFFF;
      flex-shrink: 0;
    }

    .dark .chat-widget-input-area {
      background: #141414;
      border-top-color: #2A2A2A;
    }

    .chat-widget-form {
      display: flex;
      align-items: flex-end;
      gap: 12px;
    }

    .chat-input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #F7F7F7;
      border: 1px solid #E5E5E5;
      border-radius: 24px;
      padding: 10px 10px 10px 18px;
      transition: all 0.2s ease;
    }

    .chat-input-wrapper:focus-within {
      background: #FFFFFF;
      border-color: #F97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    }

    .dark .chat-input-wrapper {
      background: #1E1E1E;
      border-color: #333333;
    }

    .dark .chat-input-wrapper:focus-within {
      background: #252525;
      border-color: #F97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
    }

    .chat-widget-textarea {
      flex: 1;
      min-height: 24px;
      max-height: 120px;
      padding: 4px 0;
      background: transparent;
      border: none;
      outline: none;
      resize: none;
      font-family: inherit;
      font-size: 15px;
      line-height: 1.5;
      color: #1A1A1A;
    }

    .chat-widget-textarea::placeholder {
      color: #9CA3AF;
      font-style: normal;
    }

    .dark .chat-widget-textarea {
      color: #F5F5F5;
    }

    .dark .chat-widget-textarea::placeholder {
      color: #6B7280;
    }

    .chat-widget-send {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: white;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .chat-widget-send:hover:not(:disabled) {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    .chat-widget-send:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Attachment Button (Paperclip) */
    .chat-widget-attach,
    .chat-widget-attach-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: transparent;
      color: #6B7280;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .chat-widget-attach:hover {
      color: #EF4444;
      background: rgba(239, 68, 68, 0.1);
    }

    .chat-widget-attach:active {
      transform: scale(0.95);
    }

    .dark .chat-widget-attach {
      color: #9CA3AF;
    }

    .dark .chat-widget-attach:hover {
      color: #EF4444;
      background: rgba(239, 68, 68, 0.15);
    }

    /* Attachment Preview Area */
    .chat-attachment-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 12px;
      background: #F9FAFB;
      border-bottom: 1px solid #E5E7EB;
    }

    .chat-attachment-preview.hidden {
      display: none;
    }

    .dark .chat-attachment-preview {
      background: #1E1E1E;
      border-color: #333333;
    }

    .attachment-preview-item {
      position: relative;
      width: 64px;
      height: 64px;
      border-radius: 8px;
      overflow: hidden;
      background: #E5E7EB;
    }

    .attachment-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .attachment-preview-item.is-pdf {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: #FEE2E2;
      color: #DC2626;
    }

    .dark .attachment-preview-item.is-pdf {
      background: rgba(239, 68, 68, 0.15);
      color: #F87171;
    }

    .attachment-filename {
      font-size: 9px;
      max-width: 56px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .attachment-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .attachment-preview-item:hover .attachment-remove {
      opacity: 1;
    }

    /* Mobile: always show remove button */
    @media (max-width: 768px) {
      .attachment-remove {
        opacity: 1;
      }
    }

    /* Audio Preview Player - for voice messages before sending */
    .attachment-preview-item.is-audio-player {
      width: auto;
      min-width: 160px;
      max-width: 200px;
      height: auto;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
    }

    .attachment-preview-item.is-audio-player audio {
      display: none;
    }

    .audio-preview-play {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: white;
      color: #F97316;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    .audio-preview-play:hover {
      transform: scale(1.08);
    }

    .audio-preview-play:active {
      transform: scale(0.95);
    }

    .audio-preview-waveform {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .audio-preview-waveform .waveform-bars {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 20px;
    }

    .audio-preview-waveform .waveform-bars .bar {
      width: 3px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 1.5px;
      transition: background 0.2s ease;
    }

    .attachment-preview-item.is-audio-player.is-playing .waveform-bars .bar {
      animation: waveform-pulse 0.6s ease-in-out infinite alternate;
    }

    @keyframes waveform-pulse {
      from { background: rgba(255, 255, 255, 0.5); }
      to { background: rgba(255, 255, 255, 0.9); }
    }

    .audio-preview-time {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      font-variant-numeric: tabular-nums;
    }

    .attachment-preview-item.is-audio-player .attachment-remove {
      position: relative;
      top: auto;
      right: auto;
      opacity: 1;
      background: rgba(255, 255, 255, 0.25);
    }

    .attachment-preview-item.is-audio-player .attachment-remove:hover {
      background: rgba(255, 255, 255, 0.4);
    }

    /* Dark mode adjustments for audio preview */
    .dark .attachment-preview-item.is-audio-player {
      background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
    }

    /* Message Attachments (in chat bubble) */
    .chat-message-attachments {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 6px;
    }

    .chat-attachment-image {
      max-width: 200px;
      border-radius: 12px;
      overflow: hidden;
    }

    .chat-attachment-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    .chat-attachment-file {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      color: inherit;
      text-decoration: none;
      font-size: 13px;
      transition: background 0.2s ease;
    }

    .chat-attachment-file:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    .from-client .chat-attachment-file {
      background: rgba(255, 255, 255, 0.2);
    }

    .from-client .chat-attachment-file:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .dark .chat-attachment-file {
      background: rgba(255, 255, 255, 0.1);
    }

    .dark .chat-attachment-file:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    /* Video Attachment */
    .chat-attachment-video {
      margin-top: 8px;
      border-radius: 12px;
      overflow: hidden;
      max-width: 280px;
    }

    .chat-attachment-video video {
      max-height: 200px;
      width: 100%;
      display: block;
      background: #000;
    }

    /* Custom Audio Player - orange gradient style */
    .chat-audio-player {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
      border-radius: 20px;
      padding: 8px 14px;
      min-width: 200px;
      max-width: 280px;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
    }

    .chat-audio-player audio {
      display: none; /* Hide native player */
    }

    .chat-audio-player .audio-play-btn {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: inherit;
    }

    .chat-audio-player .audio-play-btn:hover {
      background: rgba(255, 255, 255, 0.35);
      transform: scale(1.05);
    }

    .chat-audio-player .audio-play-btn svg {
      width: 18px;
      height: 18px;
    }

    .chat-audio-player .audio-play-btn .hidden {
      display: none;
    }

    .chat-audio-player .audio-progress-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .chat-audio-player .audio-progress-bar {
      height: 4px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 2px;
      cursor: pointer;
      overflow: hidden;
    }

    .chat-audio-player .audio-progress-fill {
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 2px;
      transition: width 0.1s linear;
    }

    .chat-audio-player .audio-time {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    /* Audio player uses same orange style everywhere */
    .chat-audio-player .audio-play-btn {
      background: white;
      color: #F97316;
    }

    .chat-audio-player .audio-play-btn:hover {
      background: rgba(255, 255, 255, 0.9);
    }

    .chat-audio-player .audio-progress-bar {
      background: rgba(255, 255, 255, 0.35);
    }

    .chat-audio-player .audio-progress-fill {
      background: white;
    }

    /* Dark theme - slightly darker orange */
    .dark .chat-audio-player {
      background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
    }

    /* Error Toast */
    .chat-error-toast {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: #DC2626;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      animation: toastFadeIn 0.3s ease, toastFadeOut 0.3s ease 3.7s;
      z-index: 10;
    }

    @keyframes toastFadeIn {
      from { opacity: 0; transform: translateX(-50%) translateY(10px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    @keyframes toastFadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    /* Connection Banner - shows when reconnecting/offline */
    .chat-connection-banner {
      position: absolute;
      top: 60px; /* below header */
      left: 0;
      right: 0;
      z-index: 15;
      padding: 8px 16px;
      background: #FEF3C7;
      border-bottom: 1px solid #F59E0B;
      animation: bannerSlideIn 0.2s ease-out;
    }

    .dark .chat-connection-banner {
      background: #78350F;
      border-bottom-color: #B45309;
    }

    .chat-connection-banner.is-offline {
      background: #FEE2E2;
      border-bottom-color: #EF4444;
    }

    .dark .chat-connection-banner.is-offline {
      background: #7F1D1D;
      border-bottom-color: #DC2626;
    }

    .chat-connection-banner-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
    }

    .chat-connection-banner-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #F59E0B;
      animation: connectionPulse 1.5s ease-in-out infinite;
    }

    .is-offline .chat-connection-banner-icon {
      background: #EF4444;
      animation: none;
    }

    .chat-connection-banner-text {
      color: #92400E;
    }

    .dark .chat-connection-banner-text {
      color: #FDE68A;
    }

    .is-offline .chat-connection-banner-text {
      color: #991B1B;
    }

    .dark .is-offline .chat-connection-banner-text {
      color: #FECACA;
    }

    .chat-connection-banner-action {
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 500;
      color: white;
      background: #EF4444;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .chat-connection-banner-action:hover {
      background: #DC2626;
    }

    .chat-connection-banner-action:focus {
      outline: 2px solid #3B82F6;
      outline-offset: 2px;
    }

    @keyframes bannerSlideIn {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes connectionPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* Contact CTA - soft assistant-like call-to-action */
    .chat-contact-cta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 8px 12px;
      padding: 10px 14px;
      background: rgba(249, 115, 22, 0.08);
      border: 1px solid rgba(249, 115, 22, 0.2);
      border-radius: 12px;
      color: #EA580C;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
    }

    .chat-contact-cta:hover {
      background: rgba(249, 115, 22, 0.12);
      border-color: rgba(249, 115, 22, 0.3);
    }

    .chat-contact-cta:active {
      transform: scale(0.98);
    }

    .chat-contact-cta:focus {
      outline: 2px solid rgba(249, 115, 22, 0.4);
      outline-offset: 2px;
    }

    .chat-contact-cta.hidden {
      display: none;
    }

    .dark .chat-contact-cta {
      background: rgba(249, 115, 22, 0.1);
      border-color: rgba(249, 115, 22, 0.25);
      color: #FB923C;
    }

    .dark .chat-contact-cta:hover {
      background: rgba(249, 115, 22, 0.15);
      border-color: rgba(249, 115, 22, 0.35);
    }

    .chat-contact-cta-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
      border-radius: 50%;
      color: white;
      flex-shrink: 0;
    }

    .chat-contact-cta-text {
      flex: 1;
      line-height: 1.3;
    }

    .chat-contact-cta-chevron {
      width: 16px;
      height: 16px;
      opacity: 0.6;
      flex-shrink: 0;
    }

    /* Reconnected Toast - success notification */
    .chat-reconnected-toast {
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      background: #10B981;
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
      animation: toastFadeIn 0.2s ease, toastFadeOut 0.2s ease 1.8s;
      z-index: 20;
    }

    /* Input Error */
    .chat-input-error {
      min-height: 0;
    }

    /* ========================================
       CHAT TOGGLE ICON
       Floating button to reopen chat
       ======================================== */
    .chat-toggle-icon {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35),
                  0 2px 4px rgba(0, 0, 0, 0.1);
      /* GPU acceleration - stable 3d layer to prevent jank during scroll */
      -webkit-transform: translate3d(0, 0, 0) scale(0.8);
      transform: translate3d(0, 0, 0) scale(0.8);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      /* Removed will-change to prevent layer thrashing on iOS */
      /* Only transition specific properties, not 'all' */
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10001;
      opacity: 0;
      contain: layout style;
    }

    .chat-toggle-icon.hidden {
      display: none;
    }

    .chat-toggle-icon.is-visible {
      display: flex;
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      transform: translate3d(0, 0, 0) scale(1);
    }

    .chat-toggle-icon:hover {
      -webkit-transform: translate3d(0, 0, 0) scale(1.08);
      transform: translate3d(0, 0, 0) scale(1.08);
      box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45),
                  0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .chat-toggle-icon:active {
      -webkit-transform: translate3d(0, 0, 0) scale(0.95);
      transform: translate3d(0, 0, 0) scale(0.95);
    }

    .chat-toggle-icon-default {
      width: 26px;
      height: 26px;
    }

    /* Badge with sparkle indicator */
    .chat-toggle-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 20px;
      height: 20px;
      background: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #EF4444;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .dark .chat-toggle-badge {
      background: #1E1E1E;
      color: #F87171;
    }

    /* Mobile adjustments - hide chat toggle icon on mobile */
    @media (max-width: 1023px) {
      .chat-toggle-icon {
        display: none !important;
      }

      .chat-toggle-icon.is-visible {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
      }

      .chat-toggle-icon-default {
        width: 24px;
        height: 24px;
      }

      .chat-toggle-badge {
        width: 18px;
        height: 18px;
      }
    }

    /* Desktop - position to not overlap content */
    @media (min-width: 1024px) {
      .chat-toggle-icon {
        bottom: 32px;
        right: 32px;
      }
    }

    /* ========================================
       JUMP-TO-LATEST BUTTON (Smart Scroll)
       ======================================== */

    .chat-jump-to-latest {
      position: absolute;
      bottom: calc(var(--composer-h, 80px) + 16px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      pointer-events: none;
      z-index: 10;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #E5E5E5;
      border-radius: 50%;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
      color: #666666;
    }

    .dark .chat-jump-to-latest {
      background: rgba(30, 30, 30, 0.95);
      border-color: #3A3A3A;
      color: #AAAAAA;
    }

    .chat-jump-to-latest:not(.hidden) {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .chat-jump-to-latest:hover {
      background: #FFFFFF;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .dark .chat-jump-to-latest:hover {
      background: #252525;
    }

    .chat-jump-to-latest:active {
      transform: translateX(-50%) scale(0.95);
    }

    .chat-jump-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      font-size: 11px;
      font-weight: 600;
      line-height: 20px;
      text-align: center;
      color: white;
      background: #EF4444;
      border-radius: 10px;
    }

    .chat-jump-badge.hidden {
      display: none;
    }

    /* ========================================
       MESSAGE STATES (Sending, Failed, Retry)
       ======================================== */

    /* Sending state - reduced opacity */
    .chat-widget-messages .chat-message--sending .chat-bubble {
      opacity: 0.6;
    }

    /* Failed state - red dashed border */
    .chat-widget-messages .chat-message--failed .chat-bubble {
      opacity: 1;
      border: 2px dashed #EF4444;
    }

    /* Retry block */
    .chat-message-retry {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      font-size: 13px;
    }

    .chat-message-retry .retry-text {
      color: #EF4444;
    }

    .chat-message-retry .retry-btn {
      min-height: 32px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #EF4444;
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid #EF4444;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .chat-message-retry .retry-btn:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    .chat-message-retry .retry-btn:active {
      transform: scale(0.98);
    }

    .chat-message-retry .retry-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .dark .chat-message-retry .retry-btn {
      background: rgba(239, 68, 68, 0.15);
    }

    .dark .chat-message-retry .retry-btn:hover {
      background: rgba(239, 68, 68, 0.25);
    }

    /* ========================================
       REDUCED MOTION
       ======================================== */

    @media (prefers-reduced-motion: reduce) {
      .chat-widget-panel,
      .chat-widget-backdrop,
      .chat-toggle-icon,
      .chat-jump-to-latest,
      .chat-widget-messages .chat-message,
      .chat-widget-messages .chat-message.animate-in,
      .chat-widget-messages .chat-message.animate-in.is-animating {
        animation: none !important;
        transition: opacity 0.1s ease !important;
      }

      .chat-widget-panel.is-visible {
        transform: translateY(0) scale(1);
        opacity: 1;
      }

      .streaming-cursor {
        animation: none;
        opacity: 1;
      }
    }

    /* ========================================
       STREAMING CURSOR ANIMATION
       ======================================== */

    .streaming-cursor {
      display: inline-block;
      opacity: 1;
      animation: blink-cursor 0.8s infinite;
      color: #6B7280;
      font-weight: 300;
      margin-left: 1px;
    }

    .dark .streaming-cursor {
      color: #9CA3AF;
    }

    @keyframes blink-cursor {
      0%, 45% { opacity: 1; }
      50%, 95% { opacity: 0; }
      100% { opacity: 1; }
    }

    /* Hide cursor when streaming ends */
    .animate-complete .streaming-cursor {
      display: none;
    }

    /* ========================================
       QUICK REPLY BUTTONS
       ======================================== */

    .chat-quick-replies {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .chat-quick-replies::-webkit-scrollbar {
      display: none;
    }

    .chat-quick-reply-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: #FFFFFF;
      border: 1px solid #E5E5E5;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .chat-quick-reply-btn:hover {
      background: #FEF2F2;
      border-color: #EF4444;
      color: #DC2626;
    }

    .chat-quick-reply-btn:active {
      transform: scale(0.97);
    }

    .chat-quick-reply-btn svg {
      flex-shrink: 0;
      color: #9CA3AF;
      transition: color 0.2s ease;
    }

    .chat-quick-reply-btn:hover svg {
      color: #EF4444;
    }

    .dark .chat-quick-reply-btn {
      background: #1E1E1E;
      border-color: #333333;
      color: #D1D5DB;
    }

    .dark .chat-quick-reply-btn:hover {
      background: rgba(239, 68, 68, 0.15);
      border-color: #EF4444;
      color: #F87171;
    }

    .dark .chat-quick-reply-btn svg {
      color: #6B7280;
    }

    .dark .chat-quick-reply-btn:hover svg {
      color: #F87171;
    }

    /* Hide quick replies when hidden class is applied */
    .chat-quick-replies.hidden {
      display: none;
    }

    /* ========================================
       PAYMENT OPTIONS BUTTONS
       ======================================== */

    .chat-payment-options {
      display: flex;
      gap: 10px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .chat-payment-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 12px 16px;
      background: #FFFFFF;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: all 0.2s ease;
      flex: 1;
      min-width: 120px;
    }

    .chat-payment-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .chat-payment-btn:active {
      transform: translateY(0);
    }

    /* Prepayment button - green accent */
    .chat-payment-btn-prepay {
      border-color: #22C55E;
      background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    }

    .chat-payment-btn-prepay:hover {
      border-color: #16A34A;
      background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    }

    /* Cash on delivery button - neutral accent */
    .chat-payment-btn-cod {
      border-color: #6B7280;
      background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    }

    .chat-payment-btn-cod:hover {
      border-color: #4B5563;
      background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    }

    /* Dark mode */
    .dark .chat-payment-btn {
      background: #1E1E1E;
      border-color: #333333;
      color: #D1D5DB;
    }

    .dark .chat-payment-btn-prepay {
      border-color: #22C55E;
      background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0.25) 100%);
    }

    .dark .chat-payment-btn-prepay:hover {
      border-color: #4ADE80;
      background: linear-gradient(135deg, rgba(22, 163, 74, 0.25) 0%, rgba(22, 163, 74, 0.35) 100%);
    }

    .dark .chat-payment-btn-cod {
      border-color: #6B7280;
      background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(107, 114, 128, 0.25) 100%);
    }

    .dark .chat-payment-btn-cod:hover {
      border-color: #9CA3AF;
      background: linear-gradient(135deg, rgba(107, 114, 128, 0.25) 0%, rgba(107, 114, 128, 0.35) 100%);
    }

    /* ========================================
       ORDER CONFIRM BUTTONS (invoice confirmation)
       ======================================== */

    .chat-order-confirm-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
      margin-bottom: 8px;
    }

    .chat-confirm-btn {
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
      touch-action: manipulation; /* Fix iOS Safari double-tap delay */
      -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
      -webkit-user-select: none;
      user-select: none;
    }

    /* Disable hover effects on touch devices to prevent double-tap issue */
    @media (hover: none) or (pointer: coarse) {
      .chat-confirm-btn:hover {
        transform: none !important;
        box-shadow: none !important;
      }
    }

    .chat-confirm-btn:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    /* Disabled non-selected button */
    .chat-confirm-btn.disabled:not(.selected) {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Selected button - show as confirmed */
    .chat-confirm-btn.selected {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
      opacity: 1;
      cursor: default;
    }

    .dark .chat-confirm-btn.selected {
      background: linear-gradient(135deg, #10b981, #059669);
    }

    /* Primary confirm button - green */
    .chat-confirm-btn-yes {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
    }

    .chat-confirm-btn-yes:hover:not(:disabled) {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .chat-confirm-btn-yes:active:not(:disabled) {
      transform: translateY(0);
    }

    /* Edit button - outline style */
    .chat-confirm-btn-edit {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .chat-confirm-btn-edit:hover:not(:disabled) {
      background: #f8fafc;
      color: #475569;
      border-color: #cbd5e1;
    }

    /* Decline button - red outline style */
    .chat-confirm-btn-no {
      background: transparent;
      color: #ef4444;
      border: 1px solid #fecaca;
    }

    .chat-confirm-btn-no:hover:not(:disabled) {
      background: #fef2f2;
      color: #dc2626;
      border-color: #f87171;
    }

    /* Dark mode */
    .dark .chat-confirm-btn-yes {
      background: linear-gradient(135deg, #10b981, #059669);
    }

    .dark .chat-confirm-btn-yes:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .dark .chat-confirm-btn-edit {
      background: transparent;
      color: #94a3b8;
      border-color: #334155;
    }

    .dark .chat-confirm-btn-edit:hover:not(:disabled) {
      background: rgba(148, 163, 184, 0.1);
      color: #cbd5e1;
      border-color: #475569;
    }

    .dark .chat-confirm-btn-no {
      background: transparent;
      color: #f87171;
      border-color: #7f1d1d;
    }

    .dark .chat-confirm-btn-no:hover:not(:disabled) {
      background: rgba(239, 68, 68, 0.1);
      color: #fca5a5;
      border-color: #991b1b;
    }

    /* Payment method button - blue */
    .chat-confirm-btn-payment {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      border: none;
    }

    .chat-confirm-btn-payment:hover:not(:disabled) {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .chat-confirm-btn-payment:active:not(:disabled) {
      transform: translateY(0);
    }

    .dark .chat-confirm-btn-payment {
      background: linear-gradient(135deg, #60a5fa, #3b82f6);
      color: #0f172a;
    }

    .dark .chat-confirm-btn-payment:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
    }

    /* Primary action button - blue (for links like part selection) */
    .chat-confirm-btn-primary {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Only apply hover on devices that support it (not touch screens) */
    @media (hover: hover) and (pointer: fine) {
      .chat-confirm-btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        color: white;
        text-decoration: none;
      }
    }

    .chat-confirm-btn-primary:active:not(:disabled) {
      transform: translateY(0);
    }

    .dark .chat-confirm-btn-primary {
      background: linear-gradient(135deg, #60a5fa, #3b82f6);
    }

    @media (hover: hover) and (pointer: fine) {
      .dark .chat-confirm-btn-primary:hover:not(:disabled) {
        box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
        color: white;
      }
    }

    /* ========================================
       URL LINK (simple link, no button styling for iOS compatibility)
       ======================================== */

    .chat-url-link {
      display: inline-block;
      padding: 12px 20px;
      background: #3b82f6;
      color: white !important;
      text-decoration: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .chat-url-link:active {
      background: #2563eb;
    }

    .dark .chat-url-link {
      background: #60a5fa;
      color: #0f172a !important;
    }

    .dark .chat-url-link:active {
      background: #3b82f6;
    }

    /* ========================================
       SUGGESTED PROMPTS (at chat start)
       ======================================== */

    .chat-suggested-prompts {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px 0;
    }

    .chat-suggested-prompts.hidden {
      display: none;
    }

    .chat-suggested-prompt {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #F9FAFB;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      font-size: 14px;
      color: #374151;
      cursor: pointer;
      text-align: left;
      transition: all 0.2s ease;
    }

    .chat-suggested-prompt:hover {
      background: #FEF2F2;
      border-color: #FECACA;
      color: #DC2626;
    }

    .chat-suggested-prompt:active {
      transform: scale(0.99);
    }

    .chat-suggested-prompt svg {
      width: 18px;
      height: 18px;
      color: #9CA3AF;
      flex-shrink: 0;
    }

    .chat-suggested-prompt:hover svg {
      color: #EF4444;
    }

    .dark .chat-suggested-prompt {
      background: #1E1E1E;
      border-color: #333333;
      color: #D1D5DB;
    }

    .dark .chat-suggested-prompt:hover {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.3);
      color: #F87171;
    }

    .dark .chat-suggested-prompt svg {
      color: #6B7280;
    }

    .dark .chat-suggested-prompt:hover svg {
      color: #F87171;
    }

    /* ========================================
       MARKDOWN STYLES (in assistant messages)
       ======================================== */

    /* Bold text */
    .chat-bubble strong {
      font-weight: 600;
      color: #1F2937;
    }

    .dark .chat-bubble strong {
      color: #F3F4F6;
    }

    /* Italic text */
    .chat-bubble em {
      font-style: italic;
    }

    /* Lists - Bullet (ul) */
    .chat-bubble ul.chat-list {
      margin: 8px 0;
      padding-left: 0;
      list-style: none;
    }

    .chat-bubble ul.chat-list li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 4px;
      line-height: 1.5;
    }

    .chat-bubble ul.chat-list li::before {
      content: "•";
      position: absolute;
      left: 6px;
      color: #EF4444;
      font-weight: bold;
    }

    /* Lists - Numbered (ol) */
    .chat-bubble ol.chat-numbered-list {
      margin: 8px 0;
      padding-left: 0;
      list-style: none;
      counter-reset: numbered-list;
    }

    .chat-bubble ol.chat-numbered-list li {
      position: relative;
      padding-left: 24px;
      margin-bottom: 4px;
      line-height: 1.5;
      counter-increment: numbered-list;
    }

    .chat-bubble ol.chat-numbered-list li::before {
      content: counter(numbered-list) ".";
      position: absolute;
      left: 0;
      color: #EF4444;
      font-weight: 600;
      min-width: 18px;
    }

    /* Links */
    .chat-bubble .chat-link {
      color: #EF4444;
      text-decoration: none;
      border-bottom: 1px dotted #EF4444;
      transition: all 0.2s ease;
    }

    .chat-bubble .chat-link:hover {
      color: #DC2626;
      border-bottom-style: solid;
    }

    .dark .chat-bubble .chat-link {
      color: #F87171;
      border-bottom-color: #F87171;
    }

    .dark .chat-bubble .chat-link:hover {
      color: #FCA5A5;
      border-bottom-color: #FCA5A5;
    }

    /* Inline Code */
    .chat-bubble .chat-inline-code {
      display: inline;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      font-size: 0.9em;
      font-weight: 600;
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
      white-space: nowrap;
    }

    .dark .chat-bubble .chat-inline-code {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399;
    }

    /* ========================================
       COPY BUTTON (on assistant messages)
       ======================================== */

    .chat-copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 4px;
      margin-left: 8px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: #9CA3AF;
      cursor: pointer;
      opacity: 0;
      transition: all 0.2s ease;
      vertical-align: middle;
    }

    .chat-message:hover .chat-copy-btn,
    .chat-copy-btn:focus {
      opacity: 1;
    }

    .chat-copy-btn:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #EF4444;
    }

    .chat-copy-btn:active {
      transform: scale(0.95);
    }

    .chat-copy-btn svg {
      width: 14px;
      height: 14px;
    }

    .chat-copy-btn .check-icon {
      color: #10B981;
    }

    .dark .chat-copy-btn {
      color: #6B7280;
    }

    .dark .chat-copy-btn:hover {
      background: rgba(239, 68, 68, 0.15);
      color: #F87171;
    }

    .dark .chat-copy-btn .check-icon {
      color: #34D399;
    }

    /* Note: .hidden utility is provided by Tailwind CSS
       Don't override with !important as it breaks responsive variants like lg:flex */

    /* ========================================
       CHAT SAFETY POPUPS (Contact Collection)
       Welcome & Exit-warning popups
       ======================================== */

    .chat-safety-popup {
      position: fixed;
      inset: 0;
      z-index: 10002; /* Above cookie consent (9999) and chat widget */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .chat-safety-popup.hidden {
      display: none;
    }

    /* Backdrop with blur */
    .chat-safety-popup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }

    .chat-safety-popup.is-visible .chat-safety-popup-backdrop {
      opacity: 1;
    }

    /* Popup Content */
    .chat-safety-popup-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 380px;
      background: #FFFFFF;
      border-radius: 24px;
      padding: 32px 24px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
                  0 8px 24px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transform: scale(0.9) translateY(20px);
      transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                  transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .chat-safety-popup.is-visible .chat-safety-popup-content {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    .dark .chat-safety-popup-content {
      background: #1A1A1A;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 8px 24px rgba(0, 0, 0, 0.3);
    }

    /* Warning style */
    .chat-safety-popup-content.chat-safety-popup-warning {
      border: 2px solid #FEF3C7;
    }

    .dark .chat-safety-popup-content.chat-safety-popup-warning {
      border-color: rgba(252, 211, 77, 0.3);
    }

    /* Icon */
    .chat-safety-popup-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
      border-radius: 50%;
      color: white;
    }

    .chat-safety-popup-icon svg {
      width: 32px;
      height: 32px;
    }

    /* Warning icon */
    .chat-safety-popup-icon-warning {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    }

    /* Title */
    .chat-safety-popup-title {
      font-size: 20px;
      font-weight: 700;
      color: #111111;
      text-align: center;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .dark .chat-safety-popup-title {
      color: #F7F7F7;
    }

    /* Description */
    .chat-safety-popup-description {
      font-size: 14px;
      line-height: 1.6;
      color: #6B7280;
      text-align: center;
      margin-bottom: 24px;
    }

    .dark .chat-safety-popup-description {
      color: #9CA3AF;
    }

    /* Form */
    .chat-safety-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .chat-safety-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .chat-safety-label {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }

    .dark .chat-safety-label {
      color: #D1D5DB;
    }

    .chat-safety-input {
      width: 100%;
      padding: 12px 16px;
      background: #F9FAFB;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      font-size: 15px;
      color: #111111;
      outline: none;
      transition: all 0.2s ease;
    }

    .chat-safety-input::placeholder {
      color: #9CA3AF;
    }

    .chat-safety-input:focus {
      background: #FFFFFF;
      border-color: #EF4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .dark .chat-safety-input {
      background: #252525;
      border-color: #3F3F3F;
      color: #F5F5F5;
    }

    .dark .chat-safety-input::placeholder {
      color: #6B7280;
    }

    .dark .chat-safety-input:focus {
      background: #2D2D2D;
      border-color: #EF4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    /* Error message */
    .chat-safety-error {
      font-size: 13px;
      color: #DC2626;
      background: #FEF2F2;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #FECACA;
    }

    .chat-safety-error.hidden {
      display: none;
    }

    .dark .chat-safety-error {
      color: #FCA5A5;
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.3);
    }

    /* Actions */
    .chat-safety-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px;
    }

    /* Buttons */
    .chat-safety-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px 20px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-safety-btn:active {
      transform: scale(0.98);
    }

    .chat-safety-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Primary button */
    .chat-safety-btn-primary {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: white;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    }

    .chat-safety-btn-primary:hover:not(:disabled) {
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
      transform: translateY(-1px);
    }

    .chat-safety-btn-primary .btn-loading {
      display: none;
    }

    .chat-safety-btn-primary.is-loading .btn-text {
      display: none;
    }

    .chat-safety-btn-primary.is-loading .btn-loading {
      display: block;
    }

    .chat-safety-btn-primary .btn-loading svg {
      width: 20px;
      height: 20px;
    }

    /* Secondary button */
    .chat-safety-btn-secondary {
      background: transparent;
      color: #6B7280;
      border: 1px solid #E5E7EB;
    }

    .chat-safety-btn-secondary:hover {
      background: #F9FAFB;
      color: #374151;
    }

    .dark .chat-safety-btn-secondary {
      color: #9CA3AF;
      border-color: #3F3F3F;
    }

    .dark .chat-safety-btn-secondary:hover {
      background: #252525;
      color: #D1D5DB;
    }

    /* Danger button */
    .chat-safety-btn-danger {
      background: transparent;
      color: #DC2626;
      border: 1px solid #FECACA;
    }

    .chat-safety-btn-danger:hover {
      background: #FEF2F2;
    }

    .dark .chat-safety-btn-danger {
      color: #FCA5A5;
      border-color: rgba(239, 68, 68, 0.3);
    }

    .dark .chat-safety-btn-danger:hover {
      background: rgba(239, 68, 68, 0.1);
    }

    /* Spin animation for loading */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .animate-spin {
      animation: spin 1s linear infinite;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .chat-safety-popup-backdrop,
      .chat-safety-popup-content,
      .chat-safety-input,
      .chat-safety-btn {
        transition: none;
      }

      .animate-spin {
        animation: none;
      }
    }

/* ========================================
   CHAT CHECKOUT POPUP STYLES
   ======================================== */

    .chat-checkout-popup {
      position: fixed;
      inset: 0;
      z-index: 10002; /* Above cookie consent (9999) */
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .chat-checkout-popup.hidden {
      display: none;
    }

    .chat-checkout-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .chat-checkout-popup.is-visible .chat-checkout-backdrop {
      opacity: 1;
    }

    .chat-checkout-content {
      position: relative;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      background: #ffffff;
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
      transform: translateY(100%);
      transition: transform 0.3s ease;
      padding: 24px;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .chat-checkout-popup.is-visible .chat-checkout-content {
      transform: translateY(0);
    }

    .dark .chat-checkout-content {
      background: #1a1a1a;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    }

    /* Desktop */
    @media (min-width: 640px) {
      .chat-checkout-popup {
        align-items: center;
      }

      .chat-checkout-content {
        max-width: 500px;
        max-height: 85vh;
        border-radius: 24px;
        transform: translateY(20px) scale(0.95);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }

      .chat-checkout-popup.is-visible .chat-checkout-content {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    /* Close button */
    .chat-checkout-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f4f6;
      border: none;
      border-radius: 50%;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 10;
    }

    .chat-checkout-close:hover {
      background: #e5e7eb;
      color: #374151;
    }

    .dark .chat-checkout-close {
      background: #2a2a2a;
      color: #9ca3af;
    }

    .dark .chat-checkout-close:hover {
      background: #333;
      color: #d1d5db;
    }

    /* Step indicator */
    .chat-checkout-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
      padding-right: 40px;
    }

    .chat-checkout-step {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .chat-checkout-step .step-number {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e5e7eb;
      color: #6b7280;
      font-size: 12px;
      font-weight: 600;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .chat-checkout-step.active .step-number {
      background: #f97316;
      color: white;
    }

    .chat-checkout-step.completed .step-number {
      background: #22c55e;
      color: white;
    }

    .chat-checkout-step .step-label {
      font-size: 12px;
      color: #6b7280;
      display: none;
    }

    @media (min-width: 400px) {
      .chat-checkout-step .step-label {
        display: block;
      }
    }

    .chat-checkout-step.active .step-label {
      color: #f97316;
      font-weight: 500;
    }

    .chat-checkout-step.completed .step-label {
      color: #22c55e;
    }

    .dark .chat-checkout-step .step-number {
      background: #333;
      color: #9ca3af;
    }

    .dark .chat-checkout-step .step-label {
      color: #9ca3af;
    }

    .chat-checkout-step-line {
      width: 20px;
      height: 2px;
      background: #e5e7eb;
      border-radius: 1px;
    }

    .dark .chat-checkout-step-line {
      background: #333;
    }

    /* Panel */
    .chat-checkout-panel {
      animation: fadeIn 0.2s ease;
    }

    .chat-checkout-panel.hidden {
      display: none;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Title */
    .chat-checkout-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 4px;
    }

    .chat-checkout-title svg {
      color: #f97316;
    }

    .dark .chat-checkout-title {
      color: #f9fafb;
    }

    .chat-checkout-subtitle {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 20px;
    }

    .dark .chat-checkout-subtitle {
      color: #9ca3af;
    }

    /* Items list */
    .chat-checkout-items {
      max-height: 200px;
      overflow-y: auto;
      margin-bottom: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
    }

    .dark .chat-checkout-items {
      border-color: #333;
    }

    .chat-checkout-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px;
      gap: 8px;
      color: #9ca3af;
      font-size: 14px;
    }

    .chat-checkout-item {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #e5e7eb;
    }

    .chat-checkout-item:last-child {
      border-bottom: none;
    }

    .dark .chat-checkout-item {
      border-bottom-color: #333;
    }

    /* Checkbox */
    .item-checkbox {
      position: relative;
    }

    .item-checkbox input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .item-checkbox label {
      display: flex;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 2px solid #d1d5db;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .item-checkbox input:checked + label {
      background: #f97316;
      border-color: #f97316;
    }

    .item-checkbox input:checked + label::after {
      content: '';
      width: 6px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      margin: auto;
    }

    .dark .item-checkbox label {
      background: #2a2a2a;
      border-color: #444;
    }

    /* Item info */
    .item-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .item-name {
      font-size: 14px;
      font-weight: 500;
      color: #111827;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dark .item-name {
      color: #f9fafb;
    }

    .item-brand,
    .item-oem {
      font-size: 11px;
      color: #6b7280;
    }

    .dark .item-brand,
    .dark .item-oem {
      color: #9ca3af;
    }

    /* Quantity */
    .item-qty {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .qty-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f4f6;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .qty-btn:hover {
      background: #e5e7eb;
    }

    .dark .qty-btn {
      background: #333;
      color: #d1d5db;
    }

    .dark .qty-btn:hover {
      background: #444;
    }

    .qty-value {
      min-width: 24px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #111827;
    }

    .dark .qty-value {
      color: #f9fafb;
    }

    /* Price */
    .item-price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }

    .price-value {
      font-size: 11px;
      color: #9ca3af;
    }

    .price-total {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
    }

    .dark .price-total {
      color: #f9fafb;
    }

    /* Totals */
    .chat-checkout-total {
      padding: 16px;
      background: #f9fafb;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .dark .chat-checkout-total {
      background: #252525;
    }

    .chat-checkout-total-row {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #6b7280;
    }

    .chat-checkout-total-row.total {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e5e7eb;
      font-size: 16px;
      font-weight: 600;
      color: #111827;
    }

    .dark .chat-checkout-total-row {
      color: #9ca3af;
    }

    .dark .chat-checkout-total-row.total {
      border-color: #333;
      color: #f9fafb;
    }

    /* Form */
    .chat-checkout-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 20px;
    }

    .chat-checkout-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .chat-checkout-field label {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }

    .dark .chat-checkout-field label {
      color: #d1d5db;
    }

    .chat-checkout-field input {
      padding: 12px 14px;
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      font-size: 15px;
      color: #111827;
      transition: all 0.2s ease;
    }

    .chat-checkout-field input:focus {
      outline: none;
      border-color: #f97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    }

    .dark .chat-checkout-field input {
      background: #2a2a2a;
      border-color: #444;
      color: #f9fafb;
    }

    .dark .chat-checkout-field input:focus {
      border-color: #f97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    }

    .chat-checkout-field input::placeholder {
      color: #9ca3af;
    }

    /* Error */
    .chat-checkout-error {
      padding: 10px 12px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 8px;
      font-size: 13px;
      color: #dc2626;
      margin-bottom: 16px;
    }

    .chat-checkout-error.hidden {
      display: none;
    }

    .dark .chat-checkout-error {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.3);
      color: #fca5a5;
    }

    /* Payment options */
    .chat-checkout-payment-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .chat-checkout-payment-option {
      cursor: pointer;
    }

    .chat-checkout-payment-option input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .payment-option-content {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: #fff;
      border: 2px solid #e5e7eb;
      border-radius: 14px;
      transition: all 0.2s ease;
    }

    .chat-checkout-payment-option.selected .payment-option-content {
      border-color: #f97316;
      background: #fff7ed;
    }

    .dark .payment-option-content {
      background: #2a2a2a;
      border-color: #444;
    }

    .dark .chat-checkout-payment-option.selected .payment-option-content {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.1);
    }

    .payment-option-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      flex-shrink: 0;
    }

    .payment-option-icon.cod {
      background: #dcfce7;
      color: #16a34a;
    }

    .payment-option-icon.card {
      background: #dbeafe;
      color: #2563eb;
    }

    .dark .payment-option-icon.cod {
      background: rgba(34, 197, 94, 0.1);
    }

    .dark .payment-option-icon.card {
      background: rgba(59, 130, 246, 0.1);
    }

    .payment-option-text {
      flex: 1;
      min-width: 0;
    }

    .payment-option-title {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: #111827;
    }

    .dark .payment-option-title {
      color: #f9fafb;
    }

    .payment-option-desc {
      display: block;
      font-size: 12px;
      color: #6b7280;
    }

    .dark .payment-option-desc {
      color: #9ca3af;
    }

    .payment-option-check {
      color: #d1d5db;
      transition: color 0.2s ease;
    }

    .chat-checkout-payment-option.selected .payment-option-check {
      color: #f97316;
    }

    .dark .payment-option-check {
      color: #444;
    }

    /* Card info box */
    .chat-checkout-card-info {
      margin-bottom: 20px;
    }

    .card-info-box {
      padding: 16px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 12px;
    }

    .dark .card-info-box {
      background: rgba(14, 165, 233, 0.1);
      border-color: rgba(14, 165, 233, 0.3);
    }

    .card-info-title {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 8px;
    }

    .dark .card-info-title {
      color: #9ca3af;
    }

    .card-info-number {
      font-size: 20px;
      font-weight: 600;
      font-family: monospace;
      color: #0369a1;
      margin-bottom: 4px;
    }

    .dark .card-info-number {
      color: #38bdf8;
    }

    .card-info-name {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .card-copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: #0369a1;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .card-copy-btn:hover {
      background: #075985;
    }

    /* Actions */
    .chat-checkout-actions {
      display: flex;
      gap: 12px;
    }

    .chat-checkout-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .chat-checkout-btn.primary {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    }

    .chat-checkout-btn.primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
    }

    .chat-checkout-btn.primary:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }

    .chat-checkout-btn.primary.submit {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    }

    .chat-checkout-btn.primary.submit:hover {
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
    }

    .chat-checkout-btn.secondary {
      background: #f3f4f6;
      color: #374151;
    }

    .chat-checkout-btn.secondary:hover {
      background: #e5e7eb;
    }

    .dark .chat-checkout-btn.secondary {
      background: #333;
      color: #d1d5db;
    }

    .dark .chat-checkout-btn.secondary:hover {
      background: #444;
    }

    .chat-checkout-btn.is-loading {
      pointer-events: none;
    }

    /* Success state */
    .chat-checkout-success {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px 0;
    }

    .success-icon {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #dcfce7;
      color: #16a34a;
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .dark .success-icon {
      background: rgba(34, 197, 94, 0.1);
    }

    .success-title {
      font-size: 20px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 8px;
    }

    .dark .success-title {
      color: #f9fafb;
    }

    .success-desc {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 24px;
      max-width: 280px;
    }

    .dark .success-desc {
      color: #9ca3af;
    }

/* ========================================
   EMOJI BADGES (replacing VIN scanners)
   ======================================== */

/* Emoji positioned on the progress line - centered vertically */
.emoji-on-line {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.emoji-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark .emoji-badge {
  background: rgba(30, 30, 30, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.emoji-badge--sad {
  border: 1px solid rgba(220, 38, 38, 0.2);
  color: #DC2626;
}

.dark .emoji-badge--sad {
  border-color: rgba(252, 165, 165, 0.3);
  color: #FCA5A5;
}

.emoji-badge--happy {
  border: 1px solid rgba(150, 150, 150, 0.3);
  opacity: 1;
  width: auto;
  padding: 8px 12px;
  gap: 4px;
  font-size: 20px;
}

/* Emoji row - stylish inline design */
.emoji-row {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.dark .emoji-row {
  background: rgba(40, 40, 40, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.emoji-row span {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

/* SVG icon styling for emoji replacements */
.emoji-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-icon--happy {
  color: #16A34A;
}

.emoji-icon--thumbs {
  color: #2563EB;
}

.emoji-icon--check {
  color: #16A34A;
}

.dark .emoji-icon--happy {
  color: #86EFAC;
}

.dark .emoji-icon--thumbs {
  color: #93C5FD;
}

.dark .emoji-icon--check {
  color: #86EFAC;
}

@media (min-width: 640px) {
  .emoji-badge {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }

  .emoji-badge--happy {
    width: auto;
    height: auto;
    padding: 12px 16px;
    font-size: 24px;
  }

  .emoji-row {
    gap: 10px;
    padding: 10px 16px;
    right: 20px;
  }

  .emoji-row span {
    font-size: 24px;
  }
}

/* ========================================
   VIN SCANNER ANIMATIONS (legacy, kept for reference)
   ======================================== */

/* VIN Scanner positioned on the progress line - centered vertically */
.vin-scanner-on-line {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.vin-scanner {
  width: 140px;
  height: 47px;
  flex-shrink: 0;
}

/* Larger VIN scanner on desktop */
@media (min-width: 640px) {
  .vin-scanner {
    width: 160px;
    height: 53px;
  }
}

.vin-scanner svg {
  width: 100%;
  height: 100%;
}

/* Common VIN plate styling */
.vin-scanner .vin-plate {
  fill: #F3F4F6;
  stroke: #D1D5DB;
  stroke-width: 0.5;
}

.dark .vin-scanner .vin-plate {
  fill: #1F2937;
  stroke: #374151;
}

/* VIN characters base */
.vin-scanner .vin-char {
  font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
  font-size: 10px;
  font-weight: 600;
  fill: #374151;
}

.dark .vin-scanner .vin-char {
  fill: #D1D5DB;
}

/* ---- BAD STATE (Red/Error) ---- */
.vin-scanner--bad .vin-plate {
  fill: #FEF2F2;
  stroke: #FECACA;
}

.dark .vin-scanner--bad .vin-plate {
  fill: rgba(239, 68, 68, 0.1);
  stroke: rgba(239, 68, 68, 0.3);
}

/* Scan line - chaotic movement */
.vin-scanner--bad .scan-line {
  fill: #DC2626;
  opacity: 0.9;
  animation: vin-scan-chaotic 2s ease-in-out infinite;
}

.dark .vin-scanner--bad .scan-line {
  fill: #FCA5A5;
}

/* Character glitch effect - subtle opacity flicker */
.vin-scanner--bad .vin-char {
  animation: vin-char-flicker 1.8s ease-in-out infinite;
}

.vin-scanner--bad .vin-char.c1 { animation-delay: 0s; }
.vin-scanner--bad .vin-char.c2 { animation-delay: 0.1s; }
.vin-scanner--bad .vin-char.c3 { animation-delay: 0.2s; }
.vin-scanner--bad .vin-char.c4 { animation-delay: 0.3s; }
.vin-scanner--bad .vin-char.c5 { animation-delay: 0.4s; }
.vin-scanner--bad .vin-char.c6 { animation-delay: 0.5s; }
.vin-scanner--bad .vin-char.c7 { animation-delay: 0.6s; }
.vin-scanner--bad .vin-char.c8 { animation-delay: 0.7s; }
.vin-scanner--bad .vin-char.c9 { animation-delay: 0.8s; }
.vin-scanner--bad .vin-char.c10 { animation-delay: 0.9s; }
.vin-scanner--bad .vin-char.c11 { animation-delay: 1.0s; }
.vin-scanner--bad .vin-char.c12 { animation-delay: 1.1s; }

/* Error badge - premium pulse (always visible) */
.vin-scanner--bad .error-badge {
  transform-origin: 112px 11px;
  animation: vin-error-pulse 2s ease-in-out infinite;
}

/* Error triangle uses gradient from SVG */
.dark .vin-scanner--bad .error-triangle {
  filter: brightness(1.2);
}

.vin-scanner--bad .error-exclaim {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 7px;
  font-weight: 700;
  fill: #FFFFFF;
  text-anchor: middle;
  dominant-baseline: central;
}

.dark .vin-scanner--bad .error-exclaim {
  fill: #1F2937;
}

/* ---- GOOD STATE (Green/Success) ---- */
.vin-scanner--good .vin-plate {
  fill: #F0FDF4;
  stroke: #BBF7D0;
}

.dark .vin-scanner--good .vin-plate {
  fill: rgba(34, 197, 94, 0.1);
  stroke: rgba(34, 197, 94, 0.3);
}

/* Scan line - smooth movement */
.vin-scanner--good .scan-line {
  fill: #16A34A;
  opacity: 0.9;
  animation: vin-scan-smooth 2.2s ease-in-out infinite;
}

.dark .vin-scanner--good .scan-line {
  fill: #86EFAC;
}

/* Character activation effect - smooth glow */
.vin-scanner--good .vin-char {
  opacity: 0.5;
  animation: vin-char-glow 2.2s ease-in-out infinite;
}

.vin-scanner--good .vin-char.c1 { animation-delay: 0s; }
.vin-scanner--good .vin-char.c2 { animation-delay: 0.12s; }
.vin-scanner--good .vin-char.c3 { animation-delay: 0.24s; }
.vin-scanner--good .vin-char.c4 { animation-delay: 0.36s; }
.vin-scanner--good .vin-char.c5 { animation-delay: 0.48s; }
.vin-scanner--good .vin-char.c6 { animation-delay: 0.6s; }
.vin-scanner--good .vin-char.c7 { animation-delay: 0.72s; }
.vin-scanner--good .vin-char.c8 { animation-delay: 0.84s; }
.vin-scanner--good .vin-char.c9 { animation-delay: 0.96s; }
.vin-scanner--good .vin-char.c10 { animation-delay: 1.08s; }
.vin-scanner--good .vin-char.c11 { animation-delay: 1.2s; }
.vin-scanner--good .vin-char.c12 { animation-delay: 1.32s; }

/* Success badge - premium pulse (always visible) */
.vin-scanner--good .success-badge {
  transform-origin: 112px 11px;
  animation: vin-success-pulse 2.5s ease-in-out infinite;
}

/* Success circle uses gradient from SVG */
.dark .vin-scanner--good .success-circle {
  filter: brightness(1.2);
}

.vin-scanner--good .success-check {
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.dark .vin-scanner--good .success-check {
  stroke: #1F2937;
}

/* ---- KEYFRAMES ---- */

/* Bad state - chaotic scan movement */
@keyframes vin-scan-chaotic {
  0% { transform: translateX(0); opacity: 0.9; }
  15% { transform: translateX(25px); opacity: 0.7; }
  30% { transform: translateX(15px); opacity: 0.9; }
  45% { transform: translateX(50px); opacity: 0.6; }
  60% { transform: translateX(40px); opacity: 0.85; }
  75% { transform: translateX(75px); opacity: 0.7; }
  90% { transform: translateX(95px); opacity: 0.9; }
  100% { transform: translateX(100px); opacity: 0.5; }
}

/* Bad state - subtle character flicker */
@keyframes vin-char-flicker {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.65; }
  40% { opacity: 0.9; }
  60% { opacity: 0.55; }
  80% { opacity: 0.85; }
}

/* Bad state - premium error pulse (always visible) */
@keyframes vin-error-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

/* Good state - smooth scan line */
@keyframes vin-scan-smooth {
  0% { transform: translateX(0); opacity: 0.9; }
  65% { transform: translateX(100px); opacity: 0.9; }
  75% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Good state - character glow when scan passes */
@keyframes vin-char-glow {
  0% { opacity: 0.5; fill: #9CA3AF; }
  25% { opacity: 1; fill: #16A34A; }
  50% { opacity: 1; fill: #16A34A; }
  75%, 100% { opacity: 1; fill: #374151; }
}

.dark .vin-scanner--good .vin-char {
  animation-name: vin-char-glow-dark;
}

@keyframes vin-char-glow-dark {
  0% { opacity: 0.5; fill: #6B7280; }
  25% { opacity: 1; fill: #86EFAC; }
  50% { opacity: 1; fill: #86EFAC; }
  75%, 100% { opacity: 1; fill: #D1D5DB; }
}

/* Good state - premium success pulse (always visible) */
@keyframes vin-success-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.9; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vin-scanner--bad .scan-line,
  .vin-scanner--bad .vin-char,
  .vin-scanner--bad .error-badge,
  .vin-scanner--good .scan-line,
  .vin-scanner--good .vin-char,
  .vin-scanner--good .success-badge {
    animation: none;
  }

  .vin-scanner--good .vin-char {
    opacity: 1;
  }

  .vin-scanner--bad .error-badge,
  .vin-scanner--good .success-badge {
    opacity: 1;
  }
}

/* ========================================
   ABOUT US SECTION - Quote + Synergy Badge
   ======================================== */

/* Section label badge */
.about-label-badge {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F97316;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(251, 146, 60, 0.06) 100%);
  border: 1.5px solid rgba(249, 115, 22, 0.2);
  border-radius: 100px;
}

.dark .about-label-badge {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(253, 186, 116, 0.08) 100%);
  border-color: rgba(251, 146, 60, 0.3);
  color: #FB923C;
}

/* Card container */
.about-card {
  background: #FFFFFF;
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: 20px;
  box-shadow:
    0 4px 20px rgba(251, 146, 60, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 24px 20px;
}

.dark .about-card {
  background: #141414;
  border-color: rgba(251, 146, 60, 0.3);
  box-shadow:
    0 4px 20px rgba(251, 146, 60, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (min-width: 640px) {
  .about-card {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .about-card {
    padding: 40px;
  }
}

/* Quote - main accent */
.about-quote {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 24px 0;
  padding: 0;
  border: none;
  font-style: normal;
}

.dark .about-quote {
  color: #E8E8E8;
}

@media (min-width: 640px) {
  .about-quote {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .about-quote {
    font-size: 22px;
    margin-bottom: 28px;
  }
}

/* AI + Expert Synergy Badge */
.about-synergy-badge {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(251, 146, 60, 0.04) 100%);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: center;
}

.dark .about-synergy-badge {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.12) 0%, rgba(253, 186, 116, 0.06) 100%);
  border-color: rgba(251, 146, 60, 0.25);
}

.about-synergy-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.about-synergy-icon {
  font-size: 20px;
  line-height: 1;
}

.about-synergy-plus {
  color: #F97316;
  font-weight: 600;
  font-size: 16px;
}

.about-synergy-title {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 15px;
}

.dark .about-synergy-title {
  color: #E8E8E8;
}

@media (min-width: 640px) {
  .about-synergy-title {
    font-size: 16px;
  }
}

.about-synergy-features {
  font-size: 14px;
  color: #666666;
}

.dark .about-synergy-features {
  color: #A0A0A0;
}

.about-synergy-dot {
  margin: 0 8px;
  color: #F97316;
}

/* Product categories */
.about-categories {
  text-align: center;
  font-size: 14px;
  color: #888888;
}

.dark .about-categories {
  color: #909090;
}

.about-dot {
  margin: 0 8px;
  color: #F97316;
}

/* ========================================
   HERO TO ABOUT CURVED ARROW
   ======================================== */
.hero-curved-arrow {
  position: absolute;
  bottom: -160px;
  left: 15%;
  width: 36%;
  height: 280px;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-curved-arrow {
    display: none; /* Hide on mobile - too complex */
  }
}

@media (min-width: 768px) {
  .hero-curved-arrow {
    left: 14%;
    width: 38%;
    height: 300px;
    bottom: -180px;
  }
}

@media (min-width: 1024px) {
  .hero-curved-arrow {
    left: 13%;
    width: 38%;
    height: 340px;
    bottom: -200px;
  }
}

@media (min-width: 1280px) {
  .hero-curved-arrow {
    /* From ~17% (content start) to ~50% (center) */
    left: 17%;
    width: 34%;
    height: 380px;
    bottom: -230px;
  }
}

@media (min-width: 1600px) {
  .hero-curved-arrow {
    left: 19%;
    width: 32%;
    height: 400px;
    bottom: -250px;
  }
}

/* SVG container */
.curved-arrow-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The curved path */
.curved-arrow-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-path 2s ease-out forwards, path-glow 3s ease-in-out infinite 2s;
}

@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes path-glow {
  0%, 100% {
    opacity: 0.8;
    filter: url(#arrowGlow);
  }
  50% {
    opacity: 1;
    filter: url(#arrowGlow) brightness(1.2);
  }
}

/* Traveling dots */
.arrow-traveling-dot {
  opacity: 0;
  animation: dot-appear 0.5s ease-out 2s forwards;
}

.arrow-traveling-dot--1 {
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.8));
}

.arrow-traveling-dot--2 {
  filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.7));
}

.arrow-traveling-dot--3 {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.8));
}

@keyframes dot-appear {
  to {
    opacity: 1;
  }
}

/* Arrow head at the end */
.curved-arrow-head {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  animation: arrow-head-bounce 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.curved-arrow-head svg {
  width: 22px;
  height: 22px;
  color: #22C55E;
}

.dark .curved-arrow-head {
  background: linear-gradient(135deg, rgba(134, 239, 172, 0.25), rgba(134, 239, 172, 0.1));
  border-color: rgba(134, 239, 172, 0.5);
  box-shadow: 0 0 24px rgba(134, 239, 172, 0.4);
}

.dark .curved-arrow-head svg {
  color: #86EFAC;
}

@keyframes arrow-head-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* ========================================
   SOPHISTICATED SECTION DIVIDERS
   Premium visual separators inspired by Linear, Stripe, Vercel
   ======================================== */

/* --- Divider Type 1: Gradient Wave --- */
.section-divider-wave {
  position: relative;
  height: 120px;
  overflow: hidden;
  margin: -1px 0;
}

.section-divider-wave::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background:
    radial-gradient(ellipse 50% 80% at 25% 100%, rgba(249, 115, 22, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 75% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%);
}

.dark .section-divider-wave::before {
  background:
    radial-gradient(ellipse 50% 80% at 25% 100%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 75% 100%, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
}

/* SVG wave shape */
.section-divider-wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

.section-divider-wave svg path {
  fill: rgba(249, 115, 22, 0.05);
}

.dark .section-divider-wave svg path {
  fill: rgba(249, 115, 22, 0.08);
}

/* --- Divider Type 2: Elegant Line with Accent --- */
.section-divider-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  gap: 16px;
}

@media (min-width: 640px) {
  .section-divider-line {
    padding: 32px 0;
  }
}

@media (min-width: 1024px) {
  .section-divider-line {
    padding: 48px 0;
  }
}

.section-divider-line::before,
.section-divider-line::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 200px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 200, 200, 0.4) 50%,
    transparent 100%
  );
}

.section-divider-line::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 180, 180, 0.4) 100%
  );
}

.section-divider-line::after {
  background: linear-gradient(90deg,
    rgba(180, 180, 180, 0.4) 0%,
    transparent 100%
  );
}

.dark .section-divider-line::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 100, 100, 0.5) 100%
  );
}

.dark .section-divider-line::after {
  background: linear-gradient(90deg,
    rgba(100, 100, 100, 0.5) 0%,
    transparent 100%
  );
}

/* Center accent dot */
.section-divider-line .divider-accent {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #CCCCCC;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  animation: divider-pulse 3s ease-in-out infinite;
}

.dark .section-divider-line .divider-accent {
  background: #555555;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

@keyframes divider-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* --- Divider Type 3: Diamond Pattern --- */
.section-divider-diamonds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 0;
}

.section-divider-diamonds .diamond {
  width: 6px;
  height: 6px;
  background: #CCCCCC;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.section-divider-diamonds .diamond:nth-child(2) {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  opacity: 1;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
}

.dark .section-divider-diamonds .diamond {
  background: #555555;
}

.dark .section-divider-diamonds .diamond:nth-child(2) {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
}

/* --- Divider Type: Flow Arrow (smooth section transition) --- */
.section-divider-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 0;
  position: relative;
}

.section-divider-flow .flow-line {
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 197, 94, 0.3) 50%,
    transparent 100%
  );
}

.dark .section-divider-flow .flow-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 197, 94, 0.4) 50%,
    transparent 100%
  );
}

.section-divider-flow .flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(249, 115, 22, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.2);
  animation: pulse-gentle 2s ease-in-out infinite;
}

.dark .section-divider-flow .flow-arrow {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(249, 115, 22, 0.15));
  border-color: rgba(34, 197, 94, 0.3);
}

.section-divider-flow .flow-arrow svg {
  width: 24px;
  height: 24px;
  color: #22C55E;
}

.dark .section-divider-flow .flow-arrow svg {
  color: #4ADE80;
}

@keyframes pulse-gentle {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(4px);
    opacity: 0.7;
  }
}

/* --- Divider Type 4: Gradient Fade Band --- */
.section-divider-fade {
  height: 80px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(249, 115, 22, 0.03) 30%,
    rgba(34, 197, 94, 0.03) 70%,
    transparent 100%
  );
  position: relative;
}

.section-divider-fade::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 400px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 200, 200, 0.3) 20%,
    rgba(200, 200, 200, 0.3) 80%,
    transparent 100%
  );
}

.dark .section-divider-fade {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(249, 115, 22, 0.05) 30%,
    rgba(34, 197, 94, 0.05) 70%,
    transparent 100%
  );
}

.dark .section-divider-fade::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 100, 100, 0.3) 20%,
    rgba(100, 100, 100, 0.3) 80%,
    transparent 100%
  );
}

/* --- Divider Type 5: Sparkle Divider --- */
.section-divider-sparkle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}

@media (min-width: 1024px) {
  .section-divider-sparkle {
    padding: 24px 0;
  }
}

.section-divider-sparkle .sparkle-line {
  width: 100%;
  max-width: 500px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 200, 200, 0.2) 20%,
    rgba(200, 200, 200, 0.4) 50%,
    rgba(200, 200, 200, 0.2) 80%,
    transparent 100%
  );
  position: relative;
}

.dark .section-divider-sparkle .sparkle-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 100, 100, 0.2) 20%,
    rgba(100, 100, 100, 0.4) 50%,
    rgba(100, 100, 100, 0.2) 80%,
    transparent 100%
  );
}

.section-divider-sparkle .sparkle-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-divider-sparkle .sparkle-icon svg {
  width: 16px;
  height: 16px;
  color: #999999;
}

.dark .section-divider-sparkle .sparkle-icon {
  background: #1A1A1A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .section-divider-sparkle .sparkle-icon svg {
  color: #777777;
}

/* --- Divider Type 6: Mesh Gradient Band --- */
.section-divider-mesh {
  height: 100px;
  position: relative;
  overflow: hidden;
}

.section-divider-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(249, 115, 22, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
}

.dark .section-divider-mesh::before {
  background:
    radial-gradient(circle at 20% 50%, rgba(249, 115, 22, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

/* --- Divider Type 7: Steps Connector --- */
.section-divider-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  gap: 8px;
}

.section-divider-steps .step-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #CCCCCC;
  transition: all 0.3s ease;
}

.section-divider-steps .step-dot:nth-child(1) { animation: step-fade 2s ease-in-out infinite 0s; }
.section-divider-steps .step-dot:nth-child(2) { animation: step-fade 2s ease-in-out infinite 0.2s; }
.section-divider-steps .step-dot:nth-child(3) { animation: step-fade 2s ease-in-out infinite 0.4s; }
.section-divider-steps .step-dot:nth-child(4) { animation: step-fade 2s ease-in-out infinite 0.6s; }
.section-divider-steps .step-dot:nth-child(5) { animation: step-fade 2s ease-in-out infinite 0.8s; }

@keyframes step-fade {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    background: #F97316;
  }
}

.dark .section-divider-steps .step-dot {
  background: #555555;
}

/* --- Section Background Alternates --- */
.section-bg-subtle {
  background: linear-gradient(180deg,
    rgba(249, 249, 249, 0) 0%,
    rgba(249, 249, 249, 0.5) 20%,
    rgba(249, 249, 249, 0.5) 80%,
    rgba(249, 249, 249, 0) 100%
  );
}

.dark .section-bg-subtle {
  background: linear-gradient(180deg,
    rgba(20, 20, 20, 0) 0%,
    rgba(20, 20, 20, 0.5) 20%,
    rgba(20, 20, 20, 0.5) 80%,
    rgba(20, 20, 20, 0) 100%
  );
}

.section-bg-warm {
  background: linear-gradient(180deg,
    rgba(255, 247, 237, 0) 0%,
    rgba(255, 247, 237, 0.4) 20%,
    rgba(255, 247, 237, 0.4) 80%,
    rgba(255, 247, 237, 0) 100%
  );
}

.dark .section-bg-warm {
  background: linear-gradient(180deg,
    rgba(30, 20, 15, 0) 0%,
    rgba(30, 20, 15, 0.4) 20%,
    rgba(30, 20, 15, 0.4) 80%,
    rgba(30, 20, 15, 0) 100%
  );
}

/* --- Decorative Corner Accents --- */
.section-corner-accent {
  position: relative;
}

.section-corner-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #F97316 0%, #22C55E 100%);
  border-radius: 2px;
  opacity: 0.6;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .section-divider-wave {
    height: 80px;
  }

  .section-divider-line {
    padding: 32px 16px;
  }

  .section-divider-fade {
    height: 60px;
  }

  .section-divider-mesh {
    height: 70px;
  }

  .section-divider-sparkle {
    padding: 16px 0;
  }

  .section-divider-sparkle .sparkle-line {
    max-width: 80%;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .section-divider-line .divider-accent,
  .section-divider-steps .step-dot {
    animation: none;
  }
}

/* ============================================
   Chat Input Attachment Button
   ============================================ */

.chat-widget-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-widget-attach-btn:hover {
  background: #E5E7EB;
  color: #6B7280;
}

.dark .chat-widget-attach-btn:hover {
  background: #333;
  color: #D1D5DB;
}

/* ============================================
   Inline Delivery Button (appears in message)
   ============================================ */

.chat-inline-delivery-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.chat-inline-delivery-btn:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.chat-inline-delivery-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.chat-inline-delivery-btn svg {
  flex-shrink: 0;
}

.dark .chat-inline-delivery-btn {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

.dark .chat-inline-delivery-btn:hover {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
}

/* ============================================
   Inline Quick Actions (inside message bubble)
   ============================================ */

.chat-inline-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  border: none;
}

.dark .chat-inline-quick-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.chat-inline-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chat-inline-qa-btn:active {
  transform: scale(0.97);
  background: #E5E7EB;
}

.dark .chat-inline-qa-btn {
  color: #D1D5DB;
  background: #374151;
  border-color: #4B5563;
}

.dark .chat-inline-qa-btn:active {
  background: #4B5563;
}

.chat-inline-qa-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #F97316;
}

/* Primary quick action - accent color, prominent */
.chat-inline-qa-btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  border-color: transparent;
  color: white;
  padding: 10px 16px;
}

.chat-inline-qa-btn-primary:active {
  background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
}

.chat-inline-qa-btn-primary svg {
  color: white;
}

.dark .chat-inline-qa-btn-primary {
  background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
  border-color: transparent;
  color: white;
}

.dark .chat-inline-qa-btn-primary:active {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

/* Secondary quick action - subtle, outline-like */
.chat-inline-qa-btn-secondary {
  background: transparent;
  border-color: #D1D5DB;
  color: #6B7280;
  padding: 6px 12px;
  font-size: 12px;
}

.chat-inline-qa-btn-secondary:active {
  background: #F3F4F6;
}

.dark .chat-inline-qa-btn-secondary {
  background: transparent;
  border-color: #4B5563;
  color: #9CA3AF;
}

.dark .chat-inline-qa-btn-secondary:active {
  background: #374151;
}

/* ============================================
   Inline Delivery Form (appears in chat)
   ============================================ */

.chat-inline-form {
  margin: 12px 0;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.chat-inline-form.is-animating {
  opacity: 1;
  transform: translateY(0);
}

.chat-inline-form.removing {
  opacity: 0;
  transform: translateY(-10px);
}

.dark .chat-inline-form {
  background: #1E1E1E;
  border-color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chat-inline-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.chat-inline-form-header svg {
  flex-shrink: 0;
}

.chat-inline-form-header span {
  flex: 1;
}

.chat-inline-form-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-inline-form-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chat-inline-form-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-inline-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chat-inline-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-inline-form-field label {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}

.dark .chat-inline-form-field label {
  color: #9CA3AF;
}

.chat-inline-form-field input {
  padding: 8px 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  color: #111827;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-inline-form-field input:focus {
  outline: none;
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.chat-inline-form-field input::placeholder {
  color: #9CA3AF;
}

.dark .chat-inline-form-field input {
  background: #252525;
  border-color: #404040;
  color: #F3F4F6;
}

.dark .chat-inline-form-field input:focus {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.dark .chat-inline-form-field input::placeholder {
  color: #6B7280;
}

.chat-inline-form-error {
  padding: 8px 12px;
  background: #FEE2E2;
  border-radius: 6px;
  font-size: 13px;
  color: #DC2626;
}

.dark .chat-inline-form-error {
  background: rgba(220, 38, 38, 0.15);
  color: #FCA5A5;
}

.chat-inline-form-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
}

.dark .chat-inline-form-actions {
  background: #151515;
  border-color: #333;
}

.chat-inline-form-cancel {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-inline-form-cancel:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.dark .chat-inline-form-cancel {
  border-color: #404040;
  color: #9CA3AF;
}

.dark .chat-inline-form-cancel:hover {
  background: #252525;
  border-color: #525252;
}

.chat-inline-form-submit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.chat-inline-form-submit:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}

.chat-inline-form-submit:active {
  transform: translateY(0);
}

/* ============================================
   MOBILE INPUT ZOOM FIX
   iOS Safari auto-zooms when focusing inputs with font-size < 16px
   This fix ensures inputs have 16px font on mobile to prevent zoom
   ============================================ */

/* ============================================
   MOBILE CHAT - NUCLEAR OPTION

   On iOS Safari, blur effects from the landing page can "bleed through"
   even with solid backgrounds. The solution is to HIDE everything
   except the chat when it's open.

   This ensures:
   1. No blur effects can affect the chat
   2. Clean, solid backgrounds throughout
   3. No transparency issues
   ============================================ */
@media screen and (max-width: 1023px) {
  /* Prevent iOS zoom on all chat inputs (16px minimum) */
  .chat-widget-textarea,
  .chat-inline-form-field input,
  .chat-safety-popup input,
  .chat-safety-popup textarea,
  .chat-safety-input,
  .chat-checkout-popup input,
  .chat-checkout-popup textarea,
  .chat-checkout-popup select,
  .chat-delivery-form input,
  .chat-delivery-form textarea,
  .chat-delivery-form select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* =============================================
     iOS SAFARI FIX: Solid background chat
     ============================================= */

  /* Hide backdrop on mobile - not needed */
  .chat-widget-backdrop {
    display: none !important;
  }

  /* Full-screen container with SOLID background */
  .chat-widget-container.is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: -webkit-fill-available !important;
    /* SOLID WHITE background - no transparency, no blur */
    background: #FFFFFF !important;
    z-index: 999999 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important; /* Force GPU layer */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* Ensure no blur effects on container */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .dark .chat-widget-container.is-open {
    background-color: #0B0B0B !important;
    background: #0B0B0B !important;
  }

  /* Panel - INITIAL state (off-screen, hidden) */
  .chat-widget-panel {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: none !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    /* INITIAL: off-screen for slide-up animation */
    transform: translateY(100px) !important;
    opacity: 0 !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    /* iOS-style spring animation */
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease-out !important;
  }

  /* Panel - FINAL state (on-screen, visible) */
  .chat-widget-panel.is-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    border-radius: 0 !important;
  }

  .dark .chat-widget-panel {
    background-color: #0B0B0B !important;
    background: #0B0B0B !important;
  }

  /* Header with safe area padding */
  .chat-widget-header {
    flex-shrink: 0 !important;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    background-color: #FAFAFA !important;
    background: #FAFAFA !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .dark .chat-widget-header {
    background-color: #1A1A1A !important;
    background: #1A1A1A !important;
  }

  /* Messages - scrollable area */
  .chat-widget-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    /* iOS Safari: force GPU layer to prevent black flash on DOM changes */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important;
  }

  .dark .chat-widget-messages {
    background-color: #0B0B0B !important;
    background: #0B0B0B !important;
  }

  /* Input area with safe area padding */
  .chat-widget-input-area {
    flex-shrink: 0 !important;
    position: relative !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid #EEEEEE !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .dark .chat-widget-input-area {
    background-color: #141414 !important;
    background: #141414 !important;
    border-top-color: #2A2A2A !important;
  }

  /* Inline quick actions below message bubble */
  .chat-inline-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border: none;
    /* iOS Safari: GPU layer to prevent flash on removal */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .dark .chat-inline-quick-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .chat-inline-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    /* iOS tap highlight fix */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  .chat-inline-qa-btn:active {
    transform: scale(0.97);
    background: #E5E7EB;
  }

  .dark .chat-inline-qa-btn {
    color: #D1D5DB;
    background: #374151;
    border-color: #4B5563;
  }

  .dark .chat-inline-qa-btn:active {
    background: #4B5563;
  }

  .chat-inline-qa-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #F97316;
  }

  /* Primary quick action (mobile) */
  .chat-inline-qa-btn-primary {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    border-color: transparent;
    color: white;
    padding: 10px 16px;
  }

  .chat-inline-qa-btn-primary:active {
    background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
  }

  .chat-inline-qa-btn-primary svg {
    color: white;
  }

  .dark .chat-inline-qa-btn-primary {
    background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
    border-color: transparent;
    color: white;
  }

  /* Secondary quick action (mobile) */
  .chat-inline-qa-btn-secondary {
    background: transparent;
    border-color: #D1D5DB;
    color: #6B7280;
    padding: 6px 12px;
    font-size: 12px;
  }

  .chat-inline-qa-btn-secondary:active {
    background: #F3F4F6;
  }

  .dark .chat-inline-qa-btn-secondary {
    background: transparent;
    border-color: #4B5563;
    color: #9CA3AF;
  }

  /* Inline forms */
  .chat-inline-form {
    scroll-margin-bottom: 100px;
  }

  /* Safety popup - must be above chat container (z-index: 999999) */
  .chat-safety-popup {
    z-index: 9999999 !important;
  }

  /* Safety popup content - solid background, no blur */
  .chat-safety-popup-content {
    background-color: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .dark .chat-safety-popup-content {
    background-color: #1A1A1A !important;
  }

  /* Safety popup backdrop - no blur on mobile */
  .chat-safety-popup-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Exit popup overlay - solid background */
  .chat-exit-popup-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Exit popup card */
  .chat-exit-popup-card {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  .dark .chat-exit-popup-card {
    background-color: #1A1A1A !important;
    background: #1A1A1A !important;
  }
}

/* ============================================
   Order Summary Card - Beautiful confirmation card
   ============================================ */

.chat-order-summary {
  margin: 8px 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  max-width: 320px;
}

.chat-order-summary-header {
  background: linear-gradient(90deg, #e94560 0%, #ff6b6b 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-order-summary-header svg {
  width: 20px;
  height: 20px;
  color: white;
}

.chat-order-summary-header span {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.chat-order-summary-body {
  padding: 16px;
}

.chat-order-summary-product {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.chat-order-summary-product-name {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  padding-right: 12px;
}

.chat-order-summary-product-price {
  color: #4ade80;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-order-summary-delivery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-order-summary-delivery-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.chat-order-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.chat-order-summary-row svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.chat-order-summary-footer {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  text-align: center;
}

.chat-order-summary-footer span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

/* Light theme */
.chat-order-summary.light {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chat-order-summary.light .chat-order-summary-product-name {
  color: #1a1a2e;
}

.chat-order-summary.light .chat-order-summary-product {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.chat-order-summary.light .chat-order-summary-delivery-title {
  color: rgba(0, 0, 0, 0.5);
}

.chat-order-summary.light .chat-order-summary-row {
  color: #333;
}

.chat-order-summary.light .chat-order-summary-row svg {
  color: rgba(0, 0, 0, 0.4);
}

.chat-order-summary.light .chat-order-summary-footer {
  background: rgba(0, 0, 0, 0.03);
}

.chat-order-summary.light .chat-order-summary-footer span {
  color: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Chat Delivery Form (Nova Poshta) - POPUP VERSION (legacy)
   ============================================ */

.chat-delivery-form {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: all 0.3s ease;
}

.chat-delivery-form.hidden {
  display: none;
}

.chat-delivery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chat-delivery-form.is-visible .chat-delivery-backdrop {
  opacity: 1;
}

.chat-delivery-content {
  position: relative;
  width: 100%;
  max-width: 340px;
  max-height: 85vh;
  background: white;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.chat-delivery-form.is-visible .chat-delivery-content {
  transform: translateY(0);
}

.dark .chat-delivery-content {
  background: #1A1A1A;
}

/* iOS safe area padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chat-delivery-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Drag handle for mobile swipe-to-close */
.chat-delivery-drag-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.chat-delivery-drag-handle:active {
  cursor: grabbing;
}

.chat-delivery-drag-indicator {
  width: 36px;
  height: 4px;
  background: #D1D5DB;
  border-radius: 2px;
}

.dark .chat-delivery-drag-indicator {
  background: #4B5563;
}

/* Desktop styles */
@media (min-width: 768px) {
  .chat-delivery-form {
    align-items: center;
  }

  .chat-delivery-content {
    border-radius: 20px;
    transform: translateY(20px);
    opacity: 0;
    max-height: 80vh;
  }

  .chat-delivery-form.is-visible .chat-delivery-content {
    transform: translateY(0);
    opacity: 1;
  }

  /* Hide drag handle on desktop */
  .chat-delivery-drag-handle {
    display: none;
  }
}

/* Header */
.chat-delivery-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.dark .chat-delivery-header {
  border-color: #333;
}

.chat-delivery-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border-radius: 10px;
  color: white;
}

.chat-delivery-header-icon svg {
  width: 20px;
  height: 20px;
}

.chat-delivery-header-text {
  flex: 1;
}

.chat-delivery-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dark .chat-delivery-title {
  color: #F9FAFB;
}

.chat-delivery-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin: 2px 0 0;
}

.dark .chat-delivery-subtitle {
  color: #9CA3AF;
}

.chat-delivery-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F3F4F6;
  border: none;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-delivery-close:hover {
  background: #E5E7EB;
  color: #374151;
}

.dark .chat-delivery-close {
  background: #252525;
  color: #9CA3AF;
}

.dark .chat-delivery-close:hover {
  background: #333;
  color: #D1D5DB;
}

/* Form Fields */
.chat-delivery-form-fields {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-delivery-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-delivery-field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.dark .chat-delivery-field label {
  color: #D1D5DB;
}

.chat-delivery-field input {
  padding: 8px 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  transition: all 0.2s ease;
}

.chat-delivery-field input:focus {
  outline: none;
  background: white;
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.chat-delivery-field input::placeholder {
  color: #9CA3AF;
}

.dark .chat-delivery-field input {
  background: #252525;
  border-color: #333;
  color: #F9FAFB;
}

.dark .chat-delivery-field input:focus {
  background: #1E1E1E;
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.dark .chat-delivery-field input::placeholder {
  color: #6B7280;
}

/* Error */
.chat-delivery-error {
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #DC2626;
  font-size: 13px;
}

.dark .chat-delivery-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #F87171;
}

/* Actions */
.chat-delivery-actions {
  display: flex;
  gap: 12px;
  padding-top: 4px;
}

.chat-delivery-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.chat-delivery-btn.primary {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.chat-delivery-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.chat-delivery-btn.secondary {
  background: #F3F4F6;
  color: #374151;
}

.chat-delivery-btn.secondary:hover {
  background: #E5E7EB;
}

.dark .chat-delivery-btn.secondary {
  background: #252525;
  color: #D1D5DB;
}

.dark .chat-delivery-btn.secondary:hover {
  background: #333;
}

/* Privacy Note */
.chat-delivery-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px 20px;
  font-size: 12px;
  color: #9CA3AF;
}

.chat-delivery-privacy svg {
  flex-shrink: 0;
}

.dark .chat-delivery-privacy {
  color: #6B7280;
}

/* ========================================
   CHAT PROMPT CARD
   Hero section card that leads to chat
   ======================================== */

.hero-chat-prompt {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .hero-chat-prompt {
    max-width: none;
  }
}

.chat-prompt-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.dark .chat-prompt-card {
  background: #141414;
  border-color: #2A2A2A;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .chat-prompt-card {
    padding: 28px 24px;
  }
}

.chat-prompt-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Free tag */
.chat-prompt-free-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #16A34A;
  background: #F0FDF4;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: auto;
  animation: tagPulse 3s ease-in-out infinite;
}

.dark .chat-prompt-free-tag {
  color: #86EFAC;
  background: rgba(34, 197, 94, 0.15);
}

@keyframes tagPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.chat-prompt-description {
  font-size: 0.9375rem;
  color: #555555;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.dark .chat-prompt-description {
  color: #B0B0B0;
}

@media (min-width: 768px) {
  .chat-prompt-description {
    font-size: 1rem;
  }
}

/* Example Questions - clean simple list */
.chat-prompt-examples {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-prompt-examples li {
  font-size: 0.9375rem;
  color: #555555;
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.chat-prompt-examples li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F97316;
}

.dark .chat-prompt-examples li {
  color: #B0B0B0;
}

/* Trust line - simple inline */
.chat-prompt-trust-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #16A34A;
  font-weight: 500;
}

.chat-prompt-trust-line svg {
  flex-shrink: 0;
}

.dark .chat-prompt-trust-line {
  color: #86EFAC;
}

.chat-prompt-dot {
  color: #AAAAAA;
}

.dark .chat-prompt-dot {
  color: #666666;
}

/* Icon styles */
.chat-prompt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Search icon - orange gradient with pulse animation */
.chat-prompt-icon--search {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: white;
  animation: iconPulse 2.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
    transform: scale(1.05);
  }
}

/* Shield icon - green gradient for trust/protection */
.chat-prompt-icon--shield {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: white;
}

.chat-prompt-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111111;
  margin: 0;
  line-height: 1.3;
}

.dark .chat-prompt-title {
  color: #F7F7F7;
}

@media (min-width: 768px) {
  .chat-prompt-title {
    font-size: 1.25rem;
  }
}

/* Desktop fake input with typewriter animation */
.chat-prompt-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark .chat-prompt-input-wrapper {
  background: #1F1F1F;
  border-color: #333333;
}

.chat-prompt-input-wrapper:hover {
  border-color: #FF6B00;
  background: #FFF9F5;
}

.dark .chat-prompt-input-wrapper:hover {
  border-color: #FF8533;
  background: #2A2520;
}

.chat-prompt-input-wrapper:focus {
  outline: none;
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.chat-prompt-input-icon {
  flex-shrink: 0;
  color: #999999;
}

.dark .chat-prompt-input-icon {
  color: #666666;
}

.chat-prompt-input-placeholder {
  flex: 1;
  font-size: 15px;
  color: #999999;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .chat-prompt-input-placeholder {
  color: #888888;
}

.chat-prompt-chat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
  border-radius: 10px;
  color: white;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-prompt-input-wrapper:hover .chat-prompt-chat-icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.dark .chat-prompt-chat-icon {
  background: linear-gradient(135deg, #FF8533 0%, #FFA366 100%);
}

.chat-prompt-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(249, 115, 22, 0.5);
  }
}

.chat-prompt-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.chat-prompt-cta:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .chat-prompt-cta {
    font-size: 1.0625rem;
    padding: 18px 28px;
  }
}

/* Chat prompt help toggle - mobile only */
.chat-prompt-help-toggle {
  margin-top: 16px;
  border-radius: 12px;
  background: #F8F9FA;
  border: 1px solid #E5E7EB;
  overflow: hidden;
}

.dark .chat-prompt-help-toggle {
  background: #1F2937;
  border-color: #374151;
}

.chat-prompt-help-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  font-size: 0.8125rem;
  color: #6B7280;
  cursor: pointer;
  list-style: none;
}

.chat-prompt-help-btn::-webkit-details-marker {
  display: none;
}

.chat-prompt-help-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.dark .chat-prompt-help-btn {
  color: #9CA3AF;
}

.chat-prompt-help-content {
  padding: 0 14px 14px;
  font-size: 0.8125rem;
  color: #374151;
  line-height: 1.5;
}

.chat-prompt-help-content strong {
  display: block;
  margin-bottom: 4px;
  color: #111827;
}

.chat-prompt-help-content p {
  margin: 0;
  color: #6B7280;
}

.dark .chat-prompt-help-content {
  color: #D1D5DB;
}

.dark .chat-prompt-help-content strong {
  color: #F3F4F6;
}

.dark .chat-prompt-help-content p {
  color: #9CA3AF;
}

/* ========================================
   PRODUCT SHOWCASE CAROUSEL
   Hero section product display with price comparison
   ======================================== */

.product-showcase {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 24px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

@media (min-width: 768px) {
  .product-showcase {
    max-width: 700px;
    padding: 40px 48px;
  }
}

@media (min-width: 1024px) {
  .product-showcase {
    max-width: 800px;
  }
}

.dark .product-showcase {
  background: #141414;
  border-color: #2A2A2A;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Header with badge */
.showcase-header {
  text-align: center;
  margin-bottom: 20px;
}

.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid #F59E0B;
}

.dark .showcase-badge {
  background: linear-gradient(135deg, #78350F 0%, #92400E 100%);
  color: #FEF3C7;
  border-color: #D97706;
}

.showcase-badge svg {
  color: #F59E0B;
}

.dark .showcase-badge svg {
  color: #FCD34D;
}

/* Cards container - fixed height to prevent layout shift */
.showcase-cards {
  position: relative;
  height: 320px;
}

@media (min-width: 768px) {
  .showcase-cards {
    height: 340px;
  }
}

/* Individual card */
.showcase-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  opacity: 0;
  transform: translateX(30px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.showcase-card.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  position: relative;
}

.showcase-card.prev {
  opacity: 0;
  transform: translateX(-30px) scale(0.95);
}

.showcase-card.next {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
}

/* Product image/emoji */
.showcase-product-image {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .showcase-product-image {
    width: 96px;
    height: 96px;
  }
}

.dark .showcase-product-image {
  background: linear-gradient(135deg, #1F1F1F 0%, #2A2A2A 100%);
}

.showcase-emoji {
  font-size: 44px;
  line-height: 1;
}

@media (min-width: 768px) {
  .showcase-emoji {
    font-size: 48px;
  }
}

/* Product info */
.showcase-product-info {
  text-align: center;
  margin-bottom: 24px;
}

.showcase-product-name {
  font-size: 20px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .showcase-product-name {
    font-size: 22px;
  }
}

.dark .showcase-product-name {
  color: #F7F7F7;
}

.showcase-product-brand {
  font-size: 15px;
  color: #666666;
}

@media (min-width: 768px) {
  .showcase-product-brand {
    font-size: 16px;
  }
}

.dark .showcase-product-brand {
  color: #9A9A9A;
}

/* Price comparison section */
.showcase-prices {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .showcase-prices {
    max-width: 420px;
    gap: 20px;
  }
}

.showcase-price-competitor,
.showcase-price-ours {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px;
  border-radius: 14px;
}

@media (min-width: 768px) {
  .showcase-price-competitor,
  .showcase-price-ours {
    padding: 16px 24px;
  }
}

.showcase-price-competitor {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.dark .showcase-price-competitor {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.showcase-price-ours {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.dark .showcase-price-ours {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.showcase-price-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .showcase-price-label {
    font-size: 13px;
  }
}

.showcase-price-competitor .showcase-price-label {
  color: #DC2626;
}

.dark .showcase-price-competitor .showcase-price-label {
  color: #FCA5A5;
}

.showcase-price-ours .showcase-price-label {
  color: #16A34A;
}

.dark .showcase-price-ours .showcase-price-label {
  color: #86EFAC;
}

.showcase-price-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .showcase-price-value {
    font-size: 26px;
  }
}

.showcase-price-old {
  color: #DC2626;
  text-decoration: line-through;
  text-decoration-color: #DC2626;
}

.dark .showcase-price-old {
  color: #FCA5A5;
  text-decoration-color: #FCA5A5;
}

.showcase-price-new {
  color: #16A34A;
}

.dark .showcase-price-new {
  color: #86EFAC;
}

/* Savings badge */
.showcase-savings {
  display: flex;
  align-items: center;
  gap: 12px;
}

.showcase-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: white;
}

.showcase-savings-badge svg {
  width: 14px;
  height: 14px;
}

.showcase-savings-amount {
  font-size: 14px;
  font-weight: 600;
  color: #16A34A;
}

.dark .showcase-savings-amount {
  color: #86EFAC;
}

/* Navigation dots */
.showcase-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #D1D5DB;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.showcase-dot:hover {
  background: #9CA3AF;
}

.showcase-dot.active {
  width: 24px;
  border-radius: 4px;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

.dark .showcase-dot {
  background: #404040;
}

.dark .showcase-dot:hover {
  background: #525252;
}

.dark .showcase-dot.active {
  background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
}

/* Progress bar */
.showcase-progress {
  margin-top: 16px;
  height: 3px;
  background: #E5E7EB;
  overflow: hidden;
  border-radius: 2px;
}

.dark .showcase-progress {
  background: #2A2A2A;
}

.showcase-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F97316, #EA580C);
  transform-origin: left;
}

@keyframes showcase-progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .product-showcase {
    padding: 20px 16px 32px;
    border-radius: 20px;
  }

  .showcase-cards {
    height: 310px;
  }

  .showcase-product-image {
    width: 70px;
    height: 70px;
    border-radius: 16px;
  }

  .showcase-emoji {
    font-size: 36px;
  }

  .showcase-product-name {
    font-size: 16px;
  }

  .showcase-prices {
    gap: 12px;
  }

  .showcase-price-competitor,
  .showcase-price-ours {
    padding: 10px 12px;
  }

  .showcase-price-value {
    font-size: 18px;
  }
}

/* ========================================
   GARAGE SECTION - Centered layout
   ======================================== */

.garage-section {
  padding: 0 16px 48px;
  position: relative;
}

@media (min-width: 640px) {
  .garage-section {
    padding: 0 24px 56px;
  }
}

@media (min-width: 1024px) {
  .garage-section {
    padding: 0 32px 64px;
  }
}

.garage-section-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Centered layout */
.garage-section-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Section title */
/* AI Mascot - friendly robot helper */
.garage-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.garage-mascot-robot {
  animation: mascotFloat 3s ease-in-out infinite;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.garage-mascot-robot svg {
  filter: drop-shadow(0 4px 12px rgba(249, 115, 22, 0.25));
}

/* Eye blink animation */
.mascot-eye {
  animation: mascotBlink 4s ease-in-out infinite;
}

.mascot-eye-right {
  animation-delay: 0.1s;
}

@keyframes mascotBlink {
  0%, 45%, 55%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}

/* Arm wave animation */
.mascot-arm-right {
  transform-origin: left center;
  animation: mascotWave 2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes mascotWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(10deg); }
}

.garage-mascot-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #F97316;
  background: rgba(249, 115, 22, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
}

.dark .garage-mascot-label {
  background: rgba(249, 115, 22, 0.15);
}

.garage-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  font-family: 'Rubik', sans-serif;
  margin-bottom: 8px;
  line-height: 1.2;
}

.dark .garage-section-title {
  color: #F7F7F7;
}

@media (min-width: 640px) {
  .garage-section-title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .garage-section-title {
    font-size: 36px;
  }
}

/* Section subtitle */
.garage-section-subtitle {
  font-size: 16px;
  color: #666666;
  margin-bottom: 32px;
}

.dark .garage-section-subtitle {
  color: #999999;
}

@media (min-width: 640px) {
  .garage-section-subtitle {
    font-size: 18px;
  }
}

/* Benefits list - centered horizontal on desktop */
.garage-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

@media (min-width: 768px) {
  .garage-benefits-list {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    max-width: 800px;
  }
}

.garage-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  animation: benefitFadeIn 0.6s ease-out forwards;
}

.garage-benefit-item:nth-child(1) { animation-delay: 0.1s; }
.garage-benefit-item:nth-child(2) { animation-delay: 0.25s; }
.garage-benefit-item:nth-child(3) { animation-delay: 0.4s; }

@keyframes benefitFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .garage-benefit-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 200px;
  }
}

.garage-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.garage-benefit-item:hover .garage-benefit-icon {
  transform: scale(1.08);
}

.garage-benefit-icon svg {
  transition: transform 0.3s ease;
}

.garage-benefit-item:hover .garage-benefit-icon svg {
  transform: scale(1.1);
}

.garage-benefit-icon--blue {
  background: rgba(14, 165, 233, 0.1);
  color: #0EA5E9;
}

.garage-benefit-icon--green {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
}

.garage-benefit-icon--orange {
  background: rgba(249, 115, 22, 0.1);
  color: #F97316;
}

.dark .garage-benefit-icon--blue {
  background: rgba(14, 165, 233, 0.15);
}

.dark .garage-benefit-icon--green {
  background: rgba(34, 197, 94, 0.15);
}

.dark .garage-benefit-icon--orange {
  background: rgba(249, 115, 22, 0.15);
}

.garage-benefit-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .garage-benefit-content {
    align-items: center;
  }
}

.garage-benefit-name {
  font-size: 15px;
  font-weight: 600;
  color: #111111;
}

.dark .garage-benefit-name {
  color: #F7F7F7;
}

.garage-benefit-desc {
  font-size: 13px;
  color: #666666;
}

.dark .garage-benefit-desc {
  color: #999999;
}

/* Card centered */
.garage-section-card {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

/* Info tooltip button - explains garage value */
.garage-info-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.garage-info-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #0EA5E9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.garage-info-btn:hover {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.3);
}

.dark .garage-info-btn {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.25);
}

.dark .garage-info-btn:hover {
  background: rgba(14, 165, 233, 0.18);
}

.garage-info-btn svg {
  flex-shrink: 0;
}

/* Tooltip popup */
.garage-info-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 300px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 50;
}

.garage-info-tooltip.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dark .garage-info-tooltip {
  background: #1A1A1A;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.garage-info-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .garage-info-tooltip::after {
  background: #1A1A1A;
  border-color: rgba(255, 255, 255, 0.1);
}

.garage-info-tooltip-title {
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 8px;
}

.dark .garage-info-tooltip-title {
  color: #F7F7F7;
}

.garage-info-tooltip-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}

.dark .garage-info-tooltip-text {
  color: #AAAAAA;
}

@media (max-width: 768px) {
  .garage-info-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: calc(100vw - 40px);
    max-width: 300px;
    transform: translate(-50%, -50%) scale(0.95);
  }

  .garage-info-tooltip.active {
    transform: translate(-50%, -50%) scale(1);
  }

  .garage-info-tooltip::after {
    display: none;
  }
}

/* Legacy - remove old benefits list rules */
.garage-benefits-list-old {
    max-width: 320px;
    margin: 0 auto;
  }

  .garage-benefit-item {
    text-align: left;
  }
}

/* ========================================
   GARAGE CARD - Compact animated onboarding
   ======================================== */

/* Generic hidden utility for garage - must use !important to override other rules */
.garage-card .hidden {
  display: none !important;
}

.garage-card-content.hidden {
  display: none !important;
}

.garage-btn-spinner.hidden {
  display: none !important;
}

/* Main card container */
.garage-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.dark .garage-card {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Header with icon, title, and tag */
.garage-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.garage-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F35 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

/* Car SVG inside the icon - animated */
.garage-car-svg {
  /* Subtle bounce like car is driving on road */
  animation: carBodyBounce 0.6s ease-in-out infinite;
}

@keyframes carBodyBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5px);
  }
}

/* Wheel spin animation */
.garage-wheel-spoke--left,
.garage-wheel-spoke--right {
  transform-origin: 7px 17px;
  animation: wheelSpin 0.4s linear infinite;
}

.garage-wheel-spoke--right {
  transform-origin: 17px 17px;
}

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

.garage-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  font-family: 'Rubik', sans-serif;
}

.dark .garage-card-title {
  color: #F7F7F7;
}

/* Benefit tag */
.garage-card-tag {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0EA5E9;
  background: rgba(14, 165, 233, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  animation: tagPulse 3s ease-in-out infinite;
}

.dark .garage-card-tag {
  background: rgba(14, 165, 233, 0.2);
}

/* Content area */
.garage-card-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Ghost preview card with shimmer */
.garage-ghost-card {
  position: relative;
  background: rgba(0, 0, 0, 0.03);
  border: 2px dashed rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
}

.dark .garage-ghost-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Shimmer effect removed - cleaner look */
.garage-ghost-shimmer {
  display: none;
}

.garage-ghost-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.garage-ghost-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.dark .garage-ghost-icon {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.2);
}

.garage-ghost-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
}

.dark .garage-ghost-text {
  color: rgba(255, 255, 255, 0.3);
}

.garage-ghost-line {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.dark .garage-ghost-line {
  background: rgba(255, 255, 255, 0.05);
}

/* Benefit text */
.garage-card-benefit {
  font-size: 14px;
  color: #555555;
  text-align: center;
  line-height: 1.4;
}

.dark .garage-card-benefit {
  color: #AAAAAA;
}

/* Primary CTA button */
.garage-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #0EA5E9;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: garageCTAPulse 3s ease-in-out infinite;
}

.garage-card-cta:hover {
  background: #0284C7;
  transform: translateY(-1px);
}

@keyframes garageCTAPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(14, 165, 233, 0.5);
  }
}

/* Phone auth CTA variant */
.garage-card-cta--phone {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F35 100%);
  animation: none;
}

.garage-card-cta--phone:hover {
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Secondary option link */
.garage-card-secondary {
  background: transparent;
  border: none;
  color: #888888;
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  text-align: center;
  transition: color 0.15s ease;
}

.garage-card-secondary:hover {
  color: #555555;
  text-decoration: underline;
}

.dark .garage-card-secondary:hover {
  color: #BBBBBB;
}

/* Help toggle - expandable section for mobile */
.garage-help-toggle {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
}

.dark .garage-help-toggle {
  border-top-color: #2A2A2A;
}

.garage-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: #888888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.garage-help-btn:hover {
  color: #FF6B35;
}

.dark .garage-help-btn {
  color: #777777;
}

.dark .garage-help-btn:hover {
  color: #FF6B35;
}

.garage-help-chevron {
  transition: transform 0.2s ease;
}

.garage-help-toggle.active .garage-help-chevron {
  transform: rotate(180deg);
}

.garage-help-content {
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 140, 0, 0.05) 100%);
  border-radius: 12px;
  text-align: center;
}

.garage-help-content p {
  margin: 0;
  font-size: 13px;
  color: #555555;
  line-height: 1.5;
}

.garage-help-content p:first-child {
  margin-bottom: 6px;
  color: #333333;
}

.dark .garage-help-content {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(255, 140, 0, 0.08) 100%);
}

.dark .garage-help-content p {
  color: #AAAAAA;
}

.dark .garage-help-content p:first-child {
  color: #E0E0E0;
}

/* Phone auth form */
.garage-phone-auth {
  text-align: center;
}

.garage-phone-label {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12px;
}

.dark .garage-phone-label {
  color: #9A9A9A;
}

.garage-phone-input-wrap {
  display: flex;
  align-items: center;
  background: #F5F5F5;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 12px;
}

.dark .garage-phone-input-wrap {
  background: #2A2A2A;
}

.garage-phone-prefix {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #666666;
}

.dark .garage-phone-prefix {
  color: #9A9A9A;
}

.garage-phone-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 500;
  color: #111111;
  outline: none;
  letter-spacing: 0.5px;
}

.dark .garage-phone-input {
  color: #F7F7F7;
}

.garage-code-input {
  width: 140px;
  margin: 0 auto 12px;
  display: block;
  border: 2px solid #E0E0E0;
  background: #F9F9F9;
  border-radius: 12px;
  padding: 14px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 8px;
  color: #111111;
  outline: none;
}

.dark .garage-code-input {
  background: #2A2A2A;
  border-color: #3A3A3A;
  color: #F7F7F7;
}

.garage-code-input:focus {
  border-color: #FF6B35;
}

.garage-phone-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F35 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.garage-phone-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.garage-phone-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.garage-back-btn {
  margin-top: 12px;
  background: transparent;
  border: none;
  color: #888888;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 16px;
}

.garage-back-btn:hover {
  color: #555555;
}

.dark .garage-back-btn:hover {
  color: #BBBBBB;
}

.garage-error {
  color: #DC2626;
  font-size: 13px;
  margin-top: 12px;
  padding: 10px;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 8px;
}

.garage-btn-spinner {
  display: inline-flex;
}

/* Logged in state */
.garage-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.dark .garage-user-bar {
  border-color: #3A3A3A;
}

.garage-user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.dark .garage-user-name {
  color: #E0E0E0;
}

.garage-logout-btn {
  background: transparent;
  border: none;
  color: #888888;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.garage-logout-btn:hover {
  color: #DC2626;
}

/* Vehicle list */
.garage-vehicle-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-height: 280px;
  overflow-y: auto;
}

.garage-empty {
  text-align: center;
  padding: 24px;
  color: #888888;
  font-size: 14px;
}

.garage-vehicle-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #F9F9F9;
  border-radius: 12px;
  border: 1px solid transparent;
}

.dark .garage-vehicle-card {
  background: #252525;
}

.garage-vehicle-card--primary {
  border-color: #FF6B35;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 143, 53, 0.05) 100%);
}

.dark .garage-vehicle-card--primary {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 143, 53, 0.08) 100%);
}

.garage-vehicle-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.garage-vehicle-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  flex-shrink: 0;
}

.dark .garage-vehicle-icon {
  background: #333333;
  color: #999999;
}

.garage-vehicle-card--primary .garage-vehicle-icon {
  background: #FF6B35;
  color: white;
}

.garage-vehicle-info {
  flex: 1;
  min-width: 0;
}

.garage-vehicle-name {
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .garage-vehicle-name {
  color: #F7F7F7;
}

.garage-vehicle-details {
  font-size: 13px;
  color: #888888;
}

.garage-primary-badge {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #FF6B35;
  background: rgba(255, 107, 53, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.garage-vehicle-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.garage-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.dark .garage-action-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #999999;
}

.garage-action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333333;
}

.dark .garage-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #E0E0E0;
}

.garage-action-btn--danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

/* Add button */
.garage-add-btn {
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 2px dashed #D0D0D0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dark .garage-add-btn {
  border-color: #3A3A3A;
  color: #888888;
}

.garage-add-btn:hover {
  border-color: #FF6B35;
  color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

/* Update notification - shows when garage is updated from Telegram */
.garage-update-notification {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 50;
  white-space: nowrap;
}

.garage-update-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.garage-update-notification svg {
  flex-shrink: 0;
}

/* Form overlay */
.garage-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.garage-form-overlay.hidden {
  display: none !important;
}

.garage-form-modal {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.dark .garage-form-modal {
  background: #1A1A1A;
}

.garage-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
}

.dark .garage-form-header {
  color: #F7F7F7;
}

.garage-form-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #F5F5F5;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .garage-form-close {
  background: #2A2A2A;
  color: #999999;
}

.garage-form-close:hover {
  background: #EBEBEB;
}

.dark .garage-form-close:hover {
  background: #333333;
}

.garage-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.garage-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.garage-form-field--full {
  grid-column: span 2;
}

.garage-form-field label {
  font-size: 13px;
  font-weight: 500;
  color: #333333;
}

.dark .garage-form-field label {
  color: #CCCCCC;
}

.garage-form-field label .required {
  color: #DC2626;
}

.garage-form-field label .optional {
  font-weight: 400;
  color: #888888;
}

.garage-form-field input {
  padding: 12px 14px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  font-size: 15px;
  color: #111111;
  background: #FAFAFA;
  outline: none;
  transition: border-color 0.15s ease;
}

.dark .garage-form-field input {
  background: #252525;
  border-color: #3A3A3A;
  color: #F7F7F7;
}

.garage-form-field input:focus {
  border-color: #FF6B35;
}

.garage-form-field input::placeholder {
  color: #AAAAAA;
}

.dark .garage-form-field input::placeholder {
  color: #666666;
}

.garage-form-hint {
  font-size: 12px;
  color: #888888;
}

.garage-form-actions {
  display: flex;
  gap: 12px;
}

.garage-form-cancel {
  flex: 1;
  padding: 14px 20px;
  background: #F5F5F5;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
}

.dark .garage-form-cancel {
  background: #2A2A2A;
  color: #999999;
}

.garage-form-cancel:hover {
  background: #EBEBEB;
}

.dark .garage-form-cancel:hover {
  background: #333333;
}

.garage-form-save {
  flex: 1;
  padding: 14px 20px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F35 100%);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.garage-form-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.garage-form-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* CTA section */
.garage-cta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
}

.dark .garage-cta {
  border-color: #3A3A3A;
}

.garage-cta-text {
  font-size: 13px;
  color: #666666;
  text-align: center;
  line-height: 1.5;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, rgba(34, 197, 94, 0.04) 100%);
  border-radius: 8px;
}

.dark .garage-cta-text {
  color: #9A9A9A;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .garage-card {
    padding: 16px;
    border-radius: 16px;
    max-width: 100%;
  }

  .garage-card-header {
    gap: 8px;
  }

  .garage-card-icon {
    width: 36px;
    height: 36px;
  }

  .garage-card-title {
    font-size: 16px;
  }

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

  .garage-form-field--full {
    grid-column: span 1;
  }
}

/* ========================================
   LANDING FOOTER - iOS Safari Safe Area
   Background extends into safe-area zone
   ======================================== */

.landing-footer {
  /* Content padding keeps text away from edges */
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  /* Background naturally fills the padding area, extending into safe-area */
}

/* ========================================
   LANDING FOOTER - Mobile Optimization
   Breakpoint: <= 480px
   ======================================== */

@media (max-width: 480px) {
  .landing-footer {
    padding-top: 32px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  /* Container: tighter horizontal padding */
  .landing-footer > div {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Brand section: center align on mobile */
  .landing-footer .footer-brand {
    text-align: center;
    margin-bottom: 32px;
  }

  .landing-footer .footer-brand > div:first-child {
    margin-left: auto;
    margin-right: auto;
  }

  .landing-footer .footer-brand p {
    max-width: 100%;
  }

  /* Links grid: single column, left-aligned */
  .landing-footer .footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 32px;
  }

  /* Section headings */
  .landing-footer .footer-links h4 {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* Links list: consistent gap */
  .landing-footer .footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .landing-footer .footer-links ul li {
    margin: 0 !important;
  }

  /* Links: proper tap target (min 44px) */
  .landing-footer .footer-links a {
    display: inline-block;
    padding: 6px 0;
    min-height: 44px;
    line-height: 32px;
  }

  /* Email: prevent awkward breaks, allow word-break if needed */
  .landing-footer .footer-links a[href^="mailto:"] {
    word-break: break-word;
    hyphens: auto;
  }

  /* Bottom section: stack vertically */
  .landing-footer .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: center;
  }

  /* Copyright: full width, centered */
  .landing-footer .footer-bottom > p {
    width: 100%;
    text-align: center;
  }

  /* Bottom links: wrap to multiple lines, centered */
  .landing-footer .footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px !important;
  }

  /* Bottom links: proper tap target */
  .landing-footer .footer-bottom a,
  .landing-footer .footer-bottom span {
    padding: 6px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Tablet tweaks: 481px - 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .landing-footer .footer-links {
    gap: 32px !important;
  }

  .landing-footer .footer-bottom > div {
    gap: 12px 20px !important;
  }
}

/* ==========================================================
   KAMINARI PAGINATION STYLES
   ========================================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
}

.pagination a {
  color: #64748b;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.pagination a:hover {
  color: #f97316;
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.3);
}

.pagination span.current {
  color: white;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border: none;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.pagination span.gap {
  color: #94a3b8;
  background: transparent;
  border: none;
  min-width: auto;
  padding: 0 4px;
}

.pagination .first a,
.pagination .prev a,
.pagination .next a,
.pagination .last a {
  padding: 0 10px;
}

.pagination span.disabled {
  color: #cbd5e1;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid rgba(226, 232, 240, 0.5);
  cursor: not-allowed;
}

/* Dark mode */
html.dark .pagination a,
.dark .pagination a {
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(51, 65, 85, 0.8);
}

html.dark .pagination a:hover,
.dark .pagination a:hover {
  color: #f97316;
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
}

html.dark .pagination span.disabled,
.dark .pagination span.disabled {
  color: #475569;
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(51, 65, 85, 0.5);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .pagination {
    gap: 2px;
  }

  .pagination a,
  .pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 8px;
  }
}