.world-locations-map {
	--map-land: #eeeeee;
	--map-border: #c8c8c8;
	--map-water: #ffffff;
	--map-marker: #f05a28;
	--map-focus: #010440;
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 500px;
	overflow: hidden;
	border: 1px solid rgb(1 4 64 / 12%);
	background: var(--map-water);
}

.world-locations-map__canvas,
.world-locations-map__status {
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.world-locations-map__canvas {
	position: relative;
	overflow: hidden;
	background: var(--map-water);
}

.world-locations-map__canvas canvas {
	max-width: none;
}

.world-locations-map__status {
	display: grid;
	place-items: center;
	margin: 0;
	padding: 2rem;
	background: #f7f7f5;
	color: #333333;
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
}

.world-locations-map__status[hidden] {
	display: none;
}

.world-locations-map button.world-locations-map__marker {
	appearance: none;
	display: block;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent url("../icons/location.svg") center / contain no-repeat;
	box-shadow: none;
	cursor: pointer;
	filter: drop-shadow(0 2px 3px rgb(1 4 64 / 22%));
	line-height: 0;
	transition: filter 160ms ease, transform 160ms ease;
}

.world-locations-map button.world-locations-map__marker:hover {
	background-color: transparent;
	filter: drop-shadow(0 3px 5px rgb(1 4 64 / 30%));
	transform: scale(1.18);
}

.world-locations-map button.world-locations-map__marker:focus-visible {
	background-color: transparent;
	outline: 2px solid var(--map-focus);
	outline-offset: 3px;
	transform: scale(1.12);
}

.world-locations-map .maplibregl-ctrl-top-right {
	top: 0.75rem;
	right: 0.75rem;
}

.world-locations-map .maplibregl-ctrl-group {
	overflow: hidden;
	border: 1px solid rgb(1 4 64 / 16%);
	border-radius: 3px;
	box-shadow: 0 4px 16px rgb(1 4 64 / 12%);
}

.world-locations-map .maplibregl-ctrl-group button {
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #ffffff;
}

.world-locations-map .maplibregl-ctrl-group button:hover,
.world-locations-map .maplibregl-ctrl-group button:focus-visible {
	background-color: #ffffff;
}

.world-locations-map button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.world-locations-map button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}

.world-locations-map button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
	background-image: url("../icons/zoom_in.svg") !important;
}

.world-locations-map button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
	background-image: url("../icons/zoom_out.svg") !important;
}

.world-locations-map .maplibregl-ctrl-group button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--map-focus);
	outline-offset: -3px;
}

.world-locations-map .maplibregl-popup {
	max-width: min(260px, calc(100vw - 3rem)) !important;
}

.world-locations-map .maplibregl-popup-content {
	min-width: 170px;
	padding: 1rem 2.25rem 1rem 1rem;
	border-top: 3px solid var(--map-marker);
	border-radius: 2px;
	box-shadow: 0 10px 28px rgb(1 4 64 / 20%);
	color: #333333;
}

.world-locations-map__popup-city,
.world-locations-map__popup-country {
	margin: 0;
}

.world-locations-map__popup-city {
	color: #010440;
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.25;
}

.world-locations-map__popup-country {
	margin-top: 0.25rem;
	color: #555555;
	font-size: 0.88rem;
	line-height: 1.4;
}

.world-locations-map .maplibregl-popup-close-button {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #010440;
	font-size: 1.25rem;
}

.world-locations-map .maplibregl-popup-close-button:hover,
.world-locations-map .maplibregl-popup-close-button:focus-visible {
	background: transparent;
	color: var(--map-marker);
}

.world-locations-map .maplibregl-popup-close-button:focus-visible {
	outline: 2px solid var(--map-focus);
	outline-offset: -4px;
}

@media (max-width: 700px) {
	.world-locations-map .maplibregl-ctrl-top-right {
		top: 0.5rem;
		right: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.world-locations-map button.world-locations-map__marker {
		transition: none;
	}
}