/*
 * Styles for the My Account pages (Login/Register, Dashboard, Orders, Addresses,
 * Account details, Lost password) — WooCommerce renders these with its own classic
 * templates (woocommerce/templates/myaccount/*.php) into the "My account" Page's content,
 * inside the generic .enacoding-page layout (see assets/page-head.css for the breadcrumb/title
 * band) — this file only re-skins WooCommerce's own markup to match the rest of the site,
 * the same approach as assets/cart-checkout.css for Cart/Checkout.
 */

/* ---------------------------------------------------------------------------------
 * Notices (wrong password, address saved, password reset link sent…)
 * ------------------------------------------------------------------------------- */

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: #f8f9fa;
	border: 1px solid rgba( 0, 128, 128, 0.2 );
	border-radius: 1rem;
	color: #333;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.woocommerce-notices-wrapper .woocommerce-error {
	background: #fef2f2;
	border-color: rgba( 220, 38, 38, 0.2 );
}

.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a {
	color: #008080;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------------
 * Layout: navigation sidebar + content, side by side from ~900px up
 *
 * The [woocommerce_my_account] shortcode wraps EVERYTHING (notices + nav + content, or
 * notices + the login form) in one extra <div class="woocommerce">
 * (WC_Shortcodes::shortcode_wrapper()) — that div, not .wp-block-post-content itself, is
 * what actually holds the nav/content as siblings. Grid rules were previously applied one
 * level too high, on .wp-block-post-content (which only ever has that single wrapper div
 * as a child) — so the whole thing collapsed into the 240px nav column: the login form
 * wasn't centered, and after logging in the dashboard/content also rendered squeezed into
 * that narrow column instead of the wide one.
 * ------------------------------------------------------------------------------- */

body.woocommerce-account .wp-block-post-content > * {
	margin-block-start: 0;
}

body.woocommerce-account .wp-block-post-content > .woocommerce > * {
	margin-block-start: 0;
}

/* Logged-out state (login/register form): WooCommerce always renders an (often empty)
   .woocommerce-notices-wrapper before the form, and skips the .woocommerce-MyAccount-*
   wrapper this page otherwise uses — so this is just a plain, narrower centered column
   rather than the two-column layout below. */
body.woocommerce-account:not( .logged-in ) .wp-block-post-content > .woocommerce {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

@media ( min-width: 900px ) {
	body.woocommerce-account.logged-in .wp-block-post-content > .woocommerce {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 2rem;
		align-items: start;
	}

	/* Every direct child defaults to spanning the full row on its own (the notices
	   wrapper, any WooCommerce error/success banner) — only the nav and the content
	   panel are explicitly placed side by side. Relying on source-order auto-placement
	   here breaks as soon as a notice is present: it becomes an unaccounted-for extra
	   grid item, which pushes the *content* panel into the narrow 240px nav column
	   instead of the wide one. */
	body.woocommerce-account.logged-in .wp-block-post-content > .woocommerce > * {
		grid-column: 1 / -1;
	}

	body.woocommerce-account.logged-in .wp-block-post-content > .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	body.woocommerce-account.logged-in .wp-block-post-content > .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
	}
}

.woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 1rem;
	padding: 0.75rem;
}

/* WooCommerce's own woocommerce-layout.css (still loaded alongside the block-theme
   stylesheet) ships a classic float-based 2-column layout for this exact page —
   .woocommerce-MyAccount-navigation{float:left;width:30%} and
   .woocommerce-MyAccount-content{float:right;width:68%} — fighting the CSS Grid layout
   above. Both need float reset to none, not just a wider width, or the float keeps them
   out of normal flow (collapsing the .woocommerce wrapper's height below ~900px, where
   the grid isn't active yet). */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100% !important;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.6875rem 0.75rem;
	border-radius: 0.625rem;
	color: #333;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: #f8f9fa;
	color: #008080;
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: rgba( 0, 128, 128, 0.08 );
	color: #008080;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #dc2626;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #fef2f2;
	color: #dc2626;
}

.woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	min-width: 0;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 1rem;
	padding: 2rem;
	box-sizing: border-box;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content a {
	color: #008080;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------------
 * Shared form look: labels/inputs/buttons (login, register, addresses, account details)
 * ------------------------------------------------------------------------------- */

.woocommerce-form-row {
	margin: 0 0 1.25rem;
}

.woocommerce-form-row label,
.woocommerce-address-fields__field-wrapper label {
	display: block;
	margin-bottom: 0.375rem;
	color: #666;
	font-weight: 600;
	font-size: 0.8125rem;
}

.woocommerce-Input,
.woocommerce-address-fields__field-wrapper input.input-text,
.woocommerce-address-fields__field-wrapper select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 0.5rem;
	color: #333;
	font-size: 0.9375rem;
}

.woocommerce-Input:focus,
.woocommerce-address-fields__field-wrapper input.input-text:focus,
.woocommerce-address-fields__field-wrapper select:focus {
	border-color: #008080;
	box-shadow: 0 0 0 1px #008080;
	outline: none;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: #333;
}

.woocommerce-button.button,
.woocommerce-Button.button {
	display: inline-flex;
	align-items: center;
	background: #008080;
	border: none;
	border-radius: 9999px;
	padding: 0.875rem 2rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.woocommerce-button.button:hover,
.woocommerce-Button.button:hover {
	background: #006666;
	color: #fff;
}

.woocommerce-button.wc-forward,
a.woocommerce-Button.wc-forward {
	background: #333;
}

.woocommerce-button.wc-forward:hover,
a.woocommerce-Button.wc-forward:hover {
	background: #1a1a1a;
}

fieldset {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 0.75rem;
}

fieldset legend {
	padding: 0 0.5rem;
	color: #333;
	font-weight: 700;
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------------
 * Login / Register
 * ------------------------------------------------------------------------------- */

#customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media ( min-width: 700px ) {
	#customer_login.u-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
	margin-top: 0;
	color: #333;
	font-weight: 800;
	font-size: 1.25rem;
}

.woocommerce-LostPassword.lost_password {
	margin-top: 1rem;
	font-size: 0.8125rem;
}

.woocommerce-LostPassword.lost_password a {
	color: #008080;
}

/* ---------------------------------------------------------------------------------
 * Orders table
 * ------------------------------------------------------------------------------- */

.woocommerce-orders-table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table__header {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	color: #666;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: left;
}

.woocommerce-orders-table__cell {
	padding: 1rem;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	color: #333;
	font-size: 0.875rem;
}

.woocommerce-orders-table__cell-order-number a {
	color: #008080;
	font-weight: 700;
}

.woocommerce-orders-table__cell-order-total {
	color: #f97316;
	font-weight: 700;
}

.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.woocommerce-orders-table__cell-order-actions .button {
	padding: 0.5rem 1.25rem;
	font-size: 0.6875rem;
}

.woocommerce-Pagination {
	margin-top: 1.5rem;
	display: flex;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------------------------
 * Addresses
 * ------------------------------------------------------------------------------- */

.u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media ( min-width: 640px ) {
	.u-columns.woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-Address {
	padding: 1.5rem;
	background: #f8f9fa;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 0.75rem;
}

.woocommerce-Address-title.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.woocommerce-Address-title.title h2 {
	margin: 0;
	color: #333;
	font-weight: 700;
	font-size: 1rem;
}

.woocommerce-Address-title.title .edit {
	color: #008080;
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: underline;
}

.woocommerce-Address address {
	color: #666;
	font-size: 0.875rem;
	line-height: 1.7;
	font-style: normal;
}

.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.5rem;
}

@media ( min-width: 640px ) {
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------------------------
 * Dashboard
 * ------------------------------------------------------------------------------- */

.woocommerce-MyAccount-content p {
	color: #666;
	font-size: 0.9375rem;
	line-height: 1.7;
}