/* Custom Style for Invalid Feedback */
.invalid-feedback {
    color: #dc3545; /* Bootstrap's default red color for error messages */
    font-size: 0.780rem; /* Smaller font size */
    margin-top: 3px; /* Space between input and error message */
    display: block; /* Make sure it is visible when validation fails */
}

/* Add custom border color and focus effect for invalid fields */
.is-invalid {
    border-color: #dc3545 !important; /* Red border for invalid fields */
    background-color: rgba(220, 53, 69, 0.1); /* Light red background for invalid input */
}

/* Optional: Customize the label to indicate required fields */
label[for] {
    font-weight: bold;
}

label[for].required::after {
    content: "*";
    color: red;
}

/* Optional: Customize button styles */
button.is-invalid {
    background-color: #dc3545;
    color: white;
    border: 1px solid #dc3545;
}

button.is-invalid:hover {
    background-color: #c82333;
    border-color: #bd2130;
}