/*!
 * Custom Asset: active
 * Priority: 2259
 * Context: frontend
 */

/*
 * WooCommerce reset password form.
 * Shared notice styling is handled by assets/css/02-auth/account-notice.css.
 */

/* =========================================================
   Reset password tokens and layout
   ========================================================= */

.account-password-page-component {
	--reset-wrapper-width: 800px;
	--reset-form-width: 640px;

	--reset-color-text: var(--site-color-dark, #333333);
	--reset-color-strong: var(--site-color-dark-strong, #333333);
	--reset-color-border: var(--site-color-border-muted, #d7d7d7);
	--reset-color-primary: var(--site-color-primary-dark, #003f52);
	--reset-color-accent: var(--site-color-accent, #e40081);
	--reset-color-accent-dark: var(--site-color-accent-dark, #9e0059);
	--reset-color-white: var(--site-color-white, #ffffff);

	--reset-input-height: 52px;
	--reset-input-radius: var(--site-radius-xs, 4px);
	--reset-card-radius: var(--site-radius-md, 12px);
	--reset-card-padding: var(--site-space-xl, 32px);
	--reset-toggle-size: 38px;
	--reset-toggle-icon-size: 20px;

	width: 100%;
	display: flex;
	justify-content: center;
}

.account-password-page-component > .e-con-inner,
.account-password-page-component .woocommerce {
	width: 100% !important;
	max-width: var(--reset-wrapper-width) !important;
	margin-inline: auto !important;
}

/*
 * Elementor/WooCommerce My Account widget can output width: 50%
 * for .woocommerce-ResetPassword. This override is scoped only
 * to our reset password component.
 */
.account-password-page-component
.elementor-widget-woocommerce-my-account
.e-my-account-tab:not(.e-my-account-tab__dashboard--custom)
.woocommerce
form.woocommerce-ResetPassword.lost_reset_password,
.account-password-page-component form.woocommerce-ResetPassword.lost_reset_password,
.account-password-page-component .woocommerce-ResetPassword {
	width: min(100%, var(--reset-form-width)) !important;
	max-width: 100% !important;
	margin-inline: auto !important;
	padding: var(--reset-card-padding);
	background: var(--reset-color-white);
	border-radius: var(--reset-card-radius);
	box-shadow: 0 18px 48px rgba(0, 74, 96, .08);
	color: var(--reset-color-text);
	font-family: var(--e-global-typography-text-font-family, var(--site-font-family, Outfit, sans-serif));
}

/* Intro text */
.account-password-page-component .woocommerce-ResetPassword > p:first-child {
	margin: 0 0 28px;
	color: var(--reset-color-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

/* =========================================================
   Fields
   ========================================================= */

.account-password-page-component .woocommerce-ResetPassword :is(.form-row, .form-row-first, .form-row-last) {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
}

.account-password-page-component .woocommerce-ResetPassword label {
	display: block;
	margin: 0 0 10px;
	color: var(--reset-color-strong);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.account-password-page-component .woocommerce-ResetPassword .required {
	color: var(--reset-color-accent);
}

.account-password-page-component .woocommerce-ResetPassword .password-input {
	position: relative;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
}

.account-password-page-component .woocommerce-ResetPassword :is(input.input-text, input.woocommerce-Input, input[type="password"], input[type="text"]) {
	width: 100% !important;
	max-width: 100% !important;
	min-height: var(--reset-input-height);
	padding: 13px 52px 13px 16px !important;
	border: 1px solid var(--reset-color-border) !important;
	border-radius: var(--reset-input-radius) !important;
	background: var(--reset-color-white) !important;
	color: var(--reset-color-text) !important;
	font-family: inherit;
	font-size: 17px !important;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .2s ease, color .2s ease;
}

.account-password-page-component .woocommerce-ResetPassword :is(input.input-text, input.woocommerce-Input)::placeholder {
	color: #9ca3af;
}

.account-password-page-component .woocommerce-ResetPassword :is(input.input-text, input.woocommerce-Input, input[type="password"], input[type="text"]):is(:hover, :focus) {
	border-color: var(--reset-color-border) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Password strength meter */
.account-password-page-component .woocommerce-ResetPassword .woocommerce-password-strength {
	margin-top: 0;
	border-radius: 0 0 var(--reset-input-radius) var(--reset-input-radius);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* =========================================================
   Password visibility toggle
   ========================================================= */

.account-password-page-component .woocommerce-ResetPassword .password-input > .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 10px !important;
	z-index: 3;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var(--reset-toggle-size) !important;
	height: var(--reset-toggle-size) !important;
	min-width: var(--reset-toggle-size) !important;
	min-height: var(--reset-toggle-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--reset-color-primary) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	transform: translateY(-50%) !important;
}

.account-password-page-component .woocommerce-ResetPassword .show-password-input:is(:hover, :focus, :focus-visible, .display-password) {
	color: var(--reset-color-primary) !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

.account-password-page-component .woocommerce-ResetPassword .show-password-input::after {
	content: none !important;
	display: none !important;
}

.account-password-page-component .woocommerce-ResetPassword .show-password-input::before {
	content: "" !important;
	display: block !important;
	width: var(--reset-toggle-icon-size);
	height: var(--reset-toggle-icon-size);
	background-color: currentColor !important;
	-webkit-mask-image: var(--reset-eye-icon);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: var(--reset-eye-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.account-password-page-component {
	--reset-eye-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 12C3.75 7.75 7.45 5 12 5C16.55 5 20.25 7.75 21.75 12C20.25 16.25 16.55 19 12 19C7.45 19 3.75 16.25 2.25 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3.25' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	--reset-eye-off-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L21 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10.58 10.58C10.22 10.94 10 11.44 10 12C10 13.1 10.9 14 12 14C12.56 14 13.06 13.78 13.42 13.42' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.88 5.25C10.56 5.09 11.27 5 12 5C16.55 5 20.25 7.75 21.75 12C21.31 13.24 20.68 14.35 19.89 15.28' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.6 6.6C4.6 7.77 3.09 9.65 2.25 12C3.75 16.25 7.45 19 12 19C13.71 19 15.3 18.61 16.66 17.92' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.account-password-page-component .woocommerce-ResetPassword .show-password-input.display-password::before {
	-webkit-mask-image: var(--reset-eye-off-icon);
	mask-image: var(--reset-eye-off-icon);
}

/* =========================================================
   Submit
   ========================================================= */

.account-password-page-component .woocommerce-ResetPassword p.form-row:last-of-type {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

.account-password-page-component .woocommerce-ResetPassword :is(button[type="submit"], .woocommerce-Button.button) {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	min-height: var(--reset-input-height);
	padding: 15px 28px !important;
	border: 1px solid var(--reset-color-accent-dark) !important;
	border-radius: var(--reset-input-radius) !important;
	background: var(--reset-color-accent-dark) !important;
	color: var(--reset-color-white) !important;
	font-family: var(--e-global-typography-accent-font-family, var(--site-font-family, Outfit, sans-serif));
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.account-password-page-component .woocommerce-ResetPassword :is(button[type="submit"], .woocommerce-Button.button):is(:hover, :focus) {
	background: var(--reset-color-accent) !important;
	border-color: var(--reset-color-accent) !important;
	color: var(--reset-color-white) !important;
}

.account-password-page-component .woocommerce-ResetPassword :is(button[type="submit"], .woocommerce-Button.button):is(:disabled, .is-loading) {
	opacity: .7;
	cursor: wait;
}

.account-password-page-component .woocommerce-ResetPassword .clear {
	display: none;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
	.account-password-page-component {
		--reset-wrapper-width: 100%;
		--reset-form-width: 100%;
		--reset-card-padding: 24px;
	}

	.account-password-page-component form.woocommerce-ResetPassword.lost_reset_password,
	.account-password-page-component .woocommerce-ResetPassword {
		border-radius: 10px;
	}

	.account-password-page-component .woocommerce-ResetPassword > p:first-child {
		margin-bottom: 24px;
		font-size: 16px;
	}

	.account-password-page-component .woocommerce-ResetPassword label,
	.account-password-page-component .woocommerce-ResetPassword :is(input.input-text, input.woocommerce-Input, button[type="submit"]) {
		font-size: 16px !important;
	}
}