/* ════════════════════════════════════════════════════════════════════════════════
   DriveAxis Kenya — Comprehensive Light Theme CSS Design System
   ════════════════════════════════════════════════════════════════════════════════
   
   A complete, production-ready CSS framework for Kenya's premier car and 
   superbike marketplace. Built with accessibility, performance, and modern 
   design principles in mind.
   
   Version: 6.0 (Ultimate Edition - 3500+ Lines)
   Last Updated: June 2026
   
   TABLE OF CONTENTS:
   ════════════════════════════════════════════════════════════════════════════════
   
   1.   CSS Custom Properties & Design Tokens (Lines 50-350)
   2.   CSS Reset & Base Styles (Lines 351-550)
   3.   Typography System (Lines 551-750)
   4.   Scrollbar Customization (Lines 751-820)
   5.   Accessibility Features (Lines 821-950)
   6.   Setup Banner & Alerts (Lines 951-1100)
   7.   Navigation System (Lines 1101-1500)
   8.   Mobile Menu & Responsive Nav (Lines 1501-1750)
   9.   Hero Section (Lines 1751-2100)
   10.  Search & Autocomplete (Lines 2101-2350)
   11.  Trust Indicators & Stats (Lines 2351-2500)
   12.  Features Section (Lines 2501-2700)
   13.  Filters Bar (Lines 2701-2950)
   14.  Main Content Layout (Lines 2951-3100)
   15.  Card Grid System (Lines 3101-3500)
   16.  Card Components (Lines 3501-3900)
   17.  Card Images & Media (Lines 3901-4150)
   18.  Card Badges & Overlays (Lines 4151-4350)
   19.  Card Actions & Buttons (Lines 4351-4600)
   20.  Empty States (Lines 4601-4800)
   21.  Modal System (Lines 4801-5200)
   22.  Detail Modal (Lines 5201-5600)
   23.  Favorites Modal (Lines 5601-5800)
   24.  Login Modal (Lines 5801-6050)
   25.  Post Listing Modal (Lines 6051-6350)
   26.  Form Elements (Lines 6351-6700)
   27.  Upload Zones (Lines 6701-6900)
   28.  Button System (Lines 6901-7200)
   29.  Global Feedback (Lines 7201-7450)
   30.  Toast Notifications (Lines 7451-7600)
   31.  Loading States (Lines 7601-7750)
   32.  Scroll to Top (Lines 7751-7850)
   33.  Contact Bar (Lines 7851-8050)
   34.  Footer System (Lines 8051-8500)
   35.  Social Media Links (Lines 8501-8700)
   36.  Admin Panel (Lines 8701-9000)
   37.  Admin Actions (Lines 9001-9250)
   38.  Notifications System (Lines 9251-9500)
   39.  Password Manager (Lines 9501-9700)
   40.  Hire Section (Lines 9701-9950)
   41.  How It Works Steps (Lines 9951-10150)
   42.  Animations & Keyframes (Lines 10151-10500)
   43.  Responsive Breakpoints (Lines 10501-11000)
   44.  Dark Mode Support (Lines 11001-11200)
   45.  High Contrast Mode (Lines 11201-11350)
   46.  Reduced Motion (Lines 11351-11450)
   47.  Print Styles (Lines 11451-11600)
   48.  Utility Classes (Lines 11601-12000)
   49.  Spacing Utilities (Lines 12001-12300)
   50.  Color Utilities (Lines 12301-12500)
   51.  Display Utilities (Lines 12501-12700)
   52.  Flexbox Utilities (Lines 12701-12900)
   53.  Grid Utilities (Lines 12901-13100)
   54.  Position Utilities (Lines 13101-13250)
   55.  Sizing Utilities (Lines 13251-13400)
   56.  Border Utilities (Lines 13401-13550)
   57.  Shadow Utilities (Lines 13551-13700)
   58.  Text Utilities (Lines 13701-13900)
   59.  Transform Utilities (Lines 13901-14050)
   60.  Transition Utilities (Lines 14051-14200)
   61.  Overflow Utilities (Lines 14201-14300)
   62.  Cursor Utilities (Lines 14301-14400)
   63.  Visibility Utilities (Lines 14401-14500)
   64.  Z-Index Utilities (Lines 14501-14600)
   65.  Opacity Utilities (Lines 14601-14700)
   66.  Skeleton Loading (Lines 14701-14850)
   67.  Tooltip System (Lines 14851-15000)
   68.  Dropdown Menus (Lines 15001-15200)
   69.  Tabs & Accordions (Lines 15201-15400)
   70.  Progress Bars (Lines 15401-15550)
   71.  Badges & Pills (Lines 15551-15700)
   72.  Alerts & Banners (Lines 15701-15900)
   73.  Tables (Lines 15901-16100)
   74.  Lists (Lines 16101-16300)
   75.  Icons & SVG (Lines 16301-16450)
   76.  Images & Media (Lines 16451-16600)
   77.  Videos & Embeds (Lines 16601-16750)
   78.  Maps (Lines 16751-16850)
   79.  Charts (Lines 16851-17000)
   80.  Miscellaneous (Lines 17001-17200)
   
   ════════════════════════════════════════════════════════════════════════════════
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES & DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Design tokens provide a single source of truth for colors, spacing, 
   typography, and other visual properties. This ensures consistency 
   throughout the application and makes theming easy.
*/

:root {
    /* ── Brand Colors ─────────────────────────────────────────────────────── */
    --red: #c74634;
    --red-dark: #a83226;
    --red-darker: #8b2820;
    --red-light: #fdf0ef;
    --red-lighter: #fef7f6;
    --red-glow: rgba(199, 70, 52, 0.15);
    --red-glow-strong: rgba(199, 70, 52, 0.3);
    --red-hover: #b33d2e;
    --red-active: #9a2f24;
    --red-focus: rgba(199, 70, 52, 0.5);
    --red-border: rgba(199, 70, 52, 0.2);
    --red-border-strong: rgba(199, 70, 52, 0.4);
    
    /* ── Success & Status Colors ──────────────────────────────────────────── */
    --green: #1B6B3A;
    --green-dark: #145229;
    --green-darker: #0e3d1e;
    --green-light: #e8f5ee;
    --green-lighter: #f3faf6;
    --green-glow: rgba(27, 107, 58, 0.15);
    --green-glow-strong: rgba(27, 107, 58, 0.3);
    --green-hover: #165a31;
    --green-active: #124a28;
    --green-focus: rgba(27, 107, 58, 0.5);
    --green-border: rgba(27, 107, 58, 0.2);
    
    /* ── WhatsApp Green ───────────────────────────────────────────────────── */
    --whatsapp: #25D366;
    --whatsapp-dark: #1da851;
    --whatsapp-darker: #178a42;
    --whatsapp-light: #e8f9ef;
    --whatsapp-glow: rgba(37, 211, 102, 0.25);
    
    /* ── Warning & Info Colors ────────────────────────────────────────────── */
    --yellow: #f59e0b;
    --yellow-dark: #d97706;
    --yellow-light: #fef3c7;
    --yellow-lighter: #fffbf0;
    --yellow-glow: rgba(245, 158, 11, 0.2);
    
    --orange: #ea580c;
    --orange-dark: #c2410c;
    --orange-light: #fed7aa;
    --orange-glow: rgba(234, 88, 12, 0.2);
    
    --blue: #2471a3;
    --blue-dark: #1d5a82;
    --blue-darker: #164566;
    --blue-light: #e8f4f8;
    --blue-lighter: #f3f9fc;
    --blue-glow: rgba(36, 113, 163, 0.2);
    --blue-hover: #1f6391;
    
    --purple: #7c3aed;
    --purple-dark: #6d28d9;
    --purple-light: #ede9fe;
    --purple-lighter: #f5f3ff;
    --purple-glow: rgba(124, 58, 237, 0.2);
    
    --pink: #ec4899;
    --pink-dark: #db2777;
    --pink-light: #fce7f3;
    --pink-glow: rgba(236, 72, 153, 0.2);
    
    --teal: #14b8a6;
    --teal-dark: #0d9488;
    --teal-light: #ccfbf1;
    --teal-glow: rgba(20, 184, 166, 0.2);
    
    --indigo: #6366f1;
    --indigo-dark: #4f46e5;
    --indigo-light: #e0e7ff;
    --indigo-glow: rgba(99, 102, 241, 0.2);
    
    /* ── Neutral Colors ───────────────────────────────────────────────────── */
    --gray: #f4f3ef;
    --gray2: #e5e3dc;
    --gray3: #9a9890;
    --gray4: #6b6960;
    --gray5: #4a4840;
    --gray6: #3a3830;
    --gray7: #2a2820;
    --gray8: #1a1810;
    
    --black: #111111;
    --off: #1c1c1c;
    --dark: #0a0a0a;
    --white: #ffffff;
    --pure-white: #ffffff;
    --off-white: #fafaf8;
    --cream: #f9f8f5;
    
    /* ── Background Colors ────────────────────────────────────────────────── */
    --bg: #f4f3ef;
    --bg-primary: #f4f3ef;
    --bg-secondary: #f9f8f5;
    --bg-tertiary: #ffffff;
    --bg-card: #ffffff;
    --bg-raised: #f9f8f5;
    --bg-sunken: #eae8e2;
    --bg-modal: #ffffff;
    --bg-input: #ffffff;
    --bg-hero: #0a0a0a;
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-overlay-light: rgba(0, 0, 0, 0.5);
    --bg-overlay-dark: rgba(0, 0, 0, 0.9);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-dark: rgba(0, 0, 0, 0.6);
    
    /* ── Text Colors ──────────────────────────────────────────────────────── */
    --text: #111111;
    --text-primary: #111111;
    --text-secondary: #5a5854;
    --text-tertiary: #8a8880;
    --text-muted: #9a9890;
    --text-faint: #b0aea8;
    --text-disabled: #c5c3bc;
    --text-inverse: #ffffff;
    --text-link: #c74634;
    --text-link-hover: #a83226;
    --text-success: #1B6B3A;
    --text-warning: #d97706;
    --text-error: #c74634;
    --text-info: #2471a3;
    
    --text2: #5a5854;
    --text3: #8a8880;
    --text4: #b0aea8;
    
    /* ── Border Colors ────────────────────────────────────────────────────── */
    --border: #e5e3dc;
    --border-light: #f0efe9;
    --border-lighter: #f7f6f2;
    --border-dark: #d5d3cc;
    --border-darker: #c5c3bc;
    --border-bright: #d5d3cc;
    --border-focus: rgba(199, 70, 52, 0.5);
    --border-error: rgba(199, 70, 52, 0.4);
    --border-success: rgba(27, 107, 58, 0.4);
    --border-warning: rgba(245, 158, 11, 0.4);
    --border-info: rgba(36, 113, 163, 0.4);
    --border-white: rgba(255, 255, 255, 0.1);
    --border-white-strong: rgba(255, 255, 255, 0.2);
    --border-black: rgba(0, 0, 0, 0.1);
    --border-black-strong: rgba(0, 0, 0, 0.2);
    
    /* ── UI Border Radius ─────────────────────────────────────────────────── */
    --radius: 10px;
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-5xl: 32px;
    --radius-pill: 50px;
    --radius-circle: 50%;
    --radius-ellipse: 100%;
    
    /* ── Box Shadows ──────────────────────────────────────────────────────── */
    --shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.13);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-3xl: 0 30px 80px rgba(0, 0, 0, 0.25);
    --shadow-4xl: 0 40px 100px rgba(0, 0, 0, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-outline: 0 0 0 3px rgba(199, 70, 52, 0.3);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.13);
    --shadow-active: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 3px rgba(199, 70, 52, 0.3);
    --shadow-red: 0 4px 16px rgba(199, 70, 52, 0.25);
    --shadow-red-lg: 0 8px 32px rgba(199, 70, 52, 0.35);
    --shadow-green: 0 4px 16px rgba(27, 107, 58, 0.25);
    --shadow-green-lg: 0 8px 32px rgba(27, 107, 58, 0.35);
    --shadow-blue: 0 4px 16px rgba(36, 113, 163, 0.25);
    --shadow-purple: 0 4px 16px rgba(124, 58, 237, 0.25);
    --shadow-yellow: 0 4px 16px rgba(245, 158, 11, 0.25);
    --shadow-whatsapp: 0 4px 16px rgba(37, 211, 102, 0.3);
    --shadow-card: 0 1px 8px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.3);
    --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    
    /* ── Transitions & Animations ─────────────────────────────────────────── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-ease: 300ms ease;
    --transition-ease-in: 300ms ease-in;
    --transition-ease-out: 300ms ease-out;
    --transition-ease-in-out: 300ms ease-in-out;
    --transition-linear: 300ms linear;
    
    /* ── Layout & Spacing ─────────────────────────────────────────────────── */
    --nav-height: 66px;
    --nav-height-mobile: 60px;
    --footer-height: 400px;
    --container-max: 1240px;
    --container-narrow: 800px;
    --container-wide: 1440px;
    --container-fluid: 100%;
    
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;
    --space-48: 12rem;
    --space-56: 14rem;
    --space-64: 16rem;
    
    /* ── Typography ───────────────────────────────────────────────────────── */
    --font-body: 'DM Sans', sans-serif;
    --font-heading: 'DM Sans', sans-serif;
    --font-display: 'DM Sans', sans-serif;
    --font-sans: 'DM Sans', sans-serif;
    --font-serif: 'DM Sans', sans-serif;
    /* ── Font Sizes ───────────────────────────────────────────────────────── */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;
    
    /* ── Font Weights ─────────────────────────────────────────────────────── */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* ── Line Heights ─────────────────────────────────────────────────────── */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
    --leading-xloose: 2;
    --leading-2xloose: 2.5;
    
    /* ── Letter Spacing ───────────────────────────────────────────────────── */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-xwide: 0.15em;
    --tracking-xxwide: 0.2em;
    
    /* ── Z-Index Scale ────────────────────────────────────────────────────── */
    --z-negative: -1;
    --z-elevate: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-banner: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-toast: 80;
    --z-max: 9999;
    
    /* ── Breakpoints (for reference in media queries) ─────────────────────── */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* ── Aspect Ratios ────────────────────────────────────────────────────── */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-photo: 4 / 3;
    --aspect-portrait: 3 / 4;
    --aspect-card: 16 / 10;
    --aspect-wide: 21 / 9;
    --aspect-ultrawide: 32 / 9;
    
    /* ── Gradients ────────────────────────────────────────────────────────── */
    --gradient-red: linear-gradient(135deg, #c74634 0%, #a83226 100%);
    --gradient-red-light: linear-gradient(135deg, #fdf0ef 0%, #fef7f6 100%);
    --gradient-dark: linear-gradient(135deg, #111111 0%, #1c1c1c 100%);
    --gradient-light: linear-gradient(135deg, #f4f3ef 0%, #f9f8f5 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 100%);
    --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-green: linear-gradient(135deg, #1B6B3A 0%, #145229 100%);
    --gradient-blue: linear-gradient(135deg, #2471a3 0%, #1d5a82 100%);
    --gradient-purple: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    --gradient-whatsapp: linear-gradient(135deg, #25D366 0%, #1da851 100%);
    
    /* ── Backdrop Filters ─────────────────────────────────────────────────── */
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);
    --blur-2xl: blur(30px);
    --blur-3xl: blur(40px);
    
    /* ── Opacity ──────────────────────────────────────────────────────────── */
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. CSS RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════════
   
   A modern CSS reset that provides a clean, consistent baseline across 
   all browsers. This eliminates default browser styling inconsistencies 
   and provides sensible defaults.
*/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif !important;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--text);
    background: var(--gray);
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Typography Base ──────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0;
    overflow-wrap: break-word;
}

h1 { 
    font-size: var(--text-4xl); 
    line-height: 1.2;
    letter-spacing: -0.03em;
}

h2 { 
    font-size: var(--text-3xl); 
    line-height: 1.25;
    letter-spacing: -0.025em;
}

h3 { 
    font-size: var(--text-2xl); 
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h4 { 
    font-size: var(--text-xl); 
    line-height: 1.35;
    letter-spacing: -0.015em;
}

h5 { 
    font-size: var(--text-lg); 
    line-height: 1.4;
}

h6 { 
    font-size: var(--text-base); 
    line-height: 1.5;
}

p {
    margin-bottom: 1rem;
    line-height: var(--leading-relaxed);
    overflow-wrap: break-word;
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    background: var(--gray);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-xs);
    color: var(--red);
}

pre {
    overflow: auto;
    padding: 1rem;
    background: var(--gray);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

kbd {
    background: var(--black);
    color: var(--white);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-xs);
    font-size: 0.85em;
}

/* ── Media Elements ───────────────────────────────────────────────────────── */

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
    vertical-align: middle;
}

figure {
    margin: 0;
}

figcaption {
    font-size: var(--text-sm);
    color: var(--text2);
    margin-top: 0.5rem;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

a {
    color: var(--red);
    text-decoration: none;
    transition: color var(--transition), opacity var(--transition);
    cursor: pointer;
    background-color: transparent;
}

a:hover {
    color: var(--red-dark);
}

a:focus {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

a:focus:not(:focus-visible) {
    outline: none;
}

a:active {
    color: var(--red-darker);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    overflow: visible;
    text-transform: none;
}

button:focus {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

button:focus:not(:focus-visible) {
    outline: none;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/* ── Form Elements ────────────────────────────────────────────────────────── */

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

input:focus, select:focus, textarea:focus {
    outline: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="file"] {
    overflow: hidden;
}

input[type="file"]:focus {
    outline: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
}

select {
    text-transform: none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
    display: table;
    max-width: 100%;
    white-space: normal;
    color: inherit;
}

progress {
    vertical-align: baseline;
}

/* ── Lists ────────────────────────────────────────────────────────────────── */

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

dl {
    margin: 0;
}

dt {
    font-weight: 600;
}

dd {
    margin: 0;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    text-indent: 0;
    border-color: inherit;
}

caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--text2);
    text-align: left;
    caption-side: bottom;
}

th {
    text-align: inherit;
    font-weight: 600;
}

/* ── Interactive Elements ─────────────────────────────────────────────────── */

details {
    display: block;
}

summary {
    display: list-item;
    cursor: pointer;
}

dialog {
    padding: 0;
}

menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Misc Elements ────────────────────────────────────────────────────────── */

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

blockquote {
    margin: 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--red);
    background: var(--red-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
    font-style: italic;
    color: var(--text2);
}

cite {
    font-style: normal;
    font-weight: 600;
    color: var(--text);
}

address {
    font-style: normal;
    line-height: inherit;
    margin: 0;
}

/* ── Selection ────────────────────────────────────────────────────────────── */

::selection {
    background: var(--red);
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: var(--red);
    color: #fff;
    text-shadow: none;
}

/* ── Focus Ring ───────────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ── Hidden Attribute ─────────────────────────────────────────────────────── */

[hidden] {
    display: none !important;
}

/* ── Template ─────────────────────────────────────────────────────────────── */

template {
    display: none;
}

/* ── iframe ───────────────────────────────────────────────────────────────── */

iframe {
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Comprehensive typography system with responsive font sizes, 
   line heights, and letter spacing for optimal readability.
*/

/* ── Display Typography ───────────────────────────────────────────────────── */

.display-1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.display-2 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.display-3 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.display-4 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

/* ── Heading Typography ───────────────────────────────────────────────────── */

.heading-1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.heading-2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.heading-3 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.heading-4 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.heading-5 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.4;
}

.heading-6 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.5;
}

/* ── Body Typography ──────────────────────────────────────────────────────── */

.body-xl {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
}

.body-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.body-base {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.body-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.body-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* ── Label Typography ─────────────────────────────────────────────────────── */

.label-lg {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.label-base {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.label-sm {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ── Caption Typography ───────────────────────────────────────────────────── */

.caption {
    font-size: var(--text-xs);
    color: var(--text3);
    line-height: var(--leading-normal);
}

.caption-lg {
    font-size: var(--text-sm);
    color: var(--text2);
    line-height: var(--leading-normal);
}

/* ── Overline Typography ──────────────────────────────────────────────────── */

.overline {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--red);
}

/* ── Lead Text ────────────────────────────────────────────────────────────── */

.lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--text2);
    font-weight: 400;
}

.lead-lg {
    font-size: var(--text-2xl);
    line-height: var(--leading-relaxed);
    color: var(--text2);
    font-weight: 400;
}

/* ── Text Styles ──────────────────────────────────────────────────────────── */

.text-gradient {
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.text-stroke {
    -webkit-text-stroke: 1px var(--text);
    color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. SCROLLBAR CUSTOMIZATION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Custom scrollbar styling for WebKit browsers (Chrome, Safari, Edge)
   and Firefox. Provides a consistent, branded scrollbar experience.
*/

/* ── WebKit Scrollbar ─────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--gray3);
    border-radius: 5px;
    border: 2px solid var(--gray);
    transition: background var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

::-webkit-scrollbar-thumb:active {
    background: var(--red-dark);
}

::-webkit-scrollbar-corner {
    background: var(--gray);
}

/* ── Firefox Scrollbar ────────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray3) var(--gray);
}

/* ── Thin Scrollbar Variant ───────────────────────────────────────────────── */

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    border: 1px solid var(--gray);
}

/* ── Hidden Scrollbar (but still scrollable) ──────────────────────────────── */

.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

/* ── Colored Scrollbar Variants ───────────────────────────────────────────── */

.scrollbar-red::-webkit-scrollbar-thumb {
    background: var(--red);
}

.scrollbar-red::-webkit-scrollbar-thumb:hover {
    background: var(--red-dark);
}

.scrollbar-dark::-webkit-scrollbar-thumb {
    background: var(--gray5);
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: var(--black);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. ACCESSIBILITY FEATURES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Accessibility features including skip links, screen reader only text,
   focus management, and ARIA support.
*/

/* ── Skip Link ────────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    background: var(--red);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: top 0.3s ease;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Screen Reader Only ───────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: inherit;
}

/* ── Focus Visible Enhancement ────────────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
.btn-primary:focus-visible,
.submit-btn:focus-visible,
.nav-link:focus-visible,
.mob-link:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

/* ── High Contrast Mode Support ───────────────────────────────────────────── */

@media (prefers-contrast: high) {
    :root {
        --border: #000;
        --text: #000;
    }
    
    .car-card, .card {
        border-width: 2px;
    }
    
    button, .btn-primary, .submit-btn {
        border: 2px solid currentColor;
    }
}

/* ── Forced Colors Mode ───────────────────────────────────────────────────── */

@media (forced-colors: active) {
    .car-card, .card, .modal, .btn-primary {
        border: 1px solid ButtonText;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. SETUP BANNER & ALERTS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Banner component for displaying important notices, warnings, and 
   system messages to users.
*/

.setup-banner {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border-bottom: 2px solid #ffc107;
    padding: 1rem 2.5rem;
    font-size: var(--text-sm);
    color: #856404;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.setup-banner code {
    background: rgba(199, 70, 52, 0.1);
    padding: 0.2em 0.6em;
    border-radius: var(--radius-xs);
    font-size: 0.85em;
    color: var(--red);
    font-family: var(--font-mono);
    font-weight: 600;
}

.setup-banner a {
    color: #0a58ca;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.setup-banner a:hover {
    color: #084298;
}

.setup-banner.hidden {
    display: none;
}

.banner-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.banner-close {
    background: rgba(133, 100, 4, 0.1);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #856404;
    padding: 0.3rem;
    border-radius: var(--radius-circle);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}

.banner-close:hover {
    background: rgba(133, 100, 4, 0.2);
    transform: rotate(90deg);
}

/* ── Alert Variants ───────────────────────────────────────────────────────── */

.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--green-light);
    border: 1px solid var(--green-border);
    color: var(--green);
}

.alert-error {
    background: var(--red-light);
    border: 1px solid var(--red-border);
    color: var(--red);
}

.alert-warning {
    background: var(--yellow-light);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--yellow-dark);
}

.alert-info {
    background: var(--blue-light);
    border: 1px solid var(--blue-glow);
    color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. NAVIGATION SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Complete navigation system including header, logo, navigation links,
   and responsive behavior.
*/

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--black);
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
}

nav, .nav {
    background: var(--black);
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */

.logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    transition: all var(--transition);
    position: relative;
}

.logo:hover {
    opacity: 0.9;
    color: white;
    transform: scale(1.02);
}

.logo:active {
    transform: scale(0.98);
}

.logo-track {
    position: relative;
    width: 40px;
    height: 24px;
    background: linear-gradient(180deg, #1a1a1e 0%, #0d0d0f 100%);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.logo-road {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--red) 0 6px,
        transparent 6px 10px
    );
    animation: roadScroll 1s linear infinite;
}

@keyframes roadScroll {
    from { background-position: 0 0; }
    to { background-position: -10px 0; }
}

.logo-car {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
    font-size: 1rem;
    line-height: 1;
    color: var(--red);
    filter: drop-shadow(0 0 4px var(--red));
    animation: carBounce 2s ease-in-out infinite;
}

@keyframes carBounce {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(-60%); }
}

.logo span, .logo-accent {
    color: var(--red);
    font-weight: 700;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-inverse);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    transition: all 0.3s ease;
}

.logo-text em {
    color: var(--red);
    font-style: normal;
    font-weight: 900;
    position: relative;
}

/* ── Nav Links ────────────────────────────────────────────────────────────── */

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
}

.nav-link, .nav-tab {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all var(--transition);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.nav-link:hover, .nav-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.nav-link:active, .nav-tab:active {
    transform: scale(0.95);
}

.nav-tab.active {
    background: rgba(199, 70, 52, 0.15);
    color: var(--red);
    font-weight: 600;
}

.nav-tab-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ── Nav Phone ────────────────────────────────────────────────────────────── */

.nav-phone {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
    margin-right: 1rem;
    transition: all var(--transition);
}

.nav-phone:hover {
    color: var(--red-dark);
    transform: scale(1.05);
}

/* ── Nav Right ────────────────────────────────────────────────────────────── */

.nav-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
}

.nav-search-toggle {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
    transition: all var(--transition);
    cursor: pointer;
}

.nav-search-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    transform: scale(1.05);
}

.btn-logout, .btn-admin {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-logout:hover, .btn-admin:hover {
    border-color: white;
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.btn-admin.logged-in {
    border-color: var(--red);
    color: var(--red);
    background: rgba(199, 70, 52, 0.1);
}

/* ── Hamburger Menu ───────────────────────────────────────────────────────── */

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    cursor: pointer;
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
    transition: all var(--transition);
    transform-origin: center;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--red);
}

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

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. MOBILE MENU & RESPONSIVE NAV
   ═══════════════════════════════════════════════════════════════════════════════
   
   Mobile-first navigation menu with smooth animations and 
   accessibility features.
*/

.mob-menu {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 850;
    background: rgba(17, 17, 17, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #2a2a2a;
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
}

.mob-menu.open {
    transform: translateX(0);
}

.mob-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mob-link, .mob-menu .nav-tab {
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mob-link:hover, .mob-menu .nav-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateX(4px);
}

.mob-divider {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mob-hint {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-style: italic;
    padding: 0.5rem;
}

.mob-logout {
    color: var(--red) !important;
    background: rgba(199, 70, 52, 0.15) !important;
    border: 1px solid rgba(199, 70, 52, 0.3);
}

.mob-logout:hover {
    background: rgba(199, 70, 52, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Hero section with background image, overlay, animated elements,
   search box, and call-to-action buttons.
*/

.hero {
    background: var(--bg-hero);
    padding: 5rem 2.5rem 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.5) 50%, 
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--gray);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

/* ── Hero Image Overlay ───────────────────────────────────────────────────── */

.hero-image-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ── Animated Grid ────────────────────────────────────────────────────────── */

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(199, 70, 52, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199, 70, 52, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
    opacity: 0.5;
}

/* ── Hero Inner Content ───────────────────────────────────────────────────── */

.hero-inner {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease-out;
}

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

/* ── Hero Badge ───────────────────────────────────────────────────────────── */

.hero-badge, .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(199, 70, 52, 0.2);
    border: 1px solid rgba(199, 70, 52, 0.4);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.25rem;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.6s ease-out 0.2s both;
}

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

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(27, 107, 58, 0.4);
    animation: pulseDot 2s ease infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(27, 107, 58, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(27, 107, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 107, 58, 0); }
}

/* ── Hero Headline ────────────────────────────────────────────────────────── */

.hero-headline, .hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.0rem, 6vw, 4rem);
    font-weight: 700;
    color: rgb(218, 216, 216);
    position: relative;
    line-height: var(--leading-tight);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-headline em, 
.hero h1 em, 
.hero-highlight {
    color: var(--red);
    font-size: clamp(1.8rem, 5vw, 3.5rem);  /* ← Fluid sizing */
    font-style: italic;
    font-weight: 500;
    position: relative;
    display: inline-block;
    line-height: 1.1;
  }
  
  .hero-highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: clamp(2px, 0.4vw, 3px);  /* ← Thinner underline on mobile */
    background: var(--red);
    border-radius: 2px;
    animation: underlineExpand 0.8s ease-out 0.8s both;
  }

@keyframes underlineExpand {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── Hero Subtitle ────────────────────────────────────────────────────────── */

.hero-sub, .hero-subtitle, .hero p {
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    font-size: clamp(1rem, 2vw, 1.05rem);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. SEARCH & AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════════════════════════
   
   Search functionality with autocomplete dropdown, keyboard navigation,
   and responsive design.
*/

.search-wrap, .search-container {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    position: relative;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.search-bar, .search-box {
    display: flex;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all var(--transition);
    border: 2px solid transparent;
}

.search-box:focus-within {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--red-glow);
    border-color: var(--red);
}

.search-icon {
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    color: var(--gray3);
    flex-shrink: 0;
}

.search-bar input, .search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 1rem 1.25rem;
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: transparent;
    color: var(--text);
    font-weight: 500;
}

.search-bar input::placeholder, .search-box input::placeholder {
    color: var(--gray3);
    font-weight: 400;
}

.search-bar button, .search-box button {
    background: var(--red);
    color: white;
    border: none;
    padding: 0 2rem;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.search-bar button:hover, .search-box button:hover {
    background: var(--red-dark);
}

.search-bar button:active, .search-box button:active {
    transform: scale(0.95);
}

/* ── Autocomplete Dropdown ────────────────────────────────────────────────── */

.autocomplete-dropdown, .ac-drop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    z-index: 300;
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--border);
}

.autocomplete-dropdown.open, .ac-drop.open {
    display: block;
    animation: dropdownSlide 0.2s ease-out;
}

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

.ac-group-label {
    padding: 0.6rem 1.25rem 0.3rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--gray);
    border-bottom: 1px solid var(--gray2);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ac-item {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--gray2);
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover, .ac-item.highlighted {
    background: var(--red-light);
    color: var(--red);
}

.ac-item .ac-make {
    font-weight: 600;
    min-width: 100px;
    color: inherit;
}

.ac-item .ac-model {
    color: var(--text2);
    font-size: var(--text-sm);
}

.ac-item:hover .ac-model, .ac-item.highlighted .ac-model {
    color: var(--red);
    opacity: 0.8;
}

.ac-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ac-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--text2);
    font-size: var(--text-sm);
}

/* ── Popular Searches ─────────────────────────────────────────────────────── */

.popular-searches {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.pop-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.pop-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pop-chip {
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.8);
    transition: all var(--transition);
    cursor: pointer;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.pop-chip:hover {
    background: rgba(199, 70, 52, 0.3);
    border-color: var(--red);
    color: white;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. TRUST INDICATORS & STATS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Trust badges and statistics display for building user confidence.
*/

.trust-list, .hero-trust, .trust-indicators {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    position: relative;
    animation: fadeInUp 0.8s ease-out 0.7s both;
}

.trust-list li, 
.hero-trust span, 
.trust-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    transition: all var(--transition);
}

.trust-list li:hover, 
.hero-trust span:hover, 
.trust-item:hover {
    color: white;
    transform: translateY(-2px);
}

/* ── Statistics ───────────────────────────────────────────────────────────── */

.hero-stats, .stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3.5rem;
    position: relative;
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.stat-card, .stat-item {
    text-align: center;
    transition: all var(--transition);
}

.stat-card:hover, .stat-item:hover {
    transform: translateY(-4px);
}

.hero-stats div, .stat-item {
    text-align: center;
}

.hero-stats strong, .stat-value {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: white;
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hero-stats span, .stat-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. FEATURES SECTION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Feature cards highlighting key benefits and services.
*/

.features-section {
    background: var(--white);
    padding: 5rem 2.5rem;
    margin-top: -3rem;
    position: relative;
    z-index: 10;
}

.features-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.feature-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.feature-card:hover .feature-image img {
    transform: scale(1.1);
}

.feature-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.feature-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-icon {
    font-size: 2.0rem;
    margin-bottom: 1rem;
    display: inline-block;
    color: var(--red);
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.feature-card p {
    color: var(--text2);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. FILTERS BAR
   ═══════════════════════════════════════════════════════════════════════════════
   
   Filter controls for narrowing down listings by various criteria.
*/

.filters-bar {
    background: white;
    border-bottom: 1px solid var(--gray2);
    padding: 1rem 2.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
}

.filters-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-label {
    font-size: var(--text-sm);
    color: var(--text2);
    font-weight: 600;
    white-space: nowrap;
}

.filter-btns, .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    background: var(--gray);
    border: 1px solid var(--gray2);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--text);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--black);
    color: var(--black);
    background: var(--gray2);
}

.filter-btn.active {
    background: var(--black);
    color: white;
    border-color: var(--black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.filter-selects {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

.filter-select {
    border: 1px solid var(--gray2);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    background: var(--gray);
    cursor: pointer;
    outline: none;
    transition: all var(--transition);
    font-weight: 500;
    min-width: 140px;
}

.filter-select:hover {
    border-color: var(--gray3);
}

.filter-select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}

.filter-active-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-active-count {
    padding: 0.3em 0.8em;
    background: var(--red);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
}

.filter-clear {
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid rgba(199, 70, 52, 0.3);
    border-radius: var(--radius-pill);
    color: var(--red);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-clear:hover {
    background: var(--red-light);
    border-color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. MAIN CONTENT LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════
   
   Main content area with sections, headers, and descriptions.
*/

.main, .main-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.section {
    margin-bottom: 4rem;
    scroll-margin-top: calc(var(--nav-height) + 80px);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray2);
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
}

.count-badge {
    background: var(--red-light);
    color: var(--red);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(199, 70, 52, 0.2);
}

.section-desc {
    color: var(--text2);
    font-size: var(--text-base);
    margin-bottom: 2rem;
    line-height: var(--leading-relaxed);
    max-width: 700px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. CARD GRID SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Responsive grid system for displaying cards in various layouts.
*/

.card-grid, .car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

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

.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. CARD COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Card component for displaying listings with images, details, and actions.
*/

.card, .car-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 10px 8px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.card:hover, .car-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. CARD IMAGES & MEDIA
   ═══════════════════════════════════════════════════════════════════════════════
   
   Image containers, placeholders, and media handling for cards.
*/

.card-img-wrap, .car-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--gray2);
    height: 220px;
}

.card-img, .car-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card-img, .car-card:hover .car-img img {
    transform: scale(1.08);
}

.no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--gray3);
    font-size: 3rem;
    background: linear-gradient(135deg, var(--gray) 0%, var(--gray2) 100%);
}

.no-photo p {
    font-size: var(--text-sm);
    color: var(--gray3);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   18. CARD BADGES & OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Badges, labels, and overlays for card images.
*/

.card-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 2;
}

.badge, .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.badge-new, .card-badge--new {
    background: var(--green);
    color: white;
}

.badge-featured, .card-badge--feat {
    background: var(--red);
    color: white;
}

.card-badge--hire {
    background: var(--blue);
    color: #fff;
}

.photo-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: var(--text-xs);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19. CARD ACTIONS & BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Action buttons and interactive elements within cards.
*/

.card-save {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all var(--transition);
    color: var(--red);
    z-index: 2;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-save:hover {
    transform: scale(1.1);
}

.card-save.saved {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

.card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-price, .car-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--red);
    font-family: var(--font-heading);
    margin-top: 0.45rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
    line-height: 1;
}

.card-price-sub {
    font-size: var(--text-xs);
    color: var(--text3);
    margin-bottom: 0.5rem;
}

.card-title, .car-title {
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: 0.75rem;
    color: blue;
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta, .car-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.card-chip, .meta-tag {
    font-size: var(--text-xs);
    color: var(--text2);
    background: var(--gray);
    border: 1px solid var(--gray2);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.card-footer, .car-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--gray2);
    gap: 0.5rem;
}

.card-location, .car-location {
    font-size: var(--text-sm);
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    font-weight: 500;
    margin-bottom: 1rem;
}

.card-location span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-wa, .card-wa {
    background: #25D366;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    flex: 1;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-wa:hover, .card-wa:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-call {
    background: var(--black);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    flex: 1;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-call:hover {
    background: var(--red);
    transform: translateY(-2px);
}

.btn-delete {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid #f5c5c0;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    display: none;
    transition: all var(--transition);
}

.btn-delete:hover {
    background: var(--red);
    color: white;
}

.admin-active .btn-delete {
    display: block;
}

/* ── Admin Actions on Card ────────────────────────────────────────────────── */

.card-admin-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 2rem 1rem 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 3;
}

.card:hover .card-admin-bar {
    opacity: 1;
}

.card-admin-bar button {
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    transition: all var(--transition);
}

.btn-edit-card {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-edit-card:hover {
    background: rgba(59, 130, 246, 0.35);
}

.btn-del-card {
    background: rgba(199, 70, 52, 0.2);
    color: var(--red);
    border: 1px solid rgba(199, 70, 52, 0.3);
}

.btn-del-card:hover {
    background: rgba(199, 70, 52, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   20. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Empty state components for when no data is available.
*/

.empty-state {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text2);
    grid-column: 1 / -1;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--gray2);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    filter: grayscale(1) opacity(0.5);
    display: inline-block;
    animation: emptyBounce 2s ease-in-out infinite;
    color: var(--gray3);
}

@keyframes emptyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.empty-state h3 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.empty-state p {
    color: var(--text2);
    font-size: var(--text-base);
    max-width: 400px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
21. MODAL SYSTEM - CONSOLIDATED & FIXED
═══════════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  .modal-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: modalOverlayFadeIn 0.3s ease-out !important;
  }
  
  @keyframes modalOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .modal {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 850px !important;
    width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    margin: auto !important;
    animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  
  @keyframes modalSlideUp {
    from {
      transform: translateY(50px) scale(0.95);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  .modal-close {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    font-size: 1.3rem !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
  }
  
  .modal-close:hover {
    background: #c74634 !important;
    color: white !important;
    transform: rotate(90deg) scale(1.1) !important;
  }
  
  .modal-header {
    padding: 1.75rem 2rem !important;
    border-bottom: 2px solid #f0f0f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .modal-header h2 {
    margin: 0 !important;
    font-size: 1.6rem !important;
    color: #c74634 !important;
    font-weight: 700 !important;
  }
  
  .modal-body {
    padding: 2rem !important;
  }
  
  /* Detail Modal Specific */
  .modal--detail {
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  #detailContent {
    width: 100% !important;
    display: block !important;
  }
  
  .detail-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
  }
  
  .detail-gallery img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  
  .detail-gallery img:hover {
    transform: scale(1.05) !important;
  }
  
  .detail-gallery.single img {
    height: 450px !important;
  }
  
  .detail-body {
    padding: 2.5rem !important;
  }
  
  .detail-body h2 {
    font-size: 2.2rem !important;
    margin-bottom: 0.75rem !important;
    color: #111 !important;
    font-weight: 700 !important;
  }
  
  .detail-price {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #c74634 !important;
    margin-bottom: 1.75rem !important;
  }
  
  .detail-specs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 1rem !important;
    margin: 2rem 0 !important;
    padding: 1.75rem !important;
    background: #f8f8f6 !important;
    border-radius: 16px !important;
  }
  
  .spec-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    background: white !important;
    padding: 1.25rem !important;
    border-radius: 12px !important;
    border: 1px solid #e5e3dc !important;
  }
  
  .spec-label {
    font-size: 0.75rem !important;
    color: #8a8880 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  
  .spec-value {
    font-size: 1.05rem !important;
    color: #111 !important;
    font-weight: 600 !important;
  }
  
  .detail-desc {
    margin: 2rem 0 !important;
    line-height: 1.8 !important;
    color: #5a5854 !important;
    padding: 1.5rem !important;
    background: #fafaf8 !important;
    border-left: 4px solid #c74634 !important;
    border-radius: 8px !important;
  }
  
  .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-top: 2.5rem !important;
  }
  
  .detail-actions button {
    padding: 1.1rem !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    transition: all 0.3s ease !important;
  }
  
  .detail-actions button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  }

/* ═══════════════════════════════════════════════════════════════════════════════
   23. FAVORITES MODAL
   ═══════════════════════════════════════════════════════════════════════════════
   
   Modal for displaying and managing favorite listings.
*/

.btn-clear-favs {
    background: #fff0f0;
    color: var(--red);
    border: 1px solid #f5c5c0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.btn-clear-favs:hover {
    background: var(--red);
    color: white;
}

.fav-count {
    background: var(--red);
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    margin-left: 0.3rem;
    font-weight: 700;
    min-width: 18px;
    display: inline-block;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   24. LOGIN MODAL
   ═══════════════════════════════════════════════════════════════════════════════
   
   Login modal with form, error states, and security features.
*/

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 16px rgba(199, 70, 52, 0.3));
    display: inline-block;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.login-header h2 {
    font-size: var(--text-xl);
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text2);
    font-size: var(--text-sm);
}

.status-strip {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.status-ok {
    background: var(--green-light);
    border: 1px solid rgba(27, 107, 58, 0.2);
    color: var(--green);
}

.login-error {
    background: var(--red-light);
    border: 1px solid rgba(199, 70, 52, 0.25);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
    color: var(--red);
    margin-bottom: 1.25rem;
    text-align: center;
    display: none;
    font-weight: 500;
}

.lockout-box {
    background: #fff5f5;
    border: 1px solid rgba(199, 70, 52, 0.2);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.lock-icon {
    font-size: 2rem;
}

.login-note {
    font-size: var(--text-xs);
    color: var(--text3);
    text-align: center;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   25. POST LISTING MODAL
   ═══════════════════════════════════════════════════════════════════════════════
   
   Modal for creating new listings with form fields and photo upload.
*/

.post-mode-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--gray);
    border: 1px solid var(--gray2);
    border-radius: var(--radius-lg);
    padding: 0.4rem;
    margin-bottom: 2rem;
}

.post-mode-tab {
    flex: 1;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text2);
    transition: all var(--transition);
    text-align: center;
    cursor: pointer;
    border: none;
    background: none;
}

.post-mode-tab.active {
    background: var(--red);
    color: #fff;
    box-shadow: 0 2px 12px rgba(199, 70, 52, 0.3);
}

.post-mode-tab:hover:not(.active) {
    color: var(--text);
    background: var(--gray2);
}

.form-section {
    border: 1px solid var(--gray2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section legend {
    padding: 0 0.75rem;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text3);
}

.hire-group {
    background: var(--gray);
    border: 1px solid var(--gray2);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.hire-group-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   26. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Form inputs, selects, textareas, and validation states.
*/

.field-group, .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.field-group label, .form-group label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text2);
}

.required-star {
    color: var(--red);
    font-size: 0.9em;
}

.field-group input,
.field-group select,
.field-group textarea,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1.5px solid var(--gray2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    outline: none;
    transition: all var(--transition);
    background: white;
    color: var(--text);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}

.field-group input::placeholder,
.field-group textarea::placeholder {
    color: var(--gray3);
}

.field-group select, .form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9890' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.field-group select option,
.field-group select optgroup,
.form-group select option,
.form-group select optgroup {
    background: white;
    color: var(--text);
}

.field-group textarea, .form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--leading-relaxed);
}

.field-hint, .price-hint {
    font-size: var(--text-xs);
    color: var(--text3);
    margin-top: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   27. UPLOAD ZONES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Photo upload zones with drag-and-drop support and previews.
*/

.upload-zone, .upload-area {
    border: 2px dashed var(--gray2);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 1.25rem;
    background: var(--bg-raised);
}

.upload-zone:hover, .upload-zone:focus, .upload-area:hover {
    border-color: var(--red);
    background: var(--red-light);
}

.upload-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.upload-zone p, .upload-area p {
    font-weight: 600;
    color: var(--text2);
    font-size: var(--text-base);
    margin-bottom: 0.25rem;
}

.upload-zone small, .upload-area small {
    color: var(--text3);
    font-size: var(--text-xs);
}

.photo-previews, .previews {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
}

.photo-previews img, .preview-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid var(--gray2);
}

.preview-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.preview-thumb .rm {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: var(--radius-circle);
    width: 20px;
    height: 20px;
    font-size: var(--text-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.preview-thumb .rm:hover {
    background: var(--red);
    transform: scale(1.1);
}

.upload-progress {
    padding: 0.75rem 1.25rem;
    background: var(--red-light);
    border: 1px solid rgba(199, 70, 52, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--red);
    margin-bottom: 1.25rem;
    text-align: center;
    display: none;
    font-weight: 500;
}

.upload-progress.show {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   28. BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Comprehensive button system with variants, sizes, and states.
*/

.btn-primary, .submit-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
}

.btn-red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 4px 16px rgba(199, 70, 52, 0.25);
}

.btn-red:hover {
    background: var(--red-dark);
    box-shadow: 0 6px 24px rgba(199, 70, 52, 0.35);
    transform: translateY(-2px);
}

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

.btn-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.btn-gold:hover {
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.35);
    transform: translateY(-2px);
}

.submit-btn:disabled {
    background: var(--gray3);
    cursor: not-allowed;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   29. GLOBAL FEEDBACK
   ═══════════════════════════════════════════════════════════════════════════════
   
   Loading overlays, spinners, and feedback mechanisms.
*/

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
}

.loading-overlay.show {
    display: flex;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--gray2);
    border-top-color: var(--red);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}

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

#loadMsg {
    font-size: var(--text-base);
    color: var(--text2);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   30. TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Toast notification system for user feedback.
*/

.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--green);
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    z-index: 3000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toast.error {
    background: var(--red);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   31. LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Skeleton loading screens and loading indicators.
*/

.skeleton {
    background: linear-gradient(90deg, var(--gray) 25%, var(--gray2) 50%, var(--gray) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

.skeleton-text {
    height: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.skeleton-image {
    height: 200px;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   32. SCROLL TO TOP
   ═══════════════════════════════════════════════════════════════════════════════
   
   Floating scroll-to-top button.
*/

.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 800;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-circle);
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-red);
    transition: all var(--transition);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    border: none;
    cursor: pointer;
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--red-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(199, 70, 52, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   33. CONTACT BAR
   ═══════════════════════════════════════════════════════════════════════════════
   
   Contact information bar with email and WhatsApp links.
*/

.contact-bar {
    background: var(--gray);
    border-top: 1px solid var(--gray2);
    border-bottom: 1px solid var(--gray2);
    padding: 1.5rem 2.5rem;
    font-size: var(--text-sm);
    color: var(--text2);
    margin-top: 4rem;
}

.contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.contact-info strong {
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
}

.contact-divider {
    color: var(--text3);
}

.contact-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--red);
    transition: all var(--transition);
}

.contact-email:hover {
    color: var(--red-dark);
    transform: translateX(2px);
}

.contact-actions {
    display: flex;
    gap: 0.75rem;
}

.contact-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: #25D366;
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    transition: all var(--transition);
    text-decoration: none;
}

.contact-wa:hover {
    background: #1da851;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   34. FOOTER SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Comprehensive footer with multiple columns, links, and information.
*/

.footer {
    background: var(--black);
    color: rgba(255, 255, 255, 0.5);
    padding: 4rem 2.5rem 2rem;
    font-size: var(--text-sm);
    margin-top: 0;
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-col ul li a:hover {
    color: var(--red);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-inverse);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    transition: all 0.3s ease;
    
}

.footer-accent {
    color: var(--red);
}

.footer-about {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.8;
    letter-spacing: 0.3px;
    margin-bottom: 1.5rem;
    max-width: 400px;
    font-weight: 400;
    text-wrap: balance;
    opacity: 0.95;
    transition: color 0.3s ease;
}

.footer-about:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-tagline {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 500;
}

.footer-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copy {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   35. SOCIAL MEDIA LINKS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Social media icon links with hover effects.
*/

.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 1.1rem;
}

.social-link:hover {
    background: var(--red);
    transform: translateY(-3px);
    color: white;
    box-shadow: 0 4px 12px rgba(199, 70, 52, 0.4);
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.footer-contact-info a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.footer-contact-info a:hover {
    color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   36. ADMIN PANEL
   ═══════════════════════════════════════════════════════════════════════════════
   
   Admin panel interface with user management and controls.
*/

.admin-bar {
    background: linear-gradient(135deg, #1a0a09 0%, #0d0505 100%);
    border-bottom: 1px solid #3a1a18;
    padding: 0.75rem 2.5rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.admin-bar.show, .admin-bar[hidden="false"] {
    display: flex;
}

.adm-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.adm-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(199, 70, 52, 0.3);
}

.adm-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.adm-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.9);
}

.adm-role-text {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
}

.role-badge {
    padding: 0.25em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.badge-god {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.badge-super {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(199, 70, 52, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   37. ADMIN ACTIONS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Admin action buttons and controls.
*/

.adm-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.adm-actions button, 
.btn-post-car, 
.btn-post-bike, 
.btn-post-hire {
    background: var(--red);
    color: white;
    border: none;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.adm-actions button:hover, 
.btn-post-car:hover, 
.btn-post-bike:hover, 
.btn-post-hire:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 70, 52, 0.3);
}

.adm-actions button:active, 
.btn-post-car:active, 
.btn-post-bike:active, 
.btn-post-hire:active {
    transform: translateY(0);
}

.btn-post-bike {
    background: var(--purple);
}

.btn-post-bike:hover {
    background: #6d28d9;
}

.btn-post-hire {
    background: var(--blue);
}

.btn-post-hire:hover {
    background: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   38. NOTIFICATIONS SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   Notification list and items for admin activity tracking.
*/

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 450px;
    overflow-y: auto;
}

.notif-item {
    padding: 1rem 1.25rem;
    background: var(--gray);
    border: 1px solid var(--gray2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all var(--transition);
}

.notif-item:hover {
    border-color: var(--gray3);
    transform: translateX(4px);
}

.notif-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.notif-text {
    color: var(--text2);
    line-height: var(--leading-normal);
    flex: 1;
}

.notif-time {
    font-size: var(--text-xs);
    color: var(--text3);
    margin-top: 0.3rem;
}

.notif-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text3);
    font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   39. PASSWORD MANAGER
   ═══════════════════════════════════════════════════════════════════════════════
   
   Password management interface for admin users.
*/

.user-card {
    background: var(--gray);
    border: 1px solid var(--gray2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.user-card h3, .user-card h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pwd-note {
    font-size: var(--text-sm);
    color: var(--text3);
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   40. HIRE SECTION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Car hire section with pricing and availability information.
*/

.hire-section {
    background: var(--white);
    padding: 3rem 2.5rem;
    margin: 2rem 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.hire-header {
    text-align: center;
    margin-bottom: 2rem;
}

.hire-header h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.hire-header p {
    color: var(--text2);
    font-size: var(--text-base);
    max-width: 600px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   41. HOW IT WORKS STEPS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Step-by-step guide for using the platform.
*/

.hire-how-it-works {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.hiw-step {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.hiw-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hiw-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-circle);
    background: var(--red-light);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.hiw-step h4 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.hiw-step p {
    color: var(--text2);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   42. ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Reusable animation keyframes and utility classes.
*/

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

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

.animate-rotate {
    animation: rotate 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

.animate-wiggle {
    animation: wiggle 0.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   43. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════════
   
   Media queries for responsive design across all device sizes.
*/

@media (max-width: 1400px) {
    :root {
        --container-max: 1200px;
    }
}

@media (max-width: 1200px) {
    :root {
        --container-max: 1000px;
    }
    
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 1024px) {
    .features-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-grid, .car-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    .mob-menu {
        display: flex;
    }
    
    .hero-stats, .stats {
        gap: 2.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-info {
        justify-content: center;
    }
    
    .features-container {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    nav, .nav {
        padding: 0 1.5rem;
    }
    
    .hero {
        padding: 3rem 1.5rem 4rem;
        min-height: 500px;
    }
    
    .hero-stats, .stats {
        gap: 2rem;
        flex-wrap: wrap;
    }
    
    .hero-trust, .trust-list, .trust-indicators {
        gap: 1rem;
    }
    
    .filters-bar, .admin-bar, .main, .main-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal {
        padding: 1.75rem;
    }
    
    .detail-gallery img:first-child {
        height: 200px;
    }
    
    .detail-gallery img {
        height: 120px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .card-grid, .car-grid {
        grid-template-columns: 1fr;
    }
    
    .features-section {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .hero-stats, .stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem;
    }
    
    .filter-selects {
        margin-left: 0;
        width: 100%;
    }
    
    .filter-select {
        flex: 1;
        width: 100%;
    }
    
    .detail-actions {
        flex-direction: column;
    }
    
    .detail-actions > * {
        width: 100%;
    }
    
    .adm-actions {
        width: 100%;
        justify-content: center;
    }
    
    .admin-bar {
        padding: 0.75rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 2.5rem 1rem 3.5rem;
    }
    
    .hero-headline, .hero h1 {
        font-size: 2rem;
    }
    
    .search-bar input, .search-box input {
        font-size: var(--text-sm);
        padding: 0.85rem 1rem;
    }
    
    .search-bar button, .search-box button {
        padding: 0 1.25rem;
        font-size: var(--text-xs);
    }
    
    .modal {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .trust-list, .hero-trust, .trust-indicators {
        gap: 0.75rem;
    }
    
    .trust-list li, .hero-trust span, .trust-item {
        font-size: var(--text-xs);
    }
}

@media (max-width: 380px) {
    .logo-text, .logo {
        font-size: 1.3rem;
    }
    
    .hero-headline, .hero h1 {
        font-size: 1.75rem;
    }
    
    .nav, nav {
        padding: 0 1rem;
    }
    
    .main, .main-content {
        padding: 2rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   44. DARK MODE SUPPORT
   ═══════════════════════════════════════════════════════════════════════════════
   
   Dark mode color scheme and overrides.
*/

@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --bg: #1a1a1a;
        --bg-card: #2a2a2a;
        --text: #f5f5f5;
        --text2: #b0b0b0;
        --border: #3a3a3a;
    }
    */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   45. HIGH CONTRAST MODE
   ═══════════════════════════════════════════════════════════════════════════════
   
   Enhanced contrast for better visibility.
*/

@media (prefers-contrast: high) {
    :root {
        --border: #000;
        --text: #000;
    }
    
    .card, .car-card {
        border-width: 2px;
    }
    
    button, .btn-primary, .submit-btn {
        border: 2px solid currentColor;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   46. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════════
   
   Respect user's motion preferences for accessibility.
*/

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-image-overlay {
        animation: none;
    }
    
    .logo-road {
        animation: none;
    }
    
    .logo-car {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   47. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Optimized styles for printing.
*/

@media print {
    nav, .nav, .filters-bar, .admin-bar, 
    .setup-banner, .scroll-top, .modal-overlay, .toast, 
    .loading-overlay, footer, .footer, .contact-bar,
    .hero-image-overlay, .hero-grid {
        display: none !important;
    }
    
    body {
        background: #fff;
        color: #000;
    }
    
    .card, .car-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .hero {
        background: #fff;
        color: #000;
    }
    
    .hero-headline, .hero h1 {
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    
    img {
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    table, figure {
        page-break-inside: avoid;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   48-65. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════
   
   Comprehensive utility classes for rapid development.
*/

/* ── Text Alignment ───────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ── Font Weights ─────────────────────────────────────────────────────────── */

.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ── Font Styles ──────────────────────────────────────────────────────────── */

.italic { font-style: italic; }
.not-italic { font-style: normal; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* ── Text Transform ───────────────────────────────────────────────────────── */

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ── Text Overflow ────────────────────────────────────────────────────────── */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis { text-overflow: ellipsis; }
.text-clip { text-overflow: clip; }

/* ── Whitespace ───────────────────────────────────────────────────────────── */

.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ── Word Break ───────────────────────────────────────────────────────────── */

.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words { word-break: normal; overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ── Line Heights ─────────────────────────────────────────────────────────── */

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.1; }
.leading-snug { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.6; }
.leading-loose { line-height: 1.8; }
.leading-2xloose { line-height: 2; }

/* ── Letter Spacing ───────────────────────────────────────────────────────── */

.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* ── Colors ───────────────────────────────────────────────────────────────── */

.text-red { color: var(--red); }
.text-red-dark { color: var(--red-dark); }
.text-red-light { color: var(--red-light); }
.text-green { color: var(--green); }
.text-green-dark { color: var(--green-dark); }
.text-green-light { color: var(--green-light); }
.text-blue { color: var(--blue); }
.text-blue-dark { color: var(--blue-dark); }
.text-blue-light { color: var(--blue-light); }
.text-yellow { color: var(--yellow); }
.text-yellow-dark { color: var(--yellow-dark); }
.text-yellow-light { color: var(--yellow-light); }
.text-purple { color: var(--purple); }
.text-purple-dark { color: var(--purple-dark); }
.text-purple-light { color: var(--purple-light); }
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-gray { color: var(--gray); }
.text-gray2 { color: var(--gray2); }
.text-gray3 { color: var(--gray3); }
.text-gray4 { color: var(--gray4); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

/* ── Background Colors ────────────────────────────────────────────────────── */

.bg-red { background-color: var(--red); }
.bg-red-dark { background-color: var(--red-dark); }
.bg-red-light { background-color: var(--red-light); }
.bg-green { background-color: var(--green); }
.bg-green-dark { background-color: var(--green-dark); }
.bg-green-light { background-color: var(--green-light); }
.bg-blue { background-color: var(--blue); }
.bg-blue-dark { background-color: var(--blue-dark); }
.bg-blue-light { background-color: var(--blue-light); }
.bg-yellow { background-color: var(--yellow); }
.bg-yellow-light { background-color: var(--yellow-light); }
.bg-purple { background-color: var(--purple); }
.bg-purple-light { background-color: var(--purple-light); }
.bg-black { background-color: var(--black); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray); }
.bg-gray2 { background-color: var(--gray2); }
.bg-transparent { background-color: transparent; }

/* ── Display ──────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }

/* ── Flexbox ──────────────────────────────────────────────────────────────── */

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* ── Gap ──────────────────────────────────────────────────────────────────── */

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* ── Position ─────────────────────────────────────────────────────────────── */

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-auto { top: auto; }
.right-auto { right: auto; }
.bottom-auto { bottom: auto; }
.left-auto { left: auto; }

/* ── Sizing ───────────────────────────────────────────────────────────────── */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }
.w-auto { width: auto; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }
.h-auto { height: auto; }

.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }
.max-w-prose { max-width: 65ch; }

.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* ── Padding ──────────────────────────────────────────────────────────────── */

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }
.p-20 { padding: 5rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-8 { padding-right: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-8 { padding-left: 2rem; }

/* ── Margin ───────────────────────────────────────────────────────────────── */

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }
.m-20 { margin: 5rem; }
.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }

/* ── Border Radius ────────────────────────────────────────────────────────── */

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-circle); }
.rounded-pill { border-radius: var(--radius-pill); }

.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rounded-t-full { border-top-left-radius: 9999px; border-top-right-radius: 9999px; }

.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.rounded-r-full { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }

.rounded-b-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.rounded-b-sm { border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.rounded-b { border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.rounded-b-lg { border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.rounded-b-full { border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; }

.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.rounded-l-full { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }

/* ── Border Width ─────────────────────────────────────────────────────────── */

.border { border-width: 1px; }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-8 { border-width: 8px; }

.border-t { border-top-width: 1px; }
.border-r { border-right-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }

/* ── Border Style ─────────────────────────────────────────────────────────── */

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-none { border-style: none; }

/* ── Border Colors ────────────────────────────────────────────────────────── */

.border-red { border-color: var(--red); }
.border-red-dark { border-color: var(--red-dark); }
.border-red-light { border-color: var(--red-light); }
.border-green { border-color: var(--green); }
.border-blue { border-color: var(--blue); }
.border-yellow { border-color: var(--yellow); }
.border-purple { border-color: var(--purple); }
.border-black { border-color: var(--black); }
.border-white { border-color: var(--white); }
.border-gray { border-color: var(--gray); }
.border-gray2 { border-color: var(--gray2); }
.border-gray3 { border-color: var(--gray3); }
.border-transparent { border-color: transparent; }

/* ── Shadows ──────────────────────────────────────────────────────────────── */

.shadow-none { box-shadow: none; }
.shadow { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* ── Opacity ──────────────────────────────────────────────────────────────── */

.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* ── Transitions ──────────────────────────────────────────────────────────── */

.transition { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-none { transition-property: none; }
.transition-all { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-shadow { transition-property: box-shadow; }
.transition-transform { transition-property: transform; }

.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Transforms ───────────────────────────────────────────────────────────── */

.transform { transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.transform-gpu { transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); }
.transform-none { transform: none; }

.rotate-0 { transform: rotate(0deg); }
.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }
.rotate-6 { transform: rotate(6deg); }
.rotate-12 { transform: rotate(12deg); }
.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.-rotate-180 { transform: rotate(-180deg); }
.-rotate-90 { transform: rotate(-90deg); }
.-rotate-45 { transform: rotate(-45deg); }
.-rotate-12 { transform: rotate(-12deg); }
.-rotate-6 { transform: rotate(-6deg); }
.-rotate-3 { transform: rotate(-3deg); }
.-rotate-2 { transform: rotate(-2deg); }
.-rotate-1 { transform: rotate(-1deg); }

.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(.5); }
.scale-75 { transform: scale(.75); }
.scale-90 { transform: scale(.9); }
.scale-95 { transform: scale(.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }

.translate-x-0 { transform: translateX(0); }
.translate-x-1 { transform: translateX(0.25rem); }
.translate-x-2 { transform: translateX(0.5rem); }
.translate-x-4 { transform: translateX(1rem); }
.translate-x-8 { transform: translateX(2rem); }
.translate-x-full { transform: translateX(100%); }

.-translate-x-1 { transform: translateX(-0.25rem); }
.-translate-x-2 { transform: translateX(-0.5rem); }
.-translate-x-4 { transform: translateX(-1rem); }
.-translate-x-8 { transform: translateX(-2rem); }
.-translate-x-full { transform: translateX(-100%); }

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-4 { transform: translateY(1rem); }
.translate-y-8 { transform: translateY(2rem); }
.translate-y-full { transform: translateY(100%); }

.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-4 { transform: translateY(-1rem); }
.-translate-y-8 { transform: translateY(-2rem); }
.-translate-y-full { transform: translateY(-100%); }

/* ── Overflow ─────────────────────────────────────────────────────────────── */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-visible { overflow-y: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

/* ── Cursor ───────────────────────────────────────────────────────────────── */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-none { cursor: none; }
.cursor-context-menu { cursor: context-menu; }
.cursor-progress { cursor: progress; }
.cursor-cell { cursor: cell; }
.cursor-crosshair { cursor: crosshair; }
.cursor-vertical-text { cursor: vertical-text; }
.cursor-alias { cursor: alias; }
.cursor-copy { cursor: copy; }
.cursor-no-drop { cursor: no-drop; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-all-scroll { cursor: all-scroll; }
.cursor-col-resize { cursor: col-resize; }
.cursor-row-resize { cursor: row-resize; }
.cursor-n-resize { cursor: n-resize; }
.cursor-e-resize { cursor: e-resize; }
.cursor-s-resize { cursor: s-resize; }
.cursor-w-resize { cursor: w-resize; }
.cursor-ne-resize { cursor: ne-resize; }
.cursor-nw-resize { cursor: nw-resize; }
.cursor-se-resize { cursor: se-resize; }
.cursor-sw-resize { cursor: sw-resize; }
.cursor-ew-resize { cursor: ew-resize; }
.cursor-ns-resize { cursor: ns-resize; }
.cursor-nesw-resize { cursor: nesw-resize; }
.cursor-nwse-resize { cursor: nwse-resize; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }

/* ── Visibility ───────────────────────────────────────────────────────────── */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }

/* ── Z-Index ──────────────────────────────────────────────────────────────── */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }
.z-max { z-index: 9999; }

/* ── Object Fit ───────────────────────────────────────────────────────────── */

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* ── Object Position ──────────────────────────────────────────────────────── */

.object-bottom { object-position: bottom; }
.object-center { object-position: center; }
.object-left { object-position: left; }
.object-left-bottom { object-position: left bottom; }
.object-left-top { object-position: left top; }
.object-right { object-position: right; }
.object-right-bottom { object-position: right bottom; }
.object-right-top { object-position: right top; }
.object-top { object-position: top; }

/* ── User Select ──────────────────────────────────────────────────────────── */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ── Pointer Events ───────────────────────────────────────────────────────── */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ── Resize ───────────────────────────────────────────────────────────────── */

.resize-none { resize: none; }
.resize-y { resize: vertical; }
.resize-x { resize: horizontal; }
.resize { resize: both; }

/* ── Scroll Behavior ──────────────────────────────────────────────────────── */

.scroll-auto { scroll-behavior: auto; }
.scroll-smooth { scroll-behavior: smooth; }

/* ── Scroll Snap ──────────────────────────────────────────────────────────── */

.snap-start { scroll-snap-align: start; }
.snap-end { scroll-snap-align: end; }
.snap-center { scroll-snap-align: center; }
.snap-align-none { scroll-snap-align: none; }

.snap-none { scroll-snap-type: none; }
.snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); }
.snap-y { scroll-snap-type: y var(--tw-scroll-snap-strictness); }
.snap-both { scroll-snap-type: both var(--tw-scroll-snap-strictness); }

.snap-mandatory { --tw-scroll-snap-strictness: mandatory; }
.snap-proximity { --tw-scroll-snap-strictness: proximity; }

/* ── Touch Action ─────────────────────────────────────────────────────────── */

.touch-auto { touch-action: auto; }
.touch-none { touch-action: none; }
.touch-pan-x { touch-action: pan-x; }
.touch-pan-left { touch-action: pan-left; }
.touch-pan-right { touch-action: pan-right; }
.touch-pan-y { touch-action: pan-y; }
.touch-pan-up { touch-action: pan-up; }
.touch-pan-down { touch-action: pan-down; }
.touch-pinch-zoom { touch-action: pinch-zoom; }
.touch-manipulation { touch-action: manipulation; }

/* ── Will Change ──────────────────────────────────────────────────────────── */

.will-change-auto { will-change: auto; }
.will-change-scroll { will-change: scroll-position; }
.will-change-contents { will-change: contents; }
.will-change-transform { will-change: transform; }

/* ── Content Visibility ───────────────────────────────────────────────────── */

.content-auto { content-visibility: auto; }
.content-hidden { content-visibility: hidden; }
.content-visible { content-visibility: visible; }

/* ── Appearance ───────────────────────────────────────────────────────────── */

.appearance-none { appearance: none; }
.appearance-auto { appearance: auto; }

/* ── Outline ──────────────────────────────────────────────────────────────── */

.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.outline { outline-style: solid; }
.outline-dashed { outline-style: dashed; }
.outline-dotted { outline-style: dotted; }
.outline-double { outline-style: double; }
.outline-0 { outline-width: 0px; }
.outline-1 { outline-width: 1px; }
.outline-2 { outline-width: 2px; }
.outline-4 { outline-width: 4px; }
.outline-8 { outline-width: 8px; }

/* ── Screen Reader ────────────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END OF CSS FILE
   ═══════════════════════════════════════════════════════════════════════════════
   
   Total Lines: 3500+
   Version: 6.0 Ultimate Edition
   Last Updated: June 2026
   
   This CSS file provides a complete, production-ready design system for 
   DriveAxis Kenya, including:
   
   ✓ Comprehensive design tokens and variables
   ✓ Modern CSS reset and base styles
   ✓ Complete typography system
   ✓ Responsive navigation with mobile menu
   ✓ Hero section with animations
   ✓ Search with autocomplete
   ✓ Card grid system
   ✓ Modal system with multiple variants
   ✓ Form elements and validation
   ✓ Button system with variants
   ✓ Footer with multiple columns
   ✓ Admin panel interface
   ✓ Accessibility features
   ✓ Dark mode support (ready)
   ✓ Print styles
   ✓ 500+ utility classes
   ✓ Responsive breakpoints for all devices
   ✓ Animations and transitions
   ✓ Loading states and skeletons
   
   ═══════════════════════════════════════════════════════════════════════════════

   /* ── MODAL FINAL FIX ── */
.modal-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 99999 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal-overlay.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Fix Bootstrap conflict */
  .modal-overlay .modal {
    display: block !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: auto !important;
    overflow: visible !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
    flex-shrink: 0 !important;
  }
  
  /* Detail modal: image full width, body scrollable */
  .modal--detail {
    overflow: visible !important;
    padding: 0 !important;
  }
  
  .modal--detail .detail-gallery {
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
  }
  .modal--detail .detail-gallery {
    display: grid !important;                    /* ← ADD THIS */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;  /* ← ADD THIS */
    gap: 0.5rem !important;                      /* ← ADD THIS */
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;                 /* ← ADD THIS */
  }
  
  .modal--detail .detail-gallery img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }
  
  .modal--detail .detail-gallery.single img {
    height: 420px !important;
  }
  
  .modal--detail .detail-body {
    padding: 2rem 2.5rem 3rem !important;
    background: #fff !important;
    border-radius: 0 0 20px 20px !important;
  }
  
  .modal--detail .detail-body h2 {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 0.5rem 0 !important;
  }
  
  .modal--detail .detail-price {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #c74634 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .modal--detail .detail-specs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 1.25rem !important;
    background: #f8f8f6 !important;
    border-radius: 12px !important;
    margin: 1.5rem 0 !important;
  }
  
  .modal--detail .spec-item {
    background: #fff !important;
    border: 1px solid #e5e3dc !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }
  
  .modal--detail .spec-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9a9890 !important;
    font-weight: 600 !important;
  }
  
  .modal--detail .spec-value {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
  }
  
  .modal--detail .detail-desc {
    padding: 1.25rem !important;
    background: #fafaf8 !important;
    border-left: 4px solid #c74634 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #5a5854 !important;
    line-height: 1.8 !important;
    margin: 1.5rem 0 !important;
  }
  
  .modal--detail .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
  
  .modal--detail .detail-actions button {
    padding: 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
  }
  
  .modal--detail .detail-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  }
  
  /* Close button always visible */
  .modal-close {
    position: sticky !important;
    top: 1rem !important;
    left: calc(100% - 3rem) !important;
    float: right !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    color: #333 !important;
    z-index: 200 !important;
    margin: 1rem 1rem 0 auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
  }
  
  .modal-close:hover {
    background: #c74634 !important;
    color: white !important;
    border-color: #c74634 !important;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .modal-overlay {
      padding: 0 !important;
      align-items: flex-start !important;
    }
  
    .modal-overlay .modal {
      border-radius: 0 !important;
      min-height: 100vh !important;
      margin: 0 !important;
    }
  
    .modal--detail .detail-gallery img {
      height: 260px !important;
    }
  
    .modal--detail .detail-body {
      padding: 1.5rem !important;
    }
  
    .modal--detail .detail-actions {
      grid-template-columns: 1fr !important;
    }
  }