/**
 * Luxe Auth — Frontend (Login page) Stylesheet
 *
 * NOTE: The login / register / verify-email UI is rendered inside a
 * Shadow DOM by auth-shadow.js / verify-shadow.js / lostpass-shadow.js.
 * All visual styles for those screens live inside buildCSS() in each
 * respective JS file and are fully isolated from the host theme.
 *
 * This file intentionally contains only the minimal host-page rules
 * needed to position the Shadow DOM host element and hide WooCommerce's
 * native login/register forms (which our Shadow DOM replaces).
 *
 * My Account (post-login) styles live in myaccount.css, which is
 * enqueued separately by Luxe_Auth_MyAccount::enqueue_assets() and
 * scoped to body.luxe-account.
 *
 * @package LuxeAuth
 * @since   1.0.0  Initial release
 */

/* ==========================================================================
   Host page — centre the Shadow DOM root elements
   ========================================================================== */

/* The Shadow DOM mounts onto these host elements injected by the
   plugin's templates:
     #luxe-auth-form-root      — login / register   (auth-shadow.js)
     #luxe-auth-root           — verify-your-email  (verify-shadow.js)
     #luxe-auth-lostpass-root  — lost / reset password (lostpass-shadow.js)
   Centre them and give them a sensible max-width so they don't stretch
   on wide screens. */
#luxe-auth-form-root,
#luxe-auth-root,
#luxe-auth-lostpass-root {
	display: block;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

/* ==========================================================================
   Shadow DOM hosts — focus outline reset
   ----------------------------------------------------------------------------
   Some browsers (notably Chromium-based Edge and WebKit/Safari) paint a
   default focus ring on the Shadow DOM host element whenever focus moves
   into the shadow tree. Because Shadow DOM stylesheets cannot reliably
   influence the host's outer chrome across all browsers, this reset must
   live in the light-DOM stylesheet.

   The compound `#id:pseudo` selectors below carry (0,1,1,0) specificity,
   which outranks the generic `*:focus` and `:focus` rules that ship with
   most WordPress themes — so `!important` is intentionally avoided. Theme
   authors who wish to customise the focus appearance of these hosts can
   simply use a more specific selector.
   ========================================================================== */
#luxe-auth-form-root,
#luxe-auth-form-root:focus,
#luxe-auth-form-root:focus-within,
#luxe-auth-form-root:focus-visible,
#luxe-auth-root,
#luxe-auth-root:focus,
#luxe-auth-root:focus-within,
#luxe-auth-root:focus-visible,
#luxe-auth-lostpass-root,
#luxe-auth-lostpass-root:focus,
#luxe-auth-lostpass-root:focus-within,
#luxe-auth-lostpass-root:focus-visible {
	outline: none;
	outline-offset: 0;
	border: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Set Password Form — Light DOM (boutique restoration)
   ----------------------------------------------------------------------------
   The Set Password form is rendered as plain WooCommerce HTML (not Shadow
   DOM) because it lives inside WC's `myaccount/form-lost-password.php`
   pipeline which is harder to wrap. We style it here in light DOM with
   selectors scoped to .wc-form-set-password to avoid leaking onto other
   WC forms. The eye-toggle is injected by frontend.js's password-toggle
   helper (which only runs when this form is present).
   ========================================================================== */

/* --- Global tap / highlight reset inside the form --- */
.wc-form-set-password,
.wc-form-set-password * {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}

.wc-form-set-password {
	max-width: 360px;
	margin: 0 auto;
	font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
}
.wc-form-set-password label {
	font-size: 14px;
	color: #3C3F4A;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
	display: block;
}

/* --- Inputs (Luxe v1.0: radius 2px, text-primary #3C3F4A) --- */
.wc-form-set-password input[type="password"],
.wc-form-set-password input[type="text"] {
	width: 100%;
	padding: 14px 40px 14px 14px;
	border: 1px solid #E8E0D4;
	border-radius: 2px;
	background: #ffffff;
	font-size: 15px;
	font-family: inherit;
	color: #3C3F4A;
	transition: border-color 0.25s ease;
	/* Suppress Safari's own input chrome (prevents rounded corners, inner shadow) */
	-webkit-appearance: none;
	appearance: none;
	/* Prevent Safari blue focus glow */
	outline: none;
	outline-offset: 0;
	box-shadow: none;
}
.wc-form-set-password input[type="password"]:focus,
.wc-form-set-password input[type="text"]:focus {
	outline: none;
	outline-offset: 0;
	box-shadow: none;
	border-color: #A19474;
}
.wc-form-set-password input[type="password"]:focus-visible,
.wc-form-set-password input[type="text"]:focus-visible {
	outline: none;
	outline-offset: 0;
	box-shadow: none;
}

/* --- Submit button (Luxe v1.0 — radius 6px, sans Inter, 12px / 500 / 0.16em) --- */
.wc-form-set-password .button {
	width: 100%;
	margin-top: 26px;
	background: #A19474 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 14px 26px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	font-family: 'Inter', 'Noto Sans TC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
	/* Safari: strip default button chrome */
	-webkit-appearance: none;
	appearance: none;
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
.wc-form-set-password .button:hover {
	background: #7F6F5A !important;
}
/* Safari / Firefox focus ring on the button — must be explicit */
.wc-form-set-password .button:focus,
.wc-form-set-password .button:focus-visible,
.wc-form-set-password button[type="submit"]:focus,
.wc-form-set-password button[type="submit"]:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/* --- Eye-toggle wrapper --- */
.wc-form-set-password .password-wrap {
	position: relative;
}
.wc-form-set-password .toggle-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	width: 20px;
	height: 20px;
	color: #A19474;
	opacity: 0.85;
	transition: opacity 0.25s ease;
	user-select: none;
	/* Safari: no focus ring on the clickable span */
	outline: none;
}
.wc-form-set-password .toggle-eye:focus,
.wc-form-set-password .toggle-eye:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.wc-form-set-password .toggle-eye:hover {
	opacity: 1;
}
.wc-form-set-password .toggle-eye svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: #A19474;
}

/* ==========================================================================
   Safari / WebKit — password autofill icons (黑 KEY 等)
   ----------------------------------------------------------------------------
   IMPORTANT: Each vendor pseudo-element MUST live in its OWN rule block.
   Safari drops an ENTIRE rule block if it contains even one unrecognised
   selector — grouping them together means NONE of the rules apply.
   (This is the root cause of the "black key" appearing in Safari.)
   ========================================================================== */

/* 1. Credentials autofill button (key icon on password fields) */
.wc-form-set-password input::-webkit-credentials-auto-fill-button {
	visibility: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	right: 0 !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* 2. Strong password suggestion button */
.wc-form-set-password input::-webkit-strong-password-auto-fill-button {
	visibility: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	right: 0 !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* 3. Contacts autofill button */
.wc-form-set-password input::-webkit-contacts-auto-fill-button {
	visibility: hidden !important;
	pointer-events: none !important;
	position: absolute !important;
	right: 0 !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* 4. Caps-lock indicator */
.wc-form-set-password input::-webkit-caps-lock-indicator {
	visibility: hidden !important;
	display: none !important;
}

/* 5. IE/Edge reveal button */
.wc-form-set-password input[type="password"]::-ms-reveal {
	display: none !important;
}

/* 6. IE/Edge clear button */
.wc-form-set-password input[type="password"]::-ms-clear {
	display: none !important;
}

/* 7. Legacy webkit reveal (some older WebKit builds) */
.wc-form-set-password input[type="password"]::-webkit-reveal {
	display: none !important;
}

/* Hide WooCommerce's default "show password" button (we use our own .toggle-eye) */
.wc-form-set-password .show-password-input,
.wc-form-set-password button.show-password-input {
	display: none !important;
}

/* Defensive: hide ANY theme- or plugin-injected non-submit button inside the
   form rows (commonly used to inject "show password" toggles with custom
   class names that our specific selectors above can't catch). */
.wc-form-set-password .woocommerce-form-row button:not([type="submit"]),
.wc-form-set-password .form-row button:not([type="submit"]),
.wc-form-set-password p button:not([type="submit"]) {
	display: none !important;
}

/* Defensive: hide ALL SVGs inside the form by default, then explicitly
   re-enable our own .toggle-eye SVG. Stops theme/plugin-injected eye
   icons (often using Lucide / Heroicons) from rendering at full default
   size next to the password fields. */
.wc-form-set-password svg {
	display: none !important;
}
.wc-form-set-password .toggle-eye svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	stroke: #A19474 !important;
}

/* ============================================================
   Luxe Auth — Boutique Notice
   --------------------------------------------------------------
   Light-DOM fallback for WC notices rendered OUTSIDE the auth
   page (Cart, Checkout, lost-password URL params, etc.). On the
   login/register page itself, notices are rendered inside the
   Shadow DOM by auth-shadow.js with field-level placement.

   Colour and radius tokens mirror Luxe Design v1.0:
     error   #D9676F   sage  #8A9A7B   gold  #A19474
     panel radius 8px  border hairline rgba on Luxe Border
   ============================================================ */
.luxe-auth-notice {
	max-width: 460px;
	margin: 0 auto 24px;
	padding: 14px 22px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 252, 247, 0.96);
	border: 1px solid rgba(161, 148, 116, 0.30);
	border-radius: 8px;
	box-shadow:
		0 1px 3px rgba(60, 63, 74, 0.04),
		0 4px 12px rgba(60, 63, 74, 0.06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: #5A554D;
	box-sizing: border-box;
	/* Lift above the body::before overlay used by Editorial Hero. */
	position: relative;
	z-index: 2;
}

.luxe-auth-notice__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #A19474; /* gold default */
}

.luxe-auth-notice__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.luxe-auth-notice__text {
	flex: 1;
	min-width: 0;
}

.luxe-auth-notice__text strong {
	color: #3C3F4A;
	font-weight: 600;
	/* Tabular numerals keep usernames / order numbers aligned. */
	font-variant-numeric: lining-nums tabular-nums;
}

/* ── Type-specific tonal shifts (token-aligned) ── */
.luxe-auth-notice--error {
	border-color: rgba(217, 103, 111, 0.32);
}
.luxe-auth-notice--error .luxe-auth-notice__icon {
	color: #D9676F; /* Luxe error — muted rose */
}

.luxe-auth-notice--success {
	border-color: rgba(138, 154, 123, 0.32);
}
.luxe-auth-notice--success .luxe-auth-notice__icon {
	color: #8A9A7B; /* Luxe success — sage */
}

.luxe-auth-notice--info {
	/* defaults already gold — no override needed */
}

/* Reduced motion: drop backdrop-filter to avoid subpixel jitter
   on some Linux/Firefox combos. */
@media (prefers-reduced-motion: reduce) {
	.luxe-auth-notice {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Mobile: full-width minus padding, smaller text. */
@media (max-width: 520px) {
	.luxe-auth-notice {
		max-width: calc(100% - 32px);
		margin-left: 16px;
		margin-right: 16px;
		font-size: 13px;
		padding: 12px 18px;
	}
}