/**
 * Kotmap front-end styling.
 * Bewust minimaal/functioneel: layout & sfeer doe jij met ACSS.
 * Alle classes zijn overschrijfbaar.
 */

/* ============ Kaart ============ */
/* .kotmap volgt standaard de hoogte van zijn container (height 100%). Bepaal de
   hoogte dus op de div eromheen, of geef de shortcode een vaste hoogte mee
   (bv. [kotmap height="600px"]). De min-height is enkel een vangnet als de
   container geen hoogte heeft. */
.kotmap { position: relative; width: 100%; height: 100%; }

.kotmap-canvas {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: 10px;
	overflow: hidden;
}

/* Koten-marker ("€ 450") */
.kotmap-marker {
	display: inline-block;
	padding: 6px 10px;
	background: #ffffff;
	color: #111827;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transform: scale(1);
	transform-origin: center bottom;
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
/* Hover/actief: subtiele schaal + zwart (z-index naar voren regelt JS). */
.kotmap-marker:hover,
.kotmap-marker.kotmap-marker--active {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
.kotmap-marker:hover,
.kotmap-marker.kotmap-marker--active,
.kotmap-marker.kotmap-marker--selected {
	background: #111827;
	color: #ffffff;
	border-color: #111827;
}
.kotmap-marker.kotmap-marker--selected { transform: scale(1.06); }

/* Scholen-laag: icoon (11×11) + afgekapte naam, aparte pill. */
.kotmap-school {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: #ffffff;
	color: #374151;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: default;
	transform: scale(1);
	transform-origin: center bottom;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kotmap-school:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}
.kotmap-school__icon {
	width: 11px;
	height: 11px;
	max-width: 11px;
	max-height: 11px;
	object-fit: contain;
	display: block;
	flex: 0 0 auto;
}
.kotmap-school__name { display: inline-block; }

/* ============ Popup (card boven de pill, met animaties) ============ */
/* De overlay-wrap doet enkel de positionering boven de marker (transparant);
   de zichtbare card + animaties zitten op de lagen erbinnen. */
.kotmap-popup-overlay {
	transform: translate(-50%, calc(-100% - 30px));
	width: 260px;
	max-width: 86vw;
	cursor: default;
}
.kotmap-popup-overlay img { max-width: 100%; height: auto; }

/* Entry/exit: snappy translate + fade, alsof de card uit de pill komt. */
.kotmap-popup-anim {
	opacity: 0;
	transform: translateY(16px) scale(0.92);
	transform-origin: center bottom;
	transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.kotmap-popup-overlay.is-open .kotmap-popup-anim {
	opacity: 1;
	transform: none;
}

/* Float: subtiel wiegen links↔rechts met lichte kanteling in de bewegingsrichting. */
.kotmap-popup-float {
	background: #ffffff;
	border-radius: 14px;
	will-change: transform;
	transform-origin: center center;
	animation: kotmap-float 7s ease-in-out infinite;
}
@keyframes kotmap-float {
	0%   { transform: translateX(0) rotate(0deg);       box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 30px rgba(60, 110, 255, 0.08); }
	25%  { transform: translateX(-6px) rotate(-2deg);   box-shadow: 0 13px 30px rgba(0, 0, 0, 0.21), 0 0 31px rgba(60, 110, 255, 0.1); }
	50%  { transform: translateX(0) rotate(0deg);       box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), 0 0 32px rgba(255, 150, 90, 0.1); }
	75%  { transform: translateX(6px) rotate(2deg);     box-shadow: 0 13px 30px rgba(0, 0, 0, 0.21), 0 0 31px rgba(255, 150, 90, 0.1); }
	100% { transform: translateX(0) rotate(0deg);       box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 30px rgba(60, 110, 255, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
	.kotmap-popup-float { animation: none; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); }
	.kotmap-popup-anim { transition: opacity 0.15s ease; }
}

.kotmap-popup-body {
	position: relative;
	z-index: 1;
	border-radius: 14px;
	overflow: hidden;
	max-height: 72vh;
	overflow-y: auto;
}
.kotmap-popup-missing { padding: 14px 16px; font-size: 13px; color: #b32d2e; }

.kotmap-error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 320px;
	padding: 20px;
	text-align: center;
	color: #b32d2e;
	background: #fef2f2;
	border-radius: 10px;
}

/* ============ Resultaten-kaarten ============ */
/* De plugin raakt je kaart-styling NIET aan. Het enige wat er gebeurt is
   tonen/verbergen (display) voor het filteren, en een CSS 'order' wanneer je
   expliciet sorteert. Layout/opmaak van .kot-loop-results doe jij (ACSS-grid). */

/* ============ Filtercontrols (functioneel; stylen doe jij) ============ */
.kot-filter { display: block; }
.kot-filter__label { display: block; font-weight: 600; margin-bottom: 6px; }

/* Pills */
.kot-filter--pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kot-pill {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: #fff;
	color: inherit;
	padding: 7px 14px;
	border-radius: 999px;
	font: inherit;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.kot-pill:hover { border-color: rgba(0, 0, 0, 0.4); }
.kot-pill.is-active,
.kot-pill[aria-pressed="true"] {
	background: #111827;
	border-color: #111827;
	color: #fff;
}

/* Checkboxes */
.kot-filter--checkboxes { display: flex; flex-direction: column; gap: 8px; }
.kot-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* Dual-range slider (werkt ook in een verborgen modal: percentage-based) */
.kot-filter--range { display: block; }
.kot-range {
	position: relative;
	height: 28px;
	margin: 6px 0 4px;
}
.kot-range__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.14);
	border-radius: 999px;
}
.kot-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #111827;
	border-radius: 999px;
}
.kot-range__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.kot-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #111827;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
.kot-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #111827;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
.kot-range__input::-webkit-slider-runnable-track { background: none; }
.kot-range__input::-moz-range-track { background: none; }
.kot-range__values { display: flex; gap: 12px; }
.kot-range__field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; }
.kot-range__num { width: 90px; padding: 6px 8px; }

/* Zoekveld */
.kot-search { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 8px; font: inherit; }

/* Sorteren */
.kot-sort { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 8px; font: inherit; }

/* Teller */
.kot-count { font-variant-numeric: tabular-nums; }

/* Actieve-filter-chips */
.kot-active { display: flex; flex-wrap: wrap; gap: 8px; }
.kot-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: #f3f4f6;
	border-radius: 999px;
	font: inherit;
	cursor: pointer;
}
.kot-chip__x { font-size: 15px; line-height: 1; opacity: 0.6; }
.kot-chip:hover .kot-chip__x { opacity: 1; }

/* Reset */
.kot-reset {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	padding: 0;
}

/* ============ Genummerde pagination ============ */
.kot-pagination { display: flex; align-items: center; gap: 6px; justify-content: center; }
.kot-page {
	appearance: none;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	color: inherit;
	border-radius: 999px;
	font: inherit;
	cursor: pointer;
	transition: background 0.12s ease;
}
.kot-page:hover { background: rgba(0, 0, 0, 0.06); }
.kot-page.is-active {
	background: #111827;
	color: #fff;
}
.kot-page--ctrl { font-size: 20px; line-height: 1; }
.kot-page:disabled { opacity: 0.35; cursor: default; }
.kot-page:disabled:hover { background: none; }
.kot-page--gap { cursor: default; }
.kot-page--gap:hover { background: none; }

/* ============ Cluster-pill ("X koten") ============ */
/* Krijgt automatisch de .kotmap-marker-look (witte pill); dit is enkel de
   extra hook zodat je 'm desgewenst apart kan stylen. */
.kotmap-cluster { font-weight: 800; }

/* ============ Filter-knop met badge (.filter-counter) ============ */
/* Zet de class .filter-counter op je eigen knop die de filters opent.
   De plugin plaatst er een telbadge in (verschijnt enkel bij ≥ 1 actieve
   filter; verdwijnt vanzelf bij 0). De .has-filters-class komt erbij zodra
   er filters actief zijn, voor eventuele eigen styling. */
.filter-counter { position: relative; border: 2px solid #000; }
.filter-counter__badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(40%, -40%);
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* ============ Floating knoppen op de kaart (glass) ============ */
/* "Zoek dit gebied" en "Zoek dichtstbijzijnde koten" — zelfde plek (bovenaan,
   gecentreerd) en zelfde glass-stijl; nooit samen zichtbaar. */
.kotmap-area,
.kotmap-nearest {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 16px 11px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	color: #111827;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.kotmap-area:hover,
.kotmap-nearest:hover {
	background: rgba(17, 24, 39, 0.55);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.kotmap-area[hidden],
.kotmap-nearest[hidden] { display: none; }

/* ============ Uitgelichte koten: gouden 3D-pill ============ */
.kotmap-marker--featured {
	background: linear-gradient(180deg, #f9dd7d 0%, #e6b422 48%, #b9820c 100%);
	color: #ffffff;
	border: 1.5px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.kotmap-marker--featured:hover,
.kotmap-marker--featured.kotmap-marker--active,
.kotmap-marker--featured.kotmap-marker--selected {
	background: linear-gradient(180deg, #ffe79a 0%, #e9b21f 45%, #9c6c08 100%);
	color: #ffffff;
	border-color: #ffffff;
}

/* ============ Reeds aangeklikt: 'bezocht'-tint ============ */
/* Wint van zowel de witte als de gouden uitgelichte pill in ruststaat (na de
   featured-regels geplaatst, gelijke specificity → laatste wint). Hover en
   geselecteerd (specificity 0,2,0) zijn dominanter en blijven donker/goud. */
.kotmap-marker--visited,
.kotmap-marker--featured.kotmap-marker--visited {
	background: var(--secondary-ultra-light, #eef1f6);
	color: #6b7280;
	border-color: rgba(0, 0, 0, 0.18);
	text-shadow: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	opacity: 0.85;
}

/* ============ Skeleton (placeholder terwijl de kaart laadt) ============ */
.kotmap-skeleton {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: linear-gradient(100deg, #eceff3 30%, #f6f8fa 50%, #eceff3 70%);
	background-size: 200% 100%;
	animation: kotmap-skeleton 1.2s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes kotmap-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ============ Toegankelijkheid: focus-ring op pills ============ */
.kotmap-marker:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.6);
	outline-offset: 2px;
}

/* ============ Marker-enter (verschijnt na filteren) ============ */
@keyframes kotmap-marker-in {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}
.kotmap-marker--enter { animation: kotmap-marker-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1.2); }

/* ============ Loading-feedback (filter-knop + teller) ============ */
.kotmap-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.75;
}
.kotmap-loading::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: kotmap-spin 0.7s linear infinite;
}
@keyframes kotmap-spin { to { transform: rotate(360deg); } }
.kot-count.is-loading { opacity: 0.45; }

/* ============ Prijs-histogram (boven de slider) ============ */
.kot-range__hist {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 40px;
	margin-bottom: 6px;
	padding: 0 2px;
}
.kot-range__bar {
	flex: 1 1 0;
	min-width: 2px;
	background: rgba(17, 24, 39, 0.15);
	border-radius: 3px 3px 0 0;
	transition: background 0.12s ease;
}
.kot-range__bar.is-active { background: rgba(17, 24, 39, 0.55); }

/* ============ Filter-zoekveld (bv. stad-zoekveld) ============ */
.kot-filter__search {
	flex: 1 1 100%;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
	padding: 8px 12px;
	font: inherit;
	font-size: 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	outline: none;
}
.kot-filter__search:focus { border-color: rgba(17, 24, 39, 0.5); }

@media (prefers-reduced-motion: reduce) {
	.kotmap-skeleton,
	.kotmap-marker--enter,
	.kotmap-loading::after { animation: none; }
}