/* ========================================
   EUTEST.NO - Modern Design System
   Inspired by: Airbnb, Stripe, Linear, Uber
   ======================================== */

/* ========================================
   WCAG AA COMPLIANCE REPORT
   ======================================== */
/*
 * All color combinations meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)
 *
 * Contrast Ratios (foreground on background):
 * - Primary (#0052CC) on White: 6.2:1 ✓ AA Large & Normal
 * - Gray-900 (#212529) on White: 16.1:1 ✓ AAA
 * - Gray-700 (#495057) on White: 8.3:1 ✓ AAA
 * - Gray-600 (#5A6268) on White: 7.1:1 ✓ AAA
 * - White on Primary (#0052CC): 3.4:1 ✓ AA Large
 * - White on Success (#00A843): 3.5:1 ✓ AA Large
 * - White on Danger (#D32F00): 4.5:1 ✓ AA Normal
 * - Gray-900 on Warning (#E69500): 7.5:1 ✓ AAA
 *
 * All interactive elements have min 48px touch targets for accessibility
 * Focus indicators are 3px solid with 2px offset for keyboard navigation
 */

/* ===== CSS Variables ===== */
:root {
    /* Light Mode Colors - WCAG AA Compliant */
    --primary: #0052CC;           /* Darker blue for better contrast (was #0066FF) */
    --primary-hover: #003D99;     /* Even darker on hover */
    --primary-light: #E6F2FF;
    --secondary: #5B54CC;         /* Slightly darker purple (was #6C63FF) */
    --success: #00A843;           /* Slightly darker green (was #00C853) */
    --warning: #E69500;           /* Darker orange for better contrast (was #FFB300) */
    --danger: #D32F00;            /* Slightly darker red (was #FF3D00) */
    --dark: #1A1A1A;
    --gray-900: #212529;
    --gray-800: #343A40;
    --gray-700: #495057;
    --gray-600: #5A6268;          /* Darker for 5:1 ratio (was #6C757D) */
    --gray-500: #999999;          /* Darker for better readability */
    --gray-400: #CED4DA;
    --gray-300: #DEE2E6;
    --gray-200: #E9ECEF;
    --gray-100: #F8F9FA;
    --gray-50: #FAFBFC;
    --white: #FFFFFF;

    /* Surface Colors */
    --surface-primary: var(--white);
    --surface-secondary: var(--gray-100);
    --surface-tertiary: var(--gray-50);
    --surface-hover: var(--primary-light);

    /* Border Colors */
    --border-color: var(--gray-300);
    --border-color-light: var(--gray-200);
    --border-color-dark: var(--gray-400);

    /* Text Colors */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-600);
    --text-disabled: var(--gray-400);

    /* Status Color Variants - WCAG AA Compliant */
    --success-light: #E8F5E9;
    --success-dark: #006B2D;      /* Darker for better contrast */
    --warning-light: #FFF3E0;
    --warning-dark: #CC7A00;      /* Adjusted for better contrast */
    --danger-light: #FFEBEE;
    --danger-dark: #B71C1C;
    --info: #0052CC;              /* Match primary for consistency */
    --info-light: #E3F2FD;

    /* Gradients - WCAG AA Compliant */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-dark: linear-gradient(135deg, var(--gray-900) 0%, var(--dark) 100%);
    --gradient-success: linear-gradient(135deg, #007A33 0%, #00A843 100%);  /* Darker greens */
    --gradient-warning: linear-gradient(135deg, #CC7A00 0%, #E69500 100%);  /* Darker oranges */
    --gradient-danger: linear-gradient(135deg, #B71C1C 0%, #D32F00 100%);   /* Darker reds */

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.16), 0 10px 12px -5px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Backwards Compatibility Aliases */
    --primary-color: var(--primary);
    --gray-color: var(--gray-600);
    --light-gray: var(--gray-200);
    --border-radius: var(--radius-md);
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-warning: var(--warning);
    --primary-rgb: 0, 82, 204;
}

/* ===== Dark Mode Variables ===== */
[data-theme="dark"] {
    /* Dark Mode Colors - WCAG AA+ Compliant */
    /* Background is dark slate, not pure black for reduced eye strain */
    --primary: #4D9FFF;           /* Lighter blue for dark bg (8.5:1 contrast) */
    --primary-hover: #66B3FF;     /* Even lighter on hover */
    --primary-light: #1A2942;     /* Dark blue tint for backgrounds */
    --secondary: #9D94FF;         /* Lighter purple for visibility */
    --success: #4ADE80;           /* Bright green (9:1 contrast) */
    --warning: #FBBF24;           /* Bright yellow (10:1 contrast) */
    --danger: #FB7185;            /* Bright red (7:1 contrast) */
    --dark: #0F1419;              /* Deep slate background */
    --gray-900: #E8E8E8;          /* Light text (inverted) */
    --gray-800: #D1D1D1;          /* Slightly dimmer */
    --gray-700: #B8B8B8;          /* Medium light */
    --gray-600: #9E9E9E;          /* Medium */
    --gray-500: #7A7A7A;          /* Medium dark */
    --gray-400: #5A5A5A;          /* Dark */
    --gray-300: #3A3A3A;          /* Darker */
    --gray-200: #2A2A2A;          /* Very dark */
    --gray-100: #1F1F1F;          /* Almost black */
    --gray-50: #171717;           /* Deepest */
    --white: #0F1419;             /* Background color */

    /* Surface Colors */
    --surface-primary: #1A1F26;   /* Card background */
    --surface-secondary: #242B35; /* Elevated surface */
    --surface-tertiary: #2D3540;  /* More elevated */
    --surface-hover: #1E3A5F;     /* Hover state with blue tint */

    /* Border Colors */
    --border-color: #3A3A3A;
    --border-color-light: #2A2A2A;
    --border-color-dark: #4A4A4A;

    /* Text Colors */
    --text-primary: #E8E8E8;      /* High contrast white */
    --text-secondary: #B8B8B8;    /* Dimmed text */
    --text-muted: #9E9E9E;        /* Muted text */
    --text-disabled: #5A5A5A;     /* Disabled state */

    /* Status Color Variants */
    --success-light: #1E3A2A;     /* Dark green tint */
    --success-dark: #4ADE80;      /* Bright for text */
    --warning-light: #3A2E1A;     /* Dark yellow tint */
    --warning-dark: #FBBF24;      /* Bright for text */
    --danger-light: #3A1E24;      /* Dark red tint */
    --danger-dark: #FB7185;       /* Bright for text */
    --info: #4D9FFF;              /* Match primary */
    --info-light: #1A2942;        /* Dark blue tint */

    /* Gradients - Adjusted for dark mode */
    --gradient-primary: linear-gradient(135deg, #1E3A5F 0%, #2D3A5F 100%);
    --gradient-dark: linear-gradient(135deg, #0F1419 0%, #1A1F26 100%);
    --gradient-success: linear-gradient(135deg, #1E3A2A 0%, #2A4A35 100%);
    --gradient-warning: linear-gradient(135deg, #3A2E1A 0%, #4A3A20 100%);
    --gradient-danger: linear-gradient(135deg, #3A1E24 0%, #4A2630 100%);

    /* Backwards Compatibility Aliases - Dark Mode */
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-warning: var(--warning);
    --primary-rgb: 77, 159, 255;
}

/* Smooth theme transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--surface-secondary);
}

/* Ensure all text elements are readable */
div, section, article, main {
    color: var(--text-primary);
}

/* Lists should use primary text color for better readability */
li {
    color: var(--text-primary);
}

/* ===== Modern Header ===== */
.modern-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: var(--space-lg) 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.navbar-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.logo-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    transition: var(--transition-base);
}

.logo-link:hover {
    color: #FFFFFF;
    opacity: 0.9;
    transform: translateY(-1px);
}

.logo-link i {
    font-size: 1.75rem;
}

.tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin-left: 40px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-link-modern {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.1);
    transition: var(--transition-base);
}

/* Hide text for home link - icon is self-explanatory */
.nav-link-modern[href="/index.php"] .nav-text {
    display: none;
}

.nav-link-modern:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.nav-link-modern.is-active {
    background-color: rgba(255, 255, 255, 0.24);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ===== Enhanced Auth Button Styling ===== */
.btn-auth-login {
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: var(--font-size-sm);
}

.btn-auth-login:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-auth-register {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
    border: none;
}

.btn-auth-register:hover {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
    transform: translateY(-3px);
}

/* Dark mode auth button adjustments */
[data-theme="dark"] .btn-auth-login {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .btn-auth-login:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .btn-auth-register {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

[data-theme="dark"] .btn-auth-register:hover {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5);
}

/* ===== User Dropdown Menu ===== */
.user-dropdown {
    position: relative;
}

.user-dropdown-toggle {
    border: none;
    cursor: pointer;
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background-color: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1050;
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-base);
}

.user-dropdown-menu .dropdown-item:hover {
    background-color: var(--surface-hover);
    color: var(--primary);
}

.user-dropdown-menu .dropdown-item i {
    width: 20px;
    text-align: center;
}

.user-dropdown-menu .dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: var(--space-sm) 0;
    border: none;
}

/* Dark mode styles for dropdown */
[data-theme="dark"] .user-dropdown-menu {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .user-dropdown-menu .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .user-dropdown-menu .dropdown-item:hover {
    background-color: var(--gray-700);
    color: var(--primary-light);
}

[data-theme="dark"] .user-dropdown-menu .dropdown-divider {
    background-color: var(--gray-700);
}

/* ===== Container ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

main {
    padding: var(--space-2xl) 0;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

p {
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

/* ===== Modern Cards ===== */
.card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color-light);
    overflow: hidden;
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.card-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color-light);
    background: var(--surface-tertiary);
}

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

.card-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color-light);
    background: var(--surface-tertiary);
}

/* Override Bootstrap card text colors */
.card-title,
.card-title h5,
.card-title h6 {
    color: var(--text-primary) !important;
}

.card-text {
    color: var(--text-primary) !important;
}

/* List items in cards and elsewhere - use primary for better readability */
.card ul li,
.card ol li,
ul li,
ol li {
    color: var(--text-primary) !important;
}

.card ul li strong,
.card ol li strong,
ul li strong,
ol li strong {
    color: var(--text-primary) !important;
}

/* All list items should be readable */
ul.list-unstyled li {
    color: var(--text-primary) !important;
}

/* Ensure all text elements inherit proper color */
.card p,
.card span:not(.badge):not(.input-group-text):not(.theme-toggle-slider) {
    color: var(--text-primary) !important;
}

/* Garage card variant */
.garage-card {
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.garage-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.garage-card .card-body {
    padding: 1.25rem;
}

/* Empty State Styles */
.empty-state {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.empty-state-icon {
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.empty-state-icon i {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    font-size: 1.5rem;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state .btn {
    margin: 0.5rem;
}

/* Empty state with suggestions */
.empty-state-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-lg);
}

.empty-state-suggestion {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.empty-state-suggestion:hover {
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-2px);
}

.empty-state-suggestion i {
    font-size: 0.875rem;
}

/* ===== Modern Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    min-height: 48px; /* Touch-friendly */
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

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

.btn-primary:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--secondary);
    border-color: var(--secondary);
}

.btn-outline-secondary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Size Variants - ONLY these should modify padding */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    min-height: 40px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.125rem;
    min-height: 56px;
    border-radius: var(--radius-lg);
}

/* Icon-only button variants */
.btn-icon {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
    min-height: 32px;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
    min-height: 48px;
}

/* Button Disabled State */
.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Additional Button Variants */
.btn-secondary {
    background: var(--secondary);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--gray-700);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-success:hover {
    background: var(--success-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-warning {
    background: var(--warning);
    color: white;
}

[data-theme="dark"] .btn-warning {
    color: var(--gray-900);
}

.btn-warning:hover {
    background: var(--warning-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-warning:hover {
    color: var(--gray-900);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: var(--danger-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-ghost {
    background: transparent;
    color: var(--primary);
    border: none;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--surface-secondary);
    color: var(--primary-hover);
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--primary-hover);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

/* ===== Modern Forms ===== */
.form-control {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--surface-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-control::placeholder {
    color: #767676;  /* WCAG AA compliant (4.5:1 on white) */
}

[data-theme="dark"] .form-control::placeholder {
    color: #9E9E9E;  /* Slightly lighter for dark mode */
}

.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* Visually hidden on mobile, visible on desktop for better accessibility */
.visually-hidden-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    .visually-hidden-mobile {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--white);
    background-color: var(--primary);
    border: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-control {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

/* Form Validation States */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--surface-secondary);
    opacity: 0.7;
    cursor: not-allowed;
}

.form-control.is-valid {
    border-color: var(--success);
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 4px var(--success-light);
}

.form-control.is-invalid {
    border-color: var(--danger);
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-light);
}

/* Validation Feedback Messages */
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--success-dark);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--danger-dark);
}

.form-control.is-valid ~ .valid-feedback {
    display: block;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Form Help Text */
.form-text {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ===== Hero Section ===== */
.hero-section {
    padding: var(--space-xl) 0;
}

.hero-title {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
}

.hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-benefits {
    font-size: 0.9375rem;
}

.benefit-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-full);
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.benefit-badge:hover {
    background: var(--success-light);
    transform: translateY(-2px);
}

.hero-search-card {
    max-width: 700px;
    margin: 0 auto;
}

.search-form-hero .input-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.search-form-hero .input-group-text {
    padding: 1rem;
}

.search-form-hero .form-control {
    font-size: 1.125rem;
    padding: 1rem;
    font-weight: 500;
}

.search-form-hero .btn {
    font-weight: 600;
    white-space: nowrap;
}

/* Workshop Search Section */
.workshop-search-section {
    background: var(--surface-secondary);
}

/* Mobile Responsive Hero */
@media (max-width: 768px) {
    .hero-section {
        padding: var(--space-md) 0;
    }

    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: var(--space-sm);
    }

    .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: var(--space-md);
    }

    .hero-benefits {
        margin-bottom: var(--space-md);
    }

    .benefit-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .hero-search-card {
        margin-top: var(--space-md);
    }

    .hero-search-card .card-body {
        padding: var(--space-md);
    }

    .search-form-hero .input-group {
        flex-direction: column;
    }

    .search-form-hero .input-group > * {
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .search-form-hero .input-group > *:first-child {
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }

    .search-form-hero .input-group > *:last-child {
        border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    }

    .search-form-hero .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .search-form-hero .btn {
        padding: 0.75rem;
    }

    .search-form-hero .btn-close {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: var(--space-sm) 0;
    }

    .hero-title {
        font-size: 1.25rem !important;
    }

    .hero-subtitle {
        font-size: 0.85rem;
    }

    .benefit-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .hero-search-card .card-body {
        padding: var(--space-sm);
    }
}

/* ===== Pre-Inspection Content Section ===== */
.failure-list {
    counter-reset: failure-counter;
    list-style: none;
    padding: 0;
    margin: 0;
}

.failure-list li {
    counter-increment: failure-counter;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    padding-left: 3rem;
}

.failure-list li:last-child {
    border-bottom: none;
}

.failure-list li::before {
    content: counter(failure-counter);
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: var(--danger);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.failure-list strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.failure-list p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Checklist Styles */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.checklist-item:hover {
    background: var(--success-light);
    transform: translateX(4px);
}

.checklist-item i {
    color: var(--success);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.checklist-item strong {
    display: block;
    margin-bottom: 0.125rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
}

.checklist-item small {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.checklist-item.checked i::before {
    content: "\f14a"; /* fa-check-square */
    color: var(--success);
}

/* ===== Modern Alerts ===== */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: none;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: var(--gradient-success);
    color: white;
}

.alert-warning {
    background: var(--gradient-warning);
    color: var(--gray-900);
}

.alert-danger {
    background: var(--gradient-danger);
    color: white;
}

.alert-info {
    background: var(--gradient-primary);
    color: white;
}

/* ===== Modern Tables ===== */
.table {
    width: 100%;
    margin-bottom: var(--space-md);
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    padding: var(--space-md);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    color: var(--text-primary);
    background-color: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
}

.table tbody td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-tertiary);
}

.table-hover tbody tr:hover {
    background-color: var(--primary-light);
}

/* ===== Badge & Tags ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    background-color: var(--primary-light);
    color: var(--primary);
}

/* ===== Breadcrumb ===== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    list-style: none;
    margin-bottom: var(--space-lg);
    background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 var(--space-sm);
    color: var(--gray-500);
    font-size: 1.25rem;
}

.breadcrumb-item a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-secondary);
}

/* ===== Responsive Grid ===== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--space-md));
}

[class*="col-"] {
    padding: 0 var(--space-md);
    width: 100%;
}

/* ===== Utilities ===== */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.text-center {
    text-align: center;
}

/* Text Color Utilities - Override Bootstrap, Work with Themes */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-success {
    color: var(--success) !important;
}

[data-theme="dark"] .text-success {
    color: var(--success-dark) !important;
}

.text-warning {
    color: var(--warning) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--warning-dark) !important;
}

.text-danger {
    color: var(--danger) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--danger-dark) !important;
}

.text-white {
    color: #FFFFFF !important;
}

[data-theme="dark"] .text-white {
    color: #E8E8E8 !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-body {
    color: var(--text-primary) !important;
}

/* Background Color Utilities - Override Bootstrap */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--surface-secondary) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: var(--gray-900) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-light {
    background-color: var(--surface-secondary) !important;
}

.bg-dark {
    background-color: var(--gray-900) !important;
}

[data-theme="dark"] .bg-dark {
    background-color: #1A1F26 !important;
}

.bg-white {
    background-color: #FFFFFF !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--surface-primary) !important;
}

.mb-2 {
    margin-bottom: var(--space-sm);
}

.mb-3 {
    margin-bottom: var(--space-md);
}

.mb-4 {
    margin-bottom: var(--space-lg);
}

.mb-5 {
    margin-bottom: var(--space-2xl);
}

.mt-3 {
    margin-top: var(--space-md);
}

.mt-4 {
    margin-top: var(--space-lg);
}

/* ===== Accessibility Enhancements ===== */

/* Focus indicators for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.skip-to-main:focus {
    left: 12px;
    top: 12px;
}

/* Screen reader only content */
.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;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }

    .form-control {
        border-width: 3px;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Loading States */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* Tooltips */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: var(--gray-900);
    color: white;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-bottom: 8px;
}

/* Print Styles */
@media print {
    .btn,
    .alert,
    .modern-header,
    footer {
        display: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
}

/* ===== Mobile Navigation Menu ===== */

/* Hide mobile nav on desktop, show desktop nav */
.nav-mobile {
    display: none;
}

.nav-desktop {
    display: flex;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mobile-menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: var(--transition-base);
    position: absolute;
}

.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-icon span:nth-child(3) { bottom: 0; }

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 12, 24, 0.54);
    backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: var(--surface-primary);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu-panel {
    transform: translateX(0);
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.mobile-menu-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: #FFFFFF;
    max-width: calc(100% - 48px);
    line-height: 1.3;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-full);
    color: #FFFFFF;
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
    flex: 1;
    padding: 12px 0;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin: 4px 12px;
    border-radius: 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-base);
    position: relative;
}

.mobile-menu-link:hover {
    background: var(--surface-hover);
    color: var(--primary);
}

.mobile-menu-link.is-active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

.mobile-menu-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--primary);
}

.mobile-menu-link i {
    width: 24px;
    text-align: center;
    font-size: 1.125rem;
    color: var(--primary);
}

.mobile-menu-link-accent {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

.mobile-menu-link-danger {
    color: var(--danger);
}

.mobile-menu-link-danger i {
    color: var(--danger);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 12px 18px;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mobile-menu-footer-label {
    margin-bottom: var(--space-sm);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Dark mode mobile menu */
[data-theme="dark"] .mobile-menu-panel {
    background: var(--surface-primary);
}

[data-theme="dark"] .mobile-menu-link:hover {
    background: var(--surface-hover);
}

[data-theme="dark"] .mobile-menu-footer {
    background: var(--surface-secondary);
}

[data-theme="dark"] .mobile-menu-link.is-active {
    background: linear-gradient(90deg, rgba(77, 159, 255, 0.18) 0%, rgba(77, 159, 255, 0.04) 100%);
}

[data-theme="dark"] .nav-mobile {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    /* MOBILE HEADER: Clean and professional */
    .modern-header {
        position: relative;
        padding: 12px 0;
    }

    .navbar-modern {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }

    /* Hide desktop nav, show mobile nav */
    .nav-desktop {
        display: none;
    }

    .nav-mobile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
    }

    .logo-section {
        flex: 1;
        min-width: 0;
    }

    .logo-link {
        gap: 10px;
        font-size: 1.05rem;
        line-height: 1.1;
    }

    .logo-text {
        display: inline-block;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo-link i {
        font-size: 1.25rem;
    }

    .tagline {
        display: none;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .lead {
        font-size: 1rem;
    }

    /* Stack form elements on mobile */
    .input-group {
        flex-direction: column;
    }

    .input-group .form-control {
        width: 100%;
        border-radius: var(--radius-md) !important;
        border: 2px solid var(--border-color) !important;
    }

    .input-group .input-group-text {
        width: 100%;
        border-radius: var(--radius-md) !important;
        justify-content: center;
        margin-bottom: var(--space-xs);
    }

    .input-group .btn {
        width: 100%;
        margin-top: var(--space-sm);
        border-radius: var(--radius-md) !important;
    }

    /* Hide absolutely positioned clear buttons on mobile - they break stacked layout */
    .input-group .btn-close,
    .input-group .clear-input,
    .input-group .clear-search {
        display: none !important;
    }

    /* Touch-friendly but not oversized */
    .btn {
        min-height: 44px; /* Apple's recommended minimum */
        padding: 10px 16px;
    }

    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Tighter card spacing on mobile */
    .card-body {
        padding: var(--space-md);
    }

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

    main {
        padding: var(--space-md) 0;
    }

    /* Reduce section spacing on mobile */
    section {
        margin-bottom: var(--space-lg);
    }

    .nav-mobile .theme-toggle-btn {
        width: 50px;
        height: 32px;
    }

    .nav-mobile .theme-toggle-slider {
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
    }

    [data-theme="dark"] .nav-mobile .theme-toggle-slider {
        left: 25px;
    }
}

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

    /* Compact header for small phones */
    .modern-header {
        padding: var(--space-sm) 0;
    }

    .nav-mobile {
        gap: 8px;
        padding: 5px;
        border-radius: 16px;
    }

    .logo-link {
        font-size: 0.98rem;
    }

    .logo-text {
        max-width: 145px;
    }

    .logo-link i {
        font-size: 1.15rem;
    }

    /* Smaller headings */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* Compact cards */
    .card-body {
        padding: var(--space-sm);
    }

    .card-header {
        padding: var(--space-sm);
    }

    main {
        padding: var(--space-sm) 0;
    }

    /* Compact buttons on small screens */
    .btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.875rem;
    }

    .btn-lg {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 1rem;
    }
}

/* ===== Animation ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

/* ===== Theme Toggle Switch ===== */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.theme-toggle-btn {
    position: relative;
    width: 60px;
    height: 32px;
    background: var(--gray-300);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
    overflow: hidden;
}

[data-theme="dark"] .theme-toggle-btn {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.theme-toggle-btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Toggle Slider */
.theme-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle-slider {
    left: 30px;
    background: var(--gray-800);
}

/* Icons inside slider */
.theme-icon {
    font-size: 14px;
    transition: all var(--transition-base);
}

.theme-icon-sun {
    color: #FFA500;
    opacity: 1;
}

.theme-icon-moon {
    color: #4D9FFF;
    opacity: 0;
    position: absolute;
}

[data-theme="dark"] .theme-icon-sun {
    opacity: 0;
}

[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
}

/* Theme label text */
.theme-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    user-select: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .theme-label {
        display: none;
    }

    .theme-toggle-btn {
        width: 56px;
        height: 30px;
    }

    .theme-toggle-slider {
        width: 22px;
        height: 22px;
    }

    [data-theme="dark"] .theme-toggle-slider {
        left: 28px;
    }
}

/* ===== Modern Footer ===== */
.modern-footer {
    background: #212529;  /* Dark gray for light mode */
    color: #FFFFFF;
    padding: var(--space-3xl) 0 var(--space-lg);
    margin-top: var(--space-3xl);
    border-top: 1px solid #343A40;
}

[data-theme="dark"] .modern-footer {
    background: #0F1419;  /* Deep slate for dark mode */
    border-top: 1px solid #242B35;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin-bottom: var(--space-sm);
}

.footer-brand i {
    font-size: 1.75rem;
    color: var(--primary);
}

.footer-description {
    color: #ADB5BD;  /* Light gray for light mode */
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

[data-theme="dark"] .footer-description {
    color: #B8B8B8;  /* Lighter gray for dark mode */
}

.footer-language {
    margin-top: var(--space-md);
}

.footer-heading {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .footer-heading {
    color: #E8E8E8;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: #ADB5BD;  /* Light gray for light mode */
    font-size: 0.9rem;
}

[data-theme="dark"] .footer-links li {
    color: #B8B8B8;  /* Lighter for dark mode */
}

.footer-links li i {
    width: 20px;
    color: var(--primary);
}

.footer-links a {
    color: #ADB5BD;  /* Light gray for light mode */
    text-decoration: none;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[data-theme="dark"] .footer-links a {
    color: #B8B8B8;  /* Lighter for dark mode */
}

.footer-links a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

[data-theme="dark"] .footer-links a:hover {
    color: #E8E8E8;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--gray-800);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-bottom p {
    color: #999999;  /* Medium gray for light mode */
    font-size: 0.875rem;
    margin: 0;
}

[data-theme="dark"] .footer-bottom p {
    color: #9E9E9E;  /* Slightly lighter for dark mode */
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social span {
    color: #999999;
    font-size: 0.875rem;
}

[data-theme="dark"] .footer-social span {
    color: #9E9E9E;
}

/* Footer Links Grid - for two column layout */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.footer-links-column {
    display: flex;
    flex-direction: column;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-language-bottom {
    display: flex;
    align-items: center;
}

/* Footer Mobile Responsive Styles */
@media (max-width: 768px) {
    .modern-footer {
        padding: var(--space-lg) 0 var(--space-md);
        margin-top: var(--space-xl);
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Brand section - centered */
    .footer-brand-section {
        text-align: center;
        padding: 0 var(--space-md) var(--space-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-brand {
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: var(--space-xs);
    }

    .footer-brand i {
        font-size: 1.5rem;
    }

    .footer-description {
        font-size: 0.875rem;
        margin-bottom: 0;
        opacity: 0.8;
    }

    /* Links section - two columns side by side */
    .footer-links-section {
        padding: 0 var(--space-md);
    }

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

    .footer-heading {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: var(--space-sm);
        opacity: 0.7;
    }

    .footer-links {
        gap: var(--space-xs);
    }

    .footer-links li {
        font-size: 0.85rem;
    }

    .footer-links a {
        font-size: 0.85rem;
    }

    /* Footer bottom - stacked on mobile */
    .footer-bottom {
        padding: var(--space-md) var(--space-md) 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: var(--space-md);
    }

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

    .footer-bottom p {
        font-size: 0.75rem;
        opacity: 0.6;
        margin: 0;
    }

    .footer-language-bottom {
        display: none;
    }
}

@media (max-width: 480px) {
    .modern-footer {
        padding: var(--space-md) 0 var(--space-sm);
        margin-top: var(--space-lg);
    }

    .footer-brand-section {
        padding: 0 var(--space-sm) var(--space-sm);
    }

    .footer-brand {
        font-size: 1.1rem;
    }

    .footer-brand i {
        font-size: 1.25rem;
    }

    .footer-description {
        font-size: 0.8rem;
    }

    .footer-links-section {
        padding: 0 var(--space-sm);
    }

    .footer-links-grid {
        gap: var(--space-sm);
    }

    .footer-heading {
        font-size: 0.65rem;
        margin-bottom: var(--space-xs);
    }

    .footer-links li,
    .footer-links a {
        font-size: 0.8rem;
    }

    .footer-bottom {
        padding: var(--space-sm) var(--space-sm) 0;
        margin-top: var(--space-sm);
    }

    .footer-bottom p {
        font-size: 0.7rem;
    }
}

/* ===== Bootstrap Overrides for Dark Mode ===== */

/* AGGRESSIVE: Force all text to be light in dark mode */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    color: #E8E8E8 !important;
    background-color: #1F1F1F !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] div,
[data-theme="dark"] span,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: #E8E8E8 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #E8E8E8 !important;
}

/* Override Bootstrap's default text colors to work with dark mode */
[data-theme="dark"] .text-dark {
    color: #E8E8E8 !important;
}

[data-theme="dark"] .text-muted {
    color: #9E9E9E !important;
}

[data-theme="dark"] .text-black-50 {
    color: #9E9E9E !important;
}

/* Ensure Bootstrap cards use theme colors */
[data-theme="dark"] .card {
    color: #E8E8E8 !important;
    background-color: #1A1F26 !important;
}

[data-theme="dark"] .card-body {
    color: #E8E8E8 !important;
}

[data-theme="dark"] .card-text {
    color: #E8E8E8 !important;
}

[data-theme="dark"] .card ul li,
[data-theme="dark"] .card ol li {
    color: #E8E8E8 !important;
}

/* Don't override cards with explicit background colors */
[data-theme="dark"] .card-header.bg-primary,
[data-theme="dark"] .card-header.bg-success,
[data-theme="dark"] .card-header.bg-warning,
[data-theme="dark"] .card-header.bg-danger,
[data-theme="dark"] .card-header.bg-info {
    background-color: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] .card-header.bg-light {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Preserve text-white on colored backgrounds */
[data-theme="dark"] .text-white {
    color: #FFFFFF !important;
}

[data-theme="dark"] .bg-primary {
    background-color: var(--primary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--surface-tertiary) !important;
}

/* List groups in dark mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--surface-hover) !important;
}

[data-theme="dark"] .list-group-item a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .list-group-item .text-muted,
[data-theme="dark"] .list-group-item small.text-muted {
    color: var(--text-muted) !important;
}

/* Card footers */
[data-theme="dark"] .card-footer {
    background-color: var(--surface-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-footer.bg-light {
    background-color: var(--surface-tertiary) !important;
}

/* Info boxes */
[data-theme="dark"] .info-box {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .info-box h3,
[data-theme="dark"] .info-box h4 {
    color: var(--primary) !important;
}

/* Card titles */
[data-theme="dark"] .card-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-header .card-title,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h4,
[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6 {
    color: inherit !important;
}

/* Headings in list items */
[data-theme="dark"] .list-group-item h4,
[data-theme="dark"] .list-group-item h5,
[data-theme="dark"] .list-group-item h6 {
    color: var(--text-primary) !important;
}

/* Links in dark mode - make sure they're visible */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.page-link):not(.nav-link-modern) {
    color: var(--primary);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.page-link):not(.nav-link-modern):hover {
    color: var(--primary);
}

/* Alerts */
[data-theme="dark"] .alert-info {
    background-color: var(--info-light) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
}

/* Ensure all Bootstrap text utilities work in dark mode */
[data-theme="dark"] .lead {
    color: #E8E8E8 !important;
}

/* List items specifically */
[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
    color: #E8E8E8 !important;
}

[data-theme="dark"] .list-unstyled li {
    color: #E8E8E8 !important;
}

/* ===== Utility Classes ===== */

/* Display Utilities */
.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.flex {
    display: flex !important;
}


/* Border Utilities */
.border-light {
    border: 1px solid var(--border-color-light) !important;
}

.border {
    border: 1px solid var(--border-color) !important;
}

.border-dark {
    border: 1px solid var(--border-color-dark) !important;
}

.border-none {
    border: none !important;
}

/* Text Utilities */
.text-small {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.text-muted-styled {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Background Utilities */
.bg-secondary-padded {
    background: var(--surface-secondary);
    padding: 12px 16px;
}

/* ===== Mobile UX Layout Improvements ===== */

/* Change 2: Hide stats banner on mobile — low conversion value, saves viewport space */
@media (max-width: 768px) {
    .stats-banner { display: none; }
}

/* Change 5: Show only first 8 city buttons on mobile */
@media (max-width: 768px) {
    .popular-cities-grid .col-6:nth-child(n+9) { display: none; }
}

/* Change 6: Smaller vehicle icon on mobile */
@media (max-width: 768px) {
    .vehicle-icon .fa-5x { font-size: 2.5rem !important; }
    .vehicle-icon { margin-bottom: var(--space-sm); }
}

/* Change 7: Reduce map height on mobile */
@media (max-width: 768px) {
    .google-map-container { height: 250px !important; }
}

/* Change 8: Reorder booking info above map on mobile (verksted.php) */
@media (max-width: 768px) {
    .col-lg-8 { display: flex; flex-direction: column; }
    #booking-info { order: -1; }
}

/* Change 3 & 4: Collapse wrappers — always visible on desktop */
@media (min-width: 769px) {
    .collapse-mobile-wrapper { display: block !important; }
    .collapse-mobile-toggle { display: none !important; }
}

/* Collapse toggle button styling for mobile */
.collapse-mobile-toggle {
    border: 1px solid var(--border-color);
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-base);
    width: 100%;
    text-align: center;
}

.collapse-mobile-toggle:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.collapse-mobile-toggle i {
    transition: transform var(--transition-base);
    margin-left: var(--space-sm);
}

.collapse-mobile-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* ===== Homepage Premium Refresh ===== */
.homepage {
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(91, 84, 204, 0.08), transparent 22%),
        linear-gradient(180deg, var(--surface-tertiary) 0%, var(--surface-secondary) 38%, var(--surface-primary) 100%);
}

.homepage .landing-main {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
}

.homepage .landing-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9), transparent 24%),
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.45), transparent 18%),
        linear-gradient(135deg, #eef5ff 0%, #f7faff 48%, #ffffff 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 24px 55px rgba(14, 44, 84, 0.08);
}

.homepage .landing-hero::before,
.homepage .landing-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.homepage .landing-hero::before {
    width: 360px;
    height: 360px;
    top: -180px;
    right: -110px;
    background: rgba(var(--primary-rgb), 0.12);
    filter: blur(8px);
}

.homepage .landing-hero::after {
    width: 240px;
    height: 240px;
    left: -60px;
    bottom: -110px;
    background: rgba(91, 84, 204, 0.11);
    filter: blur(10px);
}

.homepage .hero-content {
    position: relative;
    z-index: 1;
}

.homepage .hero-title {
    max-width: 12ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.5rem, 5.3vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.homepage .hero-subtitle {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.homepage .hero-benefits {
    gap: 0.9rem !important;
}

.homepage .benefit-badge {
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 10px 25px rgba(16, 51, 94, 0.06);
    backdrop-filter: blur(14px);
}

.homepage .benefit-badge i {
    color: var(--success-dark) !important;
}

.homepage .benefit-badge:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(var(--primary-rgb), 0.24);
    box-shadow: 0 14px 30px rgba(16, 51, 94, 0.1);
}

.homepage .hero-search-card.card {
    max-width: 760px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 28px 55px rgba(16, 51, 94, 0.14);
    backdrop-filter: blur(18px);
}

.homepage .hero-search-card .card-body {
    padding: clamp(1.25rem, 3vw, 1.9rem);
}

.homepage .search-form-hero .input-group {
    align-items: stretch;
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.homepage .search-form-hero .input-group-text {
    min-width: 68px;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, #2c78dd 100%);
}

.homepage .search-form-hero .form-control {
    min-height: 64px;
    padding-inline: 1.15rem;
    border-radius: 16px !important;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.homepage .search-form-hero .form-control::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    color: var(--text-muted);
}

.homepage .search-form-hero .form-control:focus {
    box-shadow: none;
}

.homepage .search-form-hero .btn {
    min-width: 170px;
    margin-left: 6px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    box-shadow: 0 14px 24px rgba(var(--primary-rgb), 0.22);
}

.homepage .search-form-hero .btn:hover {
    box-shadow: 0 18px 28px rgba(var(--primary-rgb), 0.28);
}

.homepage .homepage-stats {
    display: block;
    padding: clamp(1rem, 2.2vw, 1.5rem) !important;
    background: linear-gradient(135deg, #123b66 0%, #0f2843 55%, #081a30 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(10, 31, 57, 0.22);
}

.homepage .homepage-stats .row {
    margin: 0;
}

.homepage .homepage-stats [class*="col-"] {
    padding-inline: 0.45rem;
}

.homepage .homepage-stats .stat-item {
    height: 100%;
    padding: 1.25rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.homepage .homepage-stats h3,
.homepage .homepage-stats h3.text-primary {
    color: #ffffff !important;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    letter-spacing: -0.03em;
}

.homepage .homepage-stats p,
.homepage .homepage-stats .text-muted {
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 0.95rem;
}

.homepage .workshop-search-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem) !important;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(91, 84, 204, 0.06) 100%) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 18px 40px rgba(15, 38, 65, 0.08);
}

.homepage .workshop-search-panel::before {
    content: "";
    position: absolute;
    inset: auto -10% -45% 55%;
    height: 280px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0) 68%);
    pointer-events: none;
}

.homepage .workshop-search-panel > .row {
    position: relative;
    z-index: 1;
}

.homepage .workshop-search-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 24px 42px rgba(15, 38, 65, 0.1);
}

.homepage .city-directory-card,
.homepage .landing-blog-section,
.homepage .landing-info-section {
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 22px 44px rgba(15, 38, 65, 0.08);
}

.homepage .city-directory-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
}

.homepage .popular-cities-grid {
    gap: 0.85rem 0;
}

.homepage .city-chip {
    justify-content: flex-start;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(var(--primary-rgb), 0.12);
    color: var(--text-primary);
    box-shadow: 0 10px 22px rgba(15, 38, 65, 0.05);
}

.homepage .city-chip:hover {
    background: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.28);
    color: var(--primary);
    box-shadow: 0 14px 24px rgba(15, 38, 65, 0.08);
}

.homepage .landing-info-section {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 254, 0.98) 100%);
    border-radius: 30px;
}

.homepage .landing-info-section > h2 {
    margin-bottom: 0.85rem;
}

.homepage .landing-info-section > p {
    max-width: 70ch;
    color: var(--text-secondary);
}

.homepage .landing-info-section .card {
    height: 100%;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
    box-shadow: 0 16px 30px rgba(15, 38, 65, 0.06);
}

.homepage .landing-info-section .table {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.88);
}

.homepage .landing-checklist-section {
    padding: clamp(2rem, 4vw, 3rem) !important;
    background: linear-gradient(180deg, #0d2945 0%, #12365b 28%, #f7faff 28.1%, #f7faff 100%);
    border-radius: 32px;
    box-shadow: 0 28px 55px rgba(10, 31, 57, 0.12);
}

.homepage .landing-checklist-section .section-header h2,
.homepage .landing-checklist-section .section-header p {
    color: #ffffff !important;
}

.homepage .landing-checklist-section .section-header p {
    max-width: 42rem;
    margin-inline: auto;
    opacity: 0.82;
}

.homepage .landing-checklist-section .collapse-mobile-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.homepage .landing-checklist-section .collapse-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.34);
}

.homepage .landing-checklist-section .card {
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 22px 38px rgba(10, 31, 57, 0.09);
}

.homepage .landing-checklist-section .text-center.mt-5 {
    margin-top: 2.5rem !important;
}

.homepage .landing-blog-section {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
    border-radius: 30px;
}

.homepage .landing-blog-section .card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 16px 32px rgba(15, 38, 65, 0.08);
}

.homepage .landing-blog-section .blog-icon {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14) 0%, rgba(91, 84, 204, 0.16) 100%) !important;
    color: var(--primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.homepage .landing-blog-section .hover-lift:hover {
    transform: translateY(-7px);
}

@media (max-width: 768px) {
    .homepage .landing-main {
        padding-top: 1.25rem;
    }

    .homepage .landing-hero,
    .homepage .workshop-search-panel,
    .homepage .landing-info-section,
    .homepage .landing-checklist-section,
    .homepage .landing-blog-section {
        border-radius: 24px;
    }

    .homepage .landing-hero {
        padding: 1.75rem 1rem;
    }

    .homepage .hero-title {
        max-width: none;
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }

    .homepage .hero-subtitle {
        font-size: 1rem;
    }

    .homepage .hero-benefits {
        justify-content: center;
    }

    .homepage .benefit-badge {
        width: 100%;
        justify-content: center;
        font-size: 0.82rem;
    }

    .homepage .search-form-hero .input-group {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .homepage .search-form-hero .input-group-text,
    .homepage .search-form-hero .form-control,
    .homepage .search-form-hero .btn {
        border-radius: 18px !important;
    }

    .homepage .search-form-hero .input-group-text {
        min-height: 54px;
    }

    .homepage .search-form-hero .form-control {
        min-height: 58px;
        font-size: 1rem;
        letter-spacing: 0.08em;
    }

    .homepage .search-form-hero .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    .homepage .homepage-stats {
        display: block !important;
        padding: 0.85rem !important;
    }

    .homepage .homepage-stats [class*="col-"] {
        padding: 0.35rem;
    }

    .homepage .homepage-stats .stat-item {
        padding: 1rem 0.85rem;
        border-radius: 18px;
    }

    .homepage .homepage-stats h3,
    .homepage .homepage-stats h3.text-primary {
        font-size: 1.35rem;
    }

    .homepage .homepage-stats p,
    .homepage .homepage-stats .text-muted {
        font-size: 0.84rem;
    }

    .homepage .workshop-search-panel,
    .homepage .landing-info-section,
    .homepage .landing-checklist-section,
    .homepage .landing-blog-section {
        padding: 1.25rem !important;
    }

    .homepage .landing-checklist-section {
        background: linear-gradient(180deg, #0d2945 0%, #12365b 18%, #f7faff 18.1%, #f7faff 100%);
    }

    .homepage .city-chip {
        padding: 0.85rem 0.9rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .homepage .landing-hero,
    .homepage .workshop-search-panel,
    .homepage .landing-info-section,
    .homepage .landing-checklist-section,
    .homepage .landing-blog-section {
        border-radius: 20px;
    }

    .homepage .hero-title {
        font-size: 1.85rem !important;
    }

    .homepage .hero-subtitle {
        font-size: 0.94rem;
    }

    .homepage .benefit-badge {
        padding: 0.7rem 0.85rem;
    }

    .homepage .search-form-hero .form-control {
        letter-spacing: 0.05em;
    }

    .homepage .homepage-stats .stat-item {
        padding: 0.9rem 0.7rem;
    }
}

[data-theme="dark"] .homepage {
    background:
        radial-gradient(circle at top left, rgba(77, 159, 255, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(157, 148, 255, 0.09), transparent 24%),
        linear-gradient(180deg, #111721 0%, #151b24 42%, #0f1419 100%);
}

[data-theme="dark"] .homepage .landing-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(77, 159, 255, 0.16), transparent 24%),
        radial-gradient(circle at 85% 10%, rgba(157, 148, 255, 0.14), transparent 18%),
        linear-gradient(135deg, rgba(30, 58, 95, 0.88) 0%, rgba(24, 35, 51, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .homepage .benefit-badge,
[data-theme="dark"] .homepage .hero-search-card.card,
[data-theme="dark"] .homepage .workshop-search-card,
[data-theme="dark"] .homepage .city-directory-card,
[data-theme="dark"] .homepage .landing-info-section,
[data-theme="dark"] .homepage .landing-blog-section,
[data-theme="dark"] .homepage .landing-info-section .card,
[data-theme="dark"] .homepage .landing-checklist-section .card,
[data-theme="dark"] .homepage .landing-blog-section .card {
    background: rgba(26, 31, 38, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .homepage .benefit-badge:hover {
    background: rgba(36, 43, 53, 0.98);
}

[data-theme="dark"] .homepage .search-form-hero .input-group {
    background: rgba(20, 29, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .homepage .search-form-hero .form-control {
    color: var(--text-primary);
}

[data-theme="dark"] .homepage .search-form-hero .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .homepage .homepage-stats {
    background: linear-gradient(135deg, #183455 0%, #10243c 60%, #0b1625 100%) !important;
}

[data-theme="dark"] .homepage .homepage-stats .stat-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .homepage .workshop-search-panel {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.34) 0%, rgba(24, 35, 51, 0.78) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .homepage .city-chip {
    background: rgba(24, 35, 51, 0.96);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-theme="dark"] .homepage .city-chip:hover {
    background: rgba(30, 58, 95, 0.82);
    color: #ffffff;
}

[data-theme="dark"] .homepage .landing-checklist-section {
    background: linear-gradient(180deg, #10243c 0%, #133151 28%, rgba(20, 29, 40, 0.98) 28.1%, rgba(20, 29, 40, 0.98) 100%);
}

[data-theme="dark"] .homepage .landing-blog-section .blog-icon {
    background: linear-gradient(135deg, rgba(77, 159, 255, 0.18) 0%, rgba(157, 148, 255, 0.2) 100%) !important;
}

/* ===== Vehicle Result Experience ===== */
.result {
    position: relative;
}

.vehicle-result-card {
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.99) 100%);
    box-shadow: 0 26px 60px rgba(15, 38, 65, 0.12);
}

.vehicle-result-header {
    padding: 1.4rem 1.5rem 1.1rem;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.12), transparent 28%),
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(91, 84, 204, 0.06) 100%);
}

.vehicle-result-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.vehicle-result-plate {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 8px 18px rgba(15, 38, 65, 0.06);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vehicle-result-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.vehicle-result-state-success {
    background: rgba(0, 168, 67, 0.12);
    color: var(--success-dark);
}

.vehicle-result-state-warning {
    background: rgba(230, 149, 0, 0.14);
    color: #9d5d00;
}

.vehicle-result-state-danger {
    background: rgba(211, 47, 0, 0.14);
    color: #a12600;
}

.vehicle-result-title {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.vehicle-result-body {
    padding: 1.5rem;
}

.vehicle-result-visual {
    min-height: 100%;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 252, 0.98) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.vehicle-result-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.result-status-panel {
    padding: 1.15rem 1.25rem;
    border-radius: 24px;
    border: 1px solid transparent;
    box-shadow: 0 12px 26px rgba(15, 38, 65, 0.06);
}

.result-status-panel-success {
    background: linear-gradient(135deg, rgba(0, 168, 67, 0.12) 0%, rgba(0, 168, 67, 0.04) 100%);
    border-color: rgba(0, 168, 67, 0.14);
}

.result-status-panel-warning {
    background: linear-gradient(135deg, rgba(230, 149, 0, 0.14) 0%, rgba(230, 149, 0, 0.05) 100%);
    border-color: rgba(230, 149, 0, 0.16);
}

.result-status-panel-danger {
    background: linear-gradient(135deg, rgba(211, 47, 0, 0.14) 0%, rgba(211, 47, 0, 0.05) 100%);
    border-color: rgba(211, 47, 0, 0.16);
}

.result-status-label {
    margin-bottom: 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.result-metric-card {
    border-radius: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 24px rgba(15, 38, 65, 0.05);
}

.result-metric-label {
    margin-bottom: 0.55rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.result-metric-value {
    margin-bottom: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.vehicle-classification-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(91, 84, 204, 0.08) 100%);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(15, 38, 65, 0.05);
}

.vehicle-tabs {
    gap: 0.6rem;
    border-bottom: none;
}

.vehicle-tabs .nav-item {
    margin-bottom: 0;
}

.vehicle-tabs .nav-link {
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.84);
    color: var(--text-secondary);
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(15, 38, 65, 0.04);
}

.vehicle-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 14px 24px rgba(var(--primary-rgb), 0.22);
}

.vehicle-details-panel,
.result-table-card,
.technical-data-panel {
    border-radius: 20px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 12px 24px rgba(15, 38, 65, 0.05);
}

.result-table-card {
    overflow: hidden;
}

.result-table-card .table {
    margin-bottom: 0;
}

.result-empty-panel {
    border-radius: 18px;
}

.result-action-card,
.result-action-shell {
    border-radius: 24px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 18px 36px rgba(15, 38, 65, 0.08);
}

.result-action-shell {
    overflow: hidden;
}

.result-action-card-danger {
    background: linear-gradient(135deg, rgba(211, 47, 0, 0.12) 0%, rgba(211, 47, 0, 0.04) 100%);
    border-color: rgba(211, 47, 0, 0.16);
}

.result-action-card-warning {
    background: linear-gradient(135deg, rgba(230, 149, 0, 0.12) 0%, rgba(230, 149, 0, 0.04) 100%);
    border-color: rgba(230, 149, 0, 0.16);
}

[data-theme="dark"] .vehicle-result-card {
    background: linear-gradient(180deg, rgba(26, 31, 38, 0.98) 0%, rgba(20, 29, 40, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-header,
[data-theme="dark"] .vehicle-result-visual,
[data-theme="dark"] .result-metric-card,
[data-theme="dark"] .vehicle-details-panel,
[data-theme="dark"] .result-table-card,
[data-theme="dark"] .technical-data-panel,
[data-theme="dark"] .result-action-card,
[data-theme="dark"] .result-action-shell {
    background: rgba(26, 31, 38, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-plate {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-state-success {
    color: #7ee2a8;
}

[data-theme="dark"] .vehicle-result-state-warning {
    color: #ffd071;
}

[data-theme="dark"] .vehicle-result-state-danger {
    color: #ff9f84;
}

[data-theme="dark"] .vehicle-classification-banner {
    background: linear-gradient(135deg, rgba(77, 159, 255, 0.16) 0%, rgba(157, 148, 255, 0.12) 100%);
}

[data-theme="dark"] .vehicle-tabs .nav-link {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .vehicle-result-card {
        border-radius: 24px;
    }

    .vehicle-result-header,
    .vehicle-result-body {
        padding: 1.1rem;
    }

    .vehicle-result-header-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .vehicle-result-title {
        font-size: 1.45rem;
    }

    .vehicle-result-plate {
        font-size: 0.92rem;
        letter-spacing: 0.14em;
    }

    .result-status-panel {
        padding: 1rem;
    }

    .vehicle-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .vehicle-tabs .nav-link {
        white-space: nowrap;
    }

    .vehicle-classification-banner {
        width: 100%;
        justify-content: flex-start;
    }

}

@media (max-width: 480px) {
    .vehicle-result-card {
        border-radius: 20px;
    }

    .vehicle-result-header,
    .vehicle-result-body {
        padding: 0.95rem;
    }

    .vehicle-result-title {
        font-size: 1.3rem;
    }

    .vehicle-result-state {
        white-space: normal;
    }

    .result-metric-value {
        font-size: 1.22rem;
    }
}

/* ===== Dedicated Result Page ===== */
.vehicle-result-page {
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.08), transparent 26%),
        radial-gradient(circle at top right, rgba(91, 84, 204, 0.08), transparent 20%),
        linear-gradient(180deg, #f4f8fc 0%, #f8fbff 42%, #eef3f8 100%);
}

.vehicle-result-page .result-page-main {
    padding-top: clamp(1.25rem, 3vw, 2.2rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.vehicle-result-page .result-page-column {
    display: grid;
    gap: 1.5rem;
}

.vehicle-result-page .result-page-search-card {
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.09), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 250, 255, 0.99) 100%);
    box-shadow: 0 24px 52px rgba(15, 38, 65, 0.1);
}

.vehicle-result-page .result-page-search-header {
    margin-bottom: 1.35rem !important;
}

.vehicle-result-page .result-page-title {
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    letter-spacing: -0.03em;
}

.vehicle-result-page .result-page-subtitle {
    max-width: 60ch;
    color: var(--text-secondary) !important;
}

.vehicle-result-page .result-page-back-link {
    border-radius: 999px;
    padding-inline: 1rem;
}

.vehicle-result-page .result-page-search-form .input-group {
    align-items: stretch;
    padding: 6px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.vehicle-result-page .result-page-search-form .input-group-text {
    min-width: 64px;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}

.vehicle-result-page .result-page-search-form .form-control {
    min-height: 60px;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vehicle-result-page .result-page-search-form .form-control::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.vehicle-result-page .result-page-search-form .form-control:focus {
    box-shadow: none;
}

.vehicle-result-page .result-page-search-form .btn {
    border-radius: 16px;
    min-width: 150px;
}

.vehicle-result-page .result-page-results {
    display: grid;
    gap: 1.5rem;
}

.vehicle-result-page .result-page-empty-state {
    border-radius: 22px;
    padding: 1rem 1.1rem;
}

.vehicle-result-page .vehicle-result-card,
.vehicle-result-page .result-action-shell {
    margin-bottom: 0 !important;
}

.vehicle-result-page .vehicle-result-card {
    box-shadow: 0 24px 52px rgba(15, 38, 65, 0.11);
}

.vehicle-result-page .vehicle-result-header {
    padding: 1.5rem 1.6rem 1.15rem;
}

.vehicle-result-page .vehicle-result-title {
    max-width: 16ch;
}

.vehicle-result-page .result-status-panel .alert-heading {
    margin-bottom: 0.35rem !important;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.vehicle-result-page .vehicle-details-panel p:last-child {
    margin-bottom: 0;
}

.vehicle-result-page .vehicle-details-panel p {
    margin-bottom: 0.9rem;
    color: var(--text-secondary);
}

.vehicle-result-page .vehicle-details-panel strong {
    color: var(--text-primary);
}

.vehicle-result-page .result-table-card thead th,
.vehicle-result-page .technical-data-panel thead th {
    border-bottom: none;
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vehicle-result-page .result-table-card tbody td,
.vehicle-result-page .result-table-card tbody th,
.vehicle-result-page .technical-data-panel tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
}

.vehicle-result-page .technical-data-panel .accordion {
    display: grid;
    gap: 0.85rem;
}

.vehicle-result-page .technical-data-panel .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 22px rgba(15, 38, 65, 0.04);
}

.vehicle-result-page .technical-data-panel .accordion-button {
    padding: 1rem 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: none;
}

.vehicle-result-page .technical-data-panel .accordion-button:not(.collapsed) {
    color: var(--primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(91, 84, 204, 0.05) 100%);
}

.vehicle-result-page .technical-data-panel .accordion-body {
    padding: 0;
}

.vehicle-result-page .technical-data-panel .alert-info {
    margin-bottom: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(91, 84, 204, 0.05) 100%);
    color: var(--text-secondary);
}

.vehicle-result-page .result-action-shell .card-header {
    padding: 1rem 1.2rem;
}

.vehicle-result-page .result-action-shell .card-body {
    padding: 1.2rem 1.25rem;
}

.vehicle-result-page .result-action-shell .btn,
.vehicle-result-page .result-action-card .btn {
    border-radius: 14px;
}

[data-theme="dark"] .vehicle-result-page {
    background:
        radial-gradient(circle at top left, rgba(77, 159, 255, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(157, 148, 255, 0.1), transparent 24%),
        linear-gradient(180deg, #0f1419 0%, #151b24 42%, #111721 100%);
}

[data-theme="dark"] .vehicle-result-page .result-page-search-card {
    background:
        radial-gradient(circle at top right, rgba(77, 159, 255, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(26, 31, 38, 0.96) 0%, rgba(20, 29, 40, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-page .result-page-search-form .input-group {
    background: rgba(20, 29, 40, 0.86);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-page .result-page-search-form .form-control {
    color: var(--text-primary);
}

[data-theme="dark"] .vehicle-result-page .result-page-search-form .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .vehicle-result-page .technical-data-panel .accordion-item,
[data-theme="dark"] .vehicle-result-page .technical-data-panel .accordion-button {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vehicle-result-page .technical-data-panel .accordion-button:not(.collapsed),
[data-theme="dark"] .vehicle-result-page .technical-data-panel .alert-info,
[data-theme="dark"] .vehicle-result-page .result-table-card thead th,
[data-theme="dark"] .vehicle-result-page .technical-data-panel thead th {
    background: rgba(77, 159, 255, 0.12) !important;
}

@media (max-width: 768px) {
    .vehicle-result-page .result-page-search-card {
        border-radius: 24px;
    }

    .vehicle-result-page .result-page-search-card .card-body {
        padding: 1.1rem !important;
    }

    .vehicle-result-page .result-page-search-header {
        margin-bottom: 1rem !important;
    }

    .vehicle-result-page .result-page-search-form .input-group {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .vehicle-result-page .result-page-search-form .input-group-text,
    .vehicle-result-page .result-page-search-form .form-control,
    .vehicle-result-page .result-page-search-form .btn {
        border-radius: 18px !important;
    }

    .vehicle-result-page .result-page-search-form .btn {
        min-width: 0;
    }

    .vehicle-result-page .vehicle-result-title {
        max-width: none;
    }
}

/* ===== Ad Placement Styles ===== */

/* Ad Placement Container */
.ad-placement {
    margin: 2rem auto;
    max-width: 100%;
    text-align: center;
    min-height: 100px; /* Prevents layout shift */
}

/* Ensure ads don't break layout on mobile */
.ad-placement .adsbygoogle {
    display: block;
}

/* Subtle visual separation */
.ad-placement::before,
.ad-placement::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--border-color);
    margin: 1.5rem 0;
    opacity: 0.3;
}

/* Remove separators for first/last ad */
.ad-placement:first-of-type::before {
    display: none;
}

.ad-placement:last-of-type::after {
    display: none;
}

/* ===== Interior Page Refresh ===== */
.auth-page,
.dashboard-page,
.profile-page,
.legal-page,
.utility-page,
.workshops-page,
.workshop-detail-page {
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.09), transparent 28%),
        radial-gradient(circle at top left, rgba(91, 84, 204, 0.05), transparent 24%),
        linear-gradient(180deg, #f7f9fc 0%, #edf2f7 100%);
}

.auth-page .auth-main,
.dashboard-page .dashboard-main,
.profile-page .profile-main,
.legal-page .legal-main,
.utility-page .utility-main,
.workshops-page .workshops-main,
.workshop-detail-page .workshop-detail-main {
    position: relative;
    z-index: 1;
}

.workshops-page .workshops-main,
.workshop-detail-page .workshop-detail-main {
    padding-top: 1rem;
    padding-bottom: 4rem;
}

.dashboard-page .dashboard-main,
.profile-page .profile-shell,
.auth-page .auth-main {
    padding-bottom: 4rem !important;
}

.workshops-page .breadcrumb,
.workshop-detail-page .breadcrumb,
.privacy-page .breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.45);
}

.workshops-page .page-title,
.workshop-detail-page .page-title,
.dashboard-page .dashboard-main h1,
.profile-page .profile-shell h1,
.privacy-page .legal-main > section:first-of-type h1,
.unsubscribe-page h1 {
    letter-spacing: -0.03em;
}

.auth-page .auth-main .card,
.dashboard-page .dashboard-main .card,
.profile-page .profile-shell .card,
.utility-page .utility-main .card,
.workshops-page .workshops-main > .card,
.workshop-detail-page .workshop-detail-main .card,
.workshop-detail-page .workshop-detail-main .info-box {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 45px -34px rgba(15, 23, 42, 0.42);
}

.auth-page .auth-main .card-body,
.dashboard-page .dashboard-main .card-body,
.profile-page .profile-shell .card-body,
.utility-page .utility-main .card-body {
    padding: 1.75rem !important;
}

.auth-page .auth-main .card-header,
.dashboard-page .dashboard-main .card-header,
.profile-page .profile-shell .card-header,
.workshop-detail-page .workshop-detail-main .card-header {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(255, 255, 255, 0.72));
}

.auth-page .auth-main .form-label,
.profile-page .profile-shell .form-label,
.utility-page .utility-main .form-label,
.workshops-page .workshops-main .form-label {
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: var(--text-primary);
}

.auth-page .auth-main .form-control,
.auth-page .auth-main .form-select,
.auth-page .auth-main .input-group-text,
.profile-page .profile-shell .form-control,
.profile-page .profile-shell .form-select,
.utility-page .utility-main .form-control,
.workshops-page .workshops-main .form-control,
.workshops-page .workshops-main .form-select,
.workshop-detail-page .workshop-detail-main .form-control,
.workshop-detail-page .workshop-detail-main .input-group-text,
.workshop-detail-page .workshop-detail-main .btn,
.vehicle-result-page .result-page-search-form .form-control {
    min-height: 52px;
    border-radius: 16px;
}

.auth-page .auth-main .form-control,
.auth-page .auth-main .form-select,
.profile-page .profile-shell .form-control,
.profile-page .profile-shell .form-select,
.utility-page .utility-main .form-control,
.workshops-page .workshops-main .form-control,
.workshops-page .workshops-main .form-select,
.workshop-detail-page .workshop-detail-main .form-control {
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 252, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.auth-page .auth-main .form-control:focus,
.auth-page .auth-main .form-select:focus,
.profile-page .profile-shell .form-control:focus,
.profile-page .profile-shell .form-select:focus,
.utility-page .utility-main .form-control:focus,
.workshops-page .workshops-main .form-control:focus,
.workshops-page .workshops-main .form-select:focus,
.workshop-detail-page .workshop-detail-main .form-control:focus {
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 0.22rem rgba(var(--primary-rgb), 0.12);
}

.auth-page .auth-main .btn,
.dashboard-page .dashboard-main .btn,
.profile-page .profile-shell .btn,
.utility-page .utility-main .btn,
.workshops-page .workshops-main .btn,
.workshop-detail-page .workshop-detail-main .btn {
    border-radius: 16px;
    font-weight: 600;
    box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.45);
}

.auth-page .auth-main .alert,
.dashboard-page .dashboard-main .alert,
.profile-page .profile-shell .alert,
.utility-page .utility-main .alert,
.workshop-detail-page .workshop-detail-main .alert {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 16px 32px -26px rgba(15, 23, 42, 0.35);
}

.auth-page .auth-main {
    padding-top: 2.75rem !important;
}

.auth-page .auth-main .row {
    row-gap: 1.5rem;
}

.auth-page .auth-main .card-body {
    padding: 2rem !important;
}

.auth-page .auth-main .h3 {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
}

.auth-page .auth-main .text-center.mt-3 {
    margin-top: 1.25rem !important;
}

.auth-login-page .auth-main .card.mt-4 {
    border-color: rgba(0, 168, 67, 0.18);
    background: linear-gradient(180deg, rgba(236, 253, 244, 0.96), rgba(255, 255, 255, 0.98));
}

.auth-register-page .auth-main .alert-success.border-0 {
    border: 1px solid rgba(25, 135, 84, 0.12) !important;
    border-radius: 22px;
}

.dashboard-page .dashboard-main {
    padding-top: 2.25rem !important;
}

.dashboard-page .dashboard-main > .row:first-child {
    margin-bottom: 1.5rem !important;
}

.dashboard-page .dashboard-main .text-muted {
    color: #5f6b7a !important;
}

.dashboard-page .dashboard-main .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
}

.dashboard-page .dashboard-main .table {
    margin-bottom: 0;
}

.dashboard-page .dashboard-main .table thead th {
    padding: 0.95rem 1rem;
    border-bottom-width: 1px;
    background: rgba(var(--primary-rgb), 0.05);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-page .dashboard-main .table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

.dashboard-page .dashboard-main .list-group-item {
    border-color: rgba(15, 23, 42, 0.08);
}

.dashboard-page .dashboard-main .empty-state-onboarding .card {
    box-shadow: 0 18px 34px -26px rgba(15, 23, 42, 0.32);
}

.profile-page .profile-main {
    padding-top: 2.25rem;
    padding-bottom: 4rem;
}

.profile-page .profile-shell {
    max-width: 1080px;
}

.profile-page .profile-shell .d-flex.justify-content-between {
    padding: 0.3rem 0 0.6rem;
}

.profile-page .profile-shell h3 {
    font-size: clamp(1.75rem, 4vw, 2.2rem);
}

.profile-page .profile-shell .border-end {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.profile-page .profile-shell .card:last-of-type .card-body {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.privacy-page .legal-main {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.privacy-page .legal-main > section {
    margin-bottom: 1.2rem !important;
    padding: 1.5rem 1.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.36);
}

.privacy-page .legal-main > section:first-of-type {
    background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.08), rgba(255, 255, 255, 0.97));
}

.privacy-page .legal-main h2 {
    margin-bottom: 0.9rem;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.privacy-page .legal-main ul {
    padding-left: 1.15rem;
}

.privacy-page .legal-main address {
    margin-bottom: 0;
    line-height: 1.8;
}

.utility-page .utility-main {
    padding-top: 2.5rem !important;
    padding-bottom: 4rem !important;
}

.unsubscribe-page .utility-main .card {
    overflow: hidden;
}

.unsubscribe-page .utility-main .card-body > h1 {
    margin-bottom: 1.7rem !important;
}

.unsubscribe-page .utility-main .bg-light.rounded {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95) !important;
}

.workshops-page .workshops-main .page-title,
.workshop-detail-page .workshop-detail-main .page-title {
    margin-bottom: 1.4rem;
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.workshops-page .filter-card {
    padding: 1.6rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.4);
}

.workshops-page .search-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.4rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #425064;
    font-weight: 600;
}

.workshops-page .garage-card {
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.workshops-page .garage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 46px -30px rgba(15, 23, 42, 0.42);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.workshops-page .garage-card .card-body {
    padding: 1.5rem;
}

.workshops-page .garage-card .card-title {
    margin-bottom: 1rem;
    line-height: 1.3;
}

.workshops-page .garage-card .card-footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(var(--primary-rgb), 0.04));
}

.workshops-page .empty-state {
    border: 1px dashed rgba(var(--primary-rgb), 0.22);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.04), rgba(255, 255, 255, 0.9));
}

.workshops-page .pagination .page-link {
    min-width: 46px;
    min-height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    color: var(--text-primary);
    box-shadow: 0 12px 24px -22px rgba(15, 23, 42, 0.35);
}

.workshops-page .pagination .page-item {
    margin: 0 0.2rem;
}

.workshops-page .pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: transparent;
}

.workshop-detail-page .workshop-detail-main .d-flex.justify-content-between.align-items-center.mb-4 {
    gap: 1rem;
    margin-bottom: 1.8rem !important;
}

.workshop-detail-page .workshop-detail-main .card-body {
    padding: 1.55rem;
}

.workshop-detail-page .workshop-detail-main .info-box {
    padding: 1.5rem;
}

.workshop-detail-page .workshop-detail-main .garage-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(91, 84, 204, 0.12));
    display: grid;
    place-items: center;
}

.workshop-detail-page .workshop-detail-main .garage-icon i {
    font-size: 2rem;
    color: var(--primary);
}

.workshop-detail-page .workshop-detail-main .google-map-container {
    overflow: hidden;
}

.workshop-detail-page .workshop-detail-main .card-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(var(--primary-rgb), 0.05));
}

.workshop-detail-page .workshop-detail-main .certification-badge {
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.06);
    font-weight: 600;
}

.workshop-detail-page .workshop-detail-main .nearby-garage {
    transition: background-color 0.2s ease;
}

.workshop-detail-page .workshop-detail-main .nearby-garage:hover {
    background: rgba(var(--primary-rgb), 0.04);
}

.workshop-detail-page .workshop-detail-main .city-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.workshop-detail-page .workshop-detail-main .city-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.35);
}

.workshop-detail-page .workshop-detail-main .city-links a:hover {
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
}

[data-theme="dark"] .auth-page,
[data-theme="dark"] .dashboard-page,
[data-theme="dark"] .profile-page,
[data-theme="dark"] .legal-page,
[data-theme="dark"] .utility-page,
[data-theme="dark"] .workshops-page,
[data-theme="dark"] .workshop-detail-page {
    background:
        radial-gradient(circle at top right, rgba(77, 159, 255, 0.12), transparent 30%),
        radial-gradient(circle at top left, rgba(157, 148, 255, 0.08), transparent 26%),
        linear-gradient(180deg, #111926 0%, #0c121c 100%);
}

[data-theme="dark"] .workshops-page .breadcrumb,
[data-theme="dark"] .workshop-detail-page .breadcrumb,
[data-theme="dark"] .privacy-page .breadcrumb,
[data-theme="dark"] .auth-page .auth-main .card,
[data-theme="dark"] .dashboard-page .dashboard-main .card,
[data-theme="dark"] .profile-page .profile-shell .card,
[data-theme="dark"] .utility-page .utility-main .card,
[data-theme="dark"] .privacy-page .legal-main > section,
[data-theme="dark"] .workshops-page .filter-card,
[data-theme="dark"] .workshop-detail-page .workshop-detail-main .info-box {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 25, 38, 0.86);
    box-shadow: 0 28px 54px -36px rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .auth-page .auth-main .card-header,
[data-theme="dark"] .dashboard-page .dashboard-main .card-header,
[data-theme="dark"] .profile-page .profile-shell .card-header,
[data-theme="dark"] .workshop-detail-page .workshop-detail-main .card-header,
[data-theme="dark"] .workshop-detail-page .workshop-detail-main .card-footer,
[data-theme="dark"] .workshops-page .garage-card .card-footer {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .auth-page .auth-main .form-control,
[data-theme="dark"] .auth-page .auth-main .form-select,
[data-theme="dark"] .profile-page .profile-shell .form-control,
[data-theme="dark"] .profile-page .profile-shell .form-select,
[data-theme="dark"] .utility-page .utility-main .form-control,
[data-theme="dark"] .workshops-page .workshops-main .form-control,
[data-theme="dark"] .workshops-page .workshops-main .form-select,
[data-theme="dark"] .workshop-detail-page .workshop-detail-main .form-control,
[data-theme="dark"] .workshops-page .search-count,
[data-theme="dark"] .workshops-page .empty-state,
[data-theme="dark"] .unsubscribe-page .utility-main .bg-light.rounded,
[data-theme="dark"] .workshop-detail-page .workshop-detail-main .city-links a {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-page .dashboard-main .table-responsive {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dashboard-page .dashboard-main .table thead th {
    background: rgba(77, 159, 255, 0.12);
}

[data-theme="dark"] .workshops-page .pagination .page-link {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

@media (max-width: 991px) {
    .workshop-detail-page .workshop-detail-main .d-flex.justify-content-between.align-items-center.mb-4 {
        align-items: flex-start !important;
    }

    .profile-page .profile-shell .d-flex.justify-content-between {
        gap: 0.8rem;
        flex-direction: column;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .auth-page .auth-main,
    .dashboard-page .dashboard-main,
    .profile-page .profile-main,
    .privacy-page .legal-main,
    .utility-page .utility-main,
    .workshops-page .workshops-main,
    .workshop-detail-page .workshop-detail-main {
        padding-top: 1.2rem !important;
        padding-bottom: 3rem !important;
    }

    .auth-page .auth-main .card-body,
    .dashboard-page .dashboard-main .card-body,
    .profile-page .profile-shell .card-body,
    .utility-page .utility-main .card-body,
    .workshop-detail-page .workshop-detail-main .card-body,
    .workshop-detail-page .workshop-detail-main .info-box,
    .privacy-page .legal-main > section,
    .workshops-page .filter-card,
    .workshops-page .garage-card .card-body {
        padding: 1.25rem !important;
    }

    .workshops-page .breadcrumb,
    .workshop-detail-page .breadcrumb,
    .privacy-page .breadcrumb,
    .workshops-page .search-count {
        border-radius: 20px;
    }

    .workshops-page .page-title,
    .workshop-detail-page .workshop-detail-main .page-title {
        font-size: 1.8rem;
    }

    .workshop-detail-page .workshop-detail-main .city-links {
        gap: 0.55rem;
    }

    .workshop-detail-page .workshop-detail-main .city-links a {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Vehicle, Favorites, City Pages ===== */
.vehicle-page,
.city-page {
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.1), transparent 30%),
        radial-gradient(circle at top left, rgba(91, 84, 204, 0.05), transparent 24%),
        linear-gradient(180deg, #f6f8fb 0%, #ecf1f7 100%);
}

.vehicle-page .vehicle-main,
.city-page .city-main,
.dashboard-page .favorites-main,
.dashboard-page .claim-main {
    position: relative;
    z-index: 1;
}

.vehicle-page .vehicle-main,
.dashboard-page .favorites-main,
.dashboard-page .claim-main {
    padding-top: 2.25rem;
    padding-bottom: 4rem;
}

.vehicle-page .vehicle-shell,
.dashboard-page .favorites-shell,
.dashboard-page .claim-shell {
    max-width: 1080px;
}

.vehicle-page .card,
.dashboard-page.favorites-page .card,
.dashboard-page.claim-page .card,
.city-page .card,
.city-page .garage-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 24px 46px -34px rgba(15, 23, 42, 0.4);
}

.vehicle-page .card-header,
.dashboard-page.favorites-page .card-header,
.dashboard-page.claim-page .card-header,
.city-page .card-header {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05), rgba(255, 255, 255, 0.8));
}

.vehicle-page .card-body,
.dashboard-page.favorites-page .card-body,
.dashboard-page.claim-page .card-body,
.city-page .card-body {
    padding: 1.6rem;
}

.vehicle-page .form-label,
.dashboard-page.claim-page .form-label {
    font-weight: 600;
}

.vehicle-page .form-control,
.vehicle-page .form-select,
.vehicle-page .input-group-text,
.dashboard-page.claim-page .form-control,
.dashboard-page.claim-page .form-select {
    min-height: 52px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.94);
}

.vehicle-page .form-control:focus,
.vehicle-page .form-select:focus,
.dashboard-page.claim-page .form-control:focus,
.dashboard-page.claim-page .form-select:focus {
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 0.22rem rgba(var(--primary-rgb), 0.12);
}

.vehicle-page .btn,
.dashboard-page.favorites-page .btn,
.dashboard-page.claim-page .btn,
.city-page .btn {
    border-radius: 16px;
    font-weight: 600;
    box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.45);
}

.vehicle-page .alert,
.dashboard-page.favorites-page .alert,
.dashboard-page.claim-page .alert,
.city-page .alert {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 16px 32px -26px rgba(15, 23, 42, 0.34);
}

.vehicle-page .d-flex.justify-content-between.align-items-center.mb-4,
.dashboard-page.favorites-page .d-flex.justify-content-between.align-items-center.mb-4,
.dashboard-page.claim-page .d-flex.justify-content-between.align-items-center.mb-4 {
    gap: 1rem;
}

.vehicle-page .h3,
.dashboard-page.favorites-page .h3,
.dashboard-page.claim-page .h3 {
    letter-spacing: -0.03em;
}

.vehicle-add-page #vehicle-form-fields {
    margin-top: 1rem;
    padding: 1.35rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.82);
}

.vehicle-add-page .input-group .btn,
.vehicle-details-page .btn,
.dashboard-page.favorites-page .card .btn,
.dashboard-page.claim-page .btn-lg {
    min-height: 52px;
}

.vehicle-details-page .card-body .card {
    box-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.34);
}

.vehicle-details-page .badge {
    border-radius: 999px;
    padding: 0.45rem 0.72rem;
}

.dashboard-page.favorites-page .favorites-main,
.dashboard-page.claim-page .claim-main {
    padding-top: 2.25rem;
    padding-bottom: 4rem;
}

.dashboard-page.favorites-page .favorites-shell,
.dashboard-page.claim-page .claim-shell {
    max-width: 1120px;
}

.dashboard-page.favorites-page .modal-content {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 26px 48px -30px rgba(15, 23, 42, 0.45);
}

.dashboard-page.favorites-page .modal-header,
.dashboard-page.favorites-page .modal-footer {
    border-color: rgba(15, 23, 42, 0.08);
}

.dashboard-page.favorites-page #favorites-map {
    min-height: 360px;
}

.dashboard-page.favorites-page .card.h-100 {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.dashboard-page.favorites-page .card.h-100:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.18);
    box-shadow: 0 28px 44px -30px rgba(15, 23, 42, 0.42);
}

.dashboard-page.claim-page .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
}

.dashboard-page.claim-page .table {
    margin-bottom: 0;
}

.dashboard-page.claim-page .table thead th {
    padding: 0.95rem 1rem;
    background: rgba(var(--primary-rgb), 0.05);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-page.claim-page .table tbody td {
    padding: 1rem;
    vertical-align: middle;
}

.city-page .city-main {
    padding-top: 1rem;
    padding-bottom: 4rem;
}

.city-page .breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.42);
}

.city-page .city-hero {
    padding: 2rem 2.2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.11), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.95));
    box-shadow: 0 28px 54px -36px rgba(15, 23, 42, 0.42);
}

.city-page .city-hero .display-4 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.035em;
}

.city-page .row.g-4 .card.text-center .card-body {
    padding: 1.8rem 1.2rem;
}

.city-page .garage-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.city-page .garage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.18);
    box-shadow: 0 28px 44px -30px rgba(15, 23, 42, 0.42);
}

.city-page .list-group-item {
    border-color: rgba(15, 23, 42, 0.08);
}

.auth-forgot-page .auth-main,
.auth-reset-page .auth-main,
.auth-verify-email-page .auth-main {
    padding-top: 2.4rem;
    padding-bottom: 4rem;
}

.auth-forgot-page .container,
.auth-reset-page .container,
.auth-verify-email-page .container {
    max-width: 960px;
}

.auth-verify-notice-page .bg-light.rounded,
.auth-verify-email-page .alert-info {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95) !important;
}

[data-theme="dark"] .vehicle-page,
[data-theme="dark"] .city-page {
    background:
        radial-gradient(circle at top right, rgba(77, 159, 255, 0.12), transparent 30%),
        radial-gradient(circle at top left, rgba(157, 148, 255, 0.08), transparent 26%),
        linear-gradient(180deg, #111926 0%, #0c121c 100%);
}

[data-theme="dark"] .vehicle-page .card,
[data-theme="dark"] .dashboard-page.favorites-page .card,
[data-theme="dark"] .dashboard-page.claim-page .card,
[data-theme="dark"] .city-page .card,
[data-theme="dark"] .city-page .garage-card,
[data-theme="dark"] .dashboard-page.favorites-page .modal-content,
[data-theme="dark"] .city-page .city-hero,
[data-theme="dark"] .vehicle-add-page #vehicle-form-fields,
[data-theme="dark"] .dashboard-page.claim-page .table-responsive,
[data-theme="dark"] .city-page .breadcrumb,
[data-theme="dark"] .auth-verify-notice-page .bg-light.rounded,
[data-theme="dark"] .auth-verify-email-page .alert-info {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 25, 38, 0.86);
    box-shadow: 0 28px 54px -36px rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .vehicle-page .card-header,
[data-theme="dark"] .dashboard-page.favorites-page .card-header,
[data-theme="dark"] .dashboard-page.claim-page .card-header,
[data-theme="dark"] .city-page .card-header,
[data-theme="dark"] .dashboard-page.favorites-page .modal-header,
[data-theme="dark"] .dashboard-page.favorites-page .modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .vehicle-page .form-control,
[data-theme="dark"] .vehicle-page .form-select,
[data-theme="dark"] .dashboard-page.claim-page .form-control,
[data-theme="dark"] .dashboard-page.claim-page .form-select,
[data-theme="dark"] .city-page .breadcrumb {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-page.claim-page .table thead th {
    background: rgba(77, 159, 255, 0.12);
}

@media (max-width: 991px) {
    .vehicle-page .d-flex.justify-content-between.align-items-center.mb-4,
    .dashboard-page.favorites-page .d-flex.justify-content-between.align-items-center.mb-4,
    .dashboard-page.claim-page .d-flex.justify-content-between.align-items-center.mb-4 {
        align-items: flex-start !important;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .vehicle-page .vehicle-main,
    .dashboard-page.favorites-page .favorites-main,
    .dashboard-page.claim-page .claim-main,
    .city-page .city-main,
    .auth-forgot-page .auth-main,
    .auth-reset-page .auth-main,
    .auth-verify-email-page .auth-main {
        padding-top: 1.2rem !important;
        padding-bottom: 3rem !important;
    }

    .vehicle-page .card-body,
    .dashboard-page.favorites-page .card-body,
    .dashboard-page.claim-page .card-body,
    .city-page .card-body,
    .city-page .city-hero,
    .vehicle-add-page #vehicle-form-fields {
        padding: 1.2rem !important;
    }

    .dashboard-page.favorites-page #favorites-map {
        min-height: 280px;
    }

    .city-page .city-hero .display-4 {
        font-size: 1.95rem;
    }
}

/* ===== Shared Usability Patterns ===== */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.page-head-inline {
    margin-bottom: 1.5rem;
}

.page-head-title-group {
    min-width: 0;
}

.page-head .page-title,
.page-head .h3 {
    letter-spacing: -0.03em;
}

.page-subtitle {
    color: #5f6b7a;
    line-height: 1.6;
}

.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dashboard-summary-grid,
.favorites-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.favorites-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-summary-card,
.favorites-summary-card,
.profile-stat-tile {
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.32);
}

.dashboard-summary-label,
.favorites-summary-label {
    display: block;
    margin-bottom: 0.45rem;
    color: #5f6b7a;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dashboard-summary-value,
.favorites-summary-value {
    display: block;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.page-action-bar {
    padding-top: 1.2rem;
    margin-top: 0.6rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.workshops-page .filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.workshops-page .filter-summary-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5f6b7a;
}

.workshops-page .filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.workshops-page .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 0.9rem;
    border: 1px solid rgba(var(--primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.workshops-page .filter-chip:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.24);
    transform: translateY(-1px);
}

.workshops-page .filter-chip-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--primary);
}

.workshops-page .filter-chip-value {
    font-weight: 600;
}

.workshop-detail-page .sticky-sidebar {
    position: sticky;
    top: 112px;
}

.workshop-detail-page .workshop-page-head .page-subtitle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.vehicle-page .page-subtitle {
    font-weight: 600;
    color: var(--primary);
}

.dashboard-page .dashboard-page-head .page-subtitle,
.favorites-page .page-subtitle {
    max-width: 56ch;
}

.profile-page .profile-stat-tile {
    height: 100%;
    padding: 1.4rem 1rem;
}

.profile-page .profile-stat-tile h3 {
    letter-spacing: -0.04em;
}

[data-theme="dark"] .page-subtitle {
    color: var(--text-muted);
}

[data-theme="dark"] .dashboard-summary-card,
[data-theme="dark"] .favorites-summary-card,
[data-theme="dark"] .profile-stat-tile {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 26px 44px -34px rgba(0, 0, 0, 0.68);
}

[data-theme="dark"] .page-action-bar,
[data-theme="dark"] .workshops-page .filter-summary {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .workshops-page .filter-chip {
    border-color: rgba(77, 159, 255, 0.2);
    background: rgba(77, 159, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .workshops-page .filter-chip:hover {
    border-color: rgba(77, 159, 255, 0.3);
    background: rgba(77, 159, 255, 0.14);
}

@media (max-width: 991px) {
    .workshop-detail-page .sticky-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .page-head,
    .page-head-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page-head-actions {
        width: 100%;
    }

    .page-head-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-summary-grid,
    .favorites-summary-grid {
        grid-template-columns: 1fr;
    }

    .workshops-page .filter-summary {
        align-items: stretch;
    }

    .workshops-page .filter-chip-list {
        width: 100%;
    }

    .workshops-page .filter-chip {
        width: 100%;
        justify-content: space-between;
    }

    .page-action-bar {
        gap: 0.75rem !important;
    }
}