/* ==========================================================================
   Clear Auto Choice - Financing & Payment Options
   Covers: tools/financing.html
   Loaded alongside style.css (shared header/footer/nav/tokens come from
   there) — this file only adds the layout specific to this one page.
   Class names are "fin-" prefixed to keep them from colliding with any
   other page's page-specific CSS (same convention as "sc-"/"savings-" on
   the savings calculator).
   ========================================================================== */

/* ---------- "Ways to pay" — compact 4-up card grid ----------
   One glanceable card per payment method (icon, name, headline stat, one
   clause of detail) rather than a paragraph each, so this stays a quick
   summary and the page still gets to the calculator — its actual
   interactive tool — with minimal scrolling. */
.fin-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fin-payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fin-payment-method {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-payment-method--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.fin-payment-method-icon { font-size: 1.1rem; margin-bottom: 2px; }
.fin-payment-method-title { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.fin-payment-method-stat { font-size: 0.92rem; font-weight: 700; color: var(--accent); }
.fin-payment-method-desc { font-size: 0.78rem; color: var(--slate); line-height: 1.4; margin: 2px 0 0; }

/* ---------- Calculator — promoted as the page's main feature ---------- */
.fin-calc-feature {
  background: linear-gradient(180deg, #F2F5FF 0%, var(--paper) 100%);
  border-top: 1px solid var(--line);
}

/* The calculator's own card shell — everything from the vehicle bar down
   through the inputs/results grid sits inside this one bordered, shadowed
   card, so the tool reads as a single self-contained instrument on the
   page rather than form fields floating loose in the section. */
.fin-tool-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px -2px rgba(20, 24, 31, 0.06);
  overflow: hidden;
}
.fin-tool-card .fin-calc-layout { padding: 24px; }

/* Large vehicle hero — sits at the top of the input column, directly
   across from the monthly-payment hero at the top of the results column
   (see .fin-result-card-highlight below), so "what you're buying" and
   "what it costs monthly" read as a matched pair of headline boxes
   instead of one being an afterthought. Deliberately a bright/light
   treatment where the monthly-payment box is dark, so the two large
   boxes read as a pair rather than competing for the same visual weight.
   Only shown once a real vehicle's data has arrived via query params
   (see renderVehicleCard() in this page's script) — id="fin-vehicle-card"
   is kept for that existing JS, only the class/markup changed. */
.fin-vehicle-hero {
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 20px -2px rgba(20, 24, 31, 0.06);
}
.fin-vehicle-hero-photo {
  width: 100%;
  height: 220px;
  background-color: #EDEFF3;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
}
.fin-vehicle-hero-info { padding: 16px 18px; }
.fin-vehicle-hero-info .fin-vehicle-label { font-size: 1.15rem; white-space: normal; }
.fin-vehicle-hero-info .fin-vehicle-price { font-size: 1.3rem; font-weight: 800; color: var(--accent); margin-top: 4px; }
.fin-vehicle-hero-info .fin-vehicle-bar-link { display: inline-block; margin-top: 10px; }

.fin-vehicle-bar-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.fin-vehicle-bar-link:hover { text-decoration: underline; }
.fin-vehicle-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-vehicle-price {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 2px;
}

/* ---------- Calculator layout ---------- */
.fin-calc-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .fin-calc-layout { grid-template-columns: 1fr; }
}

.fin-calc-inputs .field-row { grid-template-columns: 1fr 1fr; }
.fin-calc-inputs .field { margin-bottom: 0; }

/* "$" chip on the two dollar-amount inputs (price, down payment) — the
   input itself keeps its id/name/value untouched, this only wraps it, so
   nothing about how the calculator reads these two fields changes. */
.fin-input-prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.fin-input-prefix:focus-within { border-color: var(--accent); }
.fin-input-prefix span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--paper);
  color: var(--slate);
  border-right: 1px solid var(--line);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.fin-input-prefix input {
  border: none;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.fin-input-prefix input:focus { outline: none; border-color: transparent; }
.fin-inputs-section { margin-bottom: 18px; }
.fin-inputs-section:last-child { margin-bottom: 0; }
.fin-inputs-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fin-inputs-section:first-child .fin-inputs-heading { padding-top: 0; border-top: none; }

.fin-slider-row { margin-bottom: 16px; }
.fin-slider-row:last-child { margin-bottom: 0; }
.fin-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.fin-slider-head label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.fin-slider-value { font-size: 0.95rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.fin-calc-inputs input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---------- APR gauge ---------- */
/* Each zone's color lives as a custom property on its own class so both
   the arc (.fin-gauge-zone, stroked) and its legend dot (.fin-gauge-dot,
   filled) read from one source of truth instead of two separate hex
   values that could drift apart. */
.fin-gauge-zone-superprime { --zone-color: #16A34A; }
.fin-gauge-zone-prime { --zone-color: #84CC16; }
.fin-gauge-zone-nearprime { --zone-color: #F59E0B; }
.fin-gauge-zone-subprime { --zone-color: #F97316; }
.fin-gauge-zone-deepsubprime { --zone-color: #DC2626; }

.fin-apr-gauge-wrap { text-align: center; margin-bottom: 14px; }
.fin-apr-gauge { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.fin-gauge-zone { fill: none; stroke: var(--zone-color); stroke-width: 16; }
.fin-gauge-needle-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
#fin-apr-needle { transition: transform 0.25s ease; }
.fin-gauge-hub { fill: var(--ink); }
.fin-gauge-value { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin-top: -6px; }
.fin-gauge-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--slate);
}
.fin-gauge-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.fin-gauge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color); flex-shrink: 0; }
.fin-gauge-note { font-size: 0.7rem; color: var(--slate); margin-top: 6px; line-height: 1.35; }

.fin-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ink); }
.fin-checkbox-row input { margin-top: 3px; }

/* Collapses each input's long sourcing/explanation paragraph (the lender
   rate caveats, the APR auto-fill note, the weight/MPG context) behind a
   small "More info" toggle instead of always showing that much prose —
   the field-hint's exact text (links included — a lender's rate note
   links to Membership lenders below) is untouched, just hidden until
   opened, using a native <details>/<summary> so it works with no JS and
   keeps every link functional. */
.fin-hint-toggle { margin-top: 4px; }
.fin-hint-toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--slate);
}
.fin-hint-toggle > summary::-webkit-details-marker { display: none; }
.fin-hint-toggle > summary::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
}
.fin-hint-toggle > summary:hover { color: var(--ink); }
.fin-hint-toggle[open] > summary { margin-bottom: 6px; }
.fin-hint-toggle .field-hint { margin-top: 0; }

/* ---------- Results ---------- */
.fin-calc-results { display: flex; flex-direction: column; gap: 16px; }

.fin-result-card { padding: 18px 20px; }

/* Estimated monthly payment — the one figure that matters most before any
   other, so it gets its own dark "hero" treatment instead of sitting as
   just another card in the results stack; no longer uses the shared
   ".card" class, since a plain white card would undercut that emphasis. */
.fin-result-card-highlight {
  background: linear-gradient(135deg, var(--ink) 0%, #1F2937 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  text-align: center;
}
.fin-result-card-highlight .fin-result-label { color: rgba(255, 255, 255, 0.72); justify-content: center; }
.fin-result-card-highlight .fin-result-value { color: #fff; font-size: 2.2rem; }
.fin-result-card-highlight .fin-result-value span { color: rgba(255, 255, 255, 0.72); }
.fin-result-card-highlight .fin-result-sub { color: rgba(255, 255, 255, 0.8); }
.fin-result-card-highlight .fin-result-sub.fin-under-max { color: #86EFAC; }
.fin-result-card-highlight .fin-result-sub.fin-over-max { color: #FDE68A; }

/* Total cost if financed — a step down from the hero payment but still a
   headline number, so it gets a subtle tinted background rather than the
   plain white card used for the breakdown table and live-rate accordion. */
.fin-summary-box { background: var(--paper); border-color: var(--line); }

.fin-result-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fin-result-value { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.fin-result-value span { font-size: 0.78rem; font-weight: 500; color: var(--slate); margin-left: 4px; }
.fin-result-sub { font-size: 0.82rem; color: var(--slate); margin-top: 6px; line-height: 1.45; }
.fin-result-sub.fin-under-max { color: var(--confirmed); font-weight: 600; }
.fin-result-sub.fin-over-max { color: var(--estimated); font-weight: 600; }

.fin-breakdown-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 4px; }
.fin-breakdown-table td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.fin-breakdown-table tr:last-child td { border-bottom: none; }
.fin-breakdown-table td:first-child { color: var(--slate); }
.fin-breakdown-table td:last-child { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fin-breakdown-table tr.fin-breakdown-total td { font-weight: 800; border-top: 2px solid var(--line); padding-top: 10px; }
.fin-breakdown-table tr.fin-breakdown-total td:last-child { color: var(--accent); font-size: 1.05rem; }

/* Live rate context is supplementary benchmark data, not a core input or
   headline result, so it's tucked behind a native <details>/<summary>
   toggle (same collapsed-by-default, chevron-styled pattern used by
   ".fin-lender-details" further down this page) rather than always taking
   up space in the results column. The live rate fetch itself is
   unaffected — it still loads into #fin-live-context whether or not the
   visitor has opened this accordion. */
.fin-accordion > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fin-accordion > summary::-webkit-details-marker { display: none; }
.fin-accordion > summary::after { content: "\25BE"; color: var(--slate); flex-shrink: 0; transition: transform 0.15s ease; margin-left: auto; }
.fin-accordion[open] > summary::after { transform: rotate(180deg); }
.fin-accordion[open] > summary { margin-bottom: 8px; }

.fin-live-context {
  font-size: 0.8rem;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 4px;
}
.fin-live-context strong { color: var(--ink); }
.fin-live-context .fin-live-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.fin-live-context .fin-live-row + .fin-live-row { border-top: 1px dashed var(--line); }

.fin-note {
  font-size: 0.8rem;
  color: var(--slate);
  border-left: 3px solid var(--line);
  padding-left: 10px;
  margin-top: 10px;
  line-height: 1.45;
}
.fin-note.fin-note-warn { border-left-color: var(--estimated); }

/* Sits directly under the Vehicle price field when that price is just
   this page's own generic starting point — not sourced from a real
   listing (no linked vehicle, no vehicle price in saved preferences).
   Cleared the moment the visitor edits the price themselves; see
   financing.html's priceEl "input" listener. */
.fin-price-generic-note {
  font-size: 0.72rem;
  color: var(--estimated);
  margin-top: 4px;
  line-height: 1.35;
}
.fin-price-generic-note a { color: inherit; text-decoration: underline; }

/* The linked-vehicle hero's own rules (.fin-vehicle-hero and friends) now
   live up near ".fin-tool-card" above, since the vehicle card became a
   large hero block at the top of the input column rather than a
   standalone element sitting above the whole tool card — kept as one
   block so the hero's layout and its contents' styling can't drift apart. */

/* ---------- Membership / lender section ---------- */
.fin-lender-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.fin-lender-card { padding: 18px 20px; }
.fin-lender-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--ink); }
.fin-lender-rate { font-size: 0.85rem; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.fin-lender-card p { font-size: 0.85rem; margin-bottom: 8px; }
.fin-lender-card p:last-child { margin-bottom: 0; }

/* Consumer-protection quick facts (prepayment penalty, max term, GAP
   insurance, pre-approval validity) — a compact key/value list rather
   than more paragraphs, since these are short, scannable facts a buyer
   checks quickly, not prose. Each row's own source (a different FAQ/GAP
   page than the main rate citation) goes inline in the value, matching
   this page's existing per-claim sourcing convention rather than one
   blanket citation for the whole card. */
.fin-lender-facts { list-style: none; margin: 10px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.fin-lender-facts li { font-size: 0.82rem; display: flex; gap: 6px; }
.fin-lender-facts .fin-fact-label { color: var(--slate); flex-shrink: 0; min-width: 118px; }
.fin-lender-facts .fin-fact-value { color: var(--ink); }

/* Each card shows only its name + headline rate by default; everything
   else (who qualifies, consumer-protection facts, sourcing) sits behind
   a native <details>/<summary> toggle styled to look and behave like the
   page's own <select> fields (bordered box, rounded corners, a chevron
   that flips on open) so it reads as "pick this to reveal more" rather
   than a plain text link — while still being able to hold real
   paragraphs, a list, and links, which an actual <select> can't. */
.fin-lender-details { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.fin-lender-details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 6px;
}
.fin-lender-details > summary::-webkit-details-marker { display: none; }
.fin-lender-details > summary::after { content: "\25BE"; color: var(--slate); flex-shrink: 0; transition: transform 0.15s ease; }
.fin-lender-details[open] > summary::after { transform: rotate(180deg); }
.fin-lender-details[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fin-lender-details > summary:hover { background: var(--paper); }
.fin-lender-details > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.fin-lender-details-body { padding: 12px; }
.fin-lender-details-body p:first-child { margin-top: 0; }
.fin-lender-details-body p:last-child { margin-bottom: 0; }

/* ---------- Jurisdiction fee reference table ---------- */
.fin-fee-table-wrap { overflow-x: auto; }
.fin-fee-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.85rem; }
.fin-fee-table th, .fin-fee-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.fin-fee-table th { color: var(--slate); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.fin-fee-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

.fin-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }