/**
 * Eltalta Shmal - 2FA Styles
 * 
 * Styling for Two-Factor Authentication pages
 * 
 * @package Eltalta_Shmal
 * @version 1.0.0
 */

/* ============================================
   2FA STEPS
   ============================================ */
.eltalta-2fa-step {
    margin: 24px 0;
    padding: 20px;
    background: var(--eltalta-light-gray);
    border: 1px solid var(--eltalta-dark);
    border-radius: var(--eltalta-radius-sm);
    transition: all 0.3s ease;
}

.eltalta-2fa-step:hover {
    border-color: var(--eltalta-red);
}

.eltalta-2fa-step h4 {
    margin: 0 0 8px 0;
    color: var(--eltalta-white);
    font-size: 18px;
}

.eltalta-2fa-step p {
    margin: 4px 0;
    color: var(--eltalta-gray);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   QR CODE
   ============================================ */
#eltalta-2fa-qr {
    display: inline-block;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#eltalta-2fa-qr canvas {
    display: block;
    width: 200px;
    height: 200px;
}

@media (max-width: 480px) {
    #eltalta-2fa-qr canvas {
        width: 160px;
        height: 160px;
    }
}

/* ============================================
   SECRET KEY DISPLAY
   ============================================ */
#eltalta-2fa-secret-display {
    background: var(--eltalta-black);
    padding: 8px 16px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--eltalta-gold);
    display: inline-block;
    margin-top: 6px;
    border: 1px solid var(--eltalta-light-gray);
}

/* ============================================
   VERIFICATION INPUT
   ============================================ */
#eltalta-2fa-code-input {
    font-size: 24px;
    letter-spacing: 6px;
    text-align: center;
    font-weight: 600;
}

#eltalta-2fa-code-input:focus {
    border-color: var(--eltalta-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
}

/* ============================================
   BACKUP CODES
   ============================================ */
#eltalta-2fa-backup-codes {
    background: var(--eltalta-black);
    border-radius: var(--eltalta-radius-sm);
    padding: 16px;
    border: 1px solid var(--eltalta-light-gray);
}

#eltalta-2fa-backup-codes .backup-code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--eltalta-dark);
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--eltalta-white);
    border: 1px solid var(--eltalta-light-gray);
}

#eltalta-2fa-backup-codes .backup-code-item .index {
    color: var(--eltalta-gray);
    font-size: 12px;
    font-family: sans-serif;
}

#eltalta-2fa-backup-codes .backup-code-item .code {
    font-weight: 600;
    color: var(--eltalta-gold);
}

#eltalta-2fa-backup-codes .backup-code-item.used {
    opacity: 0.4;
    text-decoration: line-through;
}

/* ============================================
   STATUS BADGE
   ============================================ */
.eltalta-2fa-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.eltalta-2fa-status-badge.enabled {
    background: rgba(0, 210, 160, 0.15);
    color: var(--eltalta-success);
}

.eltalta-2fa-status-badge.disabled {
    background: rgba(136, 136, 136, 0.15);
    color: var(--eltalta-gray);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes eltalta-2fa-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#eltalta-2fa-backup-codes-container {
    animation: eltalta-2fa-slide-down 0.5s ease-out;
}