@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ── Arapça: Cairo fontu + RTL ─────────────────────────────────────────────── */
:lang(ar),
:lang(ar) body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

/* Material Symbols ikonları Cairo ve RTL'den muaf — aksi hâlde ikonlar bozulur */
:lang(ar) .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    direction: ltr !important;
    unicode-bidi: embed;
}

/* hud-border: LTR'de sol kenarda çizgi, RTL'de sağ kenara geçmeli */
:lang(ar) .hud-border {
    border-left: none !important;
    border-right: 3px solid var(--primary-color, #02405A);
    padding-left: 0 !important;
    padding-right: 1rem;
}

/* hud-border-rtl: Arapça about sayfasında dir=rtl ile kullanım */
.hud-border-rtl {
    border-left: none !important;
    border-right: 3px solid #f05655;
    padding-left: 0 !important;
    padding-right: 1.5rem;
}

/* About sayfası hero gradient — dir=rtl durumu */
[dir="rtl"] .ab-hero-gradient {
    background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0.88) 55%, transparent 100%) !important;
}
[data-theme="dark"] [dir="rtl"] .ab-hero-gradient,
[dir="rtl"][data-theme="dark"] .ab-hero-gradient {
    background: linear-gradient(to left, #1c1f22 0%, rgba(28,31,34,0.92) 50%, transparent 100%) !important;
}

/* Servis / hizmet kartlarındaki sağ-ok ikonunu RTL için ters çevir */
:lang(ar) .material-symbols-outlined.icon-arrow-fwd,
:lang(ar) a .material-symbols-outlined {
    transform: scaleX(-1);
}

/* ml-1 (margin-left) ikonlar — RTL'de mr-1 olmalı */
:lang(ar) .material-symbols-outlined[style],
:lang(ar) span.material-symbols-outlined {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Araç kartlarındaki east/arrow ikonunu ters çevir */
:lang(ar) .group .material-symbols-outlined {
    transform: scaleX(-1);
}

/* İkon kutucukları (Neden Otovade kartları): sağa yaslanmış ikon — merkezde kal */
:lang(ar) .hud-border + div .size-14,
:lang(ar) .group .size-14 {
    margin-left: auto;
    margin-right: 0;
}

/* Section üst etiketleri (Farkımız, Çözümlerimiz vb.) RTL'de sağa yasla */
:lang(ar) .hud-border p,
:lang(ar) .hud-border h2 {
    text-align: right;
}

/* Tabs (Yeni Eklenenler / Popüler): RTL'de flex yönü tersine */
:lang(ar) .flex.gap-4.border-b {
    flex-direction: row-reverse;
}

/* Financman hesapla kutusu: rangel slider LTR kalmalı */
:lang(ar) input[type="range"] {
    direction: ltr;
}

/* Hero buton grubu RTL'de düzgün görünsün */
:lang(ar) .flex.flex-col.sm\:flex-row.justify-center {
    text-align: center;
}

/* Araç kartı fiyat + ok satırı */
:lang(ar) .flex.items-center.justify-between .material-symbols-outlined {
    transform: scaleX(-1);
}




:root {

    /* Colors */

    --primary-color: #02405A;

    --secondary-color: #F05655;



    /* Light Mode Defaults */

    --bg-color: #FAFAFA;

    --text-color: #1E1F21;

    --header-bg: rgba(255, 255, 255, 0.8);

    --border-color: rgba(0, 0, 0, 0.1);

    --glass-border: rgba(255, 255, 255, 0.2);

    --nav-link-color: #1E1F21;

    --nav-link-hover: #02405A;



    /* Spacing */

    --container-width: 1440px;

    --container-padding: 1.5rem;

}



[data-theme="dark"] {

    --bg-color: #1E2226;

    /* Lighter than #121416 */

    --text-color: #FFFFFF;

    --header-bg: rgba(30, 34, 38, 0.8);

    --border-color: rgba(255, 255, 255, 0.1);

    --glass-border: rgba(255, 255, 255, 0.05);

    --nav-link-color: #E5E7EB;

    --nav-link-hover: #F05655;

    /* Use secondary for hover in dark? or Primary? */

}



/* ══════════════════════════════════════════════

   Global Dark Mode — Blog / FAQ / About card overrides

   Position-based selectors work regardless of Tailwind classes on elements

   ══════════════════════════════════════════════ */



/* ── Blog: Page-level headings & text ── */

[data-theme="dark"] .blog-page h1,

[data-theme="dark"] .blog-title {

    color: #ffffff !important;

}



[data-theme="dark"] .blog-page>.pt-32>div>p,

[data-theme="dark"] .blog-subtitle {

    color: #94a3b8 !important;

}



/* ── Blog: Article cards (works with both old bg-white & new blog-card) ── */

[data-theme="dark"] .blog-page article,

[data-theme="dark"] .blog-card,

[data-theme="dark"] .blog-card .blog-card-body {

    background-color: #252a2f !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



/* ── Blog: Card inner text (both old text-* classes and new custom classes) ── */

[data-theme="dark"] .blog-page article h2,

[data-theme="dark"] .blog-page article h2 a,

[data-theme="dark"] .blog-card-title,

[data-theme="dark"] .blog-card-title a,

[data-theme="dark"] .blog-post-title {

    color: #ffffff !important;

}



/* Hover title */

[data-theme="dark"] .blog-page article:hover h2,

[data-theme="dark"] .blog-page article:hover h2 a,

[data-theme="dark"] .blog-card:hover .blog-card-title,

[data-theme="dark"] .blog-card:hover .blog-card-title a {

    color: #F05655 !important;

}



/* Excerpt & date */

[data-theme="dark"] .blog-page article p,

[data-theme="dark"] .blog-page article span.text-xs,

[data-theme="dark"] .blog-card-excerpt,

[data-theme="dark"] .blog-card-date {

    color: #94a3b8 !important;

}



/* "Devamını Oku" CTA */

[data-theme="dark"] .blog-page article a.mt-auto,

[data-theme="dark"] .blog-card-cta {

    color: #F05655 !important;

}



/* Category badge on card thumbnail */

[data-theme="dark"] .blog-page article .absolute.top-4 {

    background-color: rgba(28, 31, 34, 0.85) !important;

    color: #ffffff !important;

}



[data-theme="dark"] .blog-cat-badge {

    background-color: rgba(28, 31, 34, 0.85) !important;

    color: #ffffff !important;

}



/* ── Single Post ── */

[data-theme="dark"] .blog-article {

    background-color: #252a2f !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



/* ── FAQ cards ── */

[data-theme="dark"] .faq-card {

    background-color: #252a2f !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



/* ── About cards ── */

[data-theme="dark"] .ab-card {

    background-color: #252a2f !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: 'Montserrat', sans-serif;

    margin: 0;

    padding: 0;

    transition: background-color 0.3s ease, color 0.3s ease;

    overflow-x: hidden;

}



/* Utilities */

.container {

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding);

}



.flex {

    display: flex;

}



.items-center {

    align-items: center;

}



.justify-between {

    justify-content: space-between;

}



.gap-4 {

    gap: 1rem;

}



.hidden {

    display: none;

}



/* Header */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 1rem 1.5rem;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    background-color: var(--header-bg);

    border-bottom: 1px solid var(--border-color);

    transition: all 0.3s ease;

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.site-branding {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.site-logo {

    display: block;

    width: auto;

    transition: opacity 0.3s ease;

}



.logo-link {

    text-decoration: none;

    display: flex;

    align-items: center;

}



/* Logo Switching Logic */

.logo-light {

    display: block;

}



.logo-dark {

    display: none;

}



[data-theme="dark"] .logo-light {

    display: none;

}



[data-theme="dark"] .logo-dark {

    display: block;

}





.site-title {

    font-size: 1.25rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin: 0;

    color: var(--primary-color);

}



[data-theme="dark"] .site-title {

    color: #fff;

}



/* Navigation */

.main-navigation ul {

    display: flex;

    gap: 2rem;

    list-style: none;

    margin: 0;

    padding: 0;

}



.main-navigation a {

    text-decoration: none;

    color: var(--nav-link-color);

    font-weight: 500;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    transition: color 0.2s;

}



.main-navigation a:hover {

    color: var(--primary-color);

}



[data-theme="dark"] .main-navigation a:hover {

    color: var(--secondary-color);

}



/* Header Actions */

.header-actions {

    display: flex;

    align-items: center;

    gap: 1rem;

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.6rem 1.5rem;

    border-radius: 0.5rem;

    font-weight: 600;

    font-size: 0.875rem;

    text-decoration: none;

    letter-spacing: 0.05em;

    transition: all 0.2s;

    cursor: pointer;

}



/* Primary Solid */

.btn-solid-primary {

    background-color: var(--primary-color);

    color: white;

    border: 1px solid var(--primary-color);

}



.btn-solid-primary:hover {

    background-color: #012d40;

    /* Darker primary */

    border-color: #012d40;

}



/* Secondary Solid */

.btn-solid-secondary {

    background-color: var(--secondary-color);

    color: white;

    border: 1px solid var(--secondary-color);

}



.btn-solid-secondary:hover {

    background-color: #d63e3d;

    /* Darker secondary */

    border-color: #d63e3d;

}



/* Primary Outline */

.btn-outline-primary {

    background-color: transparent;

    color: var(--primary-color);

    border: 1px solid var(--primary-color);

}



[data-theme="dark"] .btn-outline-primary {

    color: white;

    border-color: rgba(255, 255, 255, 0.3);

}



.btn-outline-primary:hover {

    background-color: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

}



/* Secondary Outline */

.btn-outline-secondary {

    background-color: transparent;

    color: var(--secondary-color);

    border: 1px solid var(--secondary-color);

}



[data-theme="dark"] .btn-outline-secondary {

    color: white;

    /* Optional: keep secondary color or white in dark mode? Usually accent color pops well in dark too. Let's keep accent. */

    border-color: var(--secondary-color);

}



.btn-outline-secondary:hover {

    background-color: var(--secondary-color);

    color: white;

    border-color: var(--secondary-color);

}



/* Theme Toggle Button */

.theme-toggle {

    background: transparent;

    border: none;

    color: var(--nav-link-color);

    cursor: pointer;

    padding: 0.5rem;

    border-radius: 50%;

    transition: background 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.theme-toggle:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .theme-toggle:hover {

    background-color: rgba(255, 255, 255, 0.1);

}



.material-symbols-outlined {

    font-size: 24px;

}



/* Material Icons Helper */

.icon-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem;

    border-radius: 0.5rem;

    color: var(--nav-link-color);

    background: transparent;

    border: none;

    cursor: pointer;

    transition: background 0.2s;

}



.icon-btn:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .icon-btn:hover {

    background-color: rgba(255, 255, 255, 0.1);

}



/* Mobile Menu Trigger - to be implemented */

.menu-toggle {

    display: none;

}



@media (max-width: 992px) {

    .main-navigation {

        display: none;

        /* Add mobile menu logic later */

    }



    .menu-toggle {

        display: block;

    }

}



/* Hero Section Styles */

.hero-section {

    position: relative;

    height: 100vh;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    margin-top: -80px;

    /* Offset fixed header */

}



/* Background */

.hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.hero-bg-image {

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    /* Gradient from bottom to top, transparent to dark/light depending on theme? 

       Design had: from-background-dark/40 via-background-dark/20 to-background-dark

       Let's use a generic gradient that adapts via vars if possible, or just dark overlay for contrast on images

    */

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(18, 20, 22, 0.2), #121416);

}



[data-theme="light"] .hero-overlay {

    /* Different overlay for light mode if needed, but usually hero images look best with dark overlay + white text */

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1), transparent);

}



/* Content */

.hero-content {

    position: relative;

    z-index: 10;

    text-align: center;

    width: 100%;

    max-width: 1152px;

    /* ~6xl */

    padding-top: 80px;

}



.hero-title {

    font-size: 3rem;

    line-height: 1;

    font-weight: 700;

    /* text-transform: uppercase; Removed as requested */

    letter-spacing: -0.05em;

    margin-bottom: 2rem;

    color: var(--text-color);

    /* Adapt to theme */

    position: relative;

    z-index: 20;

}



@media (min-width: 768px) {

    .hero-title {

        font-size: 6rem;

        /* 8xl approx */

    }

}



.text-primary {

    color: var(--primary-color);

}



.text-secondary {

    color: var(--secondary-color);

}



.italic {

    font-style: italic;

}



/* Search Box */

.hero-search-wrapper {

    max-width: 42rem;

    /* 2xl */

    margin: 0 auto;

    background: rgba(18, 20, 22, 0.6);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 0.5rem;

    border-radius: 0.75rem;

    transition: transform 0.3s;

}



[data-theme="light"] .hero-search-wrapper {

    background: rgba(255, 255, 255, 0.8);

    border: 1px solid rgba(0, 0, 0, 0.1);

}



.hero-search-inner {

    display: flex;

    align-items: center;

    width: 100%;

}



.search-icon {

    padding-left: 1rem;

    display: flex;

    align-items: center;

}



.hero-search-input {

    width: 100%;

    background: transparent;

    border: none;

    outline: none;

    color: #fff;

    padding: 1rem;

    font-size: 1.125rem;

    font-weight: 300;

    font-family: 'Montserrat', sans-serif;

}



[data-theme="light"] .hero-search-input {

    color: #1E1F21;

}



.hero-search-input::placeholder {

    color: rgba(255, 255, 255, 0.6);

}



[data-theme="light"] .hero-search-input::placeholder {

    color: rgba(0, 0, 0, 0.5);

}



.hero-search-submit {

    background-color: var(--primary-color);

    border: none;

    color: white;

    padding: 0.75rem;

    border-radius: 0.5rem;

    margin-right: 0.25rem;

    cursor: pointer;

    transition: transform 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-search-submit:hover {

    transform: scale(1.05);

}



/* Stats */

.hero-stats {

    margin-top: 3rem;

    display: flex;

    justify-content: center;

    gap: 3rem;

    color: var(--secondary-color);

    /* Dark mode default (Secondary) */

    font-size: 0.875rem;

    font-weight: 700;

    /* Increased weight */

    text-transform: uppercase;

    letter-spacing: 0.2em;

}



[data-theme="light"] .hero-stats {

    color: var(--primary-color);

    /* Light mode override (Primary) */

}



.stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.stat-value {

    color: var(--secondary-color);

    /* Dark mode default */

    font-size: 1.5rem;

    margin-bottom: 0.25rem;

    font-weight: 700;

}



[data-theme="light"] .stat-value {

    color: var(--primary-color);

    /* Light mode override */

}



.stat-divider {

    width: 1px;

    height: 3rem;

    background-color: var(--secondary-color);

    /* Dark mode default */

    opacity: 0.5;

}



[data-theme="light"] .stat-divider {

    background-color: var(--primary-color);

    /* Light mode override */

}



/* Featured Cars Section */

.featured-section {

    padding: 5rem 0;

    position: relative;

    z-index: 10;

    background-color: var(--bg-color);

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 3rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

}



.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin: 0;

    line-height: 1.1;

    color: var(--text-color);

}



.section-subtitle {

    display: block;

    font-size: 0.875rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color: var(--secondary-color);

    margin-bottom: 0.5rem;

    font-weight: 600;

}



/* Bento Grid Layout */

.bento-grid {

    display: grid;

    grid-template-columns: repeat(1, 1fr);

    gap: 1.5rem;

}



@media (min-width: 768px) {

    .bento-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (min-width: 1024px) {

    .bento-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Card Styles */

.car-card {

    position: relative;

    background-color: #1c1f22;

    /* Fallback/Base */

    border-radius: 1.5rem;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

    height: 100%;

    min-height: 400px;

}



[data-theme="light"] .car-card {

    background-color: #ffffff;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    border: 1px solid rgba(0, 0, 0, 0.05);

}



.car-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}



.card-image-wrapper {

    height: 240px;

    overflow: hidden;

    position: relative;

}



.card-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;

}



.car-card:hover .card-image {

    transform: scale(1.05);

}



.card-badge {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: rgba(18, 20, 22, 0.6);

    backdrop-filter: blur(8px);

    color: white;

    padding: 0.25rem 0.75rem;

    border-radius: 9999px;

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    z-index: 10;

}



[data-theme="light"] .card-badge {

    background: rgba(255, 255, 255, 0.8);

    color: var(--text-color);

}



/* Glass Content Area */

.glass-card-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 1.5rem;

    background: rgba(39, 64, 69, 0.2);

    /* Dark mode tint matching example */

    backdrop-filter: blur(12px);

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



[data-theme="light"] .glass-card-content {

    background: rgba(255, 255, 255, 0.7);

    border-top: 1px solid rgba(0, 0, 0, 0.05);

}



.car-title {

    font-size: 1.25rem;

    font-weight: 700;

    margin: 0 0 0.5rem 0;

    color: #fff;

}



[data-theme="light"] .car-title {

    color: var(--text-color);

}



.car-meta {

    font-size: 0.875rem;

    color: #94a3b8;

    /* Slate-400 equivalent */

    margin-bottom: 1.5rem;

}



[data-theme="light"] .car-meta {

    color: #64748b;

    /* Slate-500 */

}



.card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

}



.car-price {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--secondary-color);

    /* Using secondary to pop */

}



.btn-detail {

    font-size: 0.75rem;

    font-weight: 700;

    padding: 0.4rem 0.8rem;

    border-radius: 0.25rem;

    background: rgba(255, 255, 255, 0.05);

    color: #fff;

    text-transform: uppercase;

    transition: background 0.2s;

    text-decoration: none;

}



[data-theme="light"] .btn-detail {

    background: rgba(0, 0, 0, 0.05);

    color: var(--text-color);

}



.btn-detail:hover {

    background: rgba(255, 255, 255, 0.1);

}



[data-theme="light"] .btn-detail:hover {

    background: rgba(0, 0, 0, 0.1);

}



/* Material Symbol in card */

.add-icon {

    font-size: 1.5rem;

    color: #64748b;

    cursor: pointer;

    transition: color 0.2s;

}



/* Cars Inventory Page Layout */

.cars-page-container {

    display: flex;

    align-items: flex-start;

    /* key: lets sticky work */

    width: 100%;

    padding-top: 80px;

    /* Offset fixed header */

}



/* Sidebar Styles */

.cars-sidebar {

    width: 320px;

    flex-shrink: 0;

    background-color: var(--bg-color);

    border-right: 1px solid var(--border-color);

    padding: 2rem;

    /* STICKY: sticks while scrolling, stops before footer */

    position: sticky;

    top: 80px;

    max-height: calc(100vh - 80px);

    overflow-y: auto;

    scrollbar-gutter: stable;

    align-self: flex-start;

}



[data-theme="dark"] .cars-sidebar {

    background-color: #121416;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

}



/* -----------------------------------------------

   MOBILE OFF-CANVAS DRAWER

----------------------------------------------- */



/* Mobile filter toggle button (hidden on desktop) */

.mobile-filter-btn {

    display: none;

    position: fixed;

    bottom: 1.5rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 200;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.75rem;

    background: var(--primary-color);

    color: #fff;

    border: none;

    border-radius: 9999px;

    font-size: 0.9rem;

    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition: transform 0.2s, box-shadow 0.2s;

}



.mobile-filter-btn:hover {

    transform: translateX(-50%) translateY(-2px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);

}



/* Backdrop overlay */

.drawer-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    z-index: 300;

    backdrop-filter: blur(4px);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.drawer-overlay.is-open {

    display: block;

    opacity: 1;

}



/* Off-canvas sidebar panel */

.cars-sidebar.drawer-open,

.cars-sidebar.is-drawer {

    /* Drawer mode overrides on mobile — see media query */

}



/* Scrollbar for sidebar */

.cars-sidebar::-webkit-scrollbar {

    width: 4px;

}



.cars-sidebar::-webkit-scrollbar-thumb {

    background: var(--primary-color);

    border-radius: 10px;

}



.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 2rem;

}



.sidebar-title {

    font-size: 1.125rem;

    font-weight: 700;

    margin: 0;

    color: var(--text-color);

}



.sidebar-subtitle {

    font-size: 0.75rem;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-top: 0.25rem;

}



/* Refined Sidebar Styles */



/* Reset Button */

.btn-reset {

    font-size: 0.75rem;

    font-weight: 700;

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    background-color: transparent;

    color: var(--text-color);

    border: 1px solid var(--border-color);

    cursor: pointer;

    transition: all 0.2s;

    text-transform: uppercase;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}



[data-theme="dark"] .btn-reset {

    border-color: rgba(255, 255, 255, 0.2);

}



.btn-reset:hover {

    background-color: var(--primary-color);

    color: #ffffff;

    border-color: var(--primary-color);

}



/* Dual Range Slider Styles */

.price-slider-wrapper {

    position: relative;

    width: 100%;

    margin-top: 1.5rem;

    margin-bottom: 2.5rem;

    /* Ensure height for handles */

    height: 50px;

}



.slider-values {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.5rem;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--primary-color);

}



[data-theme="dark"] .slider-values {

    color: #ffffff;

}



.slider-container {

    position: relative;

    height: 6px;

    width: 100%;

}



.slider-track {

    position: absolute;

    top: 50%;

    /* Center vertically */

    left: 0;

    transform: translateY(-50%);

    height: 4px;

    /* Slightly thinner track looks more modern */

    width: 100%;

    background-color: #e2e8f0;

    border-radius: 999px;

    z-index: 1;

}



[data-theme="dark"] .slider-track {

    background-color: rgba(255, 255, 255, 0.1);

}



.slider-track-active {

    position: absolute;

    top: 50%;

    /* Center vertically to match track */

    transform: translateY(-50%);

    height: 4px;

    background-color: var(--primary-color);

    border-radius: 999px;

    z-index: 2;

}



.range-input {

    position: absolute;

    width: 100%;

    height: 5px;

    /* Input height doesn't matter much as it is invisible */

    top: 50%;

    transform: translateY(-50%);

    /* Center the input area vertically */

    background: none;

    pointer-events: none;

    -webkit-appearance: none;

    appearance: none;

    z-index: 3;

    margin: 0;

}



.range-input::-webkit-slider-thumb {

    height: 20px;

    width: 20px;

    border-radius: 50%;

    background: #ffffff;

    border: 4px solid var(--primary-color);

    pointer-events: auto;

    -webkit-appearance: none;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    margin-top: 2px;

    /* Slight adjustment might be needed depending on browser rendering */

}



.range-input::-moz-range-thumb {

    height: 20px;

    width: 20px;

    border: none;

    border-radius: 50%;

    background: #ffffff;

    border: 4px solid var(--primary-color);

    pointer-events: auto;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



/* Inputs wrapper for values */

.price-inputs-hidden {

    display: none;

}



/* Filter Groups */

.filter-group {

    margin-bottom: 2.5rem;

}



.filter-label {

    font-size: 0.75rem;

    font-weight: 600;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 1rem;

}



.filter-options {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



/* Brand Filter Option Style (Luxe Auto Style) */

.filter-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.75rem 1rem;

    border-radius: 0.5rem;

    background-color: rgba(255, 255, 255, 0.5);

    cursor: pointer;

    transition: all 0.2s;

    color: var(--text-color);

    border: 1px solid transparent;

}



[data-theme="dark"] .filter-option {

    background-color: #1c1f22;

    /* Graphite */

}



.filter-option:hover {

    background-color: rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .filter-option:hover {

    background-color: rgba(255, 255, 255, 0.05);

}



/* Checked State for Option */

.filter-option input:checked+.option-content {

    color: white;

}



/* We need to target the parent label based on input checked status - CSS :has is great here */

.filter-option:has(input:checked) {

    background-color: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

}



.filter-option input[type="checkbox"] {

    display: none;

    /* Hide default checkbox */

}



.option-text {

    font-size: 0.875rem;

    font-weight: 500;

}



.check-icon {

    font-size: 1.25rem;

    opacity: 0;

    transform: scale(0.5);

    transition: all 0.2s;

}



.filter-option:has(input:checked) .check-icon {

    opacity: 1;

    transform: scale(1);

}



/* Price Range Slider Style Mockup */

.price-inputs {

    background: #1c1f22;

    padding: 1rem;

    border-radius: 0.75rem;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



[data-theme="light"] .price-inputs {

    background: #fff;

    border: 1px solid var(--border-color);

}



.price-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

}



.price-input {

    width: 100%;

    background: transparent;

    border: none;

    border-bottom: 1px solid var(--border-color);

    padding: 0.5rem 0;

    font-size: 0.875rem;

    color: var(--text-color);

    outline: none;

    text-align: center;

    font-weight: 600;

}



[data-theme="dark"] .price-input {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.price-input:focus {

    border-color: var(--primary-color);

    color: var(--primary-color);

}



/* Color Swatches */

.color-options {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.color-option-label {

    cursor: pointer;

    position: relative;

}



.color-swatch {

    width: 1.5rem;

    height: 1.5rem;

    border-radius: 50%;

    display: block;

    border: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;

    transition: all 0.2s;

}



[data-theme="light"] .color-swatch {

    border: 1px solid rgba(0, 0, 0, 0.1);

}



.color-option-label input:checked+.color-swatch {

    transform: scale(1.1);

    box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--primary-color);

}



.color-name {

    display: none;

    /* Tooltip logic could be added */

}



/* Main Content Area */

.cars-main-content {

    flex: 1;

    /* No margin-left needed — sticky sidebar is in the flex flow naturally */

    padding: 2rem;

    min-width: 0;

    /* Prevents flex overflow on small cards */

}



@media (max-width: 1200px) {



    /* On tablet/mobile: sidebar becomes an off-canvas drawer */

    .cars-sidebar {

        position: fixed;

        top: 0;

        left: -340px;

        /* hidden off-screen */

        bottom: 0;

        width: 300px;

        max-height: 100vh;

        z-index: 400;

        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);

        border-right: none;

        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);

        overflow-y: auto;

        padding-top: 1.5rem;

    }



    .cars-sidebar.is-open {

        left: 0;

    }



    .cars-main-content {

        margin-left: 0;

        padding-bottom: 5rem;

        /* space for floating filter button */

    }



    .mobile-filter-btn {

        display: flex;

    }

}



.w-full {

    width: 100%;

}



/* Home Page (A-I Sections) */

.home-main .home-section {

    padding: 5rem 0;

}



.home-main .section-head {

    margin-bottom: 2rem;

}



.home-main .section-title {

    margin: 0;

}



.home-hero .hero-content {

    text-align: left;

    max-width: 920px;

}



.home-hero .hero-title {

    max-width: 860px;

    margin-bottom: 1rem;

}



.hero-subtitle {

    font-size: 1.125rem;

    line-height: 1.7;

    max-width: 680px;

    color: rgba(255, 255, 255, 0.9);

    margin: 0 0 2rem;

}



[data-theme="light"] .hero-subtitle {

    color: rgba(18, 24, 28, 0.9);

}



.hero-cta-row {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.hero-cta-row .hero-cta {

    min-width: 180px;

}



.quick-finder-section {

    margin-top: -40px;

    position: relative;

    z-index: 40;

}



.quick-finder-grid {

    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 1rem;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 1rem;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

    padding: 1.25rem;

}



[data-theme="dark"] .quick-finder-grid {

    background: rgba(28, 31, 34, 0.95);

    border-color: rgba(255, 255, 255, 0.08);

}



.finder-field {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.finder-field label {

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: #7c8d9c;

    font-weight: 600;

}



.finder-field select,

.finder-field input {

    height: 44px;

    border-radius: 0.5rem;

    border: 1px solid var(--border-color);

    background: transparent;

    color: var(--text-color);

    font-family: inherit;

    font-size: 0.95rem;

    padding: 0 0.75rem;

}



[data-theme="dark"] .finder-field select,

[data-theme="dark"] .finder-field input {

    border-color: rgba(255, 255, 255, 0.12);

}



.finder-submit-wrap {

    grid-column: span 6;

    display: flex;

    justify-content: flex-end;

    align-items: end;

}



.why-grid,

.service-grid,

.review-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

}



.why-card,

.service-tile,

.review-card {

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-radius: 0.9rem;

    padding: 1.25rem;

}



[data-theme="dark"] .why-card,

[data-theme="dark"] .service-tile,

[data-theme="dark"] .review-card {

    background: rgba(28, 31, 34, 0.9);

    border-color: rgba(255, 255, 255, 0.08);

}



.why-card h3,

.service-tile h3,

.step-item h3 {

    margin: 0 0 0.5rem;

    font-size: 1.05rem;

}



.why-card p,

.service-tile p,

.step-item p,

.review-comment {

    margin: 0;

    font-size: 0.94rem;

    line-height: 1.65;

    color: #64748b;

}



[data-theme="dark"] .why-card p,

[data-theme="dark"] .service-tile p,

[data-theme="dark"] .step-item p,

[data-theme="dark"] .review-comment {

    color: #a0afbc;

}



.steps-grid {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

}



.step-item {

    padding: 1.2rem;

    border-radius: 0.9rem;

    border: 1px dashed rgba(2, 64, 90, 0.35);

    background: rgba(2, 64, 90, 0.03);

}



[data-theme="dark"] .step-item {

    border-color: rgba(240, 86, 85, 0.35);

    background: rgba(240, 86, 85, 0.05);

}



.step-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 9999px;

    background: var(--primary-color);

    color: #fff;

    font-weight: 700;

    margin-bottom: 0.8rem;

}



[data-theme="dark"] .step-number {

    background: var(--secondary-color);

}



.service-tile {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 220px;

}



.service-tile-action {

    margin-top: 1rem;

}



.featured-home .featured-tabs {

    display: inline-flex;

    gap: 0.5rem;

    padding: 0.3rem;

    border-radius: 9999px;

    background: rgba(2, 64, 90, 0.07);

    margin-bottom: 1.5rem;

}



[data-theme="dark"] .featured-home .featured-tabs {

    background: rgba(240, 86, 85, 0.1);

}



.featured-tab {

    border: none;

    padding: 0.55rem 1rem;

    border-radius: 9999px;

    background: transparent;

    cursor: pointer;

    color: var(--text-color);

    font-weight: 600;

}



.featured-tab.is-active {

    background: var(--primary-color);

    color: #fff;

}



[data-theme="dark"] .featured-tab.is-active {

    background: var(--secondary-color);

}



.featured-panel {

    display: none;

}



.featured-panel.is-active {

    display: block;

}



.review-stars {

    margin-bottom: 0.75rem;

    font-size: 1.1rem;

    color: #ced6dd;

}



.review-stars .is-filled {

    color: #f59e0b;

}



.review-name {

    margin: 0.85rem 0 0;

    font-size: 0.85rem;

    font-weight: 700;

}



.faq-list {

    display: grid;

    gap: 0.75rem;

}



.faq-item {

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(0, 0, 0, 0.05);

    border-radius: 0.75rem;

    padding: 0.9rem 1rem;

}



[data-theme="dark"] .faq-item {

    background: rgba(28, 31, 34, 0.9);

    border-color: rgba(255, 255, 255, 0.08);

}



.faq-item summary {

    cursor: pointer;

    font-weight: 600;

}



.faq-item p {

    margin: 0.8rem 0 0;

    color: #64748b;

    line-height: 1.65;

}



[data-theme="dark"] .faq-item p {

    color: #a0afbc;

}



.faq-footer {

    margin-top: 1.2rem;

}



.bottom-cta-box {

    border-radius: 1rem;

    padding: 2rem;

    background: linear-gradient(120deg, rgba(2, 64, 90, 0.95) 0%, rgba(4, 89, 118, 0.95) 100%);

    color: #fff;

    text-align: center;

}



.bottom-cta-box h2 {

    margin: 0;

    font-size: 2rem;

}



.bottom-cta-box p {

    max-width: 700px;

    margin: 0.75rem auto 1.4rem;

    line-height: 1.7;

}



.bottom-cta-box .bottom-cta-btn.btn-outline-primary,

.bottom-cta-box .bottom-cta-btn.btn-outline-secondary {

    border-color: rgba(255, 255, 255, 0.8);

    color: #fff;

}



.bottom-cta-box .bottom-cta-btn.btn-outline-primary:hover,

.bottom-cta-box .bottom-cta-btn.btn-outline-secondary:hover {

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

}



@media (max-width: 1200px) {

    .quick-finder-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }



    .finder-submit-wrap {

        grid-column: span 3;

    }

}



@media (max-width: 992px) {



    .why-grid,

    .service-grid,

    .review-grid,

    .steps-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .home-hero .hero-title {

        font-size: 3.1rem;

        line-height: 1.1;

    }

}



@media (max-width: 640px) {

    .home-main .home-section {

        padding: 3.2rem 0;

    }



    .hero-cta-row .hero-cta {

        width: 100%;

    }



    .quick-finder-section {

        margin-top: 0;

    }



    .quick-finder-grid {

        grid-template-columns: 1fr;

        padding: 1rem;

    }



    .finder-submit-wrap {

        grid-column: span 1;

    }



    .why-grid,

    .service-grid,

    .review-grid,

    .steps-grid {

        grid-template-columns: 1fr;

    }



    .bottom-cta-box h2 {

        font-size: 1.4rem;

    }

}



/* Premium Hero + Home Refinements */

.home-hero .hero-bg-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.45));

}



[data-theme="dark"] .home-hero .hero-bg-image::after {

    background: linear-gradient(to bottom, rgba(10, 15, 20, 0.2), rgba(7, 10, 14, 0.4), rgba(5, 8, 12, 0.75));

}



.home-hero .hero-content {

    text-align: center;

}



.hero-premium-shell {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    width: min(960px, 100%);

    padding: 1.2rem;

    border-radius: 1rem;

}



.home-hero .hero-title {

    text-transform: uppercase;

    letter-spacing: -0.03em;

    margin-bottom: 0.8rem;

    color: #101418;

}



[data-theme="dark"] .home-hero .hero-title {

    color: #eef4f7;

}



.hero-subtitle {

    margin: 0 auto 1.5rem;

    max-width: 760px;

    font-size: 1.08rem;

    color: rgba(16, 20, 24, 0.82);

}



[data-theme="dark"] .hero-subtitle {

    color: rgba(234, 241, 245, 0.86);

}



.hero-cta-row {

    justify-content: center;

}



.hero-cta-row .hero-cta {

    border-radius: 0.75rem;

    min-height: 44px;

    font-weight: 700;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

}



.hero-trust-row {

    margin-top: 1.25rem;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.75rem;

    width: 100%;

    max-width: 760px;

}



.hero-trust-item {

    background: rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 0.75rem;

    padding: 0.75rem 0.9rem;

    text-align: center;

}



[data-theme="dark"] .hero-trust-item {

    background: rgba(20, 25, 30, 0.72);

    border-color: rgba(255, 255, 255, 0.1);

}



.hero-trust-item strong {

    display: block;

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.09em;

    margin-bottom: 0.2rem;

}



.hero-trust-item span {

    font-size: 0.8rem;

    color: #4e5e6d;

}



[data-theme="dark"] .hero-trust-item span {

    color: #aab8c4;

}



.home-main .section-head .section-title {

    font-size: clamp(1.8rem, 4vw, 2.8rem);

    letter-spacing: -0.02em;

}



.quick-finder-grid {

    border-radius: 1rem;

    box-shadow: 0 18px 40px rgba(12, 18, 24, 0.08);

}



.why-card,

.service-tile,

.review-card,

.faq-item {

    box-shadow: 0 10px 28px rgba(17, 24, 32, 0.05);

}



.service-tile:hover,

.why-card:hover,

.review-card:hover {

    transform: translateY(-2px);

    transition: transform 0.25s ease;

}



.bottom-cta-box {

    box-shadow: 0 24px 48px rgba(2, 64, 90, 0.28);

}



@media (max-width: 992px) {

    .hero-trust-row {

        grid-template-columns: 1fr;

    }

}