/* ═══════════════════════════════════════════════════════════════
   financing.css — Simulador de Financiamento
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #0f172a;
  --muted:    #71717a;
  --border:   #e4e4e7;
  --light:    #f4f4f5;
  --green:    #16a34a;
  --green-bg: #f0fdf4;
}

.fin * { font-family: 'Barlow', sans-serif; }

/* ── Page header ─────────────────────────────────────────────── */
.fin-header { margin-bottom: 2.5rem; }
.fin-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
  animation: fadeSlideUp .6s ease both;
}
.fin-eyebrow::before { content: ''; display: block; width: 1.5rem; height: 2px; background: var(--accent); }
.fin-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900;
  text-transform: uppercase; line-height: 1; color: var(--brand);
  animation: fadeSlideUp .7s .08s ease both;
}
.fin-sub { font-size: .95rem; color: var(--muted); margin-top: .6rem; animation: fadeSlideUp .7s .16s ease both; }

/* ── Layout ──────────────────────────────────────────────────── */
.fin-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .fin-grid { grid-template-columns: 1fr; } }

/* ── Panels ──────────────────────────────────────────────────── */
.fin-panel {
  background: white; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem;
}
.fin-panel-hdr {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .6rem;
}
.fin-panel-step {
  width: 24px; height: 24px; background: var(--brand); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; font-weight: 800; color: white;
  flex-shrink: 0;
}
.fin-panel-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--brand);
}
.fin-panel-body { padding: 1.1rem; }

/* ── Vehicle list ────────────────────────────────────────────── */
.fin-vlist { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fin-vlist::-webkit-scrollbar { width: 4px; }
.fin-vlist::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.fin-vcard {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: 8px; cursor: pointer;
  transition: background .12s; border: 1.5px solid transparent;
}
.fin-vcard:hover { background: var(--light); }
.fin-vcard.selected { background: #eff6ff; border-color: #bfdbfe; }

.fin-vcard-img {
  width: 60px; height: 46px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: var(--light); display: flex; align-items: center; justify-content: center;
  color: var(--border); font-size: 1.2rem;
}
.fin-vcard-img img { width: 100%; height: 100%; object-fit: cover; }
.fin-vcard-name {
  font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; font-weight: 700;
  text-transform: uppercase; color: var(--brand); line-height: 1.1;
}
.fin-vcard-sub  { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.fin-vcard-price { font-size: .82rem; font-weight: 600; color: var(--accent); margin-top: .2rem; }

/* ── Params ──────────────────────────────────────────────────── */
.fin-field { margin-bottom: 1rem; }
.fin-field:last-child { margin-bottom: 0; }

.fin-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  display: block; margin-bottom: .4rem;
}
.fin-input {
  width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--brand); background: white; transition: border-color .15s; outline: none;
  box-sizing: border-box;
}
.fin-input:focus { border-color: var(--brand); }
.fin-input.error { border-color: var(--accent); background: #fff5f5; }

.fin-error-msg { font-size: .72rem; color: var(--accent); margin-top: .3rem; display: none; }
.fin-error-msg.show { display: block; }

.fin-range {
  width: 100%; margin-top: .5rem; accent-color: var(--brand);
  -webkit-appearance: none; height: 4px; border-radius: 2px;
  background: var(--border); cursor: pointer;
}
.fin-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--brand); border: 2px solid white;
  box-shadow: 0 0 0 1px var(--border);
}
.fin-range-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: .35rem; }
.fin-range-labels strong { color: var(--brand); }

.fin-select {
  width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--brand); background: white; outline: none; transition: border-color .15s;
  cursor: pointer; box-sizing: border-box;
}
.fin-select:focus { border-color: var(--brand); }

.fin-rate-box {
  background: var(--light); border-radius: 6px; padding: .75rem .9rem;
  display: flex; justify-content: space-between; align-items: center;
}
.fin-rate-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fin-rate-val { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--brand); }

.fin-simulate-btn {
  width: 100%; padding: .85rem; background: var(--brand); color: white; border: none;
  border-radius: 6px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background .15s; margin-top: .5rem;
}
.fin-simulate-btn:hover { background: #0f0f1e; }
.fin-simulate-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Result ──────────────────────────────────────────────────── */
.fin-result-empty {
  background: white; border: 1px solid var(--border); border-radius: 12px;
  padding: 4rem 2rem; text-align: center; color: var(--muted);
}
.fin-result-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--border); }
.fin-result-empty p { font-size: .9rem; }

.fin-res-hero { background: var(--brand); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.fin-res-hero-top { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.fin-res-hero-img {
  width: 72px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.3); font-size: 1.5rem;
}
.fin-res-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.fin-res-hero-name {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 800;
  text-transform: uppercase; color: white; line-height: 1.1;
}
.fin-res-hero-sub { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: .2rem; }
.fin-res-hero-nums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden;
}
.fin-res-hero-num { background: rgba(255,255,255,.05); padding: .85rem 1rem; }
.fin-res-hero-num-lbl { font-size: .62rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.fin-res-hero-num-val { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-weight: 800; color: white; }

.fin-table-panel { background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem; }
.fin-table-hdr {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  display: flex; align-items: center; gap: .5rem;
}
.fin-table-hdr i { color: var(--accent); }
.fin-table { width: 100%; border-collapse: collapse; }
.fin-table thead th {
  padding: .65rem 1rem; text-align: left;
  font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--light);
}
.fin-table thead th:not(:first-child) { text-align: right; }
.fin-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
.fin-table tbody tr:hover { background: var(--light); }
.fin-table tbody tr.selected-row { background: #f0fdf4; }
.fin-table tbody tr:last-child { border-bottom: none; }
.fin-table td { padding: .75rem 1rem; font-size: .88rem; color: var(--brand); }
.fin-table td:not(:first-child) { text-align: right; }
.fin-table td.highlighted { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; color: var(--green); }

.fin-summary { background: var(--green-bg); border: 1px solid #bbf7d0; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.fin-summary-hdr {
  font-family: 'Barlow Condensed', sans-serif; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--green);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.fin-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fin-summary-item-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .25rem; }
.fin-summary-item-val { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--brand); }
.fin-summary-item-val.big  { font-size: 1.8rem; color: var(--green); }
.fin-summary-item-val.warn { color: #d97706; }

.fin-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fin-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem; border-radius: 6px; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-size: .9rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; transition: all .15s;
}
.fin-cta-wa  { background: var(--green); color: white; }
.fin-cta-wa:hover { background: #15803d; }
.fin-cta-det { background: var(--brand); color: white; }
.fin-cta-det:hover { background: #0f0f1e; }

.fin-disclaimer {
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--light); border-radius: 8px; border-left: 3px solid var(--border);
  font-size: .78rem; color: var(--muted); line-height: 1.6;
}
.fin-disclaimer i { color: var(--accent); margin-right: .35rem; }