.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-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;
	}
}