/* ==========================================================================
   Restaurant Explorer - Professional CSS Architecture
   ==========================================================================

   TABLE OF CONTENTS:
   1. CSS Layers & Reset
   2. Design Tokens (Theme Variables)
   3. Base Styles
   4. Layout Components
   5. UI Components
   6. Animations & Keyframes
   7. Responsive Design (Mobile-First)

   BROWSER SUPPORT: Modern browsers (Chrome 90+, Firefox 88+, Safari 14+)
   ========================================================================== */

/* ==========================================================================
   1. CSS LAYERS - Cascade Control
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   RESET LAYER - Minimal Modern Reset
   ========================================================================== */

@layer reset {
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Remove list styles on ul, ol elements with a list role */
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }

    /* Set core body defaults */
    body {
        min-block-size: 100vh;
        text-rendering: optimizeSpeed;
        line-height: 1.5;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* ===================================
       Reduced Motion - Accessibility
       Respect user preferences for reduced motion
       =================================== */

    @media (prefers-reduced-motion: reduce) {
        /* Remove all animations */
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        /* Disable smooth scrolling */
        html {
            scroll-behavior: auto !important;
        }

        /* Remove transform transitions that can cause vestibular issues */
        .restaurant-card,
        .view-toggle-btn,
        .share-btn,
        .modal-content,
        .sidebar,
        .favorite-btn {
            transition: none !important;
        }

        /* Keep opacity transitions (less disruptive) but make them instant */
        .modal-overlay,
        .sidebar-backdrop,
        .toast {
            transition: opacity 0.01ms !important;
        }

        /* Disable parallax and transform effects */
        .view-toggle::before {
            transition: none !important;
        }

        /* Show elements immediately instead of animating */
        .modal.active .modal-content,
        .sidebar.open {
            animation: none !important;
        }
    }
}

/* ==========================================================================
   2. DESIGN TOKENS - CSS Custom Properties
   ========================================================================== */

@layer tokens {
    :root {
        /* ===================================
           Color System - Semantic Tokens
           =================================== */

        /* Primary Brand Colors */
        --color-primary-50: #FFE5EC;
        --color-primary-100: #FFB3C6;
        --color-primary-200: #FF8AA3;
        --color-primary-300: #FF5A7A;
        --color-primary-400: #FF385C;
        --color-primary-500: #E31C5F;  /* Base */
        --color-primary-600: #C91654;
        --color-primary-700: #A61148;
        --color-primary-800: #8A0D3C;
        --color-primary-900: #6B0A2F;

        /* Neutral Colors - Light Theme */
        --color-neutral-0: #FFFFFF;
        --color-neutral-50: #FAFAFA;
        --color-neutral-100: #F9FAFB;
        --color-neutral-200: #F3F4F6;
        --color-neutral-300: #E5E7EB;
        --color-neutral-400: #D1D5DB;
        --color-neutral-500: #9CA3AF;
        --color-neutral-600: #6B7280;
        --color-neutral-700: #4B5563;
        --color-neutral-800: #374151;
        --color-neutral-900: #1F2937;
        --color-neutral-950: #1A1A1A;

        /* Semantic Color Assignments - Light Mode */
        --color-text-primary: var(--color-neutral-950);
        --color-text-secondary: var(--color-neutral-600);
        --color-text-tertiary: var(--color-neutral-500);
        --color-text-inverse: var(--color-neutral-0);

        --color-bg-base: var(--color-neutral-50);
        --color-bg-secondary: var(--color-neutral-100);
        --color-surface: var(--color-neutral-0);
        --color-surface-elevated: var(--color-neutral-0);

        --color-border-subtle: var(--color-neutral-200);
        --color-border-default: var(--color-neutral-300);
        --color-border-strong: var(--color-neutral-400);

        /* Status Colors */
        --color-success-base: #10B981;
        --color-success-dark: #059669;
        --color-error-base: #EF4444;
        --color-error-dark: #DC2626;
        --color-warning-base: #F59E0B;
        --color-info-base: #3B82F6;

        /* Overlay & Backdrop Colors */
        --color-overlay-light: rgb(0 0 0 / 0.5);
        --color-overlay-strong: rgb(0 0 0 / 0.7);
        --color-backdrop: rgb(0 0 0 / 0.5);
        --color-backdrop-blur: rgb(0 0 0 / 0.5);
        --color-surface-overlay: rgb(255 255 255 / 0.98);
        --color-surface-glass: rgb(255 255 255 / 0.95);

        /* Status Overlays */
        --color-error-subtle: rgb(239 68 68 / 0.1);
        --color-error-border: rgb(239 68 68 / 0.3);

        /* ===================================
           Spacing System - 8pt Grid
           =================================== */

        --space-0: 0;
        --space-1: 0.25rem;   /* 4px */
        --space-2: 0.5rem;    /* 8px */
        --space-3: 0.75rem;   /* 12px */
        --space-4: 1rem;      /* 16px */
        --space-5: 1.25rem;   /* 20px */
        --space-6: 1.5rem;    /* 24px */
        --space-7: 1.75rem;   /* 28px */
        --space-8: 2rem;      /* 32px */
        --space-10: 2.5rem;   /* 40px */
        --space-12: 3rem;     /* 48px */
        --space-16: 4rem;     /* 64px */
        --space-20: 5rem;     /* 80px */

        /* Semantic Spacing Aliases */
        --space-xs: var(--space-1);
        --space-sm: var(--space-2);
        --space-md: var(--space-4);
        --space-lg: var(--space-6);
        --space-xl: var(--space-8);
        --space-2xl: var(--space-12);

        /* ===================================
           Typography System
           =================================== */

        /* Font Families */
        --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                           'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
                           'Helvetica Neue', sans-serif;
        --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
                           'Fira Mono', 'Roboto Mono', monospace;

        /* Font Sizes - Fluid Typography */
        --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);      /* 11-12px */
        --font-size-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);     /* 13-14px */
        --font-size-base: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);          /* 14-16px */
        --font-size-md: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);     /* 15-18px */
        --font-size-lg: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);             /* 16-20px */
        --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);           /* 20-24px */
        --font-size-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);             /* 24-32px */
        --font-size-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);           /* 30-40px */

        /* Font Weights */
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

        /* Line Heights */
        --line-height-tight: 1.2;
        --line-height-snug: 1.375;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.625;
        --line-height-loose: 2;

        /* Letter Spacing */
        --letter-spacing-tight: -0.02em;
        --letter-spacing-normal: 0;
        --letter-spacing-wide: 0.02em;
        --letter-spacing-wider: 0.05em;

        /* ===================================
           Border Radius System
           =================================== */

        --radius-none: 0;
        --radius-sm: 0.375rem;    /* 6px */
        --radius-md: 0.5rem;      /* 8px */
        --radius-lg: 1rem;        /* 16px */
        --radius-xl: 1.5rem;      /* 24px */
        --radius-2xl: 2rem;       /* 32px */
        --radius-full: 9999px;

        /* ===================================
           Shadow System - Elevation
           =================================== */

        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08),
                     0 1px 2px -1px rgb(0 0 0 / 0.04);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08),
                     0 2px 4px -2px rgb(0 0 0 / 0.04);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08),
                     0 4px 6px -4px rgb(0 0 0 / 0.04);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08),
                     0 8px 10px -6px rgb(0 0 0 / 0.04);
        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.12);

        /* Focus Shadow */
        --shadow-focus: 0 0 0 3px rgb(255 56 92 / 0.1);

        /* ===================================
           Animation System - Material Motion
           =================================== */

        /* Timing Functions (Easing Curves) */
        --ease-linear: linear;
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

        /* Material Design Standard Curves */
        --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
        --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
        --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);

        /* Duration Tokens */
        --duration-instant: 50ms;
        --duration-fast: 100ms;
        --duration-normal: 200ms;
        --duration-slow: 300ms;
        --duration-slower: 400ms;
        --duration-slowest: 500ms;

        /* Semantic Motion Tokens */
        --transition-quick: var(--duration-fast) var(--ease-out);
        --transition-base: var(--duration-normal) var(--ease-in-out);
        --transition-smooth: var(--duration-slow) var(--ease-in-out);
        --transition-emphasis: var(--duration-slower) var(--ease-standard);

        /* ===================================
           Z-Index Scale - Layering System
           =================================== */

        --z-base: 0;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-fixed: 300;
        --z-backdrop: 900;
        --z-modal: 1000;
        --z-popover: 1100;
        --z-toast: 2000;
        --z-tooltip: 3000;

        /* ===================================
           Layout Constraints
           =================================== */

        --container-max-width: 1440px;
        --container-padding: var(--space-lg);
        --sidebar-width-desktop: 280px;
        --sidebar-width-tablet: 220px;
        --header-height: 72px;
        --view-toggle-height: 64px;

        /* ===================================
           Breakpoints (for reference in JS)
           =================================== */

        --breakpoint-sm: 480px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 1024px;
        --breakpoint-xl: 1280px;
        --breakpoint-2xl: 1536px;
    }

    /* ===================================
       Dark Theme Overrides
       =================================== */

    :root[data-theme="dark"],
    :root:not([data-theme]) {
        @media (prefers-color-scheme: dark) {
            /* Primary color scale - adjusted for dark mode */
            --color-primary-50: rgba(255, 56, 92, 0.1);   /* Very subtle for backgrounds */
            --color-primary-100: rgba(255, 56, 92, 0.15); /* Light backgrounds */
            --color-primary-200: rgba(255, 90, 122, 0.25);
            --color-primary-300: #FF5A7A;
            --color-primary-400: #FF385C;
            --color-primary-500: #E31C5F;  /* Base - slightly darker */
            --color-primary-600: #C91654;
            --color-primary-700: #A61148;
            --color-primary-800: #8A0D3C;
            --color-primary-900: #6B0A2F;

            /* Neutral color inversions */
            --color-text-primary: var(--color-neutral-0);
            --color-text-secondary: var(--color-neutral-400);
            --color-text-tertiary: var(--color-neutral-500);
            --color-text-inverse: var(--color-neutral-950);

            --color-bg-base: #0F172A;
            --color-bg-secondary: #1E293B;
            --color-surface: #1E293B;
            --color-surface-elevated: #334155;

            --color-border-subtle: #334155;
            --color-border-default: #475569;
            --color-border-strong: #64748B;

            /* Status colors - adjusted for dark mode */
            --color-success-base: #10B981;
            --color-success-dark: #059669;
            --color-error-base: #F87171;
            --color-error-dark: #EF4444;
            --color-warning-base: #FBBF24;
            --color-info-base: #60A5FA;

            /* Overlay & Backdrop Colors - Dark Mode */
            --color-overlay-light: rgb(0 0 0 / 0.7);
            --color-overlay-strong: rgb(0 0 0 / 0.9);
            --color-backdrop: rgb(0 0 0 / 0.7);
            --color-surface-overlay: rgb(30 41 59 / 0.98);
            --color-surface-glass: rgb(30 41 59 / 0.95);

            /* Status Overlays - Dark Mode */
            --color-error-subtle: rgb(248 113 113 / 0.15);
            --color-error-border: rgb(248 113 113 / 0.4);

            /* Enhanced shadows for dark mode */
            --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
            --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4),
                         0 1px 2px -1px rgb(0 0 0 / 0.3);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5),
                         0 2px 4px -2px rgb(0 0 0 / 0.4);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6),
                         0 4px 6px -4px rgb(0 0 0 / 0.5);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7),
                         0 8px 10px -6px rgb(0 0 0 / 0.6);
            --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.8);

            /* Focus shadow for dark mode */
            --shadow-focus: 0 0 0 3px rgba(255, 56, 92, 0.3);
        }
    }
}

/* ==========================================================================
   3. BASE STYLES - Document Foundation
   ========================================================================== */

@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-size-adjust: 100%;
    }

    /* Respect user's font size preferences */
    @media (prefers-reduced-data: reduce) {
        html {
            font-size: 100%; /* Don't use smaller fonts on slow connections */
        }
    }

    body {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-text-primary);
        background-color: var(--color-bg-base);
        transition:
            background-color var(--transition-emphasis),
            color var(--transition-emphasis);

        /* Safe area support for notched devices */
        padding-inline-start: env(safe-area-inset-left);
        padding-inline-end: env(safe-area-inset-right);
    }

    /* ===================================
       ARIA Attributes Support
       =================================== */

    /* Hide decorative elements from screen readers */
    [aria-hidden="true"] {
        speak: never;
    }

    /* Indicate disabled state clearly */
    [aria-disabled="true"],
    [disabled] {
        cursor: not-allowed;
        opacity: 0.6;
        filter: grayscale(40%);
    }

    /* Indicate loading/busy state */
    [aria-busy="true"] {
        cursor: wait;
        position: relative;
    }

    [aria-busy="true"]::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgb(255 255 255 / 0.5);
        cursor: wait;
    }

    /* Indicate expanded/collapsed state */
    [aria-expanded="false"] > svg {
        transform: rotate(0deg);
        transition: transform var(--transition-base);
    }

    [aria-expanded="true"] > svg {
        transform: rotate(180deg);
    }

    /* Current/active state indication */
    [aria-current="page"],
    [aria-current="true"] {
        font-weight: var(--font-weight-bold);
        position: relative;
    }

    [aria-current="page"]::before {
        content: '';
        position: absolute;
        inset-inline-start: -8px;
        inset-block: 0;
        inline-size: 4px;
        background-color: var(--color-primary-400);
        border-radius: var(--radius-sm);
    }

    /* Invalid input indication */
    [aria-invalid="true"] {
        border-color: var(--color-error-base);
        outline-color: var(--color-error-base);
    }

    [aria-invalid="true"]:focus {
        box-shadow: 0 0 0 3px var(--color-error-subtle);
    }

    /* ===================================
       Focus Management - WCAG 2.1 AAA
       =================================== */

    /* Default focus for all interactive elements */
    :focus {
        outline: 3px solid var(--color-primary-400);
        outline-offset: 3px;
        scroll-margin-block: 5rem; /* Ensure focused elements are visible when scrolled */
    }

    /* Hide outline for mouse users, show for keyboard users */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* Enhanced keyboard focus indicator */
    :focus-visible {
        outline: 3px solid var(--color-primary-400);
        outline-offset: 3px;
        box-shadow: 0 0 0 3px var(--color-primary-50);
        position: relative;
        z-index: 1; /* Ensure focus ring is always visible */
    }

    /* High contrast focus for better visibility */
    @media (prefers-contrast: high) {
        :focus-visible {
            outline-width: 4px;
            outline-color: currentColor;
        }
    }

    /* Selection Styling */
    ::selection {
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        text-shadow: none; /* Improve readability */
    }

    /* ===================================
       Keyboard Navigation Indicators
       =================================== */

    /* Skip link for keyboard navigation */
    .skip-link {
        position: absolute;
        inset-block-start: -100px;
        inset-inline-start: 0;
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        padding: var(--space-md) var(--space-lg);
        text-decoration: none;
        font-weight: var(--font-weight-bold);
        z-index: 9999;
        border-radius: 0 0 var(--radius-md) 0;
        box-shadow: var(--shadow-xl);
    }

    .skip-link:focus {
        inset-block-start: 0;
        outline-offset: -3px;
    }

    /* Show keyboard navigation mode indicator */
    body:has(*:focus-visible)::before {
        content: '';
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 4px;
        block-size: 100vh;
        background: var(--color-primary-400);
        z-index: 9998;
        pointer-events: none;
        opacity: 0.5;
    }

    /* ===================================
       Screen Reader Only Utilities
       =================================== */

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

    .sr-only-focusable:focus,
    .sr-only-focusable:active {
        position: static;
        inline-size: auto;
        block-size: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    /* Live region for screen reader announcements */
    .sr-live-region {
        position: absolute;
        inset-inline-start: -10000px;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
    }

    /* ===================================
       High Contrast Mode Support
       =================================== */

    @media (prefers-contrast: high) {
        /* Increase border visibility */
        .restaurant-card,
        .modal-content,
        .sidebar,
        button,
        input,
        select {
            border: 2px solid currentColor;
        }

        /* Ensure focus is always visible */
        *:focus-visible {
            outline: 4px solid currentColor;
            outline-offset: 4px;
        }

        /* Remove subtle effects */
        .badge,
        .favorite-btn {
            backdrop-filter: none;
        }

        /* Increase shadow contrast */
        .restaurant-card {
            box-shadow: 0 0 0 2px currentColor;
        }
    }

    /* ===================================
       Forced Colors Mode (Windows High Contrast)
       =================================== */

    @media (forced-colors: active) {
        /* Preserve semantic colors */
        .btn-primary,
        .mobile-filters-toggle {
            forced-color-adjust: none;
            background-color: ButtonFace;
            color: ButtonText;
            border: 2px solid ButtonBorder;
        }

        /* Ensure icons are visible */
        svg {
            forced-color-adjust: auto;
        }

        /* Clear focus indicators */
        *:focus-visible {
            outline: 3px solid Highlight;
        }

        /* Ensure borders are visible */
        .restaurant-card,
        .modal-content,
        .sidebar {
            border: 2px solid CanvasText;
        }

        /* Make links distinguishable */
        a {
            text-decoration: underline;
        }
    }

    /* ===================================
       Print Accessibility
       =================================== */

    @media print {
        /* Ensure links are visible in print */
        a[href]::after {
            content: " (" attr(href) ")";
            font-size: 0.8em;
            font-weight: normal;
        }

        /* Don't print decorative elements */
        .theme-toggle,
        .share-btn,
        .favorite-btn {
            display: none;
        }

        /* Ensure good contrast in print */
        * {
            background: white !important;
            color: black !important;
            box-shadow: none !important;
        }

        /* Show focus outlines in print for forms */
        :focus {
            outline: 2px solid black;
        }
    }

    /* ===================================
       Touch & Pointer Accessibility
       =================================== */

    /* Larger touch targets on touch devices */
    @media (pointer: coarse) {
        button,
        a,
        input,
        select,
        .checkbox-label {
            min-block-size: 48px; /* Larger than 44px for touch */
            min-inline-size: 48px;
        }
    }

    /* Finer control for mouse/trackpad users */
    @media (pointer: fine) {
        /* Allow smaller interactive elements */
        ::-webkit-scrollbar {
            inline-size: 8px;
            block-size: 8px;
        }
    }

    /* ===================================
       Dark Mode Accessibility Enhancements
       =================================== */

    @media (prefers-color-scheme: dark) {
        /* Ensure sufficient contrast in dark mode */
        :root:not([data-theme]) {
            /* Increase text contrast */
            --color-text-secondary: #D1D5DB; /* Lighter for better readability */
            --color-text-tertiary: #9CA3AF;
        }
    }

    /* Remove spinner from number inputs */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        appearance: none;
        margin: 0;
    }

    input[type="number"] {
        appearance: textfield;
    }
}

/* ==========================================================================
   4. LAYOUT COMPONENTS
   ========================================================================== */

@layer layout {

    /* ==================
       Container
       ================== */

    .container {
        max-inline-size: var(--container-max-width);
        margin-inline: auto;
        padding-inline: var(--container-padding);
    }

    /* ==================
       Header
       ================== */

    .header {
        background-color: var(--color-surface);
        padding-block: var(--space-lg);
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-sticky);
        box-shadow: var(--shadow-xs);
        border-block-end: 1px solid var(--color-border-subtle);

        /* Performance optimization */
        contain: layout style;
        will-change: transform;
        transition: box-shadow var(--transition-base);
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }

    .logo {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        letter-spacing: var(--letter-spacing-tight);
        display: flex;
        align-items: center;
        gap: var(--space-md);
        line-height: var(--line-height-tight);
    }

    .header-stats {
        display: flex;
        gap: clamp(1.5rem, 2vw, 2.5rem);
        align-items: center;
    }

    .stat {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-1);
    }

    .stat-value {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        letter-spacing: var(--letter-spacing-tight);
        line-height: var(--line-height-tight);
        font-variant-numeric: tabular-nums;
    }

    .stat-label {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        font-weight: var(--font-weight-semibold);
    }

    /* ==================
       View Toggle Container
       ================== */

    .view-toggle-container {
        background-color: var(--color-bg-base);
        padding-block: clamp(1rem, 1.5vw, 1.25rem);
        border-block-end: 1px solid var(--color-border-subtle);
    }

    .view-toggle-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        flex-wrap: wrap;
    }

    /* ==================
       Main Layout Grid
       ================== */

    .main-layout {
        display: grid;
        grid-template-columns: minmax(240px, var(--sidebar-width-desktop)) 1fr;
        gap: clamp(1.5rem, 3vw, 2.5rem);
        padding-block: var(--space-xl) var(--space-16);
        min-block-size: calc(100vh - 200px);
    }

    /* ==================
       Sidebar
       ================== */

    .sidebar {
        block-size: fit-content;
        max-block-size: calc(100vh - 160px);
        overflow-y: auto;
        position: sticky;
        inset-block-start: 160px;
        padding-inline-end: var(--space-sm);

        /* Custom scrollbar styling */
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        transition: scrollbar-color var(--transition-base);
    }

    .sidebar:hover {
        scrollbar-color: var(--color-border-default) transparent;
    }

    /* Webkit scrollbar */
    .sidebar::-webkit-scrollbar {
        inline-size: 6px;
    }

    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: var(--radius-full);
        transition: background-color var(--transition-base);
    }

    .sidebar:hover::-webkit-scrollbar-thumb {
        background: var(--color-border-default);
    }

    .sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-tertiary);
    }
}

/* ==========================================================================
   5. UI COMPONENTS
   ========================================================================== */

@layer components {

    /* ==================
       Buttons - Base Styles
       ================== */

    .btn,
    button {
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Theme Toggle Button */
    .theme-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        border: 2px solid var(--color-border-subtle);
        background-color: var(--color-surface);
        border-radius: var(--radius-full);
        cursor: pointer;
        color: var(--color-text-secondary);
        flex-shrink: 0;

        transition:
            color var(--transition-base),
            border-color var(--transition-base),
            background-color var(--transition-base),
            transform var(--transition-quick);
    }

    .theme-toggle:hover {
        color: var(--color-primary-400);
        border-color: var(--color-primary-400);
        background-color: var(--color-primary-50);
        transform: scale(1.05);
    }

    .theme-toggle:active {
        transform: scale(0.95);
    }

    .theme-toggle svg {
        transition: transform var(--transition-smooth);
    }

    .theme-toggle:hover svg {
        transform: rotate(20deg);
    }

    /* View Toggle */
    .view-toggle {
        display: flex;
        gap: var(--space-2);
        background-color: var(--color-surface);
        padding: 6px; /* Intentional: Matches design spec */
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
        position: relative;
        isolation: isolate; /* Create new stacking context */
    }

    /* Sliding background indicator */
    .view-toggle::before {
        content: '';
        position: absolute;
        inset-block-start: 6px;
        inset-inline-start: 6px;
        inline-size: calc(50% - 9px); /* 50% minus padding (6px) and half gap (4px) */
        block-size: calc(100% - 12px); /* 100% minus top/bottom padding (6px each) */
        background-color: var(--color-primary-400);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        z-index: 0;

        transition: transform var(--transition-smooth);
        will-change: transform;
    }

    /* Slide indicator when map view is active */
    .view-toggle:has(.view-toggle-btn[data-view="map"].active)::before {
        transform: translateX(calc(100% + var(--space-2)));
    }

    /* View Toggle Buttons */
    .view-toggle-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 10px 20px;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        background: transparent;
        color: var(--color-text-secondary);
        position: relative;
        z-index: 1;

        transition:
            color var(--transition-base),
            transform var(--transition-quick);
    }

    .view-toggle-btn:hover:not(.active) {
        color: var(--color-text-primary);
    }

    .view-toggle-btn.active {
        color: var(--color-neutral-0);
    }

    .view-toggle-btn:active {
        transform: scale(0.96);
    }

    .view-toggle-btn svg {
        opacity: 0.7;
        transition:
            opacity var(--transition-base),
            transform var(--transition-base);
    }

    .view-toggle-btn.active svg {
        opacity: 1;
    }

    .view-toggle-btn:hover svg {
        transform: scale(1.1);
    }

    /* Share Button */
    .share-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 10px 20px;
        border: 2px solid var(--color-border-subtle);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;

        transition:
            color var(--transition-base),
            border-color var(--transition-base),
            background-color var(--transition-base),
            transform var(--transition-quick);
    }

    .share-btn:hover {
        color: var(--color-primary-400);
        border-color: var(--color-primary-400);
        background-color: var(--color-primary-50);
    }

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

    .share-btn svg {
        transition: transform var(--transition-base);
    }

    .share-btn:hover svg {
        transform: translateY(-2px);
    }

    /* ==================
       Filter Components
       ================== */

    .filters-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-block-end: var(--space-xl);
    }

    .filters-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .filters-title h2 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        letter-spacing: var(--letter-spacing-tight);
    }

    .filter-badge {
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        padding: 2px 6px;
        border-radius: var(--radius-full);
        min-inline-size: 18px;
        text-align: center;
        font-variant-numeric: tabular-nums;

        transition: transform var(--transition-quick);
    }

    .filter-badge.counting {
        animation: badge-pulse 200ms var(--ease-out);
    }

    @keyframes badge-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
    }

    .btn-text {
        background: none;
        border: none;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);

        transition:
            color var(--transition-base),
            background-color var(--transition-base);
    }

    .btn-text:hover {
        color: var(--color-primary-400);
        background-color: var(--color-primary-50);
    }

    /* Filter Section */
    .filter-section {
        margin-block-end: var(--space-xl);
    }

    .filter-label {
        display: block;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wide);
        margin-block-end: var(--space-3);
    }

    /* Form Inputs */
    .search-input,
    .range-input,
    .select-input {
        inline-size: 100%;
        padding: 12px 16px;
        border: 2px solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        background-color: var(--color-surface);
        color: var(--color-text-primary);
        font-family: inherit;

        transition:
            border-color var(--transition-base),
            box-shadow var(--transition-base),
            transform var(--transition-quick);
    }

    .search-input:hover,
    .range-input:hover,
    .select-input:hover {
        border-color: var(--color-border-strong);
    }

    .search-input:focus,
    .range-input:focus,
    .select-input:focus {
        outline: none;
        border-color: var(--color-primary-400);
        box-shadow: var(--shadow-focus);
        transform: translateY(-1px);
    }

    .search-input::placeholder,
    .range-input::placeholder {
        color: var(--color-text-tertiary);
        transition: color var(--transition-base);
    }

    .search-input:focus::placeholder,
    .range-input:focus::placeholder {
        color: var(--color-text-secondary);
    }

    /* Range Inputs Container */
    .range-inputs {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .range-inputs span {
        color: var(--color-text-tertiary);
        font-weight: var(--font-weight-semibold);
    }

    .range-inputs .range-input {
        flex: 1;
        padding: 10px 14px;
    }

    .select-input {
        cursor: pointer;
        font-weight: var(--font-weight-medium);
    }

    /* Checkbox Group */
    .checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-block-size: 240px;
        overflow-y: auto;
        padding-inline-end: var(--space-2);

        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .checkbox-group:hover {
        scrollbar-color: var(--color-border-default) transparent;
    }

    .checkbox-group::-webkit-scrollbar {
        inline-size: 4px;
    }

    .checkbox-group::-webkit-scrollbar-track {
        background: transparent;
    }

    .checkbox-group::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: var(--radius-full);
    }

    .checkbox-group:hover::-webkit-scrollbar-thumb {
        background: var(--color-border-default);
    }

    .checkbox-group::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-tertiary);
    }

    /* Checkbox Label */
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        padding-block: 6px;
        padding-inline: var(--space-2);
        margin-inline: calc(var(--space-2) * -1);
        border-radius: var(--radius-sm);

        transition:
            color var(--transition-base),
            background-color var(--transition-base),
            transform var(--transition-quick);
    }

    .checkbox-label:hover {
        color: var(--color-text-primary);
        background-color: var(--color-primary-50);
    }

    .checkbox-label:active {
        transform: scale(0.98);
    }

    /* Custom Checkbox */
    .checkbox-label input[type="checkbox"] {
        appearance: none;
        inline-size: 20px;
        block-size: 20px;
        cursor: pointer;
        border: 2px solid var(--color-border-default);
        border-radius: 4px;
        flex-shrink: 0;
        position: relative;
        background-color: var(--color-surface);

        transition:
            border-color var(--transition-base),
            background-color var(--transition-base);
    }

    .checkbox-label input[type="checkbox"]::after {
        content: '';
        position: absolute;
        display: none;
        inset-inline-start: 6px;
        inset-block-start: 2px;
        inline-size: 5px;
        block-size: 10px;
        border: solid var(--color-neutral-0);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
    }

    .checkbox-label input[type="checkbox"]:checked {
        background-color: var(--color-primary-400);
        border-color: var(--color-primary-400);
    }

    .checkbox-label input[type="checkbox"]:checked::after {
        display: block;
        animation: checkbox-check 250ms var(--ease-out) forwards;
    }

    @keyframes checkbox-check {
        0% {
            opacity: 0;
            block-size: 0;
            inset-block-start: 7px;
        }
        50% {
            opacity: 1;
            block-size: 5px;
            inset-block-start: 5px;
        }
        100% {
            opacity: 1;
            block-size: 10px;
            inset-block-start: 2px;
        }
    }

    .checkbox-label .filter-text {
        flex: 1;
        transition: font-weight var(--transition-base);
    }

    .checkbox-label input[type="checkbox"]:checked + .filter-text {
        color: var(--color-text-primary);
        font-weight: var(--font-weight-semibold);
    }

    .filter-count {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        background-color: var(--color-border-subtle);
        padding: 3px var(--space-2);
        border-radius: 10px;
        min-inline-size: 24px;
        text-align: center;
        font-variant-numeric: tabular-nums;

        transition:
            background-color var(--transition-base),
            color var(--transition-base),
            transform var(--transition-quick);
    }

    .checkbox-label:hover .filter-count {
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        transform: scale(1.05);
    }

    .checkbox-label input[type="checkbox"]:checked ~ .filter-count {
        background-color: var(--color-primary-100);
        color: var(--color-primary-600);
    }

    /* ==================
       Restaurant Cards
       ================== */

    .results-header {
        margin-block-end: var(--space-xl);
    }

    .results-header h2 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        letter-spacing: var(--letter-spacing-tight);
    }

    .restaurants-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
        gap: var(--space-xl);
    }

    .restaurant-card {
        background-color: var(--color-surface);
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        position: relative;

        /* Performance optimizations */
        contain: layout paint;
        will-change: transform, box-shadow;

        transition:
            box-shadow var(--transition-base),
            transform var(--transition-base);
    }

    .restaurant-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
    }

    .restaurant-card:active {
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px) scale(0.99);
        transition:
            box-shadow var(--transition-quick),
            transform var(--transition-quick);
    }

    .restaurant-card-image {
        inline-size: 100%;
        block-size: 220px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        position: relative;
        overflow: hidden;
    }

    .restaurant-card-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgb(255 255 255 / 0.1),
            transparent
        );
        transform: translateX(-100%);
        transition: transform 600ms var(--ease-out);
    }

    .restaurant-card:hover .restaurant-card-image::before {
        transform: translateX(100%);
    }

    .restaurant-card-badges {
        position: absolute;
        inset-block-start: var(--space-md);
        inset-inline-end: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-end;
    }

    .restaurant-card-content {
        padding: var(--space-lg);
    }

    .restaurant-card-header {
        margin-block-end: var(--space-3);
    }

    .restaurant-name {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        margin-block-end: 6px;
        letter-spacing: var(--letter-spacing-tight);
        line-height: var(--line-height-snug);
    }

    .restaurant-meta {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .restaurant-genre {
        font-size: var(--font-size-sm);
        color: var(--color-text-tertiary);
        font-weight: var(--font-weight-semibold);
    }

    .price-badge {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        padding: 2px var(--space-2);
        background-color: var(--color-border-subtle);
        border-radius: var(--radius-sm);
    }

    .restaurant-location {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin-block-end: var(--space-2);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .restaurant-hours-preview {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        margin-block-end: var(--space-md);
        padding: 6px 10px;
        background-color: var(--color-bg-secondary);
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
    }

    .restaurant-ratings {
        display: flex;
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    .rating {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: var(--font-size-sm);
    }

    .rating-header {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rating-value {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-base);
        color: var(--color-text-primary);
        font-variant-numeric: tabular-nums;
    }

    .stars {
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.5px;
        opacity: 0.6;
    }

    .rating-source {
        color: var(--color-text-tertiary);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wide);
    }

    /* ==================
       Badges
       ================== */

    .badge {
        background-color: var(--color-surface-overlay);
        padding: 6px 12px;
        border-radius: 20px;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;
        gap: 4px;
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(10px);

        transition: transform var(--transition-base);
    }

    .badge:hover {
        transform: translateY(-2px);
    }

    .badge.award {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        color: var(--color-neutral-950);
    }

    .badge.oad {
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
    }

    .badge.open-now {
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: var(--color-neutral-0);
    }

    /* ==================
       Favorite Button
       ================== */

    .favorite-btn {
        position: absolute;
        inset-block-start: var(--space-md);
        inset-inline-start: var(--space-md);
        inline-size: 44px;
        block-size: 44px;
        border: none;
        background-color: var(--color-surface-glass);
        border-radius: var(--radius-full);
        font-size: var(--font-size-lg);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(10px);
        z-index: 10;

        transition:
            transform var(--transition-base),
            box-shadow var(--transition-base);
    }

    .favorite-btn:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
    }

    .favorite-btn.active {
        animation: favorite-celebrate 300ms var(--ease-out);
    }

    @keyframes favorite-celebrate {
        0%, 100% { transform: scale(1); }
        30% { transform: scale(1.3); }
        50% { transform: scale(1.1) rotate(10deg); }
        70% { transform: scale(1.1) rotate(-10deg); }
    }

    /* ==================
       Loading & Empty States
       ================== */

    .loading,
    .no-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-block: var(--space-20);
        padding-inline: var(--space-lg);
        text-align: center;
    }

    .spinner {
        inline-size: 48px;
        block-size: 48px;
        border: 3px solid var(--color-border-subtle);
        border-block-start-color: var(--color-primary-400);
        border-radius: var(--radius-full);
        animation:
            spinner-spin 800ms linear infinite,
            spinner-breathe 2s ease-in-out infinite;
    }

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

    @keyframes spinner-breathe {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    .loading p {
        margin-block-start: var(--space-lg);
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-semibold);
    }

    .no-results svg {
        color: var(--color-text-tertiary);
        margin-block-end: var(--space-lg);
    }

    .no-results h3 {
        font-size: var(--font-size-lg);
        margin-block-end: var(--space-2);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
    }

    .no-results p {
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-medium);
        margin-block-end: var(--space-md);
    }

    .suggestions-list {
        list-style: none;
        padding: 0;
        margin: var(--space-lg) 0 var(--space-xl) 0;
        text-align: start;
        max-inline-size: 400px;
    }

    .suggestions-list li {
        padding: 0;
        margin-block-end: var(--space-2);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }

    .suggestions-list li::before {
        content: '· ';
        color: var(--color-primary-400);
        font-weight: var(--font-weight-bold);
        margin-inline-end: var(--space-2);
    }

    /* ==================
       Map View
       ================== */

    #map {
        inline-size: 100%;
        block-size: calc(100vh - 300px);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    /* ==================
       Modal
       ================== */

    .modal {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
    }

    .modal-overlay {
        position: absolute;
        inset: 0;
        background-color: var(--color-backdrop-blur);
        backdrop-filter: blur(6px);
    }

    .modal.active .modal-overlay {
        animation: modal-overlay-fade-in 250ms var(--ease-out);
    }

    @keyframes modal-overlay-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .modal-content {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--color-surface);
        border-radius: var(--radius-lg);
        max-inline-size: 800px;
        inline-size: 90%;
        max-block-size: 90vh;
        overflow-y: auto;
        box-shadow: var(--shadow-2xl);
    }

    .modal.active .modal-content {
        animation: modal-content-enter 400ms var(--ease-out);
    }

    @keyframes modal-content-enter {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.3);
        }
        60% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.03);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .modal.exiting .modal-content {
        animation: modal-content-exit 400ms var(--ease-in) forwards;
    }

    @keyframes modal-content-exit {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.3);
        }
    }

    .modal.exiting .modal-overlay {
        animation: modal-overlay-fade-out 250ms var(--ease-in) forwards;
    }

    @keyframes modal-overlay-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    .modal-close {
        position: sticky;
        inset-block-start: 20px;
        inset-inline-start: calc(100% - 64px);
        inline-size: 44px;
        block-size: 44px;
        border: none;
        background-color: var(--color-surface);
        border-radius: var(--radius-full);
        font-size: var(--font-size-2xl);
        cursor: pointer;
        box-shadow: var(--shadow-md);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-secondary);

        transition:
            background-color var(--transition-base),
            color var(--transition-base),
            transform var(--transition-quick);
    }

    .modal-close:hover {
        background-color: var(--color-border-subtle);
        color: var(--color-text-primary);
        transform: scale(1.05);
    }

    #modal-body {
        padding: var(--space-2xl);
    }

    .modal-header {
        margin-block-end: var(--space-xl);
    }

    .modal-title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        margin-block-end: var(--space-3);
        letter-spacing: var(--letter-spacing-tight);
        color: var(--color-text-primary);
    }

    .modal-subtitle {
        font-size: var(--font-size-base);
        color: var(--color-text-secondary);
        margin-block-end: var(--space-lg);
        font-weight: var(--font-weight-semibold);
    }

    .modal-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-block-end: var(--space-lg);
    }

    .modal-section {
        margin-block-end: 2.25rem;
    }

    .modal-section h3 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        margin-block-end: var(--space-md);
        color: var(--color-text-primary);
        letter-spacing: var(--letter-spacing-tight);
    }

    .modal-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--space-lg);
    }

    .modal-item {
        display: flex;
        flex-direction: column;
    }

    .modal-item-label {
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        color: var(--color-text-tertiary);
        letter-spacing: var(--letter-spacing-wider);
        margin-block-end: 6px;
        font-weight: var(--font-weight-bold);
    }

    .modal-item-value {
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-normal);
    }

    /* Opening Hours Formatting */
    .opening-hours {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hours-periods {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .hours-day-group {
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
        padding: 10px 14px;
        background-color: var(--color-bg-secondary);
        border-radius: var(--radius-md);
        border-inline-start: 3px solid var(--color-primary-400);
        line-height: var(--line-height-relaxed);
    }

    .day-label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary-400);
        min-inline-size: 80px;
        flex-shrink: 0;
    }

    .times {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--letter-spacing-wide);
    }

    .last-order {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        font-weight: var(--font-weight-medium);
    }

    .time-unknown {
        color: var(--color-text-tertiary);
        opacity: 0.7;
        font-style: normal;
        cursor: help;
    }

    .hours-period {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background-color: var(--color-bg-secondary);
        border-radius: var(--radius-md);
        border-inline-start: 3px solid var(--color-primary-400);
    }

    .period-type {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        display: flex;
        align-items: center;
        gap: 6px;
        min-inline-size: 100px;
    }

    .period-time {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .time-range {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--letter-spacing-wide);
    }

    .period-time .last-order {
        background-color: var(--color-border-subtle);
        padding: 4px var(--space-2);
        border-radius: var(--radius-sm);
    }

    .hours-closed {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 10px 14px;
        background-color: var(--color-error-subtle);
        border: 1.5px solid var(--color-error-border);
        border-radius: var(--radius-md);
    }

    .closed-icon {
        font-size: 18px;
        color: var(--color-error-base);
    }

    .closed-text {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-error-base);
    }

    .hours-notes {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hours-note {
        font-size: var(--font-size-xs);
        color: var(--color-text-tertiary);
        background-color: var(--color-primary-50);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        border-inline-start: 3px solid var(--color-primary-400);
        line-height: var(--line-height-normal);
    }

    .modal-links {
        display: flex;
        gap: var(--space-3);
        margin-block-start: var(--space-xl);
        flex-wrap: wrap;
    }

    /* ==================
       Primary/Secondary Buttons
       ================== */

    .btn {
        padding: 14px 28px;
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        text-decoration: none;
        display: inline-block;

        transition:
            background-color var(--transition-base),
            color var(--transition-base),
            transform var(--transition-quick),
            box-shadow var(--transition-base);
    }

    .btn-primary {
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
        background-color: var(--color-primary-500);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-secondary {
        background-color: var(--color-border-subtle);
        color: var(--color-text-primary);
    }

    .btn-secondary:hover {
        background-color: var(--color-text-tertiary);
        color: var(--color-neutral-0);
    }

    /* ==================
       Toast Notifications
       ================== */

    .toast {
        position: fixed;
        inset-block-end: var(--space-xl);
        inset-inline-end: var(--space-xl);
        background-color: var(--color-overlay-strong);
        color: var(--color-neutral-0);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        z-index: var(--z-toast);
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        backdrop-filter: blur(10px);

        transition:
            opacity var(--transition-smooth),
            transform var(--transition-smooth);
    }

    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    [data-theme="dark"] .toast {
        background-color: var(--color-surface-overlay);
        color: var(--color-text-primary);
    }

    /* ==================
       Leaflet Map Customization
       ================== */

    .leaflet-popup-content-wrapper {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .leaflet-popup-content {
        margin: var(--space-lg);
        font-family: inherit;
    }

    .map-popup-title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        margin-block-end: 6px;
        color: var(--color-text-primary);
    }

    .map-popup-info {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin-block-end: var(--space-2);
        font-weight: var(--font-weight-medium);
    }

    .map-popup-btn {
        display: inline-block;
        padding: var(--space-2) var(--space-4);
        background-color: var(--color-primary-400);
        color: var(--color-neutral-0);
        text-decoration: none;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        margin-block-start: 10px;

        transition:
            background-color var(--transition-base),
            transform var(--transition-quick);
    }

    .map-popup-btn:hover {
        background-color: var(--color-primary-500);
        transform: translateY(-1px);
    }

    /* Dark mode popup fix */
    [data-theme="dark"] .leaflet-popup-content-wrapper,
    :root:not([data-theme]) .leaflet-popup-content-wrapper {
        @media (prefers-color-scheme: dark) {
            background-color: var(--color-surface) !important;
            color: var(--color-text-primary) !important;
        }
    }

    [data-theme="dark"] .leaflet-popup-content-wrapper {
        background-color: var(--color-surface) !important;
        color: var(--color-text-primary) !important;
    }

    [data-theme="dark"] .leaflet-popup-tip,
    :root:not([data-theme]) .leaflet-popup-tip {
        @media (prefers-color-scheme: dark) {
            background-color: var(--color-surface) !important;
        }
    }

    [data-theme="dark"] .leaflet-popup-tip {
        background-color: var(--color-surface) !important;
    }

    /* ==================
       Mobile Filters Toggle
       ================== */

    .mobile-filters-toggle {
        display: none; /* Hidden by default, shown in mobile view */
        visibility: hidden; /* Extra insurance against FOUC */
        min-block-size: 44px; /* Prevent height expansion before styles load */
        max-block-size: 48px;
        block-size: auto;
        line-height: 1.2;
    }

    .sidebar-backdrop {
        display: none;
    }

    /* Show mobile filters on smaller screens */
    @media (max-width: 768px) {
        .mobile-filters-toggle {
            visibility: visible;
        }
    }
}

/* ==========================================================================
   7. RESPONSIVE DESIGN - Mobile-First Approach
   ========================================================================== */

@layer utilities {

    /* ==================================================
       Tablet and Small Desktop (≤1200px)
       ================================================== */

    @media (max-width: 1200px) {
        .main-layout {
            grid-template-columns: minmax(220px, 240px) 1fr;
            gap: var(--space-lg);
        }

        .container {
            padding-inline: var(--space-md);
        }
    }

    /* ==================================================
       Medium Tablet (≤1024px)
       ================================================== */

    @media (max-width: 1024px) {
        .main-layout {
            grid-template-columns: var(--sidebar-width-tablet) 1fr;
            gap: var(--space-md);
        }

        .restaurants-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
            gap: var(--space-lg);
        }

        .sidebar {
            padding-inline-end: var(--space-xs);
        }
    }

    /* ==================================================
       Small Tablet (≤900px)
       ================================================== */

    @media (max-width: 900px) {
        .main-layout {
            grid-template-columns: 200px 1fr;
            gap: var(--space-md);
        }

        .restaurants-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
            gap: var(--space-md);
        }

        .header-stats {
            gap: var(--space-md);
        }

        .stat-label {
            font-size: var(--font-size-xs);
        }
    }

    /* ==================================================
       Mobile (≤768px) - Drawer Pattern
       ================================================== */

    @media (max-width: 768px) {

        /* Enhanced touch targets (WCAG 2.5.5) */
        button,
        .btn,
        .checkbox-label {
            min-block-size: 44px;
            min-inline-size: 44px;
        }

        .container {
            padding-inline: var(--space-md);
        }

        .header {
            padding-block: var(--space-md);
        }

        /* Hide only the stats, keep theme toggle visible */
        .header-stats .stat {
            display: none;
        }

        .header-stats {
            gap: 0; /* Remove gap when stats are hidden */
        }

        .logo {
            font-size: var(--font-size-lg);
        }

        .view-toggle-container {
            padding-block: var(--space-md);
        }

        .view-toggle-wrapper {
            flex-direction: row;
            gap: var(--space-sm);
        }

        .view-toggle {
            flex: 1;
            min-inline-size: 0; /* Allow flex shrinking */
            padding: 4px; /* Reduced from 6px to balance with share button border */
        }

        /* Adjust sliding indicator for smaller container padding */
        .view-toggle::before {
            inset-block-start: 4px;
            inset-inline-start: 4px;
            inline-size: calc(50% - 7px); /* 50% minus padding (4px) and half gap (4px) */
            block-size: calc(100% - 8px); /* 100% minus top/bottom padding (4px each) */
        }

        .view-toggle:has(.view-toggle-btn[data-view="map"].active)::before {
            transform: translateX(calc(100% + var(--space-2)));
        }

        /* Compact view toggle buttons for mobile */
        .view-toggle-btn {
            padding: 8px 10px; /* Reduced to account for container padding */
            flex: 1;
            font-size: var(--font-size-sm);
            gap: var(--space-1);
            justify-content: center;
            min-inline-size: 0; /* Allow text to wrap if needed */
        }

        .view-toggle-btn svg {
            inline-size: 18px;
            block-size: 18px;
            flex-shrink: 0;
        }

        /* Compact share button - matched to view toggle total height */
        .share-btn {
            padding: 10px 14px; /* Slightly more padding to match visual height */
            flex-shrink: 0;
            gap: var(--space-1);
        }

        .share-btn svg {
            inline-size: 18px;
            block-size: 18px;
        }

        /* Mobile filters toggle button - prevent FOUC */
        .mobile-filters-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            inline-size: 100%;
            min-block-size: 44px; /* Minimum touch target */
            max-block-size: 48px; /* Prevent expansion during load */
            block-size: auto;
            flex-shrink: 0; /* Prevent shrinking */
            flex-grow: 0; /* Prevent growing */
            padding: 12px 16px;
            margin-block-end: var(--space-md);
            background-color: var(--color-primary-400);
            color: var(--color-neutral-0);
            border: none;
            border-radius: var(--radius-md);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-bold);
            line-height: 1.2; /* Prevent text expansion */
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            -webkit-tap-highlight-color: transparent;
            white-space: nowrap; /* Prevent text wrapping during load */
            overflow: hidden; /* Prevent content overflow */

            transition:
                background-color var(--transition-base),
                transform var(--transition-quick);
        }

        .mobile-filters-toggle:hover {
            background-color: var(--color-primary-500);
        }

        .mobile-filters-toggle:active {
            transform: scale(0.98);
        }

        .mobile-filters-toggle svg {
            inline-size: 18px;
            block-size: 18px;
            flex-shrink: 0;
        }

        .mobile-filters-toggle .filter-badge {
            margin-inline-start: auto;
        }

        /* Main layout switches to single column */
        .main-layout {
            grid-template-columns: 1fr;
            gap: 0;
            padding-block: var(--space-md) var(--space-12);
        }

        /* Sidebar becomes a drawer */
        .sidebar {
            position: fixed;
            inset-block: max(var(--space-lg), env(safe-area-inset-top, 0px)); /* Symmetric vertical spacing */
            inset-inline-start: 0;
            inline-size: min(85vw, 340px);
            max-block-size: calc(100dvh - 2 * max(var(--space-lg), env(safe-area-inset-top, 0px)));
            background-color: var(--color-surface);
            z-index: var(--z-modal);
            overflow-y: auto;
            overflow-x: hidden;
            transform: translateX(-100%);
            box-shadow: var(--shadow-xl);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0; /* Rounded right corners */
            padding: var(--space-lg);
            padding-inline-end: var(--space-md);
            margin: 0;
            border-inline-end: 1px solid var(--color-border-subtle);

            /* Smooth scrolling for iOS */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;

            transition: transform var(--transition-emphasis);
        }

        .sidebar.open {
            transform: translateX(0);
        }

        /* Backdrop for drawer */
        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background-color: var(--color-backdrop-blur);
            backdrop-filter: blur(4px);
            z-index: var(--z-backdrop);
            opacity: 0;

            transition: opacity var(--transition-base);
        }

        .sidebar-backdrop.visible {
            display: block;
            opacity: 1;
        }

        .checkbox-group {
            max-block-size: none;
            overflow-y: visible;
        }

        /* Single column restaurant grid */
        .restaurants-grid {
            grid-template-columns: 1fr;
            gap: var(--space-md);
        }

        .restaurant-card {
            margin-block: 0;
        }

        .restaurant-card-content {
            padding: var(--space-md);
        }

        /* Modal optimization for mobile */
        .modal-content {
            inline-size: 100%;
            max-inline-size: 100%;
            max-block-size: 90vh;
            max-block-size: 90dvh; /* Use dynamic viewport height */
            border-radius: var(--radius-lg);
            inset-block-start: 50%;
            inset-block-end: auto;
            inset-inline: 0; /* Symmetric positioning: both left and right = 0 */
            transform: translateY(-50%); /* Center vertically */
            overflow-y: auto; /* Ensure scrollability */
        }

        /* Remove drag handle on mobile - centered modal instead of bottom sheet */
        .modal-content::before {
            display: none;
        }

        .modal.active .modal-content {
            animation: modal-slide-up-centered 400ms var(--ease-out);
        }

        @keyframes modal-slide-up-centered {
            from {
                transform: translateY(100%);
            }
            to {
                transform: translateY(-50%);
            }
        }

        .modal.exiting .modal-content {
            animation: modal-slide-down-centered 300ms var(--ease-in) forwards;
        }

        @keyframes modal-slide-down-centered {
            from {
                transform: translateY(-50%);
            }
            to {
                transform: translateY(100%);
            }
        }

        .modal-close {
            position: absolute; /* Change from sticky to absolute for better control */
            inset-block-start: 12px;
            inset-inline-start: auto;
            inset-inline-end: 12px;
            inline-size: 40px;
            block-size: 40px;
            font-size: 22px;
            background-color: var(--color-surface);
            box-shadow: var(--shadow-md);
            border: 1px solid var(--color-border-subtle);
        }

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

        #modal-body {
            padding-inline: var(--space-md); /* Symmetric left/right padding */
            padding-block-start: 3.5rem; /* Space for close button (40px + 12px + 12px margin) */
            padding-block-end: max(var(--space-2xl), env(safe-area-inset-bottom, var(--space-xl)));
        }

        /* Prevent iOS zoom on input focus */
        .search-input,
        .range-input,
        .select-input {
            padding: 14px 16px;
            font-size: 16px; /* Minimum 16px prevents zoom */
        }

        .toast {
            inset-block-end: var(--space-md);
            inset-inline: var(--space-md);
            inline-size: calc(100% - 2rem);
        }

        /* Map optimization */
        #map {
            min-block-size: 450px;
            border-radius: var(--radius-md);
        }

        .leaflet-control-zoom {
            margin-block-start: var(--space-md);
            margin-inline-end: var(--space-md);
        }

        .leaflet-control-zoom a {
            inline-size: 36px;
            block-size: 36px;
            line-height: 36px;
            font-size: 18px;
        }

        /* Better touch feedback */
        .restaurant-card:active,
        .btn:active,
        button:active {
            transform: scale(0.98);
            transition: transform var(--transition-quick);
        }
    }

    /* ==================================================
       Extra Small Mobile (≤480px)
       ================================================== */

    @media (max-width: 480px) {
        .container {
            padding-inline: var(--space-sm);
        }

        .logo {
            font-size: var(--font-size-base);
            gap: var(--space-sm);
        }

        .view-toggle-container {
            padding-block: var(--space-sm);
        }

        .view-toggle {
            padding: 3px; /* Further reduced for small screens */
        }

        /* Adjust sliding indicator for extra small screens */
        .view-toggle::before {
            inset-block-start: 3px;
            inset-inline-start: 3px;
            inline-size: calc(50% - 6px); /* 50% minus padding (3px) and half gap (4px) */
            block-size: calc(100% - 6px); /* 100% minus top/bottom padding (3px each) */
        }

        .view-toggle-btn {
            padding: 7px 9px; /* Account for smaller container padding */
            font-size: var(--font-size-xs);
        }

        .share-btn {
            padding: 9px 12px; /* Matched to view toggle total height */
            font-size: var(--font-size-xs);
        }

        .view-toggle-btn svg,
        .share-btn svg {
            inline-size: 16px;
            block-size: 16px;
        }

        .mobile-filters-toggle {
            padding: 10px 14px;
            font-size: var(--font-size-sm);
            min-block-size: 40px; /* Slightly smaller on small screens */
            max-block-size: 44px;
        }

        .mobile-filters-toggle svg {
            inline-size: 16px;
            block-size: 16px;
        }

        .sidebar {
            inline-size: 90vw;
            padding: var(--space-md);
            inset-block: max(var(--space-md), env(safe-area-inset-top, 0px)); /* Consistent spacing */
            max-block-size: calc(100dvh - 2 * max(var(--space-md), env(safe-area-inset-top, 0px)));
        }

        .modal-content {
            inline-size: 100%;
            max-block-size: 92dvh; /* Consistent with larger mobile */
        }

        .modal-close {
            inset-block-start: 10px;
            inset-inline-end: 10px;
            inline-size: 36px;
            block-size: 36px;
            font-size: 20px;
        }

        #modal-body {
            padding-inline: var(--space-md); /* Symmetric left/right padding */
            padding-block-start: 3.25rem; /* Space for close button (36px + 10px + 10px margin) */
            padding-block-end: max(var(--space-xl), env(safe-area-inset-bottom, var(--space-lg)));
        }

        .restaurant-card-content {
            padding: var(--space-sm) var(--space-md);
        }

        .restaurant-card-image {
            block-size: 180px;
        }
    }

    /* ==================================================
       Landscape Mobile (≤900px width, ≤500px height)
       ================================================== */

    @media (max-width: 900px) and (max-height: 500px) {
        .header {
            padding-block: var(--space-sm);
        }

        .view-toggle-container {
            padding-block: var(--space-sm);
        }

        .main-layout {
            padding-block: var(--space-md) var(--space-8);
        }

        #map {
            min-block-size: 300px;
        }
    }

    /* ==================================================
       Smooth Scrolling & Mobile Optimizations
       ================================================== */

    @media (max-width: 768px) {
        html {
            scroll-behavior: smooth;
        }

        /* Pull-to-refresh support */
        body {
            overscroll-behavior-y: contain;
        }
    }

    /* ==================================================
       Print Styles
       ================================================== */

    @media print {
        .header,
        .view-toggle-container,
        .sidebar,
        .mobile-filters-toggle,
        .modal,
        .toast {
            display: none;
        }

        .main-layout {
            grid-template-columns: 1fr;
        }

        .restaurant-card {
            break-inside: avoid;
        }
    }
}

/* ==========================================================================
   END OF STYLESHEET
   ========================================================================== */