:root {
	--header-bg: #fff;
	--header-fg: #fff;
	--accent: #06cccc;
	--panel-bg: #fff;
	--muted: #6b7280;
	--border: #e5e7eb;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	--radius: 14px;
	/* Driver-dot outer diameter, incl. border. Single source of truth — JS
       reads this to size Leaflet's icon box so the dot's centre lines up
       pixel-perfect with the route endpoint. Change this one value to resize. */
	--driver-size: 30px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100dvh;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	color: #111;
	overflow: hidden;
}

body {
	display: grid;
	grid-template-rows: 56px 1fr auto auto;
}

#header {
	background: var(--header-bg);
	color: var(--header-fg);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	padding-top: env(safe-area-inset-top, 0);
	height: 56px;
	z-index: 10;
}
#brand {
	height: 28px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}
/* Desktop ETA chip, sits top-right in the header. Hidden on mobile. */
.eta-chip {
	margin-left: auto;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--marker-color);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Mobile ETA bar, sits between the map and the job-details panel. */
#eta-bar {
	display: none;
	padding: 10px 16px;
	background: var(--marker-color);
	color: #fff;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.02em;
	z-index: 4;
}

#eta-bar strong {
	font-size: 16px;
	font-weight: 700;
}

#map {
	width: 100%;
	height: 100%;
	background: #eaeaea;
}
/* Force full anti-aliasing on every Leaflet SVG path (route polyline, pin
   shapes). Default "auto" sometimes falls back to crispEdges for thin
   diagonals, producing jagged stair-steps on first paint. */
.leaflet-overlay-pane svg,
.leaflet-overlay-pane svg path {
	shape-rendering: geometricPrecision;
}

#panel {
	background: var(--panel-bg);
	border-top: 1px solid var(--border);
	padding: 14px 16px;
	padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 12px;
	align-items: center;
	box-shadow: var(--shadow);
	z-index: 5;
}
#driver-img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}
.panel-main {
	min-width: 0;
}
.panel-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.panel-row strong {
	font-size: 15px;
}
#address {
	font-size: 14px;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.muted {
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pill {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3730a3;
}
.pill.on-route {
	background: #dcfce7;
	color: #166534;
}
.pill.arrived {
	background: #fef3c7;
	color: #92400e;
}
.pill.done {
	background: #e5e7eb;
	color: #374151;
}
.pill.error {
	background: #fee2e2;
	color: #991b1b;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #03ff86;
	color: #000;
	text-decoration: none;
}

#toast {
	position: fixed;
	left: 50%;
	bottom: calc(110px + env(safe-area-inset-bottom, 0));
	transform: translateX(-50%) translateY(20px);
	background: #111;
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	opacity: 0;
	transition:
		opacity 0.2s,
		transform 0.2s;
	pointer-events: none;
	z-index: 20;
}
#toast.show {
	opacity: 0.92;
	transform: translateX(-50%) translateY(0);
}

/* Markers — Google-Maps-style live-location dot + red destination pin */
.driver-marker-wrap {
	position: relative;
	width: var(--driver-size) !important;
	height: var(--driver-size) !important;
}
.driver-marker {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--driver-fill);
	border: 6px solid var(--driver-border);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.driver-marker.pulsing::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: rgba(26, 115, 232, 0.18);
	animation: pulse 1.8s ease-out infinite;
	z-index: -1;
}
@keyframes pulse {
	0% {
		transform: scale(0.5);
		opacity: 0.9;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

/* Destination marker: branded teardrop pin with stacked N / min.
   Shape is the original Litta marker SVG (48x74), reskinned via CSS vars. */
.pickup-marker-wrap {
	position: relative;
	width: 48px !important;
	height: 74px !important;
	background: transparent;
	border: none;
}
.pickup-pin {
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}
.pickup-pin-body {
	fill: var(--marker-color);
}
.pickup-pin-inner {
	fill: transparent;
	stroke: var(--pin-inner-color);
	stroke-width: 3;
}

.pickup-pin-text {
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: #fff;
	text-align: center;
	line-height: 1;
	font-weight: 700;
}
.pickup-pin-num {
	margin: 12px 0 0 0;
	line-height: 0.9;
	font-size: 13px;
}
.pickup-pin-sub {
	font-size: 10px;
	font-weight: 600;
	opacity: 0.9;
}

#tracking-complete {
	position: absolute;
	inset: 56px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #f7f8fa;
	z-index: 500;
}

#tracking-complete[hidden] {
	display: none;
}

.tc-card {
	background: var(--panel-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 32px 28px;
	max-width: 420px;
	width: 100%;
	text-align: center;
}

.tc-icon {
	margin-bottom: 12px;
}
.tc-icon circle {
	fill: #003732;
}
.tc-icon path {
	stroke: #03ff86;
}

.tc-icon .tc-cross {
	display: none;
}

.tc-card.tc-error .tc-icon circle {
	fill: #d33b2c;
}
.tc-card.tc-error .tc-icon path {
	stroke: #fff;
}
.tc-card.tc-error .tc-icon .tc-tick {
	display: none;
}
.tc-card.tc-error .tc-icon .tc-cross {
	display: inline;
}

#tc-title {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 600;
}

#tc-message {
	margin: 0;
	line-height: 1.5;
	color: var(--muted);
}

@media (max-width: 640px) {
	#address {
		white-space: normal;
	}
	/* On phones hide the header chip, show the prominent bar instead. */
	.eta-chip {
		display: none !important;
	}
	#eta-bar:not([hidden]) {
		display: block;
	}
}