/**
 * Order tracking front end.
 *
 * Deliberately low specificity and built on custom properties so the theme can
 * retheme it without fighting !important. Colours are defined once at the top;
 * override them in the theme's stylesheet to match the brand.
 */

/* Palette.
 *
 * Deliberately NOT switched on prefers-color-scheme. This store's front end is
 * dark unconditionally, so keying the palette to the visitor's operating
 * system meant anyone browsing with a light-mode OS got near-black text on a
 * dark background. The colours below are the store's own, read from the
 * theme's custom properties where they exist so a rebrand carries through,
 * with literal fallbacks for when they do not.
 */
.como-ot {
	--como-ot-radius: 10px;
	--como-ot-text: var(--nv-text-color, #ffffff);
	--como-ot-muted: #a8a29d;
	--como-ot-surface: var(--nv-light-bg, #1a1a1a);
	--como-ot-surface-alt: #141416;
	--como-ot-border: #32323a;
	--como-ot-accent: var(--nv-primary-accent, #f1b82d);
	--como-ot-on-accent: #121212;
	--como-ot-success: #4ade80;
	--como-ot-warning: #f1b82d;
	--como-ot-danger: #f2857c;
	--como-ot-gap: 1.25rem;

	color: var(--como-ot-text);
	max-width: 720px;
	margin-inline: auto;
	/* Breathing room below the site header so the box does not sit
	   against the navigation bar. */
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.como-ot__title {
	margin: 0 0 var(--como-ot-gap);
}

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

.como-ot__form {
	display: grid;
	gap: 1rem;
	padding: var(--como-ot-gap);
	border: 1px solid var(--como-ot-border);
	border-radius: var(--como-ot-radius);
	background: var(--como-ot-surface-alt);
}

@media (min-width: 640px) {
	.como-ot__form {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	.como-ot__submit {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

.como-ot__field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

/* Gold, and specific enough to win. The theme styles form labels with a near
   black colour, which on its own dark background rendered these invisible. */
.como-ot form .como-ot__label,
.como-ot .como-ot__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--como-ot-accent);
}

.como-ot .como-ot__input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--como-ot-border);
	border-radius: 8px;
	background: var(--como-ot-surface);
	color: var(--como-ot-text);
	font: inherit;
}

.como-ot .como-ot__input::placeholder {
	color: var(--como-ot-muted);
	opacity: 1;
}

.como-ot__input:focus-visible {
	outline: 2px solid var(--como-ot-accent);
	outline-offset: 1px;
}

.como-ot .como-ot__submit {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 8px;
	background: var(--como-ot-accent);
	color: var(--como-ot-on-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.como-ot__submit:hover {
	filter: brightness(0.94);
}

/* -------------------------------------------------------------- notices -- */

.como-ot__notice {
	margin-top: var(--como-ot-gap);
	padding: 0.9rem 1rem;
	border-radius: 8px;
	border-left: 3px solid transparent;
	font-size: 0.95rem;
}

.como-ot__notice--error {
	background: rgba(242, 133, 124, 0.12);
	border-left-color: var(--como-ot-danger);
	color: var(--como-ot-danger);
}

.como-ot__notice--info {
	background: var(--como-ot-surface-alt);
	border-left-color: var(--como-ot-accent);
	color: var(--como-ot-text);
}

/* -------------------------------------------------------------- results -- */

.como-ot__result {
	margin-top: var(--como-ot-gap);
}

.como-ot__order {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	margin-bottom: 1rem;
}

.como-ot .como-ot__order-number {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--como-ot-text);
}

.como-ot__order-date {
	color: var(--como-ot-muted);
	font-size: 0.9rem;
}

.como-ot__shipment {
	padding: var(--como-ot-gap);
	border: 1px solid var(--como-ot-border);
	border-radius: var(--como-ot-radius);
	background: var(--como-ot-surface);
}

.como-ot__shipment + .como-ot__shipment {
	margin-top: 1rem;
}

.como-ot__package-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--como-ot-muted);
	margin-bottom: 0.6rem;
}

.como-ot__status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}

.como-ot__badge {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	background: var(--como-ot-surface-alt);
	color: var(--como-ot-text);
}

.como-ot__badge--delivered {
	background: rgba(74, 222, 128, 0.14);
	color: var(--como-ot-success);
}

.como-ot__badge--out_for_delivery,
.como-ot__badge--in_transit {
	background: rgba(241, 184, 45, 0.14);
	color: var(--como-ot-accent);
}

.como-ot__badge--exception {
	background: rgba(241, 184, 45, 0.14);
	color: var(--como-ot-warning);
}

.como-ot__badge--returned {
	background: rgba(242, 133, 124, 0.14);
	color: var(--como-ot-danger);
}

.como-ot__carrier-status {
	color: var(--como-ot-muted);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------- progress -- */

.como-ot__progress {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	counter-reset: none;
}

.como-ot__step {
	position: relative;
	padding-top: 1.5rem;
	text-align: center;
	font-size: 0.78rem;
	color: var(--como-ot-muted);
	min-width: 0;
}

/* The connecting rail sits behind the dots. */
.como-ot__step::before {
	content: "";
	position: absolute;
	top: 0.4rem;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--como-ot-border);
}

.como-ot__step:first-child::before {
	left: 50%;
	width: 50%;
}

.como-ot__step:last-child::before {
	width: 50%;
}

.como-ot__step.is-complete::before,
.como-ot__step.is-current::before {
	background: var(--como-ot-accent);
}

.como-ot__step-dot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--como-ot-surface);
	border: 2px solid var(--como-ot-border);
}

.como-ot__step.is-complete .como-ot__step-dot {
	background: var(--como-ot-accent);
	border-color: var(--como-ot-accent);
}

.como-ot__step.is-current .como-ot__step-dot {
	background: var(--como-ot-surface);
	border-color: var(--como-ot-accent);
	box-shadow: 0 0 0 3px rgba(241, 184, 45, 0.22);
}

.como-ot__step.is-complete,
.como-ot__step.is-current {
	color: var(--como-ot-text);
	font-weight: 600;
}

.como-ot__shipment--delivered .como-ot__step.is-complete::before,
.como-ot__shipment--delivered .como-ot__step.is-current::before {
	background: var(--como-ot-success);
}

.como-ot__shipment--delivered .como-ot__step.is-complete .como-ot__step-dot,
.como-ot__shipment--delivered .como-ot__step.is-current .como-ot__step-dot {
	background: var(--como-ot-success);
	border-color: var(--como-ot-success);
	box-shadow: none;
}

/* ----------------------------------------------------------------- meta -- */

.como-ot__meta {
	display: grid;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.25rem;
}

@media (min-width: 520px) {
	.como-ot__meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.como-ot__meta-item {
	min-width: 0;
}

.como-ot__meta dt {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--como-ot-muted);
	margin-bottom: 0.15rem;
}

.como-ot .como-ot__meta dd {
	margin: 0;
	font-weight: 600;
	color: var(--como-ot-text);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- history -- */

/* Raised specificity on purpose. Themes style bare h2/h3 heavily, and Neve
   was rendering this as a large brand-coloured heading that dwarfed the
   shipment it belongs to. Element + class inside .como-ot beats a plain
   theme rule without resorting to !important. */
.como-ot h3.como-ot__history-title {
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--como-ot-text);
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
}

.como-ot__history {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.1rem;
	border-left: 2px solid var(--como-ot-border);
}

.como-ot__event {
	position: relative;
	display: grid;
	gap: 0.1rem;
	padding-bottom: 1rem;
	font-size: 0.9rem;
}

.como-ot__event:last-child {
	padding-bottom: 0;
}

.como-ot__event::before {
	content: "";
	position: absolute;
	left: calc(-1.1rem - 5px);
	top: 0.35rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--como-ot-border);
}

.como-ot__event:first-child::before {
	background: var(--como-ot-accent);
}

.como-ot .como-ot__event-desc {
	font-weight: 600;
	color: var(--como-ot-text);
}

.como-ot__event-location,
.como-ot__event-time {
	color: var(--como-ot-muted);
	font-size: 0.85rem;
}

.como-ot__updated {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--como-ot-muted);
}