/* ==========================================================================
   PrepSora — WooCommerce Account / Login / Register / Dashboard
   Brands the gated members area (/my-account/): the logged-out front door
   AND the logged-in dashboard.
   Depends on tokens in prepsora-design-system.css.

   Scope: everything is namespaced under .woocommerce-account (a body class
   WooCommerce adds only on My Account) so nothing leaks to other pages.
   Logged-in-only rules use .logged-in.woocommerce-account.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page frame — breathing room on the off-white background, centred content
   -------------------------------------------------------------------------- */
.woocommerce-account .ps-main { background: var(--ps-bg); }

.woocommerce-account .site-content,
.woocommerce-account #content {
	padding-block: var(--ps-space-8);
}

.woocommerce-account .woocommerce {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: var(--ps-space-5);
}

/* --------------------------------------------------------------------------
   Branded intro (output by prepsora_account_login_intro in functions.php)
   -------------------------------------------------------------------------- */
.ps-account-intro {
	text-align: center;
	max-width: 56ch;
	margin: 0 auto var(--ps-space-7);
}
.ps-account-intro .ps-eyebrow { margin-bottom: var(--ps-space-3); }
.ps-account-intro__title {
	font-size: var(--ps-text-4xl);
	margin: 0 0 var(--ps-space-3);
}
.ps-account-intro__sub {
	color: var(--ps-text-muted);
	font-size: var(--ps-text-lg);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Login + Register -> two branded cards.
   Keyed off the #customer_login ID + its child column divs, so it does not
   depend on WooCommerce emitting the .u-columns class (some builds don't).
   -------------------------------------------------------------------------- */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ps-space-6);
	align-items: start;
}

/* WooCommerce clearfixes the .col2-set container with ::before/::after
   pseudo-elements. Inside a grid those pseudos become stray grid items and
   push the real columns into a diagonal (Login top-right, Register
   bottom-left). Suppressing them leaves only the two real columns. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	content: none;
}

.woocommerce-account #customer_login > div {
	float: none;   /* neutralise WooCommerce's legacy float columns */
	width: auto;
	margin: 0;
	padding: 0;
}

/* The form panels */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-md);
	box-shadow: var(--ps-shadow-sm);
	padding: var(--ps-space-6);
	margin: 0;
}

/* Column headings */
.woocommerce-account #customer_login h2 {
	font-size: var(--ps-text-2xl);
	margin: 0 0 var(--ps-space-5);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce form .form-row { margin-bottom: var(--ps-space-5); }

.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce form .woocommerce-form-row label {
	display: block;
	font-family: var(--ps-font-body);
	font-weight: 600;
	font-size: var(--ps-text-sm);
	color: var(--ps-slate-700);
	margin-bottom: var(--ps-space-2);
}

.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="tel"],
.woocommerce-account .woocommerce form input[type="password"] {
	width: 100%;
	padding: 0.8rem 0.95rem;
	font-family: var(--ps-font-body);
	font-size: var(--ps-text-base);
	color: var(--ps-text);
	background: var(--ps-white);
	border: 1px solid var(--ps-border-strong);
	border-radius: var(--ps-radius);
	transition: border-color var(--ps-transition), box-shadow var(--ps-transition);
}
.woocommerce-account .woocommerce form .input-text:focus,
.woocommerce-account .woocommerce form input:focus {
	outline: none;
	border-color: var(--ps-primary);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}

/* Password field with show/hide toggle */
.woocommerce-account .woocommerce form .password-input { position: relative; display: block; }
.woocommerce-account .woocommerce form .show-password-input {
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--ps-slate-400);
}
.woocommerce-account .woocommerce form .show-password-input.display-password { color: var(--ps-primary); }

/* --------------------------------------------------------------------------
   Buttons — teal by default; the Register CTA is green (the "go" moment)
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ps-font-body);
	font-weight: 600;
	font-size: var(--ps-text-base);
	line-height: 1;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--ps-radius-full);
	background: var(--ps-primary);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--ps-transition), box-shadow var(--ps-transition), transform var(--ps-transition);
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce input.button:hover {
	background: var(--ps-primary-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--ps-shadow-sm);
}
.woocommerce-account .woocommerce .button:active { transform: translateY(0); }

/* Login submit — full-width teal (inherits the default colour) */
.woocommerce-account .woocommerce form.login .button { width: 100%; }

/* Register submit — full-width green CTA */
.woocommerce-account .woocommerce form.register .button {
	width: 100%;
	background: var(--ps-accent);
	color: var(--ps-navy-950);
}
.woocommerce-account .woocommerce form.register .button:hover {
	background: var(--ps-accent-hover);
	color: var(--ps-navy-950);
}

/* --------------------------------------------------------------------------
   Remember me / lost password / notices
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--ps-space-2);
	font-size: var(--ps-text-sm);
	color: var(--ps-text-muted);
	margin: 0 0 var(--ps-space-5);
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; margin: 0; }

.woocommerce-account .woocommerce-LostPassword {
	margin: var(--ps-space-4) 0 0;
	font-size: var(--ps-text-sm);
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--ps-link); font-weight: 600; }

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: var(--ps-text-sm);
	color: var(--ps-text-muted);
}
.woocommerce-account .woocommerce-privacy-policy-text p { margin: var(--ps-space-3) 0 0; }

/* Notices (errors / messages / info) */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	margin: 0 0 var(--ps-space-6);
	padding: var(--ps-space-4) var(--ps-space-5);
	border: 1px solid var(--ps-border);
	border-left: 4px solid var(--ps-primary);
	border-radius: var(--ps-radius);
	background: var(--ps-surface);
	font-size: var(--ps-text-sm);
	list-style: none;
}
.woocommerce-account .woocommerce-error { border-left-color: var(--ps-danger); }
.woocommerce-account .woocommerce-message { border-left-color: var(--ps-success); }

/* ==========================================================================
   LOGGED-IN DASHBOARD  (step 2)
   Two panes: branded left-rail navigation + content area.
   Scoped to .logged-in so none of this touches the logged-out forms above.
   ========================================================================== */

.logged-in.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ps-space-7);
}

/* Notices span the full width above both panes */
.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 1 100%; }

/* Left rail — branded card menu */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-md);
	box-shadow: var(--ps-shadow-xs);
	padding: var(--ps-space-3);
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.9rem;
	border-radius: var(--ps-radius);
	font-family: var(--ps-font-body);
	font-weight: 600;
	font-size: var(--ps-text-sm);
	color: var(--ps-slate-700);
	text-decoration: none;
	transition: background-color var(--ps-transition), color var(--ps-transition);
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ps-primary-soft);
	color: var(--ps-primary-hover);
}
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ps-primary);
	color: #fff;
}

/* Content pane */
.logged-in.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0; /* let wide tables shrink instead of overflowing */
}
.logged-in.woocommerce-account .woocommerce-MyAccount-content p { color: var(--ps-text); }
.logged-in.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	font-size: var(--ps-text-lg);
	color: var(--ps-heading);
}

/* Account-details + edit forms: keep fields readable, not full-bleed */
.logged-in.woocommerce-account .woocommerce-MyAccount-content form { max-width: 560px; }
.logged-in.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	padding: var(--ps-space-5);
	margin: var(--ps-space-6) 0 0;
}
.logged-in.woocommerce-account .woocommerce-MyAccount-content legend {
	font-family: var(--ps-font-display);
	font-weight: 700;
	color: var(--ps-heading);
	padding: 0 var(--ps-space-3);
}

/* Tables — Orders / Downloads / Addresses */
.woocommerce-account .woocommerce table.shop_table,
.woocommerce-account .woocommerce table.woocommerce-orders-table,
.woocommerce-account .woocommerce table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ps-border);
	font-size: var(--ps-text-sm);
}
.woocommerce-account .woocommerce table.shop_table th {
	background: var(--ps-surface-sunken);
	color: var(--ps-heading);
	font-family: var(--ps-font-display);
	font-weight: 600;
	text-align: left;
	padding: var(--ps-space-3) var(--ps-space-4);
}
.woocommerce-account .woocommerce table.shop_table td {
	padding: var(--ps-space-3) var(--ps-space-4);
	border-top: 1px solid var(--ps-border);
	color: var(--ps-text);
}

/* --------------------------------------------------------------------------
   Lost password / reset password — single centred card
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
	max-width: 460px;
	margin: 0 auto;
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-md);
	box-shadow: var(--ps-shadow-sm);
	padding: var(--ps-space-6);
}
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row { margin-bottom: var(--ps-space-5); }
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .button { width: 100%; }
/* The form's built-in instruction line (the only <p> that isn't a field row) */
.woocommerce-account .woocommerce form.woocommerce-ResetPassword > p:not(.form-row):not(.woocommerce-form-row) {
	color: var(--ps-text-muted);
	font-size: var(--ps-text-sm);
	margin: 0 0 var(--ps-space-5);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.woocommerce-account #customer_login { grid-template-columns: 1fr; }
	.ps-account-intro__title { font-size: var(--ps-text-3xl); }

	/* Dashboard menu stacks above content */
	.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; }
}