/* Bus stop markers shared by every bus map (see bus-stop-layer.js). Dots are drawn on a canvas; pins and hubs are markers. */

/* Labels are plain text with a white halo, no boxes: they read on any map tile and stay quiet until you look for them.
   Detail follows zoom through .lbl-1 (name in small type) and .lbl-2 (code and name) on the map element. */
.bus-stop-icon { position: relative; display: flex; align-items: center; color: var(--nv-ink); }
.bus-stop-label-container { display: flex; align-items: center; gap: 3px; color: var(--nv-ink); position: relative; }
.sg-bus-sign { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 170px; padding: 2px 7px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: rgba(255,255,255,.96); font: 700 12px/1.3 var(--nv-font); white-space: nowrap; pointer-events: none; }
.sg-bus-sign-code { color: var(--nv-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-bus-sign-name { overflow: hidden; text-overflow: ellipsis; color: var(--nv-ink); font-weight: 700; }
.bus-stop-pin-fa { color: var(--nv-ink); background-color: var(--nv-accent); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; line-height: 1; flex: none; }
.bus-stop-pin-fa svg { width: 16px; height: 16px; }
.bus-stop-selected .bus-stop-pin-fa { outline: 2px solid var(--nv-ink); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

#map .bus-stop-pin-fa { transition: transform .15s var(--nv-ease); transform-origin: 50% 100%; }
#map.lbl-1 .bus-stop-pin-fa { transform: scale(.8); }
#map.lbl-1 .sg-bus-sign { max-width: 110px; font-size: 10px; }
#map.lbl-1 .sg-bus-sign-code { display: none; }
#map.lbl-1 .sg-bus-sign-name { font-weight: 700; }
/* The hovered or open stop always shows its code and name above its neighbours. */
#map .bus-stop-icon:hover, #map .bus-stop-icon.is-open { z-index: 9000 !important; }
#map .bus-stop-icon:hover .sg-bus-sign, #map .bus-stop-icon.is-open .sg-bus-sign { max-width: 220px; font-size: 11px; }
#map .bus-stop-icon:hover .sg-bus-sign-code, #map .bus-stop-icon.is-open .sg-bus-sign-code { display: inline; }
@media (prefers-reduced-motion: reduce) { #map .bus-stop-pin-fa { transition: none; } }

/* Terminals, interchanges and depots: a small dark square with a bus; the name appears from zoom 13. */
.bus-hub-icon { background: none; border: 0; }
.bus-hub { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.bus-hub i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--nv-ink); border: 1.5px solid var(--nv-accent); color: #fff; }
.bus-hub svg { width: 10px; height: 10px; }
.bus-hub b { display: none; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: rgba(255,255,255,.96); color: var(--nv-ink); font: 700 11px/1.3 var(--nv-font); white-space: nowrap; pointer-events: none; }
.bus-hub-labels .bus-hub b { display: block; }

/* Hover label for dots and hubs: code, then name. */
.leaflet-tooltip.bus-stop-tip { padding: 2px 7px; border: 1px solid var(--nv-line); border-radius: var(--nv-r); background: var(--nv-raised); color: var(--nv-ink); box-shadow: none; font: 600 11px/1.4 var(--nv-font); }
.leaflet-tooltip.bus-stop-tip b { margin-right: 4px; color: var(--nv-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.leaflet-tooltip-top.bus-stop-tip::before { border-top-color: var(--nv-line); }

/* While a route is shown, other stops and hubs step back; hovering brings one forward. */
.bus-route-focus .bus-hub-icon { opacity: .6; }
.bus-route-focus .bus-hub b { display: none; }
/* Like any other stop that is not on the route: a small plain dot, named on hover. */
.bus-route-focus .bus-hub i { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid var(--nv-ink); opacity: .55; }
.bus-route-focus .bus-hub svg { display: none; }
.bus-route-focus .bus-hub-icon:hover { opacity: 1; }
#map .bus-stop-dim { opacity: .45; }
#map .bus-stop-dim .sg-bus-sign { display: none; }
#map .bus-stop-dim .bus-stop-pin-fa { transform: scale(.6); }
#map .bus-stop-dim:hover { opacity: 1; }
#map .bus-stop-dim:hover .sg-bus-sign { display: inline-flex; }