/**
 * Torod shipment tracking for customers. Inherits the theme's fonts and
 * colours; logical properties make it right-to-left aware without a second file.
 * Override the colours with these custom properties in your theme.
 */
.torod-shipment,
.torod-cell {
	--torod-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1f5fe0));
	--torod-line: color-mix(in srgb, currentColor 18%, transparent);
	/* Secondary text keeps the theme's own text colour (never lighter: themes with grey
	   body text would drop below 4.5:1); it is set apart by weight and size instead. */
	--torod-muted: currentColor;
	--torod-todo: color-mix(in srgb, currentColor 60%, transparent);
	--torod-attention: #b25e00;
	--torod-danger: #b32d2e;
	--torod-success: #157f3d;
}

.torod-shipment {
	container: torod-shipment / inline-size;
	scroll-margin-block-start: 6rem; /* Clear sticky headers after the jump from the orders list. */
	margin-block: 1.5em 2em;
	padding: 1.25em;
	border: 1px solid var(--torod-line);
	border-radius: 12px;
}

.torod-shipment__title {
	margin-block: 0 .75em;
}

.torod-shipment__headline {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	font-weight: 700;
	font-size: 1.125em;
}

.torod-shipment__explain {
	margin-block: .25em 0;
}

.torod-dot {
	flex: none;
	display: inline-block;
	width: .625em;
	height: .625em;
	border-radius: 50%;
	background: var(--torod-accent);
}

.torod-shipment--delivered .torod-dot,
.torod-cell--delivered .torod-dot { background: var(--torod-success); }
.torod-shipment--attention .torod-dot,
.torod-shipment--returning .torod-dot,
.torod-cell--attention .torod-dot,
.torod-cell--returning .torod-dot { background: var(--torod-attention); }
.torod-shipment--problem .torod-dot,
.torod-shipment--cancelled .torod-dot,
.torod-cell--problem .torod-dot,
.torod-cell--cancelled .torod-dot { background: var(--torod-danger); }

/* Progress steps: horizontal on wide cards, a vertical timeline on narrow ones. */
.torod-steps {
	display: grid;
	gap: .75em;
	margin: 1.25em 0 0;
	padding: 0;
	list-style: none;
}

.torod-steps__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: .625em;
	margin: 0;
	font-size: .875em;
}

/* Vertical timeline rail between the markers (narrow cards). */
.torod-steps__item + .torod-steps__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(.5625em - 1px);
	inset-block-end: calc(50% + .5625em);
	block-size: calc(.75em + 100% - 1.125em);
	inline-size: 2px;
	background: var(--torod-todo);
}

.torod-steps__item.is-done + .torod-steps__item::before {
	background: var(--torod-accent);
}

.torod-steps__item.is-todo .torod-steps__marker {
	border-color: var(--torod-todo);
}

.torod-steps__marker {
	flex: none;
	box-sizing: border-box;
	width: 1.125em;
	height: 1.125em;
	border: 2px solid var(--torod-todo);
	border-radius: 50%;
	background: transparent;
}

.torod-steps__item.is-done,
.torod-steps__item.is-current {
	color: inherit;
}

.torod-steps__item.is-done .torod-steps__marker {
	border-color: var(--torod-accent);
	background: var(--torod-accent);
}

.torod-steps__item.is-current .torod-steps__marker {
	border-color: var(--torod-accent);
	box-shadow: inset 0 0 0 3px var(--torod-accent);
}

.torod-steps__item.is-current .torod-steps__label {
	font-weight: 700;
}

.torod-shipment--attention .torod-steps__item.is-current .torod-steps__marker,
.torod-shipment--returning .torod-steps__item.is-current .torod-steps__marker {
	border-color: var(--torod-attention);
	box-shadow: inset 0 0 0 3px var(--torod-attention);
}

.torod-shipment--problem .torod-steps__item.is-current .torod-steps__marker {
	border-color: var(--torod-danger);
	box-shadow: inset 0 0 0 3px var(--torod-danger);
}

/* Horizontal when the card itself is wide enough (sidebars included). */
@container torod-shipment (min-width: 30em) {
	.torod-steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
	}

	.torod-steps__item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .5em;
	}

	/* Connector line to the previous step. */
	.torod-steps__item + .torod-steps__item::before {
		content: "";
		position: absolute;
		inset-block-end: auto;
		inset-inline-start: auto;
		inset-block-start: calc(.5625em - 1px);
		inset-inline-end: calc(50% + .75em);
		inline-size: calc(100% - 1.5em);
		block-size: 2px;
		background: var(--torod-line);
	}

	.torod-steps__item.is-done + .torod-steps__item::before {
		background: var(--torod-accent);
	}
}

/* Facts */
/* No divider when the facts come right after the title (status switched off). */
.torod-shipment--no-status .torod-facts {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.torod-facts {
	display: grid;
	gap: .75em;
	margin: 1.25em 0 0;
	padding-block-start: 1.25em;
	border-block-start: 1px solid var(--torod-line);
}

.torod-facts__row {
	display: grid;
	grid-template-columns: minmax(8em, 35%) 1fr;
	gap: .25em 1em;
	align-items: baseline;
}

.torod-facts dt {
	margin: 0;
	color: var(--torod-muted);
	font-weight: 400;
	font-size: .9375em;
}

.torod-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
	font-weight: 600; /* The values (company, number) are what people look for. */
}

.torod-facts__time {
	display: block;
	color: var(--torod-muted);
	font-size: .875em;
}

.torod-facts__tracking {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
}

.torod-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
}

.torod-shipment .torod-copy {
	display: inline-flex;
	align-items: center;
	gap: .375em;
	min-block-size: 44px;
	margin: 0;
	padding: 0 .875em;
	border: 1px solid var(--torod-line);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .875em;
	line-height: 1;
	/* Neutralise theme button styles. */
	block-size: auto;
	min-inline-size: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
}

.torod-shipment .torod-copy:hover,
.torod-shipment .torod-copy:focus,
.torod-shipment .torod-copy:active {
	border-color: currentColor;
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.torod-copy__failed {
	flex-basis: 100%;
	padding-inline-start: .5em;
	border-inline-start: 3px solid var(--torod-danger);
	font-size: .875em;
}

.torod-shipment .torod-copy:focus-visible,
.torod-cell__link:focus-visible,
.torod-history summary:focus-visible {
	outline: 2px solid var(--torod-accent);
	outline-offset: 2px;
}

.torod-shipment .torod-copy.is-copied {
	border-color: var(--torod-success);
	border-width: 2px; /* Colour is not the only signal: the label also says "Copied". */
}

/* History */
.torod-history {
	margin-block-start: 1em;
}

.torod-history summary {
	cursor: pointer; /* 44px touch target: padding below. */
}

.torod-history__list {
	margin: .5em 0 0;
	padding: 0;
	list-style: none;
	border-inline-start: 2px solid var(--torod-line);
}

.torod-history__list li {
	position: relative;
	margin: 0;
	padding-block: .375em;
	padding-inline-start: 1em;
}

.torod-history__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: -5px;
	inset-block-start: .9em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--torod-line);
}

.torod-history__list li:first-child::before {
	background: var(--torod-accent);
}

.torod-history__time {
	display: block;
	color: var(--torod-muted);
	font-size: .875em;
}

.torod-shipment__actions {
	margin: 1.25em 0 0;
}

/* My Account > Orders column */
.torod-cell {
	display: inline-flex;
	flex-direction: column;
	gap: .125em;
}

.torod-cell__link {
	display: inline-flex;
	align-items: center;
	gap: .375em;
}

.torod-cell__sub {
	color: var(--torod-muted);
	font-size: .875em;
}

.torod-cell--empty {
	color: inherit;
}

@container torod-shipment (max-width: 22em) {
	.torod-facts__row {
		grid-template-columns: 1fr;
	}
}

/* Windows High Contrast and other forced colours: keep the steps readable. */
@media (forced-colors: active) {
	.torod-dot,
	.torod-steps__marker {
		forced-color-adjust: none;
		border-color: CanvasText;
	}
	.torod-dot,
	.torod-steps__item.is-done .torod-steps__marker {
		background: CanvasText;
	}
	.torod-steps__item.is-current .torod-steps__marker {
		border-width: 4px;
		box-shadow: none;
	}
	.torod-steps__item + .torod-steps__item::before {
		background: CanvasText;
	}
}

/* "Step 2 of 5": only on narrow cards, which hide the step list visually. */
.torod-shipment__stepcount {
	display: none;
	margin-block: .5em 0;
	font-size: .875em;
	font-weight: 600;
}

@container torod-shipment (max-width: 30em) {
	.torod-shipment__stepcount {
		display: block;
	}

	/* Phones: "Step 2 of 5" under the headline says it; the step list stays for screen
	   readers only, so the courier, tracking number and Track button stay in view. */
	.torod-shipment .torod-steps {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.torod-shipment .torod-track {
		display: block;
		inline-size: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* History toggle: the plugin's own chevron instead of the browser's triangle. */
.torod-history summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5em;
	padding-block: .75em;
}

.torod-history summary::-webkit-details-marker {
	display: none;
}

.torod-history summary::after {
	content: "";
	inline-size: .5em;
	block-size: .5em;
	/* Physical sides: a down/up chevron must not mirror in RTL. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-block-start: -.2em;
}

.torod-history[open] summary::after {
	transform: rotate(-135deg);
	margin-block-start: .2em;
}

/* Fallback for themes without WordPress's screen-reader-text class. */
.torod-shipment .screen-reader-text,
.torod-cell .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

@media (prefers-reduced-motion: no-preference) {
	.torod-copy {
		transition: border-color .15s ease, color .15s ease;
	}
}

.torod-shipment__updated {
	margin-block: .25em 0;
	font-size: .875em;
}