@charset "utf-8";
/* ==========================================================================
   Tracking result — client-approved layout.

   Banner, FROM/TO route band, scan strip, five-step progress with dates,
   current-status bar, map + history on the left, details / shipper /
   consignee / actions on the right, help strip at the foot.

   Loaded after frontend.css. Everything here is prefixed .mcgx so it cannot
   collide with the older classes still used by the search form and states.
   ========================================================================== */

.mcgx {
	--x-navy: var(--mcg-brand, #0B2033);
	--x-gold: var(--mcg-accent, #C8A54B);
	--x-gold-soft: color-mix(in srgb, var(--x-gold) 14%, #fff);
	--x-gold-ink: color-mix(in srgb, var(--x-gold) 62%, #3A2A00);
	--x-ink: #17222E;
	--x-body: #55636F;
	--x-muted: #8492A0;
	--x-line: #E6EBF0;
	--x-paper: #F4F7F9;
	--x-radius: 14px;

	display: grid;
	gap: 11px;
	color: var(--x-body);
	font-size: 13px;
	line-height: 1.5;
	outline: none;
}

.mcgx * { box-sizing: border-box; }
.mcgx strong { color: var(--x-ink); }
.mcgx-muted { color: var(--x-muted); }

/* ------------------------------------------------------------- the banner */

.mcgx-banner {
	position: relative;
	padding: 0 14px 14px;
	border-radius: var(--x-radius);
	min-height: 84px;
	overflow: hidden;
	background-color: #E8EFF3;
	/* Sky, drawn in CSS. A photograph set in Settings paints over this, but
	   the design has to look finished before the client supplies artwork. */
	background-image:
		radial-gradient(120% 80% at 82% 14%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 46%),
		linear-gradient(180deg, #7FB3D5 0%, #AFD0E4 46%, #E6EEF2 100%);
	/* The sky is a wide, shallow strip. "cover" blew it up until the
	   aircraft filled half the header; fitting the width instead keeps the
	   artwork at its intended scale, and the ground colour fills whatever
	   sits below it — the route band covers that area anyway. */
	background-size: 100% auto;
	background-position: center top;
}

/* Three tracks, so the tagline sits centred and the right-hand third stays
   clear for the aircraft in the artwork. space-between pushed the tagline
   into the plane. */
.mcgx-banner__bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 12px 6px 14px;
}

.mcgx-banner__tag { justify-self: center; }

.mcgx-banner__logo { max-height: 50px; max-width: 262px; display: block; }

.mcgx-banner__word {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--x-navy);
}

.mcgx-banner__tag {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--x-navy);
	opacity: .8;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* --- FROM / TO ---------------------------------------------------------- */

.mcgx-route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(90px, .9fr) minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 15px 20px 16px;
	border-radius: 9px;
	background: linear-gradient(105deg,
		var(--x-navy) 0%,
		color-mix(in srgb, var(--x-navy) 88%, #1B3D5C) 100%);
	color: #fff;
}

.mcgx-route__end { min-width: 0; }
.mcgx-route__end--to { text-align: right; }

.mcgx-route__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
	margin-bottom: 5px;
}

.mcgx-route__addr {
	display: grid;
	gap: 1px;
	font-size: clamp(16px, 1.55vw, 20px);
	font-weight: 700;
	line-height: 1.24;
	color: #fff;
	overflow-wrap: anywhere;
}

.mcgx-route__port {
	display: inline-flex;
	align-items: flex-start;
	gap: 5px;
	margin-top: 6px;
	font-size: 11.5px;
	color: rgba(255,255,255,.88);
}

.mcgx-route__end--to .mcgx-route__port { justify-content: flex-end; }
.mcgx-route__port svg { flex: none; margin-top: 2px; color: var(--x-gold); }

.mcgx-route__arc {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--x-gold);
}

.mcgx-route__line {
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(to right,
		rgba(255,255,255,.55) 0 6px, transparent 6px 12px);
}

.mcgx-route__dot {
	flex: none;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--x-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-gold) 28%, transparent);
}

.mcgx-route__plane { flex: none; }

/* --- scan strip --------------------------------------------------------- */

.mcgx-scan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	padding: 9px 26px 10px;
	background: #fff;
	border-radius: 10px;
}

.mcgx-scan__barswrap { min-width: 0; }

.mcgx-scan__bars svg {
	display: block;
	width: 100%;
	/* The generator emits preserveAspectRatio="none", so height is free
	   without shrinking module width — the only dimension a scanner needs. */
	height: 40px;
}

.mcgx-scan__no {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: var(--x-ink);
}

.mcgx-scan__qrwrap { text-align: center; }
.mcgx-scan__qr { line-height: 0; }
.mcgx-scan__qr img, .mcgx-scan__qr canvas { display: block; width: 52px; height: 52px; }

.mcgx-scan__qrcap {
	display: block;
	margin-top: 4px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--x-muted);
}

/* -------------------------------------------------------------- the steps */

.mcgx-steps {
	padding: 15px 14px 12px;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
}

.mcgx-steps__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	list-style: none;
	margin: 0; padding: 0;
}

.mcgx-step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 3px;
	text-align: center;
	min-width: 0;
}

/* The connector sits behind the marks and stops at each cell's midpoint, so
   it never runs past the first or last step. */
.mcgx-step__bar {
	position: absolute;
	top: 22px;
	right: 50%;
	width: 100%;
	height: 3px;
	background: var(--x-line);
	border-radius: 3px;
}

.mcgx-step.is-done .mcgx-step__bar { background: var(--x-gold); }

.mcgx-step__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #E7EBF0;
	border: 0;
	color: #97A5B3;
	margin-bottom: 7px;
}

.mcgx-step.is-done .mcgx-step__mark {
	background: var(--x-gold);
	border-color: var(--x-gold);
	color: #fff;
}

.mcgx-step.is-live .mcgx-step__mark {
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--x-gold) 22%, transparent);
}

.mcgx-step__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #7C8898;
	overflow-wrap: anywhere;
}

.mcgx-step.is-done .mcgx-step__label { color: var(--x-ink); }
.mcgx-step.is-live .mcgx-step__label { color: var(--x-gold-ink); }

.mcgx-step__when {
	display: grid;
	gap: 0;
	font-size: 10.5px;
	color: var(--x-muted);
	margin-top: 2px;
}

.mcgx-step__time { font-size: 11px; }
.mcgx-step__none { color: var(--x-line); font-weight: 700; }

/* ------------------------------------------------------------ status strip */

.mcgx-status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 11px 16px;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
}

.mcgx-status__left { display: flex; align-items: center; gap: 14px; }

.mcgx-status__icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--x-gold-soft);
	color: var(--x-gold-ink);
	flex: none;
}

.mcgx-status__cap {
	display: block;
	font-size: 12px;
	color: var(--x-muted);
}

.mcgx-status__now {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var(--x-ink);
	line-height: 1.2;
}

.mcgx-status__mid { min-width: 0; }
.mcgx-status__where { display: block; font-size: 15px; font-weight: 700; }
.mcgx-status__note { margin: 1px 0 0; font-size: 12.5px; color: var(--x-body); }

.mcgx-status__right { display: grid; gap: 6px; justify-items: start; }

.mcgx-status__meta {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 13px;
	color: var(--x-body);
}

.mcgx-status__meta svg { flex: none; margin-top: 3px; color: var(--x-muted); }
.mcgx-status__val { display: block; font-weight: 600; color: var(--x-ink); }

/* ------------------------------------------------------------- the columns */

.mcgx-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: 11px;
	align-items: start;
}

.mcgx-col { display: grid; gap: 11px; align-content: start; min-width: 0; }

.mcgx-panel {
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	overflow: hidden;
}

.mcgx-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--x-line);
	background: #fff;
}

.mcgx-panel__title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--x-ink);
}

.mcgx-panel__title svg { color: var(--x-navy); flex: none; }
.mcgx-panel__body { padding: 11px 14px; }

/* --- map ---------------------------------------------------------------- */

.mcgx-toggle {
	display: inline-flex;
	padding: 3px;
	border-radius: 8px;
	background: var(--x-paper);
	border: 1px solid var(--x-line);
}

.mcgx-toggle__b {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 5px 13px;
	border-radius: 6px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--x-body);
	cursor: pointer;
}

.mcgx-toggle__b.is-on { background: var(--x-navy); color: #fff; }

.mcgx-map { width: 100%; background: var(--x-paper); }
.mcgx-map .leaflet-container { font: inherit; }

.mcgx-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 11px 16px;
	border-top: 1px solid var(--x-line);
	font-size: 12.5px;
	color: var(--x-body);
}

.mcgx-legend__i { display: inline-flex; align-items: center; gap: 7px; }

.mcgx-legend__k {
	width: 11px; height: 11px;
	border-radius: 50%;
	flex: none;
}

.mcgx-legend__k--route { background: #2F7DD1; border-radius: 2px; height: 3px; width: 18px; }
.mcgx-legend__k--live { background: #2F7DD1; }
.mcgx-legend__k--dest { background: var(--x-gold); }

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

.mcgx-hist { list-style: none; margin: 0; padding: 0; display: grid; }

.mcgx-hist__i {
	position: relative;
	display: grid;
	grid-template-columns: 96px 34px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
	padding: 10px 10px;
	border-radius: 9px;
}

.mcgx-hist__i.is-latest { background: var(--x-gold-soft); }

/* The spine, drawn between consecutive markers. */
.mcgx-hist__i::before {
	content: "";
	position: absolute;
	left: calc(96px + 12px + 17px);
	top: 40px;
	bottom: -14px;
	width: 2px;
	background: var(--x-line);
	transform: translateX(-1px);
}

.mcgx-hist__i:last-child::before { display: none; }

.mcgx-hist__when { font-size: 12.5px; color: var(--x-muted); display: grid; }
.mcgx-hist__time { font-size: 12px; }

.mcgx-hist__mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--x-paper);
	border: 1px solid var(--x-line);
	color: var(--x-muted);
}

.mcgx-hist__i.is-latest .mcgx-hist__mark {
	background: var(--x-gold);
	border-color: var(--x-gold);
	color: #fff;
}

.mcgx-hist__body { min-width: 0; }
.mcgx-hist__label { display: block; font-size: 13.5px; }
.mcgx-hist__where { display: block; font-size: 12.5px; color: var(--x-body); }
.mcgx-hist__note { display: block; margin-top: 2px; font-size: 12px; color: var(--x-muted); }

/* --- details / parties -------------------------------------------------- */

.mcgx-kv {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0;
	margin: 0;
	font-size: 12.5px;
}

.mcgx-kv dt { color: var(--x-body); }

.mcgx-kv dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	color: var(--x-ink);
	overflow-wrap: anywhere;
}

.mcgx-kv__strong { display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-weight: 700; }

.mcgx-copy {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 2px;
	line-height: 0;
	color: var(--x-muted);
	cursor: pointer;
	border-radius: 4px;
}

.mcgx-copy:hover { color: var(--x-gold-ink); background: var(--x-paper); }

.mcgx-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--x-gold-soft);
	color: var(--x-gold-ink);
}

.mcgx-party { display: grid; gap: 1px; font-size: 12.5px; }
.mcgx-party__name { font-weight: 700; color: var(--x-ink); }
.mcgx-party__port { margin-top: 4px; color: var(--x-muted); }
.mcgx-party__c { color: var(--x-body); }

/* --- actions ------------------------------------------------------------ */

.mcgx-actions { display: grid; gap: 7px; padding: 11px 14px; }

.mcgx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 9px 14px;
	border-radius: 8px;
	border: 1px solid var(--x-line);
	background: #fff;
	color: var(--x-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, transform .12s ease, background .15s ease;
}

.mcgx-btn:hover { border-color: var(--x-gold); transform: translateY(-1px); }
.mcgx-btn:active { transform: none; }

.mcgx-btn--primary {
	background: var(--x-gold);
	border-color: var(--x-gold);
	color: #24190A;
}

.mcgx-btn--primary:hover {
	background: color-mix(in srgb, var(--x-gold) 88%, #000);
	border-color: color-mix(in srgb, var(--x-gold) 88%, #000);
}

/* ---------------------------------------------------------- the help strip */

.mcgx-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
}

.mcgx-help__l { display: flex; align-items: center; gap: 14px; min-width: 0; }

.mcgx-help__icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--x-gold);
	color: #fff;
	flex: none;
}

.mcgx-help__t { display: block; font-size: 14.5px; }
.mcgx-help__s { display: block; font-size: 12.5px; color: var(--x-body); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1020px) {
	.mcgx-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.mcgx-route { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
	.mcgx-route__end--to { text-align: left; }
	.mcgx-route__end--to .mcgx-route__port { justify-content: flex-start; }
	.mcgx-route__arc { padding: 2px 0 2px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
	.mcgx-route__line {
		width: 2px; height: 16px; flex: none;
		background: repeating-linear-gradient(to bottom,
			rgba(255,255,255,.55) 0 5px, transparent 5px 10px);
	}
	.mcgx-route__plane { transform: rotate(180deg); }

	.mcgx-scan { grid-template-columns: 1fr; justify-items: center; }
	.mcgx-scan__barswrap { width: 100%; }

	/* Five abreast does not fit a phone; two rows of icons do. */
	.mcgx-steps__row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 18px 6px; }
	.mcgx-step__bar { display: none; }

	.mcgx-status { grid-template-columns: 1fr; gap: 14px; }
	.mcgx-status__right { justify-items: start; }

	.mcgx-hist__i { grid-template-columns: 30px minmax(0, 1fr); }
	.mcgx-hist__when { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 8px; }
	.mcgx-hist__i::before { left: 15px; top: 62px; }
	.mcgx-hist__mark { width: 30px; height: 30px; }
}

/* ----------------------------------------------------------------- print */

@media print {
	.mcgx-toggle, .mcgx-actions, .mcgx-help, .mcgx-copy { display: none !important; }
	.mcgx-banner, .mcgx-route, .mcgx-step.is-done .mcgx-step__mark,
	.mcgx-hist__i.is-latest, .mcgx-status__icon {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.mcgx-grid { grid-template-columns: 1fr; }
	.mcgx-panel { break-inside: avoid; }
}

/* ==========================================================================
   Map furniture and the last of the design details
   ========================================================================== */

.mcgx-mapwrap { position: relative; }

/* A dark pill naming each end of the route, sitting above its pin. */
.mcgx-maplabel {
	display: inline-block;
	white-space: nowrap;
	transform: translateX(-50%);
	padding: 5px 10px;
	border-radius: 7px;
	background: color-mix(in srgb, var(--x-navy) 92%, #000);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	box-shadow: 0 3px 10px rgba(6, 18, 30, .35);
}

.mcgx-mapplane {
	display: block;
	color: #2F7DD1;
	filter: drop-shadow(0 2px 4px rgba(6, 18, 30, .45));
}

.mcgx-mapplane svg { display: block; transform: rotate(135deg); }

/* The legend sits on the map, not under it. */
.mcgx-legend {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 500;
	display: grid;
	gap: 6px;
	padding: 10px 13px;
	border: 1px solid var(--x-line);
	border-top: 1px solid var(--x-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 6px 18px -8px rgba(6, 18, 30, .4);
	font-size: 12px;
}

/* The Satellite pill reads as a map control, so it takes the map's blue
   rather than the brand navy. */
.mcgx-toggle__b.is-on { background: #1A73E8; color: #fff; }

/* The connector runs between two marks, not behind them — otherwise the
   line shows through the gap on either side of every circle. */
.mcgx-step__bar {
	top: 21px;
	right: calc(50% + 26px);
	width: calc(100% - 52px);
}

/* Vertical rules separating the three zones of the status bar. */
.mcgx-status__mid {
	padding-left: 22px;
	border-left: 1px solid var(--x-line);
}

.mcgx-status__right {
	padding-left: 22px;
	border-left: 1px solid var(--x-line);
}

@media (max-width: 760px) {
	.mcgx-status__mid, .mcgx-status__right { padding-left: 0; border-left: 0; }
	.mcgx-legend { position: static; border-radius: 0; border: 0; border-top: 1px solid var(--x-line); box-shadow: none; }
}

/* ==========================================================================
   Matching the approved comp: filled glyphs, the live ring, table rules
   ========================================================================== */

/* Completed milestones: gold disc, white glyph. */
.mcgx-step.is-done .mcgx-step__mark {
	background: var(--x-gold);
	color: #fff;
	border: 0;
}

/* Pending milestones keep the dark glyph on a light disc, as the comp shows —
   not a pale grey icon that disappears. */
.mcgx-step:not(.is-done) .mcgx-step__mark { color: #55636F; }

/* The live milestone wears a ring: a white gap, then a gold hoop. */
.mcgx-step.is-live .mcgx-step__mark {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--x-gold);
}

.mcgx-step.is-live .mcgx-step__label { color: var(--x-gold-ink); }

.mcgx-step__bar { height: 2.5px; }

/* History markers: filled, and the latest one gold. */
.mcgx-hist__mark { background: #E7EBF0; border: 0; color: #55636F; }
.mcgx-hist__i.is-latest .mcgx-hist__mark { background: var(--x-gold); color: #fff; }

/* The details list is ruled, the way the comp sets it. */
.mcgx-kv dt, .mcgx-kv dd {
	padding: 7px 0;
	border-bottom: 1px solid var(--x-line-soft, #F0F4F7);
}

.mcgx-kv dt:last-of-type, .mcgx-kv dd:last-of-type { border-bottom: 0; }

.mcgx { --x-line-soft: #F0F4F7; }

/* Tracking number picks up the brand navy, as in the comp. */
.mcgx-kv__strong { color: var(--x-navy); }

/* The map is a panel, not a hero — the comp gives it about this much room. */
.mcgx-map { min-height: 0; }

/* Final pass against the comp: the discs and the rail carry a touch more
   weight, and the milestone labels sit darker. */
.mcgx-step__mark { width: 44px; height: 44px; }
.mcgx-step.is-live .mcgx-step__mark { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--x-gold); }
.mcgx-step__bar { height: 3px; top: 22px; right: calc(50% + 28px); width: calc(100% - 56px); }
.mcgx-step.is-done .mcgx-step__label { color: var(--x-ink); }
.mcgx-step__label { font-size: 11.5px; }
.mcgx-step__when { font-size: 11px; }

/* The status bar's three zones need the rules to actually show. */
.mcgx-status__mid, .mcgx-status__right { border-left: 1px solid var(--x-line); }
.mcgx-status__left { padding-right: 4px; }

/* Theme link underline guard */
.mcgx a.mcgx-btn,
.mcgx a.mcgx-btn:hover,
.mcgx .leaflet-bar a,
.mcgx .leaflet-control-attribution a {
	text-decoration: none !important;
}