/* =================================================================
   File:    16-account.css
   Purpose: My-account page theming.
            - Logged in:  sidebar nav + glass content panel (dashboard).
            - Logged out: liquid-glass Login + Register cards.
   ================================================================= */

/* ---- Logged-in dashboard: nav + content grid ---- */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--space-6);
}
/* WooCommerce's clearfix ::before / ::after pseudo-elements become stray
   grid items here and eat cells — pushing the nav into the wide track and
   the content into the narrow one. Drop them from the grid. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after {
	display: none;
}
/* WooCommerce core also floats the nav/content and gives them % widths.
   Clear that so each simply fills its grid track. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}
/* The notices wrapper is a grid child too — span it across both columns
   so an "added to cart" notice doesn't steal the nav's column. */
.woocommerce-account.logged-in .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
@media (max-width: 768px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: var(--space-4);
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	display: grid;
	gap: 2px;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	color: var(--c-ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-weight: var(--fw-medium);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-surface-2);
	color: var(--c-accent);
}
.woocommerce-MyAccount-content {
	padding: var(--space-5);
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}

/* ---- Account forms (Edit account, Addresses) — theme WooCommerce's
   default inputs, fieldset and button to the liquid-glass look. The
   login/register form has its own .liqui-input styling and is not inside
   .woocommerce-MyAccount-content, so these selectors never touch it. ---- */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	font-size: var(--fs-base);
	color: var(--c-ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 18%, transparent);
}

/* Password-change fieldset — swap the browser groove border for a clean
   themed panel. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin-top: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: var(--c-surface-2);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	padding: 0 8px;
	font-weight: var(--fw-semi);
	color: var(--c-ink);
}

/* Account action buttons (Save changes, etc.) — themed accent. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button {
	margin-top: var(--space-5);
	padding: 12px 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: var(--fw-semi);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--c-accent-2);
}

/* ---- Logged-out: Login / Register glass cards ---- */
.liqui-auth {
	display: grid;
	gap: var(--space-5);
	max-width: 560px;
	margin-inline: auto;
}
.liqui-auth--two {
	max-width: 1120px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
	.liqui-auth--two {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}
.liqui-auth__card { padding: var(--space-6); }
.liqui-auth__head { margin-bottom: var(--space-5); }
.liqui-auth__title {
	margin: 0 0 6px;
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
	font-optical-sizing: auto;
}
.liqui-auth__sub {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
	line-height: 1.5;
}
.liqui-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.liqui-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.liqui-field label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

/* Inputs — ID-scoped (#customer_login) so they win cleanly over Woo's
   form CSS without !important. */
#customer_login .password-input { position: relative; display: block; }
#customer_login .liqui-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	font-size: var(--fs-base);
	color: var(--c-ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
#customer_login .liqui-input:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 18%, transparent);
}

.liqui-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.liqui-auth__row .liqui-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink);
	cursor: pointer;
}
.liqui-auth__link {
	font-size: var(--fs-sm);
	color: var(--c-accent);
	text-decoration: none;
}
.liqui-auth__link:hover { text-decoration: underline; }
.liqui-auth__note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
	line-height: 1.5;
}
.liqui-auth__form .btn-block { margin-top: var(--space-2); }

/* Account-page background — calm Apple-style multi-hue gradient.
   Painted on <html> itself: the page canvas is always present, is
   always the backmost layer, and propagates to fill the whole
   viewport. background-attachment:fixed pins it so it never scrolls
   or seams. :has() reaches <html> from the body's WooCommerce class.
   The theme's optional .liquid-bg overlay is hidden here so nothing
   can sit on top of the gradient. This works whether or not the
   "liquid background" theme option is enabled. */
html:has(.woocommerce-account) {
	background: var(--page-flow-gradient);
	background-attachment: fixed;
}
.woocommerce-account .liquid-bg { display: none; }

/* <body> itself carries an opaque page colour + header-band gradient
   (see body{} in 02-typography.css). On account pages that opaque layer
   sat on top of the canvas gradient above, leaving the page flat grey.
   Clear it so the gradient shows through behind the glass cards. */
.woocommerce-account { background: transparent; }

/* Hide the redundant "My account" page title — the cards self-describe. */
.woocommerce-account .liqui-page-article__header { display: none; }

/* Kill WooCommerce's default border/box around the login + register forms
   so they sit cleanly inside our glass cards (no box-in-a-box). */
#customer_login form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

/* Submit buttons — ID-scoped so the themed primary look beats WooCommerce's
   default grey .button styling without !important. */
#customer_login .liqui-auth__form button[type="submit"] {
	width: 100%;
	margin-top: var(--space-2);
	padding: 13px 20px;
	border: 0;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: var(--fw-semi);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#customer_login .liqui-auth__form button[type="submit"]:hover {
	background: color-mix(in oklab, var(--c-accent) 86%, #000);
	transform: translateY(-1px);
}