/*
 * InforU OTP — SMS login block.
 *
 * Renders in three very different places: inside wp-login.php's form, inside an
 * Elementor popup 323px wide on mobile, and wherever the shortcode is dropped.
 * So: no fixed widths, logical properties throughout (the page is RTL), and
 * colours that match wp-login.php's defaults rather than fighting them.
 */

.inforu-login {
	margin-block: 1em 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
}

.inforu-login[hidden] {
	display: none;
}

/*
 * Several elements below set `display` explicitly, and an author rule beats the
 * browser's own `[hidden] { display: none }`. Without this the toggle button
 * stays on screen after JS hides it, and the panel opens underneath it.
 */
.inforu-login [hidden] {
	display: none !important;
}

/* ---- separator ------------------------------------------------------ */

.inforu-login__or {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-block: 1.25em;
	color: #646970;
	font-size: 13px;
}

.inforu-login__or::before,
.inforu-login__or::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid #dcdcde;
}

/* ---- the reveal button ---------------------------------------------- */

.inforu-login__toggle {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 1em;
	border: 1px solid #2271b1;
	border-radius: 6px;
	background: transparent;
	color: #2271b1;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.inforu-login__toggle:hover {
	background: #f0f6fc;
}

/* ---- panel ----------------------------------------------------------- */

.inforu-login__panel {
	margin-block-start: 0.9em;
}

.inforu-login__panel[hidden],
.inforu-login__step[hidden] {
	display: none;
}

/*
 * The label wraps its input rather than using for/id — see render_block(). So
 * the label's own weight must not bleed into the field.
 */
.inforu-login__label {
	display: block;
	margin-block-end: 0.35em;
	font-weight: 600;
}

.inforu-login__phone,
.inforu-login__code {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	margin-block: 0.35em 0.75em;
	font-weight: 400;
	border: 1px solid #c8ccd1;
	border-radius: 6px;
	/*
	 * 16px minimum: anything smaller makes iOS Safari zoom the page when the
	 * field takes focus, which inside a popup looks like a layout bug.
	 */
	font-size: 16px;
	direction: ltr;
	text-align: start;
	background: #fff;
	color: #2c3338;
}

.inforu-login__code {
	letter-spacing: 0.35em;
	text-align: center;
	font-size: 18px;
}

.inforu-login__phone:focus,
.inforu-login__code:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
	border-color: #2271b1;
}

.inforu-login__phone[aria-invalid="true"],
.inforu-login__code[aria-invalid="true"] {
	border-color: #b32d2e;
}

/* ---- buttons --------------------------------------------------------- */

.inforu-login__send,
.inforu-login__verify {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 1em;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.inforu-login__send:hover:not(:disabled),
.inforu-login__verify:hover:not(:disabled) {
	background: #135e96;
}

.inforu-login__resend,
.inforu-login__back {
	display: inline-block;
	margin-block-start: 0.6em;
	margin-inline-end: 1em;
	padding: 0;
	border: 0;
	background: none;
	color: #2271b1;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.inforu-login__resend:disabled {
	color: #8c8f94;
	text-decoration: none;
	cursor: default;
}

/* ---- remember me ----------------------------------------------------- */

.inforu-login__remember {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-block-end: 0.8em;
	font-size: 13px;
}

/* ---- honeypot -------------------------------------------------------- */

.inforu-login__hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- message --------------------------------------------------------- */

.inforu-login__message {
	margin-block: 0.8em 0;
	min-height: 1.4em;
	font-size: 13px;
	color: #3c434a;
}

.inforu-login__message.is-error {
	color: #b32d2e;
	font-weight: 600;
}

/* ---- states ---------------------------------------------------------- */

.inforu-login.is-busy .inforu-login__send,
.inforu-login.is-busy .inforu-login__verify,
.inforu-login.is-busy .inforu-login__resend {
	opacity: 0.6;
	pointer-events: none;
}

.inforu-login.is-done .inforu-login__panel {
	opacity: 0.7;
	pointer-events: none;
}

/* ---- wp-login.php ---------------------------------------------------- */

.inforu-login--wp-login {
	margin-block-start: 1.5em;
}

.login .inforu-login__toggle,
.login .inforu-login__send,
.login .inforu-login__verify {
	line-height: 1.4;
}