/*
Copyright (c) 2026 Ylab, www.ylab.nl
*/
html{color:#000;background:#fff,overflow-y:scroll;font-size:100%;min-width:320px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-box-sizing:border-box;box-sizing:border-box}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,figure{margin:0;padding:0}
abbr,acronym{border:0;font-variant:normal}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}
caption,th{text-align:left}
del,ins{text-decoration:none}
fieldset,img{border:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
legend{color:#000}
ul,ol{list-style:none}
q:before,q:after{content:''}
sub,sup{vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a:focus{outline:0}
section,article,footer,header,nav,aside,figure{display:block}
select,input{background:none}
textarea{resize:none}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
a{text-decoration:none}
b,strong{font-weight:bold}
i,em{font-style:italic}

/* ── Kaartenpagina ──────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; }

#main-map {
	width: 100%;
	height: 100vh;
	background: #484848;
}

.kaart-panel {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.76);
	color: #fff;
	padding: 9px 40px 9px 16px;
	border-radius: 5px;
	font: bold 14px/1.4 sans-serif;
	z-index: 200;
	white-space: nowrap;
	max-width: calc(100vw - 48px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	gap: 10px;
}

#kaart-naam {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40vw;
}

#kaart-opacity {
	width: 90px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: rgba(255,255,255,0.85);
	vertical-align: middle;
}


.kaart-panel-verborgen {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-10px);
}

.kaart-sluiten {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	background: none;
	border: none;
	border-left: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kaart-sluiten:hover { background: rgba(255,255,255,0.15); }

/* ── Locatieknop ────────────────────────────────────────────────── */
.map-buttons {
	position: fixed;
	right: 15px;
	bottom: 30px;
	z-index: 200;
}

.button {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid #e0e0e0;
	box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
	background-color: white;
	display: block;
	margin-bottom: 10px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.button.location {
	background-image: url('/img/location.svg');
}

.button.selected {
	background-color: #4B97E7;
	border: 1px solid white;
}

.button.location.selected {
	background-image: url('/img/location-sel.svg');
}

.button.location.selected.nofollow {
	background-color: #999;
}