/* ============================================================
   AUTOKOSTEN VERGELIJKEN — Pagina-specifieke Stijlen
   ============================================================ */

/* ---------- Auto Selector (Kenteken / Kies Auto tabs) ---------- */
.auto-selector {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 4px;
}

.selector-tabs {
  display: flex;
  background: var(--color-surface);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border);
}

.selector-tab {
  flex: 1; padding: 7px 12px; border: none; border-radius: 5px;
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition); font-family: var(--font-sans);
  background: transparent; color: var(--color-text-secondary);
}
.selector-tab.active {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.25);
}

/* Mini kenteken plate */
.kenteken-mini-wrapper { display: flex; gap: 8px; align-items: stretch; }

.kenteken-plate-mini {
  display: flex; align-items: stretch;
  background: #f7c948; border-radius: 6px; overflow: hidden;
  border: 2px solid #d4a800; flex: 1;
}
.plate-nl-mini {
  display: flex; align-items: center; justify-content: center;
  background: #003da5; color: #fff;
  font-weight: 700; font-size: 0.65rem; padding: 0 7px; letter-spacing: 0.04em;
}
.kenteken-plate-mini input {
  border: none; background: transparent;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 10px; width: 100%; outline: none;
  font-family: var(--font-sans); color: var(--color-text);
}
.kenteken-plate-mini input::placeholder { color: #b89b2a; font-weight: 500; }

/* Select dropdowns in de lijst panel */
.select-row { display: flex; flex-direction: column; gap: 8px; }
.select-row select {
  padding: 9px 12px; border: 1.5px solid var(--color-border);
  border-radius: 6px; font-size: 0.85rem; font-family: var(--font-sans);
  color: var(--color-text); background: var(--color-surface);
  transition: border-color var(--transition); cursor: pointer;
}
.select-row select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,122,255,0.12); }
.select-row select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Auto info (na selectie) */
.auto-info {
  margin-top: 12px; padding: 10px 14px;
  background: var(--color-surface); border-radius: 6px;
  border: 1px solid var(--color-border);
}
.auto-info-naam { font-size: 0.9rem; font-weight: 600; color: var(--color-text); display: block; margin-bottom: 4px; }
.auto-info-specs { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-chip {
  font-size: 0.75rem; font-weight: 500;
  padding: 2px 8px; border-radius: 4px;
  background: var(--color-bg); color: var(--color-text-secondary);
}

/* Auto-filled hint */
.auto-filled-hint {
  font-size: 0.75rem; font-weight: 400;
  color: var(--color-success); font-style: italic;
}

/* Error message */
.error-message {
  color: var(--color-error); font-size: 0.8rem;
  margin-top: 8px; padding: 6px 10px;
  background: #fff5f5; border-radius: 6px;
}

/* ---------- Vergelijking Grid ---------- */
.comparison-section { margin-top: 24px; }
.card-header-full { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.card-header-full h2 { font-size: 1.25rem; font-weight: 600; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comparison-card { position: relative; overflow: hidden; margin-top: 0; }
.card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.optie1-accent { background: var(--color-optie1); }
.optie2-accent { background: var(--color-optie2); }
.comparison-title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; padding-top: 4px; }
.optie1-title { color: var(--color-optie1); }
.optie2-title { color: var(--color-optie2); }
.optie-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: #fff;
}
.optie1-title .optie-nummer { background: var(--color-optie1); }
.optie2-title .optie-nummer { background: var(--color-optie2); }
.fuel-icon { font-size: 1.2rem; }

/* ---------- Resultaten ---------- */
.results-card { border: 2px solid var(--color-border); }
.period-toggle { display: flex; background: var(--color-bg); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 28px; width: fit-content; }
.toggle-btn { padding: 8px 24px; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--transition); font-family: var(--font-sans); background: transparent; color: var(--color-text-secondary); }
.toggle-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.results-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.result-block { text-align: center; padding: 24px; border-radius: var(--radius); }
.optie1-result { background: var(--color-optie1-light); }
.optie2-result { background: var(--color-optie2-light); }
.optie1-result .result-amount { color: var(--color-optie1); }
.optie2-result .result-amount { color: var(--color-optie2); }

/* PHEV slider */
.phev-slider-row { display: flex; align-items: center; gap: 12px; }
.phev-slider { flex: 1; }
.phev-pct { font-size: 0.95rem; font-weight: 700; color: var(--color-text); min-width: 40px; text-align: right; }
.result-breakdown { margin-top: 12px; font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.7; }
.vs-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-text { font-size: 0.8rem; font-weight: 700; color: var(--color-text-secondary); letter-spacing: 0.1em; }
.savings-badge { padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.savings-badge.positive { background: var(--color-optie2-light); color: #1a8a3e; }
.savings-badge.negative { background: #fff0f0; color: var(--color-error); }
.savings-badge.neutral { background: var(--color-bg); color: var(--color-text-secondary); }

/* ---------- Insights Grid ---------- */
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.insight-card { text-align: center; padding: 32px; margin-top: 0; }
.insight-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.insight-description { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 20px; }
.insight-value { font-size: 2.2rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; margin-bottom: 8px; }
.insight-detail { font-size: 0.85rem; color: var(--color-text-secondary); }

/* ---------- Km invoerveld breder ---------- */
#km-input { width: 110px; }

/* ---------- Charts ---------- */
.chart-card { padding: 32px; }
.chart-card h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 4px; }
.chart-wrapper { position: relative; margin-top: 16px; max-height: 400px; }

/* ---------- Breakdown legenda (Optie 1 / Optie 2) ---------- */
.breakdown-legenda {
  display: flex;
  gap: 20px;
  margin: 10px 0 0;
}
.legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.legenda-kleur {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legenda-blauw { background: #007aff; }
.legenda-groen { background: #34c759; }

/* ---------- Responsive (Tablet) ---------- */
@media (max-width: 768px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; gap: 16px; }
  .vs-block { flex-direction: row; justify-content: center; }
  .insights-grid { grid-template-columns: 1fr; }
  .kenteken-mini-wrapper { flex-direction: column; }
}

/* ---------- Responsive (Mobiel) ---------- */
@media (max-width: 480px) {
  .insight-value { font-size: 1.8rem; }
  .auto-selector { padding: 12px; }
}