/* ============================================
   Custom Location Map - Color / Style Settings
   Change the --clm-red value below to match
   your brand red exactly if needed.
   ============================================ */
:root {
	--clm-red: #E31E24;
	--clm-red-dark: #B3181D;
}

.clm-map {
	width: 100%;
	border-radius: 6px;
}

/* Popup box */
.clm-popup {
	max-width: 200px;
	font-family: inherit;
}

.clm-popup img {
	width: 100%;
	max-width: 140px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 6px;
}

.clm-popup h3 {
	margin: 0 0 4px;
	font-size: 14px;
	color: #111;
}

.clm-popup p {
	margin: 4px 0 8px;
	font-size: 12px;
	color: #555;
}

.clm-popup-link {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--clm-red);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.clm-popup-link:hover {
	color: var(--clm-red-dark);
	text-decoration: underline;
}

/* Leaflet popup wrapper - red accent border/tip */
.leaflet-popup-content-wrapper {
	border-radius: 6px;
	box-shadow: 0 3px 14px rgba(0,0,0,0.2);
	border-top: 3px solid var(--clm-red);
}

.leaflet-popup-tip {
	background: var(--clm-red);
}

/* Marker pin recolor (Leaflet default marker is blue; this tints it red via CSS filter) */
.clm-map .leaflet-marker-icon {
	filter: hue-rotate(150deg) saturate(4) brightness(0.95);
}