/**
 * My Account — full branded overhaul of WooCommerce's account area.
 *
 * Loaded only on is_account_page() (layali_enqueue_account_styles). Targets
 * WC's default markup — no template overrides:
 *   - logged out: form.woocommerce-form-login (centered card)
 *   - logged in:  .woocommerce-MyAccount-navigation (sidebar) +
 *                 .woocommerce-MyAccount-content (orders, addresses, forms)
 *
 * Layout switches on the body `logged-in` class so the login page centers a
 * single card while the dashboard is a two-column grid.
 */

/* ---------- Shared field + button language ---------- */

body.woocommerce-account .woocommerce-Input,
body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce input[type="text"],
body.woocommerce-account .woocommerce input[type="email"],
body.woocommerce-account .woocommerce input[type="tel"],
body.woocommerce-account .woocommerce input[type="password"],
body.woocommerce-account .woocommerce select {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border: 1.5px solid var( --ly-color-border, #e6ddd6 );
	border-radius: 12px;
	background: #ffffff;
	/* 16px floor — smaller triggers iOS auto-zoom on focus. */
	font-size: 16px;
	font-family: var( --ly-text-body, 'DM Sans', sans-serif );
	color: var( --ly-color-text, #3d1d46 );
	line-height: 1.3;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.woocommerce-account .woocommerce-Input:focus,
body.woocommerce-account .woocommerce input:focus,
body.woocommerce-account .woocommerce select:focus {
	border-color: var( --ly-color-primary, #53225e );
	box-shadow: 0 0 0 3px var( --ly-color-secondary-soft, #ffe2e3 );
}

body.woocommerce-account .woocommerce label {
	display: inline-block;
	margin: 0 0 7px;
	font-family: var( --ly-text-body, 'DM Sans', sans-serif );
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --ly-color-primary, #53225e );
}

body.woocommerce-account .woocommerce .required {
	color: var( --ly-color-secondary, #ff7477 );
	border: 0;
}

/* All account buttons → plum pill (Log in, Save changes, Save address, View…). */
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 1.5px solid var( --ly-color-primary, #53225e );
	border-radius: 999px;
	background: var( --ly-color-primary, #53225e );
	color: #ffffff;
	font-family: var( --ly-text-body, 'DM Sans', sans-serif );
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover,
body.woocommerce-account .woocommerce a.button:hover {
	background: var( --ly-color-primary-dark, #3d1846 );
	border-color: var( --ly-color-primary-dark, #3d1846 );
	color: #ffffff;
	transform: translateY( -1px );
}

/* Secondary (outline) buttons — e.g. the address "Edit" / row actions. */
body.woocommerce-account .woocommerce a.button.alt--ghost,
body.woocommerce-account .woocommerce .woocommerce-Address a.edit {
	background: transparent;
	color: var( --ly-color-primary, #53225e );
}

/* ---------- Notices ---------- */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-left: 4px solid var( --ly-color-primary, #53225e );
	border-radius: 12px;
	background: var( --ly-color-cream, #fbf5ef );
	color: var( --ly-color-text, #3d1d46 );
	list-style: none;
	font-size: 0.95rem;
}

body.woocommerce-account .woocommerce-error {
	border-left-color: var( --ly-color-secondary, #ff7477 );
	background: var( --ly-color-secondary-soft, #ffe2e3 );
}

body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-error a,
body.woocommerce-account .woocommerce-info a {
	color: var( --ly-color-primary, #53225e );
	font-weight: 600;
}

/* =============================================================================
   LOGIN (logged out) — centered branded card
   ============================================================================= */

/* Drop the redundant "My account" page title on the login screen — the form's
   own "Login" heading is the page heading there. The dashboard keeps its title. */
body.woocommerce-account:not( .logged-in ) .page-header {
	display: none;
}

body.woocommerce-account:not( .logged-in ) .woocommerce {
	max-width: 460px;
	margin: 8px auto 56px;
}

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	margin: 0;
	padding: 36px 34px;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-radius: var( --ly-radius-xl, 24px );
	background: #ffffff;
	box-shadow: var( --ly-shadow-md, 0 18px 44px rgba( 40, 20, 40, 0.08 ) );
}

body.woocommerce-account .woocommerce-form-login .form-row {
	margin: 0 0 18px;
	padding: 0;
}

/* Password field with the show/hide eye toggle. */
body.woocommerce-account .woocommerce-password-input {
	position: relative;
	display: block;
}
body.woocommerce-account .woocommerce-password-input input {
	padding-right: 48px;
}
body.woocommerce-account .show-password-input {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY( -50% );
	color: var( --ly-color-text-muted, #9a8fa0 );
	cursor: pointer;
}
body.woocommerce-account .show-password-input.display-password::after {
	color: var( --ly-color-primary, #53225e );
}

/* Remember-me + submit on one row. */
body.woocommerce-account .woocommerce-form-login__submit {
	width: 100%;
	margin: 4px 0 0;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --ly-color-text, #3d1d46 );
	cursor: pointer;
}
body.woocommerce-account .woocommerce-form-login__rememberme span {
	font-weight: 500;
	color: inherit;
}
body.woocommerce-account .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var( --ly-color-primary, #53225e );
}

body.woocommerce-account .woocommerce-LostPassword {
	margin: 18px 0 0;
	text-align: center;
	font-size: 0.9rem;
}
body.woocommerce-account .woocommerce-LostPassword a {
	color: var( --ly-color-primary, #53225e );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================================
   DASHBOARD (logged in) — sidebar + content
   ============================================================================= */

body.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: 40px;
	align-items: start;
	max-width: 1140px;
	margin: 8px 0 64px;
}

/* Explicit placement — WC prepends an (often empty) .woocommerce-notices-wrapper
   as the first child; without this it eats grid cell 1 and shunts the nav into
   column 2 with the content wrapping below. Pin nav→col1, content→col2, and let
   notices span the full width on top. */
body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
	grid-column: 1;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	grid-column: 2;
}

/* ---------- Navigation sidebar ---------- */

.woocommerce-MyAccount-navigation {
	float: none !important;
	width: auto !important;
	padding: 12px;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-radius: var( --ly-radius-xl, 24px );
	background: var( --ly-color-cream, #fbf5ef );
	position: sticky;
	top: 24px;
}

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

.woocommerce-MyAccount-navigation li {
	margin: 2px 0;
	border: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: 14px;
	font-family: var( --ly-text-body, 'DM Sans', sans-serif );
	font-size: 0.98rem;
	font-weight: 600;
	color: var( --ly-color-primary, #53225e );
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var( --ly-nav-icon ) center / contain no-repeat;
	mask: var( --ly-nav-icon ) center / contain no-repeat;
	opacity: 0.9;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: #ffffff;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var( --ly-color-primary, #53225e );
	color: #ffffff;
}

/* Per-endpoint icons (currentColor masks). */
.woocommerce-MyAccount-navigation-link--dashboard a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--orders a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--downloads a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--edit-address a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--edit-account a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	--ly-nav-icon: url( "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E" );
}

/* ---------- Content panel ---------- */

.woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	min-width: 0;
	padding: 32px 34px;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-radius: var( --ly-radius-xl, 24px );
	background: #ffffff;
}

.woocommerce-MyAccount-content p {
	color: var( --ly-color-text, #3d1d46 );
	line-height: 1.6;
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var( --ly-color-primary, #53225e );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
	font-family: var( --ly-text-heading, 'Bricolage Grotesque', sans-serif );
	color: var( --ly-color-primary, #53225e );
}

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

.woocommerce-orders-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.95rem;
}

.woocommerce-orders-table thead th {
	padding: 12px 14px;
	border: 0;
	border-bottom: 2px solid var( --ly-color-border, #ece6e0 );
	font-family: var( --ly-text-body, 'DM Sans', sans-serif );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ly-color-text-muted, #9a8fa0 );
	text-align: left;
}

.woocommerce-orders-table tbody td {
	padding: 16px 14px;
	border: 0;
	border-bottom: 1px solid var( --ly-color-border, #f0eae4 );
	color: var( --ly-color-text, #3d1d46 );
	vertical-align: middle;
}

.woocommerce-orders-table .order-status {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var( --ly-color-cream, #fbf5ef );
	color: var( --ly-color-primary, #53225e );
	font-size: 0.8rem;
	font-weight: 600;
}

.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button {
	padding: 8px 18px;
	font-size: 0.85rem;
	margin: 2px;
}

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

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 8px 0 0;
}

.woocommerce-Address {
	width: auto !important;
	float: none !important;
	padding: 24px;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-radius: var( --ly-radius-lg, 18px );
	background: var( --ly-color-cream, #fbf5ef );
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.15rem;
}
.woocommerce-Address-title .edit {
	flex: 0 0 auto;
	padding: 7px 16px;
	font-size: 0.8rem;
}
.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var( --ly-color-text, #3d1d46 );
}

/* ---------- Forms (account details, edit address) ---------- */

.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
	margin: 28px 0 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var( --ly-color-border, #ece6e0 );
}
.woocommerce-EditAccountForm legend {
	padding: 0;
	font-size: 1.05rem;
	font-weight: 700;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
	margin: 0 0 18px;
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-last {
	width: calc( 50% - 9px );
	display: inline-block;
	vertical-align: top;
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first {
	margin-right: 14px;
}
.woocommerce-EditAccountForm span.description,
.woocommerce-account .woocommerce em {
	font-size: 0.85rem;
	color: var( --ly-color-text-muted, #9a8fa0 );
}

/* ---------- Mobile ---------- */

@media ( max-width: 860px ) {
	body.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.woocommerce-MyAccount-navigation {
		position: static;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.woocommerce-MyAccount-navigation li {
		margin: 0;
	}
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 560px ) {
	.woocommerce-MyAccount-content {
		padding: 22px 18px;
	}
	body.woocommerce-account .woocommerce-form-login {
		padding: 28px 20px;
	}
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-address-fields .form-row-first,
	.woocommerce-EditAccountForm .form-row-last,
	.woocommerce-address-fields .form-row-last {
		width: 100%;
		margin-right: 0;
	}
	.woocommerce-orders-table thead {
		display: none;
	}
	.woocommerce-orders-table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
		padding: 10px 0;
	}
	.woocommerce-orders-table tbody td::before {
		content: attr( data-title );
		font-weight: 700;
		color: var( --ly-color-text-muted, #9a8fa0 );
	}
	.woocommerce-orders-table tbody tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var( --ly-color-border, #ece6e0 );
	}
}