.mio-animale-sms-otp__title {
	margin: 0 0 0.5rem;
	font-size: 1.1em;
}

.mio-animale-sms-otp__description {
	margin: 0 0 0.75rem;
	color: rgba(0, 0, 0, 0.65);
	font-size: 0.95em;
}

.mio-animale-sms-otp__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	margin-bottom: 0.5rem;
}

.mio-animale-sms-otp__label {
	flex-basis: 100%;
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.mio-animale-sms-otp__phone {
	display: inline-flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	direction: ltr;
}

/*
 * Phone prefix pill. Pulls Woodmart's form variables when present so the
 * radius / border / height match the surrounding inputs. Logical border
 * properties keep the rounded edge on the prefix side regardless of the
 * page's text direction — the parent `.mio-animale-sms-otp__phone` is forced to
 * `direction: ltr` so the prefix always sits to the left of the digits.
 */
.mio-animale-sms-otp__prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 0.75rem;
	height: var(--wd-form-height, auto);
	background: var(--wd-form-bg, rgba(0, 0, 0, 0.05));
	color: var(--wd-form-color, inherit);
	border: var(--wd-form-brd-width, 1px) solid
		var(--wd-form-brd-color, rgba(0, 0, 0, 0.15));
	border-inline-end: 0;
	border-start-start-radius: var(--wd-form-brd-radius, 4px);
	border-end-start-radius: var(--wd-form-brd-radius, 4px);
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	font-weight: 600;
}

.mio-animale-sms-otp__input {
	flex: 1 1 auto;
	min-width: 0;
	border-start-start-radius: 0 !important;
	border-end-start-radius: 0 !important;
	border-start-end-radius: var(--wd-form-brd-radius, 4px);
	border-end-end-radius: var(--wd-form-brd-radius, 4px);
}

.mio-animale-sms-otp__row .mio-animale-sms-otp__send,
.mio-animale-sms-otp__row .mio-animale-sms-otp__verify-btn {
	flex: 0 0 auto;
}

.mio-animale-sms-otp__verify {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}

.mio-animale-sms-otp-block [hidden] {
	display: none !important;
}

.mio-animale-sms-otp__verify .mio-animale-sms-otp__input {
	border-radius: var(--wd-form-brd-radius, 4px);
}

.mio-animale-sms-otp__status {
	margin: 0.25rem 0;
	font-size: 0.95em;
	min-height: 1.4em;
}

.mio-animale-sms-otp__status--ok {
	color: #1a7f37;
}

.mio-animale-sms-otp__status--error {
	color: #b91c1c;
}

[data-mio-sms-otp][data-verified="1"] .mio-animale-sms-otp__verify,
[data-mio-sms-otp][data-verified="1"] .mio-animale-sms-otp__send {
	display: none;
}

.mio-animale-sms-otp-mode {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.mio-animale-sms-otp-mode__options {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.25rem;
}

.mio-animale-sms-otp-mode__option {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}

.mio-animale-sms-otp__resend {
	margin-top: 0.5rem;
	background: transparent;
	border: 0;
	color: inherit;
	text-decoration: underline;
	padding: 0.25rem 0;
	cursor: pointer;
}

.mio-animale-sms-otp__resend[disabled] {
	color: rgba(0, 0, 0, 0.4);
	text-decoration: none;
	cursor: not-allowed;
}

/*
 * On the checkout page, always show the login form and hide the "Returning
 * customer?" toggle so the phone/email OTP block is visible without a click.
 * Theme-agnostic: targets WC core markup and the common `hidden-form` class
 * shipped by themes like Woodmart. We keep the theme classes intact so their
 * styling (borders, padding, etc.) is preserved.
 */
.woocommerce-checkout .woocommerce-form-login-toggle {
	display: none !important;
}

.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout form.woocommerce-form-login.hidden-form {
	display: block !important;
	margin: auto;
}

/*
 * Phone/email mode toggle inside the login form. JS adds this class to the
 * rows it wants hidden — using a class with !important means theme JS that
 * calls .show()/.slideToggle() (which set inline display without !important)
 * cannot re-reveal the fields.
 */
.mio-animale-sms-otp-hidden {
	display: none !important;
}

.mio-animale-sms-otp__edit {
	margin-top: 0.5rem;
	margin-inline-start: 0.75rem;
	background: transparent;
	border: 0;
	color: inherit;
	text-decoration: underline;
	padding: 0.25rem 0;
	cursor: pointer;
}