/*
 * Consignment tracking page ([palletways-tracking]). Built on the V2 theme's tokens
 * (theme.json presets and custom values) so it follows light and dark mode with the rest
 * of the skin. Fonts come from the theme.
 */

.pw-track {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl, 2rem);
	width: 100%;
	max-width: 760px;
	color: var(--wp--preset--color--text-primary, #0C1F6B);
}

/* Lookup: label, field + Track button in one framed row (Figma tracking-action). */
.pw-track__lookup {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	width: min(100%, 520px);
	margin: 0;
}

.pw-track__label {
	font-size: var(--wp--preset--font-size--body-l, 1.25rem);
	line-height: 1.4;
}

.pw-track__frame {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 0.75rem);
	padding: var(--wp--preset--spacing--sm, 0.75rem);
	border: 1px solid var(--wp--custom--color--field-border, #DAD3CA);
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--surface-raised, #FFFFFF);
}

.pw-track__frame:focus-within {
	outline: 2px solid var(--wp--preset--color--focus, #00A300);
	outline-offset: 2px;
}

.pw-track__lookup--error .pw-track__frame {
	border-color: var(--wp--preset--color--error, #CD000A);
}

.pw-track .pw-track__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--md, 1rem);
	border: 1px solid var(--wp--custom--color--field-border, #DAD3CA);
	border-radius: var(--wp--custom--radius--md, 14px);
	background: var(--wp--custom--color--field-bg, #E9E4DE);
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--body, 1rem);
	letter-spacing: 0.04em;
	box-shadow: none;
}

.pw-track .pw-track__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--border-bold, #5E6894);
}

.pw-track .pw-track__input::placeholder {
	color: var(--wp--preset--color--text-secondary, #3D4A7A);
	opacity: 0.6;
}

.pw-track .pw-track__submit {
	flex: 0 0 auto;
	cursor: pointer;
}

.pw-track__hint,
.pw-track__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
}

.pw-track__hint {
	color: var(--wp--preset--color--text-secondary, #3D4A7A);
}

.pw-track__error {
	color: var(--wp--preset--color--error, #CD000A);
}

.pw-track__alert {
	margin: 0;
}

.pw-track__alert p {
	margin: 0;
}

.pw-track__alert a {
	color: inherit;
}

/* Result card */
.pw-track__result {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg, 1.5rem);
	padding: var(--wp--preset--spacing--xl, 2rem);
	border: 1px solid var(--wp--preset--color--border-subtle, #DAD3CA);
	border-radius: var(--wp--custom--radius--xl, 24px);
	background: var(--wp--preset--color--surface-raised, #FFFFFF);
}

.pw-track__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md, 1rem);
}

.pw-track__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--text-muted, #8A7250);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pw-track .pw-track__id {
	margin: var(--wp--preset--spacing--xxs, 0.25rem) 0 0;
	color: var(--wp--preset--color--text-primary, #0C1F6B);
	font-size: var(--wp--preset--font-size--headline-4, 1.75rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.pw-track__status {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--info-subtle, #D8ECFF);
	color: var(--wp--preset--color--info, #005DD0);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	white-space: nowrap;
}

.pw-track__status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.pw-track__status--done {
	background: var(--wp--preset--color--success-subtle, #F0FDF4);
	color: var(--wp--preset--color--success, #008602);
}

.pw-track__facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: 0;
	padding: var(--wp--preset--spacing--lg, 1.5rem);
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--surface, #E9E4DE);
}

.pw-track__fact dt {
	margin: 0;
	color: var(--wp--preset--color--text-secondary, #3D4A7A);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.pw-track__fact dd {
	margin: 0.125rem 0 0;
	font-weight: 600;
}

.pw-track .pw-track__subhead {
	margin: 0;
	color: var(--wp--preset--color--text-primary, #0C1F6B);
	font-size: var(--wp--preset--font-size--headline-6, 1.125rem);
}

/* Scan history, newest first, on a vertical rail. */
.pw-track__timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-track__event {
	position: relative;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--lg, 1.5rem) 2rem;
}

.pw-track__event::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: 0.25rem;
	width: 0.75rem;
	height: 0.75rem;
	border: 2px solid var(--wp--preset--color--border-bold, #5E6894);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-raised, #FFFFFF);
	box-sizing: border-box;
}

.pw-track__event::after {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 0.15rem;
	left: calc(0.625rem - 1px);
	width: 2px;
	background: var(--wp--preset--color--border-default, #C7BFB4);
}

.pw-track__event:last-child {
	padding-bottom: 0;
}

.pw-track__event:last-child::after {
	display: none;
}

.pw-track__event--latest::before {
	border-color: var(--wp--preset--color--brand-green-bold, #00A300);
	background: var(--wp--preset--color--brand-green-bold, #00A300);
}

.pw-track__event p {
	margin: 0;
}

.pw-track__event-title {
	font-weight: 600;
}

.pw-track__event-time,
.pw-track__empty {
	color: var(--wp--preset--color--text-secondary, #3D4A7A);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.pw-track__event-text {
	margin-top: var(--wp--preset--spacing--xxs, 0.25rem) !important;
}

.pw-track__empty,
.pw-track__more {
	margin: 0;
}

.pw-track__more a {
	color: var(--wp--preset--color--text-primary, #0C1F6B);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* My Account → order: one compact card per consignment above the order details. */
.pw-track-order {
	gap: var(--wp--preset--spacing--md, 1rem);
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--xl, 2rem);
}

.woocommerce .pw-track-order .pw-track-order__title {
	margin: 0;
}

.pw-track-order__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-track-order__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 1rem);
	margin: 0;
	padding: var(--wp--preset--spacing--lg, 1.5rem);
	border: 1px solid var(--wp--preset--color--border-subtle, #DAD3CA);
	border-radius: var(--wp--custom--radius--lg, 16px);
}

.pw-track-order .pw-track__id {
	font-size: var(--wp--preset--font-size--headline-6, 1.125rem);
	font-weight: 700;
}

.pw-track-order .pw-track__facts {
	padding: var(--wp--preset--spacing--md, 1rem);
}

.pw-track__status--muted {
	background: var(--wp--preset--color--surface, #E9E4DE);
	color: var(--wp--preset--color--text-secondary, #3D4A7A);
}

@media (max-width: 600px) {
	.pw-track__frame {
		flex-direction: column;
		align-items: stretch;
	}

	.pw-track .pw-track__submit {
		width: 100%;
	}

	.pw-track__result {
		padding: var(--wp--preset--spacing--lg, 1.5rem);
	}

	.pw-track__head {
		flex-direction: column;
	}
}