/* ============================================================
   ProCalcTools — Results & Premium Components v2.0
   Americana Modern theme — synced with style.css v5.0
   Navy #0A2540 · Red #B91C2B · Green #1F7A4D
   ============================================================ */

/* ── KEYFRAME ANIMATIONS ── */
@keyframes resultSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes resultCountUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ════════════════════════════════════════════════════
   CORE RESULTS BOX
   ════════════════════════════════════════════════════ */
.results-box {
  background: #EBF7F0;
  border: none;
  border-left: 4px solid #1F7A4D;
  border-radius: 0 10px 10px 0;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(31,122,77,.08);
  animation: resultSlideUp .35s cubic-bezier(.22,1,.36,1) both;
}
.results-box h3 {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1F7A4D;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.results-box h3::before { content: '✦'; font-size: .8rem; opacity: .7; }
.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31,122,77,.14);
  animation: fadeIn .3s ease both;
}
.result-item:last-of-type { border-bottom: none; }
.result-item .label { font-size: .91rem; color: #3F3F3F; font-weight: 500; }
.result-item .value { font-size: 1.05rem; font-weight: 800; color: #1A1A1A; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.result-item.highlight {
  background: rgba(255,255,255,.7);
  border-radius: 6px;
  margin: 0 -8px 10px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(31,122,77,.12);
  animation: resultCountUp .4s cubic-bezier(.22,1,.36,1) both;
}
.result-item.highlight .label { font-weight: 700; color: #1A1A1A; font-size: .95rem; }
.result-item.highlight .value { font-size: 1.75rem; color: #1F7A4D; letter-spacing: -.025em; }
.copy-btn {
  background: none;
  border: 1.5px solid rgba(31,122,77,.3);
  border-radius: 5px;
  padding: 6px 14px;
  font-size: .74rem;
  cursor: pointer;
  color: #1F7A4D;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 700;
  transition: all .18s ease;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.copy-btn:hover, .copy-btn.copied { background: #1F7A4D; color: #fff; border-color: #1F7A4D; }
.disclaimer-small { font-size: .73rem; color: #8B8B85; margin-top: 12px; line-height: 1.55; font-style: italic; }

/* ════════════════════════════════════════════════════
   MACRO GRID
   ════════════════════════════════════════════════════ */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1.5px solid #E2E0DA;
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0 16px;
  background: #fff;
}
.macro-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; border-right: 1px solid #E2E0DA; transition: background .15s; cursor: default; }
.macro-cell:last-child { border-right: none; }
.macro-cell:hover { background: #FBFAF7; }
.macro-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.macro-label { font-size: .7rem; font-weight: 700; color: #5A5A5A; margin-top: 5px; text-transform: uppercase; letter-spacing: .05em; }
.macro-cell.protein .macro-value { color: #B91C2B; }
.macro-cell.carbs .macro-value   { color: #B45309; }
.macro-cell.fat .macro-value     { color: #1F7A4D; }

/* ════════════════════════════════════════════════════
   AGE CALCULATOR — Premium Result
   ════════════════════════════════════════════════════ */
.age-result-premium {
  background: #fff;
  border: 1px solid #E2E0DA;
  border-top: 3px solid #0A2540;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  animation: resultSlideUp .35s cubic-bezier(.22,1,.36,1) both;
}
/* age-hero = old class, age-hero-display = new class — both supported */
.age-hero, .age-hero-display {
  background: #0A2540;
  padding: 26px 24px;
  text-align: center;
  color: #fff;
}
/* age-hero-num = old, age-big-num = new */
.age-hero-num, .age-big-num {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  display: block;
}
/* age-hero-unit = old, age-unit = new */
.age-hero-unit, .age-unit {
  font-size: .8rem;
  color: #A9BBCF;
  font-weight: 700;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
}
.age-sub {
  font-size: .85rem;
  color: #B7C7D9;
  margin-top: 6px;
}
.age-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
}
.age-stat-cell {
  padding: 16px 14px;
  text-align: center;
  border-right: 1px solid #E2E0DA;
  border-bottom: 1px solid #E2E0DA;
}
.age-stat-cell:last-child { border-right: none; }
.age-stat-num { font-size: 1.3rem; font-weight: 800; color: #1A1A1A; font-variant-numeric: tabular-nums; display: block; }
/* age-stat-label = old, age-stat-lbl = new — both */
.age-stat-label, .age-stat-lbl {
  font-size: .68rem;
  color: #8B8B85;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
  font-weight: 600;
  display: block;
}
/* Fact rows */
.age-fact-list { border-top: 1px solid #E2E0DA; }
.age-fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 1px solid #f0eeea;
}
.age-fact-row:nth-child(odd) { background: #fafaf8; }
.age-fact-icon-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: #374151;
  font-weight: 500;
}
.age-fact-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.age-fact-value { font-size: .95rem; font-weight: 700; color: #0A2540; }
/* Birthday banner */
.age-bday-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff8e6;
  border-top: 1px solid #fde68a;
  padding: 14px 20px;
}
.bday-icon { font-size: 1.5rem; }
.age-bday-text { font-size: .9rem; color: #374151; }
.age-bday-text strong { font-size: 1.1rem; color: #0A2540; font-weight: 800; }
.age-result-actions { padding: 14px 24px 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.age-action-btn {
  background: #fff;
  border: 1.5px solid #E2E0DA;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  color: #374151;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.age-action-btn:hover { border-color: #0A2540; color: #0A2540; background: #f0f4f8; }

/* ════════════════════════════════════════════════════
   SLEEP CALCULATOR
   ════════════════════════════════════════════════════ */
.sleep-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.sleep-card { background: #fff; border: 1px solid #E2E0DA; border-radius: 8px; padding: 14px 10px; text-align: center; transition: all .18s; cursor: pointer; }
.sleep-card:hover { border-color: #B91C2B; box-shadow: 0 4px 14px rgba(185,28,43,.1); transform: translateY(-2px); }
.sleep-card.best { border-color: #1F7A4D; background: #EBF7F0; }
.sleep-card-time { font-size: 1.3rem; font-weight: 800; color: #0A2540; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.sleep-card-cycles { font-size: .7rem; color: #8B8B85; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.sleep-card.best .sleep-card-time, .sleep-card.best .sleep-card-cycles { color: #1F7A4D; }

/* ════════════════════════════════════════════════════
   BMI RESULT
   ════════════════════════════════════════════════════ */
.bmi-result-premium { animation: resultSlideUp .35s cubic-bezier(.22,1,.36,1) both; }
.bmi-score-band { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg,#3b6ea8 0% 18%,#1F7A4D 18% 44%,#B45309 44% 64%,#B91C2B 64% 100%); margin: 18px 0 8px; overflow: visible; }
.bmi-score-marker { position: absolute; top: -5px; width: 28px; height: 28px; background: #0A2540; border: 3px solid #fff; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: left .5s cubic-bezier(.22,1,.36,1); }
.bmi-band-labels { display: flex; justify-content: space-between; font-size: .65rem; color: #8B8B85; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }

/* ════════════════════════════════════════════════════
   MORTGAGE / AMORTIZATION
   ════════════════════════════════════════════════════ */
.toggle-amort { background: none; border: 1.5px solid #E2E0DA; border-radius: 5px; padding: 9px 16px; cursor: pointer; font-size: .83rem; font-weight: 700; color: #5A5A5A; font-family: 'Libre Franklin', sans-serif; transition: all .18s; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }
.toggle-amort:hover { border-color: #B91C2B; color: #B91C2B; background: #FBE9EA; }

/* ════════════════════════════════════════════════════
   TIP CALCULATOR
   ════════════════════════════════════════════════════ */
.tip-split-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin: 14px 0; }
.tip-split-card { background: #fff; border: 1px solid #E2E0DA; border-radius: 8px; padding: 14px 8px; text-align: center; }
.tip-split-card .split-num { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #8B8B85; margin-bottom: 6px; }
.tip-split-card .split-amount { font-size: 1.25rem; font-weight: 800; color: #0A2540; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.tip-split-card.active { border-color: #0A2540; background: #E8EEF4; }
.tip-split-card.active .split-amount { color: #0A2540; }

/* ════════════════════════════════════════════════════
   UNIT TOGGLE
   ════════════════════════════════════════════════════ */
.unit-toggle { display: flex; gap: 0; margin-bottom: 20px; border: 1.5px solid #E2E0DA; border-radius: 6px; overflow: hidden; width: fit-content; }
.unit-toggle label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; font-size: .86rem; color: #5A5A5A; padding: 9px 18px; transition: all .15s; user-select: none; background: #fff; border-right: 1px solid #E2E0DA; }
.unit-toggle label:last-child { border-right: none; }
.unit-toggle label:hover { background: #FBFAF7; color: #1A1A1A; }
.unit-toggle input[type=radio] { accent-color: #B91C2B; }
.unit-toggle input[type=radio]:checked + span, .unit-toggle label:has(input:checked) { background: #0A2540; color: #fff; }

/* ════════════════════════════════════════════════════
   PIE CHART
   ════════════════════════════════════════════════════ */
.pie-chart-container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.pie-legend { display: flex; flex-direction: column; gap: 9px; min-width: 140px; }
.pie-legend-item { display: flex; align-items: center; gap: 9px; font-size: .83rem; color: #3F3F3F; font-weight: 600; }
.pie-dot { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   SKELETON LOADER
   ════════════════════════════════════════════════════ */
.skeleton { background: linear-gradient(90deg,#E2E0DA 25%,#FBFAF7 50%,#E2E0DA 75%); background-size: 400px 100%; animation: shimmer 1.4s infinite; border-radius: 5px; height: 18px; margin: 8px 0; }
.skeleton.wide { width: 100%; }
.skeleton.mid  { width: 65%; }
.skeleton.short{ width: 40%; }

/* ════════════════════════════════════════════════════
   SAVINGS GOAL — Progress Bar
   ════════════════════════════════════════════════════ */
.savings-progress-wrap { margin: 16px 0; }
.savings-progress-bar { height: 12px; background: #E2E0DA; border-radius: 6px; overflow: hidden; }
.savings-progress-fill { height: 100%; background: linear-gradient(90deg,#1F7A4D,#2ea86a); border-radius: 6px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.savings-progress-label { font-size: .72rem; font-weight: 700; color: #5A5A5A; margin-top: 6px; display: flex; justify-content: space-between; }

/* ════════════════════════════════════════════════════
   NET WORTH / RETIREMENT — Bar Chart
   ════════════════════════════════════════════════════ */
.bar-chart-simple { display: flex; align-items: flex-end; gap: 10px; height: 100px; margin: 18px 0 10px; padding: 0 4px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.bar-fill { width: 100%; border-radius: 3px 3px 0 0; min-height: 4px; transition: height .5s cubic-bezier(.22,1,.36,1); }
.bar-fill.primary { background: #0A2540; }
.bar-fill.accent  { background: #B91C2B; }
.bar-fill.success { background: #1F7A4D; }
.bar-label { font-size: .65rem; color: #8B8B85; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ════════════════════════════════════════════════════
   MOBILE OVERRIDES
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .results-box { padding: 18px; }
  .result-item.highlight .value { font-size: 1.4rem; }
  .macro-grid { border-radius: 6px; }
  .macro-value { font-size: 1.25rem; }
  .macro-label { font-size: .65rem; }
  .age-hero-num, .age-big-num { font-size: 2.5rem; }
  .age-stats-grid { grid-template-columns: repeat(3,1fr); }
  .age-stat-num { font-size: 1.05rem; }
  .age-stat-label, .age-stat-lbl { font-size: .62rem; }
  .sleep-cards-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .sleep-card-time { font-size: 1.1rem; }
  .tip-split-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .tip-split-card .split-amount { font-size: 1.05rem; }
  .bar-chart-simple { height: 80px; gap: 7px; }
  .pie-chart-container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .macro-grid { grid-template-columns: repeat(3,1fr); }
  .macro-value { font-size: 1.1rem; }
  .sleep-cards-grid { grid-template-columns: repeat(2,1fr); }
  .tip-split-grid { grid-template-columns: repeat(2,1fr); }
  .age-stats-grid { grid-template-columns: repeat(2,1fr); }
}