/* Two-Factor Authentication - Frontend / Login Styles
 * @since 2.0
 * Loaded on wp-login.php during the 2FA verification challenge.
 * Styles are scoped under .login (the wp-login.php body class) so they
 * never bleed into the wp-admin profile editor (which uses its own
 * backend stylesheet: assets/css/cm-2fa-backend.css).
 */

/* Trusted-device checkbox, shown inside the verify form */
.login .cm-trusted-device-container {
    margin-bottom: 8px;
}

/* "Use a backup code instead" toggle link */
.login #cm_toggle_backup_code {
    color: #2271b1;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
}

.login #cm_toggle_backup_code:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232271b1"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>');
    background-size: contain;
}

.login #cm_toggle_backup_code:hover {
    color: #135e96;
    text-decoration: underline;
}