/**
 * Niestandardowe style dla klastrów markerów
 */

/* Podstawowy styl klastra */
.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
  font-family: "Lato", sans-serif;
}

.marker-cluster div {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  margin-left: 0;
  margin-top: 0;
  text-align: center;
  color: #3f2205;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-cluster span {
  line-height: 1;
}

/* Kolory klastrów według rozmiaru */
.marker-cluster-small {
  background-color: rgba(253, 229, 207, 0.7);
}

.marker-cluster-small div {
  background-color: rgba(253, 229, 207, 0.9);
  box-shadow: 0 0 8px rgba(63, 34, 5, 0.1);
}

.marker-cluster-medium {
  background-color: rgba(233, 198, 151, 0.7);
}

.marker-cluster-medium div {
  background-color: rgba(233, 198, 151, 0.9);
  box-shadow: 0 0 10px rgba(63, 34, 5, 0.15);
}

.marker-cluster-large {
  background-color: rgba(191, 140, 71, 0.7);
}

.marker-cluster-large div {
  background-color: rgba(191, 140, 71, 0.9);
  box-shadow: 0 0 12px rgba(63, 34, 5, 0.2);
}

/* Animacja hover na klastrach */
.marker-cluster:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Rozmiary tekstu dla różnych klastrów */
.marker-cluster-small div span {
  font-size: 12px;
}

.marker-cluster-medium div span {
  font-size: 14px;
}

.marker-cluster-large div span {
  font-size: 16px;
}