/**
 * JAUREA — AUTH V2 design system (login / register / lost-password).
 *
 * Tokens are taken from the live WoodMart theme options (xts-woodmart-options)
 * and the Elementor global kit, so the auth screens speak the same visual
 * language as the rest of the store:
 *   primary-color        rgb(17,17,17)    -> --ja-ink
 *   form_color           rgb(51,51,51)    -> --ja-ink-2
 *   btn-accented-bgcolor rgb(176,141,87)  -> --ja-btn (the official gold)
 *   btns_default_bg_hover rgb(166,124,82) -> --ja-gold-2
 *   form_brd_color_focus rgb(176,141,87)  -> --ja-gold
 *   secondary-color      rgb(184,155,114)
 *
 * Loaded only on the three auth screens (see inc/auth-v2.php).
 * The page background is a flat cream (#fbf9f6); the artwork that used to be
 * painted behind the forms was removed on request. No icon library, no
 * external font.
 */

.jaurea-auth,
#jaurea-otpr {
	--ja-ink: #111;
	--ja-ink-2: #333;
	--ja-muted: #5c574f;
	--ja-gold: #b08d57;
	--ja-gold-2: #a67c52;
	--ja-line: #e4ded4;
	--ja-line-2: #cfc6b8;
	--ja-bg: #fbf9f6;
	--ja-card: rgba(255, 255, 255, .14);
	--ja-card-2: rgba(255, 255, 255, .42);
	--ja-glass: blur(14px) saturate(120%);
	--ja-glass-brd: rgba(176, 141, 87, .25);
	--ja-glass-brd-2: rgba(176, 141, 87, .35);
	--ja-glass-wash: rgba(255, 255, 255, .3);
	--ja-btn: var(--ja-gold);
	--ja-radius: 6px;
	--ja-control: 54px;
	--ja-danger: #a4262c;
	--ja-ok: #2f6f4f;
	--ja-focus: 0 0 0 3px var(--ja-gold);
}

/* ---------- page shell ---------- */

/* Flat cream page background (--ja-bg). The decorative artwork that used to be
   painted here (attachments 2337 / 2338, delivered as --ja-art-d / --ja-art-m
   from inc/auth-v2.php) was removed on request, and those two custom properties
   are no longer printed. min-height stays so the cream still fills a short
   viewport exactly as it did before.
   The `html` prefix is deliberate: WoodMart's body:not([class*="wrapper-boxed"])
   is also (0,1,1) and lands later in the combined stylesheet, so a plain
   body.jaurea-auth-screen ties and loses on source order. */
html body.jaurea-auth-screen {
	min-height: 100vh;
	background-color: #fbf9f6;
}

/* WoodMart paints both page wrappers opaque white over the body, and
   :is(.page, ...) :is(.wd-page-content, .whb-header) even forces
   background-image: none at (0,2,0) -- so the artwork stays invisible until
   these are cleared. (0,2,1), scoped to the auth body class: the dashboard and
   the rest of the store are untouched. */
html body.jaurea-auth-screen .wd-page-wrapper,
html body.jaurea-auth-screen .wd-page-content {
	background-color: transparent;
}

body.jaurea-auth-screen .wd-prefooter,
body.jaurea-auth-screen .wd-footer,
body.jaurea-auth-screen .wd-copyrights {
	display: none;
}

body.jaurea-auth-screen .wd-content-area {
	padding-inline: 20px;
}

/* Two layers of outer padding stack on this screen: WoodMart's
   .wd-content-layout{padding-block:40px} plus this wrapper's own
   padding-block. The theme's copy is the duplicate -- cleared here only, so
   the rest of the store keeps it. */
body.jaurea-auth-screen .wd-content-layout {
	padding-block: 0;
}

/* The auth container asks for equal-height fr rows -- repeat(1,1fr), and
   repeat(2,1fr) under 768px -- while holding a single widget, so on mobile the
   container came out twice the card's height with an empty row under it. Rows
   sized to content instead: identical on desktop, no phantom row on mobile. */
body.jaurea-auth-screen .e-con.e-grid {
	--e-con-grid-template-rows: auto;
}

body.jaurea-auth-screen .wd-content-area > article,
body.jaurea-auth-screen .wd-content-area > article > .jaurea-auth {
	margin: 0 auto;
}

.jaurea-auth,
#jaurea-otpr {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	padding-block: clamp(20px, 3vw, 28px) clamp(24px, 3.5vw, 36px);
	color: var(--ja-ink-2);
	text-align: start;
}

.jaurea-auth *,
.jaurea-auth *::before,
.jaurea-auth *::after,
#jaurea-otpr *,
#jaurea-otpr *::before,
#jaurea-otpr *::after {
	box-sizing: border-box;
}

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

/* Frosted glass, measured against the live artwork rather than guessed: at
   .14 white the surface lands 2-3/255 from the raw backdrop, so the card
   wears the artwork's own tone, while blur(14px) removes ~97% of its fine
   detail and keeps ~60-73% of its broad tonal range. The gold hairline and
   the wide soft shadow are what make it read as a pane of glass. */
.jaurea-auth-card,
#jaurea-otpr {
	background: var(--ja-card);
	-webkit-backdrop-filter: var(--ja-glass);
	backdrop-filter: var(--ja-glass);
	border: 1px solid var(--ja-glass-brd);
	border-radius: var(--ja-radius);
	box-shadow: 0 12px 40px rgba(17, 17, 17, .08);
}

.jaurea-auth-card {
	padding: clamp(22px, 5vw, 36px);
}

#jaurea-otpr {
	padding: clamp(22px, 5vw, 36px);
	margin-block: clamp(24px, 5vw, 56px) clamp(36px, 7vw, 80px);
}

/* ---------- headings ---------- */

.jaurea-auth-title,
#jaurea-otpr .jaurea-auth-title {
	margin: 0 0 6px;
	font-size: clamp(22px, 4.6vw, 27px);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ja-ink);
}

.jaurea-auth-sub,
.jaurea-otpr-intro {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ja-muted);
}

.jaurea-auth-rule {
	height: 2px;
	width: 42px;
	margin: 0 0 20px;
	background: var(--ja-gold);
	border: 0;
	border-radius: 2px;
}

/* ---------- fields ---------- */

.jaurea-auth-field,
.jaurea-otpr-field {
	margin-bottom: 18px;
}

.jaurea-auth-label,
.jaurea-otpr-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ja-ink);
}

.jaurea-auth-opt {
	font-weight: 400;
	color: var(--ja-muted);
}

.jaurea-auth .jaurea-auth-input,
#jaurea-otpr .jaurea-otpr-input {
	display: block;
	width: 100%;
	height: var(--ja-control);
	min-height: var(--ja-control);
	padding: 0 16px;
	margin: 0;
	font: inherit;
	font-size: 15px;
	line-height: normal;
	color: var(--ja-ink);
	background: var(--ja-card-2);
	border: 1px solid var(--ja-glass-brd-2);
	border-radius: var(--ja-radius);
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.jaurea-auth .jaurea-auth-input::placeholder,
#jaurea-otpr .jaurea-otpr-input::placeholder {
	color: #877e73;
	opacity: 1;
}

.jaurea-auth .jaurea-auth-input:hover,
#jaurea-otpr .jaurea-otpr-input:hover {
	border-color: rgba(176, 141, 87, .6);
}

.jaurea-auth .jaurea-auth-input:focus,
.jaurea-auth .jaurea-auth-input:focus-visible,
#jaurea-otpr .jaurea-otpr-input:focus,
#jaurea-otpr .jaurea-otpr-input:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--ja-gold);
	box-shadow: var(--ja-focus);
}

.jaurea-auth .jaurea-auth-input[aria-invalid="true"] {
	border-color: var(--ja-danger);
}

.jaurea-auth-hint,
.jaurea-otpr-hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ja-muted);
}

/* latin-only values stay LTR even on an RTL page */
.jaurea-auth .jaurea-auth-input[dir="ltr"],
#jaurea-otpr .jaurea-otpr-input[dir="ltr"] {
	text-align: start;
}

/* ---------- password + single visibility control ---------- */

.jaurea-auth-pass {
	position: relative;
	/* block, not inline: an inline containing block takes its geometry from
	   the first/last line boxes, so a trailing text node pushed the eye
	   outside the field on the register form. */
	display: block;
}

.jaurea-auth-pass .jaurea-auth-input {
	padding-inline-end: 52px;
}

/* WooCommerce core injects a SECOND, empty toggle into this wrapper at
   runtime. woocommerce.js runs
     $('.woocommerce form input').filter(':password').parent('span')
       .addClass('password-input')
   and then appends <button type="button" class="show-password-input"> to
   every .password-input. Our field is a <span class="jaurea-auth-pass">
   wrapping the password input inside div.woocommerce > form, so it matches.
   WoodMart does not load WooCommerce's stylesheet, so nothing at all styles
   .show-password-input and it falls through to the theme's global button
   preset :is(.btn,.button,button,[type=submit],[type=button]) (0,1,0):
   background-color: var(--btn-bgcolor) = rgb(17,17,17), padding 5px 20px,
   min-height 42px. That is the black rectangle -- an empty ~40x42 button in
   normal flow inside the field wrapper, which also grew the wrapper and so
   pushed our own eye below the input.
   JAUREA already ships its own accessible toggle (.jaurea-auth-eye), so the
   duplicate is removed. (0,3,0) beats the preset's display:inline-flex with
   no !important needed, and display:none also takes it out of the tab order
   and the accessibility tree, so WooCommerce's handler can never fire on it.
   Component-level, so it covers every password field: login, register and
   confirm-password. */
.jaurea-auth .jaurea-auth-pass > .show-password-input {
	display: none;
}

.jaurea-auth .jaurea-auth-eye {
	position: absolute;
	inset-inline-end: 4px;
	/* anchored to the wrapper's TOP edge, which is the input's top edge: the
	   input is the only in-flow box in .jaurea-auth-pass (display:block,
	   height:var(--ja-control)). `bottom: 0` anchored to the wrapper's bottom
	   instead, so anything appended after the input -- see the
	   .show-password-input rule above -- dragged the eye out of the field. A
	   trailing sibling cannot move a top-anchored control. */
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: var(--ja-control);
	padding: 0;
	margin: 0;
	color: var(--ja-muted);
	background: none;
	border: 0;
	border-radius: var(--ja-radius);
	cursor: pointer;
	transition: color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
	/* the theme's global button preset reaches this control too: min-height
	   42px, box-shadow and the mobile tap highlight all need clearing. */
	min-height: 0;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

/* WoodMart's :is(.btn,.button,button,[type=submit],[type=button]):hover is
   (0,2,0) and lands ~83KB after this file in the combined stylesheet, so it
   beat `background:none` on the rule above and filled the icon with
   --btn-bgcolor-hover: a solid chip that reads as a pressed button. (0,3,0)
   here wins on specificity, whatever the source order ends up being. */
.jaurea-auth .jaurea-auth-eye:hover,
.jaurea-auth .jaurea-auth-eye:active,
.jaurea-auth .jaurea-auth-eye:focus,
.jaurea-auth .jaurea-auth-eye:focus-visible,
.jaurea-auth .jaurea-auth-eye[aria-pressed="true"] {
	background: none;
	border-color: transparent;
	box-shadow: none;
}

.jaurea-auth .jaurea-auth-eye:hover,
.jaurea-auth .jaurea-auth-eye:focus-visible {
	color: var(--ja-gold);
}

/* The theme's global focus ring is `outline:2px dotted #000 !important` with a
   negative offset, i.e. a black box drawn inside this 46x54 control; matching
   !important is the only way past it. The gold ring stays as the indicator. */
.jaurea-auth .jaurea-auth-eye:focus-visible {
	outline: 2px solid transparent !important;
	outline-offset: 0 !important;
	box-shadow: var(--ja-focus);
}

.jaurea-auth .jaurea-auth-eye svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Closed (crossed) eye while the password is masked, open eye once it is
   revealed. aria-pressed="true" means the password is showing. */
.jaurea-auth .jaurea-auth-eye[aria-pressed="false"] .jaurea-eye-on,
.jaurea-auth .jaurea-auth-eye[aria-pressed="true"] .jaurea-eye-off {
	display: none;
}

/* ---------- primary / secondary buttons ---------- */

.jaurea-auth .jaurea-auth-btn,
#jaurea-otpr .jaurea-otpr-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--ja-control);
	min-height: var(--ja-control);
	padding: 0 22px;
	margin: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	color: #fff;
	background: var(--ja-btn);
	border: 1px solid var(--ja-btn);
	border-radius: var(--ja-radius);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.jaurea-auth .jaurea-auth-btn:hover,
.jaurea-auth .jaurea-auth-btn:focus-visible,
#jaurea-otpr .jaurea-otpr-btn:hover,
#jaurea-otpr .jaurea-otpr-btn:focus-visible {
	color: #fff;
	background: var(--ja-gold-2);
	border-color: var(--ja-gold-2);
}

/* A gold glow is invisible on a gold button, so the primary CTA gets a
   white/gold double ring instead: legible on the button, on the white card
   and on the artwork. */
.jaurea-auth .jaurea-auth-btn:focus-visible,
#jaurea-otpr .jaurea-otpr-btn:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ja-gold-2);
}

.jaurea-auth .jaurea-auth-btn[disabled],
#jaurea-otpr .jaurea-otpr-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.jaurea-auth .jaurea-auth-btn--ghost {
	color: var(--ja-ink);
	background: transparent;
	border-color: var(--ja-line-2);
}

.jaurea-auth .jaurea-auth-btn--ghost:hover,
.jaurea-auth .jaurea-auth-btn--ghost:focus-visible {
	color: var(--ja-ink);
	background: var(--ja-glass-wash);
	border-color: var(--ja-gold);
}

.jaurea-auth-actions,
.jaurea-otpr-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

/* text links */

.jaurea-auth a,
#jaurea-otpr a,
.jaurea-auth .jaurea-auth-btn--link,
#jaurea-otpr .jaurea-otpr-btn--link {
	color: var(--ja-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(176, 141, 87, .5);
	transition: color .18s ease, border-color .18s ease;
}

.jaurea-auth a:hover,
#jaurea-otpr a:hover,
.jaurea-auth .jaurea-auth-btn--link:hover,
#jaurea-otpr .jaurea-otpr-btn--link:hover {
	color: var(--ja-gold-2);
	border-color: var(--ja-gold-2);
}

.jaurea-auth a:focus-visible,
#jaurea-otpr a:focus-visible,
.jaurea-auth .jaurea-auth-btn--link:focus-visible,
#jaurea-otpr .jaurea-otpr-btn--link:focus-visible {
	outline: 2px solid transparent;
	border-radius: 2px;
	box-shadow: var(--ja-focus);
}

.jaurea-auth .jaurea-auth-btn--link,
#jaurea-otpr .jaurea-otpr-btn--link {
	align-self: center;
	min-height: 44px;
	padding: 10px 6px;
	font: inherit;
	font-size: 14px;
	background: none;
	border-width: 0 0 1px;
	border-style: solid;
	cursor: pointer;
}

.jaurea-auth .jaurea-auth-btn--link[disabled],
#jaurea-otpr .jaurea-otpr-btn--link[disabled] {
	color: var(--ja-muted);
	border-color: transparent;
	cursor: not-allowed;
}

/* ---------- inline rows ---------- */

.jaurea-auth-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: -2px;
	font-size: 14px;
}

.jaurea-auth-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	font-size: 14px;
	color: var(--ja-ink-2);
	cursor: pointer;
}

.jaurea-auth-remember input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ja-gold);
}

.jaurea-auth-remember input:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--ja-focus);
}

.jaurea-auth-forgot {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
}

.jaurea-auth-foot {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ja-line);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	color: var(--ja-muted);
}

.jaurea-auth-foot a {
	font-weight: 600;
}

/* ---------- divider + social ---------- */

.jaurea-auth-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 18px;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--ja-muted);
}

.jaurea-auth-divider::before,
.jaurea-auth-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ja-line);
}

.jaurea-auth-social {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jaurea-auth .login-goo-link,
.jaurea-auth .jaurea-auth-goo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: var(--ja-control);
	min-height: var(--ja-control);
	padding: 0 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ja-ink);
	background: var(--ja-card-2);
	border: 1px solid var(--ja-glass-brd-2);
	border-radius: var(--ja-radius);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.jaurea-auth .login-goo-link:hover,
.jaurea-auth .login-goo-link:focus-visible {
	color: var(--ja-ink);
	background: var(--ja-glass-wash);
	border-color: var(--ja-gold);
}

.jaurea-auth .login-goo-link:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--ja-focus);
}

.jaurea-auth-goo-mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: block;
}

/* ---------- notices ---------- */

.jaurea-auth .woocommerce-error,
.jaurea-auth .woocommerce-message,
.jaurea-auth .woocommerce-info,
.jaurea-auth-note {
	margin: 0 0 18px;
	padding: 13px 16px;
	font-size: 13.5px;
	line-height: 1.7;
	list-style: none;
	border: 1px solid var(--ja-line);
	border-inline-start: 3px solid var(--ja-gold);
	border-radius: var(--ja-radius);
	background: #faf7f2;
	color: var(--ja-ink-2);
}

.jaurea-auth .woocommerce-error {
	border-inline-start-color: var(--ja-danger);
	background: #fdf5f5;
}

.jaurea-auth .woocommerce-message {
	border-inline-start-color: var(--ja-ok);
	background: #f3f8f4;
}

.jaurea-auth .woocommerce-error li,
.jaurea-auth .woocommerce-message li,
.jaurea-auth .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jaurea-auth .woocommerce-error a,
.jaurea-auth .woocommerce-message a {
	font-weight: 600;
}

/* ---------- OTP code + channel choice ---------- */

.jaurea-auth .jaurea-auth-code,
#jaurea-otpr .jaurea-otpr-input--code {
	max-width: 220px;
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .38em;
	text-align: center;
	text-indent: .38em;
}

.jaurea-auth-choice {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

.jaurea-auth-choice legend {
	padding: 0;
	margin-bottom: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ja-ink);
}

.jaurea-auth-choice label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--ja-control);
	padding: 12px 16px;
	font-size: 14.5px;
	color: var(--ja-ink);
	background: var(--ja-card-2);
	border: 1px solid var(--ja-glass-brd-2);
	border-radius: var(--ja-radius);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.jaurea-auth-choice label:hover {
	border-color: var(--ja-gold);
	background: var(--ja-glass-wash);
}

.jaurea-auth-choice input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ja-gold);
}

.jaurea-auth-choice input:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--ja-focus);
}

.jaurea-auth-choice-dest {
	margin-inline-start: auto;
	font-size: 13px;
	color: var(--ja-muted);
}

/* ---------- status line (lost password module) ---------- */

.jaurea-otpr-status {
	display: none;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 13px 16px;
	font-size: 13.5px;
	line-height: 1.7;
	border: 1px solid var(--ja-line);
	border-inline-start: 3px solid var(--ja-gold);
	border-radius: var(--ja-radius);
	background: #faf7f2;
}

.jaurea-otpr-status.is-visible {
	display: flex;
}

/* `--error` / `--ok` are the class names assets/js/otp-reset.js writes (AUTH-005);
   `is-error` / `is-ok` keep the same vocabulary as the rest of this file. */
.jaurea-otpr-status.is-error,
.jaurea-otpr-status.jaurea-otpr-status--error {
	border-inline-start-color: var(--ja-danger);
	background: #fdf5f5;
}

.jaurea-otpr-status.is-ok,
.jaurea-otpr-status.jaurea-otpr-status--ok {
	border-inline-start-color: var(--ja-ok);
	background: #f3f8f4;
}

/* the colour band and the message carry the state — no icon glyph in the UI */
.jaurea-otpr-status-icon {
	display: none;
}

.jaurea-otpr-step[hidden] {
	display: none !important;
}

/* ---------- accessible helpers ---------- */

.jaurea-auth-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 480px) {
	.jaurea-auth,
	#jaurea-otpr {
		max-width: 100%;
	}

	.jaurea-auth-card,
	#jaurea-otpr {
		padding: 20px 18px;
		border-radius: var(--ja-radius);
	}

	.jaurea-auth-row {
		justify-content: flex-start;
	}
}

@media (min-width: 1440px) {
	.jaurea-auth,
	#jaurea-otpr {
		max-width: 500px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jaurea-auth *,
	#jaurea-otpr * {
		animation: none !important;
		transition: none !important;
	}
}

@media (prefers-contrast: more) {
	/* the frost is decoration, the form is not */
	.jaurea-auth-card,
	#jaurea-otpr {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.jaurea-auth .jaurea-auth-input,
	#jaurea-otpr .jaurea-otpr-input,
	.jaurea-auth .login-goo-link,
	.jaurea-auth-choice label {
		background: #fff;
		border-color: #000;
	}

	.jaurea-auth-hint,
	.jaurea-otpr-hint,
	.jaurea-auth-sub,
	.jaurea-otpr-intro,
	.jaurea-auth-foot {
		color: var(--ja-ink-2);
	}
}

/* Without backdrop-filter (a few in-app webviews) a .14 card would leave the
   form sitting on the artwork, so the wash gets dense enough to read on. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.jaurea-auth-card,
	#jaurea-otpr {
		background: rgba(255, 255, 255, .78);
	}

	.jaurea-auth .jaurea-auth-input,
	#jaurea-otpr .jaurea-otpr-input,
	.jaurea-auth .login-goo-link,
	.jaurea-auth-choice label {
		background: rgba(255, 255, 255, .92);
	}
}
/* ============================================================================
   DARK THEME -- auth screens (login / register / lost password / OTP reset)
   ----------------------------------------------------------------------------
   WHY THIS BLOCK LIVES HERE
   auth-v2.css is enqueued with array( 'child-style' ) from inc/auth-v2.php and
   is printed AFTER theme-toggle.css in <head>. Its page-shell rule

       html body.jaurea-auth-screen { background-color: #fbf9f6 }   -> (0,1,2)

   therefore TIED with theme-toggle.css's

       html[data-jaurea-theme="dark"] body { background-color: ... } -> (0,1,2)

   and won on source order. That is why every other screen went near-black in
   dark mode while /my-account/ stayed cream: the cream came from a selector
   WoodMart itself never touches, so the --wd-main-bgcolor fix in
   theme-toggle.css could not reach it.

   Every selector below carries ONE EXTRA CLASS on <body> -- (0,2,2) -- so it
   beats the shell rule outright and source order stops mattering. The id
   variant ( #jaurea-otpr is (1,0,0) ) is matched with (1,1,1).

   PALETTE: the same warm JAUREA set used by theme-toggle.css --
   canvas #0b0a09 / ink #f4efe8 / champagne gold #b08d57. No blue anywhere.
   The gold tokens are deliberately NOT re-declared: the brand accent has to
   stay byte-identical between themes.
   Light mode is untouched by this block -- nothing here applies unless
   <html data-jaurea-theme="dark"> is present.
   ============================================================================ */

/* ---------- 1. page canvas ---------- */

/* The <body> is the only painter left on these screens: this file already
   clears .wd-page-wrapper / .wd-page-content to transparent, and the
   prefooter, footer and copyrights are display:none. So this is the canvas. */
html[data-jaurea-theme="dark"] body.jaurea-auth-screen {
	min-height: 100vh;
	background-color: var(--wd-main-bgcolor, #0b0a09);
}

/* ---------- 2. token layer ---------- */

html[data-jaurea-theme="dark"] .jaurea-auth,
html[data-jaurea-theme="dark"] #jaurea-otpr {
	--ja-ink: #f4efe8;
	--ja-ink-2: #cfc7bc;
	--ja-muted: #9d948a;
	--ja-line: rgba(255, 255, 255, .12);
	--ja-line-2: rgba(255, 255, 255, .22);
	--ja-bg: #0b0a09;
	--ja-card: rgba(255, 255, 255, .045);
	--ja-card-2: rgba(255, 255, 255, .07);
	--ja-glass-brd: rgba(176, 141, 87, .32);
	--ja-glass-brd-2: rgba(176, 141, 87, .4);
	--ja-glass-wash: rgba(255, 255, 255, .08);
	--ja-danger: #e07a80;
	--ja-ok: #6cc08b;
}

/* The light-mode shadow is a soft dark smudge -- correct on cream, invisible
   on near-black. Swapped for real depth plus a hairline inner light, so the
   pane still reads as glass on a black canvas. */
html[data-jaurea-theme="dark"] .jaurea-auth-card,
html[data-jaurea-theme="dark"] #jaurea-otpr {
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55),
		inset 0 0 0 1px rgba(255, 255, 255, .035);
}

/* ---------- 3. fields ---------- */

html[data-jaurea-theme="dark"] .jaurea-auth .jaurea-auth-input::placeholder,
html[data-jaurea-theme="dark"] #jaurea-otpr .jaurea-otpr-input::placeholder {
	color: #8d8479;
}

/* ---------- 4. notices + status ---------- */

html[data-jaurea-theme="dark"] .jaurea-auth .woocommerce-info,
html[data-jaurea-theme="dark"] .jaurea-auth-note,
html[data-jaurea-theme="dark"] .jaurea-otpr-status {
	background: #171512;
}

html[data-jaurea-theme="dark"] .jaurea-auth .woocommerce-error,
html[data-jaurea-theme="dark"] .jaurea-otpr-status.is-error,
html[data-jaurea-theme="dark"] .jaurea-otpr-status.jaurea-otpr-status--error {
	background: #2a1618;
}

html[data-jaurea-theme="dark"] .jaurea-auth .woocommerce-message,
html[data-jaurea-theme="dark"] .jaurea-otpr-status.is-ok,
html[data-jaurea-theme="dark"] .jaurea-otpr-status.jaurea-otpr-status--ok {
	background: #152018;
}

/* ---------- 5. no-backdrop-filter fallback (dark) ---------- */

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	html[data-jaurea-theme="dark"] .jaurea-auth-card,
	html[data-jaurea-theme="dark"] #jaurea-otpr {
		background: rgba(23, 21, 18, .92);
	}

	html[data-jaurea-theme="dark"] .jaurea-auth .jaurea-auth-input,
	html[data-jaurea-theme="dark"] #jaurea-otpr .jaurea-otpr-input,
	html[data-jaurea-theme="dark"] .jaurea-auth .login-goo-link,
	html[data-jaurea-theme="dark"] .jaurea-auth-choice label {
		background: rgba(255, 255, 255, .09);
	}
}

/* ---------- 6. prefers-contrast: more + dark ---------- */

/* The base file answers this preference with #fff surfaces, which would put a
   white card straight back onto a black page. Dark gets its own answer: pure
   black canvas, pure cream ink, full-strength borders. */
@media (prefers-contrast: more) {
	html[data-jaurea-theme="dark"] body.jaurea-auth-screen {
		background-color: #000;
	}

	html[data-jaurea-theme="dark"] .jaurea-auth-card,
	html[data-jaurea-theme="dark"] #jaurea-otpr {
		background: #0b0a09;
		border-color: #f4efe8;
	}

	html[data-jaurea-theme="dark"] .jaurea-auth .jaurea-auth-input,
	html[data-jaurea-theme="dark"] #jaurea-otpr .jaurea-otpr-input,
	html[data-jaurea-theme="dark"] .jaurea-auth .login-goo-link,
	html[data-jaurea-theme="dark"] .jaurea-auth-choice label {
		background: #0b0a09;
		border-color: #f4efe8;
	}
}