/**
 * Email-first checkout login.
 * Brand green is #8cd451, matching the theme's buttons and notices.
 */

/* The login entry points this flow replaces. The Xoo popup is stood down in
   PHP; these two are markup owned by the theme and by Flux Checkout. */
.woocommerce-checkout .woocommerce-form-login-wrap,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .flux-checkout__login {
	display: none !important;
}

/**
 * Flux floats the first/last name columns (float left/right, width 49% each)
 * and gives .woocommerce-account-fields no clear. Normally that never shows:
 * WooCommerce only renders the create-account block when the customer ticks the
 * box. WooCommerce Subscriptions forces it on for every guest, so the block
 * lands alongside both floats and its text is squeezed into the 2% gutter —
 * about two characters wide and enormously tall. Pre-existing; the login popup
 * simply covered the page before anyone could see it.
 */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .vscl {
	clear: both;
}

/**
 * Flux's caption for this block ends "If you are a returning customer please
 * login at the top of the page" — no longer true, since that form is gone and
 * signing in now happens through the email field above. The .vscl status
 * message covers the same ground and is accurate, so this one is retired
 * rather than left contradicting the page.
 */
.woocommerce-checkout .woocommerce-account-fields .create-account > p.flux-text {
	display: none;
}

/**
 * Breathing room around the create-account block.
 *
 * Nothing below the password input has any: Flux gives .woocommerce-password-hint
 * only colour, display and max-width, the strength meter just 8px on top, and
 * .woocommerce-account-fields no bottom margin — while p.form-row:last-of-type
 * zeroes the row's own. The field, the strength reading and the hint therefore
 * stack flush against each other and against whatever follows.
 *
 * Spaced on the outer wrapper rather than .create-account, which Flux pins to
 * margin-bottom:0!important. The margins on the meter and hint are set
 * independently of the row's because WooCommerce injects them at runtime and
 * they may land inside or outside the <p> depending on version.
 */
.woocommerce-checkout .woocommerce-account-fields {
	margin-bottom: 32px;
}

.woocommerce-checkout form p.form-row#account_password_field {
	margin-bottom: 8px;
}

.woocommerce-checkout .woocommerce-password-strength {
	margin-top: 12px;
}

.woocommerce-checkout .woocommerce-password-hint {
	line-height: 1.5;
	margin-top: 10px;
	margin-bottom: 4px;
}

.vscl {
	margin: 0 0 1em;
}

.vscl__status:empty {
	display: none;
}

.vscl__status {
	font-size: 0.95em;
	line-height: 1.4;
	padding: 0.75em 1em;
	border-radius: 6px;
	margin-bottom: 1em;
	background-color: #f4f9ef;
	border-left: 3px solid #8cd451;
	color: #2f4a1c;
}

.vscl[data-state='checking'] .vscl__status {
	background-color: #f5f5f5;
	border-left-color: #c9c9c9;
	color: #666;
}

.vscl__pw[hidden] {
	display: none;
}

/**
 * Flux zeroes the bottom margin of the last form row in a container
 * (.woocommerce form p.form-row:last-of-type, specificity 0,2,3). The password
 * row is the only <p> in this block, so it always matches and the Sign in
 * button ends up flush against the field. Out-specify it rather than reaching
 * for !important, which would be harder to override later.
 */
.woocommerce form .vscl p.form-row.vscl__pw-row {
	margin-bottom: 12px;
}

/**
 * The password-visibility toggle renders as a black box under the field.
 *
 * WooCommerce now emits it as <button class="show-password-input"> — it used to
 * be a <span>, and Flux's stylesheet still assumes that: it styles only
 * ::after (the masked eye) and never neutralises button chrome. So the theme's
 * global button styling paints the empty button, and because Flux never
 * positions the button itself it sits in normal flow below the input rather
 * than over its right-hand edge.
 *
 * Strip the chrome and lift it onto the input as a transparent hit area. Width
 * 56 / height 54 with right:0 keeps Flux's ::after exactly where it already
 * aimed it: the icon is offset right:16px from its positioned ancestor, and
 * that ancestor's right edge still coincides with the row's.
 *
 * !important is deliberate here — the theme's button rules are the thing being
 * overridden and they carry their own weight; the selector alone is not
 * reliably enough on a page with this much third-party CSS.
 */
.woocommerce-checkout form p.form-row button.show-password-input,
.woocommerce-checkout form p.form-row button.show-password-input:hover,
.woocommerce-checkout form p.form-row button.show-password-input:focus {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: transparent;
	cursor: pointer;
	font-size: 0;
	height: 54px;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 56px;
}

.vscl__actions {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
}

.vscl__signin {
	background-color: #8cd451;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.7em 1.6em;
	font-weight: 600;
	cursor: pointer;
}

.vscl__signin:hover:not(:disabled) {
	background-color: #7cc043;
	color: #ffffff;
}

.vscl__signin:disabled {
	opacity: 0.6;
	cursor: default;
}

.vscl__lost {
	font-size: 0.9em;
	text-decoration: underline;
}

.vscl__error:empty {
	display: none;
}

.vscl__error {
	margin-top: 0.75em;
	color: #b3261e;
	font-size: 0.9em;
}

@media (max-width: 480px) {
	.vscl__actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}