/**
 * TEGL - Tracking result styling.
 *
 * Colours are taken from this site's Elementor kit (id 10) so the tracking
 * result reads as part of the site rather than a bolted-on widget:
 *   #0A292E  Dark Background      #0F3E45  Accent 2 / Button Hover
 *   #FEC430  Button / Accent 1    #C8EDF3  Line Colour
 *   #D6F2F6  Light Background     #F1FBFC  Extra Light Background
 * Typeface is Nunito, the kit's global family.
 */

:root {
	--tegl-ink: #0A292E;
	--tegl-accent: #0F3E45;
	--tegl-amber: #FEC430;
	--tegl-line: #C8EDF3;
	--tegl-bg-light: #D6F2F6;
	--tegl-bg-xlight: #F1FBFC;
	--tegl-muted: #5B7276;
	--tegl-white: #FFFFFF;
	--tegl-radius: 14px;
}

/* ---------------------------------------------------------------- Cards -- */

.tegl-card {
	background: var(--tegl-white);
	border: 1px solid var(--tegl-line);
	border-radius: var(--tegl-radius);
	padding: 24px;
	margin: 0 0 20px;
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--tegl-ink);
	box-shadow: 0 1px 2px rgba(10, 41, 46, 0.04);
}

.tegl-card__title {
	margin: 0 0 18px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--tegl-ink);
}

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

.tegl-map-card {
	padding: 8px;
	overflow: hidden;
}

.tegl-map {
	height: 340px;
	width: 100%;
	border-radius: calc(var(--tegl-radius) - 6px);
	background: var(--tegl-bg-xlight);
	z-index: 0; /* keep tiles below site headers and modals */
}

@media (min-width: 900px) {
	.tegl-map {
		height: 420px;
	}
}

/* Leaflet divIcon pins. */
.tegl-pin {
	background: none;
	border: 0;
}

.tegl-pin__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--tegl-white);
	font: 700 13px/1 "Nunito", sans-serif;
	border: 2px solid var(--tegl-white);
	box-shadow: 0 2px 6px rgba(10, 41, 46, 0.35);
}

.tegl-pin__vehicle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--tegl-amber);
	border: 3px solid var(--tegl-white);
	box-shadow: 0 3px 10px rgba(10, 41, 46, 0.4);
}

.tegl-pin__vehicle svg {
	width: 20px;
	height: 20px;
	fill: var(--tegl-ink);
}

/* ------------------------------------------------------------ Timeline --- */

.tegl-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tegl-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 14px;
	padding: 0 0 22px 0;
	margin: 0;
}

.tegl-timeline__step:last-child {
	padding-bottom: 0;
}

/* Connector between markers. */
.tegl-timeline__step::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 26px;
	bottom: 0;
	width: 2px;
	background: var(--tegl-line);
}

.tegl-timeline__step:last-child::before {
	display: none;
}

.tegl-timeline__step--future::before {
	background: none;
	border-left: 2px dotted var(--tegl-line);
	width: 0;
}

.tegl-timeline__marker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	box-sizing: border-box;
}

.tegl-timeline__marker svg {
	width: 16px;
	height: 16px;
	fill: var(--tegl-white);
}

.tegl-timeline__step--done .tegl-timeline__marker {
	background: var(--tegl-accent);
}

.tegl-timeline__step--current .tegl-timeline__marker {
	background: var(--tegl-amber);
	box-shadow: 0 0 0 4px rgba(254, 196, 48, 0.28);
}

.tegl-timeline__step--future .tegl-timeline__marker {
	background: var(--tegl-white);
	border: 2px solid var(--tegl-line);
}

.tegl-timeline__body {
	min-width: 0;
	padding-top: 2px;
}

.tegl-timeline__label {
	margin: 0 0 2px;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--tegl-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tegl-timeline__step--future .tegl-timeline__label {
	color: var(--tegl-muted);
	font-weight: 600;
}

.tegl-timeline__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tegl-amber);
	color: var(--tegl-ink);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.tegl-timeline__blurb,
.tegl-timeline__stamp,
.tegl-timeline__by {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tegl-muted);
	line-height: 1.5;
}

.tegl-timeline__entry {
	padding: 8px 0 0;
}

.tegl-timeline__entry + .tegl-timeline__entry {
	margin-top: 6px;
	border-top: 1px dashed var(--tegl-line);
	padding-top: 10px;
}

.tegl-timeline__place {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tegl-accent);
}

.tegl-timeline__remarks {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--tegl-ink);
}

.tegl-timeline__by {
	margin-top: 4px;
	font-size: 0.76rem;
	font-style: italic;
}

.tegl-timeline__empty {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--tegl-bg-xlight);
	border-radius: 10px;
	font-size: 0.88rem;
	color: var(--tegl-muted);
}

/* ---------------------------------------------------------- Exceptions --- */

.tegl-exception {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 0.88rem;
	border-left: 4px solid;
}

.tegl-exception--warn {
	background: #FFF7E3;
	border-left-color: var(--tegl-amber);
	color: #6B4E06;
}

.tegl-exception--stop {
	background: #FDECEC;
	border-left-color: #C0392B;
	color: #7A241A;
}

/* ------------------------------------------------------------- QR code --- */

.tegl-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.tegl-qr img {
	display: block;
	width: 148px;
	height: 148px;
	max-width: 100%;
	background: var(--tegl-white);
	border: 1px solid var(--tegl-line);
	border-radius: 8px;
	padding: 6px;
}

.tegl-qr__caption {
	font-size: 0.76rem;
	color: var(--tegl-muted);
	margin: 0;
}

/* Admin-side QR panel. */
.tegl-qr-admin {
	padding: 12px 0;
}

.tegl-qr-admin img {
	width: 160px;
	height: 160px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	padding: 6px;
}

.tegl-qr-admin .tegl-qr__url {
	display: block;
	margin: 8px 0;
	font-size: 11px;
	line-height: 1.4;
	word-break: break-all;
	color: #50575e;
}

/* Shipments list column. */
.column-tegl_qr {
	width: 78px;
	text-align: center;
}

.column-tegl_qr img {
	width: 64px;
	height: 64px;
	display: inline-block;
}

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

/* WPCargo prints the example hint as a bare text node inside the form table;
   give it room and mute it so it reads as a hint rather than stray text. */
.wpcargo-track .track_form_table {
	border-collapse: separate;
}

.wpcargo-track form {
	font-family: "Nunito", system-ui, sans-serif;
}

/* ------------------------------------------------------------- Printing -- */

@media print {
	.tegl-map-card {
		display: none; /* tiles do not print usefully */
	}

	.tegl-card {
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
	}

	.tegl-timeline__step--future {
		display: none; /* a printed record shows what happened, not what may */
	}
}