/**
 * WooCommerce — order tracking, sign-in and the account offer
 * ==========================================================================
 * The guest tracking page, the sign-in and register gate, the post-purchase
 * account offer, and the form and empty-state rules those screens share.
 *
 * Enqueued by inc/woocommerce-assets.php alongside woocommerce/account.css on
 * account pages, the guest tracking page and the order confirmation. Split
 * from a single account.css that had grown past the ~250-line guidance in
 * PROJECT.md §9.3.
 *
 * Implements UI-LAYOUTS.md §10.
 *
 * @package Preloved
 * @since   1.1.0
 * ========================================================================== */

/* ==========================================================================
   1. Tracking
   ========================================================================== */

.order-tracking {
	margin-block: var(--pl-space-4);
	padding: var(--pl-space-4);
	background-color: var(--pl-bg-sunken);
	border-radius: var(--pl-radius-sm);
}

.order-tracking__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-2) var(--pl-space-6);
	margin: 0 0 var(--pl-space-3);
}

.order-tracking__facts dt {
	margin: 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.order-tracking__facts dd { margin: 0; font-weight: 600; }

.order-tracking__number {
	font-family: var(--pl-font-mono);
	font-size: var(--pl-body-sm);
	letter-spacing: 0.04em;
	user-select: all;
}

.track-order { max-inline-size: 560px; }

.track-order__lead { color: var(--pl-text-secondary); }

.track-order__error {
	padding: var(--pl-space-3) var(--pl-space-4);
	background-color: var(--pl-gold-100);
	border-inline-start: 3px solid var(--pl-sale);
	border-radius: var(--pl-radius-sm);
	color: var(--pl-text);
	font-size: var(--pl-body-sm);
}

.track-result {
	padding: var(--pl-space-5);
	background-color: var(--pl-surface);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-md);
}

.track-result__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-2);
}

.track-result__number { margin: 0; font-size: var(--pl-ui); }

.track-result__detail { margin-block: 0 var(--pl-space-4); color: var(--pl-text-secondary); }

.track-result__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-4);
	padding-block: var(--pl-space-4);
	border-block: 1px solid var(--pl-line-soft);
}

.track-result__facts dt {
	margin-block-end: 2px;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.track-result__facts dd { margin: 0; font-weight: 600; }

.track-result__items-title { margin-block: var(--pl-space-4) var(--pl-space-2); font-size: var(--pl-ui); }

.track-result__items { margin: 0; padding-inline-start: var(--pl-space-5); color: var(--pl-text-secondary); }

.track-result__window { margin-block: var(--pl-space-3) 0; font-size: var(--pl-body-sm); }

.track-result__again { margin-block: var(--pl-space-5) 0; font-size: var(--pl-body-sm); }


/* ==========================================================================
   2. Sign in / register gate
   ========================================================================== */

.account-gate { max-inline-size: 900px; margin-inline: auto; }

.account-gate__lead {
	margin-block-end: var(--pl-space-3);
	color: var(--pl-text-secondary);
}

.account-gate__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-2);
	margin-block-end: var(--pl-space-6);
	padding: var(--pl-space-3) var(--pl-space-4);
	background-color: var(--pl-peach-50);
	border-radius: var(--pl-radius-sm);
	font-size: var(--pl-body-sm);
}

.account-gate__track .icon { color: var(--pl-primary); }

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

@media (min-width: 768px) {
	.account-gate__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.account-gate__panels--single { grid-template-columns: minmax(0, 480px); }
}

.account-gate__panel {
	padding: var(--pl-space-5);
	background-color: var(--pl-surface);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-md);
}

.account-gate__title { margin-block: 0 var(--pl-space-3); font-size: var(--pl-h4); }

.account-gate__note {
	margin-block: 0 var(--pl-space-4);
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.account-gate__lost { margin-block: var(--pl-space-3) 0; font-size: var(--pl-body-sm); }


/* ==========================================================================
   3. Post-purchase account offer
   ========================================================================== */

.account-offer {
	max-inline-size: 640px;
	margin: var(--pl-space-8) auto 0;
	padding: var(--pl-space-5);
	background-color: var(--pl-surface);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-md);
	text-align: start;
}

.account-offer__title { margin-block: 0 var(--pl-space-2); font-size: var(--pl-h4); }

.account-offer__lead {
	margin-block: 0 var(--pl-space-4);
	font-size: var(--pl-body-sm);
	color: var(--pl-text-secondary);
}

.account-offer__fields {
	display: grid;
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-4);
}

@media (min-width: 640px) {
	.account-offer__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.account-offer__status {
	margin-block: 0 var(--pl-space-3);
	padding: var(--pl-space-2) var(--pl-space-3);
	border-radius: var(--pl-radius-sm);
	font-size: var(--pl-body-sm);
}

.account-offer__status.is-error { background-color: var(--pl-gold-100); color: var(--pl-text); }
/* `--pl-success`, not `--pl-grade-a-text`. Identical value, but a status badge
   borrowing a condition-grade token means the grade ramp cannot be restyled
   without breaking the account page — which is exactly what happened. */
.account-offer__status.is-success { background-color: var(--pl-green-100); color: var(--pl-success); }

/* Declining must read as a real, cost-free option, not a dead end. */
.account-offer__dismiss {
	margin-block: var(--pl-space-3) 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}


/* ==========================================================================
   4. Shared form and empty states
   ========================================================================== */

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

.woocommerce-account .form-row label,
.account-offer .form-row label,
.track-order .form-row label {
	display: block;
	margin-block-end: var(--pl-space-1);
	font-size: var(--pl-body-sm);
	font-weight: 600;
}

.form-row__hint {
	display: block;
	margin-block-start: var(--pl-space-1);
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.woocommerce-account .input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.account-offer .input,
.track-order .input {
	inline-size: 100%;
	min-block-size: 48px;
	padding: var(--pl-space-2) var(--pl-space-3);
	background-color: var(--pl-bg-elevated);
	border: 1px solid var(--pl-border-field);
	border-radius: var(--pl-radius-sm);
	color: var(--pl-text);
	font-family: inherit;
	/* 16px minimum, or iOS zooms the viewport on focus. */
	font-size: var(--pl-ui);
}

.account-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pl-space-3);
	padding-block: var(--pl-space-8);
	text-align: center;
}

.account-empty__icon { color: var(--pl-text-disabled); }
.account-empty__title { margin: 0; font-size: var(--pl-h3); }
.account-empty__text { margin: 0; max-inline-size: 44ch; color: var(--pl-text-muted); }