/* Extracted from sell.html — design audit wave 4 */
/* ══ SELL PAGE — Agent Auction Flow ══ */
:root {
--teal:#81D8D0; --teal-d:#5BBDB7; --teal-dd:#0d9488;
--dark:#0a0f1e;
}
/* ── Hero ── */
.sh-hero {
background: var(--dark); color:#fff;
padding: 96px 0 72px; position:relative; overflow:hidden;
}
.sh-hero::before {
content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse 700px 500px at 0% 40%, rgba(129,216,208,.1) 0%, transparent 70%),
radial-gradient(ellipse 400px 300px at 100% 0%, rgba(91,189,183,.07) 0%, transparent 70%);
pointer-events:none;
}
.sh-hero .container { position:relative; z-index:1; }
.sh-badge {
display:inline-flex; align-items:center; gap:8px;
background:rgba(129,216,208,.12); border:1px solid rgba(129,216,208,.3);
border-radius:100px; padding:6px 18px;
font-size:.75rem; font-weight:700; color:var(--teal);
letter-spacing:.5px; text-transform:uppercase; margin-bottom:24px;
}
.sh-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
@media(max-width:860px){ .sh-inner{ grid-template-columns:1fr; gap:48px; } }
.sh-h1 {
font-size:clamp(2.2rem,4vw,3.4rem); font-weight:900;
letter-spacing:-1.5px; line-height:1.1; margin-bottom:16px;
}
.sh-h1 span { color: var(--teal-d, #2A706A); }
.sh-sub { font-size:1rem; color:rgba(255,255,255,.6); line-height:1.75; margin-bottom:40px; }
/* How it works mini-steps */
.sh-how { display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.sh-how-step { display:flex; gap:16px; align-items:flex-start; }
.sh-how-num {
width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:rgba(129,216,208,.15); border:1.5px solid rgba(129,216,208,.3);
display:flex; align-items:center; justify-content:center;
font-size:.85rem; font-weight:900; color:var(--teal);
}
.sh-how-text strong { color:#fff; font-size:.92rem; font-weight:800; display:block; margin-bottom:2px; }
.sh-how-text span { font-size:.82rem; color:rgba(255,255,255,.5); line-height:1.55; }
/* ── Form card ── */
.sh-form-card {
background:#fff; border-radius:24px; padding:36px;
box-shadow:0 32px 80px rgba(0,0,0,.35);
color:#1e293b;
}
.sh-form-head { margin-bottom:28px; }
.sh-form-head h2 { font-size:1.25rem; font-weight:900; color:#0f172a; margin-bottom:4px; }
.sh-form-head p { font-size:.85rem; color:#64748b; }
.sh-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .sh-grid2{ grid-template-columns:1fr; } }
.sh-full { grid-column:1/-1; }
.sh-label { display:block; font-size:.72rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.sh-input {
width:100%; padding:11px 14px; border:1.5px solid #e2e8f0;
border-radius:10px; font-size:.9rem; font-family:inherit;
color:#1e293b; transition:border-color .2s; outline:none; background:#f8fafc;
}
.sh-input:focus { border-color:var(--teal-d); background:#fff; }
.sh-input option { background:#fff; }
/* Image Upload */
.sh-img-zone {
border:2px dashed #e2e8f0; border-radius:14px; padding:28px 16px;
text-align:center; cursor:pointer; transition:.2s; background:#fafafa;
position:relative;
}
.sh-img-zone:hover { border-color:var(--teal-d); background:#f0fdfa; }
.sh-img-zone.drag { border-color:var(--teal); background:rgba(129,216,208,.08); }
.sh-img-zone input { display:none; }
.sh-img-zone-ico { font-size:2.2rem; margin-bottom:8px; }
.sh-img-zone p { font-size:.85rem; color:#64748b; }
.sh-img-zone small { font-size:.72rem; color:#94a3b8; margin-top:4px; display:block; }
.sh-img-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sh-thumb { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.sh-thumb img { width:100%; height:100%; object-fit:cover; }
.sh-thumb .rm {
position:absolute; top:3px; right:3px; width:18px; height:18px;
background:rgba(239,68,68,.9); color:#fff; border-radius:50%;
border:none; font-size:.65rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.sh-upload-progress { height:4px; background:#e2e8f0; border-radius:4px; overflow:hidden; display:none; margin-top:8px; }
.sh-upload-progress-bar { height:100%; background:var(--teal-d); transition:width .3s; width:0%; }
/* Submit */
.sh-submit {
width:100%; padding:15px; border:none; border-radius:13px;
background:linear-gradient(135deg,var(--teal),var(--teal-d));
color:#fff; font-size:1rem; font-weight:800; cursor:pointer;
font-family:inherit; transition:.25s; margin-top:20px;
box-shadow:0 6px 24px rgba(91,189,183,.3);
}
.sh-submit:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(91,189,183,.4); }
.sh-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.sh-alt-cta {
margin-top:14px; text-align:center; font-size:.82rem; color:#64748b; line-height:1.5;
}
.sh-alt-cta a {
display:inline-block; margin-top:4px; font-weight:800; color:var(--teal-dd);
text-decoration:none;
}
.sh-alt-cta a:hover { text-decoration:underline; }
/* Success state */
.sh-success { display:none; text-align:center; padding:40px 20px; }
.sh-success-ico { font-size:4rem; margin-bottom:16px; }
.sh-success h3 { font-size:1.4rem; font-weight:900; color:#0f172a; margin-bottom:8px; }
.sh-success p { font-size:.9rem; color:#64748b; line-height:1.6; margin-bottom:20px; }
.sh-link-box {
background:#f0fdfa; border:1.5px solid #99f6e4; border-radius:12px;
padding:14px 16px; display:flex; align-items:center; gap:10px;
font-size:.82rem; font-weight:700; color:var(--teal-dd); cursor:pointer;
transition:.2s; margin-bottom:16px;
}
.sh-link-box:hover { background:#ccfbf1; }
/* Trust line */
.sh-trust { display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.sh-trust-item { display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.5); }
.sh-trust-item strong { color:rgba(255,255,255,.8); }
/* ── Testimonials / agents teaser ── */
.sh-agents-section { background:#f8fafc; padding:72px 0; }
.sh-agents-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:900; color:#0f172a; margin-bottom:8px; }
.sh-agents-sub { font-size:.95rem; color:#64748b; margin-bottom:40px; }
.sh-agents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .sh-agents-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ .sh-agents-grid{ grid-template-columns:1fr; } }
.sh-agent-card {
background:#fff; border:1.5px solid #e2e8f0; border-radius:18px;
padding:24px; transition:.25s;
}
.sh-agent-card:hover { border-color:var(--teal-d); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.07); }
.sh-agent-avatar {
width:52px; height:52px; border-radius:50%; margin-bottom:12px;
background:linear-gradient(135deg,var(--teal),var(--teal-d));
display:flex; align-items:center; justify-content:center;
font-size:1.4rem; font-weight:900; color:#fff;
}
.sh-agent-name { font-weight:800; font-size:.95rem; color:#0f172a; margin-bottom:2px; }
.sh-agent-meta { font-size:.78rem; color:#64748b; margin-bottom:12px; }
.sh-agent-score { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:800; color:var(--teal-dd); background:#f0fdfa; border-radius:100px; padding:3px 10px; border:1px solid #99f6e4; }
.sh-input.is-invalid, .sh-select.is-invalid, select.is-invalid, input.is-invalid { border-color:#b91c1c !important; box-shadow:0 0 0 3px rgba(185,28,28,.12); }