:root {
	--jl-map-accent: var(--accent, #2d7a78);
	--jl-map-accent-strong: #245f5d;
	--jl-map-surface: #ffffff;
	--jl-map-shell: #edf5f1;
	--jl-map-border: #dbe6e0;
	--jl-map-text: #1f2d43;
	--jl-map-muted: #5f7288;
}

.c27-map,
#location-picker-map {
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(180deg, #f6faf8 0%, #eef5f1 100%);
	border: 1px solid var(--jl-map-border);
	box-shadow: 0 18px 42px rgba(18, 40, 58, 0.08);
}

.c27-map .leaflet-container,
#location-picker-map .leaflet-container {
	background: var(--jl-map-shell);
	font-family: var(--e-global-typography-text-font-family), GlacialIndifference, sans-serif;
}

.c27-map .leaflet-tile-pane::after,
#location-picker-map .leaflet-tile-pane::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(45, 122, 120, 0.06) 0%, rgba(45, 122, 120, 0) 35%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

.c27-map .leaflet-container img.leaflet-tile,
#location-picker-map .leaflet-container img.leaflet-tile {
	mix-blend-mode: normal !important;
	filter: saturate(0.9) brightness(1.03) contrast(0.95);
}

.c27-map .leaflet-bar,
#location-picker-map .leaflet-bar {
	border: 1px solid rgba(219, 230, 224, 0.92);
	border-radius: 16px;
	box-shadow: 0 14px 30px rgba(18, 40, 58, 0.12);
	overflow: hidden;
}

.c27-map .leaflet-bar a,
#location-picker-map .leaflet-bar a {
	width: 42px;
	height: 42px;
	line-height: 42px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--jl-map-text);
	border-bottom-color: rgba(219, 230, 224, 0.92);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c27-map .leaflet-bar a:hover,
#location-picker-map .leaflet-bar a:hover,
.c27-map .leaflet-bar a:focus,
#location-picker-map .leaflet-bar a:focus {
	background: #f4f9f7;
	color: var(--jl-map-accent);
}

.c27-map .leaflet-control-attribution,
#location-picker-map .leaflet-control-attribution {
	margin: 12px;
	padding: 6px 10px;
	border: 1px solid rgba(219, 230, 224, 0.92);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--jl-map-muted);
	font-size: 11px;
	line-height: 1.3;
	box-shadow: 0 10px 24px rgba(18, 40, 58, 0.08);
}

.c27-map .leaflet-control-attribution a,
#location-picker-map .leaflet-control-attribution a {
	color: var(--jl-map-accent);
}

.c27-map .leaflet-popup-content-wrapper,
#location-picker-map .leaflet-popup-content-wrapper {
	border: 1px solid rgba(219, 230, 224, 0.92);
	border-radius: 18px;
	box-shadow: 0 20px 40px rgba(18, 40, 58, 0.14);
}

.marker-container {
	filter: none !important;
}

.marker-icon .marker-img {
	display: block;
	width: 54px;
	height: 54px;
	box-sizing: border-box;
	padding: 9px;
	border-radius: 18px;
	background-color: #fff;
	background-size: contain !important;
	background-origin: content-box;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	border: 2px solid rgba(45, 122, 120, 0.42);
	box-shadow:
		0 0 0 4px rgba(45, 122, 120, 0.1),
		0 14px 28px rgba(18, 40, 58, 0.18);
	transition:
		transform 0.2s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.marker-icon i,
.marker-icon .term-icon.image-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	border-radius: 999px !important;
	border: 2px solid rgba(255, 255, 255, 0.96);
	background: var(--jl-map-accent) !important;
	color: #fff !important;
	box-shadow: 0 10px 20px rgba(45, 122, 120, 0.32);
}

.marker-icon i {
	right: -12px !important;
	top: -2px !important;
	font-size: 14px !important;
}

.marker-icon i.fa {
	font-size: 15px !important;
}

.marker-icon .term-icon.image-icon {
	right: -12px !important;
	top: -2px !important;
}

.marker-icon .term-icon.image-icon img {
	width: 15px !important;
	height: 15px !important;
	filter: brightness(0) invert(1);
}

.marker-icon.active .marker-img,
.leaflet-marker-icon:hover .marker-img {
	border-color: rgba(45, 122, 120, 0.88);
	box-shadow:
		0 0 0 10px rgba(45, 122, 120, 0.14),
		0 18px 34px rgba(18, 40, 58, 0.2);
	transform: translateY(-2px);
}

.leaflet-marker-icon.clusterDiv {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	margin-left: -21px !important;
	margin-top: -21px !important;
	border: 3px solid var(--jl-map-accent);
	border-radius: 50%;
	background: transparent !important;
	color: var(--jl-map-accent) !important;
	font-family: var(--e-global-typography-text-font-family), GlacialIndifference, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow:
		0 0 0 6px rgba(45, 122, 120, 0.12),
		0 16px 30px rgba(18, 40, 58, 0.18);
}

.clusterDiv {
	color: var(--jl-map-accent) !important;
}

@keyframes jl-map-ripple {
	0% {
		box-shadow: 0 0 0 0 rgba(45, 122, 120, 0.34);
	}

	100% {
		box-shadow: 0 0 0 18px rgba(45, 122, 120, 0);
	}
}

.cts-geoloc-marker {
	width: 14px;
	height: 14px;
	border: 3px solid rgb(45, 122, 120);
	background: var(--jl-map-accent);
	box-shadow: 0 0 0 8px rgba(45, 122, 120, 0.22);
	animation: jl-map-ripple 1.8s infinite;
}

.cts-marker-pin img {
	filter: saturate(0.75) hue-rotate(138deg) brightness(0.82);
}

@media screen and (max-width: 768px) {
	.c27-map,
	#location-picker-map {
		border-radius: 20px;
	}

	.c27-map .leaflet-bar a,
	#location-picker-map .leaflet-bar a {
		width: 38px;
		height: 38px;
		line-height: 38px;
	}

	.marker-icon .marker-img {
		width: 50px;
		height: 50px;
		padding: 8px;
	}
}