/**
 * Log in, lost password and new password (Anthony, 16 Oct 2026; the approved mockup of 18 Oct; loaded by
 * classes/class-login-forms.php on the logged-out checkout and My Account): one login form for both, in the forms look
 * of 2.21.0 (44px boxes with #8a96a3 borders and 8px corners, a navy button in sentence case) and the checkout's
 * white cards.
 *   A. Tokens
 *   B. The checkout's "Returning customer or partner?" card and its panel
 *   C. The login form (checkout: two columns; My Account: stacked)
 *   D. Errors and the busy button
 *   E. The My Account cards: Log in, Reset your password, Check your email, Choose a new password
 *   F. "This email has an account" at the checkout's billing email (after "Buy now")
 * The header's person icon is in armd-enhancements.css (every page), "Logged in as" in armd-checkout.css.
 * The theme's style.css loads after plugin CSS on My Account and sets buttons, the login box border and the eye's
 * colour with !important, hence the !important here on what it sets.
 *
 * @package armd-enhancements
 */

/* A. Tokens: the checkout's and My Account's own values */
.armd-checkout-login,
.armd-login-card,
form.armd-login-form,
.armd-email-account {
	--l-navy: var(--wp--preset--color--accent-1, #052c53);
	--l-sky: var(--wp--preset--color--custom-light-blue, #00b2f4);
	--l-tint: color-mix(in srgb, var(--wp--preset--color--custom-blue-background, #d9edfa) 45%, #fff);
	--l-line: #e0e5eb;
	--l-field: #8a96a3;
	--l-muted: #5f6b7a;
	--l-error: #b42318;
	--l-error-tint: #fdeceb;
	--l-good: #176b30;
	--l-good-tint: #e6f4ea;
	--l-ring: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--custom-light-blue, #00b2f4) 25%, transparent);
	--l-bold: var(--wp--preset--font-family--gilroy-bold);
	--l-medium: var(--wp--preset--font-family--gilroy-medium);
	--l-regular: var(--wp--preset--font-family--gilroy-regular);
}

/* B. The checkout card: one line when closed; the login form under it when open. It sits above the two panes,
   as wide as the steps (the form can't go inside the checkout form: forms can't nest). */
.armd-checkout-login {
	box-sizing: border-box;
	margin: 0 0 16px;
	border: 1px solid var(--l-line);
	border-radius: 10px;
	background: #fff;
	color: var(--l-navy);
	font-family: var(--l-regular);
	font-size: 15px;
	line-height: 1.45;
}

/* Wide screens: the card joins the checkout's two panes, above the steps, with the summary still at the top on the
   right. The checkout form's children take part in the shortcode wrapper's grid (display: contents); only while the
   card is there and the checkout is the two-pane one (not Classic), so logged in nothing changes. */
@media (min-width: 901px) {
	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) {
		display: grid;
		grid-template-areas:
			"notes notes"
			"login summary"
			"main summary";
		grid-template-columns: minmax(0, 1fr) 400px;
		grid-template-rows: auto auto 1fr;
		column-gap: 24px;
		align-items: start;
	}

	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > *,
	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > form.armd-checkout > .woocommerce-NoticeGroup {
		grid-area: notes;
	}

	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > .armd-checkout-login {
		grid-area: login;
	}

	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > form.armd-checkout {
		display: contents;
	}

	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > form.armd-checkout > .armd-checkout__main {
		grid-area: main;
	}

	.woocommerce:has(> .armd-checkout-login):has(> form.armd-checkout) > form.armd-checkout > .armd-checkout__summary {
		grid-area: summary;
	}
}

.armd-checkout-login__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 56px;
	padding: 6px 12px 6px 24px;
}

.armd-checkout-login__ask {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--l-medium);
	font-size: 15.5px;
	line-height: 1.3;
}

.armd-checkout-login__ask svg {
	flex: none;
	color: var(--l-sky);
}

/* "Log in" / "Close": Share & Earn's small outlined button, with the summary bar's chevron. Without JavaScript it is
   a link (?login=1 opens the panel on the server); the script swaps in this button. */
.armd-checkout-login .armd-checkout-login__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--l-navy);
	border-radius: 8px;
	background: #fff;
	color: var(--l-navy) !important;
	font-family: var(--l-bold);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}

.armd-checkout-login .armd-checkout-login__toggle:hover,
.armd-checkout-login .armd-checkout-login__toggle:focus-visible {
	background: var(--l-navy);
	color: #fff !important;
}

.armd-checkout-login .armd-checkout-login__toggle:focus-visible {
	outline: 3px solid var(--l-sky);
	outline-offset: 2px;
}

.armd-checkout-login__chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.armd-checkout-login.is-open .armd-checkout-login__chevron {
	transform: translateY(2px) rotate(-135deg);
}

.armd-checkout-login.is-open .armd-checkout-login__bar {
	border-bottom: 1px solid var(--l-line);
}

.armd-checkout-login__panel {
	padding: 18px 24px 20px;
}

.armd-checkout-login__panel[hidden] {
	display: none !important;
}

/* The page's own notice row above the card (WooCommerce prints empty wrappers there) takes no room. */
.armd-two-pane-checkout .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* C. The login form. The theme frames every form.login with a grey border and paints .woocommerce form .button
   orange-on-hover, upper case; both are undone here. */
.woocommerce form.armd-login-form,
.woocommerce form.armd-login-form.login {
	box-sizing: border-box;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none;
	color: var(--l-navy);
	font-family: var(--l-regular);
	font-size: 15px;
	line-height: 1.45;
}

.woocommerce form.armd-login-form > p:empty,
.woocommerce form.armd-login-form .clear {
	display: none;
}

.armd-login-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
}

.armd-login-form--stacked .armd-login-form__fields {
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce form.armd-login-form .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce form.armd-login-form .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin: 0 0 6px !important;
	color: var(--l-navy);
	font-family: var(--l-medium);
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

.woocommerce form.armd-login-form input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px !important;
	border: 1px solid var(--l-field) !important;
	border-radius: 8px !important;
	background: #fff;
	color: var(--l-navy) !important;
	font-family: var(--l-regular);
	font-size: 15px !important;
	line-height: 42px;
	box-shadow: none;
}

.woocommerce form.armd-login-form input.input-text:focus {
	border-color: var(--l-sky) !important;
	outline: none;
	box-shadow: var(--l-ring);
}

.woocommerce form.armd-login-form input.input-text[readonly] {
	background: #f5f7fa;
}

/* WooCommerce's show/hide button (its own script adds it): a 44px square at the box's right end, navy not orange. */
.woocommerce form.armd-login-form .password-input {
	position: relative;
	display: block;
}

.woocommerce form.armd-login-form .password-input input.input-text {
	padding-right: 44px !important;
}

.woocommerce form.armd-login-form .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: transparent;
	transform: none;
	cursor: pointer;
}

.woocommerce form.armd-login-form .show-password-input::after {
	color: var(--l-navy) !important;
}

.woocommerce form.armd-login-form .show-password-input:focus-visible {
	outline: 3px solid var(--l-sky);
	outline-offset: -3px;
}

/* Remember me and Forgot your password? on one row, the button at its end (checkout) or across under it (stacked) */
.armd-login-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	margin: 14px 0 0;
}

.woocommerce form.armd-login-form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin: 0;
	color: var(--l-navy);
	font-family: var(--l-regular);
	font-size: 14.5px !important;
	font-weight: 400 !important;
	line-height: 1.3;
	cursor: pointer;
}

.woocommerce form.armd-login-form .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--l-navy);
}

.woocommerce form.armd-login-form a.armd-login-form__forgot,
.armd-login-card a.armd-login-card__link {
	color: var(--l-navy) !important;
	font-family: var(--l-medium) !important;
	font-size: 14.5px;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: rgba(5, 44, 83, 0.35);
	text-underline-offset: 3px;
}

.woocommerce form.armd-login-form a.armd-login-form__forgot:hover,
.woocommerce form.armd-login-form a.armd-login-form__forgot:focus-visible,
.armd-login-card a.armd-login-card__link:hover,
.armd-login-card a.armd-login-card__link:focus-visible {
	color: var(--l-sky) !important;
	text-decoration-color: currentColor;
}

/* The one primary button: navy, 44px, sentence case (the theme's are outlined, upper case, orange on hover) */
.woocommerce form.armd-login-form .button,
.woocommerce form.armd-login-form button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	float: none !important;
	width: auto;
	height: 44px;
	min-height: 0;
	margin: 0 0 0 auto !important;
	padding: 0 28px !important;
	border: 1px solid var(--l-navy) !important;
	border-radius: 8px !important;
	background: var(--l-navy) !important;
	color: #fff !important;
	font-family: var(--l-bold) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
	cursor: pointer;
}

.woocommerce form.armd-login-form .button:hover,
.woocommerce form.armd-login-form .button:focus-visible {
	border-color: color-mix(in srgb, var(--l-navy) 85%, #fff) !important;
	background: color-mix(in srgb, var(--l-navy) 85%, #fff) !important;
	color: #fff !important;
}

.woocommerce form.armd-login-form .button:focus-visible {
	outline: 3px solid var(--l-sky) !important;
	outline-offset: 2px;
}

.armd-login-form--stacked .armd-login-form__row {
	justify-content: space-between;
}

.woocommerce form.armd-login-form--stacked .button,
.woocommerce form.armd-login-form--stacked button[type="submit"] {
	width: 100% !important;
	margin: 18px 0 0 !important;
}

/* D. Errors at the fields: the Account login screen's red line with its icon, the boxes outlined in red */
.armd-login-form__error {
	display: flex;
	grid-column: 1 / -1;
	align-items: flex-start;
	gap: 7px;
	margin: 0 !important;
	color: var(--l-error);
	font-family: var(--l-medium);
	font-size: 14px;
	line-height: 1.4;
}

.armd-login-form__error svg {
	flex: none;
	margin-top: 1px;
}

.armd-login-form__error a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.armd-login-form__fields > .armd-login-form__error {
	margin-top: -4px !important;
}

.woocommerce form.armd-login-form .form-row > .armd-login-form__error {
	margin-top: 6px !important;
}

.woocommerce form.armd-login-form input.input-text[aria-invalid="true"] {
	border-color: var(--l-error) !important;
}

.woocommerce form.armd-login-form input.input-text[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-error) 18%, transparent);
}

/* While logging in: the button keeps its size, shows a spinner and "Logging in…", and takes no second click */
.woocommerce form.armd-login-form .button.is-busy,
.woocommerce form.armd-login-form .button:disabled,
.woocommerce form.armd-login-form .button.disabled {
	border-color: color-mix(in srgb, var(--l-navy) 80%, #fff) !important;
	background: color-mix(in srgb, var(--l-navy) 80%, #fff) !important;
	opacity: 1 !important;
	cursor: progress;
}

.woocommerce form.armd-login-form .button.is-busy::before,
.woocommerce form.armd-login-form .button:disabled::before,
.woocommerce form.armd-login-form .button.disabled::before {
	content: "";
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: armd-login-spin 0.8s linear infinite;
}

@keyframes armd-login-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce form.armd-login-form .button.is-busy::before {
		animation-duration: 2.4s;
	}
}

/* E. My Account's cards (logged out): Log in, Reset your password, Check your email, Choose a new password */
.armd-login-card {
	box-sizing: border-box;
	max-width: 480px;
	margin: 0; /* left, in line with the page's heading and text (Anthony, 19 Oct) */
	padding: 24px 28px 26px;
	border: 1px solid var(--l-line);
	border-radius: 10px;
	background: #fff;
	color: var(--l-navy);
	font-family: var(--l-regular);
	font-size: 15px;
	line-height: 1.45;
}

.woocommerce-account .woocommerce .armd-login-card .armd-login-card__title {
	margin: 0 0 16px !important;
	padding: 0 !important;
	color: var(--l-navy);
	font-family: var(--l-bold) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

.woocommerce-account .woocommerce .armd-login-card .armd-login-card__text {
	margin: -6px 0 16px !important;
	color: var(--l-muted);
	font-size: 15px;
	line-height: 1.45;
}

.armd-login-card__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--l-line);
}

.armd-login-card__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var(--l-tint);
	color: var(--l-navy);
}

.armd-login-card__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px !important;
	padding: 10px 12px;
	border-radius: 8px;
	font-family: var(--l-medium);
	font-size: 14.5px;
	line-height: 1.4;
}

.armd-login-card__note svg {
	flex: none;
	margin-top: 1px;
}

.armd-login-card__note.is-success {
	background: var(--l-good-tint);
	color: var(--l-good);
}

/* The password checklist (2.29.0) sits close under the second box */
.armd-login-card ul.armd-pw-rules {
	margin: 10px 0 0 !important;
}

/* F. "This email has an account" under the checkout's billing email: WooCommerce's own check at "Buy now", shown at
   the field (Option B, Heinrich 18 Oct 2026) */
.armd-email-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	box-sizing: border-box;
	margin: 8px 0 0;
	padding: 9px 12px;
	border: 1px solid color-mix(in srgb, var(--l-sky) 45%, #fff);
	border-radius: 8px;
	background: var(--l-tint);
	color: var(--l-navy);
	font-family: var(--l-medium);
	font-size: 14px;
	line-height: 1.4;
}

.armd-email-account svg {
	flex: none;
	color: var(--l-sky);
}

.armd-email-account__text {
	flex: 1 1 auto;
}

.armd-email-account .armd-email-account__login {
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--l-navy) !important;
	font-family: var(--l-bold);
	font-size: 14px;
	letter-spacing: 0;
	text-decoration: underline;
	text-decoration-color: rgba(5, 44, 83, 0.35);
	text-transform: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.armd-email-account .armd-email-account__login:hover,
.armd-email-account .armd-email-account__login:focus-visible {
	color: var(--l-sky) !important;
	text-decoration-color: currentColor;
}

/* Phones */
@media (max-width: 560px) {
	.armd-checkout-login__bar {
		padding: 6px 10px 6px 16px;
	}

	.armd-checkout-login__ask {
		font-size: 15px;
	}

	.armd-checkout-login__ask svg {
		display: none;
	}

	.armd-checkout-login__panel {
		padding: 16px;
	}

	.armd-login-form__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.armd-login-form__row {
		justify-content: space-between;
	}

	.woocommerce form.armd-login-form .button,
	.woocommerce form.armd-login-form button[type="submit"] {
		width: 100% !important;
		margin: 8px 0 0 !important;
	}

	.woocommerce form.armd-login-form--stacked .button,
	.woocommerce form.armd-login-form--stacked button[type="submit"] {
		margin-top: 16px !important;
	}

	.woocommerce form.armd-login-form input.input-text {
		font-size: 16px !important; /* stops iPhones zooming into a field */
	}

	.woocommerce form.armd-login-form .woocommerce-form-login__rememberme,
	.woocommerce form.armd-login-form a.armd-login-form__forgot {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.armd-login-card {
		padding: 20px 16px 22px;
	}

	.woocommerce-account .woocommerce .armd-login-card .armd-login-card__title {
		font-size: 22px !important;
	}
}