/* ==========================================================================
   Finance calculator (partials/finance-dialog, finance.js).
   The shell (backdrop, hero, close, sheet on phones) comes from .fee-modal in vehicle-card.css.
   ========================================================================== */
.fin-modal { width: min(94vw, 480px); }

/* Hero: the payment */
.fin-hero__label { margin: .1rem 0 .35rem; color: var(--c-on-dark-muted, #9fb0c6) !important; font-family: var(--f-display); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fin-hero__amount {
    margin: 0;
    color: #fff !important;
    font-family: var(--f-display);
    font-size: clamp(2.6rem, 2.2rem + 2vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.fin-hero__amount small { margin-left: .2rem; color: var(--c-on-dark-muted, #9fb0c6); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.fin-hero__terms { margin: .65rem 0 0; color: var(--c-brand, #2bb6e8) !important; font-size: .88rem; font-weight: 700; }

/* Controls */
.fin-form { display: grid; gap: 1.15rem; }
.fin-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.fin-field__label { display: block; float: none; width: auto; margin: 0 0 .5rem; padding: 0; color: var(--c-text, #0b1626); font-family: var(--f-display); font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.fin-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fin-field__value { color: var(--c-text, #0b1626); font-family: var(--f-display); font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Credit: four tiles */
.fin-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.fin-tier { position: relative; display: grid; gap: .05rem; padding: .55rem .5rem .5rem; border: 1.5px solid var(--c-line, #e2e8f0); border-radius: 14px; background: var(--c-surface, #fff); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.fin-tier input { position: absolute; opacity: 0; pointer-events: none; }
.fin-tier__name { color: var(--c-text, #0b1626); font-family: var(--f-display); font-size: .78rem; font-weight: 800; }
.fin-tier__range { color: var(--c-muted, #5a6b80); font-size: .68rem; }
.fin-tier__apr { margin-top: .2rem; color: var(--c-brand-text, #07759c); font-family: var(--f-display); font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-tier:hover { border-color: rgb(43 182 232 / 55%); }
.fin-tier:has(input:checked) { border-color: var(--c-ink, #0b1626); background: var(--c-ink, #0b1626); transform: translateY(-1px); }
.fin-tier:has(input:checked) .fin-tier__name { color: #fff; }
.fin-tier:has(input:checked) .fin-tier__range { color: var(--c-on-dark-muted, #9fb0c6); }
.fin-tier:has(input:checked) .fin-tier__apr { color: var(--c-brand, #2bb6e8); }
.fin-tier:has(input:focus-visible), .fin-term:has(input:focus-visible) { outline: 3px solid var(--c-brand, #2bb6e8); outline-offset: 2px; }

/* Down payment slider (--fill is set by finance.js) */
.fin-range { --fill: 0%; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
.fin-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #2bb6e8 var(--fill), var(--c-line, #e2e8f0) var(--fill)); }
.fin-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--c-line, #e2e8f0); }
.fin-range::-moz-range-progress { height: 8px; border-radius: 999px; background: #2bb6e8; }
.fin-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 4px solid #fff; border-radius: 50%; background: var(--c-ink, #0b1626); box-shadow: 0 2px 8px rgb(11 22 38 / 35%); appearance: none; -webkit-appearance: none; }
.fin-range::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50%; background: var(--c-ink, #0b1626); box-shadow: 0 2px 8px rgb(11 22 38 / 35%); }
.fin-range:focus-visible { outline: 3px solid var(--c-brand, #2bb6e8); outline-offset: 4px; border-radius: 999px; }
.fin-quick { display: flex; gap: .35rem; margin-top: .45rem; }
.fin-quick__btn { flex: 1; min-height: 34px; border: 1px solid var(--c-line, #e2e8f0); border-radius: 999px; background: var(--c-surface, #fff); color: var(--c-muted, #5a6b80); font-family: var(--f-display); font-size: .76rem; font-weight: 800; cursor: pointer; }
.fin-quick__btn:hover { border-color: rgb(43 182 232 / 55%); color: var(--c-text, #0b1626); }
.fin-quick__btn[aria-pressed="true"] { border-color: transparent; background: rgb(43 182 232 / 14%); color: var(--c-brand-text, #07759c); }
.fin-quick__btn:focus-visible { outline: 3px solid var(--c-brand, #2bb6e8); outline-offset: 2px; }

/* Loan length */
.fin-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding: .3rem; border-radius: 16px; background: var(--c-bg, #f4f6f9); }
.fin-term { position: relative; cursor: pointer; }
.fin-term input { position: absolute; opacity: 0; pointer-events: none; }
.fin-term span { display: grid; place-items: center; min-height: 42px; border-radius: 12px; color: var(--c-muted, #5a6b80); font-family: var(--f-display); font-size: .92rem; font-weight: 800; transition: background-color .15s, color .15s; }
.fin-term small { margin-top: -.3rem; font-size: .62rem; font-weight: 700; }
.fin-term:has(input:checked) span { background: var(--c-surface, #fff); color: var(--c-text, #0b1626); box-shadow: 0 2px 8px -2px rgb(11 22 38 / 20%); }
.fin-term:has(input:disabled) { cursor: not-allowed; }
.fin-term:has(input:disabled) span { color: #b4bfcc; text-decoration: line-through; }
.fin-note { margin: .45rem 0 0; color: var(--c-muted, #5a6b80); font-size: .78rem; }

/* Ring: amount financed vs interest */
.fin-split { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 1.1rem; margin-top: 1.35rem; padding: 1rem; border: 1px solid var(--c-line, #e2e8f0); border-radius: 20px; }
.fin-ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.fin-ring circle { fill: none; stroke-width: 14; }
.fin-ring__track { stroke: var(--c-bg, #f4f6f9); }
.fin-ring__loan { stroke: #2bb6e8; transition: stroke-dasharray .45s var(--ease, ease-out); }
.fin-ring__interest { stroke: #ff7a59; transition: stroke-dasharray .45s var(--ease, ease-out), stroke-dashoffset .45s var(--ease, ease-out); }
.fin-split__center { position: absolute; top: 1rem; left: 1rem; display: grid; place-content: center; width: 120px; height: 120px; text-align: center; pointer-events: none; }
.fin-split__center small { color: var(--c-muted, #5a6b80); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fin-split__center strong { color: var(--c-text, #0b1626); font-family: var(--f-display); font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fin-legend { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.fin-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; color: var(--c-muted, #5a6b80); font-size: .84rem; }
.fin-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fin-legend .is-loan { background: #2bb6e8; }
.fin-legend .is-interest { background: #ff7a59; }
.fin-legend strong { color: var(--c-text, #0b1626); font-weight: 800; }
.fin-legend__total { grid-template-columns: minmax(0, 1fr) auto !important; padding-top: .45rem; border-top: 1px dashed var(--c-line, #e2e8f0); }
.fin-legend__total span { color: var(--c-text, #0b1626); font-weight: 700; }

/* Breakdown: the fee modal's lines, without the icon column */
.fin-lines .fee-line { grid-template-columns: minmax(0, 1fr) auto; }

/* How we estimate */
.fin-how { margin-top: 1rem; border: 1px solid var(--c-line, #e2e8f0); border-radius: 16px; }
.fin-how summary { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: .7rem 1rem; color: var(--c-text, #0b1626); font-family: var(--f-display); font-size: .88rem; font-weight: 800; list-style: none; cursor: pointer; }
.fin-how summary::-webkit-details-marker { display: none; }
.fin-how summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.fin-how[open] summary::after { transform: rotate(225deg); }
.fin-how summary svg { width: 18px; height: 18px; fill: none; stroke: var(--c-brand-text, #07759c); stroke-width: 2.2; stroke-linecap: round; }
.fin-how summary:focus-visible { outline: 3px solid var(--c-brand, #2bb6e8); outline-offset: 2px; border-radius: 14px; }
.fin-how__list { display: grid; gap: .55rem; margin: 0; padding: 0 1rem 1rem 2.5rem; list-style: none; color: var(--c-muted, #5a6b80); font-size: .82rem; line-height: 1.5; counter-reset: fin; }
.fin-how__list li { position: relative; counter-increment: fin; }
.fin-how__list li::before { content: counter(fin); position: absolute; top: .05rem; left: -1.6rem; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgb(43 182 232 / 14%); color: var(--c-brand-text, #07759c); font-size: .66rem; font-weight: 800; }
.fin-how__list strong { color: var(--c-text, #0b1626); }

.fin-disclaimer { margin: .75rem 0 0; color: var(--c-muted, #5a6b80); font-size: .74rem; line-height: 1.45; text-align: center; }

@media (max-width: 575.98px) {
    .fin-modal { width: 100%; }
    .fin-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-split { grid-template-columns: 108px minmax(0, 1fr); gap: .85rem; padding: .8rem; }
    .fin-ring, .fin-split__center { width: 108px; height: 108px; }
    .fin-ring circle { stroke-width: 11; }
    .fin-split__center { top: .8rem; left: .8rem; }
    .fin-split__center small { font-size: .54rem; }
    .fin-split__center strong { font-size: .8rem; }
    .fin-legend li { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fin-ring__loan, .fin-ring__interest, .fin-tier { transition: none; }
    .fin-tier:has(input:checked) { transform: none; }
}