/* Netwerkkaart fietshandelaars ([cv_netwerk_kaart]) */
.cv-netwerk { --cvn-geel: #fba824; --cvn-blauw: #2e5ca9; --cvn-creme: #fdfcee; font-family: Arial, sans-serif; text-align: left; }

.cv-netwerk__filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.cv-netwerk__filters input[type="search"] { flex: 1 1 320px; min-width: 0; margin: 0 !important; }
.cv-netwerk__filters select { flex: 0 1 220px; margin: 0 !important; }
.cv-netwerk__buurt {
	flex: 0 0 auto;
	padding: 0 22px;
	min-height: 48px;
	border: 0;
	background: var(--cvn-geel);
	color: #000;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s ease;
}
.cv-netwerk__buurt:hover { background: #dd452a; color: #fff; }
.cv-netwerk__buurt:disabled { opacity: .6; cursor: wait; }
.cv-netwerk__teller { margin: 0 0 12px !important; font-weight: 700; }
.cv-netwerk__teller:empty { display: none; }

.cv-netwerk__body { display: grid; grid-template-columns: 360px 1fr; gap: 20px; height: 640px; }
.cv-netwerk__lijst {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}
.cv-netwerk__lijst li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #eee; }
.cv-netwerk__lijst li::before { display: none !important; }
.cv-netwerk__lijst button {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border: 0;
	background: none;
	color: #000;
	text-align: left;
	font: inherit;
	cursor: pointer;
}
.cv-netwerk__lijst button:hover,
.cv-netwerk__lijst button:focus { background: var(--cvn-creme); outline: none; }
.cv-netwerk__lijst strong { display: block; font-size: 15px; line-height: 20px; }
.cv-netwerk__lijst span { display: block; font-size: 13px; line-height: 18px; color: #555; }
.cv-netwerk__lijst em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--cvn-blauw); }
.cv-netwerk__meer { padding: 14px 18px !important; font-size: 14px; color: #555; }

.cv-netwerk__kaart { height: 100%; border-radius: 20px; overflow: hidden; z-index: 1; }
.cv-netwerk__kaart .leaflet-popup-content { font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; }
.cv-netwerk__kaart .leaflet-popup-content a { color: var(--cvn-blauw); font-weight: 700; }

/* Pin en clusters in de huisstijl */
.cv-netwerk__pin span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 0;
	background: var(--cvn-geel);
	border: 3px solid #000;
	transform: rotate(-45deg);
	box-sizing: border-box;
}
.cv-netwerk__cluster {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(46, 92, 169, .25);
}
.cv-netwerk__cluster span {
	display: grid;
	place-items: center;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 50%;
	background: var(--cvn-blauw);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

@media only screen and (max-width: 999px) {
	.cv-netwerk__body { grid-template-columns: 1fr; height: auto; }
	.cv-netwerk__kaart { height: 420px; order: -1; }
	.cv-netwerk__lijst { max-height: 420px; }
	.cv-netwerk__filters select { flex: 1 1 200px; }
}
@media only screen and (max-width: 690px) {
	.cv-netwerk__filters input[type="search"],
	.cv-netwerk__filters select,
	.cv-netwerk__buurt { flex: 1 1 100%; }
}
