/*
 * Tracking — neutral layout for the tracking page.
 *
 * Every visual value is a token with a fallback, so a shop restyles the module
 * from its own stylesheet without touching the plugin. Nothing here is anybody's
 * brand: black on white is what disappears behind whatever theme it lands in.
 *
 * Two decisions worth keeping. The ladder is vertical by default and only turns
 * horizontal from 1024px — German step labels ("An den Versanddienstleister
 * übergeben") do not fit six columns of a 736px page, and forcing them pushed
 * the grid past its container. And the current step is marked by a ring, not by
 * motion: the pulse is decoration, and the page must still answer "where is it
 * now" in print, in a screenshot, and with reduced motion on.
 */

.careback-track {
	--careback-track-ink: var(--careback-text, #111);
	--careback-track-muted: var(--careback-muted, #6a6a6a);
	--careback-track-line: var(--careback-border, #d8d8d8);
	--careback-track-bg: #fff;
	--careback-track-wash: #f6f6f6;
	--careback-track-dot: 7px;
	--careback-track-gap: 1.4rem;
	--careback-track-duration: .5s;
	--careback-track-hover: .18s;
	--careback-track-progress: 0;
	--careback-track-count: 1;

	max-width: 46rem;
	margin: 0 auto;
	color: var(--careback-track-ink);
	font-size: 15px;
	line-height: 1.5;
}

.careback-track [hidden] {
	display: none !important;
}

/* Visually hidden, still read aloud: the step state lives here, so the ladder
   makes sense without colour and without sight. */
.careback-track-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- form ---------- */

.careback-track-form {
	max-width: 44rem;
}

.careback-track-intro {
	margin: 0 0 1.25rem;
	color: var(--careback-track-muted);
}

/* The same two-column pair the returns portal draws, so the two forms of one
   shop do not read as two products. One column below 600px, where two would
   leave each field too narrow to show a full e-mail address. */
.careback-track-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.1rem;
}

@media (min-width: 600px) {
	.careback-track-fields {
		grid-template-columns: 1fr 1fr;
	}
}

.careback-track-field {
	display: block;
	margin: 0 0 .9rem;
	min-width: 0;
}

.careback-track-field > span {
	display: block;
	margin-bottom: .3rem;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--careback-track-muted);
}

.careback-track-field input {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: .7rem .8rem;
	border: 1px solid var(--careback-track-line);
	border-radius: 0;
	background: var(--careback-track-bg);
	color: var(--careback-track-ink);
	font: inherit;
}

.careback-track-field input:focus {
	outline: 2px solid var(--careback-track-ink);
	outline-offset: -2px;
}

.careback-track-submit {
	margin-top: .3rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 28px;
	border: 1px solid var(--careback-track-ink);
	background: var(--careback-track-ink);
	color: var(--careback-track-bg);
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--careback-track-hover) ease, color var(--careback-track-hover) ease;
}

.careback-track-submit:hover:not([disabled]) {
	background: var(--careback-track-bg);
	color: var(--careback-track-ink);
}

.careback-track-submit:focus-visible {
	outline: 2px solid var(--careback-track-ink);
	outline-offset: 3px;
}

.careback-track-submit[disabled] {
	opacity: .5;
	cursor: default;
}

/* Hidden from people, never from a bot's parser. */
.careback-track-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.careback-track-error {
	margin: .9rem 0 0;
	padding: .7rem 1rem;
	border: 1px solid var(--careback-track-ink);
	border-left-width: 3px;
	background: transparent;
}

/* Focus lands here by script once an answer arrives, so the visitor is put at
   the answer rather than left at the button. A ring drawn around the whole
   result block would read as an error state; :focus-visible below still gives
   a keyboard user one when they tab back into it. */
.careback-track-results:focus {
	outline: none;
}

.careback-track-results:focus-visible {
	outline: 2px solid var(--careback-track-ink);
	outline-offset: 4px;
}

/* ---------- one timeline ---------- */

.careback-track-card {
	margin-top: 2.5rem;
	padding-top: 1.6rem;
}

/* Sibling rule, not :first-child: in the admin preview the cards follow a form
   inside the same wrapper, so :first-child never matched and the preview showed
   a rule the live page does not have. */
.careback-track-card + .careback-track-card {
	border-top: 1px solid var(--careback-track-line);
}

.careback-track-heading {
	margin: 0 0 1.75rem;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--careback-track-ink);
}

/* An <ol>: the steps are a list, in order, and saying so in HTML is what lets a
   screen reader announce "3 of 6" without the page inventing its own counter. */
.careback-track-timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 calc(var(--careback-track-dot) + 16px);
}

.careback-track-timeline > li::marker {
	content: "";
}

/* Rail and fill: two layers of one line, so the fill can grow. Both are pinned
   to the dot centres, not to the box, so the black line stops exactly at the
   current dot instead of somewhere past it. */
.careback-track-timeline::before,
.careback-track-timeline::after {
	content: "";
	position: absolute;
	left: calc(var(--careback-track-dot) / 2);
	width: 1px;
}

.careback-track-timeline::before {
	top: calc(var(--careback-track-dot) / 2 + 4px);
	height: calc(100% - var(--careback-track-dot) - 8px);
	background: var(--careback-track-line);
}

.careback-track-timeline::after {
	top: calc(var(--careback-track-dot) / 2 + 4px);
	height: calc((100% - var(--careback-track-dot) - 8px) * var(--careback-track-progress));
	background: var(--careback-track-ink);
	transition: height var(--careback-track-duration) cubic-bezier(.22, .61, .36, 1);
}

.careback-track-step {
	position: relative;
	min-width: 0;
	padding: 0 0 1.3rem;
	opacity: 1;
}

.careback-track-step:last-child {
	padding-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.careback-track-step {
		opacity: 0;
		transform: translateY(4px);
		animation: careback-track-in var(--careback-track-duration) ease forwards;
	}
}

@keyframes careback-track-in {
	to {
		opacity: 1;
		transform: none;
	}
}

.careback-track-step::before {
	content: "";
	position: absolute;
	top: 4px;
	left: calc((var(--careback-track-dot) + 16px) * -1);
	width: var(--careback-track-dot);
	height: var(--careback-track-dot);
	box-sizing: border-box;
	border: 1px solid var(--careback-track-line);
	border-radius: 50%;
	background: var(--careback-track-bg);
	transition: background var(--careback-track-duration) ease, border-color var(--careback-track-duration) ease;
}

.careback-track-step.is-done::before,
.careback-track-step.is-current::before {
	border-color: var(--careback-track-ink);
	background: var(--careback-track-ink);
}

/* "You are here", drawn rather than animated: a ring survives print, a
   screenshot, and prefers-reduced-motion. The pulse below is extra. */
.careback-track-step.is-current::before {
	box-shadow: 0 0 0 3px var(--careback-track-bg), 0 0 0 4px var(--careback-track-ink);
}

/* Steps the parcel never reached, on a journey that ended early. Dimmed, not
   dashed: a dashed ring on a seven-pixel dot reads as a printing fault rather
   than as a meaning, and the opacity alone already separates it from a pending
   step on a journey that is still going. */
.careback-track-step.is-void {
	opacity: .38;
}

.careback-track-step.is-void::before {
	border-color: var(--careback-track-line);
	background: var(--careback-track-bg);
}

.careback-track-step.is-current::after {
	content: "";
	position: absolute;
	top: 4px;
	left: calc((var(--careback-track-dot) + 16px) * -1);
	width: var(--careback-track-dot);
	height: var(--careback-track-dot);
	box-sizing: border-box;
	border: 1px solid var(--careback-track-ink);
	border-radius: 50%;
	/* Three pulses, then still. An endless one on a tab left open is noise. */
	animation: careback-track-pulse 2.4s ease-out 3;
}

@keyframes careback-track-pulse {
	0% { transform: scale(1); opacity: .5; }
	70% { transform: scale(3); opacity: 0; }
	100% { transform: scale(3); opacity: 0; }
}

.careback-track-label {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--careback-track-muted);
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Past quiet, present loud. Both black said "history matters as much as now". */
.careback-track-step.is-done .careback-track-label {
	color: #6a6a6a;
}

.careback-track-step.is-current .careback-track-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--careback-track-ink);
}

.careback-track-date {
	display: block;
	margin-top: .25rem;
	font-size: 11px;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--careback-track-muted);
}

/* How it ended, kept out of the ladder: "cancelled" is not a further rung. */
.careback-track-outcome {
	margin: 1.4rem 0 0;
	padding: .85rem 1rem;
	border: 1px solid var(--careback-track-ink);
	border-left-width: 3px;
	font-size: 14px;
	font-weight: 500;
	color: var(--careback-track-ink);
}

.careback-track-outcome .careback-track-date {
	font-weight: 400;
}

/* The one call to action on the page; it was the quietest thing on it. */
.careback-track-note {
	margin: 1.2rem 0 0;
	padding: .75rem 1rem;
	border-left: 2px solid var(--careback-track-ink);
	font-size: 14px;
	color: var(--careback-track-ink);
}

.careback-track-shipment {
	margin: 1.2rem 0 0;
	font-size: 13px;
}

.careback-track-shipment a {
	color: var(--careback-track-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.careback-track-shipment a:focus-visible {
	outline: 2px solid var(--careback-track-ink);
	outline-offset: 3px;
}

.careback-track-items {
	margin: .5rem 0 0;
	font-size: 13px;
	color: var(--careback-track-muted);
}

.careback-track-fallback {
	margin: 2rem 0 0;
	font-size: 13px;
	color: var(--careback-track-muted);
}

.careback-track-fallback p {
	margin: 0 0 .5rem;
}

.careback-track-fallback p:last-child {
	margin-bottom: 0;
}

.careback-track-fallback a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* iOS zooms the page when a focused field is under 16px. */
@media (max-width: 767px) {
	.careback-track-field input {
		font-size: 16px;
	}
}

/* ---------- wide screens: the ladder lies down ---------- */

@media (min-width: 1024px) {
	.careback-track-timeline {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 0 var(--careback-track-gap);
		padding: calc(var(--careback-track-dot) + 16px) 0 0;
	}

	/* Span between the first and last dot centre, not the whole box. */
	.careback-track-timeline::before,
	.careback-track-timeline::after {
		top: calc(var(--careback-track-dot) / 2);
		left: calc(var(--careback-track-dot) / 2);
		height: 1px;
		width: calc((100% + var(--careback-track-gap)) * (var(--careback-track-count) - 1) / var(--careback-track-count));
	}

	.careback-track-timeline::after {
		width: calc((100% + var(--careback-track-gap)) * (var(--careback-track-count) - 1) / var(--careback-track-count) * var(--careback-track-progress));
		transition: width var(--careback-track-duration) cubic-bezier(.22, .61, .36, 1);
	}

	.careback-track-step {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: .25rem;
		padding: 0;
	}

	.careback-track-step:last-child {
		padding: 0;
	}

	.careback-track-step::before,
	.careback-track-step.is-current::after {
		top: calc((var(--careback-track-dot) + 16px) * -1);
		left: 0;
	}
}

/* The page carries legal deadlines; it has no business insisting on motion. */
@media (prefers-reduced-motion: reduce) {
	.careback-track *,
	.careback-track *::before,
	.careback-track *::after {
		animation: none !important;
		transition: none !important;
	}

	.careback-track-step {
		opacity: 1;
		transform: none;
	}

	.careback-track-step.is-void {
		opacity: .38;
	}
}

/* This page gets saved as proof; the form is noise on paper. */
@media print {
	.careback-track-form,
	.careback-track-fallback {
		display: none;
	}

	.careback-track {
		max-width: none;
	}

	.careback-track-step {
		break-inside: avoid;
	}
}