/* =========================================================
   Fix the WooCommerce "show password" eye toggle.
   ---------------------------------------------------------
   Astra overrides WooCommerce's built-in SVG eye
   (.show-password-input::before) with a WooCommerce
   icon-FONT glyph (.show-password-input::after, content:"\e010").
   When that font isn't loaded the glyph renders as a "tofu"
   box - the plain/red box you were seeing. This removes
   Astra's broken glyph and draws a crisp SVG eye / eye-slash
   via mask-image (no font dependency), kept INSIDE the field
   on the right - the modern UI pattern.
   ========================================================= */

/* Force the toggle INSIDE the password field. WooCommerce/Astra layout CSS
   may not apply on this form (Astra serves its own layout CSS and can disable
   WooCommerce's), which leaves the button in normal flow (below the field).
   Pin it inside the field, on the right, vertically centered. */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	display: block !important;
	position: relative !important;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 0.7em !important;
	transform: translateY(-50%) !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.woocommerce form .password-input input[type="password"],
.woocommerce-page form .password-input input[type="password"] {
	padding-right: 2.5rem !important;
}

/* Kill Astra's broken icon-font glyph (::after). */
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after {
	content: "" !important;
	display: none !important;
}

/* Draw our own SVG eye on ::before (replaces WooCommerce's SVG too,
   for a single consistent, font-free icon). */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	content: "" !important;
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	background-image: none !important;     /* drop WooCommerce's SVG */
	background-color: #555555 !important;   /* visible icon color */
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}

/* Hidden state: eye with a slash. */
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20C5 20 1 12 1 12a18.4 18.4 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20C5 20 1 12 1 12a18.4 18.4 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Brand accent on hover. */
.woocommerce form .show-password-input:hover::before,
.woocommerce-page form .show-password-input:hover::before {
	background-color: #F6366A !important;
}

/* =========================================================
   Mobile: make the WooCommerce login / register submit
   buttons span the full width of the form (<=768px, the
   same breakpoint where the two columns stack).
   ========================================================= */
/* Make the WooCommerce login / register submit buttons full-width on ALL
   screens (desktop + mobile). */
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-page form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-page form.woocommerce-form-register .woocommerce-form-register__submit {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Mobile: center the Register section's helper / privacy texts
   (the "link to set a new password" note and the privacy policy
   text). Scoped to the register form and excluding form-field
   rows so labels/inputs stay left-aligned. */
@media (max-width: 768px) {
	.woocommerce form.woocommerce-form-register > p:not(.form-row):not(.woocommerce-form-row),
	.woocommerce form.woocommerce-form-register .woocommerce-privacy-policy-text,
	.woocommerce form.woocommerce-form-register .woocommerce-privacy-policy-text p {
		text-align: center !important;
	}
}

/* Mobile: center the Login section's "Lost your password?" link. */
@media (max-width: 768px) {
	.woocommerce form.woocommerce-form-login p.woocommerce-LostPassword,
	.woocommerce form.woocommerce-form-login p.lost_password {
		text-align: center !important;
	}
}

/* Login section: more spacing between "Remember me", the Log in button,
   and the "Lost your password?" link - on ALL screen sizes. The button is
   placed on its own line below the checkbox with a clear gap above it.
   Its width is controlled per breakpoint below (auto on desktop, full
   width on mobile) so the two never override each other. */
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
	display: block !important;
	margin-top: 16px !important;
}
.woocommerce form.woocommerce-form-login p.woocommerce-LostPassword,
.woocommerce form.woocommerce-form-login p.lost_password {
	margin-top: 20px !important;
	margin-bottom: 0px !important;
}