/*
Sell My Gun page — page-specific styles ported from
_reference/Sell My Gun/Sell My Gun Page 06-22-2026.html.
Foundation CSS (tokens, topbar, header, footer, .eyebrow) lives in
main.css and is never re-imported. Conditionally enqueued for the
"Sell My Gun" page template (functions.php).
The form itself renders from Contact Form 7 content, so the mockup's
form classes (.form-section, .form-row, .form-group, …) are used inside
the CF7 form body and styled here, plus CF7/DnD-upload control skinning.
*/

/* ── Breadcrumb bar ─────────────────────────────────── */
/* Base styles promoted to main.css (shared with the MA Law cluster);
   this page's wrap is 1100px so the crumb narrows to match. */
.crumb-inner { max-width: 1100px; }

/* ── Page shell ─────────────────────────────────────── */
.sell-page { background: var(--dark); min-height: 80vh; padding: 60px 0 100px; }
.sell-wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* Page header */
.sell-page-head { text-align: center; margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.sell-page-head .eyebrow { justify-content: center; margin-bottom: 12px; }
.sell-page-head h1 { font-family: var(--head); font-size: clamp(32px, 4vw, 52px); font-weight: 800; color: var(--white); margin-bottom: 14px; line-height: 1.1; }
.sell-page-head h1 em { font-style: italic; color: var(--gold); }
.sell-page-head p { font-size: 17px; color: var(--mid); max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* Two column layout */
.sell-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }

/* ── Form panel ─────────────────────────────────────── */
.sell-form { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 4px; padding: 40px; }
.sell-form h2 { font-family: var(--head); font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.form-section { margin-bottom: 32px; }
.form-section-title { font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.full { grid-template-columns: 1fr; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.form-group label .req { color: var(--gold); margin-left: 3px; }
.form-group .wpcf7-form-control-wrap { display: block; }
/* Controls scoped under .sell-form: Underscores' base style.css sets
   input[type=…]:focus { color:#111 } at (0,2,1) — these must outrank it,
   and the :focus rule must re-assert the color (same fix pattern as the
   contact page's .contact-form-panel scoping). */
.sell-form .form-group input,
.sell-form .form-group select,
.sell-form .form-group textarea { background: var(--dark); border: 1px solid var(--border); border-radius: 2px; padding: 12px 14px; font-family: var(--body); font-size: 14px; color: var(--white); transition: border-color .15s, box-shadow .15s; outline: none; width: 100%; }
.sell-form .form-group input:focus,
.sell-form .form-group select:focus,
.sell-form .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,60,.12); color: var(--white); }
.sell-form .form-group select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C636F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.sell-form .form-group textarea { resize: vertical; min-height: 100px; }
.sell-form .form-group input::placeholder,
.sell-form .form-group textarea::placeholder { color: var(--mid); }
.sell-form .form-group select option { background: var(--dark); }

/* Checkbox chips (CF7 renders .wpcf7-checkbox > .wpcf7-list-item) */
.sell-form .wpcf7-checkbox { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.sell-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.sell-form .wpcf7-checkbox .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; background: var(--dark); border: 1px solid var(--border); border-radius: 2px; padding: 10px 16px; cursor: pointer; transition: border-color .15s; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--silver); }
.sell-form .wpcf7-checkbox .wpcf7-list-item label:hover { border-color: var(--gold); }
.sell-form .wpcf7-checkbox input { width: auto; margin: 0; accent-color: var(--gold); }

/* Photo upload — selectors match the Drag & Drop Multiple File Upload
   plugin's markup (.codedropz-*); .photo-upload kept for parity. */
.photo-upload,
.sell-form .codedropz-upload-handler { border: 2px dashed var(--border); border-radius: 3px; text-align: center; cursor: pointer; transition: border-color .15s; background: var(--dark); }
.photo-upload:hover,
.sell-form .codedropz-upload-handler:hover { border-color: var(--gold); }
.sell-form .codedropz-upload-inner { color: var(--mid); font-size: 14px; }
.sell-form .codedropz-upload-inner h3 { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--mid); }
.sell-form .codedropz-btn-wrap a { color: var(--gold-lt); }
.sell-form .dnd-upload-status .dnd-upload-details { background: var(--dark); border: 1px solid var(--border); }
.pu-hint { font-size: 12px; color: var(--mid); margin-top: 6px; opacity: .7; }

/* Disclaimer box (inside CF7 form content) */
.sell-disclaimer { background: rgba(196,154,60,.07); border: 1px solid rgba(196,154,60,.2); border-left: 3px solid var(--gold); border-radius: 3px; padding: 14px 18px; margin-bottom: 20px; }
.sell-disclaimer .sd-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.sell-disclaimer .sd-text { font-size: 13px; color: var(--mist); line-height: 1.65; }
.sell-disclaimer .sd-text strong { color: var(--silver); }

/* Submit button (CF7 [submit class:btn-submit]) */
.sell-form .btn-submit,
.sell-form .wpcf7-submit { width: 100%; background: var(--gold); color: var(--ink); font-family: var(--head); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 18px; border: none; border-radius: 2px; cursor: pointer; transition: background .15s; margin-top: 8px; }
.sell-form .btn-submit:hover,
.sell-form .wpcf7-submit:hover { background: var(--gold-lt); }
.form-note { font-size: 12px; color: var(--mid); text-align: center; margin-top: 12px; line-height: 1.6; }

/* CF7 validation + response states (mirrors the contact-page skin) */
.sell-form .wpcf7-not-valid-tip { color: color-mix(in srgb, var(--red) 55%, white); font-size: 12px; letter-spacing: 0; text-transform: none; margin-top: 6px; }
.sell-form input.wpcf7-not-valid,
.sell-form select.wpcf7-not-valid,
.sell-form textarea.wpcf7-not-valid { border-color: var(--red); }
.sell-form .wpcf7 form .wpcf7-response-output { background: var(--dark); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 3px; padding: 14px 18px; margin: 20px 0 0; font-size: 14px; color: var(--silver); }
.sell-form .wpcf7 form.invalid .wpcf7-response-output,
.sell-form .wpcf7 form.unaccepted .wpcf7-response-output,
.sell-form .wpcf7 form.aborted .wpcf7-response-output,
.sell-form .wpcf7 form.failed .wpcf7-response-output,
.sell-form .wpcf7 form.spam .wpcf7-response-output { border-left-color: var(--red); }
.sell-form .wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--gold); }
.sell-form .wpcf7-spinner { background-color: var(--mist); }

/* ── Sidebar ────────────────────────────────────────── */
.sell-sidebar { display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; padding: 24px; }
.side-card h3 { font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.side-step { display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start; }
.side-step:last-child { margin-bottom: 0; }
.side-num { font-family: var(--display); font-size: 28px; color: var(--gold); line-height: 1; flex-shrink: 0; min-width: 28px; }
.side-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.side-text span { font-size: 13px; color: var(--mid); line-height: 1.5; }
.side-contact-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--mist); }
.side-contact-line:last-child { border-bottom: none; }
.side-contact-line a { color: var(--mist); }
.side-contact-line a:hover { color: var(--gold-lt); }
.side-contact-line .sci { font-size: 16px; flex-shrink: 0; }
.side-hours { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.side-hours-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-bottom: 10px; }
.side-hours-times { font-size: 13px; color: var(--mist); line-height: 2; }
.tip-item { display: flex; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--mist); line-height: 1.55; }
.tip-item:last-child { margin-bottom: 0; }
.tip-item::before { content: '\2713'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.side-tip-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--mid); line-height: 1.65; }
.side-tip-note strong { color: var(--silver); }
.side-card.brands { background: rgba(196,154,60,.06); border-color: rgba(196,154,60,.2); }
.side-card.brands h3 { color: var(--gold-lt); }
.side-card.brands p { font-size: 13px; color: var(--mist); line-height: 1.7; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .sell-layout { grid-template-columns: 1fr; }
  .sell-sidebar { order: -1; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr; }
  .sell-form { padding: 24px; }
}

/* ── ACCEPTANCE CHECKBOXES (added 2026-08-16, mirrors page-join-our-team.css) ── */
.sell-form .wpcf7-acceptance{display:block}
.sell-form .wpcf7-acceptance .wpcf7-list-item{margin:0 0 14px;display:block}
.sell-form .wpcf7-acceptance .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mist);line-height:1.6;margin-bottom:0;cursor:pointer}
.sell-form .wpcf7-acceptance input[type="checkbox"]{width:auto;margin:3px 0 0;accent-color:var(--gold);flex-shrink:0}
.sell-form .wpcf7-acceptance a{color:var(--gold-lt);text-decoration:underline}
.sell-form .wpcf7-acceptance a:hover{color:var(--gold)}
.sell-form .wpcf7-acceptance .wpcf7-list-item label::after{content:' *';color:var(--gold);font-weight:700}