/* Calorie Calculator - CSS */
:root {
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#2b6cb0;
  --muted:#6b6f76;
  --radius:10px;
}

/* basic reset / fonts */
* { box-sizing:border-box; font-family:Inter,system-ui,Roboto,Arial; }
body { background:var(--bg); padding:24px; margin:0; color:#222; }

/* layout */
.calc-wrap { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.calc-header h1 { margin:0 0 6px; font-size:1.6rem; color:var(--accent); }

.muted { color:var(--muted); }
.small { font-size:0.85rem; }

.calc-form { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.col { flex:1; min-width:280px; }
.results-col { flex:1.1; min-width:300px; }

label { display:block; margin:10px 0 6px; font-weight:600; font-size:0.95rem; color:#2b2b2b; }
input[type=number], select, .two-inputs input { width:100%; padding:10px; border-radius:8px; border:1px solid #dbe3ee; background:#fff; }
.two-inputs { display:flex; gap:8px; }
.two-inputs input { flex:1; }

.radio-row { display:flex; gap:14px; align-items:center; }

.btn { margin-top:14px; padding:10px 14px; border-radius:8px; border:0; background:var(--accent); color:#fff; cursor:pointer; font-weight:700; }
.btn-secondary { background:#f1f5f9; color:#333; border:1px solid #ddd; margin-left:8px; }

.result-card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:0 6px 18px rgba(32,45,66,0.06); border:1px solid #eef3fa; }
.result-card h2 { margin:0 0 10px; font-size:1.1rem; color:#0f1724; }

.result-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #f0f4f8; }
.result-row strong { font-size:1rem; color:#111; }

.macro { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #fbfbfb; }
.macro-left { flex:0 0 38%; min-width:120px; }
.macro-name { font-weight:700; }
.progress { height:12px; background:#eef5ff; border-radius:999px; overflow:hidden; }
.bar { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),#5aa0d6); }

.hidden { display:none !important; }
.calc-footer { margin-top:8px; text-align:center; }

@media (max-width:780px){
  .calc-form { flex-direction:column; }
  .results-col { order:-1; }
}