/* DataFirefly 2FA Fortress — WooCommerce My Account styling */

.woocommerce-account .df2fa-panel {
	max-width: 100%;
	margin: 0 0 24px;
}

.df2fa-panel .df2fa-status { font-size: 15px; margin: 4px 0 18px; }
.df2fa-on { color: #1a7f37; }
.df2fa-off { color: #b32d2e; }

.df2fa-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 3px 8px;
	border-radius: 3px;
	margin: 0 0 12px;
}
.df2fa-badge--req { background: #fcf0f1; color: #b32d2e; }
.df2fa-badge--opt { background: #eef5fb; color: #2155a6; }

.df2fa-card {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #2155a6;
	border-radius: 6px;
	padding: 18px 22px;
	margin: 0 0 18px;
}
.df2fa-card h3 { margin-top: 0; }
.df2fa-card--codes { border-left-color: #1a7f37; background: #f6fbf7; }
.df2fa-card--danger { border-left-color: #b32d2e; }

.df2fa-qr {
	display: inline-block;
	background: #fff;
	padding: 10px;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
}
.df2fa-qr svg { display: block; width: 190px; height: 190px; }

.df2fa-secret {
	font-family: Menlo, Consolas, monospace;
	font-size: 16px;
	letter-spacing: .12em;
	background: #f4f5f7;
	padding: 8px 12px;
	border-radius: 4px;
	display: inline-block;
	user-select: all;
	word-break: break-all;
}

.df2fa-code-input,
input.df2fa-code-input {
	font-family: Menlo, Consolas, monospace;
	font-size: 22px;
	letter-spacing: .3em;
	width: 8em;
	text-align: center;
	padding: 8px 10px;
}

.df2fa-codes {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, 1fr));
	gap: 8px 24px;
	max-width: 380px;
}
.df2fa-codes li {
	font-family: Menlo, Consolas, monospace;
	font-size: 16px;
	letter-spacing: .08em;
	background: #fff;
	border: 1px dashed #b9c0c6;
	border-radius: 4px;
	padding: 5px 10px;
}