/* ============================================================
 * Email OTP Login — WooCommerce My Account integration
 * ============================================================ */

/* OTP field styling inside WC's form */
.woocommerce-form-login .eol-wc-row label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #444b54;
}

.woocommerce-form-login .eol-wc-row .eol-otp-input {
	font-family: Menlo, Consolas, Monaco, monospace;
	font-size: 20px;
	letter-spacing: 0.4em;
	text-align: center;
	padding: 10px 6px;
}

.woocommerce-form-login .eol-wc-recovery-toggle {
	font-size: 13px;
	color: #b4793e;
	text-decoration: none;
}
.woocommerce-form-login .eol-wc-recovery-toggle:hover {
	text-decoration: underline;
}

.eol-wc-step-notice {
	margin-bottom: 18px !important;
	border-top-color: #b4793e !important;
}

/* ============================================================
 * Step 2 — hide credential fields when ticket cookie is present
 * Uses :has() in modern browsers; JS adds .eol-hidden-row as fallback.
 * ============================================================ */

.eol-step-otp .woocommerce-form-login p.form-row:has(#username),
.eol-step-otp .woocommerce-form-login p.form-row:has(#password),
.eol-step-otp .woocommerce-form-login .woocommerce-form-login__rememberme,
.eol-step-otp .woocommerce-form-login .lost_password,
.eol-step-otp .woocommerce-form-login .eol-hidden-row {
	display: none !important;
}

/* When the rememberme is gone, give the submit row some breathing room */
.eol-step-otp .woocommerce-form-login p.form-row .woocommerce-Button {
	margin-top: 6px;
}

/* On the My Account page in step 2, hide the "Register" panel since we're mid-login */
.eol-step-otp .u-columns .col-2 .woocommerce-form-register {
	opacity: 0.4;
	pointer-events: none;
}
.eol-step-otp .u-columns .col-2::after {
	content: "Finish signing in first.";
	display: block;
	margin-top: -8px;
	font-size: 12px;
	color: #7a808a;
	font-style: italic;
}

/* ============================================================
 * v4 — Six-box OTP, countdown, resend, trust checkbox (WC + popup variant)
 *
 * These rules also apply inside .eol-injected, which is the wrapper our JS
 * uses when it injects the OTP block into a theme's popup login modal.
 * ============================================================ */

.woocommerce-form-login .eol-otp-boxes,
.eol-injected .eol-otp-boxes {
	display: flex;
	gap: 8px;
	margin: 4px 0 12px;
	max-width: 360px;   /* 6 × ~52px + 5 × 8px gap ≈ 352px */
	width: 100%;
}

.woocommerce-form-login .eol-otp-boxes .eol-otp-box,
.eol-injected .eol-otp-boxes .eol-otp-box {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;       /* override WC's .input-text 100% width */
	max-width: 52px;
	height: 52px;
	font-family: Menlo, Consolas, Monaco, monospace;
	font-size: 22px !important;
	line-height: 1 !important;
	text-align: center;
	padding: 0 !important;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
}

.woocommerce-form-login .eol-otp-boxes .eol-otp-box:focus,
.eol-injected .eol-otp-boxes .eol-otp-box:focus {
	outline: none;
	border-color: #b4793e;
	box-shadow: 0 0 0 2px rgba(180, 121, 62, 0.2);
}

@media (max-width: 480px) {
	.woocommerce-form-login .eol-otp-boxes,
	.eol-injected .eol-otp-boxes {
		gap: 6px;
		max-width: 100%;
	}
	.woocommerce-form-login .eol-otp-boxes .eol-otp-box,
	.eol-injected .eol-otp-boxes .eol-otp-box {
		max-width: none;
		height: 46px;
		font-size: 20px !important;
	}
}

.woocommerce-form-login .eol-meta-row,
.eol-injected .eol-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	margin: 0 0 12px !important;
	gap: 10px;
	max-width: 360px;
}

.woocommerce-form-login .eol-countdown,
.eol-injected .eol-countdown {
	color: #50575e;
	font-variant-numeric: tabular-nums;
}

.woocommerce-form-login .eol-countdown-expired,
.eol-injected .eol-countdown-expired {
	color: #b32d2e;
	font-weight: 600;
}

.woocommerce-form-login .eol-resend-link,
.eol-injected .eol-resend-link {
	color: #b4793e;
	text-decoration: none;
}
.woocommerce-form-login .eol-resend-link:hover,
.eol-injected .eol-resend-link:hover {
	text-decoration: underline;
}
.woocommerce-form-login .eol-resend-link.eol-resend-disabled,
.eol-injected .eol-resend-link.eol-resend-disabled {
	pointer-events: none;
	color: #a7aaad;
}

.woocommerce-form-login .eol-trust-label,
.eol-injected .eol-trust-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #444b54;
	cursor: pointer;
}

/* Recovery row stays hidden until JS opens it. Use !important because
   themes love to set their own display rules on .form-row. v4.0.5: also
   match deep theme selectors (.woocommerce, .checkout, .u-columns etc.)
   that occasionally override even our !important. */
.eol-wc-row-recovery,
.eol-injected .eol-wc-row-recovery,
.woocommerce-form-login .eol-wc-row-recovery,
.woocommerce form .eol-wc-row-recovery,
form.checkout .eol-wc-row-recovery,
form .eol-wc-row-recovery {
	display: none !important;
}

.eol-wc-row-recovery.eol-row-visible,
.eol-injected .eol-wc-row-recovery.eol-row-visible,
.woocommerce-form-login .eol-wc-row-recovery.eol-row-visible,
.woocommerce form .eol-wc-row-recovery.eol-row-visible,
form.checkout .eol-wc-row-recovery.eol-row-visible,
form .eol-wc-row-recovery.eol-row-visible {
	display: block !important;
}

.eol-wc-row-recovery input[type="text"],
.eol-injected .eol-wc-row-recovery input[type="text"] {
	max-width: 320px;
}

/* v4.0.5: expired-state. When the countdown hits 0, the form gets
   `.eol-form-expired` and the resend link gets visually emphasized so
   the user has a clear next-action instead of staring at "Code expired". */
.eol-countdown-expired {
	color: #b91c1c;
	font-weight: 500;
}
.eol-form-expired .eol-resend-link,
.eol-form-expired a.eol-resend-link {
	color: #b91c1c;
	font-weight: 600;
	text-decoration: underline;
}

/* Helper text above the boxes — quieter than a notice. */
.woocommerce-form-login .eol-wc-helper,
.eol-injected .eol-wc-helper {
	margin-bottom: 12px !important;
	color: #50575e;
	font-size: 13px;
}

.eol-totp-nudge {
	border-left: 4px solid #b4793e;
	padding: 12px 14px;
	margin-bottom: 18px;
	background: #fffaf3;
	font-size: 14px;
}

.eol-totp-nudge a {
	font-weight: 600;
	margin-left: 4px;
}