/* BMI Calculator specific styles */

/* Style the tool title with a blue/cyan gradient */
.gradient-text-bmi {
    background: linear-gradient(to right, #2563eb, #0ea5e9, #06b6d4); /* Blue-600 -> Sky-500 -> Cyan-500 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Input field focus */
.input-field:focus {
    border-color: #2563eb; /* Blue-600 */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Radio button focus */
.form-radio:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Results Section Styling */
.results-section {
    /* Add specific styling if needed, Tailwind classes handle most */
    /* Example: Add a border color based on category */
}

#bmiValue {
    /* Style the large BMI number */
}

#bmiCategory {
    /* Style the category text, potentially change color based on category */
}

/* Optional: Style the category text colors */
.bmi-underweight {
    color: #0ea5e9; /* Sky-500 */
}
.bmi-normal {
    color: #22c55e; /* Green-500 */
}
.bmi-overweight {
    color: #f59e0b; /* Amber-500 */
}
.bmi-obesity {
    color: #ef4444; /* Red-500 */
}

/* Hide/Show transition for results (optional) */
#resultsSection.hidden {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#resultsSection:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}