/* === BLACK & WHITE CLUSTER STYLES === */

/* Small clusters (< 10 markers) */
.marker-cluster-small {
	background-color: rgba(255, 255, 255, 0.8); /* nearly opaque white outer ring */
  }
  .marker-cluster-small div {
	background-color: rgba(255, 255, 255, 0.8); /* nearly opaque white inner circle */
  }
  
  /* Medium clusters (10–99 markers) */
  .marker-cluster-medium {
	background-color: rgba(255, 255, 255, 0.8);
  }
  .marker-cluster-medium div {
	background-color: rgba(255, 255, 255, 0.8);
  }
  
  /* Large clusters (100+ markers) */
  .marker-cluster-large {
	background-color: rgba(255, 255, 255, 0.8);
  }
  .marker-cluster-large div {
	background-color: rgba(255, 255, 255, 0.8);
  }
  
  /* ==== Fallback for older IE (solid white) ==== */
  .leaflet-oldie .marker-cluster-small,
  .leaflet-oldie .marker-cluster-small div,
  .leaflet-oldie .marker-cluster-medium,
  .leaflet-oldie .marker-cluster-medium div,
  .leaflet-oldie .marker-cluster-large,
  .leaflet-oldie .marker-cluster-large div {
	background-color: rgb(255, 255, 255);
  }
  
  /* === Common cluster‐icon styling === */
  .marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;  /* outer circle is 40×40px total */
  }
  
  /* Inner “div” (the smaller circle) and the number */
  .marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;    /* centers 30px inside 40px */
	margin-top: 5px;
	text-align: center;
	border-radius: 15px; /* inner circle is 30×30px */
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #000000;      /* black text */
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* subtle shadow so # can pop */
  }
  
  /* Vertically center the number within the 30px circle */
  .marker-cluster span {
	line-height: 30px;
  }