/* --- Feature 32: Factory Reset Styles --- */

/* 2. Modal Backdrop (Landing Animation) */
.modal-backdrop {
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0); /* Start Transparent */
    backdrop-filter: blur(0);
    z-index: 9999; 
    align-items: center; justify-content: center;
    
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.modal-backdrop.active { 
    display: flex; 
    background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(5px);
}

/* 3. Modal Box */
.confirm-modal {
    background: #1e293b;
    padding: 30px 25px;
    border-radius: 12px;
    width: 350px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* START STATE */
    opacity: 0; 
    transform: scale(1.1); 
    filter: blur(20px);
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-backdrop.active .confirm-modal { 
    opacity: 1; 
    transform: scale(1); 
    filter: blur(0); 
}

/* Danger Variant */
.confirm-modal.danger-mode { border: 1px solid rgba(239, 68, 68, 0.3); }

/* Success Variant */
.confirm-modal.success-mode { border: 1px solid rgba(74, 222, 128, 0.3); }

.confirm-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #fff; }
.confirm-text { font-size: 14px; color: #cbd5e1; margin-bottom: 20px; line-height: 1.4; }

/* 4. Verification Input */
.verify-input {
    background: #0f172a;
    border: 1px solid #475569;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: center;
    font-family: monospace;
    font-size: 16px;
    letter-spacing: 1px;
}
.verify-input:focus { outline: none; border-color: #ef4444; }

/* 5. Buttons */
.confirm-actions { display: flex; gap: 10px; justify-content: center; width: 100%; }
.btn-cancel { background: transparent; border: 1px solid #475569; color: #cbd5e1; padding: 8px 16px; border-radius: 6px; cursor: pointer; flex: 1; }

.btn-confirm-delete { 
    background: #ef4444; border: none; color: white; font-weight: bold; 
    padding: 8px 16px; border-radius: 6px; cursor: pointer; flex: 1; 
    transition: all 0.2s;
}
.btn-confirm-delete:hover { background-color: #dc2626; }
.btn-confirm-delete:disabled { background: #475569; color: #94a3b8; cursor: not-allowed; opacity: 0.6; }

.btn-success-ok { background: #4ade80; border: none; color: #000; font-weight: bold; padding: 8px 24px; border-radius: 6px; cursor: pointer; min-width: 100px; }

/* 6. Icons */
.success-icon {
    font-size: 48px; color: #4ade80; margin-bottom: 15px;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }