/**
 * BuddyBoss Security - Login 2FA challenge styles.
 *
 * Minimal styles for the two-factor authentication form on wp-login.php.
 * Inherits base styles from the WordPress login page.
 *
 * @package BuddyBoss\Security
 * @since 1.0.0
 */

/* ============================================================
   2FA Challenge Container
   ============================================================ */

.bb-2fa-challenge {
	margin: 0;
	padding: 0;
}

/* ============================================================
   Code Input Field
   ============================================================ */

.bb-2fa-code-input {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 10px auto;
	padding: 10px 12px;
	font-family: "SF Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace;
	font-size: 24px;
	letter-spacing: 8px;
	text-align: center;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 0 transparent;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.bb-2fa-code-input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: none;
}

/* ============================================================
   Prompt Text
   ============================================================ */

.bb-2fa-prompt {
	margin: 0 0 16px;
	padding: 0;
	text-align: center;
	color: #3c434a;
	font-size: 14px;
	line-height: 1.5;
}

/* ============================================================
   Error Messages
   ============================================================ */

.bb-2fa-error {
	margin: 0 0 16px;
	padding: 10px 12px;
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #d63638;
	font-size: 13px;
	text-align: center;
}

.bb-2fa-error p {
	margin: 0;
}

/* ============================================================
   Success Messages
   ============================================================ */

.bb-2fa-success {
	margin: 0 0 16px;
	padding: 10px 12px;
	background: #f0f6e8;
	border-left: 4px solid #00a32a;
	color: #007017;
	font-size: 13px;
	text-align: center;
}

.bb-2fa-success p {
	margin: 0;
}

/* ============================================================
   Trust Device Checkbox
   ============================================================ */

.bb-2fa-trust-device {
	margin: 16px 0;
	text-align: center;
}

.bb-2fa-trust-device label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #50575e;
	cursor: pointer;
}

.bb-2fa-trust-device input[type="checkbox"] {
	margin: 0;
}

/* ============================================================
   Submit Button
   ============================================================ */

.bb-2fa-challenge .submit {
	text-align: center;
	margin: 16px 0 0;
}

.bb-2fa-challenge .submit .button-primary {
	width: 100%;
	max-width: 280px;
	height: auto;
	padding: 8px 16px;
	font-size: 14px;
}

/* ============================================================
   Provider Switcher
   ============================================================ */

.bb-2fa-provider-switcher {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #dcdcde;
	text-align: center;
}

.bb-2fa-or-use {
	margin: 0 0 8px;
	font-size: 12px;
	color: #787c82;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.bb-2fa-provider-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-2fa-provider-list li {
	display: inline-block;
	margin: 0 8px;
}

.bb-2fa-provider-list a {
	font-size: 13px;
	color: #2271b1;
	text-decoration: none;
}

.bb-2fa-provider-list a:hover,
.bb-2fa-provider-list a:focus {
	color: #135e96;
	text-decoration: underline;
}

/* ============================================================
   Resend Code
   ============================================================ */

.bb-2fa-resend {
	margin: 8px 0 0;
	text-align: center;
	font-size: 13px;
}

.bb-2fa-resend-link {
	color: #2271b1;
	text-decoration: none;
	cursor: pointer;
}

.bb-2fa-resend-link:hover,
.bb-2fa-resend-link:focus {
	color: #135e96;
	text-decoration: underline;
}

.bb-2fa-resend-link.bb-2fa-disabled {
	color: #a7aaad;
	cursor: default;
	pointer-events: none;
}

.bb-2fa-resend-timer {
	color: #787c82;
	font-size: 12px;
}

.bb-2fa-countdown {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Remaining Codes Notice
   ============================================================ */

.bb-2fa-codes-remaining {
	margin: 8px 0;
	text-align: center;
	font-size: 12px;
	color: #787c82;
}

/* ============================================================
   Back to Login Link
   ============================================================ */

.bb-2fa-back-link {
	margin: 20px 0 0;
	text-align: center;
}

.bb-2fa-back-link a {
	font-size: 13px;
	color: #50575e;
	text-decoration: none;
}

.bb-2fa-back-link a:hover,
.bb-2fa-back-link a:focus {
	color: #2271b1;
}