/* ============================================
   VENDOR: LEAFLET CORE (merged from leaflet.css)
   Required base styles for the Leaflet map engine. Loaded inline so the module
   ships a single CSS file instead of four separate vendor requests.
   ============================================ */

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
}
.leaflet-container {
	overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
}
.leaflet-tile-loaded {
	visibility: inherit;
}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
}
.leaflet-top {
	top: 0;
}
.leaflet-right {
	right: 0;
}
.leaflet-bottom {
	bottom: 0;
}
.leaflet-left {
	left: 0;
}
.leaflet-control {
	float: left;
	clear: both;
}
.leaflet-right .leaflet-control {
	float: right;
}
.leaflet-top .leaflet-control {
	margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
	margin-left: 10px;
}
.leaflet-right .leaflet-control {
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	margin-right: 10px;
}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
}
.leaflet-container a {
	color: #0078A8;
}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
}


/* general typography */

.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
}
.leaflet-control-layers label {
	display: block;
	font-size: 0.8125rem;
}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
}
.leaflet-control-attribution a {
	text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	background-clip: padding-box;
}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 0.8125rem;
	min-height: 1px;
}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
}
.leaflet-popup-scrolled {
	overflow: auto;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1; /* standard property for compatibility */
	-ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ============================================
   VENDOR: LEAFLET.MARKERCLUSTER (merged from MarkerCluster.css)
   ============================================ */

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* ============================================
   VENDOR: LEAFLET.MARKERCLUSTER DEFAULT COLORS (merged from MarkerCluster.Default.css)
   Note: The module renders its own cluster via .openstreet-maps-cluster below; these
   default .marker-cluster-* rules are kept for completeness but are overridden.
   ============================================ */

.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);
	}

	/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.leaflet-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.leaflet-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.leaflet-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.leaflet-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.leaflet-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}

/* ============================================
   OpenStreet Maps Module - Frontend Styles (Leaflet)
   ============================================ */

.openstreet-maps-container {
    position: relative;
    margin: 0 auto;
    max-width: var(--map-width, 100%);
}

.openstreet-maps-canvas {
    position: relative;
    width: 100%;
    height: var(--map-height, 400px);
    border-radius: 10px;
    overflow: hidden;
    background-color: #e9ecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 5C14.48 5 10 9.48 10 15c0 9 10 20 10 20s10-11 10-20c0-5.52-4.48-10-10-10z' fill='%23adb5bd'/%3E%3Ccircle cx='20' cy='15' r='4' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}

/* Fullscreen: when the canvas enters the browser fullscreen, expand to fill the viewport.
   Without this the container keeps its original small size inside the fullscreen viewport. */
.openstreet-maps-canvas:fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
.openstreet-maps-canvas:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* ============================================
   LEAFLET POPUP (info window) STYLES
   ============================================ */

.openstreet-maps-canvas .leaflet-popup-content-wrapper {
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Keep Leaflet's inline width (driven by bindPopup minWidth/maxWidth in JS) so the
   popup renders at a fixed width that matches the Google Maps info-window. The default
   13px/24px margin is removed; padding lives on the inner .openstreet-maps-popup box. */
.openstreet-maps-canvas .leaflet-popup-content {
    margin: 0;
}

/* Hide Leaflet's default popup close button — a custom, module-consistent close
   button is rendered inside the content (see .openstreet-maps-info-close-btn) so
   both map modules show the exact same control in the exact same place. */
.openstreet-maps-canvas .leaflet-popup-close-button {
    display: none !important;
}

/* Popup content matches the Google Maps info-window exactly (min/max width + padding),
   so the rendered box is the same size on both modules. Leaflet's minWidth/maxWidth
   (set in JS) already fixes the outer popup width; these keep the inner content aligned.
   position: relative anchors the custom close button (.openstreet-maps-info-close-btn). */
.openstreet-maps-popup {
    position: relative;
    font-family: inherit;
    min-width: 180px;
    max-width: 300px;
    padding: 12px 14px;
    font-size: 0.875rem;
}

/* Popup content row: image + description side by side */
.openstreet-maps-info-content-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

/* RTL: image left, text right */
[dir="rtl"] .openstreet-maps-info-content-row {
    flex-direction: row-reverse;
}

.openstreet-maps-info-image {
    width: 100px;
    border-radius: 6px;
    flex-shrink: 0;
}

.openstreet-maps-info-text {
    min-width: 0;
    flex: 1;
}

.openstreet-maps-info-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #1a1a2e;
    line-height: 1.3;
}

.openstreet-maps-info-desc {
    color: #4a4a5a;
    margin-bottom: 6px;
    line-height: 1.4;
}

.openstreet-maps-info-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    outline: none;
}

.openstreet-maps-info-link:hover {
    text-decoration: underline;
    color: #155046;
}

.openstreet-maps-info-link:hover sup {
    opacity: 1;
}

.openstreet-maps-canvas .leaflet-popup-tip {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================
   INFO WINDOW CLOSE BUTTON (shared across both map modules)
   ============================================ */

/* A single close button rendered inside each popup's content. Sized and positioned
   identically on OpenStreet Maps and Google Maps so the two modules look and behave
   the same. Anchored to the inline-end (right in LTR) top corner of the popup. */
.openstreet-maps-info-close-btn {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 11px;
    height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 2px;
    background-color: transparent;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    z-index: 5;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.openstreet-maps-info-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a2e;
}

.openstreet-maps-info-close-btn i {
    font-size: 0.5rem;
}

html[data-bs-theme="dark"] .openstreet-maps-info-close-btn {
    color: #a0a0b8;
}

html[data-bs-theme="dark"] .openstreet-maps-info-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e2e2f0;
}

/* ============================================
   LEAFLET CONTROLS (zoom / attribution)
   ============================================ */

.openstreet-maps-canvas .leaflet-control-zoom a,
.openstreet-maps-canvas .leaflet-control-attribution {
    font-size: 0.6rem;
    border-radius: 4px;
}

.openstreet-maps-canvas .leaflet-bar {
    border: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

/* Soft drop shadow on right-aligned controls (attribution, etc.) so they read
   as floating UI rather than flush against the canvas edge. Mirrors the same
   shadow treatment applied to the zoom bar above. */
.openstreet-maps-canvas .leaflet-right .leaflet-control {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

/* Override Leaflet's default touch styling for the controls/bar so the module's
   own border/radius/shadow treatment stays consistent on touch devices. Removes
   the extra 2px border Leaflet adds to .leaflet-touch .leaflet-bar/.leaflet-control-layers. */
.openstreet-maps-canvas.leaflet-touch .leaflet-control-layers,
.openstreet-maps-canvas.leaflet-touch .leaflet-bar {
    border: none;
}

/* The zoom buttons read as two distinct controls; the module sets their radius
   above, so drop Leaflet's separate :first-child/:last-child touch radii. */
.openstreet-maps-canvas.leaflet-touch .leaflet-bar a,
.openstreet-maps-canvas.leaflet-touch .leaflet-bar a:first-child,
.openstreet-maps-canvas.leaflet-touch .leaflet-bar a:last-child {
    border-radius: 4px;
}

/* Spread the zoom +/- buttons apart so they read as two distinct controls. */
.openstreet-maps-canvas .leaflet-control-zoom-in {
    margin-bottom: 5px;
}

/* Fullscreen control: mirror the zoom buttons' visual format so both control
   groups read as one cohesive set. The button is rendered as a standalone
   <a> (not wrapped in a leaflet-bar), so it needs the same size, icon scale,
   border treatment and hover behaviour as the zoom buttons. */
.openstreet-maps-canvas .leaflet-control-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    color: #1a6f5d;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
}

.openstreet-maps-canvas .leaflet-control-fullscreen:hover {
    background-color: #f4f4f4;
    color: #000;
}

/* Custom div-icon marker pin (canvas-drawn image) */
.openstreet-maps-marker-icon {
    background: transparent;
    border: none;
}

/* Cluster styles (Leaflet.markercluster).

   Leaflet renders a divIcon as two nested elements: an outer positioning div
   (sized to iconSize [40,40] via width/height) and the inner HTML we return.
   The visible circle is the inner element, so it MUST fill the outer div exactly
   (width/height 100% + box-sizing border-box). Without this, the 3px border pushes
   the inner box past 40px on one axis and the circle renders as an oval. Google Maps'
   MarkerClustererPlus sizes the cluster div itself, so its cluster never had this gap. */
.openstreet-maps-cluster {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(29, 107, 94, 0.85);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.openstreet-maps-cluster:hover {
    transform: scale(1.1);
    background-color: rgba(21, 80, 70, 0.95);
}

/* ============================================
   DIRECTIONS ROUTE ENDPOINT PINS (A / B)
   ============================================ */

/* Origin (A) and destination (B) markers drawn at the ends of a driving route.
   These are L.divIcon pins, not L.icon images, so no external marker-icon.png is
   requested (Leaflet's default marker image is not shipped locally). The two pins
   mirror the A/B markers the Google Maps DirectionsRenderer renders automatically:
   A = green (origin), B = red (destination).

   Structure: Leaflet wraps the divIcon HTML in a positioned <div> it translates with
   transform: translate3d(...). Rotating that wrapper would fight Leaflet's placement,
   so the rotated teardrop body lives on an inner element (.openstreet-maps-route-pin-body). */
.openstreet-maps-route-pin-body {
    position: relative;
    width: 32px;
    height: 32px;
    margin-inline-start: 0;
    background-color: #1d6b5e;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.openstreet-maps-route-pin-origin {
    background-color: #198754;
}

.openstreet-maps-route-pin-destination {
    background-color: #dc3545;
}

/* The label letter (A/B) — counter-rotated so it stays upright inside the rotated pin. */
.openstreet-maps-route-pin-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

/* Dark mode: deepen the drop shadow so the pin stays visible against dark tiles.
   The green/red fills are retained for A/B semantics. */
html[data-bs-theme="dark"] .openstreet-maps-route-pin-body {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================
   DIRECTIONS LINK IN POPUP
   ============================================ */

.openstreet-maps-info-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    margin-top: 4px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem !important;
}

.openstreet-maps-info-directions-link:hover {
    text-decoration: underline;
    color: #155046;
}

/* ============================================
   DIRECTIONS MODAL STYLES
   ============================================ */

.osm-directions-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
}

.osm-directions-total,
.osm-directions-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.osm-directions-route {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #4a4a5a;
    line-height: 1.5;
}

.osm-directions-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.osm-directions-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f5;
}

.osm-directions-step:last-child {
    border-bottom: none;
}

.osm-directions-step-number {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.osm-directions-step-content {
    flex: 1;
    min-width: 0;
}

.osm-directions-step-instruction {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1a1a2e;
}

.osm-directions-step-distance {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

/* ============================================
   DIRECTIONS LOADING MODAL
   ============================================ */

.osm-directions-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
}

.osm-directions-loading-spinner {
    color: var(--primary-color);
}

.osm-directions-loading-text {
    color: #6b7280;
    font-size: 14px;
}

html[data-bs-theme="dark"] .osm-directions-loading-spinner {
    color: #2d8676;
}

html[data-bs-theme="dark"] .osm-directions-loading-text {
    color: #a0a0b8;
}

/* ============================================
   DIRECTIONS ROUTE CLEAR BUTTON
   ============================================ */

.openstreet-maps-clear-route-btn {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    z-index: 1000;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    border: none;
    background-color: #fff;
    color: #dc3545;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.15s;
}

.openstreet-maps-clear-route-btn:hover {
    background-color: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

/* ============================================
   CATEGORY FILTER BUTTONS
   ============================================ */

.openstreet-maps-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    justify-content: center;
}

.openstreet-maps-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 18px;
    border: 2px solid var(--cat-color, #1d6b5e);
    background: var(--cat-icon-bg, transparent);
    color: var(--cat-icon-color, var(--cat-color, #1d6b5e));
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-width 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.openstreet-maps-filter-btn:hover {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cat-color, #1d6b5e) 30%, transparent);
}

/* Active state indicator: a colored dot placed opposite the icon */
.openstreet-maps-filter-btn::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cat-color, #1d6b5e);
    margin-inline-start: 4px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.openstreet-maps-filter-btn.active::after {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #1d6b5e) 25%, transparent);
}

.openstreet-maps-filter-btn i {
    font-size: 0.82rem;
}

/* Fallback dot for categories without an icon */
.openstreet-maps-filter-dot {
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 50%;
    background: var(--cat-color, #1d6b5e);
    flex-shrink: 0;
}

/* ============================================
   FILTER POSITION: TOP (default)
   ============================================ */

.openstreet-maps-container.filter-top {
    display: flex;
    flex-direction: column;
}

.openstreet-maps-container.filter-top .openstreet-maps-category-filter {
    order: -1;
}

/* ============================================
   FILTER POSITION: BOTTOM
   ============================================ */

.openstreet-maps-container.filter-bottom {
    display: flex;
    flex-direction: column;
}

/* ============================================
   FILTER POSITION: LEFT
   ============================================ */

.openstreet-maps-container.filter-left {
    display: flex;
    flex-wrap: wrap;
}

.openstreet-maps-container.filter-left .openstreet-maps-canvas {
    flex: 1;
    min-width: 0;
}

.openstreet-maps-container.filter-left .openstreet-maps-category-filter {
    flex-direction: column;
    order: -1;
    padding-inline-end: 12px;
    justify-content: flex-start;
    gap: 6px;
}

.openstreet-maps-container.filter-left .openstreet-maps-filter-btn {
    border-radius: 8px;
}

/* ============================================
   FILTER POSITION: RIGHT
   ============================================ */

.openstreet-maps-container.filter-right {
    display: flex;
    flex-wrap: wrap;
}

.openstreet-maps-container.filter-right .openstreet-maps-canvas {
    flex: 1;
    min-width: 0;
}

.openstreet-maps-container.filter-right .openstreet-maps-category-filter {
    flex-direction: column;
    padding-inline-start: 12px;
    justify-content: flex-start;
    gap: 6px;
}

.openstreet-maps-container.filter-right .openstreet-maps-filter-btn {
    border-radius: 8px;
}

/* ============================================
   FILTER POSITION: OVERLAY (inside map)
   ============================================ */

.openstreet-maps-container.filter-overlay .openstreet-maps-category-filter {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 500;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.openstreet-maps-container.filter-overlay .openstreet-maps-filter-btn {
    font-size: 0.85rem;
    padding: 4px 10px;
    border-width: 1.5px;
    background-color: color-mix(in srgb, var(--cat-icon-bg, #ffffff) 92%, transparent);
    backdrop-filter: blur(4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .openstreet-maps-container {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .openstreet-maps-category-filter {
        gap: 6px;
        padding: 8px 0;
    }

    .openstreet-maps-filter-btn {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .openstreet-maps-filter-btn::after {
        width: 6px;
        height: 6px;
        margin-inline-start: 3px;
    }

    .openstreet-maps-container.filter-left,
    .openstreet-maps-container.filter-right {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .openstreet-maps-container.filter-left .openstreet-maps-canvas,
    .openstreet-maps-container.filter-right .openstreet-maps-canvas {
        flex: none;
        width: 100%;
    }

    .openstreet-maps-container.filter-left .openstreet-maps-category-filter,
    .openstreet-maps-container.filter-right .openstreet-maps-category-filter {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 0 0 0;
        order: 0;
        width: 100%;
    }

    .openstreet-maps-container.filter-overlay .openstreet-maps-category-filter {
        top: 5px;
        inset-inline-start: 5px;
    }

    .openstreet-maps-info-content-row {
        flex-direction: column !important;
    }

    .openstreet-maps-info-image {
        width: auto;
        max-width: 150px !important;
        max-height: 50px !important;
    }

    .openstreet-maps-info-desc {
        font-size: 0.8rem;
    }

    .openstreet-maps-info-title.openstreet-maps-info-link {
        display: inline;
        background: none;
    }
}

/* ============================================
   DARK MODE
   ============================================ */

html[data-bs-theme="dark"] .openstreet-maps-canvas {
    background-color: #2a2a3e;
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-popup-content-wrapper {
    background: #242830;
    color: #e2e2f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-popup-tip {
    background: #242830;
}

html[data-bs-theme="dark"] .openstreet-maps-info-title {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .openstreet-maps-info-desc {
    color: #a0a0b8;
}

html[data-bs-theme="dark"] .openstreet-maps-info-link,
html[data-bs-theme="dark"] .openstreet-maps-info-directions-link {
    color: #2d8676;
}

html[data-bs-theme="dark"] .openstreet-maps-info-link:hover,
html[data-bs-theme="dark"] .openstreet-maps-info-directions-link:hover {
    color: var(--primary-color);
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-control-zoom a {
    background-color: #242830;
    color: #c8c8d8;
    border-color: #3a3a4e;
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-control-fullscreen {
    background-color: #242830;
    color: #c8c8d8;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-control-fullscreen:hover {
    background-color: #2f343f;
    color: #fff;
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-control-attribution {
    background-color: rgba(36, 40, 48, 0.85);
    color: #a0a0b8;
}

html[data-bs-theme="dark"] .openstreet-maps-canvas .leaflet-control-attribution a {
    color: #2d8676;
}

html[data-bs-theme="dark"] .openstreet-maps-cluster {
    border-color: #3a3a4e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .openstreet-maps-filter-btn {
    border-color: var(--cat-color, #2d8676);
    background: var(--cat-icon-bg, #1e1e2e);
    color: var(--cat-icon-color, var(--cat-color, #2d8676));
}

html[data-bs-theme="dark"] .openstreet-maps-filter-btn::after {
    background: var(--cat-color, #2d8676);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #2d8676) 25%, transparent);
}

html[data-bs-theme="dark"] .openstreet-maps-container.filter-overlay .openstreet-maps-filter-btn {
    background-color: color-mix(in srgb, var(--cat-icon-bg, #1e1e2e) 92%, transparent);
    color: var(--cat-icon-color, var(--cat-color, #2d8676));
}

html[data-bs-theme="dark"] .openstreet-maps-clear-route-btn {
    background-color: #242830;
    color: #f87171;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .openstreet-maps-clear-route-btn:hover {
    background-color: #dc3545;
    color: #fff;
}

html[data-bs-theme="dark"] .osm-directions-summary {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .osm-directions-route {
    color: #a0a0b8;
    border-bottom-color: #3a3a4e;
}

html[data-bs-theme="dark"] .osm-directions-step {
    border-bottom-color: #2a2a3e;
}

html[data-bs-theme="dark"] .osm-directions-step-number {
    background-color: #155046;
}

html[data-bs-theme="dark"] .osm-directions-step-instruction {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .osm-directions-step-distance {
    color: #6a6a80;
}

/* ============================================
   DIRECTIONS PRINT
   ============================================ */

@media print {
    .openstreet-maps-container {
        display: none !important;
    }
}