/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Sell form Photos & Video  (css/sell-media.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drop zone active (valid file dragged over) */
.upload.upload-drag{border-color:var(--red,#E30613)!important;background:rgba(227,6,19,.10)!important;color:#fff}

/* Count + errors */
.sell-media-count{font-size:12.5px;color:var(--gray,#A0A0A0);margin:2px 2px 12px;font-family:var(--font-m,monospace)}
.sell-media-err{font-size:13px;color:#f87171;background:rgba(248,113,113,.09);border-radius:8px;padding:9px 12px;margin:0 0 12px;line-height:1.5}

/* Photo grid */
.sell-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:8px}
.sph{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0d0d0e;border:1px solid var(--line,rgba(255,255,255,.08));cursor:grab;outline:none}
.sph:focus-visible{box-shadow:0 0 0 2px var(--red,#E30613)}
.sph img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sph-dragging{opacity:.4}
.sph-empty{border-style:dashed;background:rgba(255,255,255,.02);cursor:default;aspect-ratio:4/3}

.sph-cover{position:absolute;top:6px;left:6px;z-index:3;background:var(--red,#E30613);color:#fff;font-size:10px;
  font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.3px}

.sph-actions{position:absolute;top:6px;right:6px;z-index:3;display:flex;gap:5px;opacity:0;transition:opacity .18s}
.sph:hover .sph-actions,.sph:focus-within .sph-actions{opacity:1}
.sph-actions button{width:26px;height:26px;border-radius:7px;border:none;cursor:pointer;font-size:13px;line-height:1;
  background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;transition:background .18s}
.sph-actions button:hover{background:var(--red,#E30613)}

.sph-status{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;align-items:center;
  min-height:0;font-size:11px;color:#fff}
.sph-saving{background:rgba(0,0,0,.55);min-height:22px}
.sph-error{background:rgba(248,113,113,.85);min-height:24px}
.sph-retry{background:#fff;color:#111;border:none;border-radius:6px;font-size:11px;font-weight:700;padding:3px 8px;cursor:pointer}

/* Video preview */
.sell-video-preview{margin-bottom:16px;border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:12px;background:var(--card,#0f0f10)}
.svp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.svp-name{font-size:13.5px;color:#fff;font-weight:600;word-break:break-all}
.svp-sub{font-size:12px;color:var(--gray,#A0A0A0);font-family:var(--font-m,monospace)}
.svp-btns{margin-left:auto;display:flex;gap:8px}
.svp-btns button{min-height:38px;padding:8px 14px;border-radius:9px;border:1px solid var(--line2,rgba(255,255,255,.14));
  background:transparent;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.svp-btns button:hover{border-color:var(--red,#E30613);background:rgba(227,6,19,.08)}

@media (max-width:640px){
  .sell-photo-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .sph-actions{opacity:1}
  .svp-btns{margin-left:0;width:100%}
  .svp-btns button{flex:1}
}

/* ── Sell flow: panels, review, local listings, detail modal ─────────────── */
.sell-panel[hidden]{display:none}
.sell-verify-note{margin:16px 0;padding:13px 16px;border-left:3px solid #fbbf24;background:rgba(251,191,36,.08);
  border-radius:8px;font-size:13px;line-height:1.55;color:#f0d9a0}
.field input.pw-invalid,.field select.pw-invalid{border-color:#f87171}

/* Review summary */
.sell-review{display:grid;gap:18px}
.srv-grp{border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:16px 18px;background:var(--card,#0f0f10)}
.srv-grp h4{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--red,#E30613);margin-bottom:12px}
.srv-row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}
.srv-row:first-of-type{border-top:none}
.srv-row dt{font-size:13px;color:var(--gray,#A0A0A0);margin:0}
.srv-row dd{font-size:13.5px;color:#eee;margin:0}

/* Local motorcycle cards */
.moto-card-local{position:relative}
.mcl-thumb{position:relative;aspect-ratio:16/11;border-radius:14px 14px 0 0;overflow:hidden;background:#0d0d0e}
.mcl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mcl-badge{position:absolute;top:8px;left:8px;z-index:2;background:rgba(0,0,0,.75);color:#fff;font-size:10px;
  display:inline-flex;align-items:center;gap:5px;font-weight:600;letter-spacing:.2px;padding:4px 9px;border-radius:99px}
.mcl-badge svg{opacity:.85}
.mcl-body{padding:12px 14px}
.mcl-body b{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.mcl-body span{font-size:12.5px;color:var(--gray,#A0A0A0)}

/* Detail modal */
#mm-listing-detail{position:fixed;inset:0;z-index:12000;background:rgba(5,5,5,.9);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s}
#mm-listing-detail.on{display:flex;opacity:1}
.mld-panel{background:var(--bg,#090909);border:1px solid var(--line,rgba(255,255,255,.1));border-radius:20px;
  width:min(1000px,100%);max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.3fr 1fr;position:relative}
.mld-close{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(0,0,0,.6);color:#fff;font-size:16px;cursor:pointer}
.mld-close:hover{background:var(--red,#E30613)}
.mld-gallery{padding:18px}
.mld-main{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.mld-main img{width:100%;height:100%;object-fit:contain}
.mld-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;z-index:3}
.mld-prev{left:10px}.mld-next{right:10px}.mld-nav:hover{background:var(--red,#E30613)}
.mld-full{position:absolute;bottom:10px;right:10px;width:34px;height:34px;border-radius:8px;border:none;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;z-index:3}
.mld-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mld-thumb{width:64px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#111;cursor:pointer;padding:0}
.mld-thumb.on{border-color:var(--red,#E30613)}
.mld-thumb img{width:100%;height:100%;object-fit:cover}
.mld-info{padding:22px;border-left:1px solid var(--line,rgba(255,255,255,.08))}
.mld-badge{display:inline-block;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;margin-bottom:10px}
.mld-info h2{font-size:22px;font-weight:800;margin-bottom:8px}
.mld-note{font-size:12.5px;color:#f0d9a0;background:rgba(251,191,36,.08);border-left:3px solid #fbbf24;padding:9px 12px;border-radius:8px;margin-bottom:16px;line-height:1.5}
.mld-video{margin-top:16px}
.mld-video h3{font-size:14px;margin-bottom:10px}
@media (max-width:760px){.mld-panel{grid-template-columns:1fr}.mld-info{border-left:none;border-top:1px solid var(--line)}}

/* ── Price field (Details) ────────────────────────────────────────────────── */
.sell-price-row{display:flex;gap:10px}
.sell-price-row input{flex:1 1 auto;min-width:0}
.sell-price-row select{flex:0 0 130px}
.sell-negotiable{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13px;color:var(--gray,#A0A0A0);cursor:pointer}
.sell-negotiable input{width:18px;height:18px;accent-color:var(--red,#E30613)}
@media (max-width:560px){.sell-price-row{flex-direction:column}.sell-price-row select{flex:1 1 auto}}

/* ── Local card price ─────────────────────────────────────────────────────── */
.mcl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mcl-title{display:-webkit-box;-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:#fff;font-size:14px;font-weight:700;line-height:1.3;min-width:0}
.mcl-price{color:var(--red,#E30613);font-weight:800;font-size:16px;white-space:nowrap;flex:0 0 auto;font-family:var(--font-d,inherit)}
.mcl-loc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gray,#A0A0A0);margin-top:6px}
.mcl-loc svg{color:var(--red,#E30613);flex:0 0 auto;opacity:.9}
.mcl-negwrap{margin-top:8px}
.mcl-negot{display:inline-block;font-size:10px;font-weight:700;color:#fbbf24;border:1px solid rgba(251,191,36,.5);border-radius:99px;padding:2px 9px;white-space:nowrap}
.mcl-meta{font-size:11.5px;color:var(--gray-dim,#7a7a7a);margin-top:8px;font-family:var(--font-m,monospace)}

/* ── Detail price + contact ───────────────────────────────────────────────── */
.mld-price{font-family:var(--font-d,inherit);font-size:26px;font-weight:800;color:var(--red,#E30613);margin:2px 0 14px;display:flex;align-items:center;gap:10px}
.mld-contact{margin-top:18px}
.mld-contact h3{font-size:14px;margin-bottom:8px}
.mld-seller{font-size:13.5px;color:#ddd;margin-bottom:10px}
.mld-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#062;font-weight:700;
  padding:11px 18px;border-radius:12px;text-decoration:none;font-size:14px;min-height:44px;box-sizing:border-box}
.mld-wa svg{color:#062}
.mld-wa:hover{filter:brightness(1.05)}

/* ═══ Sell page premium layout (UI only, scoped to #page-sell) ═══════════ */
#page-sell .wrap-n{ max-width:1200px; }

/* Hero — full width, 380–430 desktop, red border, gradient overlay, trust row */
#page-sell .mm-hero-wrap.sell-hero{ position:relative; margin:8px auto 42px; }
#page-sell .mm-banner{ height:clamp(380px,34vw,430px); border-radius:20px;
  border:1px solid rgba(227,6,19,.35); box-shadow:0 34px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(227,6,19,.06); }
#page-sell .mm-banner::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,rgba(6,6,8,.72),rgba(6,6,8,.28) 42%,transparent 70%),linear-gradient(0deg,rgba(6,6,8,.6),transparent 46%); }
#page-sell .sell-hero-trust{ position:absolute; left:0; right:0; bottom:20px; z-index:2;
  display:flex; flex-wrap:wrap; gap:10px 24px; padding:0 32px; }
#page-sell .sell-hero-trust span{ display:inline-flex; align-items:center; gap:8px; color:#eaeaec;
  font-size:12.5px; font-weight:600; letter-spacing:.2px; }
#page-sell .sell-hero-trust svg{ width:15px; height:15px; color:var(--red); }

/* Layout: steps full-width, then form | sticky summary */
#page-sell .sell-wrap{ max-width:none; padding:0 0 90px; }
#page-sell .sell-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; }
#page-sell .form-card{ border-radius:18px; border:1px solid var(--line); padding:32px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85); }

/* Stepper — numbered circles + progress line */
#page-sell .steps{ display:flex; gap:0; margin:0 0 34px; position:relative; }
#page-sell .step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px;
  position:relative; padding:0; font-size:12.5px; color:var(--gray-dim); font-weight:600; text-align:center; }
#page-sell .step::before{ display:none; }
#page-sell .step:not(:first-child)::after{ content:''; position:absolute; top:17px; right:50%; width:100%; height:2px;
  background:rgba(255,255,255,.1); z-index:0; }
#page-sell .step.on:not(:first-child)::after{ background:var(--red); box-shadow:0 0 12px rgba(227,6,19,.55); }
#page-sell .step-n{ position:relative; z-index:1; width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;
  background:#141416; border:1px solid rgba(255,255,255,.14); color:var(--gray); }
#page-sell .step.on .step-n{ background:linear-gradient(180deg,#f5182a,var(--red)); border-color:var(--red); color:#fff;
  box-shadow:0 6px 18px -6px rgba(227,6,19,.7); }
#page-sell .step.on:has(~ .step.on) .step-n{ font-size:0; }
#page-sell .step.on:has(~ .step.on) .step-n::after{ content:'\2713'; font-size:15px; font-weight:700; }
#page-sell .step.on{ color:#fff; }

/* Two-column field grid */
#page-sell .frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
#page-sell .frow .field{ margin-bottom:0; }
#page-sell .field input,#page-sell .field select,#page-sell .field textarea{ padding:14px 16px; border-radius:12px; }
#page-sell .field input:focus,#page-sell .field select:focus,#page-sell .field textarea:focus{
  border-color:rgba(227,6,19,.7); box-shadow:0 0 0 3px rgba(227,6,19,.14); }
#page-sell .form-card h3{ display:flex; align-items:center; gap:9px; }
#page-sell .form-card h3::before{ content:''; width:8px; height:8px; border-radius:2px; background:var(--red);
  box-shadow:0 0 10px rgba(227,6,19,.7); flex:0 0 auto; }

/* Buttons */
#page-sell .form-nav{ margin-top:26px; gap:12px; }
#page-sell .form-nav .btn{ min-height:48px; padding:0 22px; border-radius:12px; font-weight:700;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
#page-sell .form-nav .btn-red:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(227,6,19,.7); }
#page-sell .form-nav .btn:disabled,#page-sell .form-nav .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Sticky listing-preview summary panel */
#page-sell .sell-summary{ position:sticky; top:88px; }
#page-sell .sell-sum-card{ background:linear-gradient(150deg,#101012,#0a0a0c); border:1px solid var(--line);
  border-radius:18px; padding:18px; box-shadow:0 30px 70px -40px rgba(0,0,0,.85); }
#page-sell .sell-sum-media{ position:relative; height:170px; border-radius:12px; overflow:hidden; margin-bottom:16px;
  border:1px solid var(--line);
  background:radial-gradient(120% 90% at 60% 10%,rgba(227,6,19,.14),transparent 60%),linear-gradient(160deg,#151518,#0a0a0c); }
#page-sell .sell-sum-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
#page-sell .sell-sum-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--red); opacity:.75; }
#page-sell .sell-sum-ph svg{ width:62px; height:62px; }
#page-sell .sell-sum-eyebrow{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--red); font-weight:800; }
#page-sell .sell-sum-title{ font-family:var(--font-d,inherit); font-size:18px; font-weight:800; margin-top:4px; }
#page-sell .sell-sum-rows{ margin:16px 0; display:flex; flex-direction:column; gap:9px; }
#page-sell .sell-sum-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
#page-sell .sell-sum-row span{ color:var(--gray); flex:0 0 auto; }
#page-sell .sell-sum-row b{ color:#fff; font-weight:700; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-sell .sell-sum-price b{ color:var(--red); font-size:15px; }
#page-sell .sell-sum-prog{ margin:14px 0; }
#page-sell .sell-sum-prog-bar{ height:7px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
#page-sell .sell-sum-prog-bar i{ display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,#f5182a,var(--red)); transition:width .3s ease; }
#page-sell .sell-sum-prog > span{ display:block; margin-top:7px; font-size:11.5px; color:var(--gray); font-weight:600; }
#page-sell .sell-sum-trust{ list-style:none; margin:0; padding:14px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; }
#page-sell .sell-sum-trust li{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:#cfcfd2; }
#page-sell .sell-sum-trust svg{ width:15px; height:15px; color:var(--red); flex:0 0 auto; }

/* Responsive */
@media (max-width:1080px){
  #page-sell .sell-grid{ grid-template-columns:1fr; }
  #page-sell .sell-summary{ position:static; }
  #page-sell .sell-sum-media{ height:150px; }
}
@media (max-width:900px){
  #page-sell .mm-banner{ height:clamp(300px,40vw,340px); }
  #page-sell .sell-hero-trust{ display:none; }
}
@media (max-width:640px){
  #page-sell .frow{ grid-template-columns:1fr; }
  #page-sell .mm-banner{ height:clamp(260px,52vw,300px); }
  #page-sell .form-card{ padding:20px; }
  #page-sell .step-t{ font-size:11px; }
  #page-sell .field input,#page-sell .field select,#page-sell .field textarea{ min-height:44px; }
}

/* Sell hero: dedicated full-width shell (outside any grid); inner wrap-n keeps it edge-aligned with the content below */
#page-sell .sell-hero-shell{ width:100%; }