/**
 * Celsyn 360 Liquid — My Account.
 * Restyles WooCommerce's own native My Account markup (nav, dashboard,
 * orders table, order detail, addresses, edit-account/login/register
 * forms) — no template overrides, the classes below are WooCommerce's own.
 * Opaque surfaces (this is a read/manage page, not a floating control).
 */

/* Blocksy's own page title ("My Account") still renders above the shortcode
   output for logged-out visitors (login/register) where it's the only
   heading — but the logged-in dashboard gets its own heading below, so hide
   Blocksy's to avoid "My Account" printing twice. */
body.celsyn-account-page.logged-in .hero-section .page-title { display: none; }

.celsyn-account-intro {
	grid-column: 1 / -1;
	margin-bottom: var( --space-2 );
}
.celsyn-account-intro__title {
	font-size: var( --text-2xl );
	margin: 0;
}

body.celsyn-account-page .woocommerce {
	max-width: var( --container-lg );
	margin-inline: auto;
	padding: var( --space-7 ) var( --space-5 ) var( --space-9 );
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var( --space-7 );
}
@media ( max-width: 760px ) {
	body.celsyn-account-page .woocommerce { grid-template-columns: 1fr; }
}

/* Navigation */
.woocommerce-MyAccount-navigation {
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-md );
	padding: var( --space-3 );
	align-self: start;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var( --space-3 ) var( --space-4 );
	border-radius: var( --radius-sm );
	font-size: var( --text-sm );
	font-weight: 500;
	color: var( --env-text-muted );
	text-decoration: none;
	transition: background var( --dur-fast ) var( --ease-glass ), color var( --dur-fast ) var( --ease-glass );
}
.woocommerce-MyAccount-navigation-link a:hover { background: var( --env-surface-2 ); color: var( --env-text ); }
.woocommerce-MyAccount-navigation-link.is-active a { background: var( --env-accent ); color: #fff; }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var( --space-2 ); border-top: 1px solid var( --env-line ); padding-top: var( --space-2 ); }

/* Content card */
.woocommerce-MyAccount-content {
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-md );
	padding: var( --space-6 );
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content mark { background: none; color: var( --env-accent ); font-weight: 600; padding: 0; }
.woocommerce-MyAccount-content a:not(.button) { color: var( --env-accent ); text-decoration: underline; text-decoration-color: var( --env-line-strong ); }

/* Orders table */
.woocommerce-orders-table,
.woocommerce-table { width: 100%; border-collapse: collapse; font-size: var( --text-sm ); }
.woocommerce-orders-table thead th,
.woocommerce-table thead th {
	text-align: left;
	font-size: var( --text-xs );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --env-text-muted );
	padding: var( --space-2 ) var( --space-3 );
	border-bottom: 1px solid var( --env-line-strong );
}
.woocommerce-orders-table tbody td,
.woocommerce-table tbody td {
	padding: var( --space-3 );
	border-bottom: 1px solid var( --env-line );
	vertical-align: middle;
}
.woocommerce-orders-table .button,
.woocommerce-MyAccount-content .button,
.woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var( --control-h-sm );
	padding-inline: var( --space-4 );
	border-radius: var( --radius-pill );
	background: var( --env-accent );
	color: #fff;
	font-size: var( --text-xs );
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-Button:hover { opacity: 0.88; }
.order-status { font-weight: 600; text-transform: capitalize; }

/* Addresses */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var( --space-5 ); }
@media ( max-width: 560px ) { .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-Address {
	background: var( --env-surface-2 );
	border-radius: var( --radius-sm );
	padding: var( --space-4 );
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var( --space-3 ); margin-bottom: var( --space-2 ); }
.woocommerce-Address-title h3 { font-size: var( --text-md ); margin: 0; }
.woocommerce-Address address { font-size: var( --text-sm ); color: var( --env-text-muted ); font-style: normal; line-height: 1.6; }

/* Forms: edit account, login, register, reset password */
.woocommerce-EditAccountForm,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 520px;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row {
	margin-bottom: var( --space-4 );
}
.woocommerce-EditAccountForm label,
.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-ResetPassword label {
	display: block;
	font-size: var( --text-xs );
	font-weight: 600;
	color: var( --env-text-muted );
	margin-bottom: var( --space-2 );
}
.woocommerce-EditAccountForm input:not([type="checkbox"]):not([type="submit"]),
.woocommerce-form-login input:not([type="checkbox"]):not([type="submit"]),
.woocommerce-form-register input:not([type="checkbox"]):not([type="submit"]),
.woocommerce-ResetPassword input:not([type="submit"]) {
	width: 100%;
	height: var( --control-h-md );
	padding: var( --space-3 );
	font-family: var( --font-body );
	font-size: var( --text-md );
	background: var( --env-bg );
	border: 1px solid var( --env-line-strong );
	border-radius: var( --radius-sm );
}
.woocommerce-EditAccountForm input:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce-ResetPassword input:focus { outline: none; border-color: var( --env-accent ); }
.woocommerce-EditAccountForm fieldset { border: 1px solid var( --env-line ); border-radius: var( --radius-md ); padding: var( --space-4 ); margin: var( --space-5 ) 0; }
.woocommerce-EditAccountForm legend { font-size: var( --text-sm ); font-weight: 600; padding-inline: var( --space-2 ); }

/* Logged-out Login/Register — two balanced glass panels, side by side on
   desktop, stacked on mobile. #customer_login is WooCommerce's own id for
   this split; .u-columns is its own layout class, reused rather than
   replaced. */
#customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-6 );
	align-items: start;
	max-width: var( --container-md );
	margin-inline: auto;
}
@media ( max-width: 760px ) {
	#customer_login.u-columns { grid-template-columns: 1fr; }
}
#customer_login .u-column1,
#customer_login .u-column2 {
	background: var( --glass-bg-strong );
	border: 1px solid var( --glass-border );
	border-radius: var( --radius-lg );
	box-shadow: var( --glass-shadow-sm ), var( --glass-highlight );
	backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	-webkit-backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	padding: var( --space-6 );
}
#customer_login h2 { font-size: var( --text-xl ); margin: 0 0 var( --space-5 ); }
#customer_login .woocommerce-form-login,
#customer_login .woocommerce-form-register { max-width: none; }

/* Remember me + Log in sit on one row; Lost password sits quietly below. */
.woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	flex-wrap: wrap;
}
.woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: var( --space-2 );
	font-size: var( --text-sm );
	font-weight: 500;
	color: var( --env-text );
	margin: 0;
}
.woocommerce-form-login__rememberme input { width: auto; height: auto; margin: 0; }
.woocommerce-LostPassword.lost_password { margin-top: var( --space-3 ); font-size: var( --text-sm ); }
.woocommerce-LostPassword.lost_password a { color: var( --env-accent ); text-decoration: underline; text-decoration-color: var( --env-line-strong ); }
.celsyn-account-track-order-hint { margin-top: var( --space-5 ); padding-top: var( --space-4 ); border-top: 1px solid var( --env-line ); font-size: var( --text-xs ); color: var( --env-text-muted ); }
.celsyn-account-track-order-hint a { color: var( --env-accent ); text-decoration: underline; text-decoration-color: var( --env-line-strong ); }

/* Register form's GDPR/privacy paragraph — present, never competing with
   the primary fields/CTA above it. */
#customer_login .woocommerce-form-register .woocommerce-privacy-policy-text,
#customer_login .woocommerce-form-register > p:not( .form-row ) {
	font-size: var( --text-xs );
	color: var( --env-text-muted );
	line-height: 1.6;
}

/* Submit buttons — login/register ship completely unstyled by default. */
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var( --control-h-md );
	padding-inline: var( --space-6 );
	border-radius: var( --radius-pill );
	background: linear-gradient( 150deg, var( --celsyn-blue-bright ) 0%, var( --celsyn-blue ) 65% );
	color: #fff;
	font-size: var( --text-sm );
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: transform var( --dur-fast ) var( --ease-glass ), box-shadow var( --dur-fast ) var( --ease-glass );
}
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover { transform: translateY( -1px ); box-shadow: 0 8px 20px rgb( var( --celsyn-blue-rgb ) / 0.3 ); }

/* Password show/hide toggle, injected by assets/js/account.js. */
.celsyn-password-field { position: relative; }
.celsyn-password-field input { padding-right: var( --space-8 ) !important; }
.celsyn-password-toggle {
	position: absolute;
	top: 50%;
	right: var( --space-2 );
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var( --env-text-muted );
	cursor: pointer;
}
.celsyn-password-toggle:hover { background: var( --env-surface-2 ); color: var( --env-text ); }
.celsyn-password-toggle.is-active { color: var( --env-accent ); }
.celsyn-password-toggle svg { width: 18px; height: 18px; }

.u-columns { display: flex; gap: var( --space-6 ); flex-wrap: wrap; }
.u-columns .u-column1, .u-columns .u-column2 { flex: 1 1 220px; }