/* Shared MapLibre Map Base Styles
 * Common styles for all MapLibre-based map widgets
 */

.nnl-map-widget{
	overflow: hidden;
}

/* MapLibre Control Styles */
.maplibregl-ctrl-top-right {
	row-gap: 19.5px;
	display: flex;
	flex-direction: column-reverse;
}

.maplibregl-ctrl-bottom-right {
	display: flex;
	flex-direction: column;
}

.maplibregl-ctrl a,
.maplibregl-ctrl button {
	width: 45px;
	height: 45px;
	display: flex;
	border-radius: 100%;
	border: 0.5px solid var(--borders);
	background-color: var(--white);
	padding: 15px;
	color: transparent;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
	transform: none;
	outline: none;
	box-shadow: none;
}

/* Override MapLibre hover (they use rgb(0 0 0/5%) which looks transparent) and focus (box-shadow/outline look like scale or black border) */
.maplibregl-ctrl a:hover,
.maplibregl-ctrl button:hover,
.maplibregl-ctrl-group button:not(:disabled):hover {
	background-color: var(--white85, rgba(255, 255, 255, 0.85));
	color: transparent;
	border: 0.5px solid var(--borders);
	box-shadow: none;
	outline: none;
}

.maplibregl-ctrl a:focus,
.maplibregl-ctrl button:focus,
.maplibregl-ctrl-group button:focus,
.maplibregl-ctrl a:focus-visible,
.maplibregl-ctrl button:focus-visible,
.maplibregl-ctrl-group button:focus-visible {
	background-color: var(--white);
	border: 0.5px solid var(--borders);
	box-shadow: none;
	outline: none;
}

.maplibregl-ctrl-attrib-inner a{
	display: inline !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

/* Keep round shape on focus – MapLibre sets border-radius: 4px on focus, override it */
.maplibregl-ctrl-group button:focus,
.maplibregl-ctrl-group button:focus-visible {
	border-radius: 100%;
	background-color: var(--white);
	border: 0.5px solid var(--borders);
}
.maplibregl-ctrl-group button:focus:first-child,
.maplibregl-ctrl-group button:focus-visible:first-child {
	border-radius: 100% 100% 0 0;
	border-bottom: none;
}
.maplibregl-ctrl-group button:focus:last-child,
.maplibregl-ctrl-group button:focus-visible:last-child {
	border-radius: 0 0 100% 100%;
}
.maplibregl-ctrl-group button:focus:only-child,
.maplibregl-ctrl-group button:focus-visible:only-child {
	border-radius: 100%;
}
button.maplibregl-ctrl-fullscreen:focus,
button.maplibregl-ctrl-fullscreen:focus-visible,
button.maplibregl-ctrl-shrink:focus,
button.maplibregl-ctrl-shrink:focus-visible,
button.maplibregl-ctrl-geolocate:focus,
button.maplibregl-ctrl-geolocate:focus-visible {
	border-radius: 100% !important;
	background-color: var(--white) !important;
	box-shadow: none !important;
	outline: none !important;
	border: 0.5px solid var(--borders) !important;
}

/* No focus ring on map controls – keep border unchanged */
.maplibregl-ctrl a::-moz-focus-inner,
.maplibregl-ctrl button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Navigation Control (Zoom) – round group, no default box */
.maplibregl-ctrl-group {
	display: flex;
	flex-direction: column;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0;
	gap: 0;
}

.maplibregl-ctrl-group button:first-child {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

.maplibregl-ctrl-group button:last-child {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* MapLibre Map Container */
.nnl-map-widget .maplibregl-map,
.map-marker-widget .maplibregl-map {
	position: relative;
	width: 100%;
	height: 100%;
}

.nnl-map-widget .maplibregl-canvas,
.map-marker-widget .maplibregl-canvas {
	outline: none;
}

/* Control Positioning */
.nnl-map-widget .maplibregl-ctrl,
.map-marker-widget .maplibregl-ctrl {
	position: relative;
	z-index: 800;
	pointer-events: auto;
}

.nnl-map-widget .maplibregl-ctrl-top-right,
.map-marker-widget .maplibregl-ctrl-top-right {
	position: absolute;
	top: 50px;
	right: 20px;
	z-index: 1000;
	pointer-events: none;
}

.nnl-map-widget .maplibregl-ctrl-bottom-right,
.map-marker-widget .maplibregl-ctrl-bottom-right {
	position: absolute;
	bottom: 50px;
	right: 20px;
	z-index: 1000;
	pointer-events: none;
}

/* Zoom Control with Custom Icons (MapLibre uses .maplibregl-ctrl-icon inside the button) */
.nnl-map-widget .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.map-marker-widget .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
	background-image: url('../widgets/nnl-map-widget/assets/zoom-in.svg') !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.nnl-map-widget .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.map-marker-widget .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
	background-image: url('../widgets/nnl-map-widget/assets/zoom-out.svg') !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.nnl-map-widget .maplibregl-ctrl-zoom-in,
.nnl-map-widget .maplibregl-ctrl-zoom-out,
.map-marker-widget .maplibregl-ctrl-zoom-in,
.map-marker-widget .maplibregl-ctrl-zoom-out {
	font-size: 0;
	text-indent: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Fullscreen Control – round shape (button has class .maplibregl-ctrl-fullscreen / .maplibregl-ctrl-shrink) */
button.maplibregl-ctrl-fullscreen,
button.maplibregl-ctrl-shrink {
	width: 45px !important;
	height: 45px !important;
	min-width: 45px;
	min-height: 45px;
	display: flex !important;
	border-radius: 100% !important;
	border: 0.5px solid var(--borders) !important;
	background-color: var(--white) !important;
	padding: 15px !important;
	align-items: center;
	justify-content: center;
}

/* Fullscreen Control – custom icon (icon is inside the button, so .maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon) */
button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
	background-image: url('../widgets/nnl-map-widget/assets/fullscreen.svg') !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

button.maplibregl-ctrl-fullscreen:hover,
button.maplibregl-ctrl-shrink:hover {
	background-color: var(--white85, rgba(255, 255, 255, 0.85)) !important;
	border: 0.5px solid var(--borders) !important;
}

button.maplibregl-ctrl-fullscreen,
button.maplibregl-ctrl-shrink {
	font-size: 0;
	text-indent: 0;
}

/* Geolocate Control – round shape (button has class .maplibregl-ctrl-geolocate, plus state classes) */
button.maplibregl-ctrl-geolocate {
	width: 45px !important;
	height: 45px !important;
	min-width: 45px;
	min-height: 45px;
	display: flex !important;
	border-radius: 100% !important;
	border: 0.5px solid var(--borders) !important;
	background-color: var(--white) !important;
	padding: 15px !important;
	align-items: center;
	justify-content: center;
}

/* Geolocate Control – custom icon in all states (default, active, disabled, etc.) */
button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon,
button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
	background-image: url('../widgets/nnl-map-widget/assets/locate.svg') !important;
	background-size: 100% 100%!important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

button.maplibregl-ctrl-geolocate:hover {
	background-color: var(--white85, rgba(255, 255, 255, 0.85)) !important;
	border: 0.5px solid var(--borders) !important;
}

button.maplibregl-ctrl-geolocate {
	font-size: 0;
	text-indent: 0;
}

/* Custom Embed Button Control */
.nnl-map-widget .maplibregl-ctrl-embed,
.map-marker-widget .maplibregl-ctrl-embed {
	display: flex !important;
}

.nnl-map-widget .maplibregl-ctrl-embed-button,
.map-marker-widget .maplibregl-ctrl-embed-button {
	width: 45px;
	height: 45px;
	display: flex;
	border-radius: 100%;
	border: 0.5px solid var(--borders);
	background-color: var(--white);
	padding: 15px;
	color: transparent;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.nnl-map-widget .maplibregl-ctrl-embed-button:hover,
.map-marker-widget .maplibregl-ctrl-embed-button:hover {
	background-color: var(--white85);
}

/* Leafmap Container (kept for compatibility) */
.nnl-map-widget .leafmap,
.map-marker-widget .leafmap {
	width: auto;
	height: 80vh;
	position: relative;
}

@media (min-width: 768px) {
	.nnl-map-widget .leafmap,
	.map-marker-widget .leafmap {
		height: 600px;
	}
}

.nnl-map-widget .leafmap label,
.map-marker-widget .leafmap label {
	font-weight: inherit;
}

.nnl-map-widget .leafmap.loading,
.map-marker-widget .leafmap.loading {
	background-color: #f5f5f5;
	background-repeat: no-repeat;
	background-position: center center;
}

/* MapLibre Popup Styles – container, content, tip and close button */
.nnl-map-widget .maplibregl-popup,
.map-marker-widget .maplibregl-popup {
	z-index: 1000;
	pointer-events: none;
}

.nnl-map-popup__description{
	max-height: 180px;
	overflow-y: auto;
}

/* Move popup card further up from the map marker/edge to avoid clipping at the bottom. */
.nnl-map-widget .maplibregl-popup-anchor-bottom .maplibregl-popup-content,
.nnl-map-widget .maplibregl-popup-anchor-bottom-left .maplibregl-popup-content,
.nnl-map-widget .maplibregl-popup-anchor-bottom-right .maplibregl-popup-content,
.map-marker-widget .maplibregl-popup-anchor-bottom .maplibregl-popup-content,
.map-marker-widget .maplibregl-popup-anchor-bottom-left .maplibregl-popup-content,
.map-marker-widget .maplibregl-popup-anchor-bottom-right .maplibregl-popup-content {
	margin-bottom: 24px;
}

.nnl-map-widget .maplibregl-popup-content,
.map-marker-widget .maplibregl-popup-content {
	pointer-events: auto;
	cursor: pointer;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 405px;
	background: var(--white);
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--Border-border-primary, #DCDCDC);
	position: relative;
}

@media (min-width: 769px) {
	/* Desktop: keep popup fixed in map center without panning the map. */
	.nnl-map-widget .maplibregl-popup,
	.map-marker-widget .maplibregl-popup {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
	}
}

/* Popup tip (caret) – hidden */
.nnl-map-widget .maplibregl-popup-tip,
.map-marker-widget .maplibregl-popup-tip {
	display: none;
}

/* Popup close button – hidden (popups close on map click) */
.nnl-map-widget .maplibregl-popup-close-button,
.map-marker-widget .maplibregl-popup-close-button {
	display: none;
}

/* Layer Control (custom implementation) */
.nnl-map-widget .maplibregl-ctrl-layers,
.map-marker-widget .maplibregl-ctrl-layers {
	display: none;
}

/* Attribution Control */
.nnl-map-widget .maplibregl-ctrl-attrib,
.map-marker-widget .maplibregl-ctrl-attrib {
	font-size: 10px;	
	padding-left: 30px;
}

.nnl-map-widget .maplibregl-ctrl-attrib a,
.map-marker-widget .maplibregl-ctrl-attrib a{
	border: none;
	border-radius: 0 !important;
	background: none !important;
	background-size: 0 !important;	
	padding: 0;
	text-decoration: underline !important;
	color: inherit;
	font-size: 10px;
}

@media (max-width: 768px) {
	.nnl-map-popup__description{
		max-height: 140px;
	}

	/* Popup: full width of map container, anchored to bottom */
	.nnl-map-widget .maplibregl-popup,
	.map-marker-widget .maplibregl-popup {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		transform: none !important;
		margin: 0 !important;
	}

	.nnl-map-widget .maplibregl-popup-content,
	.map-marker-widget .maplibregl-popup-content {
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box;
		border-radius: 24px 24px 0 0;
	}

	.maplibregl-ctrl-fullscreen {
		display: none;
	}

	.maplibregl-ctrl a,
	.maplibregl-ctrl button {
		padding: 10px;
		width: 30px;
		height: 30px;
	}

	button.maplibregl-ctrl-fullscreen,
	button.maplibregl-ctrl-shrink,
	button.maplibregl-ctrl-geolocate {
		width: 30px !important;
		height: 30px !important;
		min-width: 30px;
		min-height: 30px;
		padding: 10px !important;
	}

	.maplibregl-ctrl .maplibregl-ctrl-icon {
		background-size: 10px 10px !important;
	}
}