/* Safety Week live map */

.swr-map {
	position: relative;
	margin: 0 auto;
}

.swr-map svg {
	display: block;
	width: 100%;
	height: auto;
}

.swr-region {
	stroke: #fff;
	stroke-width: 1.5;
	/* Constant border thickness in screen pixels regardless of the SVG scale. */
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	cursor: pointer;
	/* No 300ms tap delay / double-tap zoom on the regions. */
	touch-action: manipulation;
	/* Scale/lift the region around its own centre on hover. */
	transform-box: fill-box;
	transform-origin: center;
	transition: fill 0.4s ease, transform 0.18s ease, filter 0.18s ease;
}

/* Hover: no coloured border — a soft drop shadow + slight scale make the
   region "pop" off the map instead. Only on devices with a real pointer, so
   the effect doesn't stick after a tap on touchscreens. */
@media (hover: hover) {
	.swr-region:hover {
		filter: drop-shadow(0 4px 7px rgba(5, 50, 100, 0.45));
		transform: scale(1.035);
	}
}

/* Tapped region on touch devices gets the same "pop". */
.swr-region.swr-active {
	filter: drop-shadow(0 4px 7px rgba(5, 50, 100, 0.45));
	transform: scale(1.035);
}

.swr-map-tooltip {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	background: #053264;
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
	white-space: nowrap;
	max-width: calc(100% - 8px);
	box-shadow: 0 4px 12px rgba(5, 50, 100, 0.3);
}

.swr-map-tooltip strong {
	display: block;
	margin-bottom: 0.15rem;
}

.swr-map-tooltip span {
	display: block;
}

.swr-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	justify-content: center;
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: #5a5b4d;
}

.swr-map-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.swr-map-legend i {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	display: inline-block;
}

.swr-map-loading {
	text-align: center;
	color: #5a5b4d;
	padding: 2rem 0;
}