/* Brand values come from the Elementor kit variables; hex values are fallbacks only. */
.respect-map {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: clamp(460px, 62vw, 720px);
	padding: 8px 10px 6px;
	border: 1px solid var(--surface, #f3dee1);
	border-radius: 22px;
	background: var(--background, #fdf6f7);
	overflow: hidden;
	color: var(--body-text, #574549);
	font-family: "Source Sans 3", system-ui, sans-serif;
	box-sizing: border-box;
}

.respect-map *,
.respect-map *::before,
.respect-map *::after {
	box-sizing: border-box;
}

.respect-map__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.respect-map__svg {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

.respect-map__svg.is-dragging {
	cursor: grabbing;
}

.respect-map__controls {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.respect-map .respect-map__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-family: Jost, "Century Gothic", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: var(--heading, #6e262f);
	background: #ffffff;
	border: 1px solid var(--surface, #f3dee1);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(110, 38, 47, 0.08);
	cursor: pointer;
}

.respect-map .respect-map__btn:hover,
.respect-map .respect-map__btn:focus-visible {
	background: var(--heading, #6e262f);
	border-color: var(--heading, #6e262f);
	color: #ffffff;
}

.respect-map .respect-map__btn--reset {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.respect-map__country {
	fill: var(--surface, #f3dee1);
	stroke: var(--background, #fdf6f7);
	stroke-width: 0.7;
	vector-effect: non-scaling-stroke;
}

.respect-map__country.is-partner {
	fill: var(--surface-teal, #dff7f8);
	stroke: #ffffff;
}

.respect-map__dot {
	fill: var(--brand-primary, #cf5c6d);
	stroke: #ffffff;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill 140ms ease;
}

.respect-map__dot:hover,
.respect-map__dot:focus,
.respect-map__dot.is-active {
	fill: var(--heading, #6e262f);
	outline: none;
}

.respect-map__tip {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -100%);
	min-width: 180px;
	max-width: 260px;
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid var(--surface, #f3dee1);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(110, 38, 47, 0.16);
	transition: opacity 120ms ease;
}

.respect-map__tip.is-visible {
	opacity: 1;
}

.respect-map .respect-map__tip-title {
	margin: 0 0 6px;
	font-family: Jost, "Century Gothic", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-secondary, #144f51);
}

.respect-map .respect-map__tip-list {
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.respect-map .respect-map__tip-list li {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--body-text, #574549);
}

.respect-map__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	padding: 10px 2px 0;
	font-size: 15px;
	color: var(--muted-text, #6b5257);
}

.respect-map__legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.respect-map__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

.respect-map__swatch--dot {
	border-radius: 999px;
	background: var(--brand-primary, #cf5c6d);
}

.respect-map__swatch--area {
	background: var(--surface-teal, #dff7f8);
	border: 1px solid var(--surface-teal, #dff7f8);
}

.respect-map .respect-map__note {
	margin: 6px 2px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted-text, #6b5257);
}

@media (prefers-reduced-motion: reduce) {
	.respect-map__dot,
	.respect-map__tip {
		transition: none;
	}
}