.mora-otp-login {
	max-width: 320px;
	margin: 0 auto;
}

.mora-otp-login .mora-otp-field {
	margin-bottom: 16px;
}

.mora-otp-login label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.mora-otp-login input[type="tel"],
.mora-otp-login input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	font-size: 16px;
}

.mora-otp-login .mora-otp-remember label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

.mora-otp-login button.button {
	cursor: pointer;
}

.mora-otp-login button.button-link {
	background: none;
	border: none;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 10px;
}

.mora-otp-login button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mora-otp-login .mora-otp-message {
	min-height: 1.2em;
	font-size: 14px;
	color: #2271b1;
}

.mora-otp-login .mora-otp-message.is-error {
	color: #d63638;
}

/* wp-login.php overrides: hide the default username/password form when Mora OTP is active.
   WordPress 5.7+ wraps the password field in div.user-pass-wrap instead of p.login-password,
   so both selectors are targeted to work across core versions. */
body.login.mora-otp-active #loginform p.login-username,
body.login.mora-otp-active #loginform p.login-password,
body.login.mora-otp-active #loginform div.user-pass-wrap,
body.login.mora-otp-active #loginform p.forgetmenot,
body.login.mora-otp-active #loginform p.submit,
body.login.mora-otp-active #nav {
	display: none;
}

body.login.mora-otp-active .mora-otp-login {
	max-width: none;
}

/* Toggle link between OTP and classic username/password login on wp-login.php */
body.login.mora-otp-active .mora-otp-toggle-row {
	text-align: center;
	margin-top: 16px;
}

body.login.mora-otp-active .mora-otp-toggle-to-otp {
	display: none;
}

/* Classic mode: show the default fields again, hide the OTP widget */
body.login.mora-otp-active.mora-otp-classic-mode #loginform p.login-username,
body.login.mora-otp-active.mora-otp-classic-mode #loginform p.login-password,
body.login.mora-otp-active.mora-otp-classic-mode #loginform div.user-pass-wrap,
body.login.mora-otp-active.mora-otp-classic-mode #loginform p.forgetmenot,
body.login.mora-otp-active.mora-otp-classic-mode #loginform p.submit,
body.login.mora-otp-active.mora-otp-classic-mode #nav {
	display: block;
}

body.login.mora-otp-active.mora-otp-classic-mode .mora-otp-login {
	display: none;
}

body.login.mora-otp-active.mora-otp-classic-mode .mora-otp-toggle-to-classic {
	display: none;
}

body.login.mora-otp-active.mora-otp-classic-mode .mora-otp-toggle-to-otp {
	display: inline;
}