/*
 * Look of the vendor map. Every value is a custom property on .hkvm: set them on .hkvm or on a
 * wrapper in the template's stylesheet, no selector to beat.
 *   --hkvm-height   height of the map                      (set by the module's Height setting)
 *   --hkvm-accent   pins, vendor names and links
 *   --hkvm-radius   corners of the map and of the popups
 *   --hkvm-card-bg  popup background
 *   --hkvm-card-fg  popup text
 *   --hkvm-muted    city, votes and description in the popup
 *   --hkvm-star     filled stars
 */
.hkvm {
	--hkvm-accent: #1f6f5c;
	--hkvm-radius: 8px;
	--hkvm-card-bg: #fff;
	--hkvm-card-fg: #1d2327;
	--hkvm-muted: #5c6670;
	--hkvm-star: #e0a100;
	position: relative;
	z-index: 0;
}
.hkvm .hkvm-map {
	height: var(--hkvm-height, 450px);
	border-radius: var(--hkvm-radius);
	overflow: hidden;
}
.hkvm .hkvm-pin {
	background: none;
	border: 0;
}
.hkvm .hkvm-pin svg {
	display: block;
	fill: var(--hkvm-accent);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.hkvm .leaflet-popup-content-wrapper {
	background: var(--hkvm-card-bg);
	color: var(--hkvm-card-fg);
	border-radius: var(--hkvm-radius);
}
.hkvm .leaflet-popup-tip {
	background: var(--hkvm-card-bg);
}
.hkvm .leaflet-popup-content {
	margin: 12px 14px;
}
.hkvm .hkvm-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.hkvm .hkvm-image img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: calc(var(--hkvm-radius) / 2);
}
.hkvm .hkvm-body {
	min-width: 0;
}
.hkvm .hkvm-name {
	font-weight: 600;
	color: var(--hkvm-accent);
	text-decoration: none;
}
.hkvm .hkvm-name:hover,
.hkvm .hkvm-link:hover {
	text-decoration: underline;
}
.hkvm .hkvm-city,
.hkvm .hkvm-votes,
.hkvm .hkvm-text {
	color: var(--hkvm-muted);
	font-size: .875em;
}
.hkvm .hkvm-stars {
	color: var(--hkvm-star);
	letter-spacing: 1px;
}
.hkvm .hkvm-off {
	opacity: .3;
}
.hkvm .hkvm-text {
	margin: 6px 0;
}
.hkvm .hkvm-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--hkvm-accent);
	font-size: .875em;
}