/* ==========================================================================
   ASTYLIO — MY ACCOUNT
   Visual-only styling for the logged-out Email OTP sign-in (see
   woocommerce/myaccount/form-login.php override + inc/otp.php).
   WooCommerce logic (validation, sessions, cart) is untouched.

   SCOPE: #customer_login (logged-out auth UI) + logged-out page heading
   only. Logged-in dashboard, orders, addresses, checkout and all other
   forms are intentionally unaffected.

   TOKENS ONLY — Playfair Display headings, Poppins UI, burgundy primary,
   spacing scale, 768px mobile threshold (site convention).
   ========================================================================== */

/* --- Page heading — privacy-header pattern, logged-out account only --- */
body.woocommerce-account:not(.logged-in) .entry-header {
	text-align: center;
	border-bottom: 1px solid var(--color-border-default);
	padding-bottom: var(--astylio-space-6);
	margin-bottom: var(--astylio-space-9);
}
body.woocommerce-account:not(.logged-in) .entry-header .entry-title {
	font-family: var(--astylio-font-display);
	font-size: clamp(28px, 5vw, 42px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-text-primary);
	margin: 0;
}

/* --- Auth shell — narrow, centered --- */
#customer_login .astylio-auth {
	max-width: 440px;
	margin: 0 auto;
	padding-bottom: var(--astylio-space-10);
}
#customer_login .astylio-auth-title {
	font-family: var(--astylio-font-display);
	font-size: var(--astylio-fs-heading-md);
	font-weight: 500;
	color: var(--color-text-primary);
	text-align: center;
	margin: 0 0 var(--astylio-space-2);
}
#customer_login .astylio-auth-sub {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-text-secondary);
	text-align: center;
	margin: 0 0 var(--astylio-space-6);
	line-height: 1.6;
}
#customer_login .astylio-auth-email { color: var(--color-text-primary); overflow-wrap: anywhere; }

/* --- Email field --- */
#customer_login .astylio-auth-field { margin: 0 0 var(--astylio-space-4); }
#customer_login .astylio-auth-field label {
	display: block;
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--astylio-space-2);
}
#customer_login .astylio-auth-field input {
	width: 100%;
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: var(--astylio-border-width) var(--astylio-border-style) var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	padding: 0.65em 0.9em;
	min-height: 46px;
	transition: border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            box-shadow var(--astylio-duration-fast) var(--astylio-ease-standard);
}
#customer_login .astylio-auth-field input::placeholder { color: var(--color-text-muted); }
#customer_login .astylio-auth-field input:hover { border-color: var(--color-border-strong); }
#customer_login .astylio-auth-field input:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(90, 31, 43, 0.12);
}

/* --- Actions: circular arrow (email) / full button (OTP) --- */
#customer_login .astylio-auth-actions {
	margin: var(--astylio-space-6) 0;
	text-align: center;
}
#customer_login [data-auth-email-submit] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-size: 22px;
	cursor: pointer;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
#customer_login [data-auth-email-submit]:hover { background: var(--color-brand-primary-hover); }
#customer_login [data-auth-email-submit]:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 3px;
}
#customer_login [data-auth-email-submit]:disabled { opacity: 0.55; cursor: wait; }
#customer_login [data-auth-otp-submit] {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-button);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	background: var(--color-brand-primary);
	border: 1px solid transparent;
	border-radius: var(--astylio-radius-md);
	color: var(--color-text-inverse);
	padding: 0 var(--astylio-space-6);
	min-height: 48px;
	cursor: pointer;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
#customer_login [data-auth-otp-submit]:hover { background: var(--color-brand-primary-hover); }
#customer_login [data-auth-otp-submit]:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 2px;
}
#customer_login [data-auth-otp-submit]:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Legal + inline text links --- */
#customer_login .astylio-auth-legal {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-text-secondary);
	text-align: center;
	line-height: 1.75;
	margin: 0;
}
#customer_login .astylio-auth-legal a,
#customer_login .astylio-auth-change {
	color: var(--color-brand-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#customer_login .astylio-auth-legal a:hover { color: var(--color-brand-primary-hover); }
#customer_login .astylio-auth-change {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}
#customer_login .astylio-auth-change:hover { color: var(--color-brand-primary-hover); }
#customer_login .astylio-auth-change:disabled {
	color: var(--color-text-muted);
	text-decoration: none;
	cursor: wait;
}

/* --- OTP boxes --- */
#customer_login .astylio-auth-boxes {
	display: flex;
	gap: var(--astylio-space-2);
	justify-content: center;
	margin: 0 0 var(--astylio-space-4);
}
#customer_login .astylio-auth-box {
	flex: 1 1 0;
	min-width: 0;
	max-width: 52px;
	aspect-ratio: 1;
	font-family: var(--astylio-font-ui);
	font-size: 20px;
	text-align: center;
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: var(--astylio-border-width) var(--astylio-border-style) var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	padding: 0;
	transition: border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            box-shadow var(--astylio-duration-fast) var(--astylio-ease-standard);
}
#customer_login .astylio-auth-box:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(90, 31, 43, 0.12);
}

/* --- Errors + resend row --- */
#customer_login .astylio-auth-error {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-error);
	text-align: center;
	line-height: 1.6;
	margin: 0 0 var(--astylio-space-4);
}
#customer_login .astylio-auth-error[hidden] { display: none; }
#customer_login .astylio-auth-resend {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-text-secondary);
	text-align: center;
	line-height: 1.75;
	margin: 0;
}
#customer_login .astylio-auth-timer { color: var(--color-text-muted); }

/* --- Mobile: shell uses nearly full width --- */
@media (max-width: 768px) {
	#customer_login .astylio-auth { max-width: none; }
	body.woocommerce-account:not(.logged-in) .entry-header { margin-bottom: var(--astylio-space-8); }
}

/* Reduced motion — no transitions on auth controls. */
@media (prefers-reduced-motion: reduce) {
	#customer_login .astylio-auth-field input,
	#customer_login .astylio-auth-box,
	#customer_login [data-auth-email-submit],
	#customer_login [data-auth-otp-submit] { transition: none; }
}