/**
 * Email Validation CSS Styles
 * Styling cho các trạng thái validation email
 */

/* Base styles cho input email validation */
.emailVerify {
    transition: all 0.3s ease;
    position: relative;
    /* border: 2px solid #e1e5e9 !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    outline: none !important; */
}


/* Valid state - Border xanh lá đậm */
.emailVerify.valid {
    border: 1px solid #0d8005 !important;
    background-color: rgba(13, 128, 5, 0.05) !important;
}

/* Fallback cho class cũ */
.emailVerify.email-valid {
    border: 1px solid #0d8005 !important;
    background-color: rgba(13, 128, 5, 0.05) !important;
}

/* Trạng thái đang loading - Màu vàng (không có icon quay) */
.emailVerify.email-loading {
    border: 1px solid #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
    background-color: rgba(255, 193, 7, 0.05) !important;
    animation: pulse 2s ease-in-out infinite;
}

/* Trạng thái email hợp lệ - Màu xanh lá nổi bật */
.emailVerify.email-valid {
    border: 1px solid #28a745 !important;
    box-shadow: 0 0 0 0.1rem rgba(40, 167, 69, 0.3), 0 0 20px rgba(40, 167, 69, 0.2) !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2328a745" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    background-color: rgba(40, 167, 69, 0.08) !important;
    animation: successPulse 0.8s ease-in-out, successGlow 2s ease-in-out infinite;
    position: relative;
}

/* Thêm hiệu ứng glow cho email hợp lệ */
.emailVerify.email-valid::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #28a745, #20c997, #28a745);
    z-index: -1;
    opacity: 0.6;
    animation: borderGlow 2s ease-in-out infinite;
}

/* Trạng thái email không hợp lệ - Màu đỏ */
.emailVerify.email-invalid {
    border: 1px solid #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    background-color: rgba(220, 53, 69, 0.05) !important;
    animation: errorShake 0.5s ease-in-out;
}

/* Animation cho loading spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animation pulse cho loading */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    }
    50% {
        box-shadow: 0 0 0 0.4rem rgba(255, 193, 7, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    }
}

/* Animation success cho valid - Pulse mạnh hơn */
@keyframes successPulse {
    0% {
        box-shadow: 0 0 0 0.3rem rgba(40, 167, 69, 0.3), 0 0 20px rgba(40, 167, 69, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 0.5rem rgba(40, 167, 69, 0.5), 0 0 30px rgba(40, 167, 69, 0.4);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0.3rem rgba(40, 167, 69, 0.3), 0 0 20px rgba(40, 167, 69, 0.2);
        transform: scale(1);
    }
}

/* Animation glow liên tục cho valid */
@keyframes successGlow {
    0%, 100% {
        box-shadow: 0 0 0 0.3rem rgba(40, 167, 69, 0.3), 0 0 20px rgba(40, 167, 69, 0.2);
    }
    50% {
        box-shadow: 0 0 0 0.4rem rgba(40, 167, 69, 0.4), 0 0 25px rgba(40, 167, 69, 0.3);
    }
}

/* Animation border glow */
@keyframes borderGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.01);
    }
}

/* Animation error cho invalid */   
@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Styling cho thông báo validation */
.email-validation-message {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.3s ease-in-out;
    min-height: auto;
}

/* Thông báo cho email hợp lệ - Nổi bật với màu xanh lá */
.emailVerify.email-valid + .email-validation-message {
    color: #155724;
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
}

.emailVerify.email-valid + .email-validation-message::before {
    content: '';
}

/* Thông báo cho email không hợp lệ */
.emailVerify.email-invalid + .email-validation-message {
    color: #721c24;
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
}

.emailVerify.email-invalid + .email-validation-message::before {
    content: '';
}

/* Thông báo cho trạng thái loading */
.emailVerify.email-loading + .email-validation-message {
    color: #856404;
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
}

.emailVerify.email-loading + .email-validation-message::before {
    content: '';
}

/* Animation cho thông báo */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .emailVerify {
        background-position: right 8px center;
        background-size: 14px 14px;
        padding-right: 35px;
    }
    
    .email-validation-message {
        font-size: 0.8rem;
    }
}

/* Focus states */
.emailVerify:focus {
    outline: none;
}

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

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

.emailVerify.email-loading:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Custom styles cho các framework khác nhau */
/* Bootstrap compatibility */
.form-control.emailVerify.email-valid {
    border-color: #28a745;
}

.form-control.emailVerify.email-invalid {
    border-color: #dc3545;
}

.form-control.emailVerify.email-loading {
    border-color: #ffc107;
}

/* WordPress default input compatibility */
input[type="email"].emailVerify.email-valid,
input[type="text"].emailVerify.email-valid {
    border-color: #28a745;
}

input[type="email"].emailVerify.email-invalid,
input[type="text"].emailVerify.email-invalid {
    border-color: #dc3545;
}

input[type="email"].emailVerify.email-loading,
input[type="text"].emailVerify.email-loading {
    border-color: #ffc107;
}