/* ========== Map markers ==========
   Pins and cluster icons. Pins are inline SVG in an L.divIcon (see icons.js),
   so everything here is styleable without touching the marker HTML. */

.sc-pin {
  background: none;
  border: none;
  line-height: 0;
  transition: transform 0.12s ease;
  transform-origin: 50% 100%;
}

.sc-pin .pin-svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
}

.sc-pin .pin-body {
  stroke: #fff;
  stroke-width: 1.6;
  paint-order: stroke fill;
}

/* The artwork is an <image> inside .pin-svg, so it would otherwise swallow the
   click that belongs to the marker. The count badge on a grouped photo pin is
   the same story - it sits over the part of the pin you aim at. */
.pin-art,
.pin-count {
  pointer-events: none;
}

.sc-pin:hover {
  transform: scale(1.12);
  z-index: 1000;
}

/* Photos are the bulk of the dataset - let them sit back a little. */
.sc-pin--photos .pin-svg {
  opacity: 0.9;
}

/* Except where one pin stands for a whole spot's worth: it is no longer one of
   254, and its badge has to be legible against the map. */
.sc-pin--photo-group .pin-svg {
  opacity: 1;
}

/* ---------- Trip stops ---------- */
.sc-pin.is-trip-stop .pin-body {
  stroke: #facc15;
  stroke-width: 2.4;
}

.sc-pin.is-trip-stop .pin-svg {
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9))
          drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
}

/* "Show on map" feedback. Was a red rectangular box-shadow on the icon's
   wrapper div, which framed the transparent pin in a red square. */
.location-pulse-highlight {
  animation: pin-pop 1.1s ease-out;
  z-index: 1200;
}

@keyframes pin-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35); }
  55%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* ---------- Standalone glyphs (filter rows, trip list) ---------- */
.cat-glyph {
  display: block;
  flex-shrink: 0;
}

/* ---------- Clusters ----------
   One cluster layer now covers five categories, so the ring shows the mix
   inside it via a conic-gradient built in map-init.js. */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: none !important;
  background-clip: padding-box !important;
}

.sc-cluster {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cluster-ring, #0077be);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s ease;
}

.sc-cluster:hover {
  transform: scale(1.08);
}

.sc-cluster-inner {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
}

.sc-cluster--md .sc-cluster-inner { font-size: 0.95rem; }
.sc-cluster--lg .sc-cluster-inner { font-size: 1.05rem; }

/* ---------- Trip route line ----------
   Drawn by trip-visual-layer.js as a casing plus a dashed brand-coloured line. */
.trip-route-line {
  animation: route-dash 20s linear infinite;
}

@keyframes route-dash {
  to { stroke-dashoffset: -200; }
}

/* ---------- Your location ---------- */
.user-location-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(0, 119, 190, 0.5), 0 2px 6px rgba(15, 23, 42, 0.35);
}

.sc-locate.is-locating a {
  color: var(--brand);
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Distance filter centre point ---------- */
.radius-center-marker {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4);
  cursor: grab;
}

.radius-center-marker:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .sc-pin,
  .sc-cluster {
    transition: none;
  }

  .location-pulse-highlight,
  .trip-route-line {
    animation: none;
  }
}