/* Trip map: the route between pickup and drop-off, drawn on the New England outline.
   Shared by the booking wizard, the confirmation screen, manage booking and the admin
   booking detail, so all four mark a trip the same way. No tiles and no API key: the
   outlines and the projection ship with the plugin. */

.azb-tripmap { margin: 0; overflow: hidden; background: var(--azb-raised); border: 1px solid var(--azb-line); border-radius: var(--radius-card); }
.azb-tripmap svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.azb-tripmap figcaption { padding: var(--s-3) var(--s-4); font: 400 0.8125rem/1.4 var(--font-mono); color: var(--azb-muted); border-top: 1px solid var(--azb-line); }

.azb-map__sea { fill: var(--azb-bg); }
.azb-map__state { fill: var(--azb-surface); stroke: color-mix(in srgb, var(--azb-ink) 16%, transparent); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.azb-map__glow { fill: none; stroke: var(--azb-accent); stroke-width: 9; opacity: 0.18; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.azb-map__route { fill: none; stroke: var(--azb-accent-hi); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-scene) var(--ease-out); }
.azb-map__route.is-drawing { stroke-dashoffset: 1; transition: none; }

/* A straight hop between the two points, shown while the driving route is still being fetched. */
.azb-map__route--direct { stroke-dasharray: 4 5; opacity: 0.75; }

.azb-map__a { fill: var(--azb-ink); stroke: var(--azb-bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.azb-map__b { fill: var(--azb-accent); stroke: var(--azb-bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.azb-map__stop { fill: var(--azb-muted); stroke: var(--azb-bg); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Key under the map, so the two dots are not left to guess. */
.azb-tripmap__key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin: 0; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--azb-line); font-size: var(--fs-small); color: var(--azb-muted); }
.azb-tripmap__key span { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.azb-tripmap__key i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--radius-pill); }
.azb-tripmap__key .is-a { background: var(--azb-ink); }
.azb-tripmap__key .is-b { background: var(--azb-accent); }
.azb-tripmap__key b { color: var(--azb-ink); font-weight: 500; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
	.azb-map__route { transition: none; }
}

/* Google Maps embed, used only when a key is set and the option is on. Same box as the
   drawn map so switching between them does not move the page. */
.azb-tripmap__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }

/* ---------- OpenStreetMap, through Leaflet ----------
   The tiles ship light, and the site is dark, so the tile pane alone is inverted. Controls and
   the attribution sit in other panes and keep their real colours, which keeps the credit legible.
   The OpenStreetMap credit is required by the licence. Do not hide it. */
.azb-tripmap__osm { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--azb-bg); }
.azb-tripmap__osm .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.94) contrast(0.9) saturate(0.65); }
.azb-tripmap__osm .leaflet-container { background: var(--azb-bg); font: 400 0.75rem/1.4 var(--font-body); }

.azb-tripmap__osm .leaflet-control-attribution {
	background: color-mix(in srgb, var(--azb-surface) 88%, transparent);
	color: var(--azb-muted); font-size: 0.6875rem; padding: 2px var(--s-2);
}
/* The OpenStreetMap credit has to stay, but it does not have to look like a way out of the
   booking. Same colour as the fine print around it, no underline, and it opens in a new tab. */
.azb-tripmap__osm .leaflet-control-attribution a { color: inherit; text-decoration: none; }
.azb-tripmap__osm .leaflet-control-attribution a:hover,
.azb-tripmap__osm .leaflet-control-attribution a:focus-visible { color: var(--azb-ink); text-decoration: underline; }

.azb-tripmap__osm .leaflet-control-zoom a {
	background: var(--azb-surface); color: var(--azb-ink); border-color: var(--azb-line);
}
.azb-tripmap__osm .leaflet-control-zoom a:hover { background: var(--azb-raised); color: var(--azb-accent-hi); }

/* The route and the two ends, matching the drawn map. */
.azb-osm__route { stroke: var(--azb-accent-hi); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.azb-osm__a, .azb-osm__b { border-radius: var(--radius-pill); box-shadow: 0 0 0 2px var(--azb-bg), 0 1px 4px rgb(0 0 0 / 0.45); }
.azb-osm__a { background: var(--azb-ink); }
.azb-osm__b { background: var(--azb-accent); }

/* Casing under the route, so the line stays readable over roads, parks and water. */
.azb-osm__casing { stroke: var(--azb-bg); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }

/* Standing labels on the two ends. The arrow Leaflet draws on a tooltip is dropped: at this
   size it reads as noise next to the dot it is already pointing at. */
.azb-tripmap__osm .leaflet-tooltip.azb-osm__label {
	background: var(--azb-surface); color: var(--azb-ink);
	border: 1px solid var(--azb-line); border-radius: var(--radius-pill);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
	padding: 3px 8px; white-space: nowrap;
	font: 500 0.6875rem/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.azb-tripmap__osm .leaflet-tooltip.azb-osm__label::before { display: none; }