/* Input and Select Error States */
.dokan-form-group input.error,
.dokan-form-group select.error {
    border: 2px solid #dc3545 !important;
    animation: shake 0.5s;
}

/* Error Message Styling */
.dokan-error-msg {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.dokan-error-msg.show {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Fade In Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Focus state for error fields */
.dokan-form-group input.error:focus,
.dokan-form-group select.error:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    outline: none;
}

/* Transition for smooth visual feedback */
.dokan-form-group input,
.dokan-form-group select {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.woocommerce-checkout input.error,
.woocommerce-checkout select.error {
    border-color: #dc3545 !important;
}

.error-message {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

/* Animasyon efekti */
.error-message {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}