/* Form Validation Styles */
.form-group {
    position: relative;
}

/* Invalid field */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

/* Valid field */
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: #28a745 !important;
    background-color: #f0fff4 !important;
}

input.is-valid:focus,
select.is-valid:focus,
textarea.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15) !important;
}

/* Error message */
.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 6px;
    animation: shake 0.3s ease-out;
}

.field-error i {
    font-size: 0.9em;
}

/* Checkbox validation */
.form-checkbox input.is-invalid + label {
    color: #dc3545;
}

.form-checkbox .field-error {
    margin-top: 4px;
    margin-left: 0;
}

/* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Success checkmark animation */
input.is-valid,
select.is-valid,
textarea.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px !important;
}

select.is-valid {
    background-position: right 35px center;
}

/* Error icon for invalid */
input.is-invalid,
textarea.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px !important;
}