/* ============================================================
   SAUDI AUTOS — Browse Cars Page
   Prefix: cars-   |   File: public/frontend/css/browseCars.css
   Design System: Asymmetric Curve-Flip · Saudi Green · Elite
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    /* Saudi Green */
    --g:      #006C35;
    --g1:     #007A3D;
    --g2:     #00934A;
    --g3:     #00B85C;
    --g-dim:  #004d25;
    --g-deep: #003320;

    /* Glows */
    --g-glow:   rgba(0,108,53,.42);
    --g-glow-s: rgba(0,108,53,.20);
    --g-12:     rgba(0,108,53,.12);
    --g-08:     rgba(0,108,53,.08);
    --g-04:     rgba(0,108,53,.04);

    /* Neutrals */
    --white:  #FFFFFF;
    --fog:    #F2F6F3;
    --fog2:   #E6EDE9;
    --fog3:   #D4DDD7;
    --ink:    #0B0F0C;
    --ink2:   #1A1F1C;
    --muted:  #6B7C72;

    /* Typography */
    --ff: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fm: 'DM Mono', 'SF Mono', monospace;

    /* Radius */
    --r1: 6px;
    --r2: 10px;
    --r3: 16px;
    --r4: 22px;
    --r5: 30px;
    --rf: 9999px;

    /* Timing */
    --ease:   cubic-bezier(.4,0,.2,1);
    --snap:   cubic-bezier(.22,1,.36,1);
    --spring: cubic-bezier(.34,1.56,.64,1);
    --t1: 120ms;
    --t2: 200ms;
    --t3: 320ms;
    --t4: 480ms;
}

/* ── Base ───────────────────────────────────────────────── */
.cars-page-wrapper {
    position: relative;
    min-height: 100vh;
    background: var(--fog);
    color: var(--ink);
    font-family: var(--ff);
    overflow-x: hidden;
}


/* ── Gradient overlay ───────────────────────────────────── */
.cars-gradient-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 25% 45%, var(--g-04), transparent),
        radial-gradient(circle at 75% 85%, rgba(0,147,74,.03), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── Container ──────────────────────────────────────────── */
.cars-container {
    position: relative;
    z-index: 2;
    padding-inline: clamp(16px, 4vw, 48px);
    max-width: 1600px;
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.cars-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80vh;
    padding: 100px 0 80px;
    z-index: 3;
}

.cars-hero-background-accent {
    position: absolute;
    top: 15%; left: -15%;
    width: 70%; height: 70%;
    background: radial-gradient(circle, var(--g-08), transparent);
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    animation: cars-pulse 8s ease-in-out infinite;
}

.cars-hero-content {
    flex: 1;
    max-width: 700px;
}

.cars-title-container { position: relative; margin-bottom: 40px; }

.cars-hero-title {
    font-size: clamp(2.4rem, 5vw + 1rem, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 24px;
}

.cars-title-word {
    display: inline-block;
    color: var(--ink);
    margin-inline-end: 18px;
}

.cars-title-highlight {
    display: inline-block;
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cars-title-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--g), var(--g3));
    border-radius: var(--rf);
    margin: 12px 0;
}

.cars-hero-subtitle {
    font-size: clamp(.95rem, 2vw + .3rem, 1.15rem);
    line-height: 1.8;
    margin-bottom: 40px;
    color: var(--muted);
    font-weight: 400;
}

.cars-hero-stats { display: flex; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; }

.cars-stat-number {
    display: block;
    font-size: clamp(1.8rem, 3vw + .5rem, 2.4rem);
    font-weight: 800;
    font-family: var(--fm);
    color: var(--g);
    margin-bottom: 6px;
    letter-spacing: -.02em;
}

.cars-stat-label {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH / FILTER SECTION
═══════════════════════════════════════════════════════════ */
.cars-search-section {
    padding: clamp(36px, 6vw, 64px) 0;
    background: var(--white);
    border-radius: var(--r4) var(--r1) var(--r4) var(--r1);
    margin-bottom: clamp(36px, 6vw, 64px);
    border: 1px solid var(--fog3);
    box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.8) inset;
    transition: border-radius var(--t3) var(--snap);
}

.cars-search-section:hover {
    border-radius: var(--r1) var(--r4) var(--r1) var(--r4);
    border-color: rgba(0,108,53,.15);
}

.cars-search-container {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

.cars-search-header { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); }

.cars-search-title {
    font-size: clamp(1.7rem, 4vw + .5rem, 3.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 12px;
}

.cars-search-subtitle { font-size: 1rem; color: var(--muted); }

/* ── Filter tabs ────────────────────────────────────────── */
.cars-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.cars-tab-btn {
    padding: .55rem 1.2rem;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--fog3);
    border-radius: 20px 6px 20px 6px;
    font-family: var(--ff);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background     var(--t1) var(--ease),
        color          var(--t1) var(--ease),
        border-color   var(--t1) var(--ease),
        border-radius  var(--t2) var(--snap),
        transform      var(--t2) var(--spring),
        box-shadow     var(--t2) var(--ease);
}

/* Shimmer */
.cars-tab-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.25) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 500ms var(--snap);
    pointer-events: none;
}

.cars-tab-btn.cars-tab-active,
.cars-tab-btn:hover {
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    color: var(--white);
    border-color: var(--g);
    border-radius: 6px 20px 6px 20px;
    transform: translateY(-3px);
    box-shadow: 0 6px 24px var(--g-glow-s);
}

.cars-tab-btn:hover::after { transform: translateX(120%) skewX(-12deg); }

/* ── Filter panel ───────────────────────────────────────── */
.cars-filter-panel {
    background: var(--fog);
    border-radius: var(--r3) var(--r1) var(--r3) var(--r1);
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--fog3);
    transition: border-radius var(--t3) var(--snap);
}

.cars-filter-panel:focus-within {
    border-radius: var(--r1) var(--r3) var(--r1) var(--r3);
    border-color: rgba(0,108,53,.2);
}

.cars-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(14px, 2.5vw, 28px);
    align-items: end;
}

.cars-filter-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

.cars-filter-select {
    width: 100%;
    padding: .62rem 1rem;
    background: var(--white);
    border: 1.5px solid var(--fog3);
    border-radius: 10px 3px 10px 3px;
    color: var(--ink);
    font-family: var(--ff);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition:
        border-color  var(--t1) var(--ease),
        background    var(--t1) var(--ease),
        border-radius var(--t2) var(--snap),
        box-shadow    var(--t1) var(--ease);
}

.cars-filter-select:focus {
    border-color: var(--g);
    background: var(--white);
    border-radius: 3px 10px 3px 10px;
    box-shadow: 0 0 0 3px var(--g-04);
}

/* Search input wrapper */
.cars-search-input-wrapper { position: relative; width: 100%; }

.cars-search-input { padding-inline-end: 42px !important; }

.cars-search-icon {
    position: absolute;
    inset-block: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    color: var(--g);
    font-size: .9rem;
    pointer-events: none;
}

.cars-search-spinner {
    position: absolute;
    inset-block: 50%;
    inset-inline-end: 16px;
    transform: translateY(-50%);
    color: var(--g);
}

/* ── Search button ──────────────────────────────────────── */
.cars-search-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: .7rem 1.4rem;
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    color: var(--white);
    border: none;
    border-radius: 20px 6px 20px 6px;
    font-family: var(--ff);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 3px 14px var(--g-glow-s);
    transition:
        background    var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        box-shadow    var(--t2) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-search-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 500ms var(--snap);
    pointer-events: none;
}

.cars-search-btn:hover {
    background: linear-gradient(145deg, var(--g3), var(--g2), var(--g));
    transform: translateY(-3px) scale(1.02);
    border-radius: 6px 20px 6px 20px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 32px var(--g-glow-s);
}

.cars-search-btn:hover::after { transform: translateX(120%) skewX(-12deg); }

.cars-btn-glow { display: none; }

/* ═══════════════════════════════════════════════════════════
   GRID SECTION
═══════════════════════════════════════════════════════════ */
.cars-grid-section { padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); }

.cars-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(28px, 4.5vw, 48px);
    flex-wrap: wrap;
    gap: 18px;
}

.cars-results-info h3 {
    font-size: clamp(1.4rem, 3vw + .4rem, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 6px;
}

.cars-results-count { font-size: .88rem; color: var(--muted); font-weight: 500; }

.cars-sort-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cars-sort-select {
    padding: .55rem 1rem;
    background: var(--white);
    border: 1.5px solid var(--fog3);
    border-radius: 10px 3px 10px 3px;
    color: var(--ink);
    font-family: var(--ff);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition:
        border-color  var(--t1) var(--ease),
        border-radius var(--t2) var(--snap),
        box-shadow    var(--t1) var(--ease);
}

.cars-sort-select:focus {
    border-color: var(--g);
    border-radius: 3px 10px 3px 10px;
    box-shadow: 0 0 0 3px var(--g-04);
}

.cars-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--white);
    border-radius: var(--r2);
    padding: 4px;
    border: 1px solid var(--fog3);
}

.cars-view-btn {
    padding: .45rem .7rem;
    background: transparent;
    color: var(--muted);
    border: none;
    border-radius: var(--r1);
    cursor: pointer;
    transition:
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease),
        transform  var(--t2) var(--spring);
}

.cars-view-btn.cars-view-active,
.cars-view-btn:hover {
    background: var(--g);
    color: var(--white);
    transform: scale(1.05);
}

/* ── Cars grid ──────────────────────────────────────────── */
.cars-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(18px, 3.5vw, 36px);
    min-width: 0;
}

/* ── Cards ──────────────────────────────────────────────── */
.cars-card {
    position: relative;
    border-radius: 22px 6px 22px 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--fog3);
    box-shadow:
        0 2px 8px rgba(0,0,0,.04),
        0 1px 0 rgba(255,255,255,.8) inset;
    animation: cars-card-in 360ms var(--snap) both;
    transition:
        transform      var(--t2) var(--snap),
        box-shadow     var(--t2) var(--ease),
        border-color   var(--t2) var(--ease),
        border-radius  var(--t3) var(--snap);
}

/* Staggered entrance */
.cars-card:nth-child(1)  { animation-delay: 30ms;  }
.cars-card:nth-child(2)  { animation-delay: 60ms;  }
.cars-card:nth-child(3)  { animation-delay: 90ms;  }
.cars-card:nth-child(4)  { animation-delay: 110ms; }
.cars-card:nth-child(5)  { animation-delay: 130ms; }
.cars-card:nth-child(6)  { animation-delay: 148ms; }
.cars-card:nth-child(7)  { animation-delay: 166ms; }
.cars-card:nth-child(8)  { animation-delay: 180ms; }
.cars-card:nth-child(9)  { animation-delay: 194ms; }
.cars-card:nth-child(10) { animation-delay: 206ms; }
.cars-card:nth-child(11) { animation-delay: 218ms; }
.cars-card:nth-child(12) { animation-delay: 228ms; }

.cars-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,108,53,.22);
    border-radius: 6px 22px 6px 22px;
    box-shadow:
        0 0 0 1px var(--g-08),
        0 10px 40px var(--g-glow-s),
        0 2px 8px rgba(0,0,0,.06);
}

/* ── Card image ─────────────────────────────────────────── */
.cars-card-image-container {
    position: relative;
    height: clamp(190px, 28vw, 260px);
    overflow: hidden;
}

.cars-card-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t4) var(--snap);
}

.cars-card:hover .cars-card-image { transform: scale(1.07); }

.cars-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--g-12), transparent);
    opacity: 0;
    transition: opacity var(--t2) var(--ease);
}

.cars-card:hover .cars-card-overlay { opacity: 1; }

/* ── Badges ─────────────────────────────────────────────── */
.cars-card-badges {
    position: absolute;
    top: clamp(12px, 2vw, 18px);
    inset-inline-start: clamp(12px, 2vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cars-badge {
    display: inline-flex;
    align-items: center;
    padding: .22rem .7rem;
    border-radius: var(--rf);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    backdrop-filter: blur(10px);
    background: var(--g);
    color: var(--white);
    border: 1px solid rgba(0,108,53,.3);
}

.cars-badge-featured,
.cars-badge-new,
.cars-badge-luxury,
.cars-badge-performance,
.cars-badge-exotic,
.cars-badge-certified,
.cars-badge-electric { background: var(--g); color: var(--white); }

.cars-badge-light {
    background: var(--g-08);
    color: var(--g);
    border: 1px solid rgba(0,108,53,.2);
}

/* ── Card actions ───────────────────────────────────────── */
.cars-card-actions {
    position: absolute;
    top: clamp(12px, 2vw, 18px);
    inset-inline-end: clamp(12px, 2vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity   var(--t2) var(--ease),
        transform var(--t2) var(--snap);
}

.cars-card:hover .cars-card-actions {
    opacity: 1;
    transform: translateX(0);
}

.cars-action-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    color: var(--muted);
    border: 1.5px solid var(--fog3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease),
        transform  var(--t2) var(--spring),
        box-shadow var(--t2) var(--ease);
}

.cars-action-btn:hover {
    background: var(--g);
    color: var(--white);
    transform: scale(1.12);
    box-shadow: 0 6px 20px var(--g-glow-s);
}

/* ── Card content ───────────────────────────────────────── */
.cars-card-content {
    padding: clamp(18px, 2.5vw, 26px) clamp(14px, 2vw, 22px);
}

.cars-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: clamp(12px, 2vw, 18px);
    gap: 8px;
}

.cars-card-title {
    font-size: clamp(1rem, 2vw + .2rem, 1.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 6px;
}

.cars-card-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.cars-stars { display: flex; gap: 2px; }

.cars-stars i { font-size: .78rem; color: var(--g); }
.cars-stars .far { color: var(--fog3); }

.cars-rating-text { font-size: .72rem; color: var(--muted); font-weight: 600; }

.cars-card-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: clamp(12px, 2vw, 18px);
    min-width: 0;
}

.cars-spec-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: var(--muted);
    font-weight: 500;
    min-width: 0;
}

.cars-spec-item i { color: var(--g); font-size: .75rem; flex-shrink: 0; }

.cars-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: clamp(16px, 2.5vw, 22px);
}

.cars-feature-tag {
    padding: 3px 9px;
    background: var(--g-08);
    color: var(--g);
    border-radius: 16px 4px 16px 4px;
    font-size: .72rem;
    font-weight: 700;
    border: 1px solid rgba(0,108,53,.15);
    transition:
        background    var(--t1) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-feature-tag:hover {
    background: var(--g-12);
    border-radius: 4px 16px 4px 16px;
}

/* ── Card footer ────────────────────────────────────────── */
.cars-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cars-price-container { display: flex; flex-direction: column; gap: 3px; }

.cars-price-main {
    font-size: clamp(1.3rem, 2.5vw + .4rem, 1.7rem);
    font-weight: 800;
    font-family: var(--fm);
    color: var(--g);
    letter-spacing: -.02em;
}

.cars-price-sub { font-size: .8rem; color: var(--muted); font-weight: 500; }

.cars-card-buttons-browse {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: auto;
}

/* ── Buttons ────────────────────────────────────────────── */
.cars-btn-primary,
.cars-btn-secondary {
    position: relative;
    padding: .55rem 1.1rem;
    border-radius: 20px 6px 20px 6px;
    font-family: var(--ff);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition:
        background    var(--t1) var(--ease),
        color         var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        box-shadow    var(--t2) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-btn-primary {
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    color: var(--white);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 14px var(--g-glow-s);
}

.cars-btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 500ms var(--snap);
    pointer-events: none;
}

.cars-btn-primary:hover {
    background: linear-gradient(145deg, var(--g3), var(--g2), var(--g));
    transform: translateY(-2px);
    border-radius: 6px 20px 6px 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 24px var(--g-glow-s);
    color: var(--white);
}

.cars-btn-primary:hover::after { transform: translateX(120%) skewX(-12deg); }

.cars-btn-secondary {
    background: transparent;
    color: var(--g);
    border: 1.5px solid rgba(0,108,53,.3);
}

.cars-btn-secondary:hover {
    background: var(--g-08);
    border-color: rgba(0,108,53,.5);
    border-radius: 6px 20px 6px 20px;
    transform: translateY(-2px);
    color: var(--g);
}

/* ── Similar link ───────────────────────────────────────── */
.cars_browse_similar_link {
    display: inline-flex;
    align-items: center;
    color: var(--white);
    padding: 2px 8px;
    border-radius: var(--rf);
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem;
    transition: transform var(--t2) var(--spring), box-shadow var(--t2) var(--ease);
}

.cars_browse_similar_link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--g-glow-s);
    color: var(--white);
}

/* ── Card glow ──────────────────────────────────────────── */
.cars-card-glow-effect {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, var(--g-04), transparent);
    opacity: 0;
    border-radius: inherit;
    z-index: -1;
    transition: opacity var(--t2) var(--ease);
}

.cars-card:hover .cars-card-glow-effect { opacity: 1; }

/* ── Favorite button ────────────────────────────────────── */
.cars-action-favorite {
    position: absolute;
    top: 50px;
    inset-inline-end: clamp(12px, 2vw, 18px);
    width: 38px; height: 38px;
    background: rgba(255,255,255,.92);
    border: 1.5px solid var(--fog3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    z-index: 10;
    overflow: hidden;
    transition:
        background  var(--t1) var(--ease),
        transform   var(--t2) var(--spring),
        box-shadow  var(--t2) var(--ease),
        border-color var(--t1) var(--ease);
}

.cars-action-favorite:hover {
    transform: scale(1.12);
    background: var(--g-08);
    border-color: rgba(0,108,53,.3);
    box-shadow: 0 6px 20px var(--g-glow-s);
}

.cars-action-favorite i {
    font-size: 1.1rem;
    color: var(--muted);
    transition: color var(--t1) var(--ease);
    position: relative; z-index: 2;
}

.cars-action-favorite:hover i { color: var(--g); }

.cars-action-favorite.active {
    background: linear-gradient(145deg, var(--g2), var(--g));
    border-color: rgba(0,108,53,.4);
    box-shadow: 0 6px 20px var(--g-glow-s), 0 0 14px var(--g-08);
}

.cars-action-favorite.active i { color: var(--white); }

.cars-action-favorite i.animate-heart { animation: cars-heart-beat .6s ease-in-out; }

/* ═══════════════════════════════════════════════════════════
   LOAD MORE
═══════════════════════════════════════════════════════════ */
.cars-load-more-section { text-align: center; padding: clamp(36px, 5vw, 56px) 0; }

.cars-load-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: .75rem 2rem;
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--fog3);
    border-radius: 20px 6px 20px 6px;
    font-family: var(--ff);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition:
        background    var(--t1) var(--ease),
        color         var(--t1) var(--ease),
        border-color  var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        box-shadow    var(--t2) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-load-more-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-12deg);
    pointer-events: none;
}

.cars-load-more-btn:hover {
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    border-color: var(--g);
    color: var(--white);
    transform: translateY(-4px);
    border-radius: 6px 20px 6px 20px;
    box-shadow: 0 10px 36px var(--g-glow-s);
}

.cars-load-more-btn:hover::after { animation: cars-shimmer-sweep 500ms var(--snap); }

/* ═══════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════ */
.cars-pagination-section {
    padding: clamp(36px, 5vw, 56px) 0;
    background: var(--white);
    border-radius: var(--r4) var(--r1) var(--r4) var(--r1);
    border: 1px solid var(--fog3);
    margin-bottom: clamp(36px, 5vw, 56px);
    transition: border-radius var(--t3) var(--snap);
}

.cars-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 28px);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 24px);
}

.cars-pagination-info { font-size: .88rem; color: var(--muted); font-weight: 500; }

.cars-pagination-controls { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 18px); flex-wrap: wrap; }

.cars-pagination-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .55rem 1.1rem;
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--fog3);
    border-radius: 12px 4px 12px 4px;
    font-family: var(--ff);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background    var(--t1) var(--ease),
        color         var(--t1) var(--ease),
        border-color  var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        border-radius var(--t2) var(--snap);
}

.cars-pagination-btn:disabled { opacity: .4; cursor: not-allowed; }

.cars-pagination-btn:not(:disabled):hover {
    background: var(--g);
    border-color: var(--g);
    color: var(--white);
    transform: translateY(-2px);
    border-radius: 4px 12px 4px 12px;
}

.cars-pagination-numbers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cars-pagination-num {
    width: clamp(34px, 5.5vw, 42px);
    height: clamp(34px, 5.5vw, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--fog3);
    border-radius: 12px 4px 12px 4px;
    font-family: var(--ff);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background    var(--t1) var(--ease),
        color         var(--t1) var(--ease),
        border-color  var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        border-radius var(--t2) var(--snap);
}

.cars-pagination-num.cars-pagination-active,
.cars-pagination-num:hover {
    background: linear-gradient(145deg, var(--g2), var(--g));
    color: var(--white);
    border-color: var(--g);
    transform: translateY(-2px);
    border-radius: 4px 12px 4px 12px;
}

.cars-pagination-dots { color: var(--muted); font-weight: 700; margin: 0 4px; }

.cars-pagination-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
}

.cars-pagination-input {
    width: 62px;
    padding: .5rem .75rem;
    background: var(--white);
    border: 1.5px solid var(--fog3);
    border-radius: 8px 3px 8px 3px;
    color: var(--ink);
    font-family: var(--fm);
    font-size: .85rem;
    text-align: center;
    outline: none;
    transition: border-color var(--t1) var(--ease), border-radius var(--t2) var(--snap), box-shadow var(--t1) var(--ease);
}

.cars-pagination-input:focus {
    border-color: var(--g);
    border-radius: 3px 8px 3px 8px;
    box-shadow: 0 0 0 3px var(--g-04);
}

.cars-pagination-go {
    padding: .5rem 1rem;
    background: linear-gradient(145deg, var(--g2), var(--g));
    color: var(--white);
    border: none;
    border-radius: 8px 3px 8px 3px;
    font-family: var(--ff);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform     var(--t2) var(--spring),
        box-shadow    var(--t2) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-pagination-go:hover {
    transform: translateY(-2px);
    border-radius: 3px 8px 3px 8px;
    box-shadow: 0 6px 20px var(--g-glow-s);
}

/* ═══════════════════════════════════════════════════════════
   BRANDS SECTION
═══════════════════════════════════════════════════════════ */
.cars-brands-section {
    padding: clamp(48px, 7vw, 80px) 0;
    background: var(--white);
    border-radius: var(--r4) var(--r1) var(--r4) var(--r1);
    margin-bottom: clamp(36px, 5vw, 56px);
    border: 1px solid var(--fog3);
}

.cars-brands-header { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }

.cars-brands-title {
    font-size: clamp(1.7rem, 4vw + .4rem, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 12px;
}

.cars-brands-subtitle { font-size: 1rem; color: var(--muted); margin-bottom: 22px; }

.cars-brands-divider {
    width: 72px; height: 3px;
    background: linear-gradient(90deg, var(--g), var(--g3));
    margin-inline: auto;
    border-radius: var(--rf);
}

.cars-brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: clamp(14px, 2.5vw, 28px);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 24px);
    min-width: 0;
}

.cars-brand-card {
    position: relative;
    padding: clamp(28px, 4.5vw, 38px) clamp(14px, 2.5vw, 20px);
    background: var(--fog);
    border-radius: 22px 6px 22px 6px;
    text-align: center;
    border: 1px solid var(--fog3);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform      var(--t2) var(--snap),
        box-shadow     var(--t2) var(--ease),
        border-color   var(--t2) var(--ease),
        border-radius  var(--t3) var(--snap),
        background     var(--t2) var(--ease);
}

.cars-brand-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(0,108,53,.22);
    border-radius: 6px 22px 6px 22px;
    background: var(--white);
    box-shadow: 0 12px 40px var(--g-glow-s), 0 0 0 1px var(--g-08);
}

.cars-brand-logo {
    width: clamp(56px, 9vw, 72px);
    height: clamp(56px, 9vw, 72px);
    background: linear-gradient(145deg, var(--g2), var(--g));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 18px;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    color: var(--white);
    box-shadow: 0 4px 18px var(--g-glow-s);
    transition: transform var(--t2) var(--spring), box-shadow var(--t2) var(--ease);
}

.cars-brand-card:hover .cars-brand-logo {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 28px var(--g-glow-s);
}

.cars-brand-name {
    font-size: clamp(1rem, 1.8vw + .2rem, 1.2rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: 8px;
}

.cars-brand-count { font-size: .8rem; color: var(--muted); font-weight: 500; }

.cars-brand-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, var(--g-04), transparent);
    opacity: 0;
    border-radius: inherit; z-index: -1;
    transition: opacity var(--t2) var(--ease);
}

.cars-brand-card:hover .cars-brand-glow { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
.cars-newsletter-section {
    position: relative;
    padding: clamp(56px, 9vw, 96px) 0;
    background: var(--white);
    text-align: center;
    overflow: hidden;
    border-radius: var(--r4) var(--r1) var(--r4) var(--r1);
    border: 1px solid var(--fog3);
    margin-bottom: clamp(36px, 5vw, 56px);
}

.cars-newsletter-background {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 25% 25%, var(--g-04), transparent),
        radial-gradient(circle at 75% 75%, rgba(0,147,74,.03), transparent);
    pointer-events: none;
}

.cars-newsletter-content {
    position: relative; z-index: 2;
    max-width: 680px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 24px);
}

.cars-newsletter-title {
    font-size: clamp(1.7rem, 4vw + .4rem, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 16px;
}

.cars-newsletter-subtitle { font-size: 1rem; color: var(--muted); margin-bottom: 36px; line-height: 1.65; }

.cars-newsletter-form { max-width: 480px; margin-inline: auto; }

.cars-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.cars-newsletter-input {
    flex: 1;
    min-width: 190px;
    padding: .7rem 1.1rem;
    background: var(--fog);
    border: 1.5px solid var(--fog3);
    border-radius: 10px 3px 10px 3px;
    color: var(--ink);
    font-family: var(--ff);
    font-size: .9rem;
    font-weight: 500;
    outline: none;
    transition:
        border-color  var(--t1) var(--ease),
        background    var(--t1) var(--ease),
        border-radius var(--t2) var(--snap),
        box-shadow    var(--t1) var(--ease);
}

.cars-newsletter-input::placeholder { color: var(--muted); }

.cars-newsletter-input:focus {
    border-color: var(--g);
    background: var(--white);
    border-radius: 3px 10px 3px 10px;
    box-shadow: 0 0 0 3px var(--g-04);
}

.cars-newsletter-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: .7rem 1.4rem;
    background: linear-gradient(145deg, var(--g2), var(--g), var(--g-dim));
    color: var(--white);
    border: none;
    border-radius: 20px 6px 20px 6px;
    font-family: var(--ff);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 14px var(--g-glow-s);
    transition:
        background    var(--t1) var(--ease),
        transform     var(--t2) var(--spring),
        box-shadow    var(--t2) var(--ease),
        border-radius var(--t2) var(--snap);
}

.cars-newsletter-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 500ms var(--snap);
    pointer-events: none;
}

.cars-newsletter-btn:hover {
    background: linear-gradient(145deg, var(--g3), var(--g2), var(--g));
    transform: translateY(-3px) scale(1.03);
    border-radius: 6px 20px 6px 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 32px var(--g-glow-s);
}

.cars-newsletter-btn:hover::after { transform: translateX(120%) skewX(-12deg); }

.cars-newsletter-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .78rem;
    color: var(--muted);
    font-weight: 600;
}

.cars-newsletter-privacy i { color: var(--g); }

.cars-newsletter-glow-effect {
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(400px, 75vw, 750px);
    height: clamp(400px, 75vw, 750px);
    background: radial-gradient(circle, var(--g-04), transparent);
    transform: translate(-50%, -50%);
    filter: blur(120px);
    animation: cars-pulse 6s ease-in-out infinite;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   LOADING / STATES
═══════════════════════════════════════════════════════════ */
.cars-loading-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cars-fade-in .3s var(--ease);
}

.cars-loading-spinner { text-align: center; color: var(--ink); }

.cars-loading-spinner i {
    font-size: 2.5rem;
    color: var(--g);
    margin-bottom: 14px;
    display: block;
}

.cars-loading-spinner p { font-size: 1.1rem; font-weight: 700; margin: 0; }

.cars-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(56px, 9vw, 80px) clamp(16px, 3vw, 24px);
}

.cars-no-results i {
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    color: var(--g);
    margin-bottom: 22px;
    opacity: .45;
}

.cars-no-results h3 {
    font-size: clamp(1.4rem, 3vw + .4rem, 2rem);
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ink);
}

.cars-no-results p { font-size: 1rem; color: var(--muted); }

/* Skeleton */
.cars-card-skeleton {
    background: linear-gradient(90deg, var(--fog) 25%, var(--fog2) 50%, var(--fog) 75%);
    background-size: 200% 100%;
    animation: cars-shimmer 1.4s ease infinite;
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */
@keyframes cars-float-orbit {
    0%   { transform: rotate(0deg)   translateX(110px) rotate(0deg);    opacity: .25; }
    50%  { opacity: .6; }
    100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); opacity: .25; }
}

@keyframes cars-pulse {
    0%, 100% { opacity: .4; transform: scale(1);   }
    50%       { opacity: .8; transform: scale(1.18); }
}

@keyframes cars-card-in {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

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

@keyframes cars-slide-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes cars-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes cars-shimmer-sweep {
    from { transform: translateX(-120%) skewX(-12deg); }
    to   { transform: translateX(120%)  skewX(-12deg); }
}

@keyframes cars-heart-beat {
    0%   { transform: scale(1);   }
    25%  { transform: scale(1.22);}
    50%  { transform: scale(1);   }
    75%  { transform: scale(1.1); }
    100% { transform: scale(1);   }
}

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

/* Transition helpers */
.cars-fade-in  { animation: cars-fade-in  .7s var(--snap) both; }
.cars-slide-up { animation: cars-slide-up .7s var(--snap) both; }

/* ═══════════════════════════════════════════════════════════
   LIST VIEW
═══════════════════════════════════════════════════════════ */
.cars-grid-container.cars-list-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cars-grid-container.cars-list-view .cars-card {
    display: flex;
    width: 100%;
    min-height: 200px;
}

.cars-grid-container.cars-list-view .cars-card-image-container {
    width: clamp(180px, 28vw, 280px);
    flex-shrink: 0;
    height: auto;
}

.cars-grid-container.cars-list-view .cars-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(16px, 2.5vw, 24px);
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media screen and (max-width: 1200px) {
    .cars-hero { padding: 70px 0 50px; min-height: 70vh; }
    .cars-grid-header { flex-direction: column; align-items: stretch; }
    .cars-sort-controls { justify-content: space-between; width: 100%; }
    .cars-pagination-container { flex-direction: column; align-items: center; }
}

@media screen and (max-width: 992px) {
    .cars-container { padding-inline: 20px; }
    .cars-hero { min-height: 60vh; padding: 60px 0 40px; }
    .cars-grid-container.cars-list-view .cars-card { flex-direction: column; }
    .cars-grid-container.cars-list-view .cars-card-image-container { width: 100%; height: 220px; }
}

@media screen and (max-width: 768px) {
    .cars-hero { padding: 50px 0 30px; min-height: 50vh; }
    .cars-hero-stats { flex-direction: row; justify-content: space-around; }
    .cars-filter-row { grid-template-columns: 1fr; }
    .cars-grid-container { grid-template-columns: 1fr; }
    .cars-card-footer { flex-direction: column; align-items: stretch; }
    .cars-card-buttons-browse { justify-content: space-between; width: 100%; }
    .cars-btn-secondary, .cars-btn-primary { flex: 1; text-align: center; justify-content: center; }
    .cars-brands-grid { grid-template-columns: repeat(2, 1fr); }
    .cars-input-group { flex-direction: column; }
    .cars-newsletter-input { min-width: 100%; }
    .cars-newsletter-btn { width: 100%; justify-content: center; }
    .cars-pagination-controls { flex-wrap: wrap; justify-content: center; }
}

@media screen and (max-width: 640px) {
    .cars-hero-stats { flex-direction: column; align-items: center; }
    .cars-filter-tabs { flex-direction: column; align-items: stretch; }
    .cars-tab-btn { text-align: center; width: 100%; }
    .cars-card-specs { grid-template-columns: 1fr; }
    .cars-pagination-jump { flex-direction: column; align-items: center; }
    .cars-brands-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 480px) {
    .cars-container { padding-inline: 14px; }
    .cars-card-header { flex-direction: column; align-items: flex-start; }
    .cars-card-buttons-browse { flex-direction: column; gap: 8px; }
    .cars-btn-secondary, .cars-btn-primary { width: 100%; }
    .cars-brands-grid { grid-template-columns: 1fr; }
    .cars-sort-controls { flex-direction: column; width: 100%; }
    .cars-sort-select, .cars-view-toggle { width: 100%; }
    .cars-view-toggle { justify-content: center; }
}

@media screen and (max-width: 360px) {
    html { font-size: 14px; }
    .cars-container { padding-inline: 10px; }
    .cars-card-content { padding: 14px 10px; }
    .cars-pagination-num { width: 30px; height: 30px; font-size: .75rem; }
}

@media screen and (min-width: 1920px) {
    .cars-container { max-width: 1800px; }
    .cars-grid-container { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .cars-card:hover,
    .cars-brand-card:hover,
    .cars-tab-btn:hover,
    .cars-btn-primary:hover,
    .cars-btn-secondary:hover,
    .cars-search-btn:hover,
    .cars-newsletter-btn:hover { transform: none; }
    .cars-card:hover .cars-card-image { transform: none; }
    .cars-card:hover .cars-card-overlay { opacity: 0; }
    .cars-card-actions { opacity: 1; transform: translateX(0); }
}

@media print {
    .cars-particles-container,
    .cars-gradient-overlay,
    .cars-newsletter-section,
    .cars-pagination-section { display: none !important; }
    .cars-page-wrapper { background: #fff !important; color: #000 !important; }
    .cars-card { break-inside: avoid; margin-bottom: 18px; box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ═══════════════════════════════════════════════════════════
   RTL SUPPORT
═══════════════════════════════════════════════════════════ */
body[dir="rtl"] .cars-card-actions          { transform: translateX(-16px); }
body[dir="rtl"] .cars-card:hover .cars-card-actions { transform: translateX(0); }
body[dir="rtl"] .cars-title-word            { margin-inline-end: 18px; margin-inline-start: 0; }
body[dir="rtl"] .cars-filter-label          { text-align: right; }
body[dir="rtl"] .cars-filter-select         { text-align: right; }
body[dir="rtl"] .cars-search-icon,
body[dir="rtl"] .cars-search-spinner        { inset-inline-end: auto; inset-inline-start: 16px; }
body[dir="rtl"] .cars-newsletter-privacy    { flex-direction: row-reverse; }
body[dir="rtl"] .cars-pagination-btn i      { transform: scaleX(-1); }
body[dir="rtl"] .cars-card-footer           { flex-direction: row-reverse; }
body[dir="rtl"] .cars-card-header           { flex-direction: row-reverse; }
body[dir="rtl"] .cars-spec-item             { flex-direction: row-reverse; }
body[dir="rtl"] .cars-hero-stats            { flex-direction: row-reverse; }