/* BG Afdelings map - map and list. Brand #da071f, hover #b20619. */

.bg-afd {
	--bg-afd-brand: #da071f;
	--bg-afd-brand-hover: #b20619;
	--bg-afd-ink: #1a1a1a;
	--bg-afd-muted: #6b7280;
	--bg-afd-hair: #e5e7eb;
	--bg-afd-flade: #ffffff;
	--bg-afd-groen: #1f9d55;
	--bg-afd-hoejde: 620px;
}

.bg-afd__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* List left, map right - as on the sibling build. */
.bg-afd--med-kort {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

.bg-afd--med-kort .bg-afd__panel {
	height: var(--bg-afd-hoejde);
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.bg-afd__kort {
	height: var(--bg-afd-hoejde);
	border: 1px solid var(--bg-afd-hair);
	border-radius: 10px;
	background: #eef0f2;
	/* Leaflet paints panes larger than the frame; this keeps them inside it. */
	overflow: hidden;
	/*
	 * Leaflet gives its panes z-index 400 and its controls 1000, and those escape into the
	 * page - the sticky header here sits at 999, so the zoom buttons rendered on top of it.
	 * position + z-index: 0 opens a stacking context, which scopes every one of Leaflet's
	 * values inside this box; isolation says the same thing explicitly for browsers that
	 * would otherwise skip it. Do not remove one without the other.
	 */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/* ---------------------------------------------------------------- search */

.bg-afd__soeg {
	display: flex;
	gap: 8px;
}

.bg-afd__soegefelt {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--bg-afd-hair);
	border-radius: 8px;
	background: var(--bg-afd-flade);
	color: var(--bg-afd-ink);
	/* 16px minimum: iOS Safari zooms the viewport on focus below that, and never zooms back. */
	font-size: 16px;
	line-height: 1.4;
}

.bg-afd__soegefelt:focus {
	outline: 2px solid var(--bg-afd-brand);
	outline-offset: 1px;
	border-color: var(--bg-afd-brand);
}

.bg-afd__soegeknap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	border: 0;
	border-radius: 8px;
	background: var(--bg-afd-brand);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bg-afd__soegeknap:hover,
.bg-afd__soegeknap:focus {
	background: var(--bg-afd-brand-hover);
}

.bg-afd__soegeknap:focus-visible {
	outline: 2px solid var(--bg-afd-brand);
	outline-offset: 2px;
}

.bg-afd__soeg.is-soeger .bg-afd__soegeknap {
	opacity: 0.6;
	pointer-events: none;
}

.bg-afd__naermeste {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #eaf6ef;
	color: #14663a;
	font-size: 14.5px;
	font-weight: 600;
	text-align: center;
}

.bg-afd__besked {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f7f8f9;
	color: var(--bg-afd-muted);
	font-size: 14px;
}

/* ------------------------------------------------------------------ list */

.bg-afd__liste {
	list-style: none;
	margin: 0;
	padding: 2px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bg-afd--med-kort .bg-afd__liste {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Without the map the list works better in columns and needs no height cap. */
.bg-afd:not(.bg-afd--med-kort) .bg-afd__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.bg-afd__item {
	background: var(--bg-afd-flade);
	border: 1px solid var(--bg-afd-hair);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0;
	scroll-margin-top: 8px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bg-afd--med-kort .bg-afd__item {
	cursor: pointer;
}

/* Hover is a preview only - it never changes what is selected. */
.bg-afd--med-kort .bg-afd__item:hover {
	border-color: #d6d9dd;
	background: #fbfbfc;
}

/* Selection is the stronger state and survives hovering elsewhere. */
.bg-afd__item.is-aktiv,
.bg-afd--med-kort .bg-afd__item.is-aktiv:hover {
	background: #fdf2f3;
	border-color: var(--bg-afd-brand);
}

.bg-afd__navn {
	margin: 0 0 3px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--bg-afd-ink);
}

.bg-afd__adresse {
	margin: 0;
	font-size: 14px;
	color: var(--bg-afd-muted);
}

.bg-afd__afstand {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--bg-afd-brand);
}

.bg-afd__afstand::before {
	content: "\2197";
	margin-right: 4px;
}

.bg-afd__badge {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bg-afd-brand);
}

.bg-afd__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bg-afd-brand);
	text-decoration: none;
}

.bg-afd__link:hover,
.bg-afd__link:focus {
	color: var(--bg-afd-brand-hover);
	text-decoration: underline;
}

.bg-afd__link:focus-visible {
	outline: 2px solid var(--bg-afd-brand);
	outline-offset: 2px;
}

.bg-afd__kilde {
	flex: 0 0 auto;
	margin: 0;
	padding: 2px 2px 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bg-afd-muted);
}

.bg-afd__kilde a {
	color: inherit;
	text-decoration: underline;
}

.bg-afd__kilde a:hover,
.bg-afd__kilde a:focus {
	color: var(--bg-afd-brand);
}

/* --------------------------------------------------------------- markers */

/* Round logo marker - same as the MotorAPI booking plugin so both maps match. */
.bg-afd-marker-wrap {
	background: transparent !important;
	border: 0 !important;
}

.bg-afd-marker {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-image: url("../img/bilglasgruppen-sort-logo-150x150-white-bg.png");
	background-size: cover;
	background-position: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
	border: 2px solid #fff;
}

.leaflet-marker-icon.bg-afd-marker-wrap:active .bg-afd-marker {
	transform: scale(0.96);
}

.leaflet-marker-icon.bg-afd-marker-wrap.is-selected .bg-afd-marker {
	box-shadow:
		0 0 0 3px rgba(218, 7, 31, 0.25),
		0 8px 22px rgba(218, 7, 31, 0.15);
	border-color: var(--bg-afd-brand);
}

.bg-afd-popup {
	font-size: 14px;
	line-height: 1.45;
}

.bg-afd-popup strong {
	display: block;
	margin-bottom: 2px;
}

.bg-afd-popup a {
	color: var(--bg-afd-brand);
	font-weight: 600;
}

/* Map only (liste="nej"): fills the slot Open User Map had on the front page - full width, 450px, square. */
.bg-afd--kun-kort .bg-afd__kort {
	height: 450px;
	border: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 1023px) {
	.bg-afd {
		--bg-afd-hoejde: 520px;
	}

	.bg-afd--med-kort {
		grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
	}
}

/* Phone: stacked, map first so the overview comes before the list. */
@media (max-width: 767px) {
	.bg-afd--med-kort {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bg-afd__kort {
		height: 340px;
		order: -1;
	}

	.bg-afd--kun-kort .bg-afd__kort {
		height: 450px;
	}

	.bg-afd--med-kort .bg-afd__panel {
		height: auto;
	}

	.bg-afd--med-kort .bg-afd__liste {
		flex: 0 0 auto;
		overflow-y: visible;
	}

	.bg-afd--med-kort .bg-afd__item {
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-afd__item,
	.bg-afd__soegeknap {
		transition: none;
	}
}