/* Contact page — branded dark Leaflet map.
   Same dark-tile treatment as the shipping picker (free OSM tiles, no API key) so the map
   matches the dark design. Loaded only when the Leaflet contact map renders. */

.elvaro-contact-map {
	width: 100%;
	border-radius: var(--radius-lg, 14px);
	overflow: hidden;
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
}

.elvaro-contact-map--leaflet .elvaro-contact-map__canvas {
	width: 100%;
	height: var(--elvaro-map-h, 380px);
	background: var(--surface-2, #13171A);
}

/* Dark OSM tiles to match the brand (mirrors elvaro-shipping/assets/picker.css). */
.elvaro-contact-map .leaflet-tile {
	filter: invert(1) hue-rotate(180deg) grayscale(0.9) brightness(0.9) contrast(0.85);
}
.elvaro-contact-map .leaflet-container {
	background: var(--surface-2, #13171A);
	font-family: var(--font-body, system-ui, sans-serif);
}

/* Controls + attribution on the dark surface. */
.elvaro-contact-map .leaflet-control-attribution {
	background: rgba(10, 14, 17, 0.72);
	color: var(--fg-3, #8B949E);
}
.elvaro-contact-map .leaflet-control-attribution a { color: var(--brand-yellow, #F7B703); }
.elvaro-contact-map .leaflet-bar a {
	background: var(--surface-3, #171B1F);
	color: var(--fg-1, #FAFAFA);
	border-bottom-color: var(--hairline, rgba(255, 255, 255, 0.08));
}
.elvaro-contact-map .leaflet-bar a:hover { background: var(--surface-4, #1C2126); }

.elvaro-contact-pin { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); }
.elvaro-contact-map .leaflet-popup-content-wrapper,
.elvaro-contact-map .leaflet-popup-tip {
	background: var(--surface-3, #171B1F);
	color: var(--fg-1, #FAFAFA);
}