/* Extracted from new/templ/page/forgot.templ (templ Forgot) */
/* the three forms behave like wizard steps; forgot.js toggles them */
.forgot-step { display: none; }
.forgot-step.active { display: block; }
#sent-to strong,
#code-sub strong { color: #10203a; }

/* ===== OTP code entry ===== */
.otp-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 6px 0 4px;
}
.otp-box {
	width: 52px;
	height: 62px;
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	color: #142137;
	background: #f5f9fe;
	border: 1.5px solid #e2ecf8;
	border-radius: 16px;
	caret-color: #2196f3;
	transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.otp-box:focus {
	outline: none;
	background: #fff;
	border-color: #2196f3;
	box-shadow: 0 0 0 4px rgba(33, 150, 243, .15);
	transform: translateY(-2px);
}
.otp-box.filled {
	background: #fff;
	border-color: #9ecdf7;
	animation: otpPop .18s cubic-bezier(.22, 1, .36, 1);
}
@keyframes otpPop {
	0% { transform: scale(.9); }
	60% { transform: scale(1.06); }
	100% { transform: scale(1); }
}
.otp-box.invalid {
	border-color: #ef4453;
	box-shadow: 0 0 0 4px rgba(239, 68, 83, .12);
	animation: authShake .3s;
}
.otp-box.success {
	border-color: #10b981;
	background: #ecfdf5;
	color: #047857;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.otp-hint {
	margin: 12px 2px 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: #93a4bd;
}

/* resend row: link greys out while the cooldown runs */
.otp-resend #resend-timer {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #9ab0cc;
	font-variant-numeric: tabular-nums;
}
.otp-resend a.disabled {
	color: #9ab0cc;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 390px) {
	.otp-row { gap: 7px; }
	.otp-box { width: 44px; height: 54px; font-size: 22px; border-radius: 13px; }
}