.laverde-map {
	--m: var(--laverde-map-main);
	--s: var(--laverde-map-sec);
	--t: var(--laverde-map-ter);
	--b: var(--laverde-map-base);
	--line: color-mix(in srgb, var(--t) 30%, transparent);
	container-type: inline-size;
	margin: 1.5em 0;
	font-family: var(--laverde-map-font, inherit);
	line-height: 1.4;
	box-sizing: border-box;
}

.laverde-map *,
.laverde-map *::before,
.laverde-map *::after {
	box-sizing: inherit;
}

.laverde-map [hidden] {
	display: none !important;
}

.laverde-map__inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
	height: 600px;
	overflow: hidden;
	background: var(--b);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.laverde-map__map {
	height: 100%;
	min-height: 320px;
	z-index: 0;
}

.laverde-map .leaflet-container {
	font-family: inherit;
	background: var(--b);
}

.laverde-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(.9) brightness(1.04);
}

.laverde-map__side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-left: 1px solid var(--line);
}

.laverde-map__head {
	padding: 14px 16px;
	color: var(--b);
	background: var(--m);
}

.laverde-map__title {
	font-size: 1.15em;
	font-weight: 700;
}

.laverde-map__sub {
	font-size: .85em;
	opacity: .85;
}

.laverde-map__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
}

.laverde-map .laverde-map__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 9px;
	font: inherit;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--m);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.laverde-map .laverde-map__chip:hover,
.laverde-map .laverde-map__chip:focus-visible {
	color: var(--m);
	background: color-mix(in srgb, var(--m) 8%, transparent);
	border-color: var(--m);
	outline: none;
}

.laverde-map .laverde-map__chip[aria-pressed="true"] {
	color: var(--b);
	background: var(--m);
	border-color: var(--m);
}

.laverde-map__chip svg {
	color: var(--s);
}

.laverde-map__chip[aria-pressed="true"] svg {
	color: inherit;
}

.laverde-map__count {
	font-weight: 400;
	opacity: .7;
}

.laverde-map .laverde-map__list {
	position: relative;
	flex: 1;
	margin: 0;
	padding: 4px 6px;
	font-size: .9em;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.laverde-map__status {
	padding: 24px 12px;
	color: var(--t);
	text-align: center;
}

.laverde-map .laverde-map__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 8px 10px;
	line-height: 1.3;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.laverde-map__item + .laverde-map__item {
	margin-top: 1px;
}

.laverde-map__item:hover,
.laverde-map__item:focus-visible,
.laverde-map__item.is-active {
	background: color-mix(in srgb, var(--m) 6%, transparent);
	border-color: color-mix(in srgb, var(--m) 35%, transparent);
	outline: none;
}

.laverde-map__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	color: var(--b);
	background: var(--s);
	border-radius: 50%;
}

.laverde-map__item.is-active .laverde-map__icon {
	background: var(--m);
}

.laverde-map__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.laverde-map__name {
	font-weight: 700;
	color: var(--m);
	overflow-wrap: anywhere;
}

.laverde-map__meta {
	font-size: .8em;
	color: var(--t);
}

.laverde-map__cat {
	font-weight: 600;
}

.laverde-map__street::before {
	content: "·";
	margin: 0 5px;
}

.laverde-map .laverde-map__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
}

.laverde-map .laverde-map__modes li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 1px 6px;
	font-size: .72em;
	white-space: nowrap;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.laverde-map__modes svg {
	flex: none;
	color: var(--m);
}

.laverde-map__time + .laverde-map__dist::before {
	content: "·";
	margin-right: 4px;
}

.laverde-map__time {
	font-weight: 700;
	color: var(--m);
}

.laverde-map__dist {
	color: var(--t);
}

.laverde-map .laverde-map__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.laverde-map .laverde-map-radius {
	stroke: var(--m);
	stroke-width: 2;
	stroke-dasharray: 6 6;
	fill: var(--m);
	fill-opacity: .06;
}

.laverde-map-pin span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--b);
	background: var(--s);
	border: 2px solid var(--b);
	border-radius: 50%;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--t) 60%, transparent);
	transition: transform .15s, background-color .15s;
}

.laverde-map-pin.is-active span {
	background: var(--m);
	transform: scale(1.3);
}

.laverde-map-pin--center span {
	width: 36px;
	height: 36px;
	background: var(--m);
	border: 3px solid var(--b);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.laverde-map-pin--center span::after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--b);
	border-radius: 50%;
}

.laverde-map .laverde-map-tip {
	padding: 4px 10px;
	font-weight: 700;
	color: var(--b);
	background: var(--m);
	border: 0;
	border-radius: 6px;
	box-shadow: none;
}

.laverde-map .laverde-map-tip::before {
	border-top-color: var(--m);
}

.laverde-map .laverde-map-popup .leaflet-popup-content-wrapper,
.laverde-map .laverde-map-popup .leaflet-popup-tip {
	background: var(--b);
}

.laverde-map .laverde-map-popup .leaflet-popup-content {
	margin: 10px 14px;
	color: var(--t);
}

.laverde-map .laverde-map-popup strong {
	color: var(--m);
}

.laverde-map .leaflet-container a.leaflet-popup-close-button {
	color: var(--t);
}

.laverde-map .leaflet-bar a {
	color: var(--m);
	background: var(--b);
}

@container (max-width: 760px) {
	.laverde-map__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 360px auto;
		height: auto;
	}

	.laverde-map__side {
		border-top: 1px solid var(--line);
		border-left: 0;
	}

	.laverde-map .laverde-map__list {
		max-height: 480px;
	}
}