/* ============================================================
   BMI Calculator — bmi.css
   Extends /css/style.css  (load style.css FIRST, then this)
   ============================================================ */

.unit-toggle-bar { display:flex; background:#f1f5f9; border-radius:12px; padding:4px; gap:4px; margin-bottom:20px; }
.unit-tab { flex:1; padding:9px 16px; border-radius:9px; border:none; font-family:'Lexend',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; color:#64748b; background:transparent; }
.unit-tab.active { background:#fff; color:#1D3557; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

.bmi-gauge-wrap { display:flex; justify-content:center; margin-bottom:16px; }
#bmi-gauge-needle { transform-origin:150px 130px; transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1); }

.bmi-scale-bar { display:flex; border-radius:8px; overflow:hidden; height:10px; margin-bottom:5px; }
.seg-under  { flex:1.85; background:#60a5fa; }
.seg-normal { flex:1.3;  background:#4ade80; }
.seg-over   { flex:1;    background:#facc15; }
.seg-obese1 { flex:1;    background:#fb923c; }
.seg-obese2 { flex:1;    background:#ef4444; }
.seg-obese3 { flex:0.5;  background:#991b1b; }
.bmi-scale-labels { display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; margin-bottom:20px; }

.result-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.result-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:12px; text-align:center; }
.result-card-val { font-family:'Lexend',sans-serif; font-weight:800; font-size:22px; color:#1D3557; line-height:1; margin-bottom:3px; }
.result-card-label { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.05em; }

.bmi-category-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px; font-family:'Lexend',sans-serif; font-weight:700; font-size:13px; border:1.5px solid; margin-bottom:12px; }
.cat-underweight { color:#1d4ed8; background:#dbeafe; border-color:#93c5fd; }
.cat-normal      { color:#15803d; background:#dcfce7; border-color:#86efac; }
.cat-overweight  { color:#a16207; background:#fef9c3; border-color:#fde047; }
.cat-obese1      { color:#c2410c; background:#ffedd5; border-color:#fdba74; }
.cat-obese2      { color:#b91c1c; background:#fee2e2; border-color:#fca5a5; }
.cat-obese3      { color:#7f1d1d; background:#fef2f2; border-color:#f87171; }

.ideal-weight-card { background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border:1px solid #bfdbfe; border-radius:12px; padding:14px 16px; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.ideal-icon { font-size:24px; flex-shrink:0; }
.ideal-weight-title { font-family:'Lexend',sans-serif; font-weight:700; color:#1e40af; font-size:11px; margin-bottom:2px; text-transform:uppercase; letter-spacing:0.05em; }
.ideal-weight-val { font-family:'Lexend',sans-serif; font-weight:800; color:#1D3557; font-size:18px; }
.ideal-weight-sub { font-family:'Inter',sans-serif; font-size:11px; color:#3b82f6; }

.asian-callout { background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:12px 14px; margin-bottom:12px; display:none; }
.asian-callout.show { display:block; }
.asian-callout-title { font-family:'Lexend',sans-serif; font-weight:700; color:#9a3412; font-size:12px; margin-bottom:4px; }
.asian-callout-body { font-family:'Inter',sans-serif; font-size:12px; color:#7c2d12; line-height:1.6; }

.bodyfat-box { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:14px 16px; margin-bottom:12px; display:none; }
.bodyfat-box.show { display:block; }
.bodyfat-title { font-family:'Lexend',sans-serif; font-weight:700; color:#14532d; font-size:13px; margin-bottom:4px; }
.bodyfat-val { font-family:'Lexend',sans-serif; font-weight:800; font-size:26px; color:#15803d; }
.bodyfat-note { font-family:'Inter',sans-serif; font-size:11px; color:#166534; }

.whtr-panel { background:#faf5ff; border:1px solid #e9d5ff; border-radius:12px; padding:14px 16px; margin-bottom:12px; display:none; }
.whtr-panel.show { display:block; }
.whtr-title { font-family:'Lexend',sans-serif; font-weight:700; color:#6b21a8; font-size:13px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.whtr-row { display:flex; gap:8px; align-items:flex-end; }
.whtr-row .calc-input { flex:1; }
.whtr-calc-btn { padding:10px 14px; border-radius:10px; border:none; background:#7c3aed; color:#fff; font-family:'Lexend',sans-serif; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; transition:background 0.2s; flex-shrink:0; }
.whtr-calc-btn:hover { background:#6d28d9; }
.whtr-result { margin-top:12px; display:none; }
.whtr-result.show { display:block; }
.whtr-val { font-family:'Lexend',sans-serif; font-weight:800; font-size:26px; color:#6b21a8; }
.whtr-label { font-family:'Inter',sans-serif; font-size:12px; color:#4c1d95; }

.bmi-who-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; margin-bottom:24px; }
.bmi-who-table thead tr { background:#1D3557; }
.bmi-who-table th { text-align:left; padding:11px 14px; font-family:'Lexend',sans-serif; font-weight:600; font-size:12px; color:#fff; }
.bmi-who-table td { padding:10px 14px; font-family:'Inter',sans-serif; font-size:13px; color:#475569; border-bottom:1px solid #f1f5f9; }
.bmi-who-table tbody tr:nth-child(even) { background:#f8fafc; }
.bmi-who-table tbody tr:last-child td { border-bottom:none; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }

.compare-metrics-table { width:100%; border-collapse:collapse; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; margin-bottom:24px; }
.compare-metrics-table th { background:#1D3557; color:#fff; padding:10px 14px; font-family:'Lexend',sans-serif; font-size:12px; font-weight:600; text-align:left; }
.compare-metrics-table td { padding:10px 14px; font-family:'Inter',sans-serif; font-size:13px; color:#475569; border-bottom:1px solid #f1f5f9; }
.compare-metrics-table tbody tr:nth-child(even) { background:#f8fafc; }
.td-yes { color:#16a34a; font-weight:600; }
.td-partial { color:#ca8a04; font-weight:600; }
.td-no { color:#dc2626; font-weight:600; }

.tips-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.tip-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.tip-icon { font-size:22px; margin-bottom:8px; }
.tip-title { font-family:'Lexend',sans-serif; font-weight:600; color:#1D3557; font-size:14px; margin-bottom:6px; }
.tip-body { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; line-height:1.6; }

.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.stat-strip-box { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:12px; text-align:center; }
.stat-strip-num { font-family:'Lexend',sans-serif; font-weight:800; font-size:20px; color:#1D3557; }
.stat-strip-num.red { color:#E63946; }
.stat-strip-label { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }

.highlight-box { background:linear-gradient(135deg,#fff5f5 0%,#fef2f2 100%); border-left:4px solid #E63946; border-radius:0 12px 12px 0; padding:16px 18px; margin-bottom:24px; }
.highlight-box p { font-size:13px; margin-bottom:0; }

.bmi-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; }

#bmi-result-area { display:none; margin-top:24px; }
#bmi-result-area.show { display:block; animation:fadeInUp 0.5s ease forwards; }
#bmi-interpretation { background:#f8fafc; border-radius:12px; padding:14px 16px; font-family:'Inter',sans-serif; font-size:13px; color:#334155; line-height:1.7; margin-bottom:12px; }

@media (max-width:768px) {
  .tips-grid { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .result-cards { grid-template-columns:1fr 1fr; }
  .result-cards .result-card:last-child { grid-column:1/-1; }
}
@media print {
  .whtr-panel,.share-row,.sidebar-card,.calc-btn,.unit-toggle-bar { display:none !important; }
}