/* ============================================================================
   ApexFinancials personal-loan funnel — v2 design system.

   Ported from /var/www/lendermatch.io/mortgage/heloc/assets/css/form.css, the newest
   file in the MortgageCo v2 lineage (MC v2 -> roofing-v2 -> MC v3 -> LenderMatch).
   Tokens, component rules, motion and focus behavior are kept faithful to that file so
   this funnel reads as the same product; only the accent is recolored to Apex blue.

   Deliberately keyed to the class hooks THIS funnel's engine already uses
   (.step--hidden, .purpose-btn, .credit-btn, .employment-btn, .continue-btn, ...)
   so form.js and lead-action.php are shared verbatim with index-new.php and the whole
   Playwright suite still applies. Nothing here is loaded by the current live form.

   Selected state keys off BOTH .active and [aria-checked="true"]; the engine sets both.
   ========================================================================== */

:root{
    /* Apex brand, lifted verbatim from the site's own styles.css :root so this funnel
       is the same blue as the logo and the rest of the domain. The v2 system uses one
       token (--ink) for BOTH body text and the primary action, which works when a brand
       is navy. Apex's brand is a bright blue that is unreadable as body copy, so the
       two are split here: --ink is the action color, --text is the copy color. */
    --ink:#007BFF;            /* brand action: buttons, progress, slider, selection */
    --ink-hover:#0056b3;
    --text:#111213;           /* headings + body copy */
    --ink-soft:#374151;
    --muted:#6B7280;
    --faint:#9CA3AF;
    --line:#E5E7EB;
    --row:#F1F5F9;            /* option row, = the site's --clr-track */
    --row-hover:#E8F1FD;
    --row-active:#E0EDFE;
    --accent:#007BFF;
    --accent-tint:#E8F1FD;
    --danger:#EF4444;
    --white:#ffffff;
    --r:14px; --r-pill:999px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --t:.18s;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:var(--white);
    font-size:16px;line-height:1.5;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
}

/* ------------------------------------------------------------------ header */
.header{border-bottom:1px solid var(--line);background:var(--white)}
.header__container{
    max-width:1040px;margin:0 auto;padding:16px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.header__logo-img{height:44px;width:auto;display:block}
.header__secure{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.8rem;font-weight:600;color:var(--muted);
}
.header__secure svg{color:var(--accent);flex:0 0 auto}

/* ------------------------------------------------- thin top progress rail */
.progress{height:3px;background:var(--line);position:sticky;top:0;z-index:30}
.progress__bar{
    height:100%;width:8%;background:var(--ink);
    border-radius:0 2px 2px 0;transition:width .55s var(--ease);
}

/* -------------------------------------------------------------------- page */
.canvas{flex:1 0 auto;display:flex;justify-content:center;padding:clamp(36px,6vh,64px) 24px 56px}
.step{display:none;width:100%;max-width:520px;margin:0 auto}
.step:not(.step--hidden){display:block;animation:fade .34s var(--ease) both}
.step--hidden{display:none !important}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step__content{width:100%}

/* --------------------------------------------------------------- headings */
.step__title{
    margin:0;
    font-size:clamp(1.4rem,3.9vw,1.78rem);
    font-weight:800;letter-spacing:-.025em;line-height:1.18;color:var(--text);
    max-width:20ch;outline:none;
}
.step__subtitle{margin:12px 0 0;max-width:44ch;font-size:.92rem;line-height:1.5;font-weight:500;color:var(--muted)}
.helper{margin:9px 0 0;font-size:.85rem;line-height:1.5;color:var(--muted)}

.input-group{margin-top:24px}
.step__subtitle + .input-group{margin-top:22px}

/* ---------------------------------------------------------------- options */
/* One shared row treatment for every choice group in the funnel: loan purpose,
   employment, credit band, and the homeowner radios. */
.purpose-buttons,.credit-buttons,.options-grid{display:flex;flex-direction:column;gap:10px}

.purpose-btn,.credit-btn,.option{
    display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:inherit;color:var(--text);
    background:var(--row);border:1.5px solid transparent;border-radius:var(--r);
    padding:16px 18px;cursor:pointer;
    transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
    -webkit-tap-highlight-color:transparent;
    font-size:1rem;font-weight:500;
    position:relative;
}
.purpose-btn:hover,.credit-btn:hover,.option:hover{background:var(--row-hover)}
.purpose-btn:focus-visible,.credit-btn:focus-visible,.option:focus-visible{
    outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,123,255,.12);
}
.option:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,123,255,.12)}

/* The label fills the row so the radio ring is pushed to the right edge. */
.purpose-btn > span,.credit-btn .credit-score,.option__content{flex:1 1 auto;min-width:0}
.credit-btn .credit-score{font-size:1rem;font-weight:500;color:var(--text)}

/* The ring. Drawn with ::after so no extra markup is needed and the existing engine
   keeps working unchanged. */
.purpose-btn::after,.credit-btn::after,.option::after{
    content:"";position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:21px;height:21px;border-radius:50%;border:2px solid #b6c4d2;background:transparent;
    transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.purpose-btn::before,.credit-btn::before,.option::before{
    content:"";position:absolute;right:25px;top:50%;
    width:7px;height:7px;border-radius:50%;background:#fff;
    transform:translateY(-50%) scale(0);transition:transform .2s var(--ease);
    z-index:1;
}

/* Selected. The engine sets .active and, where the markup declares role, aria-checked. */
.purpose-btn.active,.credit-btn.active,
.purpose-btn[aria-checked="true"],.credit-btn[aria-checked="true"],
.option:has(input:checked){
    background:var(--row-active);border-color:var(--ink);
}
.purpose-btn.active::after,.credit-btn.active::after,
.purpose-btn[aria-checked="true"]::after,.credit-btn[aria-checked="true"]::after,
.option:has(input:checked)::after{
    border-color:var(--ink);background:var(--ink);
}
.purpose-btn.active::before,.credit-btn.active::before,
.purpose-btn[aria-checked="true"]::before,.credit-btn[aria-checked="true"]::before,
.option:has(input:checked)::before{
    transform:translateY(-50%) scale(1);
}

/* The homeowner step uses real radios inside labels; hide the native control and let
   the label behave exactly like the button rows above. */
.option{margin:0}
.option input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.option--selected{background:var(--row-active);border-color:var(--ink)}
.option--selected::after{border-color:var(--ink);background:var(--ink)}
.option--selected::before{transform:translateY(-50%) scale(1)}

/* ----------------------------------------------------------------- slider */
.slider-container{margin-top:6px}
.slider-display{margin-bottom:20px}
.slider-amount{
    font-size:clamp(1.8rem,6vw,2.2rem);font-weight:800;letter-spacing:-.02em;
    color:var(--text);font-variant-numeric:tabular-nums;
}
.slider-wrapper{margin-bottom:4px}
input[type="range"]{
    -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
    background:var(--row-active);outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
    background:var(--ink);border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.28);cursor:grab;
}
input[type="range"]::-moz-range-thumb{
    width:26px;height:26px;border-radius:50%;background:var(--ink);
    border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.28);cursor:grab;
}
input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
input[type="range"]:focus-visible{box-shadow:0 0 0 4px rgba(0,123,255,.16)}
.slider-labels{display:flex;justify-content:space-between;margin-top:12px;font-size:.8rem;font-weight:500;color:var(--muted)}

/* Quick-pick chips under the amount slider. */
.quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{
    font-family:inherit;font-size:.88rem;font-weight:600;color:var(--muted);
    background:var(--row);border:1.5px solid transparent;border-radius:var(--r-pill);
    padding:8px 16px;cursor:pointer;
    transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.chip:hover{background:var(--row-hover);color:var(--ink)}
.chip.active{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.chip:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,123,255,.12)}

/* ----------------------------------------------------------------- fields */
label{display:block;font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:7px}
.input,input[type="text"],input[type="email"],input[type="tel"]{
    width:100%;font-family:inherit;font-size:1.05rem;color:var(--text);background:#fff;
    border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,123,255,.1)}
.input-wrapper{position:relative}
.input-wrapper .input-icon{
    position:absolute;left:15px;top:50%;transform:translateY(-50%);
    color:var(--faint);pointer-events:none;
}
.input-wrapper .input-icon ~ .input{padding-left:44px}
.field-row{display:flex;gap:12px}
.field-row > *{flex:1 1 0;min-width:0}

.error-msg{margin-top:9px;font-size:.83rem;font-weight:500;color:var(--danger);display:none}
.error-msg:not(:empty){display:block}

/* Address confirmation line + inline edit. */
#address-confirm{
    margin-top:10px;padding:11px 14px;background:var(--accent-tint);
    border-radius:10px;font-size:.86rem;color:var(--text);
}
#address-confirm[hidden]{display:none}
.address-edit-link{
    background:none;border:0;padding:0;margin-left:.4rem;
    color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;
    text-underline-offset:2px;cursor:pointer;
}
.manual-address-toggle{
    display:inline-block;margin-top:12px;background:none;border:none;padding:4px 0;
    font-family:inherit;font-size:.88rem;font-weight:600;color:var(--muted);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
    transition:color var(--t) var(--ease);
}
.manual-address-toggle:hover{color:var(--text)}
#manual-address-fields{margin-top:16px;display:flex;flex-direction:column;gap:14px}

/* ---------------------------------------------------------------- buttons */
.button-group{display:flex;flex-direction:column;align-items:flex-start}
.btn{font-family:inherit;cursor:pointer}
.btn--primary{
    margin-top:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--ink);color:#fff;font-size:1rem;font-weight:600;
    padding:14px 38px;border:none;border-radius:var(--r-pill);
    transition:transform .15s var(--ease),opacity .15s var(--ease),background .15s var(--ease);
    min-height:48px;
}
.btn--primary:hover:not(:disabled){background:var(--ink-hover);transform:translateY(-1px)}
.btn--primary:disabled{opacity:.32;cursor:not-allowed}
.btn--primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,123,255,.28)}

.btn--secondary{
    margin-top:18px;display:inline-flex;align-items:center;gap:6px;
    background:none;border:none;font-size:.92rem;font-weight:600;color:var(--muted);
    padding:8px 2px;transition:color var(--t) var(--ease);
    min-height:40px;
}
.btn--secondary:hover{color:var(--text)}
.btn--secondary:focus-visible{outline:none;color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* Back sits above the primary in the DOM on this funnel; flex-order puts the primary
   first visually so the reading order matches the reference system.
   The primary stays a compact pill on desktop and only goes full width on mobile,
   which is what the reference does. A full-width disabled slab reads as a broken bar. */
.button-group{flex-direction:column;align-items:flex-start}
.button-group .btn--primary{order:1;width:auto}
.button-group .btn--secondary{order:2;align-self:flex-start}

/* --------------------------------------------------------- trust + legal */
.card--security{
    display:flex;align-items:flex-start;gap:11px;margin-top:24px;
    padding:14px 16px;background:var(--row);border-radius:12px;
}
.card--security svg{color:var(--accent);flex:0 0 auto;margin-top:2px}
.card--security strong{display:block;font-size:.88rem;font-weight:600;color:var(--text)}
.card--security div div{margin-top:3px;font-size:.8rem;line-height:1.5;color:var(--muted)}

.legal-text{margin-top:18px;font-size:.71rem;line-height:1.55;color:var(--faint)}
.legal-text a{color:var(--muted);text-decoration:underline}

/* ---------------------------------------------------------------- footer */
/* Fine print. Legally it has to be here, visually it must never compete with the
   question the consumer is answering. */
.disclaimer-footer{
    margin-top:auto;border-top:1px solid var(--line);
    padding:26px 24px 34px;background:var(--white);
}
.disclaimer-footer__container{max-width:760px;margin:0 auto}
.disclaimer-footer h4{
    margin:16px 0 5px;font-size:.72rem;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.05em;
}
.disclaimer-footer h4:first-child{margin-top:0}
.disclaimer-footer p{margin:0;font-size:.69rem;line-height:1.55;color:var(--faint)}
.disclaimer-footer strong{color:var(--muted);font-weight:600}
.disclaimer-links{
    margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
}
.disclaimer-links a{font-size:.74rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.disclaimer-links a:hover{color:var(--text)}

/* ------------------------------------------------------- specialist popup */
/* The overlay carries the id; .specialist-popup is the card inside it. The engine
   toggles the overlay's inline display between 'none' and 'flex'. */
.specialist-popup-overlay{
    position:fixed;inset:0;z-index:50;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(0,123,255,.45);
}
.specialist-popup{
    width:100%;max-width:420px;background:#fff;border-radius:18px;
    padding:30px 26px;box-shadow:0 18px 48px rgba(0,123,255,.24);
    animation:fade .28s var(--ease) both;text-align:center;
}
.specialist-popup__icon{color:var(--accent);margin-bottom:14px;display:flex;justify-content:center}
.specialist-popup__title{margin:0 0 8px;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.specialist-popup__subtitle{margin:0 0 8px;font-size:.98rem;line-height:1.5;color:var(--ink-soft)}
.specialist-popup__note{margin:0 0 22px;font-size:.85rem;line-height:1.55;color:var(--muted)}
.specialist-popup__buttons{display:flex;flex-direction:column;gap:10px}
/* Reset the step-level button spacing and ordering inside the modal. */
.specialist-popup__btn{margin-top:0 !important;width:100%;order:0 !important;align-self:stretch !important;justify-content:center}
.specialist-popup__btn.btn--secondary{
    background:var(--row);border-radius:var(--r-pill);padding:14px 38px;min-height:48px;
    justify-content:center;color:var(--ink-soft);
}
.specialist-popup__btn.btn--secondary:hover{background:var(--row-hover);color:var(--text)}

/* --------------------------------------------------------------- success */
.success-icon{color:var(--accent);margin-bottom:16px}
.thinking-container{margin-top:26px}
.thinking-dots{display:flex;gap:7px;margin-bottom:14px}
.thinking-dots .dot{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.35;animation:pulse 1.2s var(--ease) infinite}
.thinking-dots .dot:nth-child(2){animation-delay:.16s}
.thinking-dots .dot:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.thinking-text{font-size:.95rem;font-weight:500;color:var(--muted)}

/* ---------------------------------------------------------------- offers */
.offers-grid{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.lender-offer-card{
    border:1.5px solid var(--line);border-radius:var(--r);padding:18px;
    display:flex;flex-direction:column;gap:12px;background:#fff;
    transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.lender-offer-card:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(0,123,255,.07)}
.lender-logo-section{display:flex;align-items:center;min-height:30px}
.lender-logo-img{max-height:30px;max-width:150px;width:auto;object-fit:contain}
.lender-title{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.015em;color:var(--text)}
.lender-desc{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
.lender-benefits{margin:0;padding-left:18px;font-size:.88rem;line-height:1.7;color:var(--muted)}
.lender-cta-button{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;
    padding:12px 26px;border-radius:var(--r-pill);text-decoration:none;
    transition:background .15s var(--ease),transform .15s var(--ease);
    min-height:44px;
}
.lender-cta-button:hover{background:var(--ink-hover);transform:translateY(-1px)}
.lender-cta-button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,123,255,.28)}
.offers-more-heading{
    margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line);
    font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
.multiple-offers-header{margin-bottom:4px}
.congratulations-title{margin:0;font-size:clamp(1.4rem,3.9vw,1.78rem);font-weight:800;letter-spacing:-.025em;color:var(--text)}
.offers-subtitle{margin:10px 0 0;font-size:.95rem;color:var(--muted)}
.offers-note{margin:6px 0 0;font-size:.82rem;color:var(--faint)}

/* ------------------------------------------------------------ responsive */
@media (max-width:520px){
    .canvas{padding-left:20px;padding-right:20px}
    .step:not(.step--hidden){display:flex;flex-direction:column}
    .header__container{padding:12px 20px}
    .header__logo-img{height:36px}
    .field-row{flex-direction:column;gap:14px}
    .button-group{align-items:stretch}
    .button-group .btn--primary{width:100%}
    .button-group .btn--secondary{align-self:center}
    .disclaimer-footer{padding:22px 20px 30px}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}

/* The skip is a genuine third choice, not a second CTA. Keep it visibly quieter than
   the primary so the SSN branch does not read as two equally weighted buttons. */
.ssn-skip-btn.btn--secondary{
    margin-top:10px;font-size:.9rem;font-weight:500;color:var(--muted);
    text-decoration:underline;text-underline-offset:3px;
}
.ssn-skip-btn.btn--secondary:hover{color:var(--text)}