/**
 * WooCommerce sign-in screens, matched to wp-login.php.
 *
 * Scoped to .woocommerce-account throughout so none of this reaches checkout,
 * which relies on Astra's modern floating-label layout and is styled elsewhere.
 *
 * Astra's woo-modern-input.css selectors are built like
 * `body:not(.cartflows-canvas):not(…):not(…) .woocommerce form .form-row input`,
 * which outranks anything reasonable, so field rules here carry !important
 * rather than escalating selector length to match.
 *
 * @package TVP_Core
 */

.woocommerce-account {
	--tvp-surface: #1f2122;
	--tvp-field: #252526;
	--tvp-border: #463D27;
	--tvp-border-soft: rgba( 240, 191, 40, 0.18 );
	--tvp-gold: #f0bf28;
	--tvp-check: #c9a22a;
	--tvp-red: #c8102e;
	--tvp-red-dark: #a30d25;
	--tvp-text: #ffffff;
	--tvp-muted: #9ca3af;
}

/* ---------- Column width ---------- */

.woocommerce-account #customer_login .col-1,
.woocommerce-account .woocommerce-form.login,
.woocommerce-account .woocommerce-form.register,
.woocommerce-account .woocommerce form.lost_reset_password {
	margin-left: auto;
	margin-right: auto;
	max-width: 460px;
}

/* ---------- Row widths ---------- */

/*
 * WooCommerce's grid floats .form-row-first and .form-row-last side by side at
 * 47% each, for two-column checkout address blocks. Every form on these screens
 * is a single narrow column, so both have to span the full width instead - most
 * visibly on the reset-password screen, whose two password fields carry exactly
 * those classes and would otherwise sit half-width beside each other.
 *
 * Astra Addon emits an equivalent override of its own, which is why this looked
 * correct for a long time - but it only appears in its inline CSS on logged-out
 * renders. The new-account "set your password" link arrives authenticated (see
 * TVP_Account::enqueue_styles()), and there that rule is simply absent, leaving
 * the second field collapsed to 47% and floated hard right. Owning the rule here
 * makes the layout independent of whether Astra decides to emit it.
 *
 * float: none also removes the need for the .clear div WooCommerce prints
 * between the rows, and keeps the fields stacked at every breakpoint.
 */
.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last,
.woocommerce-account .woocommerce form .form-row-wide {
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* ---------- Labels ---------- */

/*
 * Astra floats these labels: absolutely positioned at opacity 0, revealed only
 * once the field has content, with the label text mirrored into the
 * placeholder. That mirroring copies the label's full textContent — including
 * the visually-hidden "Required" span — which is where the stray
 * "Username or email address *Required" placeholder comes from. Pinning the
 * labels back into flow and hiding the placeholder text removes both problems
 * and matches the login screen, where the label sits above the field.
 */
.woocommerce-account .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox) {
	color: var(--tvp-muted) !important;
	display: block !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	left: auto !important;
	letter-spacing: 0.15em !important;
	line-height: 1.4 !important;
	margin: 0 0 7px !important;
	opacity: 1 !important;
	overflow: visible !important;
	pointer-events: auto !important;
	position: static !important;
	text-overflow: clip !important;
	top: auto !important;
	transform: none !important;
	text-transform: uppercase !important;
	visibility: visible !important;
	/*
	 * Astra's floating-label rule (woo-modern-input.css) sets white-space:nowrap
	 * so the label can ellipsis-truncate while absolutely positioned over the
	 * field. Left in place here, it doesn't just truncate — the password-change
	 * fields sit inside a bare <fieldset>, and browsers give fieldsets a default
	 * min-width: min-content that a nowrap label's full text width feeds
	 * straight into, so the fieldset (and the whole section) refused to shrink
	 * below ~460px and blew out the viewport on phones/tablets. Wrapping the
	 * label text removes that oversized min-content floor.
	 */
	white-space: normal !important;
}

/*
 * Belt-and-suspenders for the same fieldset min-content behaviour: even with
 * wrapping labels, an unstyled <fieldset> (used for the password-change
 * group) can still refuse to shrink below its content's intrinsic width.
 * min-width: 0 makes it defer entirely to the .form-row-wide/100% widths
 * already set on its children.
 */
.woocommerce-account .woocommerce form fieldset {
	min-width: 0 !important;
}

.woocommerce-account .woocommerce form .form-row .required {
	color: var(--tvp-gold) !important;
	text-decoration: none;
}

/* The label now carries the field name, so the mirrored placeholder is noise. */
.woocommerce-account .woocommerce form .form-row input::placeholder {
	color: transparent !important;
}

/* ---------- Fields ---------- */

.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"] {
	background: var(--tvp-field) !important;
	border: 1px solid var(--tvp-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--tvp-text) !important;
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px !important;
	line-height: 1.4 !important;
	min-height: 48px !important;
	padding: 12px 14px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	width: 100% !important;
}

.woocommerce-account .woocommerce form .form-row input[type="text"]:hover,
.woocommerce-account .woocommerce form .form-row input[type="email"]:hover,
.woocommerce-account .woocommerce form .form-row input[type="password"]:hover {
	border-color: #6e5a20 !important;
}

.woocommerce-account .woocommerce form .form-row input[type="text"]:focus,
.woocommerce-account .woocommerce form .form-row input[type="email"]:focus,
.woocommerce-account .woocommerce form .form-row input[type="password"]:focus {
	border-color: var(--tvp-gold) !important;
	box-shadow: 0 0 0 3px rgba( 240, 191, 40, 0.22 ) !important;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.woocommerce-account .woocommerce form .form-row input:-webkit-autofill,
.woocommerce-account .woocommerce form .form-row input:-webkit-autofill:hover,
.woocommerce-account .woocommerce form .form-row input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--tvp-field) inset !important;
	-webkit-text-fill-color: var(--tvp-text) !important;
	caret-color: var(--tvp-text);
	transition: background-color 9999s ease-out !important;
}

/* Keep WooCommerce's reveal control inside the field it belongs to. */
.woocommerce-account .woocommerce form .form-row .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce-account .woocommerce form .form-row .password-input input {
	padding-right: 52px !important;
}

/*
 * WooCommerce centres this control with the standalone `translate` property
 * (`translate: 0 -50%`) paired with `top: 50%`, not with `transform`. Setting a
 * pixel `top` keeps the -50% shift and lifts the icon clean out of the field,
 * so the pairing has to be preserved rather than overridden.
 */
.woocommerce-account .woocommerce form .show-password-input {
	align-items: center;
	color: var(--tvp-muted);
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce form .show-password-input:hover,
.woocommerce-account .woocommerce form .show-password-input.display-password {
	color: var(--tvp-gold);
}

.woocommerce-account .woocommerce form .show-password-input:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--tvp-gold);
	outline-offset: -2px;
}

/* ---------- Remember me ---------- */

/*
 * The gold box, dark tick and the removal of Astra's red overlay all live in
 * the shared site-wide checkbox rules, so this control inherits them like
 * every other checkbox on the site. Only the focus ring is added here.
 */
.woocommerce-account .woocommerce input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--tvp-gold);
	outline-offset: 2px;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	align-items: center;
	color: var(--tvp-muted);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
}

/* ---------- Submit ---------- */

.woocommerce-account .woocommerce form.login button.button,
.woocommerce-account .woocommerce form.register button.button,
.woocommerce-account .woocommerce form.lost_reset_password button.button {
	background: var(--tvp-red);
	border: 1px solid var(--tvp-red);
	border-radius: 8px;
	color: var(--tvp-text);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	min-height: 48px;
	padding: 14px 28px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.woocommerce-account .woocommerce form button.button:hover {
	background: var(--tvp-red-dark);
	border-color: var(--tvp-red-dark);
	box-shadow: 0 6px 18px rgba( 200, 16, 46, 0.32 );
	color: var(--tvp-text);
}

.woocommerce-account .woocommerce form button.button:focus-visible {
	outline: 2px solid var(--tvp-gold);
	outline-offset: 3px;
}

/* ---------- Links ---------- */

.woocommerce-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	text-align: center;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .ast-woocommerce-login-description a,
.woocommerce-account .ast-woocommerce-register-description a {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-LostPassword a:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--tvp-gold);
	outline-offset: 3px;
}

/* ---------- Small screens ---------- */

@media screen and ( max-width: 768px ) {

	.woocommerce-account .woocommerce {
		padding: 22px 18px !important;
	}
}

/* ---------- Motion preferences ---------- */

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

	.woocommerce-account .woocommerce form *,
	.woocommerce-account .woocommerce form *::before,
	.woocommerce-account .woocommerce form *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}