.pvpi-hidden {
	display: none !important;
}

/* Optional OTP-only presentation. Recovery endpoints remain available; only
 * their customer-facing login-page links are hidden. */
.pvpi-hide-lost-password .woocommerce-LostPassword,
.pvpi-hide-lost-password .lost_password,
.pvpi-hide-lost-password a[href*="action=lostpassword"],
.pvpi-hide-lost-password a[href*="lost-password"],
.pvpi-hide-lost-password a[href*="lostpassword"] {
	display: none !important;
}

.pvpi-field {
	margin-bottom: 1em;
}

.pvpi-phone-row {
	display: flex;
	gap: 6px;
	align-items: stretch;
}

.pvpi-phone-prefix {
	display: flex;
	align-items: center;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f6f6f6;
	color: #555;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pvpi-phone-row > .pvpi-country-select {
	box-sizing: border-box;
	width: 118px;
	max-width: 40%;
	flex: 0 1 118px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px 7px;
	padding-right: 24px;
}

.pvpi-phone-row > input[type="tel"],
.pvpi-phone-row.pvpi-password-identifier > input[type="text"],
.pvpi-phone-row.pvpi-lostpassword-identifier > input[type="text"] {
	box-sizing: border-box;
	width: 0;
	flex: 1 1 0;
	min-width: 0;
}

.pvpi-password-identifier {
	--pvpi-password-country-width: 104px;
	--pvpi-password-country-max-width: 38%;
	--pvpi-password-control-height: 44px;
	--pvpi-password-input-padding: 6px 10px;
	--pvpi-password-input-font-size: 16px;
	--pvpi-password-input-line-height: 1.25;
	--pvpi-password-row-margin-top: 6px;
	margin-top: var( --pvpi-password-row-margin-top );
	align-items: stretch;
}

.pvpi-password-identifier > .pvpi-country-select {
	box-sizing: border-box;
	width: var( --pvpi-password-country-width );
	max-width: var( --pvpi-password-country-max-width );
	height: var( --pvpi-password-control-height );
	min-height: var( --pvpi-password-control-height );
	margin: 0;
	flex-basis: var( --pvpi-password-country-width );
}

.pvpi-password-identifier > .pvpi-phone-prefix {
	min-height: var( --pvpi-password-control-height );
}

#loginform .pvpi-password-identifier > input[type="text"] {
	box-sizing: border-box;
	width: 0;
	height: var( --pvpi-password-control-height );
	min-height: var( --pvpi-password-control-height );
	margin: 0;
	padding: var( --pvpi-password-input-padding );
	flex: 1 1 0;
	font-size: var( --pvpi-password-input-font-size );
	line-height: var( --pvpi-password-input-line-height );
}

/* WordPress gives the native lost-password input a large font, a 100% width,
 * and bottom margin. Once that input is moved into our phone row, those core
 * rules distort the row and make the country selector stretch taller than the
 * identifier field. Keep this correction scoped to the native recovery form. */
.login-action-lostpassword .pvpi-lostpassword-identifier {
	margin-top: 6px;
	align-items: stretch;
}

.login-action-lostpassword .pvpi-lostpassword-identifier > .pvpi-country-select {
	box-sizing: border-box;
	width: 104px;
	max-width: 34%;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding-block: 6px;
	flex-basis: 104px;
	font-size: 16px;
	line-height: 1.25;
}

.login-action-lostpassword .pvpi-lostpassword-identifier > input[type="text"] {
	box-sizing: border-box;
	width: 0;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 6px 10px;
	flex: 1 1 0;
	font-size: 16px;
	line-height: 1.25;
}

.login-action-lostpassword #lostpasswordform p.submit {
	clear: both;
	margin: 16px 0 0;
}

.login-action-lostpassword #lostpasswordform p.submit .button-primary {
	display: block;
	float: none;
	width: 100%;
	min-height: 44px;
	margin: 0;
}

/* Keep the logged-out WooCommerce account form visually aligned with the
 * compact WordPress login and recovery cards. The JavaScript-added class
 * limits these rules to the PVPI-enabled login form, never the account area
 * shown after authentication. */
.woocommerce-account .woocommerce {
	--pvpi-wc-login-card-width: 320px;
	--pvpi-wc-login-card-margin: 24px auto;
	--pvpi-wc-login-card-padding: 26px 24px;
	--pvpi-wc-login-card-background: #ffffff;
	--pvpi-wc-login-card-color: #3c434a;
	--pvpi-wc-login-card-border: #c3c4c7;
	--pvpi-wc-login-card-border-width: 1px;
	--pvpi-wc-login-card-border-style: solid;
	--pvpi-wc-login-card-radius: 0;
	--pvpi-wc-login-card-shadow: 0 1px 3px rgba( 0, 0, 0, 0.04 );
	--pvpi-wc-login-font-size: 14px;
	--pvpi-wc-login-line-height: 1.5;
	--pvpi-wc-login-heading-font-size: 24px;
	--pvpi-wc-login-heading-line-height: 1.25;
	--pvpi-wc-login-field-gap: 16px;
	--pvpi-wc-login-label-gap: 6px;
	--pvpi-wc-login-phone-gap: 8px;
	--pvpi-wc-login-control-height: 44px;
	--pvpi-wc-login-country-width: 104px;
	--pvpi-wc-login-country-max-width: 38%;
	--pvpi-wc-login-country-arrow-space: 24px;
	--pvpi-wc-login-input-padding: 6px 10px;
	--pvpi-wc-login-input-background: #ffffff;
	--pvpi-wc-login-input-color: #2c3338;
	--pvpi-wc-login-input-border: #8c8f94;
	--pvpi-wc-login-input-border-width: 1px;
	--pvpi-wc-login-input-border-style: solid;
	--pvpi-wc-login-input-radius: 4px;
	--pvpi-wc-login-focus-color: #2271b1;
	--pvpi-wc-login-focus-width: 1px;
	--pvpi-wc-login-button-background: #3858e9;
	--pvpi-wc-login-button-hover-background: #2145e6;
	--pvpi-wc-login-button-color: #ffffff;
	--pvpi-wc-login-button-padding: 8px 16px;
	--pvpi-wc-login-button-font-weight: 600;
	--pvpi-wc-login-button-line-height: 1.2;
	--pvpi-wc-login-button-radius: 4px;
	--pvpi-wc-login-link-color: #1d4ed8;
}

.woocommerce-account .pvpi-woocommerce-login-heading {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --pvpi-wc-login-card-width );
	/* The .woocommerce wrapper itself is a flex column with its own gap
	   between children on this theme — any margin here just stacks on top
	   of that instead of replacing it, doubling the visual gap to the form
	   below. Horizontal centering only; no vertical margin. */
	margin: 0 auto;
	font-size: var( --pvpi-wc-login-heading-font-size );
	line-height: var( --pvpi-wc-login-heading-line-height );
}

.woocommerce-account form.woocommerce-form-login.pvpi-woocommerce-login-form {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --pvpi-wc-login-card-width );
	margin: var( --pvpi-wc-login-card-margin );
	/* The heading above already carries its own bottom margin (16px) — without
	   this, the form's own top margin stacks on top of it for a ~40px gap
	   between the "Login" title and the box itself. */
	margin-top: 0;
	padding: var( --pvpi-wc-login-card-padding );
	background: var( --pvpi-wc-login-card-background );
	color: var( --pvpi-wc-login-card-color );
	font-size: var( --pvpi-wc-login-font-size );
	line-height: var( --pvpi-wc-login-line-height );
	border-width: var( --pvpi-wc-login-card-border-width );
	border-style: var( --pvpi-wc-login-card-border-style );
	border-color: var( --pvpi-wc-login-card-border );
	border-radius: var( --pvpi-wc-login-card-radius );
	box-shadow: var( --pvpi-wc-login-card-shadow );
}

/* When "Login Styling" is enabled, let its configurable margins (including
   the top margin left at 0 above) actually take effect on this box instead
   of the fixed default — matching every other login surface's behavior. */
.woocommerce-account form.woocommerce-form-login.pvpi-woocommerce-login-form.pvpi-login-styled {
	margin-top: var( --pvpi-login-margin-top, 0 );
	margin-right: var( --pvpi-login-margin-right, auto );
	margin-bottom: var( --pvpi-login-margin-bottom, 24px );
	margin-left: var( --pvpi-login-margin-left, auto );
}

/* WooCommerce recovery uses a different form class from login. Keep it on
 * the same tokenized card width instead of inheriting the theme's full content
 * width. Every descendant also retains a stable PVPI class for overrides. */
.woocommerce-account form.pvpi-lostpassword-form {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --pvpi-wc-login-card-width, 320px );
	margin: var( --pvpi-wc-login-card-margin, 24px auto );
	padding: var( --pvpi-wc-login-card-padding, 26px 24px );
	background: var( --pvpi-wc-login-card-background, #ffffff );
	color: var( --pvpi-wc-login-card-color, #3c434a );
	border: var( --pvpi-wc-login-card-border-width, 1px ) var( --pvpi-wc-login-card-border-style, solid ) var( --pvpi-wc-login-card-border, #c3c4c7 );
	border-radius: var( --pvpi-wc-login-card-radius, 0 );
	box-shadow: var( --pvpi-wc-login-card-shadow, 0 1px 3px rgba( 0, 0, 0, 0.04 ) );
	font-size: var( --pvpi-wc-login-font-size, 14px );
	line-height: var( --pvpi-wc-login-line-height, 1.5 );
}

.woocommerce-account form.pvpi-lostpassword-form .pvpi-lostpassword-identifier,
.woocommerce-account form.pvpi-lostpassword-form .form-row,
.woocommerce-account form.pvpi-lostpassword-form button.button {
	width: 100%;
}

.woocommerce-account form.pvpi-lostpassword-form .form-row {
	margin: 0 0 var( --pvpi-wc-login-field-gap, 16px );
}

.woocommerce-account form.pvpi-lostpassword-form label {
	display: block;
	margin: 0 0 var( --pvpi-wc-login-label-gap, 6px );
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

.woocommerce-account form.pvpi-lostpassword-form .pvpi-lostpassword-identifier {
	gap: var( --pvpi-wc-login-phone-gap, 8px );
	margin: 0;
}

.woocommerce-account form.pvpi-lostpassword-form .pvpi-country-select,
.woocommerce-account form.pvpi-lostpassword-form input[type="text"] {
	box-sizing: border-box;
	height: var( --pvpi-wc-login-control-height, 44px );
	min-height: var( --pvpi-wc-login-control-height, 44px );
	margin: 0;
	padding: var( --pvpi-wc-login-input-padding, 6px 10px );
	background: var( --pvpi-wc-login-input-background, #ffffff );
	color: var( --pvpi-wc-login-input-color, #2c3338 );
	font: inherit;
	border-width: var( --pvpi-wc-login-input-border-width, 1px );
	border-style: var( --pvpi-wc-login-input-border-style, solid );
	border-color: var( --pvpi-wc-login-input-border, #8c8f94 );
	border-radius: var( --pvpi-wc-login-input-radius, 4px );
}

.woocommerce-account form.pvpi-lostpassword-form .pvpi-country-select {
	width: var( --pvpi-wc-login-country-width, 104px );
	max-width: var( --pvpi-wc-login-country-max-width, 38% );
	padding-right: var( --pvpi-wc-login-country-arrow-space, 24px );
	flex: 0 1 var( --pvpi-wc-login-country-width, 104px );
}

.woocommerce-account form.pvpi-lostpassword-form .pvpi-lostpassword-identifier > input[type="text"] {
	width: 0;
	min-width: 0;
	flex: 1 1 0;
}

.woocommerce-account form.pvpi-lostpassword-form button.button {
	min-height: var( --pvpi-wc-login-control-height, 44px );
	margin: 0;
	padding: var( --pvpi-wc-login-button-padding, 8px 16px );
	background: var( --pvpi-wc-login-button-background, #3858e9 );
	color: var( --pvpi-wc-login-button-color, #ffffff );
	font: inherit;
	font-weight: var( --pvpi-wc-login-button-font-weight, 600 );
	line-height: var( --pvpi-wc-login-button-line-height, 1.2 );
	border-radius: var( --pvpi-wc-login-button-radius, 4px );
}

.woocommerce-account .pvpi-woocommerce-login-form *,
.woocommerce-account .pvpi-woocommerce-login-form *::before,
.woocommerce-account .pvpi-woocommerce-login-form *::after {
	box-sizing: border-box;
}

.woocommerce-account .pvpi-woocommerce-login-form #pvpi-login-otp,
.woocommerce-account .pvpi-woocommerce-login-form #pvpi-login-otp > .pvpi-field {
	width: 100%;
	margin: 0;
	font-size: inherit;
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-phone-field,
.woocommerce-account .pvpi-woocommerce-login-form .woocommerce-form-row,
.woocommerce-account .pvpi-woocommerce-login-form .form-row,
.woocommerce-account .pvpi-woocommerce-login-form .woocommerce-LostPassword {
	margin: 0 0 var( --pvpi-wc-login-field-gap );
}

.woocommerce-account .pvpi-woocommerce-login-form label {
	display: block;
	margin: 0 0 var( --pvpi-wc-login-label-gap );
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-phone-row {
	width: 100%;
	gap: var( --pvpi-wc-login-phone-gap );
	align-items: stretch;
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-country-select {
	width: var( --pvpi-wc-login-country-width );
	max-width: var( --pvpi-wc-login-country-max-width );
	height: var( --pvpi-wc-login-control-height );
	min-height: var( --pvpi-wc-login-control-height );
	margin: 0;
	padding: var( --pvpi-wc-login-input-padding );
	padding-right: var( --pvpi-wc-login-country-arrow-space );
	flex: 0 1 var( --pvpi-wc-login-country-width );
	background-color: var( --pvpi-wc-login-input-background );
	color: var( --pvpi-wc-login-input-color );
	font: inherit;
	border-width: var( --pvpi-wc-login-input-border-width );
	border-style: var( --pvpi-wc-login-input-border-style );
	border-color: var( --pvpi-wc-login-input-border );
	border-radius: var( --pvpi-wc-login-input-radius );
}

.woocommerce-account .pvpi-woocommerce-login-form input.input-text,
.woocommerce-account .pvpi-woocommerce-login-form input[type="text"],
.woocommerce-account .pvpi-woocommerce-login-form input[type="password"],
.woocommerce-account .pvpi-woocommerce-login-form input[type="tel"],
.woocommerce-account .pvpi-woocommerce-login-form input[type="email"] {
	width: 100%;
	height: var( --pvpi-wc-login-control-height );
	min-height: var( --pvpi-wc-login-control-height );
	margin: 0;
	padding: var( --pvpi-wc-login-input-padding );
	background: var( --pvpi-wc-login-input-background );
	color: var( --pvpi-wc-login-input-color );
	font: inherit;
	border-width: var( --pvpi-wc-login-input-border-width );
	border-style: var( --pvpi-wc-login-input-border-style );
	border-color: var( --pvpi-wc-login-input-border );
	border-radius: var( --pvpi-wc-login-input-radius );
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-phone-row > input[type="tel"] {
	width: 0;
	min-width: 0;
	flex: 1 1 0;
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-password-identifier > input[type="text"] {
	width: 0;
	min-width: 0;
	flex: 1 1 0;
}

.woocommerce-account .pvpi-woocommerce-login-form input:focus,
.woocommerce-account .pvpi-woocommerce-login-form .pvpi-country-select:focus {
	outline: var( --pvpi-wc-login-focus-width ) solid var( --pvpi-wc-login-focus-color );
	border-color: var( --pvpi-wc-login-focus-color );
	box-shadow: 0 0 0 var( --pvpi-wc-login-focus-width ) var( --pvpi-wc-login-focus-color );
}

.woocommerce-account .pvpi-woocommerce-login-form .password-input {
	/* This wrapper (and the show/hide-password toggle button inside it) is
	   inserted by WooCommerce's own core JS; positioning it correctly is
	   left to the active theme's CSS. Forcing display:block here used to
	   override Bricks' own display:flex/justify-content:center rule for
	   this exact class, which is what keeps that toggle button vertically
	   centered over the input instead of pushed out below it. */
	width: 100%;
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-toggle-link {
	margin: 0 0 var( --pvpi-wc-login-field-gap );
	color: var( --pvpi-wc-login-link-color );
	font-size: inherit;
	line-height: inherit;
}

.woocommerce-account .pvpi-woocommerce-login-form button.button,
.woocommerce-account .pvpi-woocommerce-login-form button.wp-element-button,
.woocommerce-account .pvpi-woocommerce-login-form input.button {
	min-height: var( --pvpi-wc-login-control-height );
	margin: 0;
	padding: var( --pvpi-wc-login-button-padding );
	cursor: pointer;
	background: var( --pvpi-wc-login-button-background );
	color: var( --pvpi-wc-login-button-color );
	font: inherit;
	font-weight: var( --pvpi-wc-login-button-font-weight );
	line-height: var( --pvpi-wc-login-button-line-height );
	border-width: var( --pvpi-wc-login-input-border-width );
	border-style: var( --pvpi-wc-login-input-border-style );
	border-color: var( --pvpi-wc-login-button-background );
	border-radius: var( --pvpi-wc-login-button-radius );
}

.woocommerce-account .pvpi-woocommerce-login-form button.button:hover,
.woocommerce-account .pvpi-woocommerce-login-form button.wp-element-button:hover,
.woocommerce-account .pvpi-woocommerce-login-form input.button:hover {
	background: var( --pvpi-wc-login-button-hover-background );
	border-color: var( --pvpi-wc-login-button-hover-background );
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-otp-row {
	margin: 0 0 var( --pvpi-wc-login-field-gap );
}

.woocommerce-account .pvpi-woocommerce-login-form .pvpi-otp-row input[type="text"] {
	width: 0;
	max-width: none;
	flex: 1 1 0;
}

@media ( max-width: 480px ) {
	.woocommerce-account .woocommerce {
		--pvpi-wc-login-card-padding: 22px 20px;
	}

	.woocommerce-account .pvpi-woocommerce-login-heading,
	.woocommerce-account form.woocommerce-form-login.pvpi-woocommerce-login-form {
		max-width: 100%;
	}
}

.pvpi-otp-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.5em;
	/* Matches the row's own gap, so the action button that follows (Verify,
	 * Send code, Register…) sits the same distance below this row as the
	 * code input sits from the Verify button beside it. */
	margin-bottom: 8px;
}

/* Self-contained sizing so this box renders consistently on any host page —
 * without it, bare wp-login.php matches core's ".login input[type=text]" rule
 * (24px font, 100% width, oversized margin), producing an OTP box wildly out
 * of proportion with its neighboring buttons. Mirrors the fixed dimensions
 * already used for the phone/identifier inputs above. More specific rules
 * further down (WooCommerce login form, styled login shortcode) still layer
 * their own width/height on top of this. */
.pvpi-otp-row input[type="text"] {
	box-sizing: border-box;
	width: 140px;
	max-width: 140px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0.15em;
	font-variant-numeric: tabular-nums;
}

.pvpi-message {
	font-size: 0.9em;
	margin: 0.4em 0;
}

.pvpi-message.pvpi-error {
	color: #b5502a;
}

.pvpi-message.pvpi-success {
	color: #0e8a82;
}

.pvpi-toggle-link {
	display: inline-block;
	margin: 0.75em 0;
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: underline;
}

.pvpi-email-otp-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35em;
}

.pvpi-email-login-option > .pvpi-toggle-link {
	display: block;
}

.pvpi-email-otp-actions .pvpi-toggle-link {
	margin: 0.5em 0 0;
}

.pvpi-email-otp-actions a[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.pvpi-login-option-separator {
	margin-top: 0.5em;
	color: #767676;
}

.pvpi-current-phone {
	font-variant-numeric: tabular-nums;
	color: #555;
}

.pvpi-phone-box {
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 16px 18px;
	margin-bottom: 1.5em;
	background: #fafafa;
}

.pvpi-description {
	font-size: 0.85em;
	color: #767676;
	margin: 0.2em 0 1em;
}

.pvpi-shortcode-form {
	max-width: 440px;
	margin: 1.5em auto;
	padding: 24px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pvpi-shortcode-form .pvpi-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.pvpi-shortcode-form input.input-text,
.pvpi-shortcode-form input[type="text"],
.pvpi-shortcode-form input[type="password"],
.pvpi-shortcode-form input[type="tel"],
.pvpi-shortcode-form input[type="email"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	box-sizing: border-box;
}

.pvpi-shortcode-form button.button {
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 4px;
}

/* [pvpi_login] designer. Kept behind a dedicated class so registration,
 * account, WooCommerce, and wp-login.php mounts retain their own styling. */
.pvpi-login-styled {
	box-sizing: border-box;
	width: var( --pvpi-login-width, 100% );
	max-width: var( --pvpi-login-max-width, 440px );
	margin: var( --pvpi-login-margin-top, 24px ) var( --pvpi-login-margin-right, auto ) var( --pvpi-login-margin-bottom, 24px ) var( --pvpi-login-margin-left, auto );
	padding: var( --pvpi-login-padding, 24px );
	background: var( --pvpi-login-background, #ffffff );
	color: var( --pvpi-login-text-color, #1f2937 );
	font-family: var( --pvpi-login-font-family, inherit );
	font-size: var( --pvpi-login-font-size, 16px );
	line-height: var( --pvpi-login-line-height, 1.5 );
	text-align: var( --pvpi-login-text-align, left );
	direction: var( --pvpi-login-direction, inherit );
	border-width: var( --pvpi-login-border-width, 1px );
	border-style: var( --pvpi-login-border-style, solid );
	border-color: var( --pvpi-login-border-color, #e2e8f0 );
	border-radius: var( --pvpi-login-radius, 8px );
	box-shadow: var( --pvpi-login-shadow, 0 1px 3px rgba( 0, 0, 0, 0.05 ) );
}

.pvpi-login-styled *,
.pvpi-login-styled *::before,
.pvpi-login-styled *::after {
	box-sizing: border-box;
}

.pvpi-login-styled .pvpi-field {
	margin-bottom: var( --pvpi-field-spacing, 16px );
}

.pvpi-login-styled .pvpi-field:last-child {
	margin-bottom: 0;
}

.pvpi-login-styled .pvpi-field label {
	display: block;
	margin: 0 0 var( --pvpi-label-margin-bottom, 6px );
	color: var( --pvpi-label-color, #1f2937 );
	font-size: var( --pvpi-label-font-size, 16px );
	font-weight: var( --pvpi-label-font-weight, 600 );
	letter-spacing: var( --pvpi-label-letter-spacing, 0 );
	text-transform: var( --pvpi-label-transform, none );
}

.pvpi-login-styled .pvpi-phone-row {
	gap: var( --pvpi-phone-gap, 6px );
}

.pvpi-login-styled input.input-text,
.pvpi-login-styled input[type="text"],
.pvpi-login-styled input[type="password"],
.pvpi-login-styled input[type="tel"],
.pvpi-login-styled input[type="email"] {
	width: 100%;
	height: var( --pvpi-input-height, auto );
	margin: 0;
	padding: var( --pvpi-input-padding, 8px 12px );
	background: var( --pvpi-input-background, #ffffff );
	color: var( --pvpi-input-color, #1f2937 );
	font: inherit;
	font-size: var( --pvpi-input-font-size, 16px );
	line-height: normal;
	border-width: var( --pvpi-input-border-width, 1px );
	border-style: var( --pvpi-input-border-style, solid );
	border-color: var( --pvpi-input-border-color, #cbd5e1 );
	border-radius: var( --pvpi-input-radius, 4px );
	box-shadow: var( --pvpi-input-shadow, none );
	outline: none;
}

.pvpi-login-styled input::placeholder {
	color: var( --pvpi-input-placeholder, #94a3b8 );
	opacity: 1;
}

.pvpi-login-styled input:focus {
	border-color: var( --pvpi-input-focus-border, #2563eb );
	box-shadow: var( --pvpi-input-focus-shadow, 0 0 0 3px rgba( 37, 99, 235, 0.2 ) );
}

.pvpi-login-styled .pvpi-country-select {
	width: min( var( --pvpi-country-width, 118px ), 40% );
	max-width: 40%;
	flex-basis: var( --pvpi-country-width, 118px );
	height: var( --pvpi-input-height, auto );
	margin: 0;
	padding: var( --pvpi-input-padding, 8px 12px );
	padding-inline-end: 24px;
	background-color: var( --pvpi-country-background, #ffffff );
	color: var( --pvpi-country-color, #1f2937 );
	font: inherit;
	font-size: var( --pvpi-input-font-size, 16px );
	border-width: var( --pvpi-input-border-width, 1px );
	border-style: var( --pvpi-input-border-style, solid );
	border-color: var( --pvpi-country-border-color, #cbd5e1 );
	border-radius: var( --pvpi-country-radius, 4px );
	box-shadow: var( --pvpi-input-shadow, none );
	outline: none;
}

.pvpi-login-styled .pvpi-country-select:focus {
	border-color: var( --pvpi-input-focus-border, #2563eb );
	box-shadow: var( --pvpi-input-focus-shadow, 0 0 0 3px rgba( 37, 99, 235, 0.2 ) );
}

.pvpi-login-styled .pvpi-phone-prefix {
	padding: var( --pvpi-prefix-padding, 0 10px );
	background: var( --pvpi-prefix-background, #f6f6f6 );
	color: var( --pvpi-prefix-color, #555555 );
	border-width: var( --pvpi-input-border-width, 1px );
	border-style: var( --pvpi-input-border-style, solid );
	border-color: var( --pvpi-prefix-border-color, #cccccc );
	border-radius: var( --pvpi-prefix-radius, 4px );
}

.pvpi-login-styled .pvpi-otp-row {
	gap: var( --pvpi-otp-gap, 8px );
	margin-top: var( --pvpi-otp-margin-top, 8px );
	margin-bottom: var( --pvpi-otp-margin-bottom, 8px );
}

.pvpi-login-styled .pvpi-otp-row input[type="text"] {
	width: var( --pvpi-otp-input-width, 140px );
	max-width: var( --pvpi-otp-input-width, 140px );
	letter-spacing: var( --pvpi-otp-letter-spacing, 0.15em );
}

.pvpi-login-styled button.button {
	min-height: 0;
	cursor: pointer;
	font-family: inherit;
	line-height: normal;
	text-transform: none;
	transition: background-color var( --pvpi-button-transition, 150ms ), color var( --pvpi-button-transition, 150ms ), border-color var( --pvpi-button-transition, 150ms ), box-shadow var( --pvpi-button-transition, 150ms );
}

.pvpi-login-styled button.pvpi-primary {
	width: var( --pvpi-button-width, auto );
	margin: var( --pvpi-button-margin, 0 );
	padding: var( --pvpi-button-padding, 8px 16px );
	background: var( --pvpi-button-background, #2271b1 );
	color: var( --pvpi-button-color, #ffffff );
	font-size: var( --pvpi-button-font-size, 16px );
	font-weight: var( --pvpi-button-font-weight, 600 );
	letter-spacing: var( --pvpi-button-letter-spacing, 0 );
	border-width: var( --pvpi-button-border-width, 1px );
	border-style: var( --pvpi-button-border-style, solid );
	border-color: var( --pvpi-button-border-color, #2271b1 );
	border-radius: var( --pvpi-button-radius, 4px );
	box-shadow: var( --pvpi-button-shadow, none );
}

.pvpi-login-styled button.pvpi-primary:hover {
	background: var( --pvpi-button-hover-background, #135e96 );
	color: var( --pvpi-button-hover-color, #ffffff );
	border-color: var( --pvpi-button-hover-border-color, #135e96 );
	box-shadow: var( --pvpi-button-hover-shadow, none );
}

.pvpi-login-styled button.pvpi-primary:focus-visible,
.pvpi-login-styled .pvpi-otp-row button:focus-visible {
	outline: 2px solid var( --pvpi-button-focus-color, #2563eb );
	outline-offset: 2px;
}

.pvpi-login-styled button:disabled {
	cursor: not-allowed;
	opacity: var( --pvpi-button-disabled-opacity, 0.55 );
}

.pvpi-login-styled .pvpi-otp-row button {
	width: var( --pvpi-verify-width, auto );
	margin: 0;
	padding: var( --pvpi-verify-padding, 8px 16px );
	background: var( --pvpi-verify-background, #ffffff );
	color: var( --pvpi-verify-color, #1f2937 );
	font-size: var( --pvpi-verify-font-size, 16px );
	font-weight: var( --pvpi-verify-font-weight, 600 );
	border-width: var( --pvpi-verify-border-width, 1px );
	border-style: var( --pvpi-verify-border-style, solid );
	border-color: var( --pvpi-verify-border-color, #cbd5e1 );
	border-radius: var( --pvpi-verify-radius, 4px );
	box-shadow: var( --pvpi-verify-shadow, none );
}

.pvpi-login-styled .pvpi-otp-row button:hover {
	background: var( --pvpi-verify-hover-background, #f1f5f9 );
	color: var( --pvpi-verify-hover-color, #0f172a );
	border-color: var( --pvpi-verify-hover-border-color, #94a3b8 );
}

.pvpi-login-styled .pvpi-toggle-link {
	display: inline-block;
	margin: var( --pvpi-link-margin, 12px 0 );
	color: var( --pvpi-link-color, #2271b1 );
	font-size: var( --pvpi-link-font-size, 14px );
	font-weight: var( --pvpi-link-font-weight, 400 );
	text-decoration: var( --pvpi-link-decoration, underline );
}

.pvpi-login-styled .pvpi-toggle-link:hover {
	color: var( --pvpi-link-hover-color, #135e96 );
}

.pvpi-login-styled .pvpi-message {
	margin: var( --pvpi-message-margin, 8px 0 0 );
	padding: var( --pvpi-message-padding, 10px 12px );
	font-size: var( --pvpi-message-font-size, 14px );
	border-width: var( --pvpi-message-border-width, 1px );
	border-style: solid;
	border-radius: var( --pvpi-message-radius, 4px );
}

.pvpi-login-styled .pvpi-message.pvpi-success {
	background: var( --pvpi-success-background, #ecfdf5 );
	color: var( --pvpi-success-color, #047857 );
	border-color: var( --pvpi-success-border-color, #a7f3d0 );
}

.pvpi-login-styled .pvpi-message.pvpi-error {
	background: var( --pvpi-error-background, #fff1f2 );
	color: var( --pvpi-error-color, #be123c );
	border-color: var( --pvpi-error-border-color, #fecdd3 );
}

.pvpi-migration-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: min( 1120px, calc( 100% - 32px ) );
	margin: 16px auto;
	padding: 16px 20px;
	background: #eff6ff;
	color: #172554;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
}

.pvpi-migration-notice > div:first-child {
	display: grid;
	gap: 4px;
}

.pvpi-migration-notice-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.pvpi-migration-card {
	box-sizing: border-box;
	width: min( 100% - 32px, 640px );
	margin: 48px auto;
	padding: clamp( 24px, 5vw, 48px );
	background: #ffffff;
	color: #1f2937;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba( 15, 23, 42, 0.08 );
}

.pvpi-migration-card h1,
.pvpi-migration-card h2 {
	margin-top: 0;
}

.pvpi-migration-form .pvpi-phone-field {
	margin-top: 24px;
}

.pvpi-migration-form .pvpi-primary {
	margin-top: 12px;
}

@media ( max-width: 640px ) {
	.pvpi-migration-notice,
	.pvpi-migration-notice-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.pvpi-migration-notice-actions .button,
	.pvpi-migration-notice-actions .button-link {
		width: 100%;
		text-align: center;
	}

	.pvpi-migration-card {
		margin: 24px auto;
	}

	.pvpi-migration-card .pvpi-phone-row {
		flex-direction: column;
	}

	.pvpi-migration-card .pvpi-country-select {
		width: 100%;
		max-width: none;
	}
}