/*
 * ═══════════════════════════════════════════════
 * CarBlitz — Frontend Theme CSS
 * ═══════════════════════════════════════════════
 */

:root {
    --brand-50:  #EBF3FE;
    --brand-100: #D0E2FC;
    --brand-200: #99C3EB;
    --brand-400: #3387D6;
    --brand-500: #0060BF;
    --brand-600: #004D99;
    --brand-700: #0A3D62;
    --accent-500: #FFC107;

    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --input-h: 44px;
    --shadow-input: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-input-focus: 0 0 0 3px rgba(0, 96, 191, 0.10), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-card-hover: 0 12px 32px rgba(0, 96, 191, 0.10);
}

/* ── Typography ── */
body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Lexend', system-ui, sans-serif;
}
.logo-car { font-weight: 300; }
.logo-blitz { font-weight: 900; }

html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    display: block;
    width: 100%;
    height: var(--input-h);
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-800);
    background-color: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-input);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 14px;
    resize: vertical;
}

input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select:focus,
textarea:focus {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-input-focus);
}

input:not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
select:not(:focus):hover,
textarea:not(:focus):hover {
    border-color: var(--gray-400);
}

input::placeholder, textarea::placeholder {
    color: var(--gray-400);
}

/* ── Select ── */
select {
    padding-left: 14px;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 6l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

/* ── Checkbox & Radio ── */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-input);
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--brand-400);
}

input[type="checkbox"]:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

input[type="radio"]:checked {
    background-color: #fff;
    border-color: var(--brand-500);
    border-width: 5px;
}

/* ── Range slider ── */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border: none;
    border-radius: 3px;
    background: var(--gray-200);
    outline: none;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-500);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 96, 191, 0.3);
}
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--brand-500);
    cursor: pointer;
}

/* ══════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════ */

.car-card {
    transition: all 0.3s ease;
}
.car-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */

.fade-in { animation: fadeIn 0.5s ease-out forwards; }
.slide-up { animation: slideUp 0.5s ease-out forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--brand-500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-600); }