/* Car Hire Stylesheet */
/* Matches the provided UI design exactly */

/* CSS Variables */
:root {
    --primary: #2563EB;
    --background-light: #F8FAFC;
    --background-dark: #1E293B;
    --card-light: #ffffff;
    --card-dark: #334155;
    --text-light: #1E293B;
    --text-dark: #F8FAFC;
    --subtext-light: #64748B;
    --subtext-dark: #CBD5E1;
    --border-light: #E2E8F0;
    --border-dark: #475569;
    --secondary: #0D9488;
    --border-radius: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-full: 9999px;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-dark);
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

body.light {
    background-color: var(--background-light);
    color: var(--text-light);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.75rem;
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1rem;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 0.75rem;
        /* Reduced padding on tablets to give more space */
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1400px;
        /* Wider container on desktop */
        padding: 0 1.5rem;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1600px;
        /* Even wider on large desktop screens */
        padding: 0 2rem;
    }
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
    overflow: visible;
    /* Ensure sticky works in flex containers */
}

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

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.w-full {
    width: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.gap-4 {
    gap: 1rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-6 {
    gap: 1.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 4rem;
    width: 100%;
    max-width: 100vw;
    border-bottom: 1px solid var(--border-light);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0 0.75rem;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Logo on left, actions on right */
    overflow-x: hidden;
}

@media (min-width: 640px) {
    header {
        padding: 0 1rem;
    }
}

@media (min-width: 1024px) {
    header {
        padding: 0 2rem;
    }
}

body.dark header {
    border-bottom-color: var(--border-light);
    background-color: rgba(255, 255, 255, 0.95);
}

body.light header {
    border-bottom-color: var(--border-light);
    background-color: rgba(255, 255, 255, 0.95);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    /* Prevent shrinking on mobile */
    justify-content: flex-start;
    /* Ensure left alignment */
}

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid #48831f;
    object-fit: cover;
    display: block;
}

@media (min-width: 640px) {
    .logo-icon {
        width: 3rem;
        height: 3rem;
    }
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    font-family: 'Yeseva One', 'Playfair Display', serif;
    white-space: nowrap;
    position: relative;
    display: inline-block;
    background: linear-gradient(120deg, #7B3F00 0%, #7B3F00 32%, #fff 36%, #ffd700 40%, #fff 44%, #7B3F00 48%, #7B3F00 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shimmer-wave 16s linear infinite;
    flex-shrink: 0;
    /* Prevent text from shrinking */
    margin: 0;
    /* Remove any default margins */
}

@keyframes shimmer-wave {
    0% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

@media (min-width: 640px) {
    .logo-text {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .logo-text {
        font-size: 2rem;
    }
}

nav {
    display: none;
    align-items: center;
    gap: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    nav {
        display: flex;
    }
}

nav a {
    color: black;
    text-decoration: none;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--primary);
}

body.dark nav a {
    color: black;
}

.nav-secondary {
    color: black;
    opacity: 0.7;
    /* Slightly muted for secondary items */
}

body.dark .nav-secondary {
    color: black;
    opacity: 0.7;
}

/* Tab Bar - Desktop Only */
.tab-bar {
    display: none;
    position: fixed;
    top: 4rem;
    /* Fixed below navbar */
    left: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    border-bottom: 1px solid var(--border-light);
    background-color: rgba(123, 63, 0, 0.85);
    /* Chocolate brown with transparency */
    backdrop-filter: blur(4px);
}

@media (min-width: 1024px) {
    .tab-bar {
        display: block;
    }
}

body.dark .tab-bar {
    border-bottom-color: var(--border-dark);
    background-color: rgba(123, 63, 0, 0.85);
    /* Chocolate brown with transparency */
}

.tab-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    height: 3rem;
}

.tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    /* White text for dark chocolate background */
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tab-link .material-symbols-outlined {
    font-size: 1.125rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tab-link:hover {
    color: #ffd700;
    /* Gold color on hover */
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #ffd700;
}

body.dark .tab-link {
    color: rgba(255, 255, 255, 0.9);
    /* White text for dark chocolate background */
}

body.dark .tab-link:hover {
    color: #ffd700;
    /* Gold color on hover */
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: #ffd700;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-light);
    background-color: var(--card-light);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 100;
}

.theme-toggle-btn:hover {
    background-color: var(--gray-100);
    border-color: var(--primary);
}

body.dark .theme-toggle-btn {
    border-color: var(--border-dark);
    background-color: var(--card-dark);
    color: var(--text-dark);
}

body.dark .theme-toggle-btn:hover {
    background-color: var(--card-dark);
    border-color: var(--primary);
}

.theme-icon-light,
.theme-icon-dark {
    position: absolute;
    font-size: 1.25rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark .theme-icon-light {
    opacity: 0;
    transform: rotate(90deg);
}

body.dark .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

body.light .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

body.light .theme-icon-dark {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Mobile: Smaller theme toggle button */
@media (max-width: 639px) {
    .theme-toggle-btn {
        width: 2rem;
        height: 2rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .theme-icon-light,
    .theme-icon-dark {
        font-size: 1rem;
    }
}

@media (min-width: 640px) {
    .theme-toggle-btn {
        top: 1rem;
        right: 1rem;
    }
}

@media (min-width: 1024px) {
    .theme-toggle-btn {
        top: 1rem;
        right: 2rem;
    }
}

/* Buttons */
.btn {
    display: flex;
    height: 2.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25;
    border: none;
    text-decoration: none;
    transition: all 0.2s;
}

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

.btn-primary:hover {
    background-color: rgba(37, 99, 235, 0.9);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: rgba(37, 99, 235, 0.2);
    color: var(--primary);
}

.btn-secondary:hover {
    background-color: rgba(37, 99, 235, 0.3);
}

.btn-outline {
    border: 1px solid var(--border-light);
    background-color: var(--card-light);
    color: var(--text-light);
}

body.dark .btn-outline {
    border-color: var(--border-dark);
    background-color: var(--card-dark);
    color: var(--text-dark);
}

.btn-outline:hover {
    background-color: #f9fafb;
}

body.dark .btn-outline:hover {
    background-color: #374151;
}

.btn-large {
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1rem;
    gap: 0.5rem;
}

.btn-full {
    width: 100%;
}

@media (min-width: 768px) {
    .btn-full-md {
        width: auto;
    }
}

/* Search Container */
.search-container {
    margin-bottom: 2rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(226, 232, 240, 0.5);
    background-color: #ffffff !important;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
    /* Reduced top padding */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    max-width: 100%;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    position: relative;
    /* Establish positioning context */
    z-index: 1;
    /* Lower than header (10) and tab bar (9) */
}

.search-intro {
    font-size: 0.875rem;
    color: #4b5563 !important;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-top: 0;
    font-weight: 400;
}

body.dark .search-intro {
    color: #4b5563 !important;
}

@media (min-width: 640px) {
    .search-container {
        padding: 1.5rem;
    }
}

body.dark .search-container {
    border-color: rgba(226, 232, 240, 0.5);
    background-color: #ffffff !important;
}

body.light .search-container {
    border-color: rgba(226, 232, 240, 0.3);
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body.light .search-intro {
    color: var(--text-light);
}

/* Search Grid - Responsive Layout */
.search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Mobile: 2 fields per row */
    gap: 0.75rem;
    max-width: 100%;
    width: 100%;
}

/* Tablet layout: 3 columns */
@media (min-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Center search button on tablet */
    .field-search {
        grid-column: span 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Mobile: Center search button */
@media (max-width: 767px) {
    .field-search {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Desktop layout: all in one row with specific column spans */
@media (min-width: 1024px) {
    .search-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 0;
        column-gap: 0;
    }

    /* Add small gap between vehicle type and search button */
    .field-vehicle {
        padding-right: 0.5rem;
    }

    .field-search {
        padding-left: 0.5rem;
    }

    /* Desktop column spans */
    .field-origin {
        grid-column: span 2;
    }

    .field-destination {
        grid-column: span 2;
    }

    .field-start-date {
        grid-column: span 2;
    }

    .field-end-date {
        grid-column: span 2;
    }

    .field-travelers {
        grid-column: span 1;
        min-width: 120px;
    }

    .field-vehicle {
        grid-column: span 2;
    }

    .field-search {
        grid-column: span 1;
    }

    .lg-border-left {
        border-left: 1px solid #e5e7eb;
    }

    body.dark .lg-border-left {
        border-left-color: #374151;
    }
}

/* Form Grid - Responsive Layout (for backward compatibility) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Mobile: 2 fields per row */
    gap: 0.75rem;
    max-width: 100%;
    width: 100%;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    position: relative;
    /* Establish positioning context */
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Tablet: 3 fields per row */
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(6, 1fr);
        /* Desktop: All 6 fields in one row */
        gap: 1rem;
        flex: 1;
        min-width: 0;
    }
}

/* Make form use grid layout on desktop to align button with fields */
#searchForm {
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    position: relative;
    /* Establish positioning context */
}

@media (min-width: 1024px) {
    #searchForm {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        align-items: end;
    }

    /* Form grid takes remaining space */
    #searchForm>.form-grid {
        grid-column: 1;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        min-width: 0;
    }

    /* Button wrapper takes minimal space */
    #searchForm>.flex.justify-end.mt-4 {
        grid-column: 2;
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
}

/* Button wrapper - mobile/tablet styling */
.flex.justify-end.mt-4 {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* Search button - make it wider */
#searchForm .btn-primary.btn-large {
    min-width: 200px;
    padding: 0 2rem;
}

@media (min-width: 640px) {
    #searchForm .btn-primary.btn-large {
        min-width: 250px;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1024px) {
    #searchForm .btn-primary.btn-large {
        min-width: 140px;
        max-width: 160px;
        padding: 0 1.5rem;
        width: auto;
    }
}

/* Flatten nested containers - all form-grid-inner become transparent */
.form-grid-inner {
    display: contents;
}

/* Form groups are flex containers by default */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    max-width: 100%;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    position: relative;
    /* Establish positioning context */
    z-index: auto;
    /* Reset z-index to allow dropdown to appear above */
}

/* Flatten form-row so its children participate in grid */
.form-row {
    display: contents;
}

/* Form-row divs become grid items - these are the actual field containers */
.form-row>div {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    position: relative;
    /* Establish positioning context */
}

/* On mobile, ensure form-row divs don't add offset */
@media (max-width: 640px) {
    .form-row>div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Target form-groups that contain form-rows - these need to be flattened */
/* Method 1: Target via nth-child after form-grid-inner is flattened */
.form-grid>.form-group:nth-child(3),
.form-grid>.form-group:nth-child(4) {
    display: contents;
}

/* Method 2: Target form-groups inside second form-grid-inner (before flattening) */
.form-grid-inner:nth-child(2)>.form-group {
    display: contents;
}

/* Method 3: If browser supports :has(), use it */
@supports selector(:has(*)) {
    .form-group:has(.form-row) {
        display: contents;
    }
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    margin-left: 0;
    padding-left: 0;
    color: #374151 !important;
    text-align: left;
    position: relative;
    z-index: 2;
}

.form-input {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    padding: 0.5rem 0.75rem;
    padding-left: 3rem !important;
    /* Increased padding to prevent icon overlap */
    font-size: 0.875rem;
    box-sizing: border-box;
    height: 3rem;
}

/* Input Container for Icons */
.input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0;
}

.input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    z-index: 1;
    pointer-events: none;
    font-size: 1.125rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark .input-icon {
    color: #6b7280;
}

/* Custom Date Field as Form Input */
.custom-date-field.form-input-field {
    padding-left: 3rem !important;
    /* Increased padding to match other inputs */
    cursor: pointer;
}

.custom-date-field.form-input-field .date-icon {
    display: none;
    /* Hide duplicate icon since we have input-icon */
}

/* Select Input */
.form-select {
    height: 3rem;
    width: 100%;
    border-radius: var(--border-radius-lg);
    background-color: #ffffff !important;
    padding-left: 3rem !important;
    /* Increased padding to prevent icon overlap */
    padding-right: 2.5rem !important;
    /* Increased padding for arrow */
    font-size: 0.875rem;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}

body.dark .form-select {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.select-arrow {
    position: absolute;
    right: 0.875rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
    font-size: 1.25rem;
}

body.dark .select-arrow {
    color: #6b7280;
}

/* Border Radius Adjustments for Desktop */
@media (min-width: 1024px) {
    .rounded-r-none {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .rounded-none {
        border-radius: 0 !important;
    }

    .rounded-l-none {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .rounded-r-lg {
        border-top-right-radius: 0.5rem !important;
        border-bottom-right-radius: 0.5rem !important;
    }

    .form-input.rounded-r-none,
    .form-select.rounded-r-none,
    .custom-date-field.rounded-r-none {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .form-input.rounded-none,
    .form-select.rounded-none,
    .custom-date-field.rounded-none {
        border-radius: 0 !important;
    }

    .form-input.rounded-l-none,
    .form-select.rounded-l-none,
    .custom-date-field.rounded-l-none {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .form-select.rounded-r-lg {
        border-top-right-radius: 0.5rem !important;
        border-bottom-right-radius: 0.5rem !important;
    }
}

/* Search Button */
.search-button {
    display: flex;
    height: 3rem;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff !important;
    border: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.search-button:hover {
    background-color: rgba(255, 107, 0, 0.9);
}

.search-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.5);
}

.search-button .material-symbols-outlined {
    color: #ffffff !important;
    font-size: 1.25rem;
}

.button-text {
    display: inline;
    color: #ffffff !important;
}

.form-input::placeholder {
    color: #9ca3af !important;
}

body.dark .form-input {
    border-color: #d1d5db !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

body.dark .form-input::placeholder {
    color: #9ca3af !important;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Custom Date Field Wrapper */
.custom-date-field-wrapper {
    position: relative !important;
    width: 100%;
    overflow: visible !important;
    /* Allow calendar dropdown to overflow */
    z-index: 20;
    /* Ensure it's above other form elements but below calendar */
}

.custom-date-field.form-input-field {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    padding: 0.5rem 0.75rem;
    padding-left: 3rem !important;
    /* Increased padding to match other inputs */
    font-size: 0.875rem;
    color: #111827 !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.5rem;
    height: 3rem;
    min-height: 3rem;
}

.custom-date-field.form-input-field:hover {
    border-color: #9ca3af !important;
}

.custom-date-field.form-input-field:focus-within {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.custom-date-field.form-input-field.has-value .date-text {
    color: #111827 !important;
    font-weight: 500;
}

.custom-date-field.form-input-field .date-text {
    flex: 1;
    color: #9ca3af !important;
}

/* Ensure date field wrapper doesn't add extra positioning on mobile */
@media (max-width: 640px) {
    .custom-date-field-wrapper {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Custom Date Field */
.custom-date-field {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827 !important;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    gap: 0.5rem;
    -webkit-gap: 0.5rem;
    -moz-gap: 0.5rem;
}

.custom-date-field:hover {
    border-color: #9ca3af !important;
}

.custom-date-field:focus-within {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.custom-date-field.has-value .date-text {
    color: #111827 !important;
    font-weight: 500;
}

.date-icon {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #6b7280;
    flex-shrink: 0;
}

.date-icon .material-symbols-outlined {
    font-size: 1.125rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.date-text {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #9ca3af !important;
}

/* Calendar Modal Overlay */
.calendar-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.calendar-modal-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Calendar Modal */
.calendar-modal {
    position: fixed;
    z-index: 9999;
    width: 320px;
    max-width: calc(100vw - 2rem);
    opacity: 0;
    -webkit-transform: scale(0.95) translate(-50%, -50%);
    -moz-transform: scale(0.95) translate(-50%, -50%);
    -ms-transform: scale(0.95) translate(-50%, -50%);
    -o-transform: scale(0.95) translate(-50%, -50%);
    transform: scale(0.95) translate(-50%, -50%);
    -webkit-transition: opacity 0.2s ease, transform 0.2s ease;
    -moz-transition: opacity 0.2s ease, transform 0.2s ease;
    -o-transition: opacity 0.2s ease, transform 0.2s ease;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    top: 50%;
    left: 50%;
}

.calendar-modal.active {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    -o-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
    pointer-events: auto;
}

.calendar-modal-content {
    background: #ffffff !important;
    border-radius: 0.75rem !important;
    -webkit-border-radius: 0.75rem !important;
    -moz-border-radius: 0.75rem !important;
    -ms-border-radius: 0.75rem !important;
    -o-border-radius: 0.75rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    -moz-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 1rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100%;
}


.calendar-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.calendar-nav-btn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: #f3f4f6;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    color: #374151;
    padding: 0;
}

.calendar-nav-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

.calendar-nav-btn .material-symbols-outlined {
    font-size: 1.125rem;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.calendar-month-year {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    text-align: center;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    -webkit-grid-template-columns: repeat(7, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    -webkit-gap: 0.125rem;
    -moz-gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    -webkit-grid-template-columns: repeat(7, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    -webkit-gap: 0.125rem;
    -moz-gap: 0.125rem;
    margin-bottom: 0.75rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid transparent;
    min-height: 2rem;
}

.calendar-day:hover:not(.disabled):not(.padding-day) {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.calendar-day.today {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
    border-color: #dbeafe;
}

.calendar-day.selected {
    background: #2563eb;
    color: #ffffff;
    font-weight: 600;
    border-color: #2563eb;
}

.calendar-day.selected:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.calendar-day.disabled {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.5;
}

.calendar-day.padding-day {
    cursor: default;
    visibility: hidden;
}

.calendar-footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 0.5rem;
    -webkit-gap: 0.5rem;
    -moz-gap: 0.5rem;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.calendar-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.calendar-btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.calendar-btn-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

.calendar-btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.calendar-btn-primary:hover {
    background: #1d4ed8;
}

@media (max-width: 640px) {
    .calendar-modal {
        width: 300px !important;
        max-width: calc(100vw - 2rem) !important;
        opacity: 0;
        -webkit-transform: scale(0.95) translateY(-10px) !important;
        -moz-transform: scale(0.95) translateY(-10px) !important;
        -ms-transform: scale(0.95) translateY(-10px) !important;
        -o-transform: scale(0.95) translateY(-10px) !important;
        transform: scale(0.95) translateY(-10px) !important;
    }

    .calendar-modal.active {
        opacity: 1 !important;
        -webkit-transform: scale(1) translateY(0) !important;
        -moz-transform: scale(1) translateY(0) !important;
        -ms-transform: scale(1) translateY(0) !important;
        -o-transform: scale(1) translateY(0) !important;
        transform: scale(1) translateY(0) !important;
    }

    .calendar-modal-content {
        padding: 0.875rem !important;
    }

    .calendar-day {
        font-size: 0.75rem !important;
        min-height: 1.75rem !important;
    }

    .calendar-header {
        margin-bottom: 0.5rem !important;
    }

    .calendar-month-year {
        font-size: 0.875rem !important;
    }

    .calendar-nav-btn {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .calendar-nav-btn .material-symbols-outlined {
        font-size: 1rem !important;
    }

    .calendar-weekday {
        font-size: 0.65rem !important;
        padding: 0.2rem 0 !important;
    }

    .calendar-days {
        gap: 0.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .calendar-weekdays {
        gap: 0.1rem !important;
        margin-bottom: 0.4rem !important;
    }

    .calendar-footer {
        padding-top: 0.5rem !important;
        gap: 0.375rem !important;
    }

    .calendar-btn {
        padding: 0.3rem 0.625rem !important;
        font-size: 0.75rem !important;
    }
}

/* Extra small screens - ensure calendar fits */
@media (max-width: 374px) {
    .calendar-modal {
        width: calc(100vw - 1rem) !important;
        max-width: 300px !important;
    }

    .calendar-modal-content {
        padding: 0.75rem !important;
    }

    .calendar-day {
        font-size: 0.7rem !important;
        min-height: 1.5rem !important;
    }

    .calendar-weekday {
        font-size: 0.6rem !important;
        padding: 0.15rem 0 !important;
    }
}

/* Main Content */
.main-content {
    padding-top: calc(1rem + 4rem);
    /* Account for fixed header (4rem height) */
    padding-bottom: 1rem;
}

@media (min-width: 640px) {
    .main-content {
        padding-top: calc(1.5rem + 4rem);
        padding-bottom: 1.5rem;
    }
}

@media (min-width: 768px) {
    .main-content {
        padding-top: calc(2rem + 4rem);
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .main-content {
        padding-top: calc(2rem + 4rem + 3rem);
        /* Account for header (4rem) + tab bar (3rem) */
        padding-bottom: 2rem;
    }
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Mobile: Hide filters sidebar, show only results */
@media (max-width: 767px) {
    .content-grid {
        grid-template-columns: 1fr !important;
        /* Single column on mobile */
        gap: 1.5rem;
    }

    /* Hide filters sidebar on mobile - multiple selectors for maximum specificity */
    .content-grid aside,
    aside.filters-sidebar,
    .content-grid>aside {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide filters container */
    .filters {
        display: none !important;
        visibility: hidden !important;
    }

    /* Ensure results container (car cards) takes full width */
    .content-grid .results-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        grid-column: 1 / -1;
        /* Span full width */
    }

    /* Ensure car list maintains full width */
    .content-grid .car-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure car cards maintain their size */
    .content-grid .car-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: 200px 1fr;
        /* Ultra-compact filters, maximum space for cards on tablets */
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: 240px 1fr;
        /* Compact filters on desktop */
        gap: 1.5rem;
    }
}

@media (min-width: 1440px) {
    .content-grid {
        grid-template-columns: 260px 1fr;
        /* Slightly wider on large screens */
        gap: 2rem;
    }
}

/* Filters */
.filters {
    position: sticky;
    top: 4rem;
    /* Below fixed header on mobile/tablet */
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-light);
    background-color: var(--card-light);
    padding: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    max-width: 100%;
    overflow-x: hidden;
}

/* Mobile: Filters are hidden - no styling needed */

@media (min-width: 1024px) {
    .filters {
        top: 7rem;
        /* Below fixed header (4rem) + fixed tab bar (3rem) on desktop */
    }
}

@media (min-width: 640px) {
    .filters {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .filters {
        padding: 0.625rem;
        max-width: 200px;
    }
}

@media (min-width: 1024px) {
    .filters {
        padding: 1rem;
        max-width: 240px;
    }
}

@media (min-width: 1440px) {
    .filters {
        padding: 1.25rem;
        max-width: 260px;
    }
}

body.dark .filters {
    border-color: var(--border-dark);
    background-color: var(--card-dark);
}

body.light .filters {
    border-color: var(--border-light);
    background-color: var(--card-light);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
}

.filters-title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

/* Mobile: Compact title */
@media (max-width: 639px) {
    .filters-title {
        font-size: 0.875rem;
        margin-bottom: 0.625rem;
        font-weight: 600;
    }
}

@media (min-width: 768px) {
    .filters-title {
        font-size: 0.9375rem;
        margin-bottom: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .filters-title {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
}

.filter-section {
    margin-bottom: 1.5rem;
}

/* Mobile: Compact filter sections */
@media (max-width: 639px) {
    .filter-section {
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 768px) {
    .filter-section {
        margin-bottom: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .filter-section {
        margin-bottom: 1.25rem;
    }
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Mobile: Compact labels */
@media (max-width: 639px) {
    .filter-label {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
        font-weight: 500;
    }
}

@media (min-width: 768px) {
    .filter-label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
}

@media (min-width: 1024px) {
    .filter-label {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }
}

.filter-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Mobile: Compact subtitles */
@media (max-width: 639px) {
    .filter-subtitle {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
        font-weight: 500;
    }
}

@media (min-width: 768px) {
    .filter-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
}

@media (min-width: 1024px) {
    .filter-subtitle {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }
}

.slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: var(--border-radius-full);
    background-color: #e5e7eb;
    outline: none;
    margin: 0.5rem 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .slider {
        margin: 0.25rem 0;
    }
}

@media (min-width: 1024px) {
    .slider {
        margin: 0.5rem 0;
    }
}

body.dark .slider {
    background-color: #000000 !important;
}

body.dark .slider::-webkit-slider-runnable-track {
    background-color: #000000 !important;
}

body.dark .slider::-moz-range-track {
    background-color: #000000 !important;
}

body.light .slider {
    background-color: #e5e7eb !important;
}

body.light .slider::-webkit-slider-runnable-track {
    background-color: #e5e7eb !important;
}

body.light .slider::-moz-range-track {
    background-color: #e5e7eb !important;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-top: -0.375rem;
    /* Center thumb on track: (1.25 - 0.5) / 2 = 0.375 */
}

.slider::-webkit-slider-runnable-track {
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: var(--border-radius-full);
    border: none;
}

body.dark .slider::-webkit-slider-runnable-track {
    background-color: #000000 !important;
}

body.light .slider::-webkit-slider-runnable-track {
    background-color: #e5e7eb !important;
}

.slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.slider::-moz-range-track {
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: var(--border-radius-full);
    border: none;
}

body.dark .slider::-moz-range-track {
    background-color: #000000 !important;
}

body.light .slider::-moz-range-track {
    background-color: #e5e7eb !important;
}

.slider::-moz-focus-outer {
    border: 0;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--subtext-light);
    margin-top: 0.25rem;
}

/* Mobile: Compact slider labels */
@media (max-width: 639px) {
    .slider-labels {
        font-size: 0.6rem;
        margin-top: 0.15rem;
        gap: 0.2rem;
    }

    .slider {
        height: 0.2rem !important;
        /* Very thin track */
        margin: 0.3rem 0 !important;
        padding: 0 !important;
    }

    /* Webkit (Chrome, Safari, Edge) */
    .slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 1.25rem !important;
        height: 1.25rem !important;
        border-radius: 50%;
        background-color: var(--primary);
        cursor: pointer;
        margin-top: -0.525rem;
        /* Center thumb on track: (1.25 - 0.2) / 2 = 0.525 */
        border: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .slider::-webkit-slider-runnable-track {
        height: 0.2rem !important;
        background-color: white;
        border-radius: var(--border-radius-full);
        border: none;
    }

    body.dark .slider::-webkit-slider-runnable-track {
        background-color: #000000 !important;
    }

    body.light .slider::-webkit-slider-runnable-track {
        background-color: #e5e7eb !important;
    }

    /* Firefox */
    .slider::-moz-range-thumb {
        width: 1.25rem !important;
        height: 1.25rem !important;
        border-radius: 50%;
        background-color: var(--primary);
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .slider::-moz-range-track {
        height: 0.2rem !important;
        background-color: white;
        border-radius: var(--border-radius-full);
        border: none;
    }

    body.dark .slider::-moz-range-track {
        background-color: #000000 !important;
    }

    body.light .slider::-moz-range-track {
        background-color: #e5e7eb !important;
    }

    /* Firefox: align thumb with track */
    .slider::-moz-focus-outer {
        border: 0;
    }
}

@media (min-width: 768px) {
    .slider-labels {
        font-size: 0.625rem;
        margin-top: 0.1875rem;
    }
}

@media (min-width: 1024px) {
    .slider-labels {
        font-size: 0.75rem;
    }
}

body.dark .slider-labels {
    color: var(--subtext-dark);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Mobile: Compact checkbox groups */
@media (max-width: 639px) {
    .checkbox-group {
        gap: 0.3rem;
        margin-top: 0.3rem;
    }
}

@media (min-width: 768px) {
    .checkbox-group {
        gap: 0.25rem;
        margin-top: 0.25rem;
    }
}

@media (min-width: 1024px) {
    .checkbox-group {
        gap: 0.375rem;
        margin-top: 0.375rem;
    }
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid #d1d5db;
    accent-color: var(--primary);
}

@media (min-width: 768px) {
    .checkbox-item input[type="checkbox"] {
        width: 0.875rem;
        height: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .checkbox-item input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
    }
}

.checkbox-item label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Mobile: Compact checkbox labels */
@media (max-width: 639px) {
    .checkbox-item {
        margin-bottom: 0;
    }

    .checkbox-item input[type="checkbox"] {
        width: 0.8125rem;
        height: 0.8125rem;
        flex-shrink: 0;
    }

    .checkbox-item label {
        margin-left: 0.3rem;
        font-size: 0.7rem;
        line-height: 1.2;
    }
}

@media (min-width: 768px) {
    .checkbox-item label {
        margin-left: 0.25rem;
        font-size: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .checkbox-item label {
        margin-left: 0.375rem;
        font-size: 0.8125rem;
    }
}

/* Compact button styles for filters on tablets */
.filters .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    height: 2.25rem;
}

/* Mobile: Compact button */
@media (max-width: 639px) {
    .filters .btn {
        font-size: 0.7rem;
        padding: 0.375rem 0.5rem;
        height: 1.875rem;
        margin-top: 0.375rem;
        font-weight: 600;
    }
}

@media (min-width: 768px) {
    .filters .btn {
        font-size: 0.75rem;
        padding: 0.4375rem 0.5rem;
        height: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .filters .btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
        height: 2.25rem;
    }
}

/* Results */
.results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 0 !important;
    /* Behind cards - lower than car cards */
}

.results-header .btn,
.results-header .btn-outline {
    position: relative;
    z-index: 0 !important;
    /* Behind label and cards */
}

@media (min-width: 1024px) {
    .results-header {
        z-index: -1 !important;
        /* Negative z-index to ensure it's behind cards on desktop */
    }

    .results-header .btn,
    .results-header .btn-outline {
        z-index: -1 !important;
        /* Negative z-index behind everything on desktop */
    }

    .car-card {
        z-index: 10 !important;
        /* Ensure cards are above sort button */
    }

    .car-list {
        z-index: 5 !important;
        /* Ensure car list is above results-header */
    }

    .results-container {
        z-index: 5 !important;
        /* Ensure results container is above results-header */
    }
}

.results-count {
    font-size: 0.875rem;
    color: var(--subtext-light);
}

body.dark .results-count {
    color: var(--subtext-dark);
}

body.light .results-count {
    color: var(--subtext-light);
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 4rem 2rem;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(37, 99, 235, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* Results Container */
.results-container {
    min-width: 0;
    /* Prevents grid overflow */
    max-width: 100%;
    width: 100%;
    /* Ensure full width */
    overflow-x: hidden;
    position: relative;
    z-index: 5;
    /* Above results-header */
}

/* Mobile: Ensure results container maintains full width */
@media (max-width: 639px) {
    .results-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.car-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-width: 0;
    /* Prevents grid overflow */
    width: 100%;
    /* Ensure full width */
    position: relative;
    z-index: 5;
    /* Above results-header */
}

/* Mobile: Ensure car list maintains full width */
@media (max-width: 639px) {
    .car-list {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1024px) {
    .car-list {
        gap: 1.25rem;
        /* Reduced gap between cards on desktop */
    }
}

.car-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-light);
    background-color: var(--card-light);
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    /* Ensure full width */
    min-width: 0;
    /* Prevents flex overflow */
    overflow: hidden;
    position: relative;
    z-index: 10;
    /* Above results-header on desktop */
}

/* Mobile: Ensure car cards maintain their full size */
@media (max-width: 639px) {
    .car-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        /* Keep original padding */
    }
}

.car-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

body.dark .car-card {
    border-color: var(--border-dark);
    background-color: var(--card-dark);
}

body.light .car-card {
    border-color: var(--border-light);
    background-color: var(--card-light);
    /* Professional layered shadow system - subtle and refined */
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px 0 rgba(0, 0, 0, 0.04),
        0 4px 6px -1px rgba(0, 0, 0, 0.08),
        0 10px 15px -3px rgba(0, 0, 0, 0.10),
        0 20px 25px -5px rgba(0, 0, 0, 0.08);
}

body.light .car-card:hover {
    /* Enhanced professional shadow on hover */
    box-shadow:
        0 2px 4px 0 rgba(0, 0, 0, 0.08),
        0 2px 3px 0 rgba(0, 0, 0, 0.06),
        0 8px 12px -2px rgba(0, 0, 0, 0.10),
        0 16px 24px -4px rgba(0, 0, 0, 0.12),
        0 32px 40px -8px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .car-card {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .car-card {
        padding: 0.75rem;
        /* Reduced padding on desktop */
        gap: 0.75rem;
        /* Reduced gap on desktop */
    }
}

.car-image {
    aspect-ratio: 16/10;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-lg);
}

@media (min-width: 768px) {
    .car-image {
        width: 30%;
        /* Slightly smaller on tablets to ensure cards fit */
        min-width: 200px;
        max-width: 250px;
    }
}

@media (min-width: 1024px) {
    .car-image {
        width: 33.333%;
        min-width: auto;
        max-width: none;
        aspect-ratio: 16/9;
        /* Taller aspect ratio for less height */
    }
}

/* Carousel Styles */
.car-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

@media (min-width: 768px) {
    .car-image-container {
        width: 30%;
        /* Slightly smaller on tablets to ensure cards fit */
        min-width: 200px;
        max-width: 250px;
    }
}

@media (min-width: 1024px) {
    .car-image-container {
        width: 33.333%;
        min-width: auto;
        max-width: none;
        aspect-ratio: 16/9;
        /* Taller aspect ratio for less height */
    }
}

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

@media (min-width: 1024px) {
    .car-image-carousel {
        min-height: 180px;
        /* Reduced min height on desktop */
    }
}

.car-image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    border-radius: var(--border-radius-lg);
}

.car-image-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-btn .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--text-light);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.carousel-prev {
    left: 0.5rem;
}

.carousel-next {
    right: 0.5rem;
}

.carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-full);
    backdrop-filter: blur(4px);
}

.carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    padding: 0;
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.carousel-dot.active {
    background-color: white;
    width: 1.5rem;
    border-radius: var(--border-radius-full);
}

/* Hide carousel controls on mobile for single image */
@media (max-width: 767px) {
    .carousel-btn {
        width: 2rem;
        height: 2rem;
    }

    .carousel-btn .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .carousel-prev {
        left: 0.25rem;
    }

    .carousel-next {
        right: 0.25rem;
    }

    .carousel-dots {
        bottom: 0.5rem;
        padding: 0.375rem 0.5rem;
        gap: 0.375rem;
    }
}

.car-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    /* Prevents flex overflow */
    overflow: hidden;
}

@media (min-width: 1024px) {
    .car-details {
        gap: 0.75rem;
        /* Reduced gap on desktop */
    }
}

.car-title {
    font-size: 1.125rem;
    font-weight: bold;
}

.car-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--subtext-light);
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    .car-features {
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .car-features {
        gap: 0.75rem;
        /* Reduced gap on desktop */
        margin-top: 0.375rem;
        /* Reduced margin on desktop */
    }
}

body.dark .car-features {
    color: var(--subtext-dark);
}

.car-feature {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.car-feature-icon {
    font-size: 0.875rem;
}

.car-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    /* Prevents flex overflow */
    max-width: 100%;
}

@media (min-width: 1024px) {
    .car-pricing {
        gap: 0.75rem;
        /* Reduced gap on desktop */
    }
}

.car-price {
    text-align: left;
}

.car-price-total {
    font-size: 1.125rem;
    font-weight: bold;
}

.car-price-unit {
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--subtext-light);
}

body.dark .car-price-unit {
    color: var(--subtext-dark);
}

.car-price-per-day {
    font-size: 0.875rem;
    color: var(--subtext-light);
}

body.dark .car-price-per-day {
    color: var(--subtext-dark);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination-link {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    color: var(--subtext-light);
    text-decoration: none;
    cursor: pointer;
}

.pagination-link:hover {
    background-color: #f9fafb;
}

body.dark .pagination-link {
    color: var(--subtext-dark);
}

body.dark .pagination-link:hover {
    background-color: #374151;
}

.pagination-link.active {
    background-color: var(--primary);
    color: white;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    overflow-y: auto;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .modal {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .modal {
        padding: 1.25rem;
    }
}

.modal.active {
    display: flex !important;
}

/* Ensure new modal content is visible when modal is active */
.modal.active .modal-content-new {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-content {
    background: var(--card-light);
    border-radius: var(--border-radius-xl);
    max-width: 1000px;
    width: 100%;
    max-height: 95vh;
    overflow-y: auto;
    display: none; /* Hide old modal content, use modal-content-new instead */
}

/* Ensure new modal content is visible when modal is active */
.modal.active .modal-content-new {
    display: flex !important;
}

@media (max-width: 639px) {
    .modal-content {
        border-radius: 0.5rem;
    }
}

body.dark .modal-content {
    background: var(--card-dark);
}

.modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--card-light);
    z-index: 10;
}

@media (min-width: 640px) {
    .modal-header {
        padding: 1.5rem;
    }
}

body.dark .modal-header {
    border-bottom-color: var(--border-dark);
    background: var(--card-dark);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--subtext-light);
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    transition: all 0.2s;
}

.close-modal:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

body.dark .close-modal {
    color: var(--subtext-dark);
}

.modal-body {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .modal-body {
        padding: 1.5rem;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .modal-body {
        grid-template-columns: 2fr 1fr;
    }
}

.car-details-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.car-gallery {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.gallery-main {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 0.5rem;
    margin-top: 0.625rem;
}

@media (min-width: 640px) {
    .gallery-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.625rem;
    }
}

.gallery-thumb {
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    opacity: 1;
    border: 2px solid var(--primary);
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.spec-box {
    padding: 0.75rem;
    background: var(--background-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .spec-box {
        padding: 1rem;
    }
}

body.dark .spec-box {
    background: var(--background-dark);
}

.spec-box .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--primary);
}

.spec-info {
    flex: 1;
}

.spec-label {
    font-size: 0.75rem;
    color: var(--subtext-light);
}

body.dark .spec-label {
    color: var(--subtext-dark);
}

.spec-value {
    font-weight: 600;
    font-size: 1rem;
    text-transform: capitalize;
}

.car-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-badge {
    padding: 0.375rem 0.75rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-full);
    font-size: 0.8125rem;
    color: var(--primary);
}

/* Booking Widget */
.booking-widget {
    background: var(--background-light);
    padding: 1rem;
    border-radius: var(--border-radius-xl);
    position: sticky;
    top: 1rem;
}

@media (min-width: 640px) {
    .booking-widget {
        padding: 1.5rem;
    }
}

body.dark .booking-widget {
    background: var(--background-dark);
}

.booking-price {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

body.dark .booking-price {
    border-bottom-color: var(--border-dark);
}

.booking-price .amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.booking-price .unit {
    font-size: 0.875rem;
    color: var(--subtext-light);
}

body.dark .booking-price .unit {
    color: var(--subtext-dark);
}

.booking-form-group {
    margin-bottom: 1rem;
}

.booking-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.cost-breakdown {
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

body.dark .cost-breakdown {
    border-color: var(--border-dark);
}

.cost-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.cost-row.total {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-dark);
    margin-bottom: 0;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-light);
    border-radius: var(--border-radius-xl);
}

body.dark .no-results {
    background: var(--card-dark);
}

.no-results h3 {
    font-size: 1.5rem;
    margin: 1rem 0 0.5rem;
}

/* Footer */
.footer {
    background: #1a2a3a;
    /* Fallback for older browsers */
    background: -webkit-linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #3b641a 100%);
    background: -moz-linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #3b641a 100%);
    background: -o-linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #3b641a 100%);
    background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #3b641a 100%);
    color: #fff;
    padding: 60px 0 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #ffd700;
    /* Fallback */
    background: -webkit-linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
    background: -moz-linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
    background: -o-linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
    background: linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
    z-index: 1;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* CSS Grid with fallback to Flexbox */
@supports (display: grid) {
    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        -webkit-grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        -ms-grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;
        -webkit-gap: 40px;
        -moz-gap: 40px;
    }
}

/* Fallback for browsers without grid gap support */
@supports not (gap: 40px) {
    .footer-content {
        margin: -20px;
    }

    .footer-content>* {
        margin: 20px;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 250px;
        -ms-flex: 1 1 250px;
        flex: 1 1 250px;
        min-width: 250px;
        max-width: 100%;
    }
}

.footer-section h3 {
    color: #ffd700;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
    position: relative;
    padding-bottom: 12px;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #ffd700;
}

.footer-section p {
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

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

.footer-section ul li {
    margin-bottom: 12px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    -webkit-gap: 10px;
    -moz-gap: 10px;
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* Fallback for browsers without gap support */
@supports not (gap: 10px) {
    .footer-section ul li>* {
        margin-right: 10px;
    }

    .footer-section ul li>*:last-child {
        margin-right: 0;
    }
}

.footer-section ul li:hover {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
}

.footer-section ul li a:hover {
    color: #ffd700;
}

.footer-section ul li i {
    color: #ffd700;
    width: 16px;
    font-size: 1rem;
}

.social-links {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 15px;
    -webkit-gap: 15px;
    -moz-gap: 15px;
    margin-top: 25px;
}

/* Fallback for browsers without gap support */
@supports not (gap: 15px) {
    .social-links a {
        margin-right: 15px;
    }

    .social-links a:last-child {
        margin-right: 0;
    }
}

.social-links a {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-right: 10px;
}

.social-links a.facebook {
    background: #1877F2;
}

.social-links a.twitter {
    background: #1DA1F2;
}

.social-links a.instagram {
    background: #833AB4;
    /* Fallback */
    background: -webkit-linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    background: -moz-linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    background: -o-linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.social-links a.linkedin {
    background: #0A66C2;
}

.social-links a i {
    color: #fff;
    font-size: 1rem;
}

.social-links a:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.newsletter-form {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -moz-box-orient: horizontal !important;
    -moz-box-direction: normal !important;
    -ms-flex-direction: row !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    gap: 8px !important;
    -webkit-gap: 8px !important;
    -moz-gap: 8px !important;
    margin-top: 15px !important;
    position: relative;
    max-width: 320px !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Fallback for browsers without gap support */
@supports not (gap: 6px) {
    .newsletter-form input {
        margin-right: 6px;
    }

    .newsletter-form button {
        margin-left: 0;
    }
}

.newsletter-form input {
    -webkit-box-flex: 1 !important;
    -moz-box-flex: 1 !important;
    -webkit-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    padding: 8px 12px !important;
    height: 36px !important;
    line-height: 36px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    -webkit-border-radius: 18px !important;
    -moz-border-radius: 18px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    float: none !important;
}

.newsletter-form input:focus {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    -webkit-box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
    -moz-box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form button {
    padding: 0 16px !important;
    height: 36px !important;
    line-height: 36px !important;
    border: none !important;
    -webkit-border-radius: 18px !important;
    -moz-border-radius: 18px !important;
    border-radius: 18px !important;
    background: #ffd700 !important;
    /* Fallback */
    background: -webkit-linear-gradient(135deg, #ffd700, #ffaa00) !important;
    background: -moz-linear-gradient(135deg, #ffd700, #ffaa00) !important;
    background: -o-linear-gradient(135deg, #ffd700, #ffaa00) !important;
    background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 90px !important;
    max-width: 110px !important;
    text-align: center !important;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -moz-box-align: center !important;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -moz-box-pack: center !important;
    -ms-flex-pack: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    float: none !important;
    flex-shrink: 0 !important;
}

.newsletter-form button i {
    font-size: 0.8rem !important;
    margin-right: 5px !important;
    line-height: 1 !important;
}

.newsletter-form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #ffaa00;
    /* Fallback */
    background: -webkit-linear-gradient(135deg, #ffaa00, #ffd700);
    background: -moz-linear-gradient(135deg, #ffaa00, #ffd700);
    background: -o-linear-gradient(135deg, #ffaa00, #ffd700);
    background: linear-gradient(135deg, #ffaa00, #ffd700);
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    transition: left 0.3s ease;
    z-index: -1;
}

.newsletter-form button:hover {
    -webkit-transform: translateY(-1px) !important;
    -moz-transform: translateY(-1px) !important;
    -ms-transform: translateY(-1px) !important;
    -o-transform: translateY(-1px) !important;
    transform: translateY(-1px) !important;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.newsletter-form button:hover::before {
    left: 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 30px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    /* Fallback */
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.footer-bottom p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .footer {
        padding: 40px 0 0;
    }

    .footer-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    @supports (display: grid) {
        .footer-content {
            grid-template-columns: 1fr;
            -webkit-grid-template-columns: 1fr;
            -ms-grid-template-columns: 1fr;
            gap: 40px;
            -webkit-gap: 40px;
            -moz-gap: 40px;
        }
    }

    @supports not (gap: 40px) {
        .footer-content>* {
            margin-bottom: 40px;
        }

        .footer-content>*:last-child {
            margin-bottom: 0;
        }
    }

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

    .footer-section h3::after {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .social-links {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .footer-section ul li {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .footer-section ul li:hover {
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    /* Compact newsletter form on mobile - keep in same row like desktop */
    .newsletter-form {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -moz-box-orient: horizontal !important;
        -moz-box-direction: normal !important;
        -ms-flex-direction: row !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        gap: 4px !important;
        -webkit-gap: 4px !important;
        -moz-gap: 4px !important;
        max-width: 260px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .newsletter-form input {
        min-width: 0 !important;
        max-width: none !important;
        padding: 5px 8px !important;
        font-size: 0.7rem !important;
        height: 26px !important;
        line-height: 26px !important;
        flex: 1 !important;
    }

    .newsletter-form button {
        width: auto !important;
        height: 26px !important;
        line-height: 26px !important;
        padding: 0 8px !important;
        font-size: 0.65rem !important;
        min-width: 65px !important;
        max-width: 80px !important;
        font-weight: 500 !important;
        flex-shrink: 0 !important;
    }

    .newsletter-form button i {
        font-size: 0.65rem !important;
        margin-right: 3px !important;
    }
}

/* Extra Small Screens - Ultra Compact Mode */
@media (max-width: 374px) {
    .container {
        padding: 0 0.5rem;
    }

    .search-container {
        padding: 0.375rem;
        border-radius: 0.5rem;
    }

    .form-input {
        padding: 0.375rem 0.5rem;
        font-size: 14px;
    }

    .form-label {
        font-size: 0.8125rem;
    }

    .btn-large {
        height: 2.5rem;
        font-size: 0.875rem;
        padding: 0 0.75rem;
    }

    .logo-text {
        font-size: 1.5rem;
    }

    /* Keep newsletter form in same row on extra small screens */
    .newsletter-form {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -moz-box-orient: horizontal !important;
        -moz-box-direction: normal !important;
        -ms-flex-direction: row !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        gap: 3px !important;
        -webkit-gap: 3px !important;
        -moz-gap: 3px !important;
        max-width: 240px !important;
    }

    .newsletter-form input {
        min-width: 0 !important;
        max-width: none !important;
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
        height: 24px !important;
        line-height: 24px !important;
        flex: 1 !important;
    }

    .newsletter-form button {
        width: auto !important;
        height: 24px !important;
        line-height: 24px !important;
        padding: 0 6px !important;
        font-size: 0.6rem !important;
        min-width: 60px !important;
        max-width: 75px !important;
        flex-shrink: 0 !important;
    }

    .newsletter-form button i {
        font-size: 0.6rem !important;
        margin-right: 2px !important;
    }
}

/* Responsive Overrides for Mobile */
@media (max-width: 639px) {

    /* Ensure all text elements don't overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    div,
    button,
    input,
    select,
    textarea {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Ensure all containers stay within viewport */
    .container,
    .search-container,
    .filters,
    .car-card,
    .modal-content,
    .booking-widget {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Compact search container on mobile */
    .search-container {
        padding: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }

    /* Adjust form spacing on mobile */
    .form-grid {
        gap: 0.5rem;
    }

    .form-group {
        margin-bottom: 0;
    }

    /* Ensure form inputs fit properly */
    .form-input,
    input,
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 0.5rem 0.75rem;
        box-sizing: border-box;
    }

    /* Reduce button size on mobile */
    .btn-large {
        height: 2.75rem;
        padding: 0 1rem;
        font-size: 0.9375rem;
    }

    header {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .logo-container {
        justify-content: flex-start;
        /* Keep left-aligned on mobile */
        width: auto;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 1.25rem;
        /* Increased font size for better visibility on mobile */
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .header-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem;
        font-size: 0.8125rem;
    }

    /* Make buttons full width on mobile for better UX */
    .btn {
        min-height: 2.75rem;
        font-size: 0.875rem;
    }

    /* Filters already hidden on mobile via the rule above */
    .content-grid {
        gap: 1.5rem;
    }

    .results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .results-header .btn {
        width: 100%;
        justify-content: space-between;
    }

    /* Car card adjustments - maintain size on mobile */
    .car-card {
        padding: 1rem !important;
        /* Keep original padding */
        width: 100% !important;
        max-width: 100% !important;
    }

    .car-title {
        font-size: 1rem;
    }

    .car-pricing {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .car-pricing .btn {
        width: 100%;
    }

    /* Reduce modal header title size */
    .modal-header h2 {
        font-size: 1.125rem;
    }
}

/* Tablet-specific styles (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Center/justify newsletter form on tablets */
    .footer-section.newsletter {
        text-align: center !important;
    }

    .footer-section.newsletter .newsletter-form {
        margin-left: auto !important;
        margin-right: auto !important;
        -webkit-box-pack: center !important;
        -moz-box-pack: center !important;
        -ms-flex-pack: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
    }
}

/* Header padding adjustments for larger screens */
@media (min-width: 1024px) {
    header {
        padding: 0 1.5rem;
    }

    /* Center/justify newsletter form on desktop too */
    .footer-section.newsletter {
        text-align: center !important;
    }

    .footer-section.newsletter .newsletter-form {
        margin-left: auto !important;
        margin-right: auto !important;
        -webkit-box-pack: center !important;
        -moz-box-pack: center !important;
        -ms-flex-pack: center !important;
        -webkit-justify-content: center !important;
        justify-content: center !important;
        max-width: 320px !important;
        gap: 8px !important;
        -webkit-gap: 8px !important;
        -moz-gap: 8px !important;
    }

    .footer-section.newsletter .newsletter-form input {
        padding: 8px 12px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 0.85rem !important;
        -webkit-border-radius: 18px !important;
        -moz-border-radius: 18px !important;
        border-radius: 18px !important;
    }

    .footer-section.newsletter .newsletter-form button {
        padding: 0 16px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 0.8rem !important;
        min-width: 90px !important;
        max-width: 110px !important;
        -webkit-border-radius: 18px !important;
        -moz-border-radius: 18px !important;
        border-radius: 18px !important;
    }

    .footer-section.newsletter .newsletter-form button i {
        font-size: 0.8rem !important;
        margin-right: 5px !important;
    }

    /* ============================================
       ENHANCED MOBILE OPTIMIZATIONS
       ============================================ */

    /* CRITICAL: Prevent zoom when typing in inputs */
    body:not([data-modal-open]) input,
    body:not([data-modal-open]) select,
    body:not([data-modal-open]) textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 44px !important; /* Apple HIG minimum touch target */
        padding: 12px 16px !important;
        -webkit-text-size-adjust: 100% !important;
    }

    /* When modal is open, allow smaller font for modal inputs */
    body[data-modal-open] .modal input,
    body[data-modal-open] .modal select,
    body[data-modal-open] .modal textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Full-screen modal on mobile (like native app) */
    .modal {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Prevent horizontal scrolling */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    .container,
    .car-card,
    .grid,
    .search-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Optimize image loading - show placeholder while loading */
    .car-image-slide {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        transition: opacity 0.3s ease !important;
    }

    .car-image-slide[data-bg-image] {
        opacity: 0.7;
    }

    .car-image-slide[data-loaded="true"] {
        opacity: 1;
    }

    /* Better touch targets for buttons */
    .btn,
    button,
    .carousel-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        touch-action: manipulation; /* Prevents double-tap zoom */
    }

    /* Optimize carousel controls for mobile */
    .carousel-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* Faster image rendering */
    .car-image-container {
        will-change: transform;
        transform: translateZ(0); /* GPU acceleration */
    }

    .car-image-slide {
        will-change: opacity;
        transform: translateZ(0); /* GPU acceleration */
    }

    /* Reduce layout shifts */
    .car-image-container {
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }

    /* Optimize modal scrolling */
    .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }

    /* Better spacing for mobile */
    .car-card {
        margin-bottom: 1rem !important;
    }

    .car-list {
        gap: 1rem !important;
    }
}

@media (min-width: 1440px) {
    header {
        padding: 0 2rem;
    }
}

/* Custom Select Dropdown */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 20;
}

.custom-select-field.form-input-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827 !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 3rem;
    min-height: 3rem;
    user-select: none;
}

.custom-select-field.form-input-field:hover {
    border-color: #9ca3af !important;
}

.custom-select-field.form-input-field:focus-within,
.custom-select-wrapper:has(.custom-dropdown-menu.active) .custom-select-field {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.custom-select-field.form-input-field.has-value .select-text {
    color: #111827 !important;
    font-weight: 500;
}

.custom-select-field.form-input-field .select-text {
    flex: 1;
    color: #9ca3af !important;
    text-align: left;
}

.custom-select-field.form-input-field .select-arrow {
    color: #6b7280;
    font-size: 1.25rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select-wrapper:has(.custom-dropdown-menu.active) .custom-select-field .select-arrow {
    transform: rotate(180deg);
}

/* Custom Select Dropdown */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    overflow: visible !important;
    z-index: 100;
}

/* Custom Dropdown Menu */
.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 10001 !important;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-top: 4px;
    pointer-events: none;
    width: 100%;
}

.custom-dropdown-menu.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto;
}

.dropdown-option {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background-color: #f9fafb;
}

.dropdown-option:active {
    background-color: #f3f4f6;
}

/* Dark mode support */
body.dark .custom-select-field.form-input-field {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

body.dark .custom-dropdown-menu {
    background: #ffffff;
    border-color: #d1d5db;
}

body.dark .dropdown-option {
    color: #111827;
    border-bottom-color: #f3f4f6;
}

body.dark .dropdown-option:hover {
    background-color: #f9fafb;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .custom-dropdown-menu {
        max-height: 200px;
        font-size: 0.8125rem;
    }

    .dropdown-option {
        padding: 0.625rem 0.875rem;
    }
}

/* ============================================
   NEW MODAL DESIGN - Modern & Responsive
   ============================================ */

/* Modal Content New - Base styles for Desktop */
.modal-content-new {
    background: #ffffff;
    width: auto;
    height: auto;
    max-width: 1200px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    margin: 0;
    padding: 0;
}

/* Prevent any child element from causing horizontal overflow */
.modal-content-new > * {
    max-width: 100%;
    box-sizing: border-box;
}

.modal-content-new .modal-body-new,
.modal-content-new .modal-header-new,
.modal-content-new .modal-left-column,
.modal-content-new .modal-right-column {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Exception: thumbnail gallery can scroll horizontally within its container */
.modal-content-new .modal-thumbnail-gallery {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

body.dark .modal-content-new {
    background: #1e293b;
}

/* Modal Header New */
.modal-header-new {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

body.dark .modal-header-new {
    background: #1e293b;
    border-bottom-color: #475569;
}

.close-modal-new {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.close-modal-new:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

body.dark .close-modal-new {
    color: #cbd5e1;
}

body.dark .close-modal-new:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

/* Modal Body New - Default (Desktop) */
.modal-body-new {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem;
    flex: 1;
}

/* Desktop: Two-column layout */
@media (min-width: 1024px) {
    .modal-body-new {
        grid-template-columns: 2fr 1fr;
        gap: 3rem;
        padding: 2rem 3rem;
    }
    
    .modal-content-new {
        width: auto;
        max-width: 1200px;
        height: auto;
        max-height: 90vh;
        border-radius: 1rem;
    }
    
    .booking-widget-new {
        position: sticky;
        top: 1.5rem;
    }
}

/* Breadcrumbs */
.modal-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: #137fec;
}

.breadcrumb-separator {
    color: #64748b;
}

.breadcrumb-current {
    color: #1e293b;
    font-weight: 500;
}

body.dark .breadcrumb-current {
    color: #f8fafc;
}

body.dark .breadcrumb-link {
    color: #94a3b8;
}

body.dark .breadcrumb-link:hover {
    color: #137fec;
}

body.dark .breadcrumb-separator {
    color: #94a3b8;
}

/* Gallery Section */
.modal-gallery-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.modal-main-image {
    width: 100%;
    max-width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
}

.main-image-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-thumbnail-gallery {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem;
    padding: 0.5rem 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.modal-thumbnail-gallery::-webkit-scrollbar {
    display: none;
}

.modal-thumbnail-item {
    flex: 0 0 auto;
    width: 160px;
    min-width: 160px;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: #ffffff;
}

.modal-thumbnail-item.active {
    border-color: #137fec;
}

.modal-thumbnail-item img,
.modal-thumbnail-item .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.dark .modal-thumbnail-item {
    background: #334155;
}

/* Title Section */
.modal-title-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modal-title-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.modal-title-group {
    flex: 1;
    min-width: 200px;
}

.modal-car-title {
    font-size: 1.875rem;
    font-weight: 900;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.033em;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .modal-car-title {
        font-size: 2.25rem;
    }
}

body.dark .modal-car-title {
    color: #f8fafc;
}

.modal-car-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
}

body.dark .modal-car-subtitle {
    color: #94a3b8;
}

.modal-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #1e293b;
}

body.dark .modal-rating {
    color: #f8fafc;
}

.rating-star-filled {
    color: #137fec;
    font-variation-settings: 'FILL' 1;
}

.rating-value {
    font-weight: 700;
    font-size: 1rem;
}

.rating-count {
    font-size: 0.875rem;
    color: #64748b;
}

body.dark .rating-count {
    color: #94a3b8;
}

/* Specifications Grid */
.modal-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #ffffff;
}

@media (min-width: 768px) {
    .modal-specs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

body.dark .modal-specs-grid {
    background: #1e293b;
    border-color: #475569;
}

.modal-spec-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spec-icon {
    font-size: 1.875rem;
    color: #137fec;
}

.spec-details {
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

body.dark .spec-label {
    color: #94a3b8;
}

.spec-value {
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
}

body.dark .spec-value {
    color: #e2e8f0;
}

/* Detailed Specifications */
.modal-detailed-specs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.specs-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

body.dark .specs-section-title {
    color: #f8fafc;
}

.specs-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .specs-detail-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        row-gap: 1rem;
    }
}

.specs-detail-grid p {
    margin: 0;
    color: #475569;
    font-size: 0.875rem;
}

body.dark .specs-detail-grid p {
    color: #cbd5e1;
}

.specs-detail-grid p .font-semibold {
    font-weight: 600;
    color: #1e293b;
}

body.dark .specs-detail-grid p .font-semibold {
    color: #e2e8f0;
}

/* Booking Widget */
.modal-right-column {
    position: relative;
}

.booking-widget-new {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

body.dark .booking-widget-new {
    background: #0f172a;
    border-color: #475569;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.booking-price-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.price-label {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1e293b;
    margin: 0;
}

body.dark .price-label {
    color: #e2e8f0;
}

.price-amount {
    font-size: 1.875rem;
    font-weight: 900;
    color: #1e293b;
    margin: 0;
}

body.dark .price-amount {
    color: #f8fafc;
}

.price-unit {
    font-size: 1rem;
    font-weight: 400;
    color: #64748b;
}

body.dark .price-unit {
    color: #94a3b8;
}

/* Booking Form */
.booking-form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.booking-form-group-new {
    display: flex;
    flex-direction: column;
}

.form-label-new {
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.25rem;
}

body.dark .form-label-new {
    color: #cbd5e1;
}

.form-input-new {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #f6f7f8;
    font-size: 1rem;
    color: #1e293b;
    transition: all 0.2s;
}

.form-input-new:focus {
    outline: none;
    border-color: #137fec;
    box-shadow: 0 0 0 2px rgba(19, 127, 236, 0.2);
}

body.dark .form-input-new {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

body.dark .form-input-new:focus {
    border-color: #137fec;
}

/* Cost Breakdown */
.cost-breakdown-new {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

body.dark .cost-breakdown-new {
    border-top-color: #475569;
    border-bottom-color: #475569;
}

.cost-row-new {
    display: flex;
    justify-content: space-between;
    color: #475569;
    font-size: 0.875rem;
}

body.dark .cost-row-new {
    color: #94a3b8;
}

/* Booking Total */
.booking-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
}

body.dark .total-label {
    color: #e2e8f0;
}

.total-amount {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1e293b;
}

body.dark .total-amount {
    color: #f8fafc;
}

/* Booking Button */
.btn-booking-primary {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    background: #137fec;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.015em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-booking-primary:hover {
    background: #0f6fd6;
}

.btn-booking-primary:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(19, 127, 236, 0.4);
}

/* Booking Provider */
.booking-provider {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #f6f7f8;
}

body.dark .booking-provider {
    background: #1e293b;
}

.provider-logo {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.provider-label {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 0.25rem 0;
}

body.dark .provider-label {
    color: #94a3b8;
}

.provider-name {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    font-size: 0.875rem;
}

body.dark .provider-name {
    color: #e2e8f0;
}

/* Tablet Only (640px - 1023px) - Centered Modal with Reduced Width */
@media (min-width: 640px) and (max-width: 1023px) {
    .modal {
        padding: 1.5rem !important;
    }
    
    .modal-content-new {
        width: 70vw !important;
        max-width: 650px !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 1rem !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    }
    
    .modal-body-new {
        grid-template-columns: 1fr !important;
        padding: 1.25rem !important;
        gap: 1.5rem !important;
    }
    
    .modal-header-new {
        padding: 0.875rem 1.25rem !important;
    }
    
    .modal-right-column {
        position: relative !important;
        top: 0 !important;
    }
    
    .booking-widget-new {
        position: relative !important;
        top: 0 !important;
        padding: 1.25rem !important;
        gap: 1.25rem !important;
    }
    
    .modal-specs-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0.875rem !important;
    }
    
    .modal-spec-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }
    
    .spec-icon {
        font-size: 1.5rem !important;
    }
    
    .spec-label {
        font-size: 0.75rem !important;
    }
    
    .spec-value {
        font-size: 0.875rem !important;
    }
    
    .modal-thumbnail-item {
        width: 120px !important;
        min-width: 120px !important;
    }
    
    .modal-car-title {
        font-size: 1.75rem !important;
    }
    
    .price-amount {
        font-size: 1.5rem !important;
    }
    
    .booking-price-header {
        gap: 0.5rem !important;
    }
    
    .cost-breakdown-new {
        padding: 0.75rem 0 !important;
    }
    
    .modal-detailed-specs {
        display: none !important;
    }
}

/* Mobile Only (< 640px) - Full Screen */
@media (max-width: 639px) {
    /* Prevent body scroll when modal is open - handled by JavaScript */
    body[data-modal-open] {
        overflow: hidden !important;
    }
    
    .modal {
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    
    .modal-content-new {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .modal-body-new {
        padding: 1rem;
        gap: 1.5rem;
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .modal-header-new {
        padding: 0.75rem 1rem;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .modal-car-title {
        font-size: 1.5rem;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .modal-specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .spec-icon {
        font-size: 1.5rem;
    }
    
    .booking-widget-new {
        padding: 1rem;
        gap: 1rem;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .price-amount {
        font-size: 1.5rem;
    }
    
    /* Gallery Section - Prevent horizontal overflow */
    .modal-gallery-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .modal-main-image {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .main-image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Thumbnail gallery - allow horizontal scroll within container only */
    .modal-thumbnail-gallery {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .modal-thumbnail-item {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        flex-shrink: 0 !important;
    }
    
    /* Breadcrumbs - prevent overflow */
    .modal-breadcrumbs {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }
    
    /* Title section - prevent overflow */
    .modal-title-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .modal-title-row {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .modal-title-group {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Detailed specs - prevent overflow */
    .modal-detailed-specs {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .specs-detail-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Booking form - prevent overflow */
    .booking-form-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .form-input-new {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Cost breakdown - prevent overflow */
    .cost-breakdown-new {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .cost-row-new {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}