/* "Selling your car?" appraisal wizard (homepage). Markup from sell.py, behaviour in sell.js. */
#bc-sell{background:#f6f6f7;color:#141414;font-family:'DM Sans',system-ui,sans-serif}
#bc-sell *{box-sizing:border-box}
html:not(.bc-home) #bc-sell{display:none}
#bc-sell .bc-in{max-width:1440px;margin:0 auto;padding:88px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center}
#bc-sell .sl-eyebrow{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b35f00}
#bc-sell h2{margin:0 0 16px;font-family:Sora,system-ui,sans-serif;font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
#bc-sell .sl-lead{margin:0 0 32px;max-width:520px;font-size:18px;line-height:1.6;color:#52525b}
#bc-sell .sl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
#bc-sell .sl-steps li{display:flex;gap:16px;align-items:flex-start}
#bc-sell .sl-steps b{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#141414;color:#ff8c00;font-family:Sora,system-ui,sans-serif;font-size:16px}
#bc-sell .sl-steps strong{display:block;font-size:16px}
#bc-sell .sl-steps span{color:#71717a;font-size:15px}

/* the wizard card */
.sw{background:#fff;border:1px solid #e7e7ea;border-radius:24px;box-shadow:0 1px 2px rgba(16,16,20,.04),0 24px 48px rgba(16,16,20,.08);padding:32px;min-height:440px;display:flex;flex-direction:column}
.sw-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.sw-count{font-size:14px;font-weight:600;color:#71717a}
.sw-count b{color:#141414}
.sw-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:190px}
.sw-bar i{height:6px;border-radius:999px;background:#ececef;transition:background .25s}
.sw-bar i.on{background:#ff8c00}
.sw form{flex:1;display:flex;flex-direction:column}
.sw-step{border:0;margin:0;padding:0;min-width:0;flex:1;display:none}
.sw-step.on{display:block;animation:sw-in .25s ease}
@keyframes sw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sw-step legend{padding:0;margin:0 0 8px;font-family:Sora,system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#141414}
.sw-help{margin:0 0 20px;font-size:15px;line-height:1.55;color:#71717a}
.sw-field{position:relative}
.sw-field + .sw-field{margin-top:14px}
.sw-field label:not(.sw-chip){display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#3f3f46}
.sw input[type=text],.sw input[type=email],.sw input[type=tel]{width:100%;height:60px;padding:0 18px;border:1.5px solid #d4d4d8;border-radius:14px;background:#fafafa;color:#141414;
  font:500 19px 'DM Sans',system-ui,sans-serif;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.sw input:focus{border-color:#ff8c00;background:#fff;box-shadow:0 0 0 4px rgba(255,140,0,.16)}
.sw input[aria-invalid=true]{border-color:#c2410c}
.sw #sw-vin{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.sw #sw-vin::placeholder{text-transform:none;letter-spacing:normal;font-family:'DM Sans',system-ui,sans-serif}
.sw-suffix{position:absolute;right:18px;bottom:19px;font-weight:600;color:#a1a1aa;pointer-events:none}
.sw-err{min-height:22px;margin:8px 0 0;font-size:14px;font-weight:600;color:#c2410c}
.sw-car{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 14px;border-radius:999px;background:#fff4e6;color:#8a4a00;font-size:14px;font-weight:700}
.sw-car[hidden]{display:none}

/* condition + accident taps */
.sw-q + .sw-q{margin-top:16px}
.sw-help + .sw-q{padding-top:4px}
.sw-step:focus{outline:none}
.sw-q-label{margin:0 0 8px;font-size:14px;font-weight:700;color:#3f3f46}
.sw-q-label span,.sw-opt-tag{font-weight:500;color:#a1a1aa}
p.sw-q-label:not(:first-child){margin-top:18px}
.sw-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sw-opt,.sw-chip,.sw-row{position:relative;cursor:pointer}
.sw-opt input,.sw-chip input,.sw-row input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sw-opt{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:10px 12px;border:1.5px solid #d4d4d8;border-radius:12px;background:#fafafa;transition:border-color .15s,background .15s}
.sw-opt b{font-size:15px}
.sw-opt small{font-size:12px;line-height:1.3;color:#71717a}
.sw-opt:hover,.sw-chip:hover span,.sw-row:hover{border-color:#a1a1aa}
.sw-opt:has(input:checked),.sw-row:has(input:checked){border-color:#ff8c00;background:#fff7ed;box-shadow:0 0 0 3px rgba(255,140,0,.14)}
.sw-opt:has(input:focus-visible),.sw-row:has(input:focus-visible),.sw-chip input:focus-visible + span{outline:2px solid #141414;outline-offset:2px}
.sw-flags{display:flex;flex-wrap:wrap;gap:8px}
.sw-chip{display:inline-flex;line-height:1}
.sw-chip span{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:1.5px solid #d4d4d8;border-radius:999px;background:#fafafa;font-size:14px;font-weight:600;transition:border-color .15s,background .15s}
.sw-chip input:checked + span{border-color:#ff8c00;background:#fff7ed}
.sw-chip input:checked + span:before{content:"✓";color:#b35f00;font-weight:800}
.sw-list{display:flex;flex-direction:column;gap:8px}
.sw-row{display:flex;align-items:center;min-height:56px;padding:10px 16px;border:1.5px solid #d4d4d8;border-radius:12px;background:#fafafa;transition:border-color .15s,background .15s}
.sw-row b{display:block;font-size:16px}
.sw-row small{display:block;font-size:13px;color:#71717a}
.sw-details,.sw-buyout{margin-top:14px}
.sw-details[hidden],.sw-buyout[hidden]{display:none}
.sw-details input,.sw-buyout input[type=text]{height:52px!important;font-size:16px!important}
.sw-buyout input[type=text]:disabled{opacity:.45}
#bc-sell .sw-buyout .sw-chip,#bc-wiz .sw-buyout .sw-chip{display:inline-flex;margin:10px 0 0;color:#141414}

/* photos */
.sw-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:120px;border:2px dashed #d4d4d8;border-radius:16px;background:#fafafa;
  cursor:pointer;font-weight:700;font-size:16px;color:#141414;transition:border-color .15s,background .15s;text-align:center;padding:16px}
.sw-drop:hover,.sw-drop.drag,.sw-drop:focus-within{border-color:#ff8c00;background:#fff7ed}
.sw-drop small{font-weight:500;font-size:13px;color:#71717a}
.sw-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sw-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.sw-thumbs:empty{display:none}
.sw-thumb{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f4f4f5}
.sw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sw-thumb.busy:after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border:3px solid #fff;border-top-color:#ff8c00;border-radius:50%;animation:sw-spin .8s linear infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}
.sw-thumb button{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(20,20,20,.75);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.sw-count-ph{margin:10px 0 0;font-size:14px;color:#71717a}

/* buttons */
.sw-nav{display:flex;gap:12px;margin-top:24px}
.sw-nav button{height:56px;border-radius:14px;font:700 17px 'DM Sans',system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.sw-next{flex:1;border:0;background:#ff8c00;color:#141414}
.sw-next:hover{background:#ffa033}
.sw-next[disabled]{opacity:.55;cursor:default}
.sw-back{flex:0 0 auto;padding:0 22px;border:1.5px solid #d4d4d8;background:#fff;color:#141414}
.sw-back:hover{border-color:#141414}
.sw-back[hidden]{display:none}
.sw-privacy{margin:14px 0 0;font-size:13px;color:#a1a1aa;text-align:center}
.sw-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* done */
.sw-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.sw-done[hidden]{display:none}
.sw-done .sw-tick{width:72px;height:72px;border-radius:50%;background:#fff4e6;display:flex;align-items:center;justify-content:center}
.sw-done h3:focus{outline:none}
.sw-done h3{margin:0;font-family:Sora,system-ui,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em}
.sw-done p{margin:0;max-width:380px;font-size:16px;line-height:1.6;color:#52525b}
.sw-done a{margin-top:10px;display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:14px;border:1.5px solid #d4d4d8;color:#141414;font-weight:700;text-decoration:none}
.sw-done a:hover{border-color:#141414}

@media (max-width:1024px){#bc-sell .bc-in{grid-template-columns:1fr;gap:40px}}
@media (max-width:640px){#bc-sell .bc-in{padding:56px 16px}.sw{padding:22px;min-height:0;border-radius:20px}.sw-step legend{font-size:22px}
  #bc-sell .sl-lead{font-size:16px;margin-bottom:24px}.sw-bar{width:120px}.sw-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The Hillz stylesheet forces p{margin-bottom:0!important}; restore this section's spacing */
#bc-sell .sl-eyebrow{margin-bottom:12px!important}
#bc-sell .sl-lead{margin-bottom:32px!important}
#bc-sell .sw-help{margin-bottom:20px!important}
#bc-sell .sw-q-label{margin-bottom:8px!important}
#bc-sell .sw-car{margin-bottom:18px!important}
@media (max-width:640px){#bc-sell .sl-lead{margin-bottom:24px!important}}
/* ...and Bootstrap gives every <label> a bottom margin */
#bc-sell label.sw-opt,#bc-sell label.sw-chip,#bc-sell label.sw-row,#bc-sell label.sw-drop{margin:0}