/* =============================================================================
   ACCOUNT — WooCommerce My Account (patient account layout)
   -----------------------------------------------------------------------------
   Loaded only on is_account_page(), after woocommerce.css (inc/assets.php).
   Default Woo markup/classes, skinned with CSS only. Every color/font/radius is a
   theme token (base.css → Elementor globals), so each client gets its own brand:

     page        --color-surface      cards   --color-card      lines  --color-border
     text        --color-text         muted   --color-muted     soft   --color-surface-alt
     primary     --color-primary (+ --color-on-dark text)       focus  --focus-ring
     headings    --font-heading       UI      --font-body       radius --radius-card

   Endpoints: dashboard, orders, view-order, downloads, edit-address (+ form),
   payment-methods, edit-account, login/register, lost/reset password.
   ============================================================================= */

.woocommerce-account {
	--account-radius: max(var(--radius-card, 16px), 0px);
	--account-radius-sm: min(var(--account-radius), 12px);
	--account-gap: var(--space-6);
	--account-pad: var(--space-6);
	--account-link-line: color-mix(in srgb, var(--color-primary) 30%, transparent);

	background-color: var(--color-surface);
	color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   Page shell: wider than Hello's 1140, no Woo floats/clearfix
   ----------------------------------------------------------------------------- */

body.woocommerce-account:not([class*="elementor-page-"]) .site-main,
body.woocommerce-account .site-main {
	width: min(100% - 2 * var(--space-7), 1400px);
	max-width: none;
	margin: 0 auto;
	padding: var(--space-7) 0 var(--space-8);
}

.woocommerce-account .page-header .entry-title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: var(--weight-heading);
	color: var(--color-heading);
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
	content: none;
	display: none;
}

.woocommerce-account :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .col2-set, .col-1, .col-2, .u-column1, .u-column2) {
	float: none;
	width: auto;
	max-width: none;
}

/* -----------------------------------------------------------------------------
   Logged in: sticky nav card + content card
   ----------------------------------------------------------------------------- */

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--account-gap);
	align-items: start;
}

.woocommerce-account.logged-in .woocommerce > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius);
	background: var(--color-card);
}

.woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--space-5) + var(--wp-admin--admin-bar--height, 0px));
	padding: var(--space-3);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

body .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--account-radius-sm);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

body .woocommerce-MyAccount-navigation a:hover {
	background: var(--color-surface-alt);
	color: var(--color-heading);
}

body .woocommerce-MyAccount-navigation .is-active a,
body .woocommerce-MyAccount-navigation .is-active a:hover {
	background: var(--color-primary);
	color: var(--color-on-dark);
}

body .woocommerce-MyAccount-navigation a:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.woocommerce-MyAccount-content {
	min-width: 0;
	padding: var(--account-pad);
	font-size: var(--text-base);
	line-height: 1.6;
}

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

.woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

.woocommerce-MyAccount-content p {
	margin: 0 0 var(--space-4);
}

.woocommerce-account .woocommerce :is(h2, h3):not([class*="nova-"]) {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-h5);
	font-weight: var(--weight-heading);
	color: var(--color-heading);
}

/* Text links (not buttons): primary, soft underline. */
.woocommerce-account .woocommerce :is(p, td, address, li:not([class*="navigation-link"]), .woocommerce-LostPassword, .woocommerce-privacy-policy-text) a:not(.button):not(.woocommerce-button) {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--account-link-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce :is(p, td, address, .woocommerce-LostPassword) a:not(.button):hover {
	text-decoration-color: currentColor;
}

/* Order status / number marks. */
.woocommerce-account mark {
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--color-surface-alt);
	color: var(--color-heading);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Logged out: login + register cards; lost password as one card
   ----------------------------------------------------------------------------- */

.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: none;
	margin: 0;
}

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.woocommerce-account #customer_login > div {
	display: flex;
	flex-direction: column;
	padding: var(--account-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius);
	background: var(--color-card);
}

.woocommerce-account #customer_login :is(.woocommerce-form-login, .woocommerce-form-register) {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* A single form (registration off, lost/reset password): one centered card. */
.woocommerce-account:not(.logged-in) .woocommerce > :is(form.woocommerce-form-login, form.lost_reset_password, form.woocommerce-ResetPassword) {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--account-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius);
	background: var(--color-card);
}

.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
	max-width: 520px;
	margin: 0 auto var(--space-5);
}

.woocommerce-account:not(.logged-in) #customer_login ~ *,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:has(+ #customer_login) {
	max-width: none;
}

.woocommerce-account form.lost_reset_password > p:first-child {
	color: var(--color-muted);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-text);
}

/* Rows holding a submit button: the button keeps its natural (site CTA) width. */
.woocommerce-account .woocommerce form :is(.form-row, p):has(> button[type="submit"], > .woocommerce-Button, > .woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
}

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

/* -----------------------------------------------------------------------------
   Forms (login, register, account details, addresses)
   ----------------------------------------------------------------------------- */

.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 var(--space-4);
}

.woocommerce-account .woocommerce form .form-row label {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-heading);
}

.woocommerce-account .woocommerce form :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea) {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}

.woocommerce-account .woocommerce form :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea):focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: var(--focus-ring);
}

.woocommerce-account .woocommerce form .form-row :is(span em, .description) {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	font-style: normal;
	color: var(--color-muted);
}

/* Account details + address forms: 2 columns, wide rows full width. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-5);
}

.woocommerce-EditAccountForm > :not(.form-row-first, .form-row-last),
.woocommerce-address-fields__field-wrapper > :not(.form-row-first, .form-row-last) {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce form :is(.form-row-first, .form-row-last, .form-row-wide) {
	float: none;
	width: auto;
}

.woocommerce-EditAccountForm fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-5);
	margin: var(--space-4) 0 var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius-sm);
}

.woocommerce-EditAccountForm fieldset > * {
	grid-column: 1 / -1;
}

.woocommerce-EditAccountForm fieldset legend {
	padding: 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-h6);
	font-weight: var(--weight-heading);
	color: var(--color-heading);
}

.woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-address-fields > p:last-child {
	margin: var(--space-2) 0 0;
}

/* Show-password toggle: woocommerce.css (shared with the checkout login form). */

/* Buttons: the site's primary CTA (kit), link-buttons from woocommerce.css. */
.woocommerce-account .woocommerce :is(button.button, button.woocommerce-Button, input.button):not(.show-password-input) {
	margin-top: var(--space-1);
}

/* -----------------------------------------------------------------------------
   Tables: orders, downloads, payment methods, order details
   ----------------------------------------------------------------------------- */

.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-MyAccount-paymentMethods {
	width: 100%;
	margin: 0 0 var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--text-sm);
}

/* body.* prefix: beats Hello's table defaults (striped rows, thead:first-child borders). */
body.woocommerce-account table.shop_table tr > :is(th, td),
body.woocommerce-account table.woocommerce-MyAccount-paymentMethods tr > :is(th, td) {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: transparent;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-account table.shop_table thead tr > th,
body.woocommerce-account table.woocommerce-MyAccount-paymentMethods thead tr > th {
	background: var(--color-surface-alt);
	color: var(--color-heading);
	font-weight: 600;
}

body.woocommerce-account table.shop_table tbody tr:last-child > :is(th, td),
body.woocommerce-account table.shop_table tfoot tr:last-child > :is(th, td) {
	border-bottom: 0;
}

.woocommerce-account table.shop_table tfoot th {
	font-weight: 600;
	color: var(--color-heading);
}

.woocommerce-account table :is(.woocommerce-orders-table__cell-order-actions, .payment-method-actions, .download-file) {
	text-align: right;
}

.woocommerce-account table :is(.woocommerce-orders-table__cell-order-actions, .payment-method-actions) .button {
	margin: 2px 0 2px var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.woocommerce-account .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

/* View order */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	margin-top: var(--space-6);
}

.woocommerce-account .woocommerce-order-details .product-quantity {
	color: var(--color-muted);
}

.woocommerce-account .woocommerce-order-details .wc-item-meta {
	margin: var(--space-1) 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-muted);
}

.woocommerce-account .woocommerce-OrderUpdates {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-OrderUpdate {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius-sm);
}

.woocommerce-account .woocommerce-OrderUpdate-meta {
	margin: 0 0 var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

/* Select2 (country/state) spans the field like every other input. */
.woocommerce-account .woocommerce form .select2-container {
	width: 100% !important;
}

.woocommerce-account .woocommerce form .select2-container .select2-selection--single {
	min-height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
}

/* -----------------------------------------------------------------------------
   Add payment method (my-account/add-payment-method)
   The gateway list is a plain column on the same left edge as the card fields and
   the button under it (a browser indents a <ul> by 40px), and the radio sits on
   the gateway name's line.
   ----------------------------------------------------------------------------- */

#add_payment_method #payment ul.payment_methods {
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

#add_payment_method #payment ul.payment_methods > li {
	margin: 0 0 var(--space-3);
}

#add_payment_method #payment ul.payment_methods > li > input[type="radio"] {
	margin: 0 var(--space-2) 0 0;
	vertical-align: middle;
}

#add_payment_method #payment ul.payment_methods > li > label {
	vertical-align: middle;
}

#add_payment_method #payment .payment_box {
	margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------------
   Addresses (my-account/edit-address + view-order customer details)
   ----------------------------------------------------------------------------- */

.woocommerce-account :is(.woocommerce-Addresses, .woocommerce-customer-details .col2-set) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin: var(--space-4) 0 0;
}

.woocommerce-account :is(.woocommerce-Address, .woocommerce-customer-details .woocommerce-column),
.woocommerce-account .woocommerce-customer-details > address {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--account-radius-sm);
	background: var(--color-card);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-3);
}

.woocommerce-account .woocommerce-Address-title :is(h2, h3) {
	margin: 0;
	font-size: var(--text-h6);
}

.woocommerce-account .woocommerce-Address-title a.edit {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--account-link-line);
	text-underline-offset: 3px;
}

.woocommerce-account address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--color-text);
}

.woocommerce-account address p {
	margin: 0;
}

/* -----------------------------------------------------------------------------
   Notices + empty states inside the content card
   ----------------------------------------------------------------------------- */

.woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
	border-radius: var(--account-radius-sm);
}

.woocommerce-MyAccount-content .woocommerce-info:has(.button) {
	flex-direction: row-reverse;
	justify-content: flex-end;
	padding: var(--space-5);
	border-left-width: 1px;
	border-left-color: var(--color-border);
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.woocommerce-MyAccount-content .woocommerce-info:has(.button) .button {
	margin-left: auto;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	body.woocommerce-account:not([class*="elementor-page-"]) .site-main,
	body.woocommerce-account .site-main {
		width: min(100% - 2 * var(--space-6), 1400px);
	}

	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: var(--space-5);
	}

	.woocommerce-account {
		--account-pad: var(--space-5);
	}
}

@media (max-width: 760px) {
	body.woocommerce-account:not([class*="elementor-page-"]) .site-main,
	body.woocommerce-account .site-main {
		width: min(100% - 2 * var(--space-4), 1400px);
		padding: var(--space-5) 0 var(--space-7);
	}

	.woocommerce-account .page-header .entry-title {
		margin-bottom: var(--space-5);
		font-size: var(--text-h4);
	}

	.woocommerce-account.logged-in .woocommerce,
	.woocommerce-account #customer_login,
	.woocommerce-account :is(.woocommerce-Addresses, .woocommerce-customer-details .col2-set),
	.woocommerce-EditAccountForm,
	.woocommerce-EditAccountForm fieldset,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-MyAccount-navigation {
		position: static;
		padding: var(--space-2);
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	body .woocommerce-MyAccount-navigation a {
		padding: 8px 12px;
		font-size: var(--text-sm);
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.woocommerce-account {
		--account-pad: var(--space-4);
	}

	/* Woo's responsive tables: one card per row, cell labels from data-title. */
	.woocommerce-account table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-account table.shop_table_responsive :is(tbody, tr, th, td) {
		display: block;
	}

	.woocommerce-account table.shop_table_responsive tbody tr {
		border-bottom: 1px solid var(--color-border);
	}

	.woocommerce-account table.shop_table_responsive tbody tr:last-child {
		border-bottom: 0;
	}

	body.woocommerce-account table.shop_table_responsive tbody tr > :is(th, td) {
		display: block;
		padding: var(--space-2) var(--space-4);
		border: 0;
		text-align: right;
	}

	body.woocommerce-account table.shop_table_responsive tbody tr > :is(th, td)[data-title]::before {
		content: attr(data-title);
		float: left;
		margin-right: var(--space-3);
		font-weight: 600;
		color: var(--color-heading);
		text-align: left;
	}

	.woocommerce-account table.shop_table_responsive tbody tr > :first-child {
		padding-top: var(--space-4);
	}

	.woocommerce-account table.shop_table_responsive tbody tr > :last-child {
		padding-bottom: var(--space-4);
	}

	.woocommerce-account table :is(.woocommerce-orders-table__cell-order-actions, .payment-method-actions) .button {
		margin: 0 0 0 var(--space-2);
	}

	.woocommerce-MyAccount-content .woocommerce-info:has(.button) {
		flex-direction: column;
		align-items: flex-start;
	}

	.woocommerce-MyAccount-content .woocommerce-info:has(.button) .button {
		margin-left: 0;
	}
}