/* AV Locator — front-end.
 * Layout: kaart over de volle breedte, zwevend paneel eroverheen (overlay).
 * Huisstijl via CSS custom properties; het thema kan alles overschrijven:
 * --avl-primary, --avl-accent, --avl-bg, --avl-text, --avl-radius, --avl-font
 *
 * NB: op interactieve elementen staan bewuste, expliciete declaraties
 * (deels !important) zodat knop- en linkstijlen van het actieve thema
 * niet in de widget doorlekken.
 */

.avl {
	--avl-primary: #111111;
	--avl-accent: #111111;
	--avl-bg: #ffffff;
	--avl-text: #1f1f1f;
	--avl-radius: 14px;
	--avl-muted: color-mix( in srgb, var( --avl-text ) 52%, transparent );
	--avl-line: color-mix( in srgb, var( --avl-text ) 10%, transparent );
	--avl-hover: color-mix( in srgb, var( --avl-primary ) 6%, var( --avl-bg ) );
	--avl-font: inherit;

	position: relative;
	width: 100%;
	min-height: 560px;
	font-family: var( --avl-font );
	font-size: 16px;
	line-height: 1.5;
	color: var( --avl-text );
	border-radius: var( --avl-radius );
	overflow: hidden;
	background: var( --avl-bg );
}

.avl *,
.avl *::before,
.avl *::after { box-sizing: border-box; }

/* Neutraliseer veelvoorkomende themastijlen binnen de widget. */
.avl button {
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	line-height: inherit;
}
.avl a { text-decoration: none; box-shadow: none; }
.avl p { margin: 0; }
.avl h2, .avl h3, .avl h4 { margin: 0; padding: 0; border: none; }

/* ---------- kaart: volledige breedte ---------- */

.avl__map {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: color-mix( in srgb, var( --avl-text ) 5%, var( --avl-bg ) );
}

/* ---------- zwevend paneel ---------- */

.avl__panel {
	position: absolute;
	top: 20px;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 372px;
	max-width: calc( 100% - 40px );
	background: var( --avl-bg );
	border-radius: var( --avl-radius );
	border: 1px solid var( --avl-line );
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.12 );
	overflow: hidden; /* nooit een horizontale scrollbalk in het paneel */
}

.avl__head,
.avl__list,
.avl__detail {
	overflow-x: hidden;
	max-width: 100%;
}

.avl .avl__search input[type="search"],
.avl .avl__country,
.avl .avl__radius {
	max-width: 100%;
}

.avl__head {
	flex: 0 0 auto;
	padding: 24px 22px 16px;
	border-bottom: 1px solid var( --avl-line );
	background: var( --avl-bg );
}

.avl__title {
	margin: 0 0 16px !important;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: var( --avl-text );
}

.avl__search {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.avl .avl__search input[type="search"] {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 11px 14px;
	font: inherit;
	font-size: 0.95rem;
	color: var( --avl-text ) !important;
	background: var( --avl-bg ) !important;
	border: 1.5px solid var( --avl-line );
	border-radius: calc( var( --avl-radius ) * 0.55 );
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.avl .avl__search input[type="search"]:focus {
	outline: none;
	border-color: var( --avl-accent );
}

.avl .avl__geo {
	flex: 0 0 46px;
	height: auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1;
	color: #fff !important;
	background: var( --avl-primary ) !important;
	border: none;
	border-radius: calc( var( --avl-radius ) * 0.55 );
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.avl .avl__geo:hover { opacity: 0.85; }
.avl .avl__geo.is-busy { animation: avl-pulse 1s infinite; }

@keyframes avl-pulse {
	50% { opacity: 0.4; }
}

.avl__filters {
	display: flex;
	gap: 8px;
}

.avl .avl__country,
.avl .avl__radius {
	flex: 1;
	min-width: 0;
	width: 100%;
	margin: 10px 0 0;
	padding: 9px 12px;
	font: inherit;
	font-size: 0.9rem;
	color: var( --avl-text ) !important;
	background: var( --avl-bg ) !important;
	border: 1.5px solid var( --avl-line );
	border-radius: calc( var( --avl-radius ) * 0.55 );
	box-shadow: none;
	cursor: pointer;
}

.avl .avl__country:focus,
.avl .avl__radius:focus {
	outline: none;
	border-color: var( --avl-accent );
}

/* Kenmerken-filter (chips) */
.avl__chips { margin-top: 6px; }

.avl-chiprow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.avl-chiprow__label {
	flex: 0 0 100%;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --avl-muted );
}

.avl .avl-chip {
	padding: 6px 13px;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.3;
	color: var( --avl-text ) !important;
	background: var( --avl-bg ) !important;
	border: 1.5px solid var( --avl-line );
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.avl .avl-chip:hover { border-color: var( --avl-muted ); }

.avl .avl-chip.is-active {
	color: #fff !important;
	background: var( --avl-primary ) !important;
	border-color: var( --avl-primary );
}

/* Kenmerk-badges in het detailpaneel */
.avl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 6px;
}

.avl-tag {
	padding: 4px 11px;
	font-size: 0.76rem;
	font-weight: 500;
	color: var( --avl-text );
	background: color-mix( in srgb, var( --avl-text ) 6%, var( --avl-bg ) );
	border-radius: 999px;
}

.avl__count {
	margin: 14px 0 0 !important;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --avl-muted );
}

/* Melding: locatie is een benadering (IP-schatting). */
.avl__hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0 !important;
	padding: 8px 10px;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var( --avl-text );
	background: color-mix( in srgb, var( --avl-primary ) 7%, var( --avl-bg ) );
	border-left: 3px solid var( --avl-primary );
	border-radius: 0 8px 8px 0;
}

.avl__hint[hidden] { display: none; }

.avl .avl__hint-close {
	flex: none;
	margin-left: auto;
	padding: 0 2px !important;
	border: none !important;
	background: transparent !important;
	color: var( --avl-muted ) !important;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
}

.avl .avl__hint-close:hover { color: var( --avl-text ) !important; }

/* ---------- kaartstijl: grijstinten ----------
 * Alleen de tegels worden gefilterd (tile pane); markers, clusters en
 * het herkomst-punt behouden de huisstijlkleur. */
.avl--map-mono .leaflet-tile-pane { filter: grayscale( 1 ); }

/* ---------- lijst ---------- */

.avl__list {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var( --avl-bg );
	scrollbar-width: thin;
}

.avl .avl-item {
	display: flex;
	gap: 13px;
	width: 100%;
	min-height: 92px;
	padding: 16px 22px;
	font: inherit;
	font-size: 0.95rem;
	text-align: left;
	color: var( --avl-text ) !important;
	background: transparent !important;
	border: none;
	border-bottom: 1px solid var( --avl-line );
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.avl .avl-item:hover,
.avl .avl-item:focus-visible {
	background: var( --avl-hover ) !important;
	outline: none;
}

.avl .avl-item:last-child { border-bottom: none; }

.avl-item__dot {
	flex: 0 0 10px;
	height: 10px;
	margin-top: 7px;
	border-radius: 50%;
	background: var( --avl-primary );
}

.avl-item__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.avl-item__name {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --avl-text );
}

.avl-item__dist {
	flex-shrink: 0;
	font-weight: 500;
	font-size: 0.8rem;
	color: var( --avl-muted );
	white-space: nowrap;
}

.avl-item__addr {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var( --avl-text );
}

.avl-item__addr--muted {
	color: var( --avl-muted );
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.avl-item__hours {
	margin-top: 4px;
	font-size: 0.83rem;
	color: var( --avl-text );
}
.avl-item__hours--closed { color: var( --avl-muted ); }

/* Kaart → lijst: item licht op wanneer de marker gehoverd wordt. */
.avl .avl-item--hl { background: var( --avl-hover ) !important; }

/* Live open/gesloten-status. */
.avl-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 5px;
	font-size: 0.82rem;
	font-weight: 500;
}

.avl-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.avl-badge--open { color: var( --avl-open, #178a4c ); }
.avl-badge--closed { color: var( --avl-muted ); }

.avl__empty {
	padding: 32px 22px;
	color: var( --avl-muted );
}

/* ---------- detail ---------- */

.avl__detail {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 22px 30px;
	background: var( --avl-bg );
}

.avl .avl-detail__back {
	display: inline-block;
	margin: 0 0 16px;
	padding: 0;
	font: inherit;
	font-size: 0.83rem;
	font-weight: 600;
	color: var( --avl-accent ) !important;
	background: transparent !important;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.avl .avl-detail__back:hover { opacity: 0.7; }

.avl-detail__img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	margin: 0 0 14px;
	border-radius: calc( var( --avl-radius ) * 0.55 );
}

.avl-detail__status { margin: 2px 0 0; }

/* Mededeling per locatie (vakantie, parkeren, tijdelijke info). */
.avl-note {
	margin: 12px 0 2px !important;
	padding: 10px 14px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var( --avl-text );
	background: color-mix( in srgb, var( --avl-accent ) 9%, var( --avl-bg ) );
	border-left: 3px solid var( --avl-accent );
	border-radius: 0 calc( var( --avl-radius ) * 0.45 ) calc( var( --avl-radius ) * 0.45 ) 0;
}

.avl-detail__desc {
	margin: 4px 0 0 !important;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var( --avl-text );
}

.avl-detail__name {
	margin: 0 0 6px !important;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var( --avl-text );
}

.avl-detail__addr {
	margin: 0 0 4px !important;
	line-height: 1.55;
	color: var( --avl-text );
}

.avl-detail__dist {
	margin: 0 !important;
	font-size: 0.8rem;
	color: var( --avl-muted );
}

.avl-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0;
}

.avl a.avl-btn {
	display: inline-block;
	padding: 11px 18px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var( --avl-text ) !important;
	background: var( --avl-bg ) !important;
	border: 1.5px solid var( --avl-text );
	border-radius: calc( var( --avl-radius ) * 0.55 );
	transition: opacity 0.15s ease;
}

.avl a.avl-btn:hover { opacity: 0.75; }

.avl a.avl-btn--primary {
	color: #fff !important;
	background: var( --avl-primary ) !important;
	border-color: var( --avl-primary );
}

.avl-detail__sub {
	margin: 22px 0 8px !important;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --avl-muted );
}

.avl-detail__hours {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: transparent;
}

.avl-detail__hours th,
.avl-detail__hours td {
	padding: 5px 0;
	border: none;
	background: transparent;
}

.avl-detail__hours th {
	font-weight: 400;
	text-align: left;
	color: var( --avl-muted );
}

.avl-detail__hours td { text-align: right; color: var( --avl-text ); }

.avl-detail__hours .avl-detail__today th,
.avl-detail__hours .avl-detail__today td {
	font-weight: 700;
	color: var( --avl-text );
}

/* ---------- clusterbolletje (huisstijlkleur) ---------- */

.avl-cluster {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	background: var( --avl-primary, #111 );
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
}

/* ---------- mobiel: bottom sheet ---------- */

.avl__toggle { display: none; }

@media ( max-width: 780px ) {
	.avl { min-height: 78vh; }

	/* Lijstweergave: schermvullend paneel, kaart volledig verborgen. */
	.avl__panel {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		border-radius: 0;
		border: none;
		box-shadow: none;
	}

	/* Kaartweergave: kaart vrij, lijst als compacte bottom sheet. */
	.avl--map-view .avl__panel {
		top: auto;
		height: 34%;
		border-radius: var( --avl-radius ) var( --avl-radius ) 0 0;
		box-shadow: 0 -8px 30px rgba( 0, 0, 0, 0.16 );
	}

	/* Sleep-indicator bovenaan de sheet (alleen in kaartweergave). */
	.avl--map-view .avl__panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		transform: translateX( -50% );
		border-radius: 999px;
		background: var( --avl-line );
	}

	.avl__head { padding: 20px 20px 12px; }
	.avl__title { font-size: 1.15rem; margin-bottom: 12px !important; }

	/* In kaartweergave: compacte sheet — alleen de inhoud, geen zoekkop. */
	.avl--map-view .avl__title,
	.avl--map-view .avl__country,
	.avl--map-view .avl__hint,
	.avl--map-view .avl__count { display: none; }
	.avl--map-view .avl__head { padding: 16px 20px 12px; }

	.avl .avl__toggle {
		display: block;
		position: absolute;
		top: 14px;
		right: 14px;
		z-index: 3;
		padding: 10px 20px;
		font: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		color: #fff !important;
		background: var( --avl-primary ) !important;
		border: none;
		border-radius: 999px;
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
		cursor: pointer;
	}

	/* Grotere tap-targets onderweg. */
	.avl .avl-item { padding: 16px 20px; }
	.avl a.avl-btn { padding: 13px 20px; }

	/* Zoomknoppen verbergen op mobiel (knijpen om te zoomen); voorkomt
	   overlap met de kaart/lijst-knop. */
	.avl .leaflet-control-zoom { display: none; }
}