.zrm-map {
	--zrm-map-radius: 20px;
	--zrm-map-active-color: var(--brown_250, #a67c52);
	--zrm-map-card-bg: #fff;
	--zrm-map-card-radius: 12px;
	--zrm-map-card-w: 30%;
	--zrm-map-number-bg: var(--blue_300, #00417d);
	--zrm-map-number-color: #fff;
	--zrm-map-number-size: 40px;
	width: 100%;
}

/* ── Viewports ─────────────────────────────────── */

.zrm-map__viewport {
	position: relative;
	border-radius: var(--zrm-map-radius);
	overflow: hidden;
}

.zrm-map__viewport svg {
	display: block;
	width: 100%;
	height: auto;
}

.zrm-map__viewport--desktop {
	display: block;
}

.zrm-map__viewport--mobile {
	display: none;
}

@media screen and (max-width: 800px) {
	.zrm-map__viewport--desktop {
		display: none;
	}
	.zrm-map__viewport--mobile {
		display: block;
	}
}

/* ── Interactive regions ───────────────────────── */

.zrm-map__viewport svg > g:not(#map) {
	cursor: pointer;
	transition: opacity 350ms ease;
}

.zrm-map__viewport svg > g:not(#map) path {
	transition: fill 350ms ease;
}

.zrm-map__viewport svg > g:not(#map).active {
	opacity: 1;
}

.zrm-map__viewport svg > g:not(#map).active path {
	fill: var(--zrm-map-active-color);
}

/* ── Labels inside SVG ─────────────────────────── */

.zrm-map .map__label {
	padding: 5px 15px;
	border-radius: 12px;
	background-color: var(--zrm-map-card-bg);
}

/* ── Card ──────────────────────────────────────── */

.zrm-map__card {
	position: absolute;
	opacity: 0;
	border-radius: var(--zrm-map-card-radius);
	background-color: var(--zrm-map-card-bg);
	transition: opacity 350ms ease;
	pointer-events: none;
	z-index: 2;
}

.zrm-map__card.active {
	opacity: 1;
	pointer-events: auto;
}

.zrm-map__card--desktop {
	width: var(--zrm-map-card-w);
	top: 30px;
	left: 30px;
}

.zrm-map__card--mobile {
	width: calc(100% - 60px);
	left: 30px;
	bottom: 30px;
}

/* ── Card inner content ────────────────────────── */

.zrm-map__card .location {
	padding: 24px;
}

.zrm-map__card .location__image {
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 24px 0;
}

.zrm-map__card .location__image > img {
	max-width: initial;
	width: 100%;
	display: block;
}

.zrm-map__card .location__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px 0;
}

.zrm-map__card .location__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.zrm-map__card .location__number {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	line-height: 1;
	width: var(--zrm-map-number-size);
	height: var(--zrm-map-number-size);
	flex-shrink: 0;
	border-radius: 100%;
	color: var(--zrm-map-number-color);
	background-color: var(--zrm-map-number-bg);
}

.zrm-map__card .location__description {
	font-size: 14px;
	line-height: 1.5;
}