/* ==========================================================================
   DHB Klantenkaart
   Kaart van Nederland met alle beveiligde locaties, zoekpaneel en lijst.
   Alles geprefixt met dhbk- en afgebakend onder .dhbk, ook de Leaflet-
   aanpassingen, zodat een andere kaart op de site er niets van merkt.
   ========================================================================== */

.dhbk {
	--dhbk-bg: #161616;
	--dhbk-panel: rgba(22, 22, 22, .94);
	--dhbk-line: rgba(255, 255, 255, .08);
	--dhbk-line-sterk: rgba(255, 255, 255, .14);
	--dhbk-tekst: #F5F5F5;
	--dhbk-grijs: #9A9A9A;
	--dhbk-vaag: #5E5E5E;
	--dhbk-accent: #FF4400;
	--dhbk-accent-zacht: rgba(255, 68, 0, .14);
	--dhbk-accent-lijn: rgba(255, 68, 0, .45);
	--dhbk-paneel-b: 400px;
	--dhbk-hoogte: 720px;
	--dhbk-kop: 'Montserrat', system-ui, sans-serif;
	--dhbk-body: 'Poppins', system-ui, sans-serif;

	position: relative;
	width: 100%;
	height: var(--dhbk-hoogte);
	overflow: hidden;
	border-radius: 18px;
	background: var(--dhbk-bg);
	color: var(--dhbk-tekst);
	font-family: var(--dhbk-body);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit of
   het thema wint daarvan en kleurt de koppen ineens blauw. De wrapper
   staat er dubbel in, zodat deze regel zwaarder weegt dan de kit. De
   eigen kleuren hieronder hebben de wrapper ook gekregen en winnen weer
   van deze regel. */
.dhbk.dhbk h1,
.dhbk.dhbk h2,
.dhbk.dhbk h3,
.dhbk.dhbk h4,
.dhbk.dhbk h5,
.dhbk.dhbk h6 {
	color: inherit;
}




.dhbk * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.dhbk button,
.dhbk input {
	font: inherit;
	color: inherit;
}

.dhbk button {
	cursor: pointer;
	background: none;
	border: 0;
}

.dhbk-map {
	position: absolute;
	inset: 0;
	background: var(--dhbk-bg);
	z-index: 1;
}

/* ---------- Leaflet, afgebakend ---------- */
.dhbk .leaflet-tile-pane { filter: saturate(.6) brightness(.85); }
.dhbk .leaflet-container { font-family: var(--dhbk-body); background: var(--dhbk-bg); }
.dhbk .leaflet-control-attribution { background: rgba(22, 22, 22, .7) !important; color: var(--dhbk-vaag) !important; font-size: 10px; padding: 2px 8px; }
.dhbk .leaflet-control-attribution a { color: var(--dhbk-grijs) !important; }
.dhbk .leaflet-control-zoom { border: 1px solid var(--dhbk-line-sterk) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .5) !important; border-radius: 10px !important; overflow: hidden; }
.dhbk .leaflet-control-zoom a { background: var(--dhbk-panel) !important; color: var(--dhbk-tekst) !important; border-bottom: 1px solid var(--dhbk-line) !important; width: 38px !important; height: 38px !important; line-height: 38px !important; font-family: var(--dhbk-kop); font-weight: 600; }
.dhbk .leaflet-control-zoom a:hover { background: #222 !important; color: var(--dhbk-accent) !important; }
.dhbk .leaflet-bar a:last-child { border-bottom: 0 !important; }

.dhbk .leaflet-popup-content-wrapper {
	background: var(--dhbk-panel);
	color: var(--dhbk-tekst);
	border: 1px solid var(--dhbk-line-sterk);
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 0;
}

.dhbk .leaflet-popup-content { margin: 0; padding: 16px 18px 14px; min-width: 230px; line-height: 1.45; }
.dhbk .leaflet-popup-tip { background: var(--dhbk-panel); border: 1px solid var(--dhbk-line-sterk); }
.dhbk .leaflet-popup-close-button { color: var(--dhbk-grijs) !important; font-size: 20px !important; top: 8px !important; right: 10px !important; }
.dhbk .leaflet-popup-close-button:hover { color: var(--dhbk-tekst) !important; }

.dhbk-pop-sector { font-size: 12px; color: var(--dhbk-accent); font-weight: 500; margin-bottom: 2px; }
.dhbk-pop-naam { font-family: var(--dhbk-kop); font-weight: 700; font-size: 15px; line-height: 1.25; padding-right: 14px; }
.dhbk-pop-adres { color: var(--dhbk-grijs); font-size: 12.5px; margin-top: 4px; }
.dhbk-pop-sinds { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--dhbk-line); font-size: 12px; color: var(--dhbk-grijs); }
.dhbk-pop-sinds b { color: var(--dhbk-tekst); font-weight: 500; }

/* ---------- Paneel links ---------- */
.dhbk-paneel {
	position: absolute;
	z-index: 2;
	top: 16px;
	left: 16px;
	bottom: 16px;
	width: var(--dhbk-paneel-b);
	background: var(--dhbk-panel);
	border: 1px solid var(--dhbk-line-sterk);
	border-radius: 18px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dhbk-paneelkop { padding: 22px 22px 16px; border-bottom: 1px solid var(--dhbk-line); }

.dhbk-merk { display: block; margin-bottom: 18px; text-decoration: none; color: inherit; }
.dhbk-merk-logo { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; }
.dhbk-merk-terug { display: flex; align-items: center; gap: 12px; }
.dhbk-merk-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--dhbk-accent); display: grid; place-items: center; flex: none; }
.dhbk-merk-mark svg { width: 20px; height: 20px; }
.dhbk-merk-naam { display: block; font-family: var(--dhbk-kop); font-weight: 700; font-size: 13px; line-height: 1.2; }
.dhbk-merk-tag { display: block; font-size: 11.5px; color: var(--dhbk-grijs); }

.dhbk-titel { font-family: var(--dhbk-kop); font-weight: 800; font-size: 24px; line-height: 1.15; margin-bottom: 6px; }
.dhbk-titel span { color: var(--dhbk-accent); }
.dhbk-sub { color: var(--dhbk-grijs); font-size: 13px; }
.dhbk-sub b { color: var(--dhbk-tekst); font-weight: 600; }

.dhbk-zoekwrap { padding: 14px 16px 10px; border-bottom: 1px solid var(--dhbk-line); }
.dhbk-zoek { position: relative; }
.dhbk-zoek > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--dhbk-grijs); pointer-events: none; }

.dhbk-zoek input {
	width: 100%;
	height: 46px;
	padding: 0 40px 0 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--dhbk-line-sterk);
	outline: none;
	transition: border-color .15s, background .15s;
}

.dhbk-zoek input::placeholder { color: var(--dhbk-vaag); }
.dhbk-zoek input:focus { border-color: var(--dhbk-accent-lijn); background: rgba(255, 255, 255, .07); }

.dhbk-wis { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; color: var(--dhbk-grijs); display: none; place-items: center; }
.dhbk-wis:hover { background: rgba(255, 255, 255, .08); color: var(--dhbk-tekst); }
.dhbk-zoek.heeft-waarde .dhbk-wis { display: grid; }

.dhbk-lijstkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px 6px; font-size: 12px; color: var(--dhbk-grijs); }
.dhbk-lijstkop button { color: var(--dhbk-accent); font-weight: 500; font-size: 12px; }
.dhbk-lijstkop button:hover { text-decoration: underline; }

.dhbk-lijst {
	flex: 1;
	overflow-y: auto;
	padding: 4px 10px 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.dhbk-lijst::-webkit-scrollbar { width: 6px; }
.dhbk-lijst::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 6px; }

.dhbk-item {
	width: 100%;
	text-align: left;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 11px 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background .15s, border-color .15s;
}

.dhbk-item:hover { background: rgba(255, 255, 255, .045); }
.dhbk-item.is-actief { background: var(--dhbk-accent-zacht); border-color: var(--dhbk-accent-lijn); }
.dhbk-item:focus-visible { outline: 2px solid var(--dhbk-accent); outline-offset: -2px; }

.dhbk-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--dhbk-accent); box-shadow: 0 0 0 3px rgba(255, 68, 0, .18); flex: none; }
.dhbk-item.is-actief .dhbk-stip { box-shadow: 0 0 0 4px rgba(255, 68, 0, .3), 0 0 14px rgba(255, 68, 0, .6); }
.dhbk-naam { font-family: var(--dhbk-kop); font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.dhbk-meta { color: var(--dhbk-grijs); font-size: 12px; margin-top: 1px; }
.dhbk-meta em { font-style: normal; color: var(--dhbk-tekst); }

.dhbk-leeg { padding: 36px 22px; text-align: center; color: var(--dhbk-grijs); }
.dhbk-leeg b { display: block; color: var(--dhbk-tekst); font-family: var(--dhbk-kop); margin-bottom: 4px; }

.dhbk-paneelvoet { padding: 10px 22px 14px; border-top: 1px solid var(--dhbk-line); font-size: 11.5px; color: var(--dhbk-vaag); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dhbk-paneelvoet a { color: var(--dhbk-grijs); text-decoration: none; }
.dhbk-paneelvoet a:hover { color: var(--dhbk-accent); }

.dhbk-klap { display: none; }

/* ---------- Mobiel: paneel als sheet onderaan ---------- */
@media (max-width: 820px) {
	.dhbk { --dhbk-paneel-b: auto; }

	.dhbk-paneel {
		left: 10px;
		right: 10px;
		top: auto;
		bottom: 10px;
		height: 52%;
		border-radius: 18px 18px 16px 16px;
		transition: height .3s ease;
	}

	.dhbk-paneel.is-ingeklapt { height: 118px; }
	.dhbk-paneel.is-ingeklapt .dhbk-zoekwrap,
	.dhbk-paneel.is-ingeklapt .dhbk-lijstkop,
	.dhbk-paneel.is-ingeklapt .dhbk-lijst,
	.dhbk-paneel.is-ingeklapt .dhbk-paneelvoet { display: none; }

	.dhbk-paneelkop { padding: 14px 18px 12px; }
	.dhbk-merk { margin-bottom: 10px; }
	.dhbk-titel { font-size: 19px; }

	.dhbk-klap {
		display: grid;
		place-items: center;
		position: absolute;
		top: 8px;
		right: 14px;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		color: var(--dhbk-grijs);
		z-index: 3;
	}

	.dhbk-klap svg { width: 18px; height: 18px; transition: transform .3s; }
	.dhbk-paneel.is-ingeklapt .dhbk-klap svg { transform: rotate(180deg); }
	.dhbk .leaflet-bottom { bottom: calc(52% + 14px); }
	.dhbk.is-ingeklapt .leaflet-bottom { bottom: 130px; }
}

@media (prefers-reduced-motion: reduce) {
	.dhbk *,
	.dhbk *::before,
	.dhbk *::after { transition: none !important; }
}