/* =========================================================
   ev-vs-gas-cost-calculator
   Custom styling on top of evvy-tools-premium.css
   ========================================================= */

/* ---- Live rate badges ---------------------------------- */
.evvy-rate-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.evvy-rate-badge {
  background: var(--cluster-surface, #E8F4F3);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 0.75rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--evvy-text-primary, #1a1a2e);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.evvy-rate-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.evvy-rate-badge .evvy-rate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cluster-dark);
  color: #fff;
  font-size: 0.95rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.evvy-rate-badge strong {
  color: var(--cluster-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.evvy-rate-badge small {
  display: block;
  opacity: 0.65;
  font-size: 0.7rem;
  margin-top: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-bs-theme="dark"] .evvy-rate-badge {
  background: var(--evvy-gray-100, #1E1E1E);
  color: var(--evvy-text-primary, #E6E6E6);
}
[data-bs-theme="dark"] .evvy-rate-badge strong {
  color: var(--cluster-dark);
}

/* ---- State dropdown ------------------------------------ */
.evvy-state-select {
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  background-color: var(--bs-body-bg, #fff);
}
.evvy-state-select:focus {
  border-color: var(--cluster-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cluster-dark) 20%, transparent);
  outline: 0;
}

/* ---- Verdict badge (EV wins / Gas wins) ---------------- */
.evvy-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
  transition: all 0.4s ease;
}
.evvy-verdict-ev {
  background: #E4F3E7;
  color: #1B5E20;
  border: 1px solid #A3D9AA;
}
.evvy-verdict-gas {
  background: #FCE4E4;
  color: #8E1717;
  border: 1px solid #F0B3B3;
}
.evvy-verdict-neutral {
  background: var(--cluster-surface, #E8F4F3);
  color: var(--cluster-dark);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .evvy-verdict-ev {
  background: rgba(46, 125, 50, 0.25);
  color: #A3E0A8;
  border-color: rgba(163, 217, 170, 0.35);
}
[data-bs-theme="dark"] .evvy-verdict-gas {
  background: rgba(142, 23, 23, 0.3);
  color: #F4B0B0;
  border-color: rgba(240, 179, 179, 0.3);
}

/* ---- Breakdown panel ----------------------------------- */
.evvy-ev-breakdown {
  margin-top: 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  display: none;
}
.evvy-ev-breakdown.is-open {
  display: block;
  animation: evvyFadeUp 0.5s ease;
}
@keyframes evvyFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evvy-ev-breakdown-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.75rem;
}
.evvy-ev-breakdown-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.1rem 1rem;
  align-items: baseline;
}
.evvy-ev-breakdown-grid > div {
  padding: 0.4rem 0;
}
.evvy-ev-breakdown-grid .ev-bd-label {
  color: var(--evvy-text-secondary, #666);
}
.evvy-ev-breakdown-grid .ev-bd-ev,
.evvy-ev-breakdown-grid .ev-bd-gas {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.evvy-ev-breakdown-grid .ev-bd-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cluster-dark);
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  padding-bottom: 0.35rem;
}
.evvy-ev-breakdown-grid .ev-bd-total {
  border-top: 2px solid var(--cluster-dark);
  font-weight: 800;
  font-size: 1rem;
  padding-top: 0.5rem;
}
.evvy-ev-breakdown-grid .ev-bd-total.ev-bd-label {
  color: var(--cluster-dark);
}
[data-bs-theme="dark"] .evvy-ev-breakdown {
  background: var(--evvy-gray-100, #1E1E1E);
}

/* ---- Amortization table (premium) ---------------------- */
.evvy-ev-amortization {
  margin-top: 0.75rem;
  overflow-x: auto;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--bs-body-bg, #fff);
}
.evvy-ev-amortization table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.evvy-ev-amortization thead th {
  text-align: left;
  font-weight: 700;
  color: var(--cluster-dark);
  background: var(--cluster-surface, #E8F4F3);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.evvy-ev-amortization tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evvy-ev-amortization tbody tr:last-child td {
  border-bottom: none;
  font-weight: 700;
}
.evvy-ev-amortization td.ev-win {
  color: #1B5E20;
  font-weight: 700;
}
.evvy-ev-amortization td.gas-win {
  color: #8E1717;
  font-weight: 700;
}
[data-bs-theme="dark"] .evvy-ev-amortization {
  background: var(--evvy-gray-100, #1E1E1E);
}
[data-bs-theme="dark"] .evvy-ev-amortization td.ev-win  { color: #A3E0A8; }
[data-bs-theme="dark"] .evvy-ev-amortization td.gas-win { color: #F4B0B0; }

/* ---- Three-vehicle comparison -------------------------- */
.evvy-ev-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.evvy-ev-compare-card {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 0.85rem 0.95rem;
}
.evvy-ev-compare-card label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cluster-dark);
  display: block;
  margin-bottom: 0.35rem;
}
.evvy-ev-compare-card input {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  background: var(--bs-body-bg, #fff);
  color: var(--evvy-text-primary, #1a1a2e);
}
.evvy-ev-compare-card input:focus {
  outline: 0;
  border-color: var(--cluster-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cluster-dark) 18%, transparent);
}
.evvy-ev-compare-card .ev-compare-result {
  background: var(--cluster-surface, #E8F4F3);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.evvy-ev-compare-card .ev-compare-result strong {
  color: var(--cluster-dark);
  display: block;
  font-size: 1.1rem;
  margin-top: 0.1rem;
}
.evvy-ev-compare-card .ev-compare-result small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.evvy-ev-compare-card.is-winner {
  border-color: var(--cluster-dark);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cluster-dark) 20%, transparent);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
[data-bs-theme="dark"] .evvy-ev-compare-card {
  background: var(--evvy-gray-100, #1E1E1E);
}

/* ---- Charger setup (premium) --------------------------- */
.evvy-charger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.evvy-charger-grid .form-text {
  font-size: 0.72rem;
  margin-top: 0.25rem;
}
.evvy-charger-callout {
  margin-top: 0.75rem;
  background: var(--cluster-surface, #E8F4F3);
  border: 1px dashed var(--cluster-dark);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  color: var(--evvy-text-primary, #1a1a2e);
}
.evvy-charger-callout strong { color: var(--cluster-dark); }
[data-bs-theme="dark"] .evvy-charger-callout {
  background: rgba(13, 61, 58, 0.18);
  color: var(--evvy-text-primary, #E6E6E6);
}

/* ---- Break-even + verdict line ------------------------- */
.evvy-breakeven-line {
  margin-top: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--cluster-surface, #E8F4F3);
  border-radius: var(--evvy-radius-lg, 12px);
  font-size: 0.95rem;
  color: var(--evvy-text-primary, #1a1a2e);
  font-weight: 500;
  text-align: center;
  transition: background 0.4s ease;
}
.evvy-breakeven-line strong {
  color: var(--cluster-dark);
  font-weight: 800;
}
[data-bs-theme="dark"] .evvy-breakeven-line {
  background: rgba(13, 61, 58, 0.22);
  color: var(--evvy-text-primary, #E6E6E6);
}

/* ---- Savings direction arrow --------------------------- */
.evvy-savings-arrow {
  display: inline-block;
  font-size: 0.85em;
  margin-right: 0.15em;
  transform: translateY(-1px);
}
.evvy-savings-ev   { color: #1B5E20; }
.evvy-savings-gas  { color: #8E1717; }
[data-bs-theme="dark"] .evvy-savings-ev  { color: #A3E0A8; }
[data-bs-theme="dark"] .evvy-savings-gas { color: #F4B0B0; }

/* ---- Premium lock box ---------------------------------- */
.evvy-premium-placeholder {
  background: var(--cluster-surface, #E8F4F3);
  border: 1px dashed var(--cluster-dark);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: var(--evvy-text-secondary, #666);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.evvy-premium-placeholder .evvy-premium-badge {
  margin-top: 0.5rem;
}
[data-bs-theme="dark"] .evvy-premium-placeholder {
  background: rgba(13, 61, 58, 0.18);
}

/* ---- Efficiency pill sub-line -------------------------- */
.evvy-pill .evvy-pill-sub {
  display: block;
  font-size: 0.62rem;
  opacity: 0.7;
  font-weight: 500;
  margin-top: 0.15rem;
  letter-spacing: 0.02em;
}

/* ---- Section divider ----------------------------------- */
.evvy-section-divider {
  border: 0;
  border-top: 1px solid var(--evvy-border-color, #DEE2E6);
  margin: 1.5rem 0 0.5rem;
  opacity: 0.6;
}

/* ---- Responsive ---------------------------------------- */
@media (max-width: 767.98px) {
  .evvy-ev-compare { grid-template-columns: 1fr; }
  .evvy-charger-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .evvy-rate-badges { grid-template-columns: 1fr; }
  .evvy-ev-breakdown-grid { grid-template-columns: 1.3fr 1fr 1fr; font-size: 0.8rem; }
  #results-area .evvy-results-row { grid-template-columns: 1fr !important; }
  .evvy-ev-breakdown { padding: 1rem 1rem; }
}
/* ===== Dark-mode contrast fixes (cluster-dark backgrounds) ===== */
[data-bs-theme="dark"] .evvy-rate-badge .evvy-rate-icon { color: var(--evvy-dark-text); }