/**
 * Order tracking page.
 *
 * The lookup card is the source's, measured on /apps/parcelpanel (the
 * ParcelPanel app proxy) on 2026-09-10 at 1440 and 390: card 1px #e6e6e6,
 * radius 7px, padding 30/20, two 264px forms with the dashed "Or" rule
 * between them, black buttons 49.25px tall with a 9px radius, and, under
 * 700px, the two forms as two tabs. The type, the colours and the page width
 * come from the theme's own variables so the page follows the shop rather
 * than a second palette.
 *
 * The result below the card - status, four-part progress bar, timeline - has
 * no equivalent to measure: the source only renders it for a real shipment,
 * behind an order number. It is this plugin's own, in the shop's black and
 * white.
 *
 * Widths: 1200px is the source's own page maximum on this page (its
 * --pp-page-max-width), narrower than the theme's 1600px page width.
 */

.gac-tracking {
	--gac-tracking-ink: rgb(var(--color-foreground, 18, 18, 18));
	--gac-tracking-button: rgb(var(--color-button, 18, 18, 18));
	--gac-tracking-button-text: rgb(var(--color-button-text, 255, 255, 255));
	--gac-tracking-border: #e6e6e6;
	--gac-tracking-rule: #c4c4c4;
	--gac-tracking-muted: rgba(var(--color-foreground, 18, 18, 18), 0.7);
	--gac-tracking-idle: rgba(var(--color-foreground, 18, 18, 18), 0.15);

	box-sizing: border-box;
	max-width: 1200px;
	width: calc(100% - 32px);
	margin: 24px auto;
	color: var(--gac-tracking-ink);
}

.gac-tracking *,
.gac-tracking *::before,
.gac-tracking *::after {
	box-sizing: border-box;
}

/* ---------- Page title ---------- */

/* The page's own title, not the theme's: on the source it is the app that
   prints it. Measured there on 2026-09-10: Bayon 30px under 750px and 3rem
   (31.5px) above, line-height 1.2, 21px of margin above and below, centred
   under 700px and left-aligned above. Bayon has no lower case, which is where
   the capitals come from - there is no text-transform on the source either. */
.gac-tracking__title {
	margin: 21px 0;
	font-family: var(--font-heading-family, Bayon, sans-serif);
	font-style: var(--font-heading-style, normal);
	font-weight: var(--font-heading-weight, 400);
	font-size: 30px;
	line-height: 1.2;
	color: var(--gac-tracking-ink);
	text-align: center;
}

/* ---------- Tabs (narrow layout only) ---------- */

.gac-tracking__tabs {
	display: none;
}

.gac-tracking__tab {
	flex: 1 1 0;
	padding: 15.5px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--gac-tracking-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
}

/* Only the active tab is underlined. The grey rule that runs under the other
   one is the card's own top border, as on the source. */
.gac-tracking__tab.is-active {
	border-bottom: 3px solid var(--gac-tracking-ink);
}

/* ---------- Lookup card ---------- */

/* Under 900px the source drops the frame and lets the forms run full width. */
.gac-tracking__card {
	border-top: 1px solid var(--gac-tracking-border);
}

.gac-tracking__columns {
	display: flex;
	align-items: flex-start;
}

.gac-tracking__side {
	flex: 1 1 0;
	min-width: 0;
	padding: 20px 0 0;
}

.gac-tracking__form {
	margin: 0;
}

.gac-tracking__field + .gac-tracking__field {
	margin-top: 23px;
}

.gac-tracking__field label {
	display: block;
	line-height: 1.5714;
	color: var(--gac-tracking-ink);
}

/* Arial, 16.8px: the field is the source's, and its text does not follow the
   body font there either. Height and padding are the served ones. */
.gac-tracking__field input {
	width: 100%;
	height: 47.25px;
	padding: 8.4px 15.75px;
	border: 1px solid var(--gac-tracking-ink);
	border-radius: 8px;
	background: #fff;
	color: var(--gac-tracking-ink);
	font-family: Arial, sans-serif;
	font-size: 16.8px;
	line-height: 24.8px;
	box-shadow: none;
}

.gac-tracking__field input:focus-visible {
	outline: 1px solid var(--gac-tracking-ink);
	outline-offset: 1px;
}

.gac-tracking__actions {
	margin-top: 24px;
}

.gac-tracking__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 128px;
	height: 49.25px;
	padding: 0 31.5px;
	border: 0;
	border-radius: 9px;
	background: var(--gac-tracking-button);
	color: var(--gac-tracking-button-text);
	font-family: inherit;
	font-size: 15.75px;
	line-height: 18.75px;
	text-align: center;
	cursor: pointer;
}

.gac-tracking__button:hover {
	background: rgb(var(--color-link-hover, 51, 51, 51));
}

.gac-tracking__button[disabled] {
	opacity: 0.55;
	cursor: progress;
}

/* The dashed rule with "Or" on it. The source paints it with a 1px SVG
   (stroke #C4C4C4, 3/3 dashes) hosted on its CDN; the same rule is drawn here
   with a gradient, so the page pulls nothing from outside. */
.gac-tracking__divider {
	display: none;
	padding: 20px 12px 0;
	text-align: center;
	color: var(--gac-tracking-ink);
}

.gac-tracking__divider::before,
.gac-tracking__divider::after {
	content: "";
	display: block;
	width: 1em;
	height: 2.8125em;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--gac-tracking-rule) 0,
		var(--gac-tracking-rule) 3px,
		transparent 3px,
		transparent 6px
	);
	background-position: 50% 50%;
	background-repeat: repeat-y;
	background-size: 1px 100%;
}

.gac-tracking__divider span {
	display: block;
	padding: 6px 0;
}

/* Two columns from 700px: still no frame, no rule, one form each. */
@media (min-width: 700px) {
	.gac-tracking__title {
		text-align: start;
	}
}

@media (min-width: 750px) {
	.gac-tracking__title {
		font-size: 3rem;
	}
}

/* The framed card, the "Or" rule and the 264px forms of the wide layout. */
@media (min-width: 900px) {
	.gac-tracking__card {
		border: 1px solid var(--gac-tracking-border);
		border-radius: 7px;
		padding: 30px 20px;
	}

	.gac-tracking__side {
		padding: 20px;
	}

	.gac-tracking__form {
		width: 264px;
		margin: 0 auto;
	}

	.gac-tracking__button {
		width: auto;
	}

	.gac-tracking__divider {
		display: block;
	}
}

/* One form at a time, under two tabs - the source's narrow layout. The tab
   bar only exists once tracking.js has claimed it, so without JavaScript both
   forms stay on the page, one under the other. */
@media (max-width: 699px) {
	.gac-tracking--tabs .gac-tracking__tabs {
		display: flex;
	}

	.gac-tracking__columns {
		display: block;
	}

	.gac-tracking--tabs[data-gac-active="order"] .gac-tracking__side[data-gac-panel="tracking"],
	.gac-tracking--tabs[data-gac-active="tracking"] .gac-tracking__side[data-gac-panel="order"] {
		display: none;
	}
}

/* ---------- Result ---------- */

.gac-tracking__result:empty {
	display: none;
}

.gac-tracking__notice {
	margin-top: 1.75em;
	padding: 1.25em 1.5em;
	border-left: 3px solid var(--gac-tracking-ink);
	background: #f3f3f3;
	color: var(--gac-tracking-ink);
}

.gac-tracking__notice--warning {
	border-left-color: #b45309;
	background: #fdf6ec;
}

.gac-tracking__panel {
	margin-top: 1.75em;
	border: 1px solid var(--gac-tracking-border);
	border-radius: 7px;
	padding: 2.25em 2em;
}

.gac-tracking__status {
	margin-bottom: 2em;
}

.gac-tracking__status-eyebrow {
	margin: 0 0 0.35em;
	color: var(--gac-tracking-muted);
	font-size: 0.8em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.gac-tracking__status-title {
	margin: 0 0 0.35em;
	font-family: var(--font-heading-family, Bayon, sans-serif);
	font-weight: var(--font-heading-weight, 400);
	font-size: 1.75em;
	line-height: 1.3;
	color: var(--gac-tracking-ink);
}

.gac-tracking__status-text {
	margin: 0;
	color: var(--gac-tracking-muted);
}

.gac-tracking__eta {
	margin: 0.9em 0 0;
	padding: 0.65em 1em;
	background: #f3f3f3;
	color: var(--gac-tracking-ink);
	font-size: 0.95em;
}

/* ---------- Four-part progress bar ---------- */

.gac-tracking__phases {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 2.5em;
	padding: 0;
	list-style: none;
}

.gac-tracking__phase {
	position: relative;
	padding-top: 1.9em;
	text-align: center;
	font-size: 0.88em;
	color: var(--gac-tracking-muted);
}

/* The connecting rule belongs to every step but the first, so the bar ends
   cleanly at both extremities. */
.gac-tracking__phase::before {
	content: "";
	position: absolute;
	top: 0.44em;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--gac-tracking-idle);
}

.gac-tracking__phase:first-child::before {
	display: none;
}

.gac-tracking__phase--done::before,
.gac-tracking__phase--current::before {
	background: var(--gac-tracking-ink);
}

.gac-tracking__phase-dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--gac-tracking-idle);
}

.gac-tracking__phase--done .gac-tracking__phase-dot {
	background: var(--gac-tracking-ink);
}

.gac-tracking__phase--current .gac-tracking__phase-dot {
	background: var(--gac-tracking-ink);
	box-shadow: 0 0 0 5px rgba(var(--color-foreground, 18, 18, 18), 0.15);
}

.gac-tracking__phase--done,
.gac-tracking__phase--current {
	color: var(--gac-tracking-ink);
}

.gac-tracking__phase--current .gac-tracking__phase-name {
	font-weight: var(--font-body-weight-bold, 700);
}

/* ---------- Timeline ---------- */

.gac-tracking__timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gac-tracking__event {
	position: relative;
	padding: 0 0 1.9em 2.4em;
}

/* Vertical rule, stopped on the last entry. */
.gac-tracking__event::before {
	content: "";
	position: absolute;
	top: 1.1em;
	bottom: -0.3em;
	left: 5px;
	width: 2px;
	background: var(--gac-tracking-idle);
}

.gac-tracking__event:last-child {
	padding-bottom: 0;
}

.gac-tracking__event:last-child::before {
	display: none;
}

.gac-tracking__marker {
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gac-tracking-ink);
}

.gac-tracking__event--warning .gac-tracking__marker {
	background: #b45309;
}

.gac-tracking__event--success .gac-tracking__marker {
	background: #2f7a4f;
}

.gac-tracking__event.is-current .gac-tracking__marker {
	box-shadow: 0 0 0 5px rgba(var(--color-foreground, 18, 18, 18), 0.15);
}

.gac-tracking__event--warning.is-current .gac-tracking__marker {
	box-shadow: 0 0 0 5px rgba(180, 83, 9, 0.18);
}

.gac-tracking__event--success.is-current .gac-tracking__marker {
	box-shadow: 0 0 0 5px rgba(47, 122, 79, 0.2);
}

.gac-tracking__event-label {
	margin: 0 0 0.2em;
	font-weight: var(--font-body-weight-bold, 700);
	color: var(--gac-tracking-ink);
}

.gac-tracking__event-text {
	margin: 0 0 0.35em;
	color: var(--gac-tracking-muted);
	font-size: 0.95em;
}

.gac-tracking__event-time {
	color: var(--gac-tracking-muted);
	font-size: 0.85em;
}

/* Past steps recede, the current one stands out. */
.gac-tracking__event:not(.is-current) .gac-tracking__event-label {
	font-weight: var(--font-body-weight, 400);
}

.gac-tracking__footnote {
	margin: 2em 0 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--gac-tracking-border);
	color: var(--gac-tracking-muted);
	font-size: 0.92em;
}

@media (max-width: 749px) {
	.gac-tracking__panel {
		padding: 1.75em 1.25em;
	}

	.gac-tracking__phases {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4em 0;
	}

	/* In two columns the connecting rule would join steps that no longer read
	   as consecutive. */
	.gac-tracking__phase::before {
		display: none;
	}

	.gac-tracking__status-title {
		font-size: 1.4em;
	}
}