.sgb-map-wrap {
	margin: 1em 0;
}

.sgb-map-canvas {
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: #FFF6DE; /* placeholder colour while Leaflet initializes */
}

.sgb-map-amenity-pin {
	background: #2F7A4D;
	border: 2px solid #0B5D66; /* same teal as the branch pin, so the dots stand out on the map */
	border-radius: 50%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.leaflet-control-layers-overlays label {
	font-size: 13px;
}

/* Numbered car park markers (from SGB Car Parks). Navy, to stay distinct from the
   teal branch pin and the green amenity dots; red when few lots remain, matching
   the cards. The number sits in an absolutely-positioned inner span with a fixed
   line-height, and the key properties are !important, so theme rules for div/span
   (padding, line-height, display) can't push it off-centre. */
.leaflet-marker-icon.sgb-map-cp-pin {
	box-sizing: border-box !important;
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	background: #14233B;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	color: #fff;
}

.leaflet-marker-icon.sgb-map-cp-pin-low {
	background: #C93A3A;
}

.sgb-map-cp-pin .sgb-map-cp-num {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font: 700 13px/22px Poppins, system-ui, sans-serif !important;
	color: #fff !important;
}

/* Bus stop / MRT dots (from SGB Nearby Transport). The marker box is a 28px
   transparent tap target; the visible dot is a centred 14px circle inside it.
   Amber for bus, purple for MRT: distinct from the teal branch pin, navy/red
   car parks and green amenity dots (all dots share the pin's teal border). !important so theme span/div rules can't
   move or resize it. */
.leaflet-marker-icon.sgb-map-tr-pin {
	box-sizing: border-box !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.sgb-map-tr-pin .sgb-map-tr-dot {
	position: absolute !important;
	top: 7px !important;
	left: 7px !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #0B5D66 !important; /* same teal as the branch pin */
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.sgb-map-tr-bus .sgb-map-tr-dot {
	background: #F29F05 !important;
}

.sgb-map-tr-mrt .sgb-map-tr-dot {
	background: #7B3FA0 !important;
}