@import "tailwindcss";

/* Leaflet CSS overrides */
.leaflet-container {
  font-family: inherit;
}

/* Ensure map markers are clickable */
.leaflet-marker-icon {
  cursor: pointer;
}

/* Custom marker cluster styles */
.marker-cluster {
  background-clip: padding-box;
  border-radius: 50%;
}

.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-cluster-small {
  background-color: rgba(59, 130, 246, 0.6);
}

.marker-cluster-small div {
  background-color: rgba(59, 130, 246, 0.8);
  color: white;
  font-size: 12px;
}

.marker-cluster-medium {
  background-color: rgba(249, 115, 22, 0.6);
}

.marker-cluster-medium div {
  background-color: rgba(249, 115, 22, 0.8);
  color: white;
  font-size: 13px;
}

.marker-cluster-large {
  background-color: rgba(239, 68, 68, 0.6);
}

.marker-cluster-large div {
  background-color: rgba(239, 68, 68, 0.8);
  color: white;
  font-size: 14px;
}

/* User location marker animation */
.user-location-marker {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}