/*
 * My Account password fields (MyRyde)
 *
 * Restyles the password inputs inside WooCommerce My Account:
 *   - Reset password form      (form.woocommerce-ResetPassword.lost_reset_password)
 *   - Login form               (form.woocommerce-form-login)
 *   - Account details > "Password change" fieldset
 *                              (form.woocommerce-EditAccountForm fieldset)
 *
 * Load on is_account_page() AFTER the WooCommerce stylesheets.
 * Everything is scoped under body.woocommerce-account so it cannot leak to
 * other pages or forms.
 *
 * Root cause of the original breakage: dryver-dashboard-new.css (global)
 * sets `.form-row{display:flex;gap:14px}`, which turns every WooCommerce
 * field row into a flex ROW (label | input | strength meter | hint side by
 * side), on top of WooCommerce's own 47% float:left/right for
 * .form-row-first/.form-row-last. This file switches the rows back to a
 * stacked column.
 */

body.woocommerce-account {
	--mrpw-text: #1a1a1a;
	--mrpw-muted: #595959;
	--mrpw-border: #8a8a8a;
	--mrpw-border-soft: #e3e3e3;
	--mrpw-accent: #bb09f6; /* templates.css --colors--blue / --base-color-brand--blue */
	--mrpw-primary: #000;   /* My Account primary button (myryde-style.css) */
	--mrpw-error: #b00020;
	--mrpw-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Containers                                                          */
/* ------------------------------------------------------------------ */

body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password,
body.woocommerce-account form.woocommerce-form-login {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin: 0 0 24px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--mrpw-border-soft);
	border-radius: 16px;
	box-shadow: 0 0 10px 0 #e7e7e7;
	color: var(--mrpw-text);
}

body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:not(.form-row) {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mrpw-muted);
}

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

body.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	box-sizing: border-box;
	min-width: 0;
	margin: 24px 0;
	padding: 20px 20px 4px;
	background: #fff;
	border: 1px solid var(--mrpw-border-soft);
	border-radius: 14px;
}

body.woocommerce-account form.woocommerce-EditAccountForm fieldset legend {
	padding: 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mrpw-text);
}

/* ------------------------------------------------------------------ */
/* Rows: stacked, full width, label above field                        */
/* ------------------------------------------------------------------ */

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 0;
}

/*
 * WooCommerce adds a clearfix (.form-row::before/::after, display:table).
 * Inside a flex column those pseudo-elements become empty flex items and the
 * gap adds ~8px of dead space above and below every row. Remove them.
 */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row::before,
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row::after {
	display: none;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row label {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mrpw-text);
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row label .required {
	margin-left: 2px;
	font-weight: 700;
	line-height: 1;
	color: var(--mrpw-error);
	text-decoration: none;
	border: 0;
	vertical-align: baseline;
}

/* ------------------------------------------------------------------ */
/* Inputs + show/hide eye toggle                                       */
/* ------------------------------------------------------------------ */

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .password-input {
	position: relative;
	display: block;
	width: 100%;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row input.input-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 48px;
	height: auto;
	margin: 0;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS Safari zooming on focus */
	line-height: 1.4;
	color: var(--mrpw-text);
	background: #fff;
	border: 1.5px solid var(--mrpw-border);
	border-radius: var(--mrpw-radius);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* room for the eye button */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .password-input input.input-text {
	padding-right: 52px;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row input.input-text:hover {
	border-color: #4d4d4d;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .form-row input.input-text:focus-visible {
	border-color: var(--mrpw-primary);
	outline: 2px solid var(--mrpw-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(187, 9, 246, 0.22);
}

/* Hide the browser's own reveal icon (Edge) so there is only one eye */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .password-input input::-ms-reveal {
	display: none;
}

/*
 * Eye toggle: sits inside the input on the right.
 * Hit area comes from min-width/min-height + padding (not `width`) because
 * myryde-style.css forces `width:auto !important; margin:0 !important` on
 * body.logged-in.woocommerce-account button.show-password-input at <=600px.
 */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .show-password-input {
	position: absolute;
	top: 50%;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 9px;
	color: var(--mrpw-text);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.15s ease;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .show-password-input::before {
	flex: none;
	width: 22px;
	height: 22px;
	opacity: 0.8;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .show-password-input:hover::before {
	opacity: 1;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm fieldset
) .show-password-input:focus-visible {
	outline: 2px solid var(--mrpw-primary);
	outline-offset: 0;
}

/* ------------------------------------------------------------------ */
/* Strength meter + hint (injected by password-strength-meter.js)      */
/* ------------------------------------------------------------------ */

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 10px 14px 14px;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	color: #3b3b3b;
	background: #f1f1f1;
	border: 1px solid #d0d0d0;
	border-radius: var(--mrpw-radius);
}

/* progress bar along the bottom edge of the meter */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 25%;
	height: 4px;
	background: currentColor;
	border-radius: 0 4px 4px 0;
	transition: width 0.25s ease;
}

/* text colours below all >= 4.5:1 on their own background */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.short {
	color: #8a1111;
	background: #fdeaea;
	border-color: #e8a5a5;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.bad {
	color: #7a3300;
	background: #fff0e2;
	border-color: #f0b98a;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.bad::after {
	width: 50%;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.good {
	color: #5a4500;
	background: #fff7d6;
	border-color: #e6cd6a;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.good::after {
	width: 75%;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.strong {
	color: #135a1b;
	background: #e6f6e4;
	border-color: #9fd39a;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-strength.strong::after {
	width: 100%;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-EditAccountForm fieldset
) .woocommerce-password-hint {
	display: block;
	width: 100%;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mrpw-muted);
}

/* ------------------------------------------------------------------ */
/* Buttons + extras                                                    */
/* ------------------------------------------------------------------ */

/*
 * Background colour is NOT set here: myryde-style.css already gives every
 * My Account button `background-color:#000 !important` (hover #272727), which
 * is the site's primary button style. We only fix size/shape/typography.
 * (sales-agent frontend-styles.css forces button[type=submit]{width:35%}.)
 */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm
) button[type="submit"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-align: center;
	border: 0;
	border-radius: var(--mrpw-radius);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm
) button[type="submit"]:focus-visible {
	outline: 2px solid var(--mrpw-primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(187, 9, 246, 0.35);
}

/* WC meter disables Save until the password is strong enough */
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm
) button[type="submit"]:disabled,
body.woocommerce-account :is(
	form.woocommerce-ResetPassword.lost_reset_password,
	form.woocommerce-form-login,
	form.woocommerce-EditAccountForm
) button[type="submit"].disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Edit-account: keep Save aligned with the fieldset, not floating */
body.woocommerce-account form.woocommerce-EditAccountForm > p:last-of-type {
	margin: 0;
}

/* Login: remember-me + lost-password link */
body.woocommerce-account form.woocommerce-form-login .form-row label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

body.woocommerce-account form.woocommerce-form-login .form-row label.woocommerce-form-login__rememberme input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mrpw-primary);
}

body.woocommerce-account form.woocommerce-form-login .woocommerce-LostPassword {
	margin: 4px 0 0;
	font-size: 15px;
}

body.woocommerce-account form.woocommerce-form-login .woocommerce-LostPassword a {
	display: inline-block;
	padding: 8px 0;
	color: var(--mrpw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-account form.woocommerce-form-login .woocommerce-LostPassword a:focus-visible {
	outline: 2px solid var(--mrpw-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

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

@media (max-width: 600px) {
	body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password,
	body.woocommerce-account form.woocommerce-form-login {
		max-width: none;
		padding: 20px 16px;
		border-radius: 14px;
	}

	body.woocommerce-account form.woocommerce-EditAccountForm fieldset {
		padding: 16px 14px 2px;
	}

	/*
	 * !important is required here (logged-in Account details only): the
	 * sales-agent plugin's frontend-styles.css forces, for every button in
	 * body.logged-in.woocommerce-account at <=600px,
	 *   width:85% !important; margin:10px !important; margin-top:13px !important;
	 *   font-size:15px !important
	 * which leaves "Save changes" narrow, off-centre and misaligned with the
	 * fieldset. Only the Save button of the Account details form is overridden.
	 */
	body.woocommerce-account.logged-in form.woocommerce-EditAccountForm button[type="submit"] {
		width: 100% !important;
		margin: 0 !important;
		font-size: 16px !important;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password *,
	body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password *::after,
	body.woocommerce-account form.woocommerce-form-login *,
	body.woocommerce-account form.woocommerce-EditAccountForm fieldset *,
	body.woocommerce-account form.woocommerce-EditAccountForm fieldset *::after,
	body.woocommerce-account form.woocommerce-EditAccountForm button[type="submit"] {
		transition: none;
	}
}