/**
 * Customer delivery tracking.
 *
 * Mobile first, and unapologetically so: this page is opened on a phone, one-handed, by
 * somebody who wants one fact. The layout is a single column with the answer at the top,
 * the progress beneath it, and everything else below the fold.
 *
 * Scoped entirely under .wcdd-track so it cannot leak into the shop's theme, and built on
 * custom properties so a theme can retint it without overriding rules.
 *
 * @package WCDD
 */

.wcdd-track {
	--wcdd-t-bg: #ffffff;
	--wcdd-t-surface: #f6f7f9;
	--wcdd-t-text: #14161a;
	--wcdd-t-muted: #5c6470;
	--wcdd-t-border: #e3e6ea;
	--wcdd-t-accent: #0b6bcb;
	--wcdd-t-accent-text: #ffffff;
	--wcdd-t-done: #1a7f37;
	--wcdd-t-danger: #c4314b;
	--wcdd-t-card: #101216;
	--wcdd-t-card-text: #ffffff;
	--wcdd-t-card-muted: #9aa4b2;
	--wcdd-t-segment: #3a4048;
	/* Progress green rather than the link blue: on a dark card it reads as "moving,
	   fine" at a glance, which is the one thing the card exists to say. */
	--wcdd-t-progress: #22c55e;
	--wcdd-t-radius: 16px;

	box-sizing: border-box;
	max-width: 560px;
	margin: 0 auto;
	padding: 0 16px 40px;
	/* The block paints its own background rather than borrowing the theme's. Without this,
	   a phone set to dark mode flips the tokens below to light text while a light theme
	   keeps its white page — and the whole page turns white-on-white. Painting the ground
	   here means the palette is always internally consistent, whatever the theme does. */
	background: var(--wcdd-t-bg);
	color: var(--wcdd-t-text);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.wcdd-track *,
.wcdd-track *::before,
.wcdd-track *::after {
	box-sizing: inherit;
}

/* The page follows the browser's preference rather than forcing a look, because it is
   opened at all hours — often at night, from a notification. */
@media ( prefers-color-scheme: dark ) {
	.wcdd-track {
		--wcdd-t-bg: #0f1216;
		--wcdd-t-surface: #181c22;
		--wcdd-t-text: #eef1f5;
		--wcdd-t-muted: #9aa4b2;
		--wcdd-t-border: #2b323b;
		--wcdd-t-accent: #4d9bf0;
		--wcdd-t-accent-text: #06131f;
		--wcdd-t-done: #3fb950;
		/* The card is already dark; lift it off a dark page rather than sinking into it. */
		--wcdd-t-card: #1b2027;
		--wcdd-t-segment: #39404a;
	}
}

/* Header ------------------------------------------------------------------- */

.wcdd-track__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0 8px;
}

.wcdd-track__logo {
	max-height: 34px;
	width: auto;
}

.wcdd-track__brand {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.wcdd-track__order {
	color: var(--wcdd-t-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* Status card --------------------------------------------------------------- */

/* The card people already know how to read: one line of status, a segmented bar for
   progress, and where it is coming from against when it arrives. Everything else on the
   page is secondary to this. */
/*
 * The `!important` here is deliberate and is confined to this card.
 *
 * The card is dark and its text is white, and it renders inside somebody else's theme.
 * Themes routinely style bare `h1`, `strong` and `span` inside their content wrapper, and a
 * rule that names an element beats an inherited colour no matter how weak its specificity —
 * so a theme that paints headings dark grey makes this headline invisible on a dark card,
 * which is exactly what happened at Mr Wings. The pair (background and text) is forced
 * together, because forcing only one of them is how you get white on white.
 */
.wcdd-track__card {
	margin-block-end: 20px;
	padding: 18px 18px 16px;
	background: var(--wcdd-t-card) !important;
	border-radius: 22px;
	color: var(--wcdd-t-card-text) !important;
}

.wcdd-track__card .wcdd-track__status,
.wcdd-track__card .wcdd-track__from,
.wcdd-track__card .wcdd-track__eta-value {
	color: var(--wcdd-t-card-text) !important;
}

.wcdd-track__card .wcdd-track__eta-label {
	color: var(--wcdd-t-card-muted) !important;
}

.wcdd-track__headline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 16px;
}

.wcdd-track__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--wcdd-t-progress);
}

.wcdd-track__icon svg {
	width: 100%;
	height: 100%;
}

/* Two classes, for the same reason as the colours above: a theme's `.entry-content h1` beats
   a single class, and this headline must not inherit a 40px display size or a 1em margin
   from the theme's article styling. */
.wcdd-track__card .wcdd-track__status {
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	border: 0;
}

/* Progress bar: one segment per step, filled up to where the order actually is. A bar
   rather than a list because it answers "how much longer" at a glance, which is the only
   question being asked. */
.wcdd-track__progress {
	display: flex;
	gap: 7px;
	margin-block-end: 16px;
}

.wcdd-track__segment {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: var(--wcdd-t-segment);
	transition: background-color 400ms ease;
}

.wcdd-track__segment.is-done {
	background: var(--wcdd-t-progress);
}

/* The live segment breathes, so a glance tells you the order is moving rather than stuck. */
.wcdd-track__segment.is-current {
	background: var(--wcdd-t-progress);
	animation: wcdd-track-breathe 1.8s ease-in-out infinite;
}

@keyframes wcdd-track-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wcdd-track__segment.is-current {
		animation: none;
	}
}

.wcdd-track--problem .wcdd-track__segment.is-done,
.wcdd-track--problem .wcdd-track__segment.is-current {
	background: var(--wcdd-t-danger);
	animation: none;
}

.wcdd-track--problem .wcdd-track__icon {
	color: var(--wcdd-t-danger);
}

.wcdd-track__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}

.wcdd-track__from {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wcdd-track__eta {
	flex: 0 0 auto;
	text-align: end;
}

.wcdd-track__eta-label {
	display: block;
	color: var(--wcdd-t-card-muted);
	font-size: 13px;
}

.wcdd-track__eta-value {
	display: block;
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wcdd-track__detail {
	margin: 0 0 22px;
	padding-inline: 4px;
	color: var(--wcdd-t-muted);
	font-size: 15px;
}

.wcdd-track__detail:empty {
	display: none;
}

/* Map ---------------------------------------------------------------------- */

.wcdd-track__map {
	height: 260px;
	margin-block-end: 24px;
	border-radius: var(--wcdd-t-radius);
	background: var(--wcdd-t-surface);
	overflow: hidden;
}

/* Progress ------------------------------------------------------------------ */

.wcdd-track__steps {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.wcdd-track__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-block-end: 22px;
}

.wcdd-track__step:last-child {
	padding-block-end: 0;
}

/* The connector is drawn from the marker downwards rather than as a border on the row,
   so the last step has no dangling tail. */
.wcdd-track__step::before {
	content: "";
	position: absolute;
	inset-inline-start: 10px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var(--wcdd-t-border);
}

.wcdd-track__step:last-child::before {
	display: none;
}

.wcdd-track__step.is-done::before {
	background: var(--wcdd-t-done);
}

.wcdd-track__marker {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-block-start: 1px;
	border: 2px solid var(--wcdd-t-border);
	border-radius: 50%;
	background: var(--wcdd-t-bg);
}

.wcdd-track__step.is-done .wcdd-track__marker {
	border-color: var(--wcdd-t-done);
	background: var(--wcdd-t-done);
}

.wcdd-track__step.is-done .wcdd-track__marker::after {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.wcdd-track__step.is-current .wcdd-track__marker {
	border-color: var(--wcdd-t-accent);
	background: var(--wcdd-t-accent);
	box-shadow: 0 0 0 4px color-mix( in srgb, var(--wcdd-t-accent) 22%, transparent );
}

/* A quiet pulse on the live step. Motion is the cheapest way to say "this is happening
   now", and it is the only animation on the page. */
.wcdd-track__step.is-current .wcdd-track__marker {
	animation: wcdd-track-pulse 2s ease-out infinite;
}

@keyframes wcdd-track-pulse {
	0% { box-shadow: 0 0 0 0 color-mix( in srgb, var(--wcdd-t-accent) 45%, transparent ); }
	70% { box-shadow: 0 0 0 10px color-mix( in srgb, var(--wcdd-t-accent) 0%, transparent ); }
	100% { box-shadow: 0 0 0 0 color-mix( in srgb, var(--wcdd-t-accent) 0%, transparent ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wcdd-track__step.is-current .wcdd-track__marker {
		animation: none;
	}
}

.wcdd-track__step-body {
	display: flex;
	flex: 1;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-height: 24px;
}

.wcdd-track__step-label {
	color: var(--wcdd-t-muted);
	font-size: 16px;
}

.wcdd-track__step.is-done .wcdd-track__step-label {
	color: var(--wcdd-t-text);
}

.wcdd-track__step.is-current .wcdd-track__step-label {
	color: var(--wcdd-t-text);
	font-weight: 700;
}

.wcdd-track__step-time {
	color: var(--wcdd-t-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Courier ------------------------------------------------------------------- */

.wcdd-track__driver {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 20px;
	padding: 14px 16px;
	background: var(--wcdd-t-surface);
	border-radius: var(--wcdd-t-radius);
}

.wcdd-track__photo {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.wcdd-track__driver-body {
	flex: 1;
	min-width: 0;
}

.wcdd-track__driver-body strong {
	display: block;
}

.wcdd-track__driver-body span {
	display: block;
	color: var(--wcdd-t-muted);
	font-size: 14px;
}

/* Notifications -------------------------------------------------------------- */

.wcdd-track__notify {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-block-end: 20px;
	padding: 14px 16px;
	border: 1px solid var(--wcdd-t-border);
	border-radius: var(--wcdd-t-radius);
}

/* Already answered at the checkout. Still here, still usable, but no longer asking. */
.wcdd-track__notify--quiet {
	padding: 8px 4px;
	border: 0;
	opacity: 0.75;
	font-size: 14px;
}

.wcdd-track__notify--quiet .wcdd-track__notify-text strong {
	display: none;
}

.wcdd-track__notify--quiet .wcdd-track__button {
	min-height: 36px;
	padding-inline: 12px;
	background: none;
	border: 1px solid var(--wcdd-t-border);
	color: var(--wcdd-t-muted);
	font-size: 13px;
}

.wcdd-track__notify-text {
	min-width: 0;
}

.wcdd-track__notify-text span {
	display: block;
	color: var(--wcdd-t-muted);
	font-size: 14px;
}

.wcdd-track__button {
	flex: 0 0 auto;
	/* 44px is the smallest target a thumb hits reliably; this page is used one-handed. */
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--wcdd-t-accent);
	color: var(--wcdd-t-accent-text);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wcdd-track__button:disabled {
	opacity: 0.55;
	cursor: default;
}

.wcdd-track__button--quiet {
	background: transparent;
	border: 1px solid var(--wcdd-t-border);
	color: var(--wcdd-t-text);
}

/* Addresses and notices ------------------------------------------------------ */

.wcdd-track__addresses {
	display: grid;
	gap: 14px;
}

.wcdd-track__address {
	padding: 14px 16px;
	background: var(--wcdd-t-surface);
	border-radius: var(--wcdd-t-radius);
}

.wcdd-track__address h3 {
	margin: 0 0 4px;
	color: var(--wcdd-t-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wcdd-track__address p {
	margin: 0;
	font-size: 15px;
}

.wcdd-track__note {
	margin: 18px 0 0;
	color: var(--wcdd-t-muted);
	font-size: 14px;
	text-align: center;
}

.wcdd-track__note:empty {
	display: none;
}

/* Skeleton ------------------------------------------------------------------- */

.wcdd-track.is-loading .wcdd-track__status {
	color: var(--wcdd-t-muted);
}

/* Map fallback --------------------------------------------------------------- */

.wcdd-map--unavailable {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: repeating-linear-gradient( 45deg, #e9ecef, #e9ecef 10px, #f4f5f7 10px, #f4f5f7 20px );
	border-radius: var(--wcdd-t-radius, 12px);
}

.wcdd-map__error {
	max-width: 30em;
	margin: 0;
	padding: 14px 18px;
	background: rgba( 255, 255, 255, 0.94 );
	border-radius: 10px;
	color: #3c434a;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

/* See driver.css: self-contained SVG pins, no external marker images. */
.wcdd-leaflet-pin {
	background: none;
	border: 0;
}

/* Checkout opt-in ------------------------------------------------------------ */

/* Lives inside somebody else's checkout, so it inherits the theme's type and asks for as
   little visual authority as it can. It sits above the pay button: anything louder there
   competes with the one action the page exists for. */
.wcdd-optin {
	margin: 16px 0;
	padding: 16px 18px;
	/* A tinted ground and a coloured edge, because on the order-received page this competes
	   with a receipt, an address and a footer for a glance that lasts about two seconds. A
	   plain outlined box loses that competition every time. */
	background: color-mix( in srgb, var(--wcdd-t-accent, #0b6bcb) 5%, transparent );
	border: 1px solid color-mix( in srgb, var(--wcdd-t-accent, #0b6bcb) 25%, transparent );
	border-inline-start: 4px solid var(--wcdd-t-accent, #0b6bcb);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
}

/* Older browsers that do not understand color-mix() keep the plain box above, which is
   still perfectly readable — the tint is an enhancement, not the design. */
@supports not ( background: color-mix( in srgb, red 5%, transparent ) ) {
	.wcdd-optin {
		background: #f6f8fb;
		border-color: #d8e2ee;
	}
}

.wcdd-optin__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
}

.wcdd-optin__text {
	margin: 0 0 10px;
	color: var(--wcdd-t-muted, #5c6470);
}

/* Two ticks, one question. Generous rows because this is answered with a thumb, on a phone,
   next to a Place order button that must stay the easiest thing to hit. */
.wcdd-optin__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 40px;
	padding: 6px 0;
	cursor: pointer;
}

.wcdd-optin__check input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
}

.wcdd-optin__check small {
	display: block;
	color: var(--wcdd-t-muted, #5c6470);
	font-size: 12px;
}

.wcdd-optin__check input:disabled + span {
	opacity: 0.6;
}

/* Opened without a link ------------------------------------------------------ */

.wcdd-track__empty {
	margin: 24px 0;
	color: var(--wcdd-t-muted, #5c6470);
	font-size: 15px;
	line-height: 1.6;
}

.wcdd-track__mine {
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.wcdd-track__mine li + li {
	margin-block-start: 8px;
}

.wcdd-track__mine a {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--wcdd-t-border, #e3e6ea);
	border-radius: 12px;
	font-weight: 600;
	text-decoration: none;
}