/* =========================================
   CALCULATOR PAGE
========================================= */

.calculator-page {

  padding-top: 20px;

  padding-bottom: 20px;
}


/* =========================================
   PAGE HEADER
========================================= */

.calculator-header {

  text-align: center;

  margin-bottom: 42px;
}


.calculator-header h1 {

  margin-bottom: 14px;

  line-height: 1.15;
}


.calculator-header p {

  max-width: 760px;

  margin: 0 auto;

  color: var(--color-text-muted);

  line-height: 1.75;

  font-size: 17px;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.calculator-layout {

  display: block;
}


/* =========================================
   LEFT PANEL
========================================= */

.calculator-left {

  display: flex;

  flex-direction: column;

  gap: 24px;
}


/* =========================================
   CALCULATOR CARDS
========================================= */

.calc-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-xl);

  padding: 30px;

  box-shadow: var(--shadow-sm);
}


.calc-card-title {

  font-size: 22px;

  font-weight: 700;

  margin-bottom: 8px;

  line-height: 1.2;
}


.calc-card-sub {

  color: var(--color-text-muted);

  line-height: 1.7;

  margin-bottom: 26px;

  font-size: 14px;
}


/* =========================================
   FORM GRID
========================================= */

.calc-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}


.calc-field {

  display: flex;

  flex-direction: column;
}


.calc-field-full {

  grid-column: 1 / -1;
}


.calc-field label {

  margin-bottom: 10px;

  font-size: 14px;

  font-weight: 600;

  color: var(--color-text);
}


.calc-field input,
.calc-field select {

  height: 50px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 0 14px;

  background: var(--color-white);

  font-size: 15px;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}


.calc-field input:focus,
.calc-field select:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.08);
}


/* =========================================
   SECTION DIVIDER
========================================= */

.calc-divider {

  height: 1px;

  background: var(--color-border);

  margin: 26px 0;
}


/* =========================================
   DASHBOARD PANEL
========================================= */

.summary-panel {

  background: linear-gradient(
    180deg,
    #0f172a 0%,
    #111827 100%
  );

  color: white;

  border-radius: 24px;

  padding: 28px;

  box-shadow: var(--shadow-card);
}


.summary-top {

  margin-bottom: 28px;
}


.summary-label {

  font-size: 13px;

  opacity: 0.7;

  margin-bottom: 10px;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


.summary-total {

  font-size: 38px;

  font-weight: 800;

  line-height: 1.1;

  margin-bottom: 10px;
}


.summary-caption {

  color: rgba(255,255,255,0.72);

  line-height: 1.7;

  font-size: 14px;
}

/* =========================================
   SUMMARY PANEL METRIC OVERRIDES
========================================= */

.summary-panel .metric-card {

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.08);

  color: #ffffff;
}


.summary-panel .metric-card h2,

.summary-panel .metric-card .metric-value {

  color: #ffffff;
}


.summary-panel .metric-label {

  color: rgba(255,255,255,0.68);
}

/* =========================================
   METRICS GRID
========================================= */

.metrics-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 20px;
}


/* =========================================
   AFFORDABILITY CARD
========================================= */

.affordability-card {

  margin-top: 24px;

  background: rgba(255,255,255,0.06);

  border-radius: 18px;

  padding: 22px;
}


.affordability-title {

  font-size: 15px;

  font-weight: 700;

  margin-bottom: 14px;
}


.affordability-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 700;

  margin-bottom: 16px;
}


.affordability-pill.safe {

  background: rgba(16,185,129,0.18);

  color: #6ee7b7;
}


.affordability-pill.moderate {

  background: rgba(245,158,11,0.18);

  color: #fcd34d;
}


.affordability-pill.risky {

  background: rgba(239,68,68,0.18);

  color: #fca5a5;
}


.affordability-text {

  color: rgba(255,255,255,0.75);

  line-height: 1.7;

  font-size: 14px;
}


/* =========================================
   RESULT BREAKDOWN
========================================= */

.breakdown-list {

  margin-top: 26px;

  display: flex;

  flex-direction: column;

  gap: 14px;
}


.breakdown-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 14px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}


.breakdown-item:last-child {

  border-bottom: none;

  padding-bottom: 0;
}


.breakdown-label {

  color: rgba(255,255,255,0.72);

  font-size: 14px;
}


.breakdown-value {

  font-weight: 700;

  font-size: 15px;
}


/* =========================================
   INFO NOTE
========================================= */

.calc-note {

  margin-top: 22px;

  font-size: 13px;

  color: var(--color-text-muted);

  line-height: 1.7;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

  .calculator-layout {

    grid-template-columns: 1fr;
  }

  .calculator-right {

    position: static;
  }
}


@media (max-width: 768px) {

  .calc-grid {

    grid-template-columns: 1fr;
  }

  .summary-total {

    font-size: 30px;
  }

  .metrics-grid {

    grid-template-columns: 1fr;
  }

  .calc-card {

    padding: 24px;
  }

  .calculator-header {

    margin-bottom: 30px;
  }
}

/* =========================================
   VALIDATION
========================================= */

.input-error {

  border-color: #ef4444 !important;

  background: rgba(239,68,68,0.04);
}


/* =========================================
   ACTION BUTTONS
========================================= */

.calculator-actions {

  display: flex;

  gap: 16px;

  margin-top: 28px;
}


.calculator-actions button {

  flex: 1;

  height: 56px;

  font-size: 16px;

  font-weight: 700;
}

.results-section {

  margin-top: 32px;
}


.summary-panel {

  max-width: 100%;

  overflow: hidden;
}

/* =========================================
   VALIDATION MESSAGE
========================================= */

.validation-box {

  display: flex;

  align-items: center;

  gap: 12px;

  background: rgba(239,68,68,0.08);

  border: 1px solid rgba(239,68,68,0.18);

  color: #ef4444;

  padding: 14px 16px;

  border-radius: 14px;

  margin-bottom: 18px;
}


.validation-icon {

  font-size: 18px;

  line-height: 1;
}


.validation-text {

  font-size: 14px;

  font-weight: 600;
}

/* =========================================
   CHART WRAPPER
========================================= */

.chart-wrapper {

  width: 100%;

  max-width: 420px;

  margin: 0 auto;

  padding: 10px 0 0;
}


.chart-wrapper canvas {

  width: 100% !important;

  height: 320px !important;
}