.rcm-wrap {
	--rcm-color: #2563eb;
	margin: 1.25em 0;
}

.rcm-map {
	position: relative;
	width: 100%;
	max-width: var( --rcm-map-maxw, 100% );
	margin-left: auto;
	margin-right: auto;
	min-height: 150px;
	border-radius: 8px;
	overflow: hidden;
	z-index: 0;
}
.rcm-logo {
	position: absolute;
	z-index: 600;
	pointer-events: none;
	height: auto;
	max-width: 45%;
}
/* Filter the base map tiles only — leaves the radius circle, markers, and logo untouched. */
.rcm-map .leaflet-tile-pane { filter: var( --rcm-map-filter, none ); }

/* Our own city-name labels drawn over the map. */
.leaflet-tooltip.rcm-map-label {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	font-weight: 700;
	font-size: var( --rcm-label-size, 14px );
	color: var( --rcm-label-color, #1f2937 );
	white-space: nowrap;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.leaflet-tooltip.rcm-map-label::before { display: none; }

/* Defend against theme rules like `img { max-width: 100%; height: auto }`
   (Divi and many themes do this), which otherwise shrink/mis-size Leaflet's
   256px tiles and leave the map blank. */
.leaflet-container img.leaflet-tile,
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow,
.leaflet-container img {
	max-width: none !important;
	max-height: none !important;
}
.leaflet-container .leaflet-tile {
	width: 256px !important;
	height: 256px !important;
}

/* Center pin (divIcon, no image dependency). */
.rcm-pin-wrap {
	background: transparent;
	border: 0;
}
.rcm-pin {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
}

.rcm-list {
	margin-top: 1em;
}
.rcm-list-head {
	font-weight: 600;
	margin: 0 0 0.6em;
}
.rcm-subhead-line {
	margin: 0 0 1em;
	color: var( --rcm-muted, #667085 );
	font-size: 0.95em;
	line-height: 1.4;
}

.rcm-cities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35em 1.25em;
	grid-template-columns: repeat( var( --rcm-cols, 3 ), minmax( 0, 1fr ) );
	font-size: var( --rcm-text-size, inherit );
}
.rcm-cols-1 { --rcm-cols: 1; }
.rcm-cols-2 { --rcm-cols: 2; }
.rcm-cols-3 { --rcm-cols: 3; }
.rcm-cols-4 { --rcm-cols: 4; }
.rcm-cols-5 { --rcm-cols: 5; }
.rcm-cols-6 { --rcm-cols: 6; }

.rcm-city {
	display: flex;
	align-items: center;
	gap: 0.4em 0.8em;
	padding: 0.15em 0;
	border-bottom: var( --rcm-row-bw, 1px ) solid var( --rcm-row-bc, rgba( 0, 0, 0, 0.06 ) );
	justify-content: space-between; /* default/left: name left, meta to the right */
}
.rcm-city-main {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-width: 0;
}
.rcm-city-icon {
	flex: 0 0 auto;
	width: var( --rcm-icon-size, 1.1em );
	height: var( --rcm-icon-size, 1.1em );
	color: var( --rcm-icon-color, var( --rcm-color, #2563eb ) );
}
.rcm-city-name {
	font-weight: 500;
	color: var( --rcm-text, inherit );
}
.rcm-city-meta {
	display: inline-flex;
	gap: 0.5em;
	white-space: nowrap;
}
.rcm-city-dist,
.rcm-city-pop {
	font-size: 0.85em;
	color: var( --rcm-muted, #667085 );
	white-space: nowrap;
}

/* Alignment — applies to heading, the empty message, and each city row. */
.rcm-align-center .rcm-list-head,
.rcm-align-center .rcm-empty { text-align: center; }
.rcm-align-right .rcm-list-head,
.rcm-align-right .rcm-empty { text-align: right; }

.rcm-align-center .rcm-city { justify-content: center; }
.rcm-align-right .rcm-city { justify-content: flex-end; }

/* Pill / card list items (when a background, border, or radius is set) */
.rcm-cities.is-cards { gap: 0.6em 0.8em; }
.rcm-cities.is-cards .rcm-city {
	border-bottom: 0;
	background: var( --rcm-item-bg, transparent );
	border: var( --rcm-item-bw, 0 ) solid var( --rcm-item-bc, transparent );
	border-radius: var( --rcm-item-radius, 0 );
	padding: var( --rcm-item-pad, 0.55em 0.9em );
}

/* Grouped-by-state list. */
.rcm-state-group { margin: 0 0 1em; }
.rcm-state-group:last-child { margin-bottom: 0; }
.rcm-state-head {
	font-weight: 700;
	font-size: var( --rcm-state-size, 0.8em );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --rcm-state-color, var( --rcm-color, #2563eb ) );
	margin: 0 0 0.35em;
	padding-bottom: 0.2em;
	border-bottom: var( --rcm-state-bw, 2px ) solid var( --rcm-state-bc, currentColor );
}
.rcm-align-center .rcm-state-head { text-align: center; }
.rcm-align-right .rcm-state-head { text-align: right; }

.rcm-empty {
	color: #667085;
}

.rcm-error {
	padding: 0.75em 1em;
	border-left: 4px solid #d92d20;
	background: #fef3f2;
	color: #912018;
	border-radius: 4px;
}

/* Tablets: step the column count down. */
@media ( max-width: 900px ) {
	.rcm-cities {
		grid-template-columns: repeat( var( --rcm-cols-md, 2 ), minmax( 0, 1fr ) );
	}
}

/* Phones: single column by default, smaller text so names stay on one line. */
@media ( max-width: 600px ) {
	.rcm-cities {
		grid-template-columns: repeat( var( --rcm-cols-sm, 1 ), minmax( 0, 1fr ) );
		gap: 0.35em 0.5em;
		font-size: var( --rcm-text-size-sm, var( --rcm-text-size, inherit ) );
	}
	.rcm-cities.is-cards { gap: 0.45em 0.5em; }
	.rcm-scroll-mobile {
		max-height: var( --rcm-scroll-h, 320px );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-right: 6px;
		scrollbar-width: thin;
		overscroll-behavior: contain;
	}
	.rcm-scroll-mobile::-webkit-scrollbar {
		width: 6px;
	}
	.rcm-scroll-mobile::-webkit-scrollbar-thumb {
		background: rgba( 0, 0, 0, 0.25 );
		border-radius: 3px;
	}
}

/* Grouped-by-location city list */
.rcm-locgroup { margin-bottom: 1.25em; }
.rcm-locgroup:last-child { margin-bottom: 0; }
.rcm-locgroup-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75em;
	flex-wrap: wrap;
	margin: 0 0 0.5em;
	padding-bottom: 0.3em;
	border-bottom: var( --rcm-state-bw, 2px ) solid var( --rcm-state-bc, currentColor );
}
.rcm-locgroup-name {
	font-weight: 700;
	font-size: var( --rcm-state-size, 1em );
	color: var( --rcm-state-color, var( --rcm-color ) );
}
.rcm-locgroup-phone {
	font-size: 0.95em;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.rcm-locgroup-phone:hover { text-decoration: underline; }

/* Location centre name labels */
.leaflet-tooltip.rcm-center-label {
	background: rgba( 255, 255, 255, 0.92 );
	border: 0;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.25 );
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	color: #1f2937;
	white-space: nowrap;
}
.leaflet-tooltip.rcm-center-label::before { display: none; }

/* Location coverage dots in the city list */
.rcm-city-dots { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rcm-dot {
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.6 );
}

/* Colour key above the city list */
.rcm-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0.25em 0 1.5em;
}
.rcm-align-center .rcm-legend { justify-content: center; }
.rcm-align-right .rcm-legend { justify-content: flex-end; }
.rcm-legend-item { display: inline-flex; align-items: center; margin: 5px 16px; font-size: 0.92em; }
.rcm-legend .rcm-dot { width: 0.8em; height: 0.8em; }

/* "Down columns" list flow — fills column 1 top-to-bottom, then column 2, etc. */
.rcm-flow-cols .rcm-cities {
	display: block;
	column-count: var( --rcm-cols, 3 );
	column-gap: 1.25em;
}
.rcm-flow-cols .rcm-cities .rcm-city {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
.rcm-flow-cols .rcm-cities.is-cards .rcm-city { margin-bottom: 0.6em; }
@media ( max-width: 900px ) {
	.rcm-flow-cols .rcm-cities { column-count: var( --rcm-cols-md, 2 ); }
}
@media ( max-width: 600px ) {
	.rcm-flow-cols .rcm-cities { column-count: var( --rcm-cols-sm, 1 ); }
}

/* Editable note under the colour key */
.rcm-legend-note { color: #8a94a3; font-size: 0.86em; font-style: italic; letter-spacing: 0.01em; }
.rcm-align-center .rcm-legend-note { text-align: center; }
.rcm-align-right .rcm-legend-note { text-align: right; }

/* Click-to-call button in the colour key */
.rcm-legend-call:hover { text-decoration: underline !important; }

/* Optional card around the map */
.rcm-mapcard { width: 100%; }
.rcm-mapcard .rcm-map { max-width: 100% !important; margin: 0 !important; }
.rcm-mapcard .rcm-list { margin-top: 14px; }
.rcm-mapcard > :first-child { margin-top: 0 !important; }