/* ============================================================
   eVehicle — Sell Your EV Page
   ============================================================ */

/* ── HERO ── */
.sell-hero { background:linear-gradient(135deg,#1a1f2e 0%,#0a2a1f 100%); padding:40px 0 32px; position:relative; overflow:hidden; }
.sell-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 100% at 80% 50%,rgba(0,200,150,.12),transparent 65%); pointer-events:none; }
.sell-hero-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.sell-hero-left h1 { color:var(--white); font-size:clamp(1.4rem,2.5vw,2rem); margin-bottom:10px; font-family:var(--font-primary); font-weight:900; }
.sell-hero-left h1 span { color:var(--primary); }
.sell-hero-left p { color:rgba(255,255,255,.6); font-size:.9rem; margin-bottom:20px; max-width:460px; }
.sell-benefit { display:flex; align-items:center; gap:10px; font-size:.85rem; color:rgba(255,255,255,.75); margin-bottom:7px; }
.sell-benefit i { color:var(--primary); font-size:.78rem; width:16px; }
.sell-hero-stats { display:flex; gap:16px; flex-shrink:0; }
.sell-stat { text-align:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:16px 20px; }
.sell-stat-val { font-size:1.5rem; font-weight:900; color:var(--primary); font-family:var(--font-primary); line-height:1; }
.sell-stat-lbl { font-size:.68rem; color:rgba(255,255,255,.45); font-family:var(--font-primary); margin-top:4px; }

/* ── LAYOUT ── */
.sell-layout { display:grid; grid-template-columns:1fr 300px; gap:28px; padding:32px 0 60px; align-items:start; }

/* ── STEPPER ── */
.stepper { display:flex; align-items:center; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.stepper::-webkit-scrollbar { display:none; }
.step-item { display:flex; align-items:center; flex-shrink:0; }
.step-dot { display:flex; flex-direction:column; align-items:center; gap:3px; }
.step-num { width:32px; height:32px; border-radius:50%; background:var(--gray-200); color:var(--gray-500); font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-primary); transition:var(--transition); border:2px solid var(--gray-200); }
.step-item.active .step-num { background:var(--primary); color:var(--dark); border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,200,150,.2); }
.step-item.done .step-num { background:var(--dark); color:var(--primary); border-color:var(--dark); }
.step-lbl { font-size:.58rem; color:var(--text-muted); font-weight:600; font-family:var(--font-primary); white-space:nowrap; }
.step-item.active .step-lbl { color:var(--primary); }
.step-item.done .step-lbl { color:var(--text); }
.step-line { flex:1; height:2px; background:var(--gray-200); min-width:16px; max-width:50px; margin-bottom:18px; transition:background .3s; }
.step-line.done { background:var(--primary); }

/* ── PROGRESS BAR ── */
.sell-progress { height:4px; background:var(--gray-200); border-radius:4px; overflow:hidden; margin-bottom:20px; }
.sell-progress-fill { height:100%; background:var(--primary); border-radius:4px; transition:width .4s ease; }

/* ── FORM CARD ── */
.sell-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.sell-card-head { padding:20px 26px 16px; border-bottom:1px solid var(--border); background:var(--gray-50); }
.sell-card-head h3 { font-size:1rem; font-weight:800; margin-bottom:3px; display:flex; align-items:center; gap:9px; font-family:var(--font-primary); }
.sell-card-head h3 i { color:var(--primary); font-size:.9rem; }
.sell-card-head p { font-size:.82rem; color:var(--text-muted); margin:0; }
.sell-card-body { padding:22px 26px; }
.sell-card-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 26px 20px; border-top:1px solid var(--border); gap:10px; }
.sell-card-nav .btn { min-width:120px; justify-content:center; }

/* ── PANELS ── */
.sell-panel { display:none; animation:evFadeIn .2s ease; }
.sell-panel.active { display:block; }
@keyframes evFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── FORM GRID UTILITIES ── */
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.fg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:16px; }
.fg2:last-child, .fg3:last-child { margin-bottom:0; }

/* ── VEHICLE TYPE GRID ── */
.type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; margin-bottom:16px; }
.type-card { border:2px solid var(--border); border-radius:var(--radius-lg); padding:12px 6px; text-align:center; cursor:pointer; transition:var(--transition); background:var(--white); }
.type-card:hover, .type-card.sel { border-color:var(--primary); background:var(--primary-light); }
.type-card i { font-size:1.4rem; color:var(--gray-400); display:block; margin-bottom:5px; transition:var(--transition); }
.type-card.sel i { color:var(--primary); }
.type-card span { font-size:.68rem; font-weight:600; color:var(--text-muted); font-family:var(--font-primary); }
.type-card.sel span { color:var(--primary-dark); }

/* ── CONDITION SCALE ── */
.cond-scale { display:flex; gap:8px; margin-top:5px; margin-bottom:5px; }
.cond-btn { flex:1; padding:9px 4px; border:2px solid var(--border); border-radius:var(--radius); font-size:.72rem; font-weight:600; text-align:center; cursor:pointer; transition:var(--transition); font-family:var(--font-primary); background:var(--white); color:var(--text-muted); line-height:1.4; }
.cond-btn:hover { border-color:var(--primary); }
.cond-btn.csel-ex { border-color:#16a34a; background:#f0fdf4; color:#166534; }
.cond-btn.csel-go { border-color:#65a30d; background:#f7fee7; color:#365314; }
.cond-btn.csel-fa { border-color:#d97706; background:#fffbeb; color:#92400e; }
.cond-btn.csel-po { border-color:#dc2626; background:#fef2f2; color:#991b1b; }

/* ── PHOTO UPLOAD ── */
.photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.photo-slot { aspect-ratio:1/1; border:2px dashed var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); background:var(--gray-50); position:relative; overflow:hidden; }
.photo-slot:hover { border-color:var(--primary); background:var(--primary-light); }
.photo-slot.req { border-color:rgba(0,200,150,.4); }
.photo-slot input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.photo-slot i { font-size:1.3rem; color:var(--gray-300); margin-bottom:5px; pointer-events:none; }
.photo-slot span { font-size:.62rem; color:var(--text-muted); text-align:center; padding:0 5px; font-weight:600; font-family:var(--font-primary); pointer-events:none; }
.photo-slot .rbadge { position:absolute; top:5px; right:5px; background:var(--primary); color:var(--dark); font-size:.5rem; font-weight:700; padding:2px 5px; border-radius:var(--radius-full); pointer-events:none; }
.photo-slot.uploaded { border-color:var(--success); background:#f0fdf4; border-style:solid; }
.photo-slot.uploaded i { color:var(--success); }
.photo-slot.uploaded span { color:#166534; }

/* ── DOCUMENT CHECKLIST ── */
.doc-list { display:flex; flex-direction:column; gap:10px; }
.doc-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-lg); transition:var(--transition); gap:12px; flex-wrap:wrap; }
.doc-item:hover { border-color:var(--primary-light); }
.doc-item-left { display:flex; align-items:center; gap:12px; }
.doc-ico { width:38px; height:38px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--primary); flex-shrink:0; }
.doc-name { font-size:.85rem; font-weight:700; color:var(--text); font-family:var(--font-primary); }
.doc-sub { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
.doc-status { display:flex; gap:6px; flex-wrap:wrap; }
.doc-status label { display:flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; cursor:pointer; padding:5px 10px; border:1.5px solid var(--border); border-radius:var(--radius-full); transition:var(--transition); white-space:nowrap; }
.doc-status label:hover { border-color:var(--primary-light); }
.doc-status input[type=radio] { accent-color:var(--primary); }
.doc-status label:has(input:checked) { border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); }

/* ── OTP ROW ── */
.otp-row { display:flex; gap:8px; }
.otp-row .form-control { flex:1; }

/* ── VALIDATION ── */
.form-control.ev-err { border-color:var(--danger); }
.form-control.ev-ok  { border-color:var(--success); }
.ferr { color:var(--danger); font-size:.73rem; margin-top:4px; display:none; align-items:center; gap:4px; }
.ferr.show { display:flex; }

/* ── REVIEW STEP ── */
.review-sec { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.review-sec:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.review-sec h5 { font-size:.85rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:7px; font-family:var(--font-primary); }
.review-sec h5 i { color:var(--primary); }
.review-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.review-item .rl { font-size:.67rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.review-item .rv { font-size:.85rem; font-weight:600; color:var(--text); font-family:var(--font-primary); }

/* ── SUCCESS ── */
.sell-success { display:none; text-align:center; padding:48px 24px; }
.sell-success.show { display:block; animation:evFadeIn .3s ease; }
.success-ico { width:72px; height:72px; background:var(--primary-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--primary); margin:0 auto 18px; animation:popIn .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.listing-id { background:var(--primary-light); border:1px solid rgba(0,200,150,.3); border-radius:var(--radius); padding:10px 20px; font-size:.88rem; font-weight:700; color:var(--primary-dark); font-family:var(--font-primary); display:inline-block; margin-bottom:22px; }

/* ── SIDEBAR TIPS ── */
.tip-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:16px; }
.tip-head { padding:13px 16px; background:var(--gray-50); border-bottom:1px solid var(--border); font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:7px; font-family:var(--font-primary); }
.tip-head i { color:var(--primary); }
.tip-body { padding:14px 16px; }
.tip { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.tip:last-child { border-bottom:none; padding-bottom:0; }
.tip-ico { width:28px; height:28px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.72rem; color:var(--primary); font-weight:800; font-family:var(--font-primary); }
.tip h6 { font-size:.78rem; font-weight:700; margin-bottom:2px; font-family:var(--font-primary); }
.tip p { font-size:.72rem; color:var(--text-muted); margin:0; line-height:1.5; }

/* ── NEGOTIABLE TOGGLE ── */
.neg-toggle { display:flex; align-items:center; gap:12px; padding:13px 15px; background:var(--gray-50); border:1.5px solid var(--border); border-radius:var(--radius); margin-top:10px; cursor:pointer; transition:var(--transition); }
.neg-toggle:hover { border-color:var(--primary); }
.neg-toggle i { color:var(--primary); }
.neg-toggle span { flex:1; font-size:.88rem; font-weight:600; color:var(--text); }
.lp-toggle { position:relative; width:36px; height:20px; display:inline-block; flex-shrink:0; }
.lp-toggle input { opacity:0; width:0; height:0; }
.lp-toggle-slider { position:absolute; inset:0; background:var(--gray-300); border-radius:20px; cursor:pointer; transition:var(--transition); }
.lp-toggle-slider::before { content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:var(--transition); }
.lp-toggle input:checked + .lp-toggle-slider { background:var(--primary); }
.lp-toggle input:checked + .lp-toggle-slider::before { transform:translateX(16px); }

/* ── SUBMIT BUTTON LOADING ── */
.sell-submit-btn .ev-spinner { display:none; width:16px; height:16px; border:2px solid rgba(0,0,0,.2); border-top-color:var(--dark); border-radius:50%; animation:evSpin .6s linear infinite; }
.sell-submit-btn.loading .ev-spinner { display:inline-block; }
.sell-submit-btn.loading .btn-text { display:none; }
@keyframes evSpin { to{transform:rotate(360deg)} }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .sell-layout { grid-template-columns:1fr; }
  .sell-sidebar { order:-1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .sell-sidebar > div:last-child { grid-column:1/-1; }
}
@media (max-width:768px) {
  .sell-hero-stats { display:none; }
  .sell-card-body, .sell-card-nav { padding:16px; }
  .fg2 { grid-template-columns:1fr; gap:12px; }
  .fg3 { grid-template-columns:1fr 1fr; gap:10px; }
  .type-grid { grid-template-columns:repeat(3,1fr); }
  .photo-grid { grid-template-columns:repeat(3,1fr); }
  .sell-sidebar { display:flex; flex-direction:column; }
  .doc-item { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .type-grid { grid-template-columns:repeat(2,1fr); }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .fg3 { grid-template-columns:1fr; }
  .cond-scale { gap:5px; }
  .cond-btn { font-size:.65rem; padding:7px 2px; }
  .review-grid { grid-template-columns:1fr; }
}