/* Form validation styles */
.form-group {
    position: relative;
    margin-bottom: 2rem;  /* Increased to accommodate error message */
}

.form-group input.error,
.form-group select.error {
    border: 1px solid #dc2626;
    background-color: #fef2f2;
}

.field-error {
    position: absolute;
    top: 100%;  /* Position below the input */
    left: 0;
    color: #dc2626;
    font-size: 0.75rem;  /* Slightly smaller font */
    font-weight: 400;
    margin-top: 4px;  /* Space between input and error */
    line-height: 1.2;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add checkmark for valid fields */
.form-group input:not(.error):valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}