/* General styles for all calculators */
.multi-calculator-container {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    font-family: sans-serif;
}

.multi-calculator-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.multi-calculator-container label {
    display: block;
    margin-bottom: 5px;
}

.multi-calculator-container input[type="number"],
.multi-calculator-container select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.multi-calculator-container input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.multi-calculator-container p {
    margin-top: 10px;
    font-weight: bold;
}
/* Specific calculator styles (if needed) */

/* BMI Calculator */
.bmi-calculator {
    width: 350px;
}
/* Added styles for visual feedback */
.bmi-result {
    margin-top: 20px;
    padding: 10px;
    border-radius: 3px;
}
.bmi-result.underweight {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.bmi-result.normal {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.bmi-result.overweight {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.bmi-result.obese {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

/* Target Heart Rate Calculator */
.target-heart-rate-calculator {
    width: 300px;
}

/* Daily Water Intake Calculator */
.water-intake-calculator {
    width: 300px;
}

/* Calorie Burn Calculator */
.calorie-burn-calculator {
    width: 350px;
}

/* Macronutrient Needs Calculator */
.macro-calculator {
    width: 400px;
}
.macro-calculator #custom_ratio label {
    display: inline-block;
    width: 100px;
}
.macro-calculator #custom_ratio input[type="number"] {
    width: 100px;
    display: inline-block;
}


/* Ideal Weight Calculator */
.ideal-weight-calculator {
    width: 300px;
}

.bmr-calculator {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.bmr-calculator label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.bmr-calculator input[type="number"],
.bmr-calculator select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Include padding and border in element's total width */
}

.bmr-calculator input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.bmr-calculator input[type="submit"]:hover {
    background-color: #45a049;
}

.body-fat-calculator {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.body-fat-calculator h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.body-fat-calculator label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.body-fat-calculator input[type="number"],
        .body-fat-calculator select {
            width: 100%;
            max-width: 225px; /* Added max-width to limit input size */
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box; /* Ensure padding doesn't affect width */
        }


        .body-fat-calculator input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            width: auto; /* Changed from 100% to auto */
            min-width: 150px; /* Added a minimum width */
            max-width: 250px; /* Added a maximum width */
        }
        

.body-fat-calculator input[type="submit"]:hover {
    background-color: #45a049;
}

.body-fat-calculator .result-box {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #4CAF50;
    border-radius: 3px;
    background-color: #e8f5e9;
}

.body-fat-calculator .result-box h3 {
    margin-top: 0;
    color: #388E3C;
}

.body-fat-calculator .result-box p {
    margin: 5px 0;
}

.body-fat-calculator .error-box {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #f44336;
    border-radius: 3px;
    background-color: #ffebee;
    color: #d32f2f;
}

.body-fat-calculator .measurement-tips {
    list-style: disc;
    padding-left: 20px;
}

.body-fat-calculator .measurement-tips li {
    margin: 5px 0;
}

.lbm-calculator { max-width: 600px; margin: 20px auto; }
.form-group { margin-bottom: 1rem; }
.result-box { background: #f8f9fa; padding: 20px; margin-top: 20px; }
.error-box { color: #dc3545; background: #fff3f3; padding: 15px; }
.help-tip { cursor: help; margin-left: 5px; }