/* Muted tiles so the shading on pins stands out from the map's own colours. */
.leaflet-tile-pane {
  filter: grayscale(0.8) contrast(0.8) brightness(1.08);
}

.map-cluster span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  color: #1c1917;
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
}

.map-cluster--dark span {
  color: #fff;
}

.map-cluster--starred span {
  box-shadow: 0 0 0 2.5px #d97706, 0 1px 3px rgb(0 0 0 / 0.35);
}

.map-cluster--highlighted span {
  box-shadow: 0 0 0 3px #1c1917, 0 1px 3px rgb(0 0 0 / 0.35);
}

.leaflet-tooltip.map-price {
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  color: #1c1917;
  font: 600 11px/16px ui-sans-serif, system-ui, sans-serif;
}

.leaflet-tooltip.map-price::before {
  display: none;
}

.leaflet-tooltip.map-price--viewed {
  color: #78716c;
  font-weight: 500;
}

.map-legend {
  width: 216px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  color: #44403c;
  font: 11px/1.3 ui-sans-serif, system-ui, sans-serif;
}

.map-legend__title {
  margin-bottom: 4px;
  color: #1c1917;
  font-weight: 600;
}

.map-legend__ramp {
  height: 8px;
  border-radius: 4px;
}

.map-legend__ticks {
  display: grid;
  grid-template-columns: repeat(var(--ticks), 1fr);
  margin-top: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.map-legend__note {
  margin-top: 2px;
  color: #78716c;
  font-size: 10px;
}

.map-legend__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 6px;
}

.map-legend__keys span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.map-legend__keys i {
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
}

.leaflet-popup-tip-container {
  translate: var(--tip-shift, 0);
}

.map-popup--below .leaflet-popup-tip-container {
  top: -19px;
  rotate: 180deg;
}