/**
 * My Account: login/register split card (logged-out), dashboard nav +
 * content grid (logged-in). Both reuse the shared .form-row field system
 * and notice component from components.css — nothing duplicated here.
 */

/* =====================================================================
   Login / Register (logged-out) — WooCommerce's native
   #customer_login.u-columns.col2-set already splits login/register into
   two columns; this just skins it to match the reference card.
   ===================================================================== */

#customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	max-width: 900px;
	margin-inline: auto;
	overflow: hidden;
	position: relative;
}
#customer_login .u-column1,
#customer_login .u-column2 {
	padding: var(--space-7);
}
/* Register column sits at the reading-end side (left in RTL, right in LTR)
   — column 2 in DOM order, matching the reference. */
#customer_login .u-column2 {
	background: var(--color-surface);
	position: relative;
	overflow: hidden;
	border-inline-start: 1px solid var(--color-border);
}
#customer_login .u-column2::before {
	content: '';
	position: absolute;
	top: -60px;
	inset-inline-start: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%);
}

#customer_login h2 {
	font-size: var(--text-xl);
	margin-block-end: var(--space-2);
}
#customer_login .u-column1 h2::after {
	content: '👋';
	margin-inline-start: var(--space-2);
	font-size: var(--text-lg);
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	margin-block-end: var(--space-4);
}
.woocommerce-form-login p.form-row:has(> button) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap-reverse;
	gap: var(--space-3);
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	width: 100%;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-weight: var(--font-weight-bold);
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover { background: var(--color-accent-strong); }

/* Every other My Account submit button (lost/reset password, account
   details, addresses) — WooCommerce doesn't share one class across these
   templates (some use .woocommerce-Button, the address form uses a bare
   .button), so cover both. This file only loads on account pages, so an
   unscoped selector here can't bleed into checkout/cart. */
button.woocommerce-Button,
.woocommerce-MyAccount-content form button.button {
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-weight: var(--font-weight-bold);
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}
button.woocommerce-Button:hover,
.woocommerce-MyAccount-content form button.button:hover { background: var(--color-accent-strong); }

.woocommerce-LostPassword {
	font-size: var(--text-sm);
	margin-block-start: var(--space-3);
}
.woocommerce-LostPassword a { color: var(--color-accent-strong); text-decoration: underline; }

#customer_login .u-column2 p:not(.form-row) {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
	margin-block-end: var(--space-5);
}
#customer_login .u-column2 p:not(.form-row) a { color: var(--color-accent-strong); text-decoration: underline; }

/* Icon accents inside the username/email/password fields, matching the
   reference's in-field icons. */
#username, #reg_email {
	padding-inline-end: var(--space-7);
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

/* Password fields: WooCommerce's own JS (woocommerce.js) wraps every
   password input in span.password-input and appends a native show/hide
   toggle button — no theme markup involved. Style that toggle as the
   field's icon slot instead of layering a second, non-interactive icon
   on top of it. Applies wherever a password field appears (login,
   account details, reset password). */
.password-input {
	position: relative;
	display: block;
}
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-inline-end: var(--space-7);
}
.show-password-input {
	position: absolute;
	inset-inline-end: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 20px;
	cursor: pointer;
}
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 8 11 8a21.6 21.6 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") no-repeat center / 20px;
}

/* =====================================================================
   Dashboard (logged-in): nav + content
   ===================================================================== */

.myaccount-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-7);
	align-items: start;
}

.woocommerce-MyAccount-navigation {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: sticky;
	top: calc(84px + var(--space-5));
}
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; }
.woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation li:last-child { border-block-end: none; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	transition: background-color var(--transition-fast);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-surface); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-primary);
	color: var(--color-text-on-primary);
	font-weight: var(--font-weight-bold);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-error);
}

.myaccount-layout__content { min-width: 0; }
.woocommerce-MyAccount-content > p a { color: var(--color-accent-strong); text-decoration: underline; }

/* ---- Orders table ---- */
table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
table.woocommerce-orders-table th {
	text-align: start;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding-block-end: var(--space-3);
	border-block-end: 1px solid var(--color-border);
}
table.woocommerce-orders-table td {
	padding-block: var(--space-4);
	border-block-end: 1px solid var(--color-border);
	font-size: var(--text-sm);
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	text-align: end;
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button {
	display: inline-flex;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-strong);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	margin-inline-start: var(--space-2);
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button:hover {
	border-color: var(--color-accent);
	color: var(--color-accent-strong);
}

/* Status badge coloring — targets the row's native status class, no PHP change needed. */
.woocommerce-orders-table__cell-order-status { font-weight: var(--font-weight-bold); }
tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--color-success);
}
tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	color: var(--color-warning);
}
tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: var(--color-error);
}

/* ---- View order ---- */
ol.woocommerce-OrderUpdates { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-4); }
.woocommerce-OrderUpdate-inner {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.woocommerce-OrderUpdate-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-block-end: var(--space-1); }

/* ---- Addresses ---- */
.woocommerce-Address {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--space-3);
}
.woocommerce-Address-title h2 { font-size: var(--text-md); }
.woocommerce-Address-title .edit {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent-strong);
	text-decoration: underline;
}
.woocommerce-Address address { background: transparent; padding: 0; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 767px) {
	#customer_login { grid-template-columns: 1fr; max-width: 480px; }
	#customer_login .u-column2 { border-inline-start: none; border-block-start: 1px solid var(--color-border); }
}

@media (max-width: 991px) {
	.myaccount-layout { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.woocommerce-MyAccount-navigation li { border-block-end: none; border-inline-end: 1px solid var(--color-border); }
	.woocommerce-MyAccount-navigation li:last-child { border-inline-end: none; }
}

@media (max-width: 576px) {
	.woocommerce-MyAccount-navigation ul { flex-direction: column; }
	.woocommerce-MyAccount-navigation li { border-inline-end: none; border-block-end: 1px solid var(--color-border); }
	.woocommerce-MyAccount-navigation li:last-child { border-block-end: none; }

	table.woocommerce-orders-table thead { display: none; }
	table.woocommerce-orders-table, table.woocommerce-orders-table tbody, table.woocommerce-orders-table tr, table.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}
	table.woocommerce-orders-table tr {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		margin-block-end: var(--space-4);
		padding: var(--space-4);
	}
	table.woocommerce-orders-table td {
		border-block-end: none;
		padding-block: var(--space-1);
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
	}
	table.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-weight: var(--font-weight-bold);
		color: var(--color-text-muted);
		flex-shrink: 0;
	}
	table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { justify-content: flex-start; padding-block-start: var(--space-3); }
	table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a.button { margin-inline-start: 0; margin-inline-end: var(--space-2); }
}