/* ============================================================
   RETIREMENT CORPUS CALCULATOR STYLES
   Tradesala ToolSpot | Amber Gold Theme
   ============================================================ */

/* ── Amber Gold Color Theme ── */
.container {
  /* Dark mode: warm amber gold */
  --tool-red: #fbbf24;
  --tool-red-soft: rgba(251, 191, 36, 0.12);
  --ret-c1: #fbbf24;
  --ret-c2: #78350f;
}

body.light .container {
  /* Light mode: deep amber */
  --tool-red: #d97706;
  --tool-red-soft: rgba(217, 119, 6, 0.12);
  --ret-c1: #d97706;
  --ret-c2: #92400e;
}

/* ── Glow Lines ── */
.kpi-card.amber::before {
  background: linear-gradient(90deg, #fbbf24, #fde68a) !important;
}

.kpi-card.amber-deep::before {
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

.kpi-card.gold::before {
  background: linear-gradient(90deg, #78350f, #d97706) !important;
}

/* ── On-Track Banner ── */
.on-track-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  margin-bottom: 20px;
  color: #10b981;
  font-size: 14px;
  font-weight: 600;
}

.on-track-banner.visible {
  display: flex;
}

body.light .on-track-banner {
  background: rgba(16, 185, 129, 0.08);
}

/* ── Age Validation Warning ── */
.age-warning {
  display: none;
  padding: 10px 16px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  color: #fbbf24;
  font-size: 13px;
  margin-bottom: 16px;
}

.age-warning.visible {
  display: block;
}

body.light .age-warning {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
}

/* ── KPI Grid ── */
.ret-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px; /* Safari fallback */
  gap: 16px;
  margin-bottom: 32px;
  min-width: 0;
}

.ret-kpi-grid > * {
  min-width: 0;
}

.kpi-span-full {
  grid-column: 1 / -1;
}

/* ── Inflation multiplier badge inside KPI ── */
.kpi-multiplier {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  background: var(--tool-red-soft);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tool-red);
}

/* ── Mobile Layout Adjustments ── */
@media (max-width: 1024px) {
  .main-grid {
    display: block !important;
  }
  .left-col,
  .right-col {
    display: block;
    width: 100%;
    min-width: 0;
    position: static;
    top: auto;
  }
  .right-col {
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px 80px;
  }
  .ret-kpi-grid {
    grid-template-columns: 1fr;
  }
  .kpi-span-full {
    grid-column: 1 / -1;
  }
  .tool-header h1 {
    font-size: 2rem;
    letter-spacing: -1px;
  }
}