.destination-map-canvas {
  height: min(65dvh, 650px);
  min-height: 320px;
  isolation: isolate;
  z-index: 0;
}

.destination-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--ds-surface-primary));
  border: 2px solid rgb(var(--ds-brand));
  border-radius: 50%;
  font-size: 20px;
}

.destination-map-marker-muted {
  opacity: 0.55;
  border-style: dashed;
}

[data-controller="destination-map"] [hidden] {
  display: none !important;
}

.destination-map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgb(var(--ds-surface-primary));
  border: 2px solid rgb(var(--ds-brand));
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

/* The "Also show" layers wear their own site's colour (travel red, golf
   green, snow blue) whichever site's map draws them, so a pin's site reads
   before its icon does. Kept last:
   they override the border colour of .destination-map-marker and
   .destination-map-cluster above at the same specificity. */
.destination-map-marker-travel { border-color: rgb(220 38 38); }
.destination-map-marker-golf { border-color: rgb(22 163 74); }
.destination-map-marker-ski { border-color: rgb(37 99 235); }