/* Shake animation for invalid fields */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}


/* --- Red Border for Invalid Input --- */
.is-invalid {
    border: 2px solid #e68c94 !important;
    animation: shake 0.25s ease-in-out;
    /* Red border */
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.4);
}

/* --- Green Border for Valid Input --- */
.is-valid {
    border: 2px solid #7da9dc !important;
    /* Green border */
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
    transition: box-shadow 0.3s ease-in-out;
}

.invalid-feedback {
    margin-top: -10px;
    margin-bottom: 10px;
}