/* BMSDock UI 1.4.1 — Map UI Standardization
   Scope: the map viewport and map-owned visual overlays only.
   Top Controls, Share, Settings and Donate are intentionally not styled here. */

:root{
  --map-ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --map-ui-neutral:#94a3b8;
  --map-ui-dark:#111827;
  --map-ui-panel:rgba(19,27,35,.82);
  --map-ui-focus:#16a34a;
  --map-ui-radius:10px;
}

.map-card,
#map{
  font-family:var(--map-ui-font);
}


/* Current playback point: keep configured diameter, standardize finish. */
#map .playback-dot{
  box-sizing:border-box;
  border-radius:50%;
  background:#11e64f;
  border-style:solid;
  border-color:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.38),0 0 0 1px rgba(15,23,42,.12);
}

/* Kilometer markers use the same typography and surface treatment everywhere. */
#map .km-marker{
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:var(--map-ui-dark);
  color:#fff;
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 2px 8px rgba(15,23,42,.34);
  font-family:var(--map-ui-font);
  font-size:13px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Map loading remains an overlay, not a button/card. */
.map-card .ride-loading-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.map-card .ride-loading-spinner{
  width:44px;
  height:44px;
  margin:-22px 0 0 -22px;
  border-width:4px;
  border-color:rgba(255,255,255,.78);
  border-top-color:#22c7ff;
  filter:drop-shadow(0 3px 8px rgba(15,23,42,.28));
}
.map-card .ride-loading-bar{
  left:90px;
  right:90px;
  bottom:50px;
  height:8px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  box-shadow:0 2px 8px rgba(15,23,42,.20);
  overflow:hidden;
}
.map-card .ride-loading-bar span{
  height:100%;
  border-radius:999px;
  background:#22c7ff;
}

/* Leaflet-owned surfaces inherit the same readable UI font if introduced later. */
#map .leaflet-popup-content-wrapper,
#map .leaflet-tooltip{
  font-family:var(--map-ui-font);
  border-radius:var(--map-ui-radius);
}
#map .leaflet-popup-content,
#map .leaflet-tooltip{
  font-size:14px;
  line-height:1.35;
}

@media(max-width:520px){
  .map-card .ride-loading-bar{
    left:84px;
    right:86px;
    bottom:47px;
  }
}