/* Heat Pump Sizing & Savings Calculator — refconhvac.com/heat-pump-calculator/
   Page-specific overrides. All base layout, cards, sliders, hero stats, sticky bar,
   callouts, ref-tables, FAQ, and disclaimer come from btu-calc.v7.css.
   This file only adds heat-pump-specific styles, scoped via data-calc-id. */

/* ========== Climate zone row (3 radio cards: mild / moderate / cold) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .climate-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .climate-opt {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: #1f2937;
  transition: 0.15s;
  text-align: center;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .climate-opt:hover {
  border-color: #3b82f6;
  transform: translateY(-1px);
}
.btu-calc[data-calc-id="heat_pump_calculator"] .climate-opt.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px #2563eb inset;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .climate-opt:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .cli-ico {
  font-size: 24px;
  line-height: 1;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .cli-label {
  font-weight: 600;
  font-size: 14px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .cli-sub {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}
@media (max-width: 600px) {
  .btu-calc[data-calc-id="heat_pump_calculator"] .climate-row {
    grid-template-columns: 1fr;
  }
}

/* ========== Fuel rate row (3-column grid: fuel / bill / rate inputs) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-rate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .field-fuel select,
.btu-calc[data-calc-id="heat_pump_calculator"] .field-bill input,
.btu-calc[data-calc-id="heat_pump_calculator"] .field-rate input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
@media (max-width: 700px) {
  .btu-calc[data-calc-id="heat_pump_calculator"] .fuel-rate-row {
    grid-template-columns: 1fr;
  }
}

/* ========== Tip box (blue "Why fuel rate matters" panel) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .hp-tip {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  color: #0c4a6e;
  font-size: 14px;
  line-height: 1.5;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .hp-tip .ico {
  font-size: 20px;
  flex-shrink: 0;
}

/* ========== Savings breakdown (current vs heat pump bar) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin: 24px 0;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
  font-size: 16px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-name {
  width: 140px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-bar-track {
  background: #f3f4f6;
  border-radius: 8px;
  height: 28px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-bar-fill {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  height: 100%;
  white-space: nowrap;
  transition: width 0.3s;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .sb-bar-fill.is-current {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.btu-calc[data-calc-id="heat_pump_calculator"] .sb-bar-fill.is-heat-pump {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-value {
  width: 90px;
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}
@media (max-width: 600px) {
  .btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-row {
    flex-wrap: wrap;
  }
  .btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-name {
    width: 100%;
  }
  .btu-calc[data-calc-id="heat_pump_calculator"] .savings-breakdown .sb-value {
    width: auto;
  }
}

/* ========== Fuel comparison table (4-row live comparison) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table th,
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table th.r,
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table td.r {
  text-align: right;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table tr.is-best {
  background: #ecfdf5;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table tr.is-worst {
  background: #fef2f2;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .fuel-compare-table tr.is-best td:first-child::before {
  content: "✓ ";
  color: #059669;
  font-weight: 700;
}

/* ========== Savings badge (green "+24% saved" or red "+10% cost" pill) ========== */
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  background: #d1fae5;
  color: #065f46;
  vertical-align: middle;
}
.btu-calc[data-calc-id="heat_pump_calculator"] .savings-badge.is-negative {
  background: #fee2e2;
  color: #991b1b;
}