/* Base Leaflet marker icon */
.leaflet-marker-icon.campSiteIcon {
  filter: hue-rotate(0deg);
}

/* Paid camping: blue → red */
.leaflet-marker-icon.paidCampSiteIcon {
  filter: hue-rotate(160deg);
}

/* Wild camping: blue → green */
.leaflet-marker-icon.wildCampSiteIcon {
  filter: hue-rotate(270deg);
}

/* HOVER changes to the markers */
/* Base Leaflet marker icon */
.leaflet-marker-icon.campSiteIcon:hover {
  filter: hue-rotate(0deg);
}

/* Paid camping: blue → red */
.leaflet-marker-icon.paidCampSiteIcon:hover {
  filter: hue-rotate(160deg) saturate(1.6) brightness(1.05);
}

/* Wild camping: blue → green */
.leaflet-marker-icon.wildCampSiteIcon:hover {
  filter: hue-rotate(270deg) saturate(1.6) brightness(1.05);
}

/* Preview / Temp*/
.leaflet-marker-icon.previewCampSiteIcon {
  filter: hue-rotate(140deg) saturate(0.6);
}

/* Popup title styling */
.popup-title {
  all: unset;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #0066cc;
}

.popup-title:hover {
  text-decoration: underline;
}

.leaflet-interactive {
  transition: r 0.3s ease-out, opacity 0.3s ease-out;
}

/* less "nice" but eliminates the fade out/in when panning, since we delete and recreate the markers there*/
.leaflet-popup {
  transition: none !important;
}


/*highlighted / clicked marker has a small pulse */
@keyframes circlePulse {
  0% {
    stroke-opacity: 0.9;
    fill-opacity: 0.25;
  }

  50% {
    stroke-opacity: 0.4;
    fill-opacity: 0.1;
  }

  100% {
    stroke-opacity: 0.9;
    fill-opacity: 0.25;
  }
}

.leaflet-interactive.highlight-ring {
  animation: circlePulse 0.8s ease-out;
}


/* Re-enable double-tap & gesture zoom on iOS Safari */
#map.leaflet-container {
  touch-action: manipulation !important;
}

.leaflet-zoom-animated {
  will-change: transform;
}