/* ============================================================
   TDEE Calculator — tdee.css (UPDATED WITH NEW FEATURES)
   ============================================================ */

/* ── Unit & Gender Toggles ───────────────────────────────── */
.toggle-group { display:flex; background:#f1f5f9; border-radius:10px; padding:4px; gap:4px; margin-bottom:14px; }
.toggle-btn { flex:1; padding:8px 12px; border-radius:8px; border:none; font-family:'Lexend',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; color:#64748b; background:transparent; text-align:center; }
.toggle-btn.active { background:#1D3557; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.toggle-btn:hover:not(.active) { color:#1D3557; }

/* ── Form Inputs & Selects ───────────────────────────────── */
.input-row { display:flex; gap:10px; margin-bottom:14px; }
.input-row > div { flex:1; }
.input-group-text { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; font-weight:600; pointer-events:none; }
.calc-input.with-text { padding-right:40px; }
#bf-group { display:none; }
#bf-group.show { display:block; animation:fadeIn 0.3s ease; }

/* ── Results Area ────────────────────────────────────────── */
#tdee-result-area { display:none; margin-top:24px; }
#tdee-result-area.show { display:block; animation:fadeInUp 0.5s ease forwards; }

/* ── Main TDEE Result Card ───────────────────────────────── */
.tdee-hero-card { background:linear-gradient(135deg,#1D3557 0%,#2d4f7f 100%); border-radius:16px; padding:24px 20px; text-align:center; margin-bottom:20px; color:#fff; box-shadow:0 10px 25px -5px rgba(29, 53, 87, 0.3); }
.tdee-hero-label { font-family:'Inter',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.8); margin-bottom:8px; }
.tdee-hero-val { font-family:'Lexend',sans-serif; font-weight:900; font-size:42px; line-height:1; margin-bottom:4px; display:flex; align-items:baseline; justify-content:center; gap:6px; }
.tdee-hero-val span { font-size:16px; font-weight:500; color:rgba(255,255,255,0.8); }
.tdee-hero-sub { font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.7); background:rgba(0,0,0,0.15); display:inline-block; padding:4px 12px; border-radius:20px; margin-top:10px; }

/* ── Goal Tabs (Maintenance, Cutting, Bulking) ───────────── */
.goal-tabs { display:flex; gap:8px; margin-bottom:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:6px; }
.goal-tab { flex:1; padding:10px; border-radius:8px; border:none; font-family:'Lexend',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; color:#64748b; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; }
.goal-tab span { font-size:10px; font-family:'Inter',sans-serif; font-weight:500; opacity:0.8; }
.goal-tab.active { background:#fff; color:#1D3557; box-shadow:0 2px 6px rgba(0,0,0,0.06); border:1px solid #e2e8f0; }
.goal-tab:hover:not(.active) { color:#1D3557; background:rgba(255,255,255,0.5); }
.goal-tab.active[data-goal="cut"] { color:#E63946; }
.goal-tab.active[data-goal="bulk"] { color:#16a34a; }

/* ── Goal Content Panels & Chart ─────────────────────────── */
.goal-panel { display:none; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:20px; margin-bottom:20px; }
.goal-panel.active { display:block; animation:fadeIn 0.35s ease; }
.goal-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; border-bottom:1px solid #f1f5f9; padding-bottom:12px; }
.goal-panel-title { font-family:'Lexend',sans-serif; font-size:16px; font-weight:700; color:#1D3557; }
.goal-panel-cals { font-family:'Lexend',sans-serif; font-size:24px; font-weight:800; color:#1D3557; }
.goal-panel-cals span { font-size:12px; font-weight:500; color:#64748b; margin-left:4px; }

.macro-chart-container { position:relative; height:180px; width:100%; margin-bottom:20px; display:flex; justify-content:center; }

/* ── Macros Grid ─────────────────────────────────────────── */
.macro-split-selector { display:flex; gap:6px; margin-bottom:16px; }
.macro-btn { flex:1; padding:6px 10px; border-radius:6px; border:1px solid #e2e8f0; background:#f8fafc; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; color:#64748b; cursor:pointer; }
.macro-btn.active { background:#1D3557; color:#fff; border-color:#1D3557; }

.macros-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.macro-card { background:#f8fafc; border-radius:10px; padding:16px 12px; text-align:center; position:relative; overflow:hidden; border:1px solid #e2e8f0; }
.macro-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.macro-card.protein::before { background:#3b82f6; }
.macro-card.fats::before { background:#f59e0b; }
.macro-card.carbs::before { background:#10b981; }

.macro-title { font-family:'Lexend',sans-serif; font-size:13px; font-weight:700; color:#1D3557; margin-bottom:4px; }
.macro-val { font-family:'Lexend',sans-serif; font-size:22px; font-weight:800; line-height:1; margin-bottom:4px; }
.macro-val.protein { color:#3b82f6; }
.macro-val.fats { color:#f59e0b; }
.macro-val.carbs { color:#10b981; }
.macro-unit { font-family:'Inter',sans-serif; font-size:11px; color:#64748b; }
.macro-pct { display:inline-block; background:#e2e8f0; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; margin-top:8px; color:#475569; }

/* ── Stats Strip ─────────────────────────────────────────── */
.tdee-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.tdee-stat-box { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px; display:flex; justify-content:space-between; align-items:center; }
.tdee-stat-label { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#64748b; }
.tdee-stat-val { font-family:'Lexend',sans-serif; font-size:14px; font-weight:700; color:#1D3557; }

/* ── Dynamic Meal Tip ────────────────────────────────────── */
.meal-tip-box { background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:12px 14px; margin-top:16px; font-family:'Inter',sans-serif; font-size:12px; color:#0369a1; line-height:1.6; }
.meal-tip-box strong { color:#0c4a6e; font-family:'Lexend',sans-serif; }

/* ── Save & Compare ──────────────────────────────────────── */
#tdee-save-compare { display:none; margin-bottom:20px; }
#tdee-save-compare.show { display:block; animation:fadeIn 0.5s ease; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; text-align:center; padding:12px 0; }
.compare-label { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; text-transform:uppercase; margin-bottom:4px; }
.compare-val { font-family:'Lexend',sans-serif; font-size:16px; font-weight:700; }
.compare-note { font-family:'Inter',sans-serif; font-size:11px; text-align:center; margin-top:8px; color:#64748b; }

/* ── Content & Utility Classes ───────────────────────────── */
.highlight-box-tdee { background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%); border-left:4px solid #16a34a; border-radius:0 12px 12px 0; padding:16px 18px; margin-bottom:24px; }
.highlight-box-tdee p { font-size:13px; margin-bottom:0; color:#14532d; }
.tdee-hero-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#1D3557 0%,#2d4f7f 100%); color:#fff; border-radius:20px; padding:5px 14px; font-size:12px; font-weight:600; font-family:'Lexend',sans-serif; letter-spacing:0.3px; margin-bottom:16px; }

/* ── BMR Visual Bar ──────────────────────────────────────── */
.bmr-visual-bar { display:flex; height:24px; border-radius:12px; overflow:hidden; margin:16px 0 8px 0; }
.bmr-seg-bmr { width:70%; background:#1D3557; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; }
.bmr-seg-neat { width:15%; background:#3b82f6; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; }
.bmr-seg-tef { width:10%; background:#10b981; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; }
.bmr-seg-eat { width:5%; background:#f59e0b; }
.bmr-legend { display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:#64748b; font-family:'Inter',sans-serif; }
.bmr-legend span::before { content:''; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.leg-bmr::before { background:#1D3557; } .leg-neat::before { background:#3b82f6; } .leg-tef::before { background:#10b981; } .leg-eat::before { background:#f59e0b; }

/* ── Author Box ──────────────────────────────────────────── */
.author-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:20px; display:flex; gap:16px; align-items:center; margin-top:40px; }
.author-avatar { font-size:32px; background:#fff; width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; border:2px solid #e2e8f0; flex-shrink:0; }
.author-name { font-family:'Lexend',sans-serif; font-size:16px; font-weight:700; color:#1D3557; margin-bottom:2px; }
.author-title { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; font-weight:600; text-transform:uppercase; margin-bottom:8px; }
.author-card p { font-size:13px; margin:0; line-height:1.5; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .input-row { flex-direction:column; gap:0; margin-bottom:0; }
  .input-row > div { margin-bottom:14px; }
  .macros-grid { grid-template-columns:1fr; gap:8px; }
  .macro-card { padding:12px; display:flex; justify-content:space-between; align-items:center; }
  .macro-card::before { height:100%; width:4px; }
  .macro-pct { margin-top:0; }
  .goal-tabs { flex-wrap:wrap; }
  .goal-tab { min-width:30%; }
  .author-card { flex-direction:column; text-align:center; }
}
@media print {
  .toggle-group, .calc-btn, .goal-tabs, .macro-split-selector, .share-row { display:none !important; }
}