/* vb-page-financing-form.v1.css — /financing-form/ only.
 *
 * The form itself is styled by css/vb-form.v3.css (it sits inside
 * .elementor-widget-form and uses the vb-lf-* classes like every other
 * rebuilt form). This file adds what that sheet does not have: the page
 * section and card, the section titles, three-column rows, the
 * Individual/Joint pills, the honeypot, and the validation highlight. */

.vb-fin-sec{--navy:#0F1E2E;--gold:#BFA15A;--sand:#D8CFC4;--line:#E6E6E6;--ink:#3a444f;
  background:#F4F6F9;padding:56px 20px 64px;
  font-family:"Montserrat","Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.vb-fin-sec *{box-sizing:border-box}
.vb-fin-wrap{max-width:960px;margin:0 auto}
.vb-fin-intro{max-width:760px;margin:0 auto 26px;text-align:center}
.vb-fin-intro h2{margin:0 0 12px;font-size:32px;line-height:1.15;color:var(--navy);font-weight:800;position:relative;padding-bottom:14px}
.vb-fin-intro h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:66px;height:4px;border-radius:2px;background:var(--gold)}
.vb-fin-intro p{margin:0;color:#5C6672;font-size:16px;line-height:1.65}

/* The card wrapper the shared sheet cards on is .elementor-widget-wrap:has(> .elementor-widget-form). */
.vb-fin-sec .elementor-widget-wrap{display:block}

/* Toggle */
.vb-fin-toggle{display:flex;gap:10px;margin:0 0 14px}
.vb-fin-pill{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:3px;background:#fff;
  font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;user-select:none;text-align:center}
.vb-fin-pill input{width:16px;height:16px;margin:0;accent-color:var(--navy);cursor:pointer}
.vb-fin-pill.is-on{border-color:var(--navy);background:#EEF1F5}

/* Section titles, same treatment as the referral form. */
.elementor-widget-form .vb-fin .vb-section-title{display:block;font-size:16px;font-weight:700;color:#1a1a1a;margin:14px 0 8px;padding:0;border:0;background:transparent}
.elementor-widget-form .vb-fin .vb-fin-group > .vb-section-title:first-child{margin-top:4px}

/* Rows: vb-lf-row is a 2-column grid in the shared sheet; add 1 and 3. */
.elementor-widget-form .vb-fin .vb-fin-row--1{grid-template-columns:1fr}
.elementor-widget-form .vb-fin .vb-fin-row--3{grid-template-columns:1fr 1fr 1fr}
/* SSN | Driver License #: both carry the same note, and the row aligns to the
   bottom as a backup so the two inputs share one line even if a label wraps. */
.elementor-widget-form .vb-fin .vb-fin-row--ids{align-items:end}
/* License expiry: right column, directly under Driver License #. */
.elementor-widget-form .vb-fin .vb-fin-row--right > *{grid-column:2}
@media (max-width:767px){
  .elementor-widget-form .vb-fin .vb-fin-row--3{grid-template-columns:1fr}
  .elementor-widget-form .vb-fin .vb-fin-row--right > *{grid-column:auto}
  .vb-fin-toggle{flex-direction:column}
}

/* Hidden block: the attribute wins over any display rule. */
.vb-fin-group[hidden]{display:none !important}

/* Date input sits at the same height as the text inputs. */
.elementor-widget-form .vb-fin input[type="date"]{width:100% !important;padding:9px 13px !important;
  border:1.5px solid var(--line) !important;border-radius:3px !important;background:#fff !important;
  font-family:inherit !important;font-size:14px !important;line-height:1.45 !important;color:#1a1a1a !important;
  box-shadow:none !important;min-height:42px}
.elementor-widget-form .vb-fin input[type="date"]:focus{border-color:var(--navy) !important;box-shadow:0 0 0 3px rgba(15,30,46,.12) !important}

/* Checkbox rows reuse the consent block layout without its heading. */
.elementor-widget-form .vb-fin .vb-lf-group--cb{margin:2px 0 6px}

/* Validation highlight from the handler's 422 reply. */
.elementor-widget-form .vb-fin .vb-fin-bad{border-color:#B3261E !important;box-shadow:0 0 0 3px rgba(179,38,30,.12) !important}

/* Turnstile widget host, immediately above the button. */
.elementor-widget-form .vb-fin .vb-fin-turnstile{margin:4px 0 6px;min-height:65px}

/* Disclosure line, verbatim from the live form. */
.elementor-widget-form .vb-fin .vb-fin-disclosure{margin:10px 0 4px;font-size:13px;line-height:1.55;color:#555}
.elementor-widget-form .vb-fin .vb-fin-disclosure a{color:var(--navy);text-decoration:underline}

/* Honeypot: never visible, never focusable. */
.vb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Card top spacing when it has no heading widget above it. */
.vb-fin-sec .elementor-widget-wrap:has(> .elementor-widget-form){margin-top:0 !important;padding-top:22px !important}
@media (max-width:767px){.vb-fin-sec{padding:40px 16px 48px}.vb-fin-intro h2{font-size:26px}}

/* ------------------------------------------------ 2026-09-22 polish pass */
/* Checkbox rows: a clear gap between the box and its wording, both centred
 * on one line, the whole label the click target (it IS the <label>). The
 * shared sheet's `.vb-lf-group > label {display:block !important}` and its
 * flex-start/8px/2px-margin checkbox rule are both overridden with the same
 * !important weight at higher specificity, or the box and wording sit inline
 * with no gap (measured on staging, gap 0 / wrapped at 390). */
.elementor-widget-form .vb-fin .vb-lf-group--cb > label.vb-lf-cb{display:flex !important;align-items:center !important;gap:12px !important;min-height:26px;cursor:pointer;margin:0 !important;text-transform:none !important;font-size:13px !important;font-weight:400 !important;letter-spacing:0 !important;line-height:1.4 !important}
.elementor-widget-form .vb-fin .vb-lf-cb input[type="checkbox"]{margin:0 !important;flex:0 0 18px;width:18px !important;height:18px !important;cursor:pointer}
.elementor-widget-form .vb-fin .vb-lf-cb span{font-size:13px !important;line-height:1.4 !important}
.elementor-widget-form .vb-fin .vb-lf-group--cb{margin:4px 0 8px}

/* Date widgets: typed MM/DD/YYYY with the native picker behind the calendar
 * button. The native input stays rendered (1px, transparent) so showPicker()
 * is allowed to open it; it is never the thing the visitor types into. */
.vb-fin-date-wrap{position:relative}
.elementor-widget-form .vb-fin .vb-fin-date-text{padding-right:46px !important}
.vb-fin-date-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;border-radius:3px;color:#0F1E2E;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vb-fin-date-btn:hover{background:#EEF1F5}
.vb-fin-date-btn:focus-visible{outline:2px solid #0F1E2E;outline-offset:2px}
.vb-fin-date-btn svg{width:20px;height:20px;display:block}
.vb-fin-date-native{position:absolute;right:12px;top:50%;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;margin:0}
.vb-sr{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}

/* Address widgets: one Places line; the four posted parts stay hidden unless
 * Places never loads (then the script shows them and hides the line). */
.vb-fin-addr-parts[hidden]{display:none !important}
.elementor-widget-form .vb-fin .vb-fin-addr-parts{margin-top:8px}
.elementor-widget-form .vb-fin .vb-fin-addr-line[hidden]{display:none !important}
/* Google's dropdown: above everything on the page and readable on a phone. */
.pac-container{z-index:10000 !important;font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;border-radius:0 0 3px 3px;box-shadow:0 10px 30px rgba(15,30,46,.18)}
.pac-container .pac-item{padding:9px 12px;font-size:14px;line-height:1.4;cursor:pointer;border-top:1px solid #EEF1F5}
.pac-container .pac-item-query{font-size:14px}
@media (max-width:767px){.pac-container .pac-item{white-space:normal;padding:10px 12px}}

/* ---------------------------------------------- 2026-09-22 structure pass */
/* Titled blocks with a divider; a strong divider before the second applicant. */
.elementor-widget-form .vb-fin .vb-fin-block{border-top:1px solid #E6E6E6;margin-top:18px;padding-top:14px}
.elementor-widget-form .vb-fin .vb-fin-group > .vb-fin-block:first-child{border-top:0;margin-top:4px;padding-top:0}
.elementor-widget-form .vb-fin .vb-fin-block__title{margin:0 0 10px !important;font-size:18px !important;line-height:1.2 !important;font-weight:800 !important;color:#0F1E2E !important;text-transform:none !important;letter-spacing:.2px}
.elementor-widget-form .vb-fin .vb-fin-divider{margin:28px 0 0;padding-top:18px;border-top:3px solid #0F1E2E}
.elementor-widget-form .vb-fin .vb-fin-divider__title{margin:0 0 4px !important;font-size:20px !important;line-height:1.2 !important;font-weight:800 !important;color:#0F1E2E !important;text-transform:uppercase !important;letter-spacing:.6px}
.elementor-widget-form .vb-fin .vb-fin-divider + .vb-fin-block{border-top:0;margin-top:6px;padding-top:0}
.elementor-widget-form .vb-fin .vb-fin-subtitle{margin:14px 0 4px !important;font-size:14px !important;font-weight:700 !important;color:#0F1E2E !important}
/* Small grey note above a control (the Social Security field). */
.elementor-widget-form .vb-fin .vb-fin-note{margin:0 0 5px !important;font-size:12px !important;line-height:1.4 !important;color:#6B7280 !important;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important}
/* A link inside checkbox wording (the Electronic Communications Agreement). */
.elementor-widget-form .vb-fin .vb-lf-cb a{color:#0F1E2E;text-decoration:underline}
/* 320 to 359 px: the Turnstile widget is a fixed 300 px box and the form column is 280 px wide there,
   so it pushed the page 20 px sideways (pre-swap audit 2026-10-01). Scale it to fit; nothing is clipped. */
@media (max-width:359px){.elementor-widget-form .vb-fin .vb-fin-turnstile{transform:scale(.92);transform-origin:0 0;min-height:60px}}