.lnm-map {
	position: relative;
	--lnm-land: #A9E6F5;
	--lnm-map-bg: #FFFFFF;
	--lnm-dot: #2563EB;
	--lnm-dot-outer: #1D4ED8;
	--lnm-globe: #E0F2FE;       /* the globe's sphere (view="globe") */
	--lnm-frame-border: transparent;
	--lnm-text: #1f2937;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--lnm-text);
	line-height: 1.45;
}
.lnm-map *,
.lnm-map *::before,
.lnm-map *::after { box-sizing: border-box; }

.lnm-map__stage {
	position: relative;
	width: calc(var(--lnm-width-desktop, 100%) - 108px);
	margin: 0 auto;
	overflow: hidden;
	touch-action: pan-y;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	border: 1px solid var(--lnm-frame-border);
	background: var(--lnm-map-bg);
	min-height: 0;
	max-height: none;
}

.lnm-map__stage:focus-visible { outline: 2px solid var(--lnm-dot); outline-offset: 3px; border-radius: 12px; }
.lnm-svg { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }

/* Keep the map frame fixed while its camera changes. The viewBox may crop to a half-world,
   but the visible component itself must never grow or shrink during region transitions. */
.lnm-map__stage { height: var(--lnm-height-desktop, 520px) !important; }
.lnm-map--globe .lnm-map__stage { height: var(--lnm-height-desktop, 520px) !important; }
.lnm-map--globe .lnm-svg,
.lnm-map--globe .lnm-land { width: 100%; height: 100%; }

/* ---------- Land dots: a canvas under the map, redrawn at a constant dot size ---------- */
.lnm-land { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Publisher dots ---------- */
.lnm-dot { cursor: pointer; }
.lnm-map--inert .lnm-dot { pointer-events: none; cursor: default; }
.lnm-fill {
	fill: var(--lnm-dot);
	fill-opacity: 0.92;
	stroke: var(--lnm-dot-outer);
	stroke-opacity: 0.95;
	transition: fill-opacity 0.15s ease;
}
.lnm-dot:hover .lnm-fill { fill-opacity: 1; }

/* ---------- Hover card: logo (or name) with a pointer triangle ---------- */
.lnm-card {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	padding: 10px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(31, 41, 55, 0.22);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.lnm-card.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Inverted triangle under the card, aimed at the dot */
.lnm-card::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--lnm-arrow-x, 50%);
	width: 0;
	height: 0;
	margin-left: -9px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid #fff;
	filter: drop-shadow(0 3px 2px rgba(31, 41, 55, 0.1));
}
/* Not enough room above the dot: the card sits below it and the triangle points up */
.lnm-card--below::after {
	top: auto;
	bottom: 100%;
	border-top: 0;
	border-bottom: 9px solid #fff;
	filter: drop-shadow(0 -3px 2px rgba(31, 41, 55, 0.08));
}

/* Fixed-size box: the whole logo is always shown, scaled to fit and never cropped */
.lnm-card__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 76px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}
.lnm-card.is-link .lnm-card__box { cursor: pointer; }
.lnm-card__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.lnm-card__name { padding: 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; }

/* Name only (logo="no", or a site without a logo): the card fits the text */
.lnm-card--text { padding: 8px 12px; }
.lnm-card--text .lnm-card__box { width: auto; height: auto; max-width: 260px; }
.lnm-card--text .lnm-card__name { padding: 0; }

/* ---------- Left/right arrows (always visible; hint="no" removes them) ---------- */
.lnm-map .lnm-hint {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: -17px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 2px 8px rgba(31, 41, 55, 0.16);
	color: var(--lnm-text);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}
.lnm-map .lnm-hint--prev { left: 0; }
.lnm-map .lnm-hint--next { right: 0; }
.lnm-map .lnm-hint:hover { background: #fff; }

/* On desktop the globe uses a slightly narrower frame with its arrows inside the frame,
   inset by 10px from the frame edge. */
@media (min-width: 601px) {
	.lnm-map--globe .lnm-map__stage {
		width: calc(var(--lnm-width-desktop, 100%) - 20px);
	}
	.lnm-map--globe .lnm-hint--prev {
		left: calc((100% - var(--lnm-width-desktop, 100%) + 20px) / 2 + 10px);
	}
	.lnm-map--globe .lnm-hint--next {
		right: calc((100% - var(--lnm-width-desktop, 100%) + 20px) / 2 + 10px);
	}
}

@media (max-width: 600px) {
	/* Keep the frame close to the phone edges: only 10px is reserved on each side. */
	.lnm-map__stage { width: calc(var(--lnm-width-mobile, 100%) - 20px); height: var(--lnm-height-mobile, 300px) !important; }
	.lnm-map .lnm-hint { width: 30px; height: 30px; margin-top: -15px; }
	/* Arrows sit inside the frame with a 10px inset from the frame edge. */
	.lnm-map .lnm-hint--prev { left: calc((100% - var(--lnm-width-mobile, 100%) + 20px) / 2 + 10px); }
	.lnm-map .lnm-hint--next { right: calc((100% - var(--lnm-width-mobile, 100%) + 20px) / 2 + 10px); }
	.lnm-map .lnm-hint svg { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.lnm-card, .lnm-fill, .lnm-hint { transition: none; }
}