/* Form Validation Styles */

/* Success and Error Message Styles */
#result .success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
}

#result .failure {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
}

#result .process {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
}

/* HTML5 Validation Styles */
.form-control:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}

.form-control:valid:not(:placeholder-shown) {
    border-color: #28a745;
}

.form-select:invalid {
    border-color: #dc3545;
}

.form-select:valid:not([value=""]) {
    border-color: #28a745;
}

/* Focus states */
.form-control:focus:invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control:focus:valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-select:focus:invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-select:focus:valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Textarea specific */
textarea.form-control:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}

textarea.form-control:valid:not(:placeholder-shown) {
    border-color: #28a745;
}

/* Remove validation styles when field is empty */
.form-control:placeholder-shown {
    border-color: #e0e0e0;
}

/* Ensure validation doesn't interfere with initial state */
.form-control:not(:focus):placeholder-shown {
    border-color: #e0e0e0;
}