/* =====================================================================
 * zzf-core — account.css
 * My Account: split auth screen, and the signed-in dashboard.
 * ---------------------------------------------------------------------
 * MESH RULE. The brand panel on the auth screen is a MARKETING surface,
 * so it is glass. Everything else here — forms, order tables, addresses,
 * stat tiles — is DATA, so it is flat white with hairlines. That split is
 * the whole reason the page reads as part of this site rather than as a
 * WooCommerce page someone recoloured.
 *
 * Glass budget: exactly one blurred surface on this page, well inside
 * the 8–12 per viewport ceiling.
 *
 * SCOPING. Everything is under .zzf-account-page (a body class) so none
 * of it can reach the header, the footer, or any other Woo surface. Woo's
 * own stylesheet loads AFTER this one, so anything that ties it on
 * specificity loses on source order — that is why the selectors here are
 * deliberately three-deep in places rather than elegant. Measure the
 * computed value before assuming a rule applies.
 * ================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────── */

.zzf-account-page .zzf-wooshell__title { display: none; }   /* the dashboard header says it better */

.zzf-account-page .woocommerce { max-width: none; }

/* ── Logged out: the split screen ──────────────────────────────────── */

.zzf-account-page .zzf-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	margin: 0 auto;
	max-width: 1120px;
}

/* The one glass surface on the page. */
.zzf-account-page .zzf-auth__brand {
	position: relative;
	padding: 2.4rem 2.2rem;
	background: var(--zzf-glass-fill, rgba(255, 255, 255, .58));
	-webkit-backdrop-filter: blur(var(--zzf-glass-blur, 26px)) saturate(var(--zzf-glass-sat, 180%));
	backdrop-filter: blur(var(--zzf-glass-blur, 26px)) saturate(var(--zzf-glass-sat, 180%));
	border: 1px solid var(--zzf-glass-line, rgba(255, 255, 255, .85));
	border-radius: var(--zzf-glass-radius, 26px);
	box-shadow: var(--zzf-glass-shadow, 0 28px 70px -18px rgba(11, 27, 54, .22));
}

.zzf-account-page .zzf-auth__eyebrow {
	margin: 0 0 .6rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #14346E);
}

.zzf-account-page .zzf-auth__title {
	margin: 0 0 .7rem;
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.012em;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-account-page .zzf-auth__lede {
	margin: 0 0 1.6rem;
	max-width: 46ch;
	font-size: .95rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-account-page .zzf-auth__reasons {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.zzf-account-page .zzf-auth__reason {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
}

.zzf-account-page .zzf-auth__reason > span:last-child {
	display: flex;
	flex-direction: column;
	gap: .12rem;
}

/* Term separated from description by COLOUR, not weight — the house rule
   from .zzf-spec. Bold here would add noise the register cannot afford. */
.zzf-account-page .zzf-auth__reason b {
	font-weight: 400;
	font-size: .92rem;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-account-page .zzf-auth__reason span span {
	font-size: .84rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #5A6C89);
}

/* A CSS checkmark, not the proof star. The star means "a document backs
   this" and none of these are documented claims. */
.zzf-account-page .zzf-auth__tick {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: .22rem;
	position: relative;
}

.zzf-account-page .zzf-auth__tick::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 5px;
	height: 9px;
	border-right: 1.5px solid var(--wp--preset--color--accent, #14346E);
	border-bottom: 1.5px solid var(--wp--preset--color--accent, #14346E);
	transform: rotate(42deg);
}

.zzf-account-page .zzf-auth__ruo {
	margin: 1.7rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line, #E3EBF6);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .66rem;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted, #5A6C89);
}

/* ── The form card ─────────────────────────────────────────────────── */

.zzf-account-page .zzf-auth__forms { min-width: 0; }

.zzf-account-page .zzf-auth__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: -1px;
	position: relative;
	z-index: 1;
}

.zzf-account-page .zzf-auth__tab {
	flex: 1 1 0;
	padding: .78rem 1rem;
	background: var(--wp--preset--color--surface, #FAFCFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-bottom-color: transparent;
	border-radius: 8px 8px 0 0;
	font-family: var(--wp--preset--font-family--body, Outfit, sans-serif);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5A6C89);
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.zzf-account-page .zzf-auth__tab.is-active {
	background: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* Clinical: the form is a data surface. */
.zzf-account-page #customer_login {
	display: block;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 8px;
	padding: 1.8rem 1.7rem;

	/* woocommerce-layout.css makes .col2-set width:100%, and this page is
	   content-box, so the padding and border above were ADDED to the full
	   column width — the card hung 56px past the tab strip sitting on it. */
	box-sizing: border-box;
}

/* The flat corner belongs under whichever tab is open, so it follows the
   active one. With JS off there is no tab bar and the card stays fully
   rounded, which is what the first rule leaves it as. */
.zzf-account-page .zzf-auth__tabs ~ #customer_login {
	border-radius: 0 8px 8px 8px;
}
.zzf-account-page .zzf-auth__tabs:has(.zzf-auth__tab:last-child.is-active) ~ #customer_login {
	border-radius: 8px 0 8px 8px;
}

/* woocommerce.css gives form.login and form.register a 1px #CFC8D8 box with
   a 5px radius and 2em margins. Inside our card that is a second frame, in a
   grey the palette does not contain, around only some of the panels. */
.zzf-account-page #customer_login form.login,
.zzf-account-page #customer_login form.register {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* Woo floats the login submit and gives it margin-right:1em. Our .form-row is
   a column flex box, so the float is ignored but the margin still eats 12px —
   LOG IN came out narrower than the fields above it, and REGISTER did not. */
.zzf-account-page #customer_login form button[type="submit"] {
	float: none;
	width: 100%;
	margin: 0;
}

.zzf-account-page #customer_login .u-column1,
.zzf-account-page #customer_login .u-column2 {
	width: 100%;
	float: none;      /* Woo's own layout is floats */
	margin: 0;
	padding: 0;
}

/* Before the JS runs there are no tabs, so both columns show stacked and
   need a divider. The tab bar hides one of them, so with tabs live that
   divider gap is just dead space at the top of the card — and it only
   appeared on Register, which is half of why the two tabs did not match. */
.zzf-account-page #customer_login .u-column2 { margin-top: 2rem; }
.zzf-account-page .zzf-auth__tabs ~ #customer_login .u-column2 { margin-top: 0; }
.zzf-account-page #customer_login .u-column2[hidden],
.zzf-account-page #customer_login .u-column1[hidden] { display: none; }

.zzf-account-page #customer_login h2 {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* When the tabs are live the column heading is the tab, so it is noise. */
.zzf-account-page .zzf-auth__tabs ~ #customer_login h2 { display: none; }

/* ── Fields — shared by auth, addresses and account details ────────── */

.zzf-account-page .woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: .34rem;
	margin: 0 0 1.05rem;
	padding: 0;
}

.zzf-account-page .woocommerce form .form-row label {
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-account-page .woocommerce form .form-row .required { color: var(--wp--preset--color--accent-2, #C8102E); }

.zzf-account-page .woocommerce form .input-text,
.zzf-account-page .woocommerce form input[type="text"],
.zzf-account-page .woocommerce form input[type="email"],
.zzf-account-page .woocommerce form input[type="tel"],
.zzf-account-page .woocommerce form input[type="password"],
.zzf-account-page .woocommerce form select {
	width: 100%;
	padding: .66rem .85rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast, #0B1B36);
	font-family: var(--wp--preset--font-family--body, Outfit, sans-serif);
	font-size: .92rem;
	font-weight: 300;
	line-height: 1.4;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.zzf-account-page .woocommerce form .input-text:focus,
.zzf-account-page .woocommerce form select:focus {
	border-color: var(--wp--preset--color--accent, #14346E);
	box-shadow: 0 0 0 3px rgba(20, 52, 110, .10);
}

/* Password reveal. Woo ships .password-input; account.js reuses it. */
.zzf-account-page .zzf-pw { position: relative; display: block; }

.zzf-account-page .zzf-pw input { padding-right: 2.6rem !important; }

.zzf-account-page .zzf-pw__toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	opacity: .5;
	transition: opacity .2s ease;
}

.zzf-account-page .zzf-pw__toggle:hover { opacity: .9; }

/* An eye: a ring, plus a bar struck through it when the password is
   showing. Drawn rather than shipped as an icon file. */
.zzf-account-page .zzf-pw__toggle::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	width: 14px;
	height: 8px;
	border: 1.5px solid var(--wp--preset--color--muted, #5A6C89);
	border-radius: 50% 50%;
}

.zzf-account-page .zzf-pw__toggle::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 18px;
	height: 1.5px;
	background: var(--wp--preset--color--muted, #5A6C89);
	transform: rotate(-40deg);
	opacity: 0;
	transition: opacity .15s ease;
}

.zzf-account-page .zzf-pw__toggle.is-on::after { opacity: 1; }

/* Woo's own stylesheet loads later and ties on specificity, so the button
   rules are three-deep on purpose. */
.zzf-account-page .woocommerce form button.button,
.zzf-account-page .woocommerce a.button,
.zzf-account-page .woocommerce button.button {
	display: inline-block;
	padding: .74rem 1.5rem;
	background: var(--wp--preset--color--accent, #14346E);
	border: 1px solid var(--wp--preset--color--accent, #14346E);
	border-radius: 4px;
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body, Outfit, sans-serif);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.zzf-account-page .woocommerce form button.button:hover,
.zzf-account-page .woocommerce a.button:hover,
.zzf-account-page .woocommerce button.button:hover {
	background: #0A1F47;
	border-color: #0A1F47;
	color: #FFFFFF;
}

.zzf-account-page .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .82rem;
	font-weight: 300;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-account-page .woocommerce-LostPassword {
	margin: 1rem 0 0;
	font-size: .8rem;
}

.zzf-account-page .zzf-acct__head {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2rem;
	padding: 1.4rem 1.6rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 14px;
}

.zzf-account-page .zzf-acct__id {
	display: flex;
	align-items: center;
	gap: .9rem;
	min-width: 0;
}

.zzf-account-page .zzf-acct__avatar {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #14346E);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: 1.05rem;
	letter-spacing: .02em;
}

.zzf-account-page .zzf-acct__who {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.zzf-account-page .zzf-acct__hello {
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* An email address is data. */
.zzf-account-page .zzf-acct__email {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .7rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted, #5A6C89);
	overflow: hidden;
	text-overflow: ellipsis;
}

.zzf-account-page .zzf-acct__stats {
	display: flex;
	gap: 1.8rem;
	margin: 0;
	padding: 0 0 0 1.8rem;
	border-left: 1px solid var(--wp--preset--color--line, #E3EBF6);
}

.zzf-account-page .zzf-acct__stat { margin: 0; }

.zzf-account-page .zzf-acct__stat dt {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

.zzf-account-page .zzf-acct__stat dd {
	margin: .18rem 0 0;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-account-page .zzf-acct__quick {
	display: flex;
	gap: .5rem;
	margin-left: auto;
	flex-wrap: wrap;
}

.zzf-account-page .zzf-acct__btn {
	display: inline-block;
	padding: .6rem 1.1rem;
	background: var(--wp--preset--color--accent, #14346E);
	border: 1px solid var(--wp--preset--color--accent, #14346E);
	border-radius: 4px;
	color: #FFFFFF;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.zzf-account-page .zzf-acct__btn:hover { background: #0A1F47; color: #FFFFFF; }

.zzf-account-page .zzf-acct__btn--ghost {
	background: none;
	color: var(--wp--preset--color--accent, #14346E);
}

.zzf-account-page .zzf-acct__btn--ghost:hover {
	background: var(--wp--preset--color--surface-2, #E9F1FC);
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* ── Content ───────────────────────────────────────────────────────── */

.zzf-account-page .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	padding: 1.5rem 1.6rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 14px;
}

.zzf-account-page .woocommerce-MyAccount-content > h2,
.zzf-account-page .woocommerce-MyAccount-content > h3 {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display, Marcellus, serif);
	font-weight: 400;
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* Order-details tables. This is Woo's OWN markup — order-details.php on
   the view-order page — not something this theme renders, so it stays in
   this file rather than myaccount.css.

   It used to share a rule with .woocommerce-orders-table, which the account
   templates replaced with cards. Deleting that rule took this half with it;
   split out so the two can never be removed together again. */
.zzf-account-page .woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--line, #E3EBF6);
	border-radius: 10px;
	overflow: hidden;
	font-size: .88rem;
}

.zzf-account-page .woocommerce table.shop_table th {
	padding: .7rem .85rem;
	background: var(--wp--preset--color--surface, #FAFCFF);
	border-bottom: 1px solid var(--wp--preset--color--line, #E3EBF6);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--muted, #5A6C89);
}

.zzf-account-page .woocommerce table.shop_table td {
	padding: .75rem .85rem;
	border-top: 1px solid var(--wp--preset--color--line, #E3EBF6);
	color: var(--wp--preset--color--contrast, #0B1B36);
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.zzf-account-page .zzf-auth { grid-template-columns: 1fr; gap: 1.6rem; }

	.zzf-account-page .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}

	.zzf-account-page .woocommerce-MyAccount-navigation { position: static; }

	.zzf-account-page .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: .3rem;
		overflow-x: auto;      /* the nav scrolls, the page never does */
		-webkit-overflow-scrolling: touch;
	}

	.zzf-account-page .woocommerce-MyAccount-navigation li a { white-space: nowrap; }

	.zzf-account-page .zzf-acct__stats {
		padding-left: 0;
		border-left: 0;
		width: 100%;
		justify-content: space-between;
		gap: 1rem;
	}

	.zzf-account-page .zzf-acct__quick { margin-left: 0; width: 100%; }

	.zzf-account-page .woocommerce-Addresses { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.zzf-account-page .zzf-auth__brand { padding: 1.7rem 1.4rem; }
	.zzf-account-page #customer_login { padding: 1.3rem 1.15rem; }

	/* A shop_table on a narrow screen must scroll inside its own box
	   rather than making the page scroll sideways. */
	.zzf-account-page .woocommerce-MyAccount-content { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.zzf-account-page * { transition: none !important; }
}