/**
 * Custom Branch Map - Single Location Map Styles
 *
 * Visually mirrors the existing multi-branch map's canvas
 * (see frontend.css: .cbm-map-canvas) - same border-radius, background,
 * font stack, and mobile height breakpoint - but every selector here is
 * unique to this feature (cbm-single-map-*) so
 * nothing in this file can affect, override, or conflict with the
 * existing .cbm-map-wrap / .cbm-location-* selectors in frontend.css.
 *
 * No selectors from frontend.css are redefined or modified here.
 */

.cbm-single-map-wrap {
	width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cbm-single-map-wrap *,
.cbm-single-map-wrap *::before,
.cbm-single-map-wrap *::after {
	box-sizing: border-box;
}

.cbm-single-map-canvas {
	width: 100%;
	height: 450px;
	border-radius: 8px;
	overflow: hidden;
	background: #eaeaea;
}

.cbm-single-map-notice {
	margin: 0;
	padding: 16px;
	border: 1px dashed #dddddd;
	border-radius: 8px;
	color: #666666;
	font-family: inherit;
}

/*
 * Popup (.cbm-popup*), Leaflet popup overrides (.leaflet-popup-content)
 * and the active marker (.leaflet-marker-icon.cbm-marker-active) are NOT
 * defined here: the single map loads frontend.css and shares the exact
 * same rules as the multi-location map.
 */

/* Mobile: same breakpoint/height as the existing multi-branch map. */
@media ( max-width: 782px ) {
	.cbm-single-map-canvas {
		height: 320px;
	}
}