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

/* ── Unit / gender pill toggles ──────────────────────────────────────────────── */
.unit-pills,
.gender-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: 0.75rem;
}

.unit-pill,
.gender-pill {
    padding:       0.4rem 1.125rem;
    border:        1.5px solid var(--border);
    border-radius: 999px;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--muted);
    background:    transparent;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
}

.unit-pill:hover,
.gender-pill:hover {
    border-color: var(--accent);
    color:        var(--accent);
}

.unit-pill.active,
.gender-pill.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

/* ── Measurement inputs grid ─────────────────────────────────────────────────── */
.bf-inputs-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.875rem;
    margin-top:            1rem;
}

@media (max-width: 480px) {
    .bf-inputs-grid { grid-template-columns: 1fr; }
}

.bf-input-group {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.bf-input-group label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted);
}

.bf-input-unit {
    font-size:   0.75rem;
    font-weight: 500;
    color:       #a09d99;
    margin-left: 0.25rem;
}

.bf-input-wrap {
    display:   flex;
    position:  relative;
}

.bf-input {
    width:         100%;
    padding:       0.5rem 0.75rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     1rem;
    font-weight:   600;
    font-family:   'IBM Plex Sans', sans-serif;
    background:    var(--bg);
    color:         var(--text);
    transition:    border-color 0.15s;
    -moz-appearance: textfield;
}

.bf-input::-webkit-inner-spin-button,
.bf-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bf-input:focus {
    outline:      none;
    border-color: var(--accent);
}

/* ── Calculate button ────────────────────────────────────────────────────────── */
.bf-calc-btn-wrap {
    margin-top: 1.25rem;
}

/* ── Results: large body fat % display ──────────────────────────────────────── */
.bf-result-main {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    margin-top:  1.5rem;
    margin-bottom: 1rem;
}

.bf-percentage {
    font-size:     3.5rem;
    font-weight:   800;
    line-height:   1;
    font-family:   'IBM Plex Sans', sans-serif;
    letter-spacing: -0.03em;
}

.bf-pct-symbol {
    font-size:   2rem;
    font-weight: 700;
    margin-left: 0.1em;
    vertical-align: super;
}

/* Category colour classes */
.bf-blue        { color: #1a6fa8; }
.bf-green       { color: #2d7a25; }
.bf-light-green { color: #4a9e3f; }
.bf-orange      { color: #c07a10; }
.bf-red         { color: #b94a48; }

/* ── Category badge ──────────────────────────────────────────────────────────── */
.bf-category-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       0.375rem 1rem;
    border-radius: 999px;
    font-size:     0.9375rem;
    font-weight:   700;
}

.bf-blue-badge        { background: #ddeef7; color: #1a6fa8; }
.bf-green-badge       { background: #d4e8d0; color: #2d7a25; }
.bf-light-green-badge { background: #dff0db; color: #3a7a30; }
.bf-orange-badge      { background: #fdecd3; color: #994a00; }
.bf-red-badge         { background: #fde8e8; color: #8b2020; }

/* ── Fat / lean mass grid ────────────────────────────────────────────────────── */
.bf-mass-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

.bf-mass-card {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: 14px;
    padding:       0.875rem 1rem;
    text-align:    center;
}

.bf-mass-label {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
    margin-bottom: 0.25rem;
}

.bf-mass-value {
    font-size:   1.375rem;
    font-weight: 700;
    color:       var(--text);
    font-family: 'IBM Plex Sans', sans-serif;
}

.bf-mass-unit {
    font-size:   0.8125rem;
    font-weight: 500;
    color:       var(--muted);
    margin-left: 0.15em;
}

/* ── ASEAN callout ───────────────────────────────────────────────────────────── */
.asean-callout {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    background:    #fff8f0;
    border:        1.5px solid #f2d4b8;
    border-radius: 12px;
    padding:       0.875rem 1rem;
    margin-bottom: 1rem;
}

.asean-callout-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.asean-callout-text {
    font-size:   0.875rem;
    color:       var(--text);
    line-height: 1.55;
}

/* ── BMI comparison ──────────────────────────────────────────────────────────── */
.bmi-comparison {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: 12px;
    padding:       0.875rem 1rem;
}

.bmi-comparison-label {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
    margin-bottom: 0.5rem;
}

.bmi-comparison-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 0.5rem;
}

.bmi-value {
    font-size:   1.0625rem;
    font-weight: 700;
    color:       var(--text);
}

.bmi-cat-badge {
    display:       inline-flex;
    padding:       0.2rem 0.625rem;
    background:    #f0f0ec;
    border-radius: 999px;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         var(--muted);
}

.bmi-comparison-msg {
    font-size:   0.875rem;
    color:       var(--text);
    line-height: 1.55;
}

/* ── Error state ─────────────────────────────────────────────────────────────── */
.bf-error {
    background:    #fde8e8;
    border:        1.5px solid #f2b8b8;
    border-radius: 10px;
    padding:       0.875rem 1rem;
    font-size:     0.9375rem;
    color:         #7a2020;
    margin-top:    1rem;
}

/* ── Health disclaimer ───────────────────────────────────────────────────────── */
.health-disclaimer {
    font-size:     0.8125rem;
    color:         var(--muted);
    background:    #FFFFFF;
    border:        1px solid var(--border);
    border-radius: 8px;
    padding:       0.625rem 0.875rem;
    margin-top:    1.25rem;
    line-height:   1.5;
}

/* ── Group label ─────────────────────────────────────────────────────────────── */
.group-label {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
    margin:        1.25rem 0 0.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .bf-percentage { font-size: 2.75rem; }
    .bf-pct-symbol { font-size: 1.5rem; }
}

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