/* ==========================================================================
   Custom 2FA Login — account panel styling
   Drop-in replacement for assets/css/cfa-2fa.css. Styles the markup
   rendered by CFA_Account_UI::render_panel() ([cfa_2fa_settings]).
   Accent colour (#16A12E) matches the green already used in this site's
   SweetAlert confirm buttons, so it reads as native, not bolted-on.
   ========================================================================== */

.cfa-2fa-panel {
	--cfa-accent: #16A12E;
	--cfa-accent-dark: #128a26;
	--cfa-danger: #c0392b;
	--cfa-border: #e6e9ec;
	--cfa-muted: #6b7280;

	max-width: 460px;
	background: #ffffff;
	border-radius: 10px;
	padding: 4px 2px 8px;
	font-family: inherit;
}

.cfa-2fa-panel h3 {
	display: none; /* the theme already renders "2FA Settings" above the shortcode */
}

/* --- Status block -------------------------------------------------- */

.cfa-2fa-status {
	padding: 18px 20px;
	border: 1px solid var(--cfa-border);
	border-radius: 10px;
	background: #fafbfb;
}

.cfa-2fa-panel[data-enabled="1"] .cfa-2fa-status {
	background: #f2faf3;
	border-color: #cdeed3;
}

.cfa-2fa-status p {
	margin: 0 0 14px;
	color: #333;
	font-size: 14px;
	line-height: 1.5;
}

.cfa-2fa-enabled-msg::before {
	content: "\2713";
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--cfa-accent);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

/* --- Buttons --------------------------------------------------------
   Overrides the plain WP-admin ".button"/".button-primary" classes used
   in the panel markup so they look native to this site's front end. */

.cfa-2fa-panel .button {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 9px 20px;
	border-radius: 24px;
	border: 2px solid var(--cfa-accent);
	background: #fff;
	color: var(--cfa-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}

.cfa-2fa-panel .button:hover {
	background: var(--cfa-accent);
	color: #fff;
	transform: translateY(-1px);
}

.cfa-2fa-panel .button-primary,
.cfa-2fa-panel .cfa-2fa-start-setup {
	background: var(--cfa-accent);
	color: #fff;
}

.cfa-2fa-panel .button-primary:hover,
.cfa-2fa-panel .cfa-2fa-start-setup:hover {
	background: var(--cfa-accent-dark);
	border-color: var(--cfa-accent-dark);
}

.cfa-2fa-panel .cfa-2fa-disable {
	border-color: #f1c3bd;
	color: var(--cfa-danger);
}

.cfa-2fa-panel .cfa-2fa-disable:hover {
	background: var(--cfa-danger);
	border-color: var(--cfa-danger);
	color: #fff;
}

/* --- Setup wizard ---------------------------------------------------- */

.cfa-2fa-setup-wizard {
	margin-top: 16px;
	padding: 22px 20px;
	border: 1px solid var(--cfa-border);
	border-radius: 10px;
	background: #fff;
}

.cfa-2fa-setup-wizard p {
	font-size: 14px;
	color: #333;
	line-height: 1.5;
}

.cfa-2fa-qr-canvas {
	display: flex;
	justify-content: center;
	margin: 14px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--cfa-border);
	border-radius: 8px;
	width: fit-content;
}

.cfa-2fa-manual-key {
	font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
	font-size: 12.5px;
	word-break: break-all;
	color: var(--cfa-muted);
	background: #f4f5f6;
	border-radius: 6px;
	padding: 8px 10px;
	margin: 0 0 18px !important;
}

.cfa-2fa-setup-wizard label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 6px;
}

.cfa-2fa-confirm-code {
	width: 100%;
	max-width: 200px;
	padding: 10px 12px;
	font-size: 20px;
	letter-spacing: .3em;
	text-align: center;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	margin-bottom: 16px;
}

.cfa-2fa-confirm-code:focus {
	outline: none;
	border-color: var(--cfa-accent);
	box-shadow: 0 0 0 3px rgba(22, 161, 46, 0.15);
}

.cfa-2fa-error {
	color: var(--cfa-danger);
	font-size: 13px;
	margin-top: 10px !important;
}

/* --- Backup codes step ------------------------------------------------ */

.cfa-2fa-step-backup strong {
	color: #222;
}

.cfa-2fa-backup-codes-list {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.cfa-2fa-backup-codes-list li {
	font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
	font-size: 14px;
	letter-spacing: .04em;
	text-align: center;
	padding: 8px 6px;
	background: #f4f5f6;
	border: 1px solid var(--cfa-border);
	border-radius: 6px;
	color: #222;
}

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 480px) {
	.cfa-2fa-backup-codes-list {
		grid-template-columns: 1fr;
	}
	.cfa-2fa-panel .button {
		display: block;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
}