/**
 * WooCommerce — My Account, order tracking and the account offer
 * ==========================================================================
 * Enqueued by inc/woocommerce-assets.php on account pages, the guest tracking
 * page and the order-confirmation page.
 *
 * Implements UI-LAYOUTS.md §10. Sidebar 240px on desktop, a horizontal
 * scrolling tab strip on mobile (§10.2); order history is stacked cards, never
 * a table, because a six-column table is unreadable at 360px.
 *
 * @package Preloved
 * @since   1.1.0
 * ========================================================================== */

.account-page { padding-block: var(--pl-space-6) var(--pl-space-10); }


/* ==========================================================================
   1. Layout
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-5);
	align-items: start;
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--pl-space-8);
	}
}

/* The login/register screen is one full-width panel, not a sidebar layout. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }


/* ==========================================================================
   2. Navigation
   ========================================================================== */

.account-nav__identity {
	padding-block-end: var(--pl-space-4);
	margin-block-end: var(--pl-space-3);
	border-block-end: 1px solid var(--pl-line-soft);
}

.account-nav__name {
	margin: 0;
	font-family: var(--pl-font-display);
	font-size: var(--pl-h4);
}

.account-nav__phone {
	margin: var(--pl-space-1) 0 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
	font-variant-numeric: tabular-nums;
}

.account-nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-nav__link {
	display: flex;
	align-items: center;
	gap: var(--pl-space-3);
	min-block-size: 44px;
	padding-inline: var(--pl-space-3);
	/* The active marker is an inline-start bar (UI-LAYOUTS §10.1). */
	border-inline-start: 3px solid transparent;
	border-radius: var(--pl-radius-sm);
	color: var(--pl-text-secondary);
	font-size: var(--pl-body-sm);
	font-weight: 500;
	text-decoration: none;
}

.account-nav__link:hover { background-color: var(--pl-bg-sunken); color: var(--pl-text); }

.account-nav__item.is-active .account-nav__link {
	border-inline-start-color: var(--pl-primary);
	background-color: var(--pl-peach-50);
	color: var(--pl-primary);
	font-weight: 600;
}

.account-nav__link .icon { flex: 0 0 auto; color: currentcolor; }

/*
 * Mobile: a horizontal scrolling tab strip (§10.2). The identity block is
 * hidden here — the page title already says whose account this is, and the
 * strip needs the width.
 */
@media (max-width: 1023px) {
	.account-nav__identity { display: none; }

	.account-nav__list {
		flex-direction: row;
		gap: var(--pl-space-1);
		overflow-x: auto;
		padding-block-end: var(--pl-space-2);
		margin-block-end: var(--pl-space-4);
		border-block-end: 1px solid var(--pl-line-soft);
		/* Momentum scroll without a visible bar eating vertical space. */
		scrollbar-width: none;
	}

	.account-nav__list::-webkit-scrollbar { display: none; }

	.account-nav__link {
		border-inline-start: 0;
		border-block-end: 2px solid transparent;
		border-radius: 0;
		white-space: nowrap;
	}

	.account-nav__item.is-active .account-nav__link {
		background: none;
		border-block-end-color: var(--pl-primary);
	}
}


/* ==========================================================================
   3. Order history
   ========================================================================== */

.order-list {
	display: grid;
	gap: var(--pl-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-card {
	display: grid;
	gap: var(--pl-space-2);
	padding: var(--pl-space-4);
	background-color: var(--pl-surface);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-md);
}

.order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-space-2);
}

.order-card__number { margin: 0; font-weight: 600; }
.order-card__number a { color: inherit; text-decoration: none; }
.order-card__number a:hover { color: var(--pl-primary); }

.order-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-1) var(--pl-space-3);
	margin: 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

/* Separator that disappears cleanly when the row wraps. */
.order-card__meta span + span::before {
	content: "·";
	margin-inline-end: var(--pl-space-3);
	color: var(--pl-line);
}

.order-card__total {
	margin: 0;
	font-family: var(--pl-font-display);
	font-size: var(--pl-ui);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.order-card__actions { margin: var(--pl-space-1) 0 0; }


/* ==========================================================================
   4. Status badges
   ========================================================================== */

/*
 * Never colour alone (PROJECT.md §6.5) — every badge carries its own label,
 * so the distinction survives greyscale and colour blindness.
 */
/* See account-forms.css — status colours come from the feedback ramp, never
   from a condition-grade token. */
.badge--status-success { background: var(--pl-green-100); color: var(--pl-success); }
.badge--status-info    { background: var(--pl-green-50);  color: var(--pl-info); }
.badge--status-warning { background: var(--pl-gold-100);  color: var(--pl-warning); }
.badge--status-muted   { background: var(--pl-bg-sunken); color: var(--pl-text-muted); }

.order-status__detail {
	margin: var(--pl-space-2) 0 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}