/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Macros Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Unit toggle ─────────────────────────────────────────────────────────────── */
.unit-toggle {
    display:       inline-flex;
    border:        1px solid var(--border);
    border-radius: 8px;
    overflow:      hidden;
    margin-bottom: 1.25rem;
}
.unit-btn {
    padding:          0.45rem 1.25rem;
    background:       transparent;
    border:           none;
    font-size:        0.875rem;
    font-weight:      600;
    color:            var(--muted, #64748B);
    cursor:           pointer;
    transition:       background 0.18s, color 0.18s;
    font-family:      inherit;
}
.unit-btn.active {
    background: var(--accent, #E8472F);
    color:      #fff;
}
.unit-btn:not(.active):hover { background: #f2f0ed; }

/* ── Form grid: two-column on desktop ────────────────────────────────────────── */
.form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem 1.5rem;
    margin-bottom:         1.25rem;
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}
.form-field {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}
.form-field label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-field input,
.form-field select {
    padding:       0.6rem 0.875rem;
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 8px;
    font-size:     1rem;
    font-family:   inherit;
    color:         var(--text, #0D1B2A);
    background:    #fff;
    transition:    border-color 0.18s;
    width:         100%;
    box-sizing:    border-box;
}
.form-field input:focus,
.form-field select:focus {
    outline:       none;
    border-color:  var(--accent, #E8472F);
    box-shadow:    0 0 0 3px rgba(232,98,42,0.12);
}

/* ── Imperial height row ─────────────────────────────────────────────────────── */
.imperial-height-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     0.5rem;
}

/* ── Gender toggle ───────────────────────────────────────────────────────────── */
.gender-toggle {
    display: flex;
    gap:     0.5rem;
    margin-bottom: 1rem;
}
.gender-btn {
    flex:          1;
    padding:       0.55rem 1rem;
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 8px;
    background:    #fff;
    font-size:     0.9375rem;
    font-family:   inherit;
    font-weight:   600;
    color:         var(--muted, #64748B);
    cursor:        pointer;
    transition:    border-color 0.18s, background 0.18s, color 0.18s;
}
.gender-btn.active {
    border-color: var(--accent, #E8472F);
    background:   rgba(232,98,42,0.08);
    color:        var(--accent, #E8472F);
}
.gender-btn:hover:not(.active) { background: #FFFFFF; }

/* ── Goal radio buttons ──────────────────────────────────────────────────────── */
.goal-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-bottom: 1.25rem;
}
.goal-btn {
    padding:       0.5rem 1rem;
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 999px;
    background:    #fff;
    font-size:     0.875rem;
    font-family:   inherit;
    font-weight:   600;
    color:         var(--muted, #64748B);
    cursor:        pointer;
    transition:    border-color 0.18s, background 0.18s, color 0.18s;
    white-space:   nowrap;
}
.goal-btn.active {
    border-color: var(--accent, #E8472F);
    background:   var(--accent, #E8472F);
    color:        #fff;
}
.goal-btn:hover:not(.active) { background: #f2f0ed; }

/* ── Section divider label ───────────────────────────────────────────────────── */
.section-label {
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:         1.25rem 0 0.6rem;
}

/* ── Custom macro inputs ─────────────────────────────────────────────────────── */
.custom-macro-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   0.75rem;
    margin-bottom:         0.75rem;
}
@media (max-width: 480px) {
    .custom-macro-grid { grid-template-columns: 1fr; }
}
.custom-sum-row {
    font-size:   0.875rem;
    color:       var(--muted);
    margin-bottom: 0.75rem;
}

/* ── Calculate button ────────────────────────────────────────────────────────── */
.btn-calculate {
    display:       block;
    width:         100%;
    padding:       0.875rem 1.5rem;
    background:    var(--accent, #E8472F);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    font-size:     1.0625rem;
    font-weight:   700;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.12s;
    margin-top:    0.5rem;
}
.btn-calculate:hover  { background: #cf5220; }
.btn-calculate:active { transform: scale(0.99); }

/* ── Results ─────────────────────────────────────────────────────────────────── */
#results-wrap { margin-top: 1.75rem; }

.results-calories {
    text-align:    center;
    margin-bottom: 1.5rem;
    padding:       1.25rem;
    background:    var(--bg, #FFFFFF);
    border-radius: 12px;
}
.calories-label {
    display:     block;
    font-size:   0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:       var(--muted);
    margin-bottom: 0.35rem;
}
.calories-value {
    display:     block;
    font-family: 'IBM Plex Serif', serif;
    font-size:   3rem;
    color:       var(--accent, #E8472F);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.calories-unit {
    display:   block;
    font-size: 0.9375rem;
    color:     var(--muted);
    font-weight: 600;
}
.tdee-note {
    display:   block;
    font-size: 0.8125rem;
    color:     var(--muted);
    margin-top: 0.5rem;
}

/* ── Three macro cards ───────────────────────────────────────────────────────── */
.macro-cards {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   0.875rem;
    margin-bottom:         1.75rem;
}
@media (max-width: 520px) {
    .macro-cards { grid-template-columns: 1fr; }
}
.macro-card {
    border-radius: 14px;
    padding:       1.25rem 1rem;
    text-align:    center;
    border:        2px solid transparent;
}
.macro-protein {
    background:   rgba(74,144,217,0.08);
    border-color: rgba(74,144,217,0.3);
}
.macro-carbs {
    background:   rgba(232,98,42,0.08);
    border-color: rgba(232,98,42,0.3);
}
.macro-fat {
    background:   rgba(245,200,66,0.12);
    border-color: rgba(245,200,66,0.5);
}
.macro-label {
    font-size:      0.75rem;
    font-weight:    800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-secondary, #64748B);
    margin-bottom:  0.5rem;
}
.macro-protein .macro-label { color: #2b6cb0; }
.macro-carbs   .macro-label { color: #c2521a; }
.macro-fat     .macro-label { color: #927000; }

.macro-grams {
    font-family:  'IBM Plex Serif', serif;
    font-size:    2rem;
    line-height:  1;
    margin-bottom: 0.3rem;
}
.macro-protein .macro-grams { color: #4a90d9; }
.macro-carbs   .macro-grams { color: var(--accent, #E8472F); }
.macro-fat     .macro-grams { color: #d4a000; }

.macro-kcal {
    font-size:  0.8125rem;
    color:      var(--muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.macro-pct {
    font-size:  0.875rem;
    font-weight: 700;
    color:      var(--text-secondary);
}

/* ── CSS Donut chart ─────────────────────────────────────────────────────────── */
.donut-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    margin-bottom:  1.5rem;
}
.donut {
    width:         160px;
    height:        160px;
    border-radius: 50%;
    position:      relative;
}
.donut-hole {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         96px;
    height:        96px;
    border-radius: 50%;
    background:    #fff;
}
.donut-legend {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.75rem;
    justify-content: center;
}
.legend-item {
    font-size:   0.8125rem;
    font-weight: 600;
    padding:     0.2rem 0.7rem;
    border-radius: 999px;
    color:       #fff;
}
.legend-protein { background: #4a90d9; }
.legend-carbs   { background: var(--accent, #E8472F); }
.legend-fat     { background: #d4a000; }

/* ── Disclaimer note ─────────────────────────────────────────────────────────── */
.disclaimer-note {
    font-size:   0.8125rem;
    color:       var(--muted);
    background:  #fff8f0;
    border:      1px solid #fce0c8;
    border-radius: 8px;
    padding:     0.75rem 1rem;
    margin-top:  0.5rem;
}

/* ── Error message ───────────────────────────────────────────────────────────── */
.error-msg {
    color:         #c0392b;
    font-size:     0.875rem;
    font-weight:   600;
    margin-top:    0.75rem;
    padding:       0.6rem 0.875rem;
    background:    #fff5f5;
    border:        1px solid #fcc;
    border-radius: 8px;
}

/* cache-buster: 2026-05-24T05:06:05Z */