/* BMG Interactive Map — Frontend styles */

/* Elementor Flexbox Container fix — when no explicit width is set on the widget
   in the Elementor editor, the widget flex item sizes itself to its content.
   The SVG spacer's intrinsic width (300 px, CSS default for replaced elements
   with no explicit width) then "wins" and locks the whole chain at 300 px.
   Setting width:100% here gives the flex item a definite width from the container,
   breaking the circular dependency.  Elementor's own responsive-width inline
   styles (set when the user picks a specific % width in the editor) have higher
   specificity and still override this. */
.elementor-widget-bmg-interactive-map {
	width: 100%;
	min-width: 0;
}

/* Aspect-ratio wrapper — aspect-ratio is set inline by PHP (from WP metadata)
   as a best-effort hint and corrected by JS once the image's natural dimensions
   are known.  CSS aspect-ratio derives height from width automatically in all
   flex/grid layouts, eliminating the need for JS height measurement.
   position:relative makes this the containing block for the absolutely
   positioned map container. */
.bmg-map-aspect-wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
	position: relative;
}

/* In-flow spacer that prevents the wrapper from collapsing to 0×0 inside
   Elementor Flexbox Containers (where a wrapper with only absolutely-positioned
   content is treated as having no content).  CSS aspect-ratio on the wrapper
   handles the correct height; this img just ensures the wrapper has in-flow
   content so the flex container doesn't ignore it.  It is invisible and
   non-interactive; its SVG viewBox is corrected by JS after the image loads. */
.bmg-map-aspect-spacer {
	display: block;
	width: 100%;
	height: auto;
	visibility: hidden;
	pointer-events: none;
}

/* The Leaflet target div fills the wrapper via absolute inset rather than
   height:100%, which may not resolve inside flex/grid containers. */
.bmg-map-container {
	position: absolute;
	inset: 0;
	background: #e8e8e8; /* visible while the image loads */
}

/* -----------------------------------------------------------------
   Custom marker pin (rendered via L.divIcon)
   ----------------------------------------------------------------- */

.bmg-map-marker-icon {
	background: transparent !important;
	border: none !important;
}

.bmg-pin {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .4 );
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bmg-pin:hover {
	transform: scale( 1.3 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .45 );
}

/* Popup opened below a marker — flip tip to point upward */
.bmg-popup-below .leaflet-popup-tip-container {
	top: 0;
	bottom: auto;
}
.bmg-popup-below .leaflet-popup-tip {
	transform: rotate( 225deg );
	margin: 10px auto -10px;
}
.bmg-popup-below .leaflet-popup-content-wrapper {
	margin-top: 14px; /* push content below the tip */
	box-shadow: 0 -12px 40px 12px rgba( 0, 0, 0, .85 );
}
.bmg-popup-below .leaflet-popup-tip-container {
	margin-top: 0; /* override the default -1px gap-closer; gap is above content in below mode */
	margin-bottom: -1px;
}
.bmg-leaflet-popup.bmg-popup-below .leaflet-popup-close-button {
	top: 24px !important; /* 14px content-wrapper margin-top + 10px original offset */
}

/* -----------------------------------------------------------------
   Leaflet popup overrides
   ----------------------------------------------------------------- */

.bmg-leaflet-popup .leaflet-popup-content-wrapper {
	border: 2px solid #000;
	border-radius: 8px;
	box-shadow: 0 12px 40px 12px rgba( 0, 0, 0, .85 );
	padding: 0;
	position: relative;
}

.bmg-leaflet-popup .leaflet-popup-content {
	margin: 0;
	padding: 14px 15px 15px;
	min-width: 160px;
	line-height: 1.45;
}

.bmg-leaflet-popup .leaflet-popup-tip-container {
	margin-top: -1px;
	/* Shifts the tip left/right to keep it pointing at the marker when the
	   popup is horizontally clamped away from the map edge. */
	margin-left: calc( -20px + var( --bmg-tip-dx, 0px ) );
}

.bmg-popup-title {
	margin: 0;
	padding: 0 30px 8px 0;
	min-height: 20px;
	line-height: 20px;
	font-weight: 700;
	border-bottom: 1px solid #000;
}

.bmg-popup-body {
	font-size: 0.875em;
	color: #444;
	margin: 0;
}

.bmg-popup-body p:last-child {
	margin-bottom: 0;
}

/* Leaflet close button — black circle, centred via flexbox so any icon aligns */
.bmg-leaflet-popup .leaflet-popup-close-button {
	position: absolute;
	top: 10px !important;
	right: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.6em !important;
	height: 1.6em !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 1.6em !important;
	border-radius: 50% !important;
	font-weight: 700 !important;
	padding: 0 !important;
	transform: none !important;
	transition: none !important;
}

.bmg-leaflet-popup .leaflet-popup-close-button:hover {
	background: #000 !important;
	color: #fff !important;
	transform: none !important;
}

/* Contain all child z-indexes inside the widget so they never outrank
   the site's fixed/sticky header. */
.bmg-map-layout {
	isolation: isolate;
}

/* -----------------------------------------------------------------
   Location list layout wrapper
   ----------------------------------------------------------------- */

/* Side-by-side (left / right) */
.bmg-map-layout--list-left,
.bmg-map-layout--list-right {
	display: flex;
	align-items: flex-start;
}

.bmg-map-layout--list-left .bmg-map-aspect-wrapper,
.bmg-map-layout--list-right .bmg-map-aspect-wrapper {
	flex: 1 1 auto;
	min-width: 0; /* prevents flex child from overflowing */
}

/* -----------------------------------------------------------------
   Location list panel
   ----------------------------------------------------------------- */

.bmg-location-list {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow-y: auto;
}

/* Side panels: fixed 220 px wide, height matches the map via CSS var */
.bmg-map-layout--list-left .bmg-location-list,
.bmg-map-layout--list-right .bmg-location-list {
	flex: 0 0 220px;
	width: 220px;
	max-height: var( --bmg-map-height, 400px );
	transition: width 0.2s ease, flex-basis 0.2s ease;
}

.bmg-map-layout--list-right .bmg-location-list {
	border-left: none;
}

.bmg-map-layout--list-left .bmg-location-list {
	border-right: none;
}

/* -----------------------------------------------------------------
   Location list items
   ----------------------------------------------------------------- */

.bmg-location-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bmg-location-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	font-size: 0.875em;
	line-height: 1.3;
	transition: background 0.12s ease;
	user-select: none;
}

.bmg-location-list__item:last-child {
	border-bottom: none;
}

.bmg-location-list__item:hover,
.bmg-location-list__item:focus {
	background: #f5f5f5;
	outline: none;
}

.bmg-location-list__item--active {
	background: #f0f4ff;
	font-weight: 600;
}

.bmg-location-list__item--active:hover {
	background: #e8eeff;
}

.bmg-location-list__swatch {
	display: inline-block;
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba( 0, 0, 0, .2 );
}

.bmg-location-list__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bmg-location-list__empty {
	padding: 10px;
	font-size: 0.875em;
	color: #888;
	font-style: italic;
}

/* -----------------------------------------------------------------
   Location list search field
   ----------------------------------------------------------------- */

/* Sticks to the top of the scrollable list panel. */
.bmg-location-search-wrap {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 6px 8px;
	background: inherit;
	border-bottom: 1px solid #ccc;
}

.bmg-location-search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.8125em;
	line-height: 1.4;
	color: inherit;
	background: #fff;
	outline: none;
	/* reset browser search-input extras */
	-webkit-appearance: none;
	appearance: none;
}

.bmg-location-search:focus {
	border-color: #999;
	box-shadow: 0 0 0 2px rgba( 0, 0, 0, .1 );
}

/* -----------------------------------------------------------------
   Floating list — overlaid on the map in one of four corners
   ----------------------------------------------------------------- */

/* The aspect wrapper becomes the positioning context. */
.bmg-map-layout--list-float-tl .bmg-map-aspect-wrapper,
.bmg-map-layout--list-float-tr .bmg-map-aspect-wrapper,
.bmg-map-layout--list-float-bl .bmg-map-aspect-wrapper,
.bmg-map-layout--list-float-br .bmg-map-aspect-wrapper {
	position: relative;
}

.bmg-map-layout--list-float-tl .bmg-location-list,
.bmg-map-layout--list-float-tr .bmg-location-list,
.bmg-map-layout--list-float-bl .bmg-location-list,
.bmg-map-layout--list-float-br .bmg-location-list {
	position: absolute;
	z-index: 500; /* above image overlay, below Leaflet markers/popups */
	width: 200px;
	max-height: 50%;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .3 );
}

.bmg-map-layout--list-float-tl .bmg-location-list { top: 10px;    left:  10px; }
.bmg-map-layout--list-float-tr .bmg-location-list { top: 10px;    right: 10px; }
.bmg-map-layout--list-float-bl .bmg-location-list { bottom: 10px; left:  10px; }
.bmg-map-layout--list-float-br .bmg-location-list { bottom: 10px; right: 10px; }

/* -----------------------------------------------------------------
   Responsive: stack side-by-side layouts on narrow viewports
   ----------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.bmg-map-layout--list-left,
	.bmg-map-layout--list-right {
		flex-direction: column;
	}

	/* On small screens, left list moves below the map */
	.bmg-map-layout--list-left {
		flex-direction: column-reverse;
	}

	.bmg-map-layout--list-left .bmg-location-list,
	.bmg-map-layout--list-right .bmg-location-list {
		flex: none;
		width: 100%;
		max-height: 200px;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-top: none;
	}
}

/* -----------------------------------------------------------------
   Location list header & collapse toggle
   ----------------------------------------------------------------- */

.bmg-location-list__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	border-bottom: 1px solid #ccc;
	background: inherit;
	min-height: 34px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.bmg-location-list__label {
	font-size: 0.8125em;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 6px;
}

.bmg-location-list__toggle {
	flex: 0 0 auto;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 4px;
	color: inherit;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

.bmg-location-list__toggle:hover { opacity: 1; }

/* Toggle icon character — direction depends on panel type and state */
.bmg-map-layout--list-left .bmg-location-list__toggle-icon::before  { content: '‹'; font-size: 1.3em; line-height: 1; }
.bmg-map-layout--list-right .bmg-location-list__toggle-icon::before { content: '›'; font-size: 1.3em; line-height: 1; }

.bmg-map-layout--list-float-tl .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-tr .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-bl .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-br .bmg-location-list__toggle-icon::before { content: '▲'; font-size: 0.75em; line-height: 1; }

/* Collapsed icon — directions are reversed */
.bmg-map-layout--list-left  .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before { content: '›'; }
.bmg-map-layout--list-right .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before { content: '‹'; }

.bmg-map-layout--list-float-tl .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-tr .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-bl .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--list-float-br .bmg-location-list--collapsed .bmg-location-list__toggle-icon::before { content: '▼'; }

/* -----------------------------------------------------------------
   Collapsed state — shared
   ----------------------------------------------------------------- */

.bmg-location-list--collapsed .bmg-location-list__header {
	border-bottom: none;
}

.bmg-location-list--collapsed .bmg-location-search-wrap,
.bmg-location-list--collapsed .bmg-location-list__items {
	display: none;
}

/* -----------------------------------------------------------------
   Collapsed state — side panels (shrink to icon-only strip)
   ----------------------------------------------------------------- */

.bmg-map-layout--list-left .bmg-location-list--collapsed,
.bmg-map-layout--list-right .bmg-location-list--collapsed {
	flex: 0 0 34px;
	width: 34px;
}

.bmg-map-layout--list-left .bmg-location-list--collapsed .bmg-location-list__header,
.bmg-map-layout--list-right .bmg-location-list--collapsed .bmg-location-list__header {
	justify-content: center;
	padding: 8px 0;
	height: 100%;
	overflow: hidden;
}

.bmg-map-layout--list-left .bmg-location-list--collapsed .bmg-location-list__label,
.bmg-map-layout--list-right .bmg-location-list--collapsed .bmg-location-list__label {
	display: none;
}

.bmg-map-layout--list-left .bmg-location-list--collapsed .bmg-location-list__toggle,
.bmg-map-layout--list-right .bmg-location-list--collapsed .bmg-location-list__toggle {
	width: 100%;
	padding: 0;
}

/* -----------------------------------------------------------------
   Collapsed state — floating panels (shrink to header bar only)
   ----------------------------------------------------------------- */

.bmg-map-layout--list-float-tl .bmg-location-list--collapsed,
.bmg-map-layout--list-float-tr .bmg-location-list--collapsed,
.bmg-map-layout--list-float-bl .bmg-location-list--collapsed,
.bmg-map-layout--list-float-br .bmg-location-list--collapsed {
	max-height: none !important; /* override both CSS and any JS-set inline value */
}

/* -----------------------------------------------------------------
   Area list — base (mirrors .bmg-location-list)
   ----------------------------------------------------------------- */

.bmg-area-list {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow-y: auto;
}

/* Square swatch for areas (vs circle for locations) */
.bmg-location-list__swatch--area {
	border-radius: 2px;
}

/* -----------------------------------------------------------------
   Area list — independent side panels
   ----------------------------------------------------------------- */

.bmg-map-layout--area-list-left,
.bmg-map-layout--area-list-right {
	display: flex;
	align-items: flex-start;
}

.bmg-map-layout--area-list-left .bmg-map-aspect-wrapper,
.bmg-map-layout--area-list-right .bmg-map-aspect-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

.bmg-map-layout--area-list-left .bmg-area-list,
.bmg-map-layout--area-list-right .bmg-area-list {
	flex: 0 0 220px;
	width: 220px;
	max-height: var( --bmg-map-height, 400px );
	transition: width 0.2s ease, flex-basis 0.2s ease;
}

.bmg-map-layout--area-list-right .bmg-area-list { border-left: none; }
.bmg-map-layout--area-list-left  .bmg-area-list { border-right: none; }

/* When both a location list AND an area list are side panels (different sides) */
.bmg-map-layout--list-left.bmg-map-layout--area-list-right .bmg-map-aspect-wrapper,
.bmg-map-layout--list-right.bmg-map-layout--area-list-left .bmg-map-aspect-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* -----------------------------------------------------------------
   Area list — independent floating panels
   ----------------------------------------------------------------- */

.bmg-map-layout--area-list-float-tl .bmg-area-list,
.bmg-map-layout--area-list-float-tr .bmg-area-list,
.bmg-map-layout--area-list-float-bl .bmg-area-list,
.bmg-map-layout--area-list-float-br .bmg-area-list {
	position: absolute;
	z-index: 500;
	width: 200px;
	max-height: 50%;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .3 );
}

.bmg-map-layout--area-list-float-tl .bmg-area-list { top: 10px;    left:  10px; }
.bmg-map-layout--area-list-float-tr .bmg-area-list { top: 10px;    right: 10px; }
.bmg-map-layout--area-list-float-bl .bmg-area-list { bottom: 10px; left:  10px; }
.bmg-map-layout--area-list-float-br .bmg-area-list { bottom: 10px; right: 10px; }

/* -----------------------------------------------------------------
   Combined panel — both lists stacked at the same position
   ----------------------------------------------------------------- */

/* Side combined panel: replaces the individual list as the flex child */
.bmg-map-layout--list-left  .bmg-lists-panel,
.bmg-map-layout--list-right .bmg-lists-panel {
	flex: 0 0 220px;
	width: 220px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: 1px solid #ccc;
}

.bmg-map-layout--list-right .bmg-lists-panel { border-left: none; }
.bmg-map-layout--list-left  .bmg-lists-panel { border-right: none; }

/* Each list inside the combined panel: no outer border (panel provides it) */
.bmg-lists-panel .bmg-location-list,
.bmg-lists-panel .bmg-area-list {
	flex: 0 0 auto;
	width: 100%;
	max-height: none;
	border: none;
	border-bottom: 1px solid #ccc;
	overflow-y: auto;
}

.bmg-lists-panel .bmg-location-list:last-child,
.bmg-lists-panel .bmg-area-list:last-child {
	border-bottom: none;
}

/* Float combined panel */
.bmg-lists-panel[class*="--float-"] {
	position: absolute;
	z-index: 500;
	width: 200px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .3 );
	overflow: hidden;
}

.bmg-lists-panel--float-tl { top: 10px;    left:  10px; }
.bmg-lists-panel--float-tr { top: 10px;    right: 10px; }
.bmg-lists-panel--float-bl { bottom: 10px; left:  10px; }
.bmg-lists-panel--float-br { bottom: 10px; right: 10px; }

.bmg-lists-panel[class*="--float-"] .bmg-location-list,
.bmg-lists-panel[class*="--float-"] .bmg-area-list {
	position: static;
	width: 100%;
	max-height: none;
	border: none;
	border-bottom: 1px solid #ccc;
	box-shadow: none;
	border-radius: 0;
}

.bmg-lists-panel[class*="--float-"] .bmg-location-list:last-child,
.bmg-lists-panel[class*="--float-"] .bmg-area-list:last-child {
	border-bottom: none;
}

/* -----------------------------------------------------------------
   Area list — toggle icons
   ----------------------------------------------------------------- */

/* Independent side panels */
.bmg-map-layout--area-list-left  .bmg-area-list .bmg-location-list__toggle-icon::before { content: '‹'; font-size: 1.3em; line-height: 1; }
.bmg-map-layout--area-list-right .bmg-area-list .bmg-location-list__toggle-icon::before { content: '›'; font-size: 1.3em; line-height: 1; }

/* Combined side panels (area list shares position with location list) */
.bmg-map-layout--list-left  .bmg-area-list .bmg-location-list__toggle-icon::before { content: '‹'; font-size: 1.3em; line-height: 1; }
.bmg-map-layout--list-right .bmg-area-list .bmg-location-list__toggle-icon::before { content: '›'; font-size: 1.3em; line-height: 1; }

/* Independent float panels */
.bmg-map-layout--area-list-float-tl .bmg-area-list .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-tr .bmg-area-list .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-bl .bmg-area-list .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-br .bmg-area-list .bmg-location-list__toggle-icon::before { content: '▲'; font-size: 0.75em; line-height: 1; }

/* Combined float panels */
.bmg-lists-panel[class*="--float-"] .bmg-area-list .bmg-location-list__toggle-icon::before { content: '▲'; font-size: 0.75em; line-height: 1; }

/* -----------------------------------------------------------------
   Area list — collapsed state
   ----------------------------------------------------------------- */

.bmg-area-list--collapsed .bmg-location-list__header { border-bottom: none; }

.bmg-area-list--collapsed .bmg-location-search-wrap,
.bmg-area-list--collapsed .bmg-location-list__items { display: none; }

/* Independent side panels: shrink to icon strip */
.bmg-map-layout--area-list-left  .bmg-area-list--collapsed,
.bmg-map-layout--area-list-right .bmg-area-list--collapsed {
	flex: 0 0 34px;
	width: 34px;
}

.bmg-map-layout--area-list-left  .bmg-area-list--collapsed .bmg-location-list__header,
.bmg-map-layout--area-list-right .bmg-area-list--collapsed .bmg-location-list__header {
	justify-content: center;
	padding: 8px 0;
	height: 100%;
	overflow: hidden;
}

.bmg-map-layout--area-list-left  .bmg-area-list--collapsed .bmg-location-list__label,
.bmg-map-layout--area-list-right .bmg-area-list--collapsed .bmg-location-list__label { display: none; }

.bmg-map-layout--area-list-left  .bmg-area-list--collapsed .bmg-location-list__toggle,
.bmg-map-layout--area-list-right .bmg-area-list--collapsed .bmg-location-list__toggle {
	width: 100%;
	padding: 0;
}

/* Collapsed toggle icon reversal */
.bmg-map-layout--area-list-left  .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before { content: '›'; }
.bmg-map-layout--area-list-right .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before { content: '‹'; }

/* Float panels: collapse to header bar only */
.bmg-map-layout--area-list-float-tl .bmg-area-list--collapsed,
.bmg-map-layout--area-list-float-tr .bmg-area-list--collapsed,
.bmg-map-layout--area-list-float-bl .bmg-area-list--collapsed,
.bmg-map-layout--area-list-float-br .bmg-area-list--collapsed { max-height: none !important; }

.bmg-map-layout--area-list-float-tl .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-tr .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-bl .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before,
.bmg-map-layout--area-list-float-br .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before { content: '▼'; }

/* Combined panels: area list just hides items; no strip collapse needed */
.bmg-lists-panel .bmg-area-list--collapsed .bmg-location-list__toggle-icon::before { content: '▼'; font-size: 0.75em; line-height: 1; }

/* -----------------------------------------------------------------
   Responsive: stack area list on narrow viewports
   ----------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.bmg-map-layout--area-list-left,
	.bmg-map-layout--area-list-right {
		flex-direction: column;
	}

	.bmg-map-layout--area-list-left {
		flex-direction: column-reverse;
	}

	.bmg-map-layout--area-list-left  .bmg-area-list,
	.bmg-map-layout--area-list-right .bmg-area-list {
		flex: none;
		width: 100%;
		max-height: 200px;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-top: none;
	}

	.bmg-map-layout--list-left  .bmg-lists-panel,
	.bmg-map-layout--list-right .bmg-lists-panel {
		flex: none;
		width: 100%;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-top: none;
	}
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.bmg-map-toolbar {
	position: absolute;
	z-index: 600;
	display: flex;
	gap: 4px;
	pointer-events: none;
}

/* Zone placement — set by PHP based on which corners floating lists occupy */
.bmg-map-toolbar--top {
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
}
.bmg-map-toolbar--bottom {
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}
.bmg-map-toolbar--top-left    { top: 8px;    left:  8px; }
.bmg-map-toolbar--top-right   { top: 8px;    right: 8px; }
.bmg-map-toolbar--bottom-left  { bottom: 8px; left:  8px; }
.bmg-map-toolbar--bottom-right { bottom: 8px; right: 8px; }

.bmg-toolbar-btn {
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
	transition: background 0.12s;
}

.bmg-toolbar-btn:hover {
	background: rgba(255,255,255,1);
}

.bmg-toolbar-btn[aria-pressed="true"] {
	background: rgba(0,0,0,0.15);
	border-color: rgba(0,0,0,0.45);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15);
}

.bmg-toolbar-icon {
	display: block;
	width: 14px;
	height: 14px;
	background-color: #333;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Location list icon: bulleted list with dot markers */
.bmg-toolbar-icon--loc {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='4' r='2'/%3E%3Ccircle cx='3' cy='8' r='2'/%3E%3Ccircle cx='3' cy='12' r='2'/%3E%3Crect x='7' y='3' width='8' height='2' rx='1'/%3E%3Crect x='7' y='7' width='8' height='2' rx='1'/%3E%3Crect x='7' y='11' width='8' height='2' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='4' r='2'/%3E%3Ccircle cx='3' cy='8' r='2'/%3E%3Ccircle cx='3' cy='12' r='2'/%3E%3Crect x='7' y='3' width='8' height='2' rx='1'/%3E%3Crect x='7' y='7' width='8' height='2' rx='1'/%3E%3Crect x='7' y='11' width='8' height='2' rx='1'/%3E%3C/svg%3E");
}

/* Area list icon: polygon shape (filled so mask works) */
.bmg-toolbar-icon--area {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 6 12 14 4 14 1 6Z' fill-rule='evenodd'/%3E%3Cpath d='M8 3 13.5 6.8 11.3 13 4.7 13 2.5 6.8Z' fill='white'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 6 12 14 4 14 1 6Z' fill-rule='evenodd'/%3E%3Cpath d='M8 3 13.5 6.8 11.3 13 4.7 13 2.5 6.8Z' fill='white'/%3E%3C/svg%3E");
}

/* Fullscreen: expand arrows */
.bmg-toolbar-icon--fs {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h5v2H3v3H1zm9 0h5v5h-2V3h-3zm5 9h-2v3h-3v2h5zM1 10h2v3h3v2H1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h5v2H3v3H1zm9 0h5v5h-2V3h-3zm5 9h-2v3h-3v2h5zM1 10h2v3h3v2H1z'/%3E%3C/svg%3E");
}

/* Fullscreen: collapse arrows (when layout is fullscreen or full-window) */
.bmg-map-layout--fullscreen .bmg-toolbar-icon--fs,
.bmg-map-layout--full-window .bmg-toolbar-icon--fs {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1v5H1V4h3V1zm4 0h2v3h3v2h-5zm5 9v2h-3v3h-2v-5zm-14 0h5v5H4v-3H1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1v5H1V4h3V1zm4 0h2v3h3v2h-5zm5 9v2h-3v3h-2v-5zm-14 0h5v5H4v-3H1z'/%3E%3C/svg%3E");
}

/* Full-window icon: window frame (outer rect + hollow inner) */
.bmg-toolbar-icon--fw {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm2 2v6h10V5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm2 2v6h10V5z'/%3E%3C/svg%3E");
}

/* Full-window icon: filled rect when active */
.bmg-map-layout--full-window .bmg-toolbar-icon--fw {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='1'/%3E%3C/svg%3E");
}

/* Area highlight icon: solid filled polygon */
.bmg-toolbar-icon--highlight {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 6 12 14 4 14 1 6Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 6 12 14 4 14 1 6Z'/%3E%3C/svg%3E");
}

/* ── Full-window mode (CSS position:fixed, no browser API) ─────────────── */

.bmg-map-layout--full-window {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 9998 !important;
	background: #000;
}

.bmg-map-layout--full-window .bmg-map-aspect-wrapper {
	flex: 1 1 auto !important;
	height: 100% !important;
	aspect-ratio: unset !important;
}

.bmg-map-layout--full-window .bmg-map-aspect-spacer {
	display: none !important;
}


/* ── Fullscreen layout ────────────────────────────────────────────────────── */

.bmg-map-layout--fullscreen,
.bmg-map-layout:fullscreen,
.bmg-map-layout:-webkit-full-screen {
	display: flex !important;
	width: 100vw !important;
	height: 100vh !important;
	background: #000;
}

.bmg-map-layout--fullscreen .bmg-map-aspect-wrapper,
.bmg-map-layout:fullscreen .bmg-map-aspect-wrapper,
.bmg-map-layout:-webkit-full-screen .bmg-map-aspect-wrapper {
	flex: 1 1 auto !important;
	height: 100% !important;
	aspect-ratio: unset !important;
}

.bmg-map-layout--fullscreen .bmg-map-aspect-spacer,
.bmg-map-layout:fullscreen .bmg-map-aspect-spacer,
.bmg-map-layout:-webkit-full-screen .bmg-map-aspect-spacer {
	display: none !important;
}

/* Toolbar list-hidden state — hides entire list including header */
.bmg-location-list--hidden,
.bmg-area-list--hidden {
	display: none !important;
}