.publisible-seo-local-map {
	position: relative;
	max-width: 600px;
}

.publisible-seo-local-map iframe {
	display: block;
	width: 100%;
	max-width: 100%;
}

.publisible-seo-local-map__pane {
	position: relative;
	min-height: 450px;
}

.publisible-seo-local-maplibre {
	width: 100%;
	height: 450px;
}

/* Sizing only: the pin shape itself is an inline SVG (businessPinSvg() in
   local-map-places.js), not CSS — a real teardrop marker, not an
   approximation built from a rotated square. */
.publisible-seo-local-business-marker {
	width: 40px;
	height: 52px;
	cursor: pointer;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.publisible-seo-local-business-marker svg {
	display: block;
}

.publisible-seo-local-business-marker:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
	border-radius: 50%;
}

.publisible-seo-local-recenter button {
	width: 29px;
	height: 29px;
	padding: 0;
	box-sizing: border-box;
}

.publisible-seo-local-maplibre .maplibregl-popup-content {
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 8px;
	/* The vendored maplibre-gl.css sets this popup's background to white but
	   never sets a text color, so it silently inherits the browser's dark-mode
	   default (near-white) on a visitor whose OS/browser prefers dark — white
	   text on a white background, invisible even though the content is there.
	   Same class of bug as the provider switcher below; same fix. */
	color: #1f2937;
	color-scheme: light;
}

.publisible-seo-local-maplibre .maplibregl-popup-content a {
	color: #2563eb;
}

.publisible-seo-local-map--dual .publisible-seo-local-map__pane {
	display: none;
}

.publisible-seo-local-map--dual .publisible-seo-local-map__pane.is-active {
	display: block;
}

/* Neutral segmented control: a light, low-contrast pill with a crisp white
   active state. Reads well whether the page around it is light or dark,
   unlike a solid dark bar that only works on dark backgrounds. Visible even
   before consent is granted, so the visitor can pick a provider first —
   switching never loads anything by itself, only the consent click does. */
.publisible-seo-local-map__switcher {
	display: flex;
	justify-content: center;
	gap: 2px;
	width: fit-content;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 3px;
	border-radius: 999px;
	background: #eef0f2;
	border: 1px solid rgba(0, 0, 0, 0.06);
	/* Opt this control out of the browser's forced dark-mode UA styling for
	   native form controls: without this, a <button> with a "transparent"
	   background can render with a dark native background on hover/focus in
	   some browsers, making its label invisible against dark text. */
	color-scheme: light;
}

.publisible-seo-local-map__switch {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: transparent;
	color: #55606b;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.publisible-seo-local-map__switch:hover {
	background-color: rgba(0, 0, 0, 0.04);
	color: #1f2937;
}

.publisible-seo-local-map__switch.is-active {
	background-color: #ffffff;
	color: #111111;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.publisible-seo-local-map__switch.is-active:hover {
	background-color: #ffffff;
}

.publisible-seo-local-map__switch:focus-visible {
	outline: 2px solid #55606b;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.publisible-seo-local-map__switch {
		padding: 5px 9px;
		font-size: 11px;
	}
}

/* GDPR consent placeholder: keyed on the data attribute (not the static
   --gated class) so the dark background/rounded corners disappear the moment
   local-map.js removes the attribute on consent — otherwise the container
   would stay permanently black behind the now-visible map and switcher. */
[data-publisible-map-gated] {
	min-height: 450px;
	background: #111111;
	border-radius: 6px;
	overflow: hidden;
}

[data-publisible-map-gated] .publisible-seo-local-map__consent {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 32px;
	text-align: center;
	background: #0a0a0a;
}

.publisible-seo-local-map__consent-text {
	max-width: 380px;
	margin: 0;
	color: #cfcfcf;
	font-size: 13px;
	line-height: 1.6;
}

.publisible-seo-local-map__consent-button {
	border: 0;
	margin: 0;
	padding: 12px 22px;
	border-radius: 999px;
	background: #ffffff;
	color: #111111;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.publisible-seo-local-map__consent-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(255, 255, 255, 0.14);
}

.publisible-seo-local-map__consent-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Once consent is granted, JS removes data-publisible-map-gated; the
   placeholder background/min-height fall back to the normal map styles. */
.publisible-seo-local-map:not([data-publisible-map-gated]) .publisible-seo-local-map__consent {
	display: none;
}