/* Result Block Styling */
.result-block.underweight {
    background-color: #ffcccc;
    border-left: 10px solid deeppink;
    transform: perspective(600px) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-block.healthy {
    background-color: #ccffcc;
    border-right: 10px solid limegreen;
    transform: perspective(600px) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-block.overweight {
    background-color: #ffe6b3;
    border-left: 10px solid orange;
    transform: perspective(600px) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-block.obese {
    background-color: #ff9999;
    border-right: 10px solid #ff6347;
    transform: perspective(600px) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Highlight active result block */
.result-block.highlight {
    /* Apply the same color to all borders */
    border-left: 10px solid;
    border-right: 10px solid;
    border-top: 10px solid;
    border-bottom: 10px solid;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    
}

.result-block.highlight.underweight {
    border-color: deeppink;
    border-width: 6px;
    transform: perspective(600px) rotateY(10deg);
}

.result-block.highlight.healthy {
    border-color: limegreen;
    border-width: 6px;
    transform: perspective(600px) rotateY(-10deg);
}

.result-block.highlight.overweight {
    border-color: orange;
    border-width: 6px;
    transform: perspective(600px) rotateY(10deg);
}

.result-block.highlight.obese {
    border-color: #ff6347;
    border-width: 6px;
    transform: perspective(600px) rotateY(-10deg);
}

.result-block {
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    margin: 5px;
    background-color: #f0f0f0;
    font-size: 1.1em;
    width: 100%;
    max-width: 450px;
    min-width: 320px;
    display: inline-flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-block:hover {
    transform: perspective(600px) rotateY(5deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Button Styling */
#calculate-bmi {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #a21e93; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 10px;
}

#calculate-bmi:hover {
    background-color: #ba1cd0; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#calculate-bmi:active {
    background-color: #3e8e41; /* Even darker green when button is clicked */
    transform: scale(1); /* Return to original size on click */
}

#calculate-bmi:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(72, 154, 74, 0.5); /* Add custom focus effect */
}

#reset-bmi {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #D9534F;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#reset-bmi:hover {
    background-color: #c9302c; /* Darker red on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

#reset-bmi:active {
    background-color: #ac2925; /* Even darker red when clicked */
    transform: scale(1); /* Return to original size on click */
}

#reset-bmi:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(208, 83, 72, 0.5);
}

/* Body Styling */
.bmi-fields {
    background: #EDF2F7;
    padding: 40px 10px;
}

.bmi-fields h2 {
    background: #B44CDD;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
    border-radius: 5px;
    font-size: 1.5em;
}

.bmi-sec {
    background: #E6E1E8;
    padding: 20px 10px;
}

/* 3D Button hover effect */
button {
    transform: perspective(300px) translateZ(0);
    transition: all 0.3s ease;
}

button:hover {
    transform: perspective(300px) translateZ(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Inputs Styling */
input[type="number"] {
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 450px;
  min-width: 340px;
}

input[type="number"]:focus {
    border-color: #B44CDD;
    outline: none;
    box-shadow: 0 0 5px rgba(180, 76, 221, 0.5);
    transform: scale(1.02);
}

/* Add animation when input fields gain focus */
input[type="number"]:focus {
    animation: focus-animation 0.5s ease-out;
}

@keyframes focus-animation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.02);
    }
}


/* Style for the Age Result section */
.age-result {
    margin-top: 15px;  /* Add some space above */
    padding: 10px 15px;  /* Add some padding for better spacing */
    background-color: #f2f2f2;  /* Light gray background */
    border-radius: 8px;  /* Rounded corners */
    border: 1px solid #ddd;  /* Subtle border */
    font-size: 16px;  /* Adjust font size */
    color: #333;  /* Dark text color for readability */
    text-align: center;  /* Center the text */
    font-weight: bold;  /* Bold text */
    transition: background-color 0.3s ease-in-out;  /* Smooth background color change */
}

/* Add hover effect to highlight */
.age-result:hover {
    background-color: #e0e0e0;  /* Slightly darker gray when hovered */
    cursor: pointer;  /* Change cursor to indicate clickable */
}