body { background:#f0f2f8; font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

        /* ── Nav / Auth ── */
        .user-dropdown .dropdown-menu { min-width:200px;border:none;box-shadow:0 4px 15px rgba(0,0,0,.15);border-radius:8px; }
        .user-dropdown .dropdown-item { padding:10px 20px;transition:all .3s; }
        .user-dropdown .dropdown-item:hover { background:#f0f4ff;color:#10b981; }
        .user-dropdown .dropdown-item i { width:20px;margin-right:8px; }
        .nav-link.user-link { color:#10b981!important;font-weight:600;display:flex;align-items:center;gap:8px; }
        .nav-link.user-link:hover { color:#059669!important; }
        .auth-buttons { display:flex;gap:10px;align-items:center; }
        .login-btn-nav,.signup-btn-nav { padding:8px 20px;border-radius:25px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:6px; }
        .login-btn-nav { background:transparent;border:2px solid #10b981;color:#10b981!important; }
        .login-btn-nav:hover { background:#10b981;color:#fff!important; }
        .signup-btn-nav { background:linear-gradient(135deg,#10b981,#059669);border:2px solid transparent;color:#fff!important; }
        .signup-btn-nav:hover { transform:translateY(-2px);box-shadow:0 4px 15px rgba(16,185,129,.4); }
        .mobile-login-btn { display:block;background:transparent;border:2px solid #10b981;color:#10b981!important;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600; }
        .mobile-signup-btn { display:block;background:linear-gradient(135deg,#10b981,#059669);color:#fff!important;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600; }

        /* ═══════════════════════════════════════════
           WELCOME MODAL  — STEP 1 ONLY (state select)
        ═══════════════════════════════════════════ */
        .welcome-modal-backdrop {
            position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,.75);z-index:9998;
            display:flex;align-items:center;justify-content:center;
            backdrop-filter:blur(5px);overflow-y:auto;padding:15px 10px;
        }
        .welcome-modal {
            background:#fff;border-radius:20px;max-width:750px;width:95%;
            max-height:95vh;overflow-y:auto;position:relative;z-index:9999;
            box-shadow:0 25px 80px rgba(0,0,0,.3);
            animation:modalSlideIn .3s ease-out;margin:auto;
        }
        @keyframes modalSlideIn { from{opacity:0;transform:translateY(-30px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
        .modal-close-btn {
            position:absolute;top:15px;right:15px;background:#f3f4f6;
            border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;
            font-size:16px;color:#6b7280;transition:all .3s;z-index:10;
        }
        .modal-close-btn:hover { background:#ef4444;color:#fff;transform:rotate(90deg); }
        .modal-header-custom {
            background:linear-gradient(135deg,#004aa9eb,#0041a0);
            padding:25px 20px;text-align:center;border-radius:20px 20px 0 0;color:#fff;
        }
        .modal-header-custom h2 { font-size:24px;font-weight:800;margin-bottom:5px;color:#fff; }
        .modal-header-custom p { font-size:13px;opacity:.95;margin:0; }
        .modal-body-custom { padding:25px 20px; }
        .step-title { text-align:center;color:#1f2937;font-weight:700;margin-bottom:6px;font-size:16px; }
        .step-subtitle { text-align:center;color:#6b7280;font-size:12px;margin-bottom:14px; }

        /* ── States Grid ── */
        .states-grid {
            display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
            gap:10px;max-height:380px;overflow-y:auto;padding-right:4px;
        }
        .states-grid::-webkit-scrollbar { width:6px; }
        .states-grid::-webkit-scrollbar-track { background:#f1f1f1;border-radius:10px; }
        .states-grid::-webkit-scrollbar-thumb { background:#10b981;border-radius:10px; }
        .state-item {
            background:#fff;border:2px solid #e5e7eb;border-radius:10px;
            padding:12px 8px;text-align:center;cursor:pointer;transition:all .25s;position:relative;
        }
        .state-item:hover { border-color:#0041a0;transform:translateY(-2px);box-shadow:0 6px 15px rgba(16,185,129,.18); }
        .state-item.selected { border-color:#0041a0;background:linear-gradient(135deg,#f0fdf4,#dcfce7); }
        .state-item.selected::after {
            content:'✓';position:absolute;top:4px;right:4px;background:#10b981;color:#fff;
            width:18px;height:18px;border-radius:50%;display:flex;align-items:center;
            justify-content:center;font-size:10px;font-weight:700;
        }
        .state-item .state-icon { font-size:22px;margin-bottom:4px;display:block; }
        .state-item .state-name { font-size:11px;font-weight:600;color:#1f2937;line-height:1.2; }

        /* ── Filter Hero ── */
        .filter-hero {
            background:linear-gradient(135deg,#10b981,#059669);
            padding:3rem 0 2rem;position:relative;overflow:hidden;
        }
        .filter-hero::before { content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:rgba(255,255,255,.08);border-radius:50%; }
        .filter-hero::after  { content:'';position:absolute;bottom:-30%;left:-5%;width:400px;height:400px;background:rgba(255,255,255,.06);border-radius:50%; }
        .filter-container { position:relative;z-index:2; }
        .filter-title { color:#fff;font-size:28px;font-weight:800;margin-bottom:8px;text-align:center; }
        .filter-subtitle { color:rgba(255,255,255,.9);font-size:14px;text-align:center;margin-bottom:2rem; }
        .filter-tabs-modern { display:flex;justify-content:center;gap:12px;margin-bottom:2rem;flex-wrap:wrap; }
        .filter-tab-btn { background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);color:#fff;padding:10px 24px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s; }
        .filter-tab-btn:hover { background:rgba(255,255,255,.25);transform:translateY(-2px); }
        .filter-tab-btn.active { background:#fff;color:#10b981;border-color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.15); }
        .filter-grid { background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.15); }
        .filter-group { margin-bottom:0; }
        .filter-label { font-size:13px;font-weight:600;color:#4a5568;margin-bottom:8px;display:block; }
        .filter-select {
            width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;
            font-size:14px;background:#fff;transition:all .3s;appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2310b981' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat:no-repeat;background-position:right 16px center;padding-right:45px;
        }
        .filter-select:focus { outline:none;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.1); }

        /* ── Active filter highlight states ── */
        .filter-select.filter-active {
            border-color:#10b981!important;
            background-color:rgba(16,185,129,.06);
            color:#065f46;
            font-weight:600;
            box-shadow:0 0 0 3px rgba(16,185,129,.15);
        }
        .filter-label.has-filter { color:#059669; }
        .filter-label.has-filter i { color:#10b981; }
        .filter-label.has-filter::after { content:' ✓';font-size:10px;font-weight:800;color:#10b981; }

        /* ── Active filters summary bar ── */
        .active-bar {
            display:none;align-items:center;flex-wrap:wrap;gap:8px;
            margin-top:16px;padding-top:14px;border-top:1px solid rgba(16,185,129,.25);
        }
        .active-bar.visible { display:flex; }
        .active-bar-label { font-size:12px;font-weight:700;color:#000;opacity:.9;white-space:nowrap; }
        .active-tag {
            display:inline-flex;align-items:center;gap:5px;
            background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
            color:#000;padding:4px 10px 4px 12px;border-radius:50px;
            font-size:12px;font-weight:600;
        }
        .active-tag .tag-x {
            background:rgba(255,255,255,.25);border:none;border-radius:50%;
            width:17px;height:17px;cursor:pointer;color:#000;font-size:11px;
            display:inline-flex;align-items:center;justify-content:center;
            transition:background .2s;padding:0;line-height:1;
        }
        .active-tag .tag-x:hover { background:rgba(239,68,68,.7); }
        .clear-all-tag {
            background:linear-gradient(135deg, #10b981, #059669);border:1.5px solid rgba(255,255,255,.4);color:#fff;
            padding:4px 12px;border-radius:50px;font-size:12px;font-weight:600;
            cursor:pointer;transition:all .2s;
        }
        .clear-all-tag:hover { background:rgba(239,68,68,.5);border-color:transparent; }

        /* ── Car Cards ── */
        .car-card-neo {
            background:#fff;border-radius:16px;padding:14px;
            box-shadow:0 4px 20px rgba(63,81,181,.12);border:1px solid #e8eaf5;
            transition:all .25s;position:relative;
        }
        .car-card-neo:hover { transform:translateY(-6px);box-shadow:0 12px 35px rgba(63,81,181,.2); }
        .car-image-wrap { position:relative;border-radius:12px;overflow:hidden;background:#f6f7ff; }
        .car-image { width:100%;height:200px;object-fit:cover;display:block; }
        .status-pill { position:absolute;top:10px;left:10px;padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase; }
        .status-available { background:linear-gradient(135deg,#10b981,#059669); }
        .status-sold { background:linear-gradient(135deg,#f87171,#ef4444); }
        .new-car-badge { position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#fbbf24,#f59e0b);padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;z-index:1; }
        .car-body { padding:16px 4px 4px; }
        .car-title { font-size:17px;font-weight:700;color:#1f2937;margin-bottom:6px;line-height:1.3; }
        .car-title .variant { font-size:12px;color:#9ca3af;font-weight:500; }
        .chip-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px; }
        .chip { background:#f3f4f6;border-radius:8px;padding:5px 10px;font-size:11px;color:#4b5563;border:1px solid #e5e7eb;display:inline-flex;align-items:center;gap:4px; }
        .chip i { font-size:10px; }

        /* ── Price Block (on-road focused) ── */
        .price-block {
            margin:12px 0;padding:12px;
            background:linear-gradient(135deg,#f0fdf4,#dcfce7);
            border-radius:10px;border:1px solid #bbf7d0;
        }
        /* When state selected: show on-road prominently */
        .onroad-tag    { font-size:11px;font-weight:700;color:#059669;margin-bottom:1px; }
        .onroad-state-info { font-size:10px;color:#6b7280;margin-bottom:5px; }
        .onroad-big    { font-size:20px;font-weight:800;color:#15803d;line-height:1.2; }
        .exshowroom-note {
            font-size:10px;color:#9ca3af;margin-top:6px;
            border-top:1px dashed #86efac;padding-top:5px;
        }
        /* When no state: show ex-showroom */
        .exshowroom-label { font-size:11px;color:#4b5563;font-weight:600;margin-bottom:3px; }
        .exshowroom-price { font-size:20px;font-weight:800;color:#15803d;line-height:1.2; }
        .select-state-hint { font-size:10px;color:#9ca3af;margin-top:4px; }

        /* State tag on card */
        .state-tag {
            display:inline-flex;align-items:center;gap:4px;
            background:#ecfdf5;border:1px solid #d1fae5;
            border-radius:50px;padding:3px 10px;font-size:10px;font-weight:600;color:#059669;
            margin-bottom:6px;
        }

        .btn-see { border-radius:10px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:600;font-size:13px;padding:10px;border:none;transition:all .3s; }
        .btn-see:hover { color:#fff;transform:scale(1.02);box-shadow:0 8px 20px rgba(16,185,129,.3); }

        /* ── Footer ── */
        .footer { background:#1f2937;color:#d1d5db; }
        .footer-logo-img { max-width:200px; }
        .footer-description { font-size:14px;line-height:1.6;color:#9ca3af; }
        .footer h2 { color:#fff;font-size:18px;font-weight:700;margin-bottom:15px; }
        .footer ul li { margin-bottom:8px; }
        .footer ul li a { color:#9ca3af;text-decoration:none;transition:color .3s; }
        .footer ul li a:hover { color:#10b981; }
        .footer-bottom { border-top:1px solid #374151;padding-top:20px;margin-top:20px;font-size:13px; }
        .footer-bottom a { color:#10b981;text-decoration:none; }

        /* ── Responsive ── */
        @media(max-width:767.98px){
            .car-image { height:180px; }
            .filter-title { font-size:22px; }
            .filter-grid { padding:16px; }
            .modal-header-custom h2 { font-size:20px; }
            .modal-body-custom { padding:20px 15px; }
            .states-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr));max-height:300px; }
            .welcome-modal { max-width:95%;border-radius:16px; }
            .auth-buttons { flex-direction:column;width:100%;margin-top:10px; }
            .login-btn-nav,.signup-btn-nav { width:100%;text-align:center;justify-content:center; }
        }

        /* ══ FILTER CHIPS ══ */
        .filter-chips-section { background:#fff;padding:18px 0 6px; }
        .filter-chips-card { background:#f8f9fa;border:1px solid #e5e7eb;border-radius:14px;padding:20px 22px 14px; }
        .filter-chips-title { font-size:15px;font-weight:700;color:#1f2937;margin:0 0 14px; }
        .filter-chips-row { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px; }
        .filter-chip-label { font-size:13px;font-weight:600;color:#4b5563;white-space:nowrap;margin-right:2px; }
        .filter-chip-divider { width:1px;height:22px;background:#d1d5db;display:inline-block;margin:0 4px;flex-shrink:0; }
        .filter-chip { display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1.5px solid #d1d5db;border-radius:50px;background:#fff;font-size:13px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s;white-space:nowrap;line-height:1.4; }
        .filter-chip:hover { border-color:#10b981;color:#059669;background:#f0fdf4; }
        .filter-chip.chip-active { border-color:#10b981;background:#ecfdf5;color:#059669;font-weight:800;box-shadow:0 0 0 3px rgba(16,185,129,.12); }
        /* above25 chip — distinct amber accent */
        .chip-above25 { border-color:#f59e0b;color:#92400e;background:#fffbeb; }
        .chip-above25:hover,.chip-above25.chip-active { border-color:#d97706;background:#fef3c7;color:#78350f;box-shadow:0 0 0 3px rgba(245,158,11,.2); }
        .chip-petrol  { border-color:#fbbf24;color:#92400e;background:#fffbeb; }
        .chip-petrol:hover,.chip-petrol.chip-active   { border-color:#f59e0b;background:#fef3c7;color:#92400e;box-shadow:0 0 0 3px rgba(245,158,11,.15); }
        .chip-diesel  { border-color:#93c5fd;color:#1e3a8a;background:#eff6ff; }
        .chip-diesel:hover,.chip-diesel.chip-active   { border-color:#3b82f6;background:#dbeafe;color:#1d4ed8;box-shadow:0 0 0 3px rgba(59,130,246,.15); }
        .chip-electric{ border-color:#86efac;color:#14532d;background:#f0fdf4; }
        .chip-electric:hover,.chip-electric.chip-active{ border-color:#22c55e;background:#dcfce7;color:#15803d;box-shadow:0 0 0 3px rgba(34,197,94,.15); }
        .chip-hybrid  { border-color:#6ee7b7;color:#064e3b;background:#ecfdf5; }
        .chip-hybrid:hover,.chip-hybrid.chip-active   { border-color:#10b981;background:#d1fae5;color:#047857;box-shadow:0 0 0 3px rgba(16,185,129,.15); }
        .chip-cng     { border-color:#c4b5fd;color:#4c1d95;background:#f5f3ff; }
        .chip-cng:hover,.chip-cng.chip-active         { border-color:#7c3aed;background:#ede9fe;color:#5b21b6;box-shadow:0 0 0 3px rgba(124,58,237,.15); }
        .filter-chip svg { width:15px;height:15px;flex-shrink:0; }
        .view-more-filters { display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#374151;text-decoration:none;margin-top:6px;padding:2px 0;transition:color .2s; }
        .view-more-filters:hover { color:#10b981;text-decoration:none; }
        @media(max-width:767.98px){ .filter-chips-row{ gap:6px; } .filter-chip{ font-size:12px;padding:5px 11px; } .filter-chip-divider{ display:none; } }