/* Klubber · Nærmeste – søg efter klubsteder tættest på brugeren */

/*
 * BEM vk-klubber2026 – alle klasser (Find en klub).
 * Se BRICKS-BEM-VK-KLUBBER2026.md for struktur og mapping.
 * De fleste layout-/visuelle regler ligger i Bricks (reference-JSON _cssCustom / globalClasses).
 * Her er klasserne defineret så de findes i pluginet; tilpas i Bricks eller override her.
 */
.vk-klubber2026 { }
.vk-klubber2026__header { }
.vk-klubber2026__filter { }
.vk-klubber2026__filter-container { }
.vk-klubber2026__filter-wrapper { }
.vk-klubber2026__filter-dropdowns { }
.vk-klubber2026__filter-box { }
.vk-klubber2026__filter-groups { }
.vk-klubber2026__filter-group { }
.vk-klubber2026__filter-label { }
/* Dropdown: I Bricks er klassen på selve <select>, ikke på en wrapper. Derfor target vi .vk-klubber2026__filter-select direkte (og _ variant). Bricks sætter background-color: transparent + pil som background-image; kun background-color overrides, pilen bevares. */
.vk-klubber2026__filter-select,
.vk-klubber2026_filter-select,
select.vk-klubber2026__filter-select,
select.vk-klubber2026_filter-select {
	background-color: #fff !important;
	color: inherit;
}
.vk-klubber2026__filter-select option,
.vk-klubber2026_filter-select option {
	background-color: #fff !important;
	color: inherit;
}
.vk-klubber2026__filter-select option:hover,
.vk-klubber2026__filter-select option:focus,
.vk-klubber2026__filter-select option:checked,
.vk-klubber2026_filter-select option:hover,
.vk-klubber2026_filter-select option:focus,
.vk-klubber2026_filter-select option:checked {
	background-color: var(--vk-selection-bg, #e8e8e8) !important;
	color: inherit;
}
.vk-klubber2026__filter-select:focus,
.vk-klubber2026_filter-select:focus {
	outline: none;
}
.vk-klubber2026__summary { }
.vk-klubber2026__summary-box { }
.vk-klubber2026__summary-box-wrapper { }
.vk-klubber2026__summary-nowrap { }
.vk-klubber2026__summary-text { }
.vk-klubber2026__summary-count-wrap { }
.vk-klubber2026__summary-count-box { }
.vk-klubber2026__count { }
.vk-klubber2026__sort-reset { }
.vk-klubber2026__afstandspills-wrapper { }
.vk-klubber2026__no-results { }
.vk-klubber2026__reset-wrap { }
.vk-klubber2026__reset-btn { }
.vk-klubber2026__list { }
.vk-klubber2026__kort { }
.vk-klubber2026__kort-header { }
.vk-klubber2026__kort-media { }
.vk-klubber2026__kort-icon { }
.vk-klubber2026__kort-meta { }
.vk-klubber2026__kort-forloeb { }
.vk-klubber2026__kort-klassetrin { }
.vk-klubber2026__kort-title { }
.vk-klubber2026__kort-body { }
.vk-klubber2026__kort-address { }
.vk-klubber2026__kort-distance { }
.vk-klubber2026__kort-distance-text { }
.vk-klubber2026__kort-distance-value { }
.vk-klubber2026__kort-distance-badge { }
.vk-klubber2026__kort-forloeb-body { }
.vk-klubber2026__kort-klassetrin-body { }
.vk-klubber2026__kort-kommune { }
.vk-klubber2026__kort-region { }
.vk-klubber2026__kort-list { }
.vk-klubber2026__kort-list-item { }
.vk-klubber2026__kort-label { }
/* Modifiers (brug efter behov) */
.vk-klubber2026__kort--visible { }
.vk-klubber2026__no-results--active { }

.klubber-nearby-v4 {
	--klubber-nearby-v4-gap: 1rem;
	--klubber-nearby-v4-radius: 8px;
	--klubber-nearby-v4-kort-bg: #f8f9fa;
	--klubber-nearby-v4-kort-border: #e0e0e0;
	--klubber-nearby-v4-kort-hover: #e8e8e8;
	margin: 1rem 0;
}

.klubber-nearby-v4-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klubber-nearby-v4-gap);
	align-items: center;
	margin-bottom: var(--klubber-nearby-v4-gap);
}

/* Wrapper som fjerde filter-gruppe: samme række som Forløb, Region, Klassetrin – sæt fx grid-template-columns til 4 kolonner på .vk-klubliste-03__filter-grupper i Bricks */
.klubber-nearby-v4-integration-gruppe {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Knapper og input til [klubber_nearby_geo] og [klubber_nearby_postnummer] styles i Bricks – brug BRICKS-CSS-geo-og-postnummer.txt */

/* [klubber_nearby_v4_sort_button]: Direkte på knappen – fjern altid egen baggrund og evt. pseudo-elementer (tema/browser). */
button.klubber-nearby-v4-sort-btn[data-klubber-nearby-v4-sort-btn],
button.klubber-nearby-v4-sort-btn[data-klubber-nearby-v4-sort-btn] {
	background: transparent !important;
	background-color: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border: none !important;
	box-shadow: none !important;
}
button.klubber-nearby-v4-sort-btn[data-klubber-nearby-v4-sort-btn]::before,
button.klubber-nearby-v4-sort-btn[data-klubber-nearby-v4-sort-btn]::after {
	display: none !important;
	background: none !important;
}

/* Når Shortcode-blokken har .btn--primary eller .btn--primary-light: indre knap uden egen ramme, arver wrappens udtryk. */
.btn--primary-light.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn,
.btn--primary-light .klubber-nearby-v4-sort-btn,
.btn--primary.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn,
.btn--primary .klubber-nearby-v4-sort-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	width: 100%;
	text-align: inherit;
}
.btn--primary-light.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn:hover,
.btn--primary-light .klubber-nearby-v4-sort-btn:hover,
.btn--primary.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn:hover,
.btn--primary .klubber-nearby-v4-sort-btn:hover {
	background: transparent !important;
	background-color: transparent !important;
}
.btn--primary-light.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn:focus,
.btn--primary-light .klubber-nearby-v4-sort-btn:focus,
.btn--primary.klubber-nearby-v4-sort-btn .klubber-nearby-v4-sort-btn:focus,
.btn--primary .klubber-nearby-v4-sort-btn:focus {
	outline: inherit;
}
/* Fjern evt. pseudo-element baggrund fra tema (fx ::before på knap) */
.btn--primary .klubber-nearby-v4-sort-btn::before,
.btn--primary .klubber-nearby-v4-sort-btn::after,
.btn--primary-light .klubber-nearby-v4-sort-btn::before,
.btn--primary-light .klubber-nearby-v4-sort-btn::after {
	display: none !important;
}

/* Postnummerfelt med søge-ikon til venstre; baggrundstekst rykkes ind så den ikke overlapper ikonet */
.klubber-nearby-v4-postnummer-input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: block;
}
.klubber-nearby-v4-postnummer-input-wrap .klubber-nearby-v4-postnummer-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
}
.klubber-nearby-v4-postnummer-input-wrap .klubber-nearby-v4-postnummer-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}
.klubber-nearby-v4-postnummer-input-wrap .klubber-nearby-v4-postnummer-input {
	padding-left: 2.25rem;
	width: 100%;
	box-sizing: border-box;
}
/* Ref-shortcode: form på én række med felt og knapper */
.klubber-nearby-v4-ref-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.klubber-nearby-v4-ref-form .klubber-nearby-v4-postnummer-input-wrap {
	min-width: 8em;
}

/* Hjælpetekst under postnummerfeltet (shortcode-attribut help_text) */
.klubber-nearby-v4-postnummer-help {
	margin: 0.35em 0 0 0;
	font-size: 0.875rem;
	color: #555;
	line-height: 1.4;
}

/* Hjælpetekst omkring postnummer/afstand: giv tekstelementet i Bricks klassen for tydeligere udtryk.
   !important så Bricks’ generelle typografi ikke overskriver. */
.klubber-nearby-v4-help.klubber-nearby-v4-help {
	font-weight: 600 !important;
	color: #1a1a1a !important;
	margin-bottom: 0.35em !important;
	font-size: 1em !important;
}

.klubber-nearby-v4-status {
	margin-bottom: var(--klubber-nearby-v4-gap);
	font-size: 0.95rem;
}

.klubber-nearby-v4-status-error {
	color: #b32d2e;
}

.klubber-nearby-v4-results {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.klubber-nearby-v4-kort {
	display: block;
	padding: 1rem;
	background: var(--klubber-nearby-v4-kort-bg);
	border: 1px solid var(--klubber-nearby-v4-kort-border);
	border-radius: var(--klubber-nearby-v4-radius);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.klubber-nearby-v4-kort:hover {
	background: var(--klubber-nearby-v4-kort-hover);
}

.klubber-nearby-v4-kort-title {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.klubber-nearby-v4-kort-meta {
	display: block;
	font-size: 0.9rem;
	color: #555;
}

.vk-klubber2026__no-results,
.klubber-nearby-v4-no-results {
	margin: 0;
	color: #666;
	font-style: italic;
}

/* Afstand på kort (kun ved afstandssøgning) – integration mode */
.klubber-nearby-v4-distance {
	display: inline-block;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.2rem 0.5rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--vk-text-secondary);
	background: var(--vk-bg-accent);
	border-radius: 0.25rem;
	line-height: 1.2;
	margin-bottom: 0;
	/* Ekstra afstand ned til indhold under badget (fx klassetrin) */
	margin-block-end: 0.75rem;
}
/* Ekstra afstand ned til indhold under badget (fx klassetrin i header) */
.vk-klubber2026__kort:has(.klubber-nearby-v4-distance) .vk-klubber2026__kort-header,
.vk-klubliste-03__kort:has(.klubber-nearby-v4-distance) .vk-klubliste-03__kort-header {
	margin-top: 0.75rem;
}
/* Når badget er inde i Bricks-pladsholder bruges block-layout til afstand */
.vk-klubber2026__kort .vk-klubber2026__kort-distance .klubber-nearby-v4-distance,
.vk-klubliste-03__kort .klubber-nearby-v4-distance-slot .klubber-nearby-v4-distance {
	position: static;
	display: inline-block;
	margin-block-end: 0.75rem;
}
/* Wrapper omkring afstandsskilt: skjult som udgangspunkt, vises kun når der er referencepunkt (shortcode udfyldt / JS sætter display). */
.vk-klubber2026__kort .vk-klubber2026__kort-distance-badge,
.vk-klubliste-03__kort .vk-klubliste-03-afstandsskilt--wrapper,
.vk-klubber2026__kort [data-klubber-nearby-v4-distance-wrapper],
.vk-klubliste-03__kort [data-klubber-nearby-v4-distance-wrapper],
[data-sted-id] .vk-klubber2026__kort-distance-badge,
[data-sted-id] .vk-klubliste-03-afstandsskilt--wrapper,
[data-sted-id] [data-klubber-nearby-v4-distance-wrapper] {
	display: none;
}
/* Tving synlighed når plugin viser badge (overstyrer Bricks .bricks-lazy-hidden) */
.vk-klubber2026__kort .vk-klubber2026__kort-distance-badge.klubber-nearby-v4-visible,
.vk-klubliste-03__kort .vk-klubliste-03-afstandsskilt--wrapper.klubber-nearby-v4-visible,
.vk-klubber2026__kort [data-klubber-nearby-v4-distance-wrapper].klubber-nearby-v4-visible,
.vk-klubliste-03__kort [data-klubber-nearby-v4-distance-wrapper].klubber-nearby-v4-visible,
[data-sted-id] .vk-klubber2026__kort-distance-badge.klubber-nearby-v4-visible,
[data-sted-id] .vk-klubliste-03-afstandsskilt--wrapper.klubber-nearby-v4-visible,
[data-sted-id] [data-klubber-nearby-v4-distance-wrapper].klubber-nearby-v4-visible {
	display: block !important;
}
.vk-klubber2026__kort .vk-klubber2026__kort-distance.klubber-nearby-v4-visible,
.vk-klubliste-03__kort .klubber-nearby-v4-distance-slot.klubber-nearby-v4-visible,
.vk-klubber2026__kort [data-klubber-nearby-v4-slot].klubber-nearby-v4-visible,
.vk-klubliste-03__kort [data-klubber-nearby-v4-slot].klubber-nearby-v4-visible,
[data-sted-id] .vk-klubber2026__kort-distance.klubber-nearby-v4-visible,
[data-sted-id] .klubber-nearby-v4-distance-slot.klubber-nearby-v4-visible,
[data-sted-id] [data-klubber-nearby-v4-slot].klubber-nearby-v4-visible {
	display: flex !important;
}
/* Afstand-slot: skjult som udgangspunkt; layout på én linje. Bredde, placering og tekstjustering defineres i Bricks på elementet (Custom CSS eller Style). */
.vk-klubber2026__kort .vk-klubber2026__kort-distance,
.vk-klubliste-03__kort .klubber-nearby-v4-distance-slot,
.vk-klubber2026__kort [data-klubber-nearby-v4-slot],
.vk-klubliste-03__kort [data-klubber-nearby-v4-slot],
[data-sted-id] .vk-klubber2026__kort-distance,
[data-sted-id] .klubber-nearby-v4-distance-slot,
[data-sted-id] [data-klubber-nearby-v4-slot] {
	display: none;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.35em;
	margin-bottom: 0.75rem;
}
/* Når scriptet udfylder pladsholderen sættes display: flex via JS så "Afstand" og "X km" er på samme linje */
/* Kort skal have position relative så afstands-badge kan placeres (absolut) */
.vk-klubber2026__list .vk-klubber2026__kort,
.vk-klubliste-03 .vk-klubliste-03__kort,
[data-sted-id] {
	position: relative;
}

/* Sortér og nulstil: Bricks .brxe-block sætter width:100% – her skal børnene kun være så brede som indhold, så flex centrering virker. */
.vk-klubber2026__sort-reset > *,
.vk-klubber2026_sort-reset > * {
	width: auto !important;
	max-width: 100%;
}

/* Filter-dropdowns: centrer rækken (som sort-reset). Flex + børn med width:auto så de tre bokse står centreret. */
.vk-klubber2026__filter-dropdowns,
.vk-klubber2026_filter-dropdowns,
.vk-klubber2026__filter-groups,
.vk-klubber2026_filter-groups {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
.vk-klubber2026__filter-dropdowns > *,
.vk-klubber2026_filter-dropdowns > *,
.vk-klubber2026__filter-groups > *,
.vk-klubber2026_filter-groups > * {
	width: auto !important;
	max-width: 100%;
}

/* Nulstil-knap: tving synlighed når der er aktive filtre (overstyrer Bricks "Hide when no filter") */
.klubber-nearby-v4-reset-visible {
	display: block !important;
	visibility: visible !important;
}

/* Fallback nulstil-link når Bricks ikke viser egen knap (fx ved kun sort_by_distance) */
.klubber-nearby-v4-reset-fallback {
	display: inline-block;
	margin-top: 0.5em;
}
.klubber-nearby-v4-reset-fallback a {
	text-decoration: underline;
	cursor: pointer;
}

/* Afstandspills-wrapper: centrer pills (samme princip som .vk-klubber2026__sort-reset) */
.vk-klubber2026__afstandspills-wrapper {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
.vk-klubber2026__afstandspills-wrapper > * {
	flex-grow: 0;
	width: auto !important;
	max-width: 100%;
}

/* Afstandspills (5 / 10 / 25 km) – én aktiv ad gangen, klik på aktiv fjerner filter */
.klubber-nearby-v4-afstand-pills,
.vk-klubber2026__afstand-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.klubber-nearby-v4-afstand-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.4rem 0.85rem;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.2;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.klubber-nearby-v4-afstand-pill:hover:not(:disabled),
.klubber-nearby-v4-afstand-pill:focus-visible {
	border-color: rgba(0,0,0,.4);
	background: #f5f5f5;
}
.klubber-nearby-v4-afstand-pill.is-active {
	background: var(--vk-bg-accent, #e8e8e8);
	border-color: rgba(0,0,0,.35);
}
/* Fjern-ikon som lille rund knap med diskret border – visuelt adskilt fra pill-tekst (best practice) */
.klubber-nearby-v4-afstand-pill-remove {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.5rem;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	opacity: 0.9;
	transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.klubber-nearby-v4-afstand-pill.is-active .klubber-nearby-v4-afstand-pill-remove {
	display: inline-flex;
	/* Hvid på lysegrøn aktiv pill – bedre kontrast */
	border-color: rgba(0, 0, 0, 0.12);
	background: #fff;
	color: rgba(0, 0, 0, 0.7);
}
.klubber-nearby-v4-afstand-pill.is-active:hover:not(:disabled) .klubber-nearby-v4-afstand-pill-remove,
.klubber-nearby-v4-afstand-pill.is-active:focus-visible .klubber-nearby-v4-afstand-pill-remove {
	border-color: rgba(0, 0, 0, 0.2);
	background: #fff;
	color: rgba(0, 0, 0, 0.85);
}
.klubber-nearby-v4-afstand-pill:hover:not(:disabled) .klubber-nearby-v4-afstand-pill-remove,
.klubber-nearby-v4-afstand-pill:focus-visible .klubber-nearby-v4-afstand-pill-remove {
	opacity: 1;
	border-color: rgba(0, 0, 0, 0.35);
	background: rgba(0, 0, 0, 0.16);
}
.klubber-nearby-v4-afstand-pill-remove svg {
	display: block;
}
.klubber-nearby-v4-afstand-pills--disabled .klubber-nearby-v4-afstand-pill,
.klubber-nearby-v4-afstand-pill:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
/* Skjul pills helt når der ikke er lokation (ref) */
.klubber-nearby-v4-afstand-pills--hidden {
	display: none !important;
}

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

/* Aktive filtre-boks: ingen layout-CSS fra pluginet – brug BRICKS-CSS-aktive-filtre-box.txt i Bricks (Style → Custom CSS på blokken eller Site Settings → Custom Code). */