/**
 * quote-steps.css — 3-step estimate form (Black Ladder).
 * Sits on top of quote.css: field styling stays shared, this file only adds the
 * stepper, the choice cards and the photo picker. Self-contained so it can be
 * ported to another site without hunting for rules in the design system.
 *
 * ⚠️ Accents use --purple, never --color-secondary: blackladder.css redefines that
 * one to the brand lime, so it silently resolves to yellow.
 */

/* ── Progress ─────────────────────────────────────────── */
.qprogress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}
.qprogress-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-top: .85rem;
    border-top: 3px solid var(--color-border, #E7E7E7);
    color: var(--color-text-muted, #636363);
    font-size: .82rem;
    font-weight: 600;
    transition: color .2s, border-color .2s;
}
.qprogress-step.is-active,
.qprogress-step.is-done { border-top-color: var(--color-primary, #12243B); color: var(--color-primary, #12243B); }
.qprogress-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-border, #E7E7E7);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.qprogress-step.is-active .qprogress-dot,
.qprogress-step.is-done .qprogress-dot { background: var(--color-primary, #12243B); }
@media (max-width: 520px) { .qprogress-label { display: none; } }

/* ── Steps ────────────────────────────────────────────── */
.qstep { display: none; }
.qstep.is-active { display: block; animation: qfade .22s ease-out; }
@keyframes qfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qstep-title {
    margin: 0 0 .35rem;
    font-family: var(--font-heading, inherit);
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--color-primary, #12243B);
}
.qstep-sub { margin: 0 0 1.5rem; color: var(--color-text-muted, #636363); font-size: .93rem; }

/* ── Choice cards (contact preference) ────────────────── */
.qcards { display: grid; gap: .7rem; }
.qcards--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .qcards--2 { grid-template-columns: 1fr; } }
.qcard {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    border: 2px solid var(--color-border, #E7E7E7);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.qcard:hover { border-color: var(--purple, #8C52FF); }
.qcard input { position: absolute; opacity: 0; pointer-events: none; }
/* Selected state matches the hero step 1 — the two screens are one flow. */
.qcard.is-active {
    border-color: var(--purple, #8C52FF);
    background: #F6F2FF;
    box-shadow: 0 1px 0 rgba(140, 82, 255, .10);
}
.qcard-ico { color: var(--purple, #8C52FF); display: flex; }
.qcard-txt { font-size: .93rem; font-weight: 600; color: var(--color-text, #2d2d2d); }

/* ── Photo picker ─────────────────────────────────────── */
.qdrop {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border: 2px dashed var(--color-border, #E7E7E7);
    border-radius: 8px;
    background: #FAFBFC;
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.qdrop:hover { border-color: var(--purple, #8C52FF); background: #F4F7FB; }
.qdrop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qdrop-ico { color: var(--purple, #8C52FF); display: flex; }
.qdrop-txt { font-size: .9rem; font-weight: 600; color: var(--color-text, #2d2d2d); }
.qdrop-txt em { display: block; font-style: normal; font-weight: 400; font-size: .78rem; color: var(--color-text-muted, #636363); }

.qthumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .7rem 0 0; padding: 0; }
.qthumbs li { width: 66px; height: 66px; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border, #E7E7E7); }
.qthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Navigation ───────────────────────────────────────── */
.qnav { margin-top: 1.6rem; }
.qnav--split { display: flex; align-items: center; gap: .8rem; }
.qnav--split .quote-submit { margin-left: auto; }
.qback {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem 1rem;
    border: 1px solid var(--color-border, #E7E7E7);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text-muted, #636363);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}
.qback:hover { border-color: var(--color-primary, #12243B); color: var(--color-primary, #12243B); }

/* Inline validation — the message sits with the field it belongs to. */
.quote-field.has-error input,
.quote-field.has-error select { border-color: #d64545; }
.qerr { display: block; margin-top: .35rem; font-size: .8rem; color: #d64545; }

.quote-field-row--3 { display: grid; grid-template-columns: 2fr .7fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .quote-field-row--3 { grid-template-columns: 1fr; } }

/* quote.css sets display:grid on .quote-field-row, which outranks the UA's
   [hidden]{display:none} — without this the scheduling fields show even when
   "Call me anytime" is selected. */
.qsched[hidden] { display: none !important; }

/* ── Header on a light page ───────────────────────────────
   The site header is transparent until you scroll — it is built for the dark
   hero image on the homepage. /quote opens on a white gradient, so the white
   nav, phone number and hamburger were invisible above the fold. Mirror the
   `.scrolled` treatment from the start, scoped to this page only. */
body:has(.quote-hero) .header {
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
body:has(.quote-hero) .header .nav-link,
body:has(.quote-hero) .header .header-phone { color: var(--color-text); }
body:has(.quote-hero) .header .nav-link:hover,
body:has(.quote-hero) .header .header-phone:hover { color: var(--color-primary); }
body:has(.quote-hero) .header .mobile-menu-toggle span { background: var(--color-text); }
body:has(.quote-hero) .header .logo-default { display: none; }
body:has(.quote-hero) .header .logo-alt { display: block; }

/* ── Hero step-1 (homepage) ───────────────────────────────
   The hero form card is white on a dark photo; the choice cards and helper
   text ride along with the existing .hero-form* styling. */
.hero-form-legend {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-muted, #636363);
}
.hero-form .qcard { padding: .7rem .8rem; }
.hero-form .qcard-txt { font-size: .86rem; }
.hero-form .qsched[hidden] { display: none !important; }
.hero-form-note {
    margin: .7rem 0 0;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--color-text-muted, #636363);
    text-align: center;
}
.hero-form-invalid { border-color: #d64545 !important; }

/* ── Fit the first step above the fold ────────────────────
   The page was inherited from a single-screen form; with the stepper on top the
   "Next" button fell below the fold on a 900px laptop (and under the cookie bar).
   Tighten the hero type and the field rhythm — the form is the page, the headline
   is not. */
/* The site header is position:fixed and reserves no space, so the hero has to
   clear it itself — at 44px the card was sliding under the menu. */
.quote-hero { padding-top: calc(var(--header-height, 80px) + 14px); padding-bottom: 48px; }
.quote-eyebrow { margin-bottom: 8px; }
.quote-title { font-size: clamp(1.7rem, 2.3vw, 1.95rem); line-height: 1.1; margin-bottom: 8px; }
.quote-lead { font-size: .88rem; line-height: 1.5; margin-bottom: 12px; }

.quote-form-wrap { padding: 22px 30px 24px; }
.qprogress { margin-bottom: 14px; }
.qprogress-step { padding-top: .65rem; font-size: .78rem; }
.qstep-title { font-size: 1.22rem; margin-bottom: .25rem; }
.qstep-sub { font-size: .86rem; margin-bottom: .8rem; }

.qsteps .quote-field { margin-bottom: 0; }
.qsteps .quote-field label { margin-bottom: 3px; font-size: .73rem; }
.qsteps .quote-field input,
.qsteps .quote-field select,
.qsteps .quote-field textarea { padding: 9px 12px; font-size: .89rem; }
.qsteps .quote-field-row, .qsteps .quote-field-row--3 { gap: .8rem; }
.qsteps .qcard { padding: .7rem .85rem; }
.qsteps .qcard-txt { font-size: .87rem; }
.qsteps .qdrop { padding: .8rem .95rem; }
.qnav { margin-top: .9rem; }
.qsteps .quote-submit, .qsteps .qback { padding: .7rem 1.1rem; font-size: .9rem; }
.quote-fineprint { margin-top: .9rem; font-size: .74rem; }

/* Phones scroll anyway — keep the tap targets comfortable there. */
@media (max-width: 620px) {
    .qsteps .quote-field input,
    .qsteps .quote-field select,
    .qsteps .quote-field textarea { padding: 12px 13px; font-size: 16px; } /* 16px stops iOS zooming on focus */
    .quote-form-wrap { padding: 24px 20px 24px; }
}

/* ── Hero step-1 in brand purple ──────────────────────────
   The hero form used the brand yellow; purple is the site's other accent
   (--purple #8C52FF, declared in blackladder.css) and matches the /quote
   headline, so the two steps read as one flow. Text goes white — the dark ink
   the yellow button used has no contrast on purple.
   ⚠️ Do NOT use --color-secondary here: blackladder.css redefines it to the
   lime further down, so it silently resolves to the very yellow we're removing. */
.hero-form { border-top-color: var(--purple, #8C52FF) !important; }
.hero-form .qcard-ico,
.hero-form .qcard-ico svg { color: var(--purple, #8C52FF) !important; }
.hero-form .qcard.is-active { border-color: var(--purple, #8C52FF); background: #F6F2FF; }
.hero-form-submit {
    background: var(--purple, #8C52FF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(140, 82, 255, .35) !important;
}
.hero-form-submit:hover {
    background: var(--purple-dark, #7A45E0) !important;
    box-shadow: 0 10px 24px rgba(140, 82, 255, .45) !important;
}

/* ── "Why Homeowners Choose Us" on dark ───────────────────
   The card's icons are the brand lime (#EDFF23) — on white that is roughly a
   1.1:1 contrast, i.e. invisible. On the navy the phone card already uses, the
   same lime is the point. Card goes dark; the icons stay as they are. */
.quote-side-why {
    background: linear-gradient(135deg, var(--color-primary, #12243B) 0%, #1a2c4a 100%);
    border-color: transparent;
    color: #FFFFFF;
}
.quote-side-why .quote-side-title { color: #FFFFFF; }
.quote-side-why .quote-side-list li { color: rgba(255, 255, 255, .72); }
.quote-side-why .quote-side-list li > div strong { color: #FFFFFF; }