/* ===============================================================
   Account Sign in & Registration page (page-template-account-entry.php)
   --------------------------------------------------------------- */

.exa-account-entry {
	--ae-color-primary: #e30613;
	--ae-color-primary-dark: #c0000c;
	--ae-color-ink: #2a1714;
	--ae-color-copy: #5f5e5e;
	--ae-color-muted: #5e3f3b;
	--ae-color-outline: rgba(63, 69, 77, 0.18);
	--ae-color-outline-soft: rgba(63, 69, 77, 0.16);
	--ae-color-drawer-bg: #f8fafc;
	--ae-color-input-bg: #ffffff;
	--ae-color-divider: #d1d5db;
	--ae-color-pill-bg: #eef2f5;
	--ae-color-legal: #6b7280;
	--ae-font-regular: "Montserrat", "Montserrat-Regular", Helvetica, Arial, sans-serif;
	--ae-font-bold: "Montserrat", "Montserrat-Bold", Helvetica, Arial, sans-serif;

	display: flex;
	flex-direction: column;
	align-items: center;
	/* V84 — article sizes to its content. Removed min-height:100vh, which left
	   a large empty band beneath the legal disclaimer on the shorter sign-in
	   layout but not on the taller register layout. With content-height, the
	   trailing whitespace below the disclaimer is identical on both pages. */
	padding: 0 0 1rem;
	background: #ffffff;
	color: var(--ae-color-ink);
	font-family: var(--ae-font-regular);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.exa-account-entry * {
	box-sizing: border-box;
}

/* --------- Firefox form-control reset (NOT applied to .exa-account-entry__submit
   or .exa-account-entry__cta-secondary, so those CTAs keep their bold typography). */

.exa-account-entry input,
.exa-account-entry select,
.exa-account-entry textarea,
.exa-account-entry label {
	font: inherit;
	font-family: var(--ae-font-regular);
	color: inherit;
	letter-spacing: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Show-pill toggle font reset (specific, doesn't affect submit/cta-secondary). */
.exa-account-entry__password-toggle {
	font-family: var(--ae-font-bold);
}

/* ================================================================
   HERO BANNER — replicates the Distributors page hero treatment
   (background image, dark gradient overlay, centered title)
   ================================================================ */

.exa-account-entry__hero {
	position: relative;
	width: 100%;
	min-height: 160px;
	max-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* V77 — minimal gap between hero and form container. */
	margin-bottom: 0;
}

.exa-account-entry__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #000;
}

.exa-account-entry__hero-bg-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.exa-account-entry__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) var(--ae-hero-bleed-start, 0%),
		#000 100%
	);
	pointer-events: none;
}

.exa-account-entry__hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 2.5rem 1.5rem;
}

.exa-account-entry__hero-title {
	font-family: var(--ae-font-bold);
	font-size: clamp(2rem, 5vw, 3rem);
	color: #000000;
	margin: 0;
	line-height: 1.1;
	letter-spacing: normal;
	text-shadow: none;
	font-weight: 700;
}

/* --------- Form card --------- */

.exa-account-entry__main {
	width: min(calc(100% - 2rem), 480px);
	/* V84 — pull the login / register card up by 1 row (≈24px) so it sits
	   closer beneath the hero title. Hero title position is unchanged. */
	margin-top: -1.5rem;
}

.exa-account-entry__notices {
	margin-bottom: 1.25rem;
}

.exa-account-entry__panel {
	padding: 1.2rem 1.5rem 1.5rem;
	border: 1px solid var(--ae-color-outline);
	border-radius: 1rem;
	background: var(--ae-color-drawer-bg);
	box-shadow: 0 18px 36px rgba(63, 69, 77, 0.12);
}

.exa-account-entry__panel + .exa-account-entry__panel {
	margin-top: 1.5rem;
}

@media (max-width: 767px) {
	.exa-account-entry__panel {
		padding: 1rem 1.25rem 1.25rem;
	}
}

.exa-account-entry__panel-title {
	font-family: var(--ae-font-bold);
	font-weight: 700;
	font-size: clamp(1.5rem, 2vw, 1.7rem);
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--ae-color-ink);
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}

.exa-account-entry__lede {
	font-family: var(--ae-font-regular);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ae-color-ink);
	margin: 0 0 0.9rem;
	text-align: left;
}

.exa-account-entry__hint {
	font-family: var(--ae-font-regular);
	font-size: 0.875rem;
	color: var(--ae-color-copy);
	margin: 0 0 1.25rem;
}

/* --------- Form structure --------- */

.exa-account-entry__form {
	margin: 0;
	padding: 0;
	/* V77 update #7 — extra row of breathing room above the first field. */
	padding-top: 1rem;
}

.exa-account-entry__form > .exa-account-entry__field + .exa-account-entry__field {
	margin-top: 0.5rem;
}

.exa-account-entry__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* --------- Labels — UPPERCASE ---------------------- */

.exa-account-entry__label,
.exa-account-entry .exa-account-entry__label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-family: var(--ae-font-bold) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	line-height: 1.2 !important;
	color: var(--ae-color-ink) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
}

.exa-account-entry__required {
	color: var(--ae-color-primary) !important;
	font-weight: 700;
	text-transform: none;
}

/* --------- Inputs ---------------------- */

.exa-account-entry__input,
.exa-account-entry .exa-account-entry__input {
	width: 100% !important;
	min-height: 3.35rem !important;
	height: 3.35rem !important;
	padding: 0.9rem 1.05rem !important;
	font-family: var(--ae-font-regular) !important;
	font-size: 1.0625rem !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: var(--ae-color-ink) !important;
	background: var(--ae-color-input-bg) !important;
	border: 1px solid var(--ae-color-outline-soft) !important;
	border-radius: 0.85rem !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	letter-spacing: normal !important;
}

.exa-account-entry__input:focus,
.exa-account-entry .exa-account-entry__input:focus {
	border-color: var(--ae-color-primary) !important;
	box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.18) !important;
}

.exa-account-entry__input--password {
	padding-right: 5rem !important;
}

.exa-account-entry__password {
	position: relative;
	display: block;
	width: 100%;
	min-height: 3.35rem;
	height: 3.35rem;
}

/* --------- Show / Hide pill — explicit pixel centering -------- */

.exa-account-entry__password-toggle {
	position: absolute !important;
	/* Container is 3.35rem (53.6px) tall, button height is 1.8rem (28.8px),
	   so (3.35 - 1.8)/2 = 0.775rem top to center. */
	top: 0.775rem !important;
	bottom: auto !important;
	right: 0.75rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 1.8rem !important;
	min-width: 3.25rem !important;
	padding: 0 0.55rem !important;
	margin: 0 !important;
	font-family: var(--ae-font-bold) !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1 !important;
	color: var(--ae-color-ink) !important;
	background: var(--ae-color-pill-bg) !important;
	border: 1px solid var(--ae-color-outline-soft) !important;
	border-radius: 999px !important;
	cursor: pointer;
	text-transform: none !important;
	transform: none !important;
	transition: background 180ms ease, border-color 180ms ease;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.exa-account-entry__password-toggle:hover,
.exa-account-entry__password-toggle:focus-visible {
	border-color: rgba(63, 69, 77, 0.32) !important;
	background: #ffffff !important;
	outline: none;
}

/* --------- Remember-me / Forgot row ---------- */

.exa-account-entry__row {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	width: 100% !important;
	/* V77 update #3 — extra row of spacing under password field. */
	margin: 1rem 0 0 !important;
	padding: 0 !important;
}

.exa-account-entry__remember {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ae-font-regular) !important;
	font-size: 0.82rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	color: var(--ae-color-ink) !important;
	text-transform: none !important;
	cursor: pointer;
	white-space: nowrap;
}

.exa-account-entry__remember input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--ae-color-primary);
	vertical-align: middle;
	cursor: pointer;
}

.exa-account-entry__remember span {
	display: inline-block;
	line-height: 1.4;
}

.exa-account-entry__forgot {
	display: inline-block !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	font-family: var(--ae-font-bold) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	color: var(--ae-color-ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 0.16em;
	white-space: nowrap;
	text-transform: none;
}

.exa-account-entry__forgot:hover,
.exa-account-entry__forgot:focus-visible {
	color: var(--ae-color-primary) !important;
}

/* --------- Submit CTA — reverted typography (NOT in the reset above) --- */

.exa-account-entry__submit,
.exa-account-entry .exa-account-entry__submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	margin-top: 1.25rem !important;
	font-family: var(--ae-font-bold) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	background: var(--ae-color-primary) !important;
	border: 0 !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background 180ms ease, transform 100ms ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.exa-account-entry__submit:hover,
.exa-account-entry .exa-account-entry__submit:hover {
	background: var(--ae-color-primary-dark) !important;
}

.exa-account-entry__submit:active {
	transform: scale(0.98);
}

/* --------- Secondary CTA — reverted typography --- */

.exa-account-entry__cta-secondary,
.exa-account-entry .exa-account-entry__cta-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	font-family: var(--ae-font-bold) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--ae-color-primary) !important;
	background: transparent !important;
	border: 2px solid var(--ae-color-primary) !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background 240ms ease, color 240ms ease;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.exa-account-entry__cta-secondary:hover,
.exa-account-entry__cta-secondary:focus,
.exa-account-entry__cta-secondary:focus-visible {
	background: var(--ae-color-primary) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.exa-account-entry__divider {
	position: relative;
	display: flex;
	align-items: center;
	margin: 2rem 0;
	gap: 1rem;
}

.exa-account-entry__divider::before,
.exa-account-entry__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ae-color-divider);
}

.exa-account-entry__divider-text {
	font-family: var(--ae-font-bold);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--ae-color-copy);
	text-transform: none;
}

.exa-account-entry__cta-link {
	display: block;
	margin: 1rem auto 0;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 0;
	color: var(--ae-color-copy);
	font-family: var(--ae-font-bold);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.exa-account-entry__cta-link:hover {
	color: var(--ae-color-primary);
}

/* --------- Legal disclaimer (smaller font) --------- */

.exa-account-entry__footer {
	display: block !important;
	visibility: visible !important;
	width: 100%;
	max-width: 480px;
	margin: 1.75rem auto 0;
	padding: 0 1rem;
	background: transparent !important;
	text-align: center;
	color: var(--ae-color-legal) !important;
}

html body .exa-account-entry .exa-account-entry__footer .exa-account-entry__legal,
html body .exa-account-entry__legal,
.exa-account-entry .exa-account-entry__footer p.exa-account-entry__legal,
.exa-account-entry__legal,
.exa-account-entry__legal p,
.exa-account-entry__legal span {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-family: var(--ae-font-regular) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
	color: var(--ae-color-legal) !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0.02em !important;
}

html body .exa-account-entry .exa-account-entry__legal a,
.exa-account-entry__legal a {
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
	color: var(--ae-color-primary) !important;
	text-decoration: underline !important;
}

.exa-account-entry__legal a:hover,
.exa-account-entry__legal a:focus-visible,
.exa-account-entry__legal a:active {
	color: var(--ae-color-legal) !important;
}

.exa-account-entry .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* --------- Force /my-account/ background to solid white --------- */

body.woocommerce-account,
body.woocommerce-account #light {
	background: #ffffff !important;
}