/* WAXORBIT-ACCOUNT-CSS BUILD: soft-seam-v2 */
/* ==================================================================
   19 - MY ACCOUNT (login / register)
   Scoped entirely to .wo-auth, so nothing here can reach the cart,
   checkout, tracking page, or any other part of the site.

   The inputs themselves are NOT restyled - every standard text,
   email and password input already picks up the theme's dark glass
   treatment from 06-forms.css sitewide. This file is the layout,
   the panels, and the reveal animation around them.
   ================================================================== */

.wo-auth {
	display: grid;
	gap: var(--wo-space-4);
	max-width: 440px;
	margin-inline: auto;
}

/*
 * Side by side once there is genuinely room for two 440px cards plus
 * the gap. Below that they stack in source order - Register first,
 * then Login - with no CSS reordering, so the keyboard tab order
 * always matches what is on screen.
 *
 * Only applies to .wo-auth--split, which the template adds solely
 * when registration is enabled. With registration off there is one
 * card, and it stays centred at 440px rather than sitting awkwardly
 * in a half-width column.
 */
@media (min-width: 940px) {

	.wo-auth--split {
		grid-template-columns: 1fr 1fr;
		max-width: 920px;
		align-items: start;
	}
}

/* ------------------------------------------------------------------
   PANELS
   ------------------------------------------------------------------ */

.wo-auth__panel {
	padding: clamp(1.125rem, 2.5vw, 1.5rem);

	background: var(--wo-grad-surface);

	/*
	 * Deliberately fainter than --wo-line (0.10 alpha). At this
	 * weight the edge reads as a soft seam between the card and the
	 * page rather than a drawn outline, which is what gives it the
	 * premium feel - the card is defined mostly by its gradient and
	 * shadow, with the border only finishing the edge.
	 */
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--wo-radius-xl);
	box-shadow: var(--wo-shadow-lg);
}

/*
 * A whisper of the brand colour on the register card so the two are
 * still distinguishable at a glance. Softened well below
 * --wo-primary-line (0.38 alpha), which was strong enough to read as
 * a deliberate outline and made this card noticeably brighter-edged
 * than the login card beside it.
 */
.wo-auth__panel--register {
	border-color: rgba(124, 92, 255, 0.14);
}

.wo-auth__head {
	margin-bottom: var(--wo-space-4);
}

.wo-auth__title {
	margin: 0 0 var(--wo-space-1);
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-xl);
	line-height: 1.15;
	color: var(--wo-text);
}

.wo-auth__sub {
	margin: 0;
	font-size: var(--wo-text-sm);
	line-height: 1.6;
	color: var(--wo-text-muted);
}


/* ------------------------------------------------------------------
   FIELDS
   WooCommerce renders each row as a <p>, so the margin reset below
   is what keeps spacing even between rows.
   ------------------------------------------------------------------ */

.wo-auth .wo-field {
	margin: 0 0 var(--wo-space-3);
}

/*
 * Labels are hidden VISUALLY, not removed.
 *
 * The placeholder now carries the field's name on screen, which is
 * what makes these boxes compact. But a placeholder is not a
 * substitute for a label: screen readers do not announce it
 * dependably, and it disappears the moment the customer starts
 * typing - so anyone relying on assistive technology, or who simply
 * looks away mid-form, loses any indication of what the field is.
 *
 * Keeping the real <label for="..."> in the DOM and clipping it out
 * of view preserves that association completely while taking up no
 * vertical space. Deleting the labels outright would have looked
 * identical and quietly broken the form for those customers.
 */
.wo-auth .wo-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The remember-me label is a real, visible control and must NOT be
 * clipped by the rule above - it sits outside .wo-field, but stating
 * it explicitly guards against that changing later.
 */
.wo-auth .wo-check {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/*
 * Placeholders now carry the field's name, so they need more contrast
 * than a decorative hint would. --wo-text-muted (#C3BADF) rather than
 * --wo-text-dim (#9289B8): still clearly secondary to entered text,
 * but comfortably readable against the dark field.
 */
.wo-auth input::placeholder {
	color: var(--wo-text-muted);
	opacity: 1;
}

.wo-auth .required {
	color: var(--wo-error);
	text-decoration: none;
	border: none;
}

/* WooCommerce's own screen-reader-only text. Kept available to
   assistive technology, hidden visually. */
.wo-auth .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.wo-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wo-space-3);
	margin-top: var(--wo-space-3);
	margin-bottom: 0;
}

.wo-auth .wo-check {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-2);
	margin: 0;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	cursor: pointer;
}

.wo-auth__lost a {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-auth__lost a:hover {
	color: var(--wo-text);
}

.wo-auth__actions {
	margin: 0;
}


/* ------------------------------------------------------------------
   TWO-STEP SLIDE
   Step 1 (email) slides out to the left as step 2 (password) slides
   in from the right, occupying the same space.

   The stepping only engages once JavaScript adds .is-stepped. Without
   it both panels render stacked and visible, which is the plain
   working form - see assets/js/account-step.js.
   ------------------------------------------------------------------ */

/*
 * The HTML `hidden` attribute must actually hide things here.
 *
 * The browser's default [hidden] { display: none } is a single
 * type/attribute selector, so .wo-btn { display: inline-flex } beats
 * it on specificity - meaning the Continue and Back buttons rendered
 * with `hidden` were still VISIBLE until JavaScript ran. With
 * JavaScript unavailable they stayed visible permanently as dead
 * controls that did nothing when pressed. This restores the intended
 * behaviour at a specificity that wins.
 */
.wo-auth [hidden] {
	display: none;
}

/*
 * The stage sizes itself to the ACTIVE panel, not the tallest one.
 *
 * Previously both panels shared a single grid cell, so the stage was
 * always as tall as the taller of the two. Panel 2 carries whatever
 * `woocommerce_register_form` injects - on this site the privacy
 * policy paragraph - which made it far taller than panel 1 and left
 * a large empty gap under the Continue button before the password
 * was ever revealed.
 *
 * Now only the active panel is in normal flow; the inactive one is
 * taken out of it with position: absolute. The stage therefore
 * adopts the active panel's height exactly, with no dead space in
 * either state. assets/js/account-step.js animates between the two
 * heights so the change is smooth rather than a jump.
 */
.wo-step__stage {
	position: relative;
}

/*
 * overflow: hidden here is what makes the slide animation work - the
 * outgoing panel must disappear past this box's edge rather than
 * spill out beside the incoming one. But it was applied permanently,
 * for as long as the form stayed in stepped mode - not just while a
 * slide was actually happening - which meant it was ALSO clipping
 * every button's glow (--wo-glow-primary) in the settled state, not
 * only mid-transition: a box-shadow plays no part in an element's own
 * size, so no height this stage is ever set to - a fixed pixel value
 * mid-slide, or `auto` once settled - gives the glow room on its own.
 * Only the hard, unblurred sliver of the glow was ever visible, a
 * square-edged line rather than the soft halo Save Changes has
 * elsewhere on the site.
 *
 * Fixed at the source: overflow:hidden is now gated on .is-transitioning
 * (assets/js/account-step.js adds this only for the ~420ms a slide is
 * actually running, then removes it), so clipping exists only for the
 * moment it is structurally needed and the glow renders in full the
 * rest of the time - which is effectively all the time a customer is
 * actually looking at the form.
 *
 * The bleed below still matters for that brief transitioning window:
 * negative margin pushes this box's edges (and so where the clip
 * happens while it is active) 20px further out on each side, into the
 * auth card's own padding - which has no overflow clipping of its
 * own, so nothing landing there gets cut off either - and padding
 * pulls the panels (width: 100% of this box) back in by the same
 * 20px, so both panels and every button inside them still render at
 * exactly the original width and position; only the clipping edge
 * moves.
 *
 * No vertical padding is added here to do the same for the bottom
 * edge: it would not reach the button anyway. The panel sliding
 * through this box is positioned absolutely with height: auto - its
 * own content dictates its height regardless of the stage's own
 * padding, so bottom padding on the stage does not add any room
 * between the panel's bottom edge and the stage's. What actually
 * fixes the bottom edge is that overflow is no longer hidden for
 * anything but that brief transitioning window in the first place.
 */
.wo-step.is-stepped .wo-step__stage {
	margin: 0 -20px;
	padding: 0 20px;
	transition: height var(--wo-duration-slow, 380ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.wo-step.is-stepped.is-transitioning .wo-step__stage {
	overflow: hidden;
}

/*
 * Both panels occupy the SAME grid cell. That is what makes the slide
 * jump-free: the stage is always as tall as its tallest panel, so
 * nothing below it moves when the panels swap. Each panel holds
 * exactly one field plus one button, so in practice the two are the
 * same height anyway and there is no dead space either.
 */
.wo-step.is-stepped .wo-step__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition:
		transform var(--wo-duration-slow, 380ms) cubic-bezier(0.4, 0, 0.2, 1),
		opacity var(--wo-duration, 260ms) cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear var(--wo-duration-slow, 380ms);
	visibility: hidden;
	opacity: 0;
}

/* The active panel. visibility transition delay is zeroed here so it
   becomes visible immediately as it slides IN, but is only hidden
   after it has finished sliding OUT - without this the outgoing panel
   vanishes instantly instead of animating. */
/* The active panel returns to normal flow, which is what gives the
   stage its height. */
.wo-step.is-stepped .wo-step__panel.is-active {
	position: relative;
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0s;
	z-index: 1;
}

/* Resting positions: step 1 waits off to the left, step 2 off to the
   right, so the movement always reads as forward. */
.wo-step.is-stepped .wo-step__panel--first {
	transform: translateX(-14%);
}

.wo-step.is-stepped .wo-step__panel--second {
	transform: translateX(14%);
}

/* A hidden panel must not be reachable by keyboard or screen reader.
   visibility: hidden already removes it from the tab order; this is
   belt and braces for the inputs specifically. */
.wo-step.is-stepped .wo-step__panel:not(.is-active) {
	pointer-events: none;
}

.wo-step__next {
	margin-top: var(--wo-space-1);
}

.wo-step__error {
	margin: 0 0 var(--wo-space-2);
	font-size: var(--wo-text-sm);
	color: var(--wo-error);
}

.wo-step__back {
	display: none;
	margin: var(--wo-space-3) auto 0;
	padding: 0;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);

	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wo-step__back:hover {
	color: var(--wo-text);
}

/* Only shown once stepping is active AND we are on step 2. */
.wo-step.is-stepped.is-step-2 .wo-step__back {
	display: block;
}

@media (prefers-reduced-motion: reduce) {

	.wo-step.is-stepped .wo-step__panel {
		transition-duration: 1ms;
		transform: none;
	}
}


/* ------------------------------------------------------------------
   WOOCOMMERCE NOTICES INSIDE THE PANELS
   Errors ("incorrect password", "email already registered") and the
   verification-plugin's messages all arrive through these.
   ------------------------------------------------------------------ */

.wo-auth .woocommerce-error,
.wo-auth .woocommerce-message,
.wo-auth .woocommerce-info {
	margin: 0 0 var(--wo-space-5);
	padding: var(--wo-space-4);
	list-style: none;

	font-size: var(--wo-text-sm);
	line-height: 1.55;
	color: var(--wo-text);

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line);
	border-left: 3px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-sm);
}

.wo-auth .woocommerce-error {
	border-left-color: var(--wo-error);
}

.wo-auth .woocommerce-message {
	border-left-color: var(--wo-success);
}


/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */

@media (max-width: 479.98px) {

	.wo-auth {
		gap: var(--wo-space-5);
	}

	.wo-auth__panel {
		padding: var(--wo-space-4);

		/* One step down from the desktop radius rather than back to
		   --wo-radius-md, so the corners stay visibly rounded on a
		   narrow card instead of tightening up. */
		border-radius: var(--wo-radius-lg);
	}

	.wo-auth__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wo-space-3);
	}
}

/* ==================================================================
   OVERRIDES + FOCUS/AUTOFILL FIXES
   ================================================================== */

/*
 * 14-cart-checkout.css styles .woocommerce-form-login with its own
 * padding, background, border and a large bottom margin. That rule is
 * meant for the collapsible "returning customer" login panel at the
 * top of CHECKOUT - but that stylesheet loads on every WooCommerce
 * page, so it also hit the real login form here, drawing a second
 * bordered box inside the panel and adding a block of empty space
 * below the button. Neutralised inside .wo-auth only; the checkout
 * panel it was written for is untouched.
 */
/*
 * The inner form box.
 *
 * 14-cart-checkout.css styles .woocommerce-form-login with a border,
 * padding and a large bottom margin - written for the collapsible
 * login panel at the top of CHECKOUT, but that stylesheet loads on
 * every WooCommerce page so it lands here too. Rather than strip it
 * out, it is restyled: the box is a useful grouping around the field
 * and its button, it just needed to stop looking like a hard outline.
 *
 * The border is far lighter than the 0.10-alpha default so it reads
 * as a soft seam rather than a drawn rectangle, and the radius is
 * large enough that the corners are visibly smooth against the
 * pill-shaped input and button inside it.
 */
.wo-auth .woocommerce-form-login,
.wo-auth .woocommerce-form-register,
.woocommerce-account .wo-auth form.woocommerce-form-login,
.woocommerce-account .wo-auth form.woocommerce-form-register {
	padding: var(--wo-space-4);
	margin-bottom: 0;

	/*
	 * !important here is deliberate, not habit.
	 *
	 * 14-cart-checkout.css sets a border on .woocommerce-form-login
	 * for the collapsible login panel at the top of CHECKOUT, but that
	 * stylesheet loads on every WooCommerce page and so reaches this
	 * form too. Specificity and load order already favour these rules,
	 * but this is a purely cosmetic override of a third-party rule
	 * written for a different page, and it needs to hold regardless of
	 * plugin CSS, a caching plugin's concatenation reordering files, or
	 * a future WooCommerce update adding its own weight. Marking only
	 * the three visual properties keeps the blast radius tiny.
	 */
	background: rgba(255, 255, 255, 0.015) !important;
	border: 1px solid rgba(255, 255, 255, 0.035) !important;

	/*
	 * CONCENTRIC with the input inside it. For nested rounded boxes to
	 * look right the outer radius should equal the inner radius plus
	 * the gap: the input is --wo-radius-md (18px) and the padding is
	 * --wo-space-4 (16px), so 18 + 16 = 34px. 32px is the nearest
	 * token and is visually indistinguishable.
	 */
	border-radius: var(--wo-radius-xl) !important;
}

@media (max-width: 479.98px) {

	.wo-auth .woocommerce-form-login,
	.wo-auth .woocommerce-form-register {
		padding: var(--wo-space-3);

		/* Padding is 12px here, so the concentric radius is 18 + 12 =
		   30px; --wo-radius-lg (24px) is the nearest token and still
		   comfortably rounder than the input it wraps. */
		border-radius: var(--wo-radius-lg) !important;
	}
}

/*
 * FOCUS STATE.
 *
 * Restated here at a specificity that wins, and kept deliberately
 * dark. The reported symptom was a field turning white on focus with
 * unreadable text; this guarantees the surface stays dark and the
 * text, caret and placeholder all stay legible against it.
 */
.wo-auth input[type='text']:focus,
.wo-auth input[type='email']:focus,
.wo-auth input[type='password']:focus,
.wo-auth input[type='tel']:focus,
.wo-auth input.input-text:focus {
	outline: none;
	color: var(--wo-text);
	caret-color: var(--wo-text);
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wo-primary);
	box-shadow: 0 0 0 3px var(--wo-primary-soft);
}

.wo-auth input[type='text']:hover,
.wo-auth input[type='email']:hover,
.wo-auth input[type='password']:hover,
.wo-auth input.input-text:hover {
	background: rgba(255, 255, 255, 0.07);
}

/*
 * AUTOFILL - the actual cause of the white field.
 *
 * Chrome, Edge and Safari paint their own opaque background on an
 * autofilled input, and plain `background` cannot override it - the
 * UA style wins. The working method is a large inset box-shadow
 * (opaque, or the white shows through) plus -webkit-text-fill-color
 * for the text.
 *
 * !important is required and is not defensive habit here: the same
 * rule already exists globally in 06-forms.css WITHOUT it, and that
 * is precisely why it failed on this page while the checkout copy -
 * which does use !important - has always worked. :active is included
 * too; the global rule omits it, so a field turned white again while
 * actually being clicked.
 *
 * The very long background-color transition prevents the yellow flash
 * by ensuring the animation never reaches its end state.
 */
.wo-auth input:-webkit-autofill,
.wo-auth input:-webkit-autofill:hover,
.wo-auth input:-webkit-autofill:focus,
.wo-auth input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 100px #241A4D inset !important;
	-webkit-text-fill-color: var(--wo-text) !important;
	caret-color: var(--wo-text) !important;
	border: 1px solid var(--wo-line) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

.wo-auth input:-webkit-autofill:focus {
	border-color: var(--wo-primary) !important;
	box-shadow:
		0 0 0 100px #241A4D inset,
		0 0 0 3px var(--wo-primary-soft) !important;
}


/* ==================================================================
   LOST PASSWORD + RESET PASSWORD
   These are separate WooCommerce templates on the same account page,
   so this stylesheet already loads for them. They are NOT wrapped in
   .wo-auth, which is why the input fixes above did not reach them -
   hence the repeated rules here, scoped to their own containers.
   ================================================================== */

.woocommerce-ResetPassword,
.woocommerce-account form.lost_reset_password {
	max-width: 480px;
	padding: var(--wo-space-5);
	margin-inline: auto;

	background: var(--wo-grad-surface);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--wo-radius-xl);
	box-shadow: var(--wo-shadow-lg);
}

.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-account form.lost_reset_password .woocommerce-form-row {
	margin-bottom: var(--wo-space-4);
}

/*
 * Labels hidden VISUALLY, not removed - the placeholder now carries
 * the field name on screen. Same reasoning as the login form: a
 * placeholder is not announced dependably by screen readers and
 * vanishes the moment someone types, so deleting the label would
 * look identical while quietly breaking the field for anyone using
 * assistive technology. The real <label for="..."> stays in the DOM.
 */
.woocommerce-ResetPassword label,
.woocommerce-account form.lost_reset_password label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The intro paragraph - "Lost your password?..." and "Enter a new
 * password below." - is core's own and stays exactly where core puts
 * it, first inside the form. Only its spacing is set here.
 */
.woocommerce-ResetPassword > p:first-of-type,
.woocommerce-account form.lost_reset_password > p:first-of-type {
	margin: 0 0 var(--wo-space-4);
	font-size: var(--wo-text-sm);
	line-height: 1.6;
	color: var(--wo-text-muted);
}

/*
 * Core gives these rows form-row-first / form-row-last, which
 * 10-woocommerce.css floats into a two-column grid. On a narrow reset
 * card that squeezes both password fields side by side; full width
 * each is correct here.
 */
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last,
.woocommerce-account form.lost_reset_password .form-row-first,
.woocommerce-account form.lost_reset_password .form-row-last {
	float: none;
	width: 100%;
	margin-right: 0;
}

.woocommerce-ResetPassword .clear,
.woocommerce-account form.lost_reset_password .clear {
	display: none;
}

/*
 * The reported bug: this field turned white when focused or
 * autofilled, leaving the text unreadable. Same cause as on the login
 * form - the global autofill rule in 06-forms.css omits !important,
 * which Chrome's own autofill styling requires in order to be
 * overridden at all.
 */
.woocommerce-ResetPassword input[type='text'],
.woocommerce-ResetPassword input[type='password'],
.woocommerce-account form.lost_reset_password input[type='text'],
.woocommerce-account form.lost_reset_password input[type='password'] {
	color: var(--wo-text);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line);
}

.woocommerce-ResetPassword input:focus,
.woocommerce-account form.lost_reset_password input:focus {
	outline: none;
	color: var(--wo-text);
	caret-color: var(--wo-text);
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wo-primary);
	box-shadow: 0 0 0 3px var(--wo-primary-soft);
}

.woocommerce-ResetPassword input::placeholder,
.woocommerce-account form.lost_reset_password input::placeholder {
	/* Carries the field name now, so it needs real contrast rather
	   than the dimmer tone used for decorative hints. */
	color: var(--wo-text-muted);
	opacity: 1;
}

.woocommerce-ResetPassword input:-webkit-autofill,
.woocommerce-ResetPassword input:-webkit-autofill:hover,
.woocommerce-ResetPassword input:-webkit-autofill:focus,
.woocommerce-ResetPassword input:-webkit-autofill:active,
.woocommerce-account form.lost_reset_password input:-webkit-autofill,
.woocommerce-account form.lost_reset_password input:-webkit-autofill:hover,
.woocommerce-account form.lost_reset_password input:-webkit-autofill:focus,
.woocommerce-account form.lost_reset_password input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 100px #241A4D inset !important;
	-webkit-text-fill-color: var(--wo-text) !important;
	caret-color: var(--wo-text) !important;
	border: 1px solid var(--wo-line) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

.woocommerce-ResetPassword .woocommerce-form-row + .woocommerce-form-row,
.woocommerce-account form.lost_reset_password .form-row-first + .form-row-last {
	margin-top: 0;
}


/* ==================================================================
   NOTICES - including the "verification email sent" message
   ================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	max-width: 920px;
	margin: 0 auto var(--wo-space-5);
	padding: var(--wo-space-5);
	list-style: none;

	font-size: var(--wo-text-sm);
	line-height: 1.65;
	color: var(--wo-text);

	background: var(--wo-grad-surface);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-left: 3px solid var(--wo-primary);
	border-radius: var(--wo-radius-lg);
	box-shadow: var(--wo-shadow-lg);
}

.woocommerce-account .woocommerce-message {
	border-left-color: var(--wo-success);
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--wo-error);
}

/*
 * WooCommerce core injects a font-icon before every notice via
 * ::before, using its own "WooCommerce" webfont. When that font does
 * not load - which is common - the glyph renders as a tofu box
 * overlapping the first character of the message, which is exactly
 * the artifact visible before the "Verification email sent" text.
 * Removing it also removes the awkward 3.5em left padding core adds
 * to make room for it.
 */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
	content: none !important;
	display: none !important;
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-error a {
	color: var(--wo-primary-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Core floats its notice button to the right, which collides with
   wrapped text in a narrow notice. */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
	float: none;
	display: inline-block;
	margin-top: var(--wo-space-3);
}


/* ==================================================================
   PASSWORD STRENGTH METER
   WooCommerce adds .short / .bad / .good / .strong to
   .woocommerce-password-strength (class names verified against its
   own password-strength-meter.js). Core's default is a saturated
   block with low-contrast text - the reported "hard to read" state.
   ================================================================== */

.woocommerce-password-strength {
	margin: var(--wo-space-2) 0 0;
	padding: var(--wo-space-2) var(--wo-space-4);

	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: 0.02em;
	text-align: center;

	border-radius: var(--wo-radius-pill);
	border: 1px solid transparent;
}

/*
 * Tinted backgrounds with a matching bright text colour, rather than
 * core's solid fill with dark text on it. Keeps the strength readable
 * against the dark card at every level, and keeps the colour as a
 * quiet signal rather than a slab.
 */
.woocommerce-password-strength.strong {
	color: #7BE8A8;
	background: rgba(74, 222, 128, 0.12);
	border-color: rgba(74, 222, 128, 0.3);
}

.woocommerce-password-strength.good {
	color: #FFD98A;
	background: rgba(245, 197, 66, 0.12);
	border-color: rgba(245, 197, 66, 0.3);
}

.woocommerce-password-strength.bad,
.woocommerce-password-strength.short {
	color: #FF9E9E;
	background: rgba(255, 107, 107, 0.12);
	border-color: rgba(255, 107, 107, 0.3);
}

.woocommerce-password-hint {
	display: block;
	margin: var(--wo-space-2) 0 0;
	font-size: var(--wo-text-xs);
	line-height: 1.5;
	color: var(--wo-text-dim);
}