/* ==========================================================================
   FPE OTP Login – account page styles
   ========================================================================== */

/* Hide native WC login form fields that are replaced by the OTP widget.
   Uses :has() for modern browsers; the JS fallback handles the rest. */
.woocommerce-form-login p.form-row:has(> #username),
.woocommerce-form-login p.form-row:has(> #password) {
	display: none !important;
}

.woocommerce-form-login #username,
.woocommerce-form-login #password,
.woocommerce-form-login .show-password-input,
.woocommerce-form-login [name="login"],
.woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-form-login .lost_password {
	display: none !important;
}

/* ==========================================================================
   OTP wrapper
   ========================================================================== */

.fpe-otp-wrapper {
	width: 100%;
}

/* Step visibility */
.fpe-step {
	display: block;
}

.fpe-step.fpe-hidden {
	display: none !important;
}

/* ==========================================================================
   Intro / hint text
   ========================================================================== */

.fpe-otp-intro {
	margin: 0 0 20px;
	font-size: 14px;
	color: #5c5e5d;
	line-height: 1.6;
}

.fpe-otp-faq-link {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	color: #5c5e5d;
	vertical-align: middle;
}

.fpe-otp-faq-link svg {
	width: 16px;
	height: 16px;
}

.fpe-otp-faq-link:hover,
.fpe-otp-faq-link:focus {
	color: #111827;
}

.fpe-otp-hint {
	margin: 0 0 16px;
	font-size: 13px;
	color: #9a9b99;
	line-height: 1.5;
}

/* ==========================================================================
   6-digit input group
   ========================================================================== */

.fpe-digits-row {
	display: flex !important;
	gap: 10px;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0 !important; /* override WC form-row padding */
}

.fpe-digit {
	width: 48px !important;
	height: 58px !important;
	padding: 0 !important;
	text-align: center;
	font-size: 26px !important;
	font-weight: 700;
	font-family: 'Courier New', Courier, monospace;
	border: 1px solid #dddedd !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
	flex-shrink: 0;
	caret-color: transparent; /* hide blinking caret – the box itself is the cursor */
}

.fpe-digit:focus {
	border-color: #111827 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12) !important;
}

.fpe-digit.is-filled {
	border-color: #374151 !important;
	background: #f9fafb;
}

/* ==========================================================================
   Optional / infos label hint
   ========================================================================== */

.infos {
	color: var(--middlegreytext);
}

/* ==========================================================================
   Error messages
   ========================================================================== */

.fpe-error {
	display: none;
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #b91c1c;
	font-size: 13px;
	line-height: 1.5;
}

/* ==========================================================================
   Button row
   ========================================================================== */

.fpe-btn-row {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.fpe-btn-row .button-secondary {
	background: transparent;
	border: 1px solid currentColor;
}

.fpe-btn-row .button-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@keyframes fpe-ellipsis {
	0%  { content: ''; }
	25% { content: '.'; }
	50% { content: '..'; }
	75% { content: '...'; }
}

.fpe-loading::after {
	content: '';
	animation: fpe-ellipsis 1.2s steps(1, end) infinite;
}

/* ==========================================================================
   Edit-account page – hide password-change fieldset
   Uses :has() for modern browsers; JS fallback below handles the rest.
   ========================================================================== */

/* Fieldset container */
.woocommerce-EditAccountForm fieldset:has(#password_current) {
	display: none !important;
}

/* Individual rows + inputs (fallback for browsers without :has()) */
.woocommerce-EditAccountForm p.form-row:has(#password_current),
.woocommerce-EditAccountForm p.form-row:has(#password_1),
.woocommerce-EditAccountForm p.form-row:has(#password_2) {
	display: none !important;
}