/*!
 * MoeSec 2FA Styles
 */

/* Two-Factor Authentication Field */
#moesec-two-factor-auth-field {
    margin: 20px 0;
    padding: 0;
    transition: all 0.3s ease-in-out;
}

#moesec-two-factor-auth-field label {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    color: #1d2327;
    text-align: left;
}

#moesec_two_factor_code {
    font-size: 26px !important;
    font-weight: 700 !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace !important;
    letter-spacing: 10px !important;
    text-align: center !important;
    padding: 14px 18px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border: 3px solid #007cba !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 124, 186, 0.1) !important;
    transition: all 0.2s ease !important;
    color: #1d2327 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#moesec_two_factor_code:focus {
    border-color: #00a0d2 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 160, 210, 0.25) !important;
    outline: none !important;
    transform: translateY(-1px);
}

#moesec_two_factor_code.moesec-valid {
    border-color: #00a32a !important;
    background: #f0f9f4 !important;
    box-shadow: 0 2px 6px rgba(0, 163, 42, 0.15) !important;
}

#moesec_two_factor_code.moesec-error {
    border-color: #d63638 !important;
    background: #fdf6f6 !important;
    animation: moesec-shake 0.5s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(214, 54, 56, 0.15) !important;
}

#moesec_two_factor_code::placeholder {
    color: #a7aaad !important;
    opacity: 0.6 !important;
    letter-spacing: 2px !important;
}

/* 2FA Notice Box */
#moesec-login-2fa-notice {
    background: linear-gradient(135deg, #f0f7ff 0%, #e7f3ff 100%);
    border-left: 4px solid #007cba;
    padding: 16px 20px;
    margin: 0 0 20px 0;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.08);
    transition: all 0.3s ease;
}

#moesec-login-2fa-notice p {
    margin: 0;
    color: #007cba;
    line-height: 1.5;
    font-size: 14px;
    text-align: left;
}

#moesec-login-2fa-notice strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #005a87;
}

#moesec-2fa-method-text {
    font-weight: 500;
    opacity: 0.9;
    display: block;
    margin-top: 4px;
}

/* Loading State */
#user_login.moesec-2fa-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='50' cy='50' fill='none' stroke='%23007cba' stroke-width='8' r='35' stroke-dasharray='164.93361431346415 56.97787143782138'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' values='0 50 50;360 50 50' keyTimes='0;1'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
}

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

@keyframes moesec-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

@keyframes moesec-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Enhanced focus styles for all login inputs */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 782px) {
    #moesec_two_factor_code {
        font-size: 22px !important;
        padding: 12px 16px !important;
        letter-spacing: 8px !important;
    }
    
    #moesec-login-2fa-notice {
        padding: 14px 16px;
        margin: 0 0 16px 0;
    }
    
    #moesec-two-factor-auth-field {
        margin: 16px 0;
    }
}

@media (max-width: 480px) {
    #moesec_two_factor_code {
        font-size: 20px !important;
        padding: 10px 12px !important;
        letter-spacing: 6px !important;
    }
    
    #moesec-login-2fa-notice {
        padding: 12px 14px;
    }
    
    #moesec-login-2fa-notice p {
        font-size: 13px;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    #moesec_two_factor_code {
        border-width: 2px !important;
    }
    
    #moesec-login-2fa-notice {
        border-left-width: 6px;
        background: #ffffff !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #moesec-two-factor-auth-field,
    #moesec-login-2fa-notice,
    #moesec_two_factor_code {
        transition: none !important;
        animation: none !important;
    }
    
    .moesec-2fa-loading {
        background-image: none !important;
    }
}

/* Print Styles */
@media print {
    #moesec-two-factor-auth-field,
    #moesec-login-2fa-notice {
        display: none !important;
    }
}

/* Dark Mode Support (if login page supports dark mode) */
@media (prefers-color-scheme: dark) {
    #moesec_two_factor_code {
        background: #2c3338 !important;
        border-color: #00a0d2 !important;
        color: #ffffff !important;
    }
    
    #moesec_two_factor_code:focus {
        background: #1d2327 !important;
    }
    
    #moesec-login-2fa-notice {
        background: linear-gradient(135deg, #1e2a33 0%, #25313c 100%);
        border-left-color: #00a0d2;
    }
    
    #moesec-login-2fa-notice p {
        color: #00a0d2;
    }
}

/* Error state enhancements */
#loginform .moesec-error {
    animation: moesec-shake 0.5s ease-in-out;
}

/* Success state */
#loginform .moesec-valid {
    border-color: #00a32a !important;
    background: #f0f9f4 !important;
}