/* ═══════════════════════════════════════════════════════════════
   Boomkay Motors — Seller Portal Styles
   Standalone CSS for subdomain deployment
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1A1A1A; }
::-webkit-scrollbar-thumb { background: #FF4500; border-radius: 10px; }
::selection { background: rgba(255, 69, 0, 0.2); color: #FF4500; }
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ─── BoomLoader ──────────────────────────────────────────── */
#boomLoader {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1A1A1A;
    transition: opacity 0.5s ease;
}
#boomLoader.fade-out { opacity: 0; pointer-events: none; }
.loader-car { width: 80px; animation: loaderBounce 1s ease-in-out infinite; }
.loader-road { width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #FF4500, transparent); border-radius: 9999px; margin-top: 8px; animation: loaderPulse 1.2s ease-in-out infinite; }
.loader-label { color: rgba(255,255,255,0.3); font-size: 0.65rem; font-family: 'Inter',sans-serif; letter-spacing: 0.3em; text-transform: uppercase; margin-top: 12px; }
@keyframes loaderBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes loaderPulse { 0%,100% { opacity: 0.3; transform: scaleX(0.7); } 50% { opacity: 1; transform: scaleX(1); } }

/* ─── Reveal Animation ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(25px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.3s; }

/* ─── Form Elements ───────────────────────────────────────── */
.form-input {
    width: 100%;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}
.form-input:focus {
    outline: none;
    border-color: rgba(255, 69, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.08);
    background: #fff;
}
.form-input.error { border-color: #EF4444; }
.form-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

/* ─── Photo Upload Slots ──────────────────────────────────── */
.photo-slot {
    background: #fff;
    border: 2px dashed #E5E7EB;
    border-radius: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.photo-slot:hover { border-color: #FF4500; background: #FFF7ED; }
.photo-slot.has-file { border-style: solid; border-color: #10B981; background: #F0FDF4; }
.photo-slot.required::after {
    content: 'Required';
    position: absolute; top: 0.5rem; right: 0.5rem;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    background: #FEE2E2; color: #EF4444;
    padding: 0.15rem 0.5rem; border-radius: 9999px;
}
.photo-slot .preview-img {
    width: 100%; height: 100px;
    object-fit: cover; border-radius: 0.5rem;
    margin-bottom: 0.5rem; display: none;
}
.photo-slot.has-file .preview-img { display: block; }
.photo-slot.has-file .guide-img { display: none; }
.photo-slot .guide-img {
    width: 100%; height: 80px;
    object-fit: contain; opacity: 0.25;
    margin-bottom: 0.5rem;
}

/* ─── Feature Toggle Grid ─────────────────────────────────── */
.feature-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 0.75rem; transition: all 0.2s ease; cursor: pointer; }
.feature-toggle:hover { background: #FFF7ED; border-color: #FF4500; }
.feature-toggle input[type="checkbox"] { accent-color: #FF4500; width: 1rem; height: 1rem; cursor: pointer; }
.feature-toggle label { font-size: 0.8rem; cursor: pointer; user-select: none; }

/* ─── Status Badges ───────────────────────────────────────── */
.badge-pending { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
.badge-approved { background: #D1FAE5; color: #059669; border: 1px solid #A7F3D0; }
.badge-rejected { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.badge-archived { background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }
[class*="badge-"] { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

/* ─── Card System ─────────────────────────────────────────── */
.listing-card {
    background: #fff; border-radius: 1rem; overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}
.listing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }

/* ─── Glassmorphism ───────────────────────────────────────── */
.glass {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.05);
}

/* ─── Wizard Steps ────────────────────────────────────────── */
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }

.step-indicator { display: flex; align-items: center; gap: 0.5rem; }
.step-dot {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    transition: all 0.3s ease;
}
.step-dot.completed { background: #10B981; color: #fff; }
.step-dot.active { background: #FF4500; color: #fff; box-shadow: 0 0 15px rgba(255,69,0,0.3); }
.step-dot.upcoming { background: #F3F4F6; color: #9CA3AF; }
.step-line { width: 2rem; height: 2px; background: #E5E7EB; }
.step-line.completed { background: #10B981; }

/* ─── Password Strength Meter ─────────────────────────────── */
.pw-meter { height: 4px; background: #E5E7EB; border-radius: 9999px; margin-top: 0.5rem; overflow: hidden; }
.pw-meter-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease, background 0.3s ease; }
.pw-weak { width: 25%; background: #EF4444; }
.pw-fair { width: 50%; background: #F59E0B; }
.pw-good { width: 75%; background: #3B82F6; }
.pw-strong { width: 100%; background: #10B981; }