/*!
 * Heterobos Evenementen — agendapagina
 * Kleuren volgen de site; de var()-fallbacks zijn er voor het geval het thema
 * ze niet zet.
 */

.hb-agenda {
	--hb-ag-bg: var(--hb-bg, #000);
	--hb-ag-card: var(--hb-bg-card, #161616);
	--hb-ag-border: var(--hb-border, #2a2a2a);
	--hb-ag-border2: #3a3a3a;
	--hb-ag-text: var(--hb-text, #e8ddd6);
	--hb-ag-muted: var(--hb-muted, #888);
	--hb-ag-red: var(--hb-red, #c8334a);
	--hb-ag-red2: #e84a6a;
	color: var(--hb-ag-text);
	font-size: 14px;
	line-height: 1.55;
}

/* knoppen */
.hb-agenda .hb-btn {
	display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
	padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
	background: var(--hb-ag-red); color: #fff; text-decoration: none; transition: .15s;
}
.hb-agenda .hb-btn:hover { background: var(--hb-ag-red2); color: #fff; }
.hb-agenda .hb-btn-ghost { background: transparent; border: 1px solid var(--hb-ag-border2); color: var(--hb-ag-text); }
.hb-agenda .hb-btn-ghost:hover { border-color: var(--hb-ag-red); }
.hb-agenda .hb-btn-s { padding: 7px 12px; font-size: 12px; }

/* disclaimer boven de agenda */
.hb-ag-disclaimer {
	margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--hb-ag-border2);
	background: rgba(255, 255, 255, .02); border-radius: 0 8px 8px 0;
	font-size: 12px; color: var(--hb-ag-muted); max-width: 78ch;
}

/* prijs en dresscode op de kaart */
.hb-ag-extra { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #a89e97; margin-top: 5px; }
.hb-ag-extra span { display: inline-flex; align-items: center; gap: 5px; }

/* filterpaneel: ingeklapt één regel, open een veld met chips */
.hb-ag-filterpane {
	margin: 0 0 16px; border: 1px solid var(--hb-ag-border); border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
	overflow: hidden;
}
.hb-ag-fsum {
	display: flex; align-items: center; gap: 9px; padding: 9px 13px; cursor: pointer;
	list-style: none; user-select: none; transition: background .15s ease;
}
.hb-ag-fsum:hover { background: rgba(255, 255, 255, .028); }
.hb-ag-fsum::-webkit-details-marker { display: none; }
.hb-ag-fsum-ico {
	display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px;
	border-radius: 8px; background: rgba(200, 51, 74, .12); border: 1px solid rgba(200, 51, 74, .3);
	color: #e8607a; flex: 0 0 auto;
}
.hb-ag-fsum-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hb-ag-fsum-tekst strong {
	font-size: 12px; font-weight: 600; color: #efe6e0; letter-spacing: .01em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-ag-fsum-tekst em { font-size: 10.5px; font-style: normal; color: var(--hb-ag-muted); }

/* actieve filters als kleine pillen in de dichte regel */
.hb-ag-fsum-pillen { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-ag-fsum-pil {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 8px;
	border-radius: 999px; background: rgba(200, 51, 74, .16); border: 1px solid rgba(200, 51, 74, .4);
	color: #f0cfd5; font-size: 11px; font-weight: 600; text-decoration: none;
}
.hb-ag-fsum-pil span { font-size: 13px; line-height: 1; color: #e8607a; }
.hb-ag-fsum-pil:hover { background: rgba(200, 51, 74, .3); color: #fff; }
.hb-ag-fsum-pijl {
	margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid #8f857e; border-bottom: 1.6px solid #8f857e;
	transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; flex: 0 0 auto;
}
.hb-ag-filterpane[open] .hb-ag-fsum-pijl { transform: rotate(-135deg) translateY(-2px); }
.hb-ag-fsum:hover .hb-ag-fsum-ico { border-color: var(--hb-ag-red); color: var(--hb-ag-red2); }

.hb-ag-fpanel {
	padding: 2px 13px 12px; display: flex; flex-direction: column; gap: 9px;
	border-top: 1px solid rgba(255,255,255,.045);
}
.hb-ag-chipgroep { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; }
.hb-ag-chiplabel {
	font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #7d746e;
}
.hb-ag-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-ag-chip {
	display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 999px;
	border: 1px solid #2c2c2e; background: #141415; color: #c6bdb6; font-size: 11.5px;
	text-decoration: none; line-height: 1.35; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hb-ag-chip:hover { border-color: #6b3a42; color: #fff; background: #1b1a1b; }
.hb-ag-chip.is-aan {
	background: linear-gradient(180deg, #c8334a, #a8273c); border-color: #d9455e; color: #fff; font-weight: 600;
	box-shadow: 0 4px 14px rgba(200, 51, 74, .28);
}
.hb-ag-chip.is-aan:hover { background: linear-gradient(180deg, #d63a52, #b62b41); }
.hb-ag-chip.is-leeg { opacity: .34; }
.hb-ag-chipn { font-size: 9.5px; color: #8f857e; font-variant-numeric: tabular-nums; }
.hb-ag-chip.is-aan .hb-ag-chipn { color: rgba(255, 255, 255, .72); }
.hb-ag-wis {
	align-self: flex-start; margin-top: 0; font-size: 11px; color: #9a908a;
	text-decoration: underline; text-underline-offset: 3px;
}
.hb-ag-wis:hover { color: var(--hb-ag-red2); }

@media (max-width: 640px) {
	.hb-ag-chip { padding: 5px 10px; font-size: 11.5px; flex: 0 0 auto; }

	/* Op een telefoon kost een wikkelende rij chips drie regels per groep. Een
	   horizontale strip met eigen scroll houdt het bij één regel. */
	.hb-ag-chips {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		-webkit-overflow-scrolling: touch; padding-bottom: 2px;
	}
	.hb-ag-chips::-webkit-scrollbar { display: none; }
	.hb-ag-fsum { gap: 8px; padding: 9px 11px; }
	.hb-ag-fsum-tekst em { display: none; }
	.hb-ag-fpanel { padding: 0 11px 11px; }

	/* Zevendaags raster op 390px: titels worden 'T...'. Toon per event een stip,
	   de lijstweergave is op mobiel toch de standaard. */
	.hb-ag-cal-grid { grid-auto-rows: minmax(58px, auto); }
	.hb-ag-day { min-height: 58px; padding: 4px; }
	.hb-ag-num { font-size: 11px; width: 18px; height: 18px; }
	.hb-ag-ev {
		width: 7px; height: 7px; min-width: 0; padding: 0; margin: 3px 0 0;
		border-left: 0; border-radius: 50%; font-size: 0; overflow: hidden;
	}
	.hb-ag-ev-top { display: none; }
	.hb-ag-ev.is-stellen { background: #b06fd6; }
	.hb-ag-ev.is-mix { background: var(--hb-ag-red); }
	.hb-ag-ev.is-vrouwen { background: #d66f9e; }
	.hb-ag-ev.is-mannen { background: #4f9de0; }
	.hb-ag-ev.is-guest { background: #6b4a51; }
}

/* toolbar */
.hb-ag-toolbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 12px; border: 1px solid var(--hb-ag-border); border-radius: 12px;
	background: #0c0c0d; margin-bottom: 16px;
}
.hb-ag-seg { display: flex; background: #101011; border: 1px solid var(--hb-ag-border); border-radius: 9px; padding: 3px; }
.hb-ag-seg a,
.hb-ag-seg button {
	background: transparent; border: 0; color: var(--hb-ag-muted); padding: 7px 14px;
	border-radius: 7px; font-size: 12.5px; cursor: pointer; font-family: inherit;
	text-decoration: none; line-height: 1.4;
}
.hb-ag-seg a:hover, .hb-ag-seg button:hover { color: var(--hb-ag-text); }
.hb-ag-seg a.is-on,
.hb-ag-seg button.is-on { background: #242427; color: var(--hb-ag-text); }
.hb-ag-month { display: flex; align-items: center; gap: 8px; }
.hb-ag-month strong { font-size: 13.5px; min-width: 130px; text-align: center; }
.hb-ag-nav {
	width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; background: #101011; border: 1px solid var(--hb-ag-border);
	color: var(--hb-ag-text); text-decoration: none; font-size: 15px; line-height: 1;
}
.hb-ag-nav:hover { border-color: var(--hb-ag-red); color: #fff; }
.hb-ag-count { margin-left: auto; font-size: 11.5px; color: var(--hb-ag-muted); }

/* gastmelding */
.hb-ag-guest {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	border: 1px solid #4a2b31; background: #1a0f11; border-radius: 12px;
	padding: 12px 16px; margin-bottom: 16px; font-size: 12.5px; color: #e4c4c8;
}
.hb-ag-guest strong { color: #fff; }
.hb-ag-guest-act { margin-left: auto; display: flex; gap: 8px; }

/* kalender */
.hb-ag-cal { border: 1px solid var(--hb-ag-border); border-radius: 14px; overflow: hidden; background: var(--hb-ag-card); }
.hb-ag-cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #101011; border-bottom: 1px solid var(--hb-ag-border); }
.hb-ag-cal-head div { padding: 9px 10px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--hb-ag-muted); }
.hb-ag-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); }
.hb-ag-day {
	border-right: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; padding: 7px;
	min-height: 96px; min-width: 0; overflow: hidden;
}
.hb-ag-day:nth-child(7n) { border-right: 0; }
.hb-ag-day.is-dim { background: #0d0d0e; }
.hb-ag-day.is-today { background: rgba(200, 51, 74, .05); }
.hb-ag-num { font-size: 12px; color: #9a9a9a; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; }
.hb-ag-day.is-today .hb-ag-num { background: var(--hb-ag-red); color: #fff; font-weight: 600; }
.hb-ag-ev {
	display: block; margin-top: 6px; padding: 5px 7px; border-radius: 7px; font-size: 11.5px; line-height: 1.3;
	background: #1f1f21; border-left: 3px solid var(--hb-ag-red); color: #e2d8d1; text-decoration: none;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-ag-ev:hover { background: #2a2a2d; color: #fff; }
.hb-ag-ev-top { display: block; color: #9a9a9a; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
	overflow: hidden; text-overflow: ellipsis; }
.hb-ag-ev.is-stellen { border-left-color: #b06fd6; }
.hb-ag-ev.is-mix { border-left-color: var(--hb-ag-red); }
.hb-ag-ev.is-vrouwen { border-left-color: #d66f9e; }
.hb-ag-ev.is-mannen { border-left-color: #4f9de0; }
.hb-ag-ev.is-guest { border-left-color: #4a2b31; background: #1a1719; }

/* lijst */
.hb-ag-list { display: none; flex-direction: column; gap: 12px; }
.hb-agenda.is-list .hb-ag-list { display: flex; }
.hb-agenda.is-list .hb-ag-cal { display: none; }
.hb-ag-card {
	display: grid; grid-template-columns: 78px 1fr auto; gap: 16px; align-items: start;
	border: 1px solid var(--hb-ag-border); border-radius: 14px; background: var(--hb-ag-card); padding: 14px 16px;
}
.hb-ag-date { text-align: center; border: 1px solid var(--hb-ag-border2); border-radius: 11px; padding: 8px 4px; background: #101011; }
.hb-ag-date .d { font-size: 20px; font-weight: 700; line-height: 1; }
.hb-ag-date .m { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--hb-ag-muted); margin-top: 3px; }
.hb-ag-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #e8a0ae; margin-bottom: 3px; }
.hb-ag-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.hb-ag-title a { color: inherit; text-decoration: none; }
.hb-ag-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #a89e97; }
.hb-ag-masked { border: 1px dashed var(--hb-ag-border2); border-radius: 6px; padding: 1px 7px; color: #7f7570; }
.hb-ag-who { font-size: 12px; color: var(--hb-ag-muted); margin-top: 7px; }
.hb-ag-interest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hb-ag-int {
	display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hb-ag-border2);
	background: #101011; color: #cbbfb8; border-radius: 999px; padding: 6px 13px; font-size: 12px;
	cursor: pointer; text-decoration: none; font-family: inherit;
}
.hb-ag-int:hover { border-color: var(--hb-ag-red); color: #fff; }
.hb-ag-int.is-on { background: rgba(200, 51, 74, .16); border-color: var(--hb-ag-red); color: #fff; }
.hb-ag-int-count { font-size: 11.5px; color: var(--hb-ag-muted); }
.hb-ag-int-count b { color: #dfcec6; }
.hb-ag-contact { font-size: 11.5px; color: #8f857e; margin-top: 6px; }
.hb-ag-contact a { color: #b9d3e8; }
.hb-ag-contact-lab { color: #7f7671; }
.hb-ag-locked { color: #7f7671; }
.hb-ag-tag {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px;
	padding: 3px 9px; border: 1px solid var(--hb-ag-border2); color: #b9aea7; white-space: nowrap;
}
.hb-ag-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hb-ag-empty { color: var(--hb-ag-muted); }

/* formulier */
.hb-ag-form, .hb-ag-lockbox {
	border: 1px solid var(--hb-ag-border); border-radius: 14px; background: var(--hb-ag-card);
	padding: 18px; margin-top: 26px;
}
.hb-ag-form h2, .hb-ag-lockbox h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.2px; }
.hb-ag-form-sub, .hb-ag-lockbox p { margin: 0 0 16px; font-size: 12.5px; color: var(--hb-ag-muted); }
.hb-ag-ok { border: 1px solid #2c4a2c; background: #101a10; color: #a9d3a9; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; margin-bottom: 16px; }
.hb-ag-fields label { display: block; font-size: 12px; color: #b3a8a1; margin-bottom: 12px; }
.hb-ag-fields input, .hb-ag-fields select, .hb-ag-fields textarea {
	width: 100%; margin-top: 6px; background: #101011; border: 1px solid var(--hb-ag-border2);
	border-radius: 9px; color: var(--hb-ag-text); padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.hb-ag-fields input:focus, .hb-ag-fields select:focus, .hb-ag-fields textarea:focus {
	outline: none; border-color: var(--hb-ag-red); box-shadow: 0 0 0 3px rgba(200, 51, 74, .13);
}

/* Native dropdowns (datum, tijd, type) erven de sitekleuren niet: zonder color-scheme
   tekent de browser een licht paneel met lichte tekst. */
.hb-ag-fields select,
.hb-ag-fields input,
.hb-ag-fields textarea {
	color-scheme: dark;
}
.hb-ag-fields select option,
.hb-ag-fields select optgroup {
	background-color: #131314;
	color: var(--hb-ag-text);
}
.hb-ag-fields select option:checked {
	background-color: #2a0f14;
	color: #fff;
}
.hb-ag-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hb-ag-hint { display: block; font-size: 11px; color: #7d746e; margin-top: 5px; }
.hb-ag-ac { display: block; }
/* Het veld heeft een eigen wrapper: de lijst moet onder het invoerveld hangen en niet
   over de labeltekst of het veld zelf heen vallen. */
.hb-ag-ac-field { position: relative; display: block; }
.hb-ag-ac-list {
	display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 30;
	max-height: 240px; overflow-y: auto; background: #131314; border: 1px solid var(--hb-ag-border2);
	border-radius: 11px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.hb-ag-ac-list.is-open { display: block; }
.hb-ag-ac-item { display: flex; gap: 10px; align-items: center; padding: 9px 12px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid #1c1c1d; }
.hb-ag-ac-item:last-child { border-bottom: 0; }
.hb-ag-ac-item:hover, .hb-ag-ac-item.is-sel { background: #1f1f21; }
.hb-ag-ac-item .pl { color: var(--hb-ag-muted); font-size: 11.5px; }
.hb-ag-ac-item .lnk { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #8f857e; border: 1px solid var(--hb-ag-border2); border-radius: 999px; padding: 1px 7px; }

@media (max-width: 900px) {
	.hb-ag-card { grid-template-columns: 64px 1fr; }
	.hb-ag-side { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.hb-ag-row2 { grid-template-columns: 1fr; }
	.hb-ag-month strong { min-width: 110px; }
}
@media (max-width: 640px) {
	.hb-ag-cal-grid { grid-auto-rows: minmax(72px, auto); }
	.hb-ag-ev { font-size: 10.5px; padding: 4px 5px; }
	.hb-ag-count { margin-left: 0; }
	.hb-ag-guest-act { margin-left: 0; }
}

/* enkele eventpagina */
.hb-event-single { margin-bottom: 18px; }
.hb-event-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #e8a0ae; margin-bottom: 6px; }
.hb-event-facts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.hb-event-facts li { display: flex; gap: 10px; font-size: 13px; }
.hb-event-facts span { min-width: 110px; color: #8f857e; }
.hb-event-facts strong { font-weight: 600; }
.hb-event-facts strong.hb-masked { border: 1px dashed #3a3a3a; border-radius: 6px; padding: 0 8px; color: #7f7570; font-weight: 400; }
.hb-event-note { font-size: 12.5px; color: #8f857e; }
.hb-event-note a { color: #b9d3e8; }

/* notitie op de eventpagina: wij zijn niet de organisator */
.hb-event-org-note { font-size: 12px; color: #8f857e; margin: 0 0 10px; }

/* foutmeldingen onder het formulier */
.hb-ag-error {
	border: 1px solid #5a2c2c; background: #1a1010; color: #e0a9a9; border-radius: 10px;
	padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px;
}
.hb-ag-error ul { margin: 6px 0 0 18px; padding: 0; }
.hb-ag-error li { margin: 2px 0; }

/* terug naar de agenda, boven aan de eventpagina */
.hb-event-back {
	display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px;
	padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid #3a3a3e;
	background: #1d1d1f; color: #e2d8d1; font-size: 13px; font-weight: 500; text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hb-event-back span { font-size: 17px; line-height: 1; color: #e8607a; margin-top: -2px; }
.hb-event-back:hover { border-color: #6b3a42; background: #1b1a1b; color: #fff; }
.hb-event-back:hover span { color: var(--hb-ag-red2); }

/* beschrijving en bronlink op de eventpagina */
.hb-event-desc {
	margin: 14px 0 10px; padding: 12px 14px; border-left: 3px solid var(--hb-ag-red);
	background: rgba(255, 255, 255, .022); border-radius: 0 10px 10px 0;
	font-size: 13.5px; line-height: 1.65; color: #d6ccc5;
}
.hb-event-source { margin: 0 0 12px; font-size: 13px; }
.hb-event-source a { color: var(--hb-ag-red2); text-decoration: none; }
.hb-event-source a:hover { text-decoration: underline; }

/* ---------- afgelopen edities ---------- */
.hb-ag-oud{
	margin:34px 0 10px;
	padding-top:22px;
	border-top:1px solid rgba(255,255,255,.08);
}
.hb-ag-oud h2{font-size:18px;margin:0 0 6px;}
.hb-ag-oud-sub{margin:0 0 16px;font-size:13px;opacity:.7;}
.hb-ag-oud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.hb-ag-oud-card{
	position:relative;display:block;padding:13px 15px;border-radius:10px;
	border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
	text-decoration:none;opacity:.78;transition:opacity .15s ease,border-color .15s ease;
}
.hb-ag-oud-card:hover{opacity:1;border-color:rgba(200,51,74,.45);}
.hb-ag-oud-badge{
	position:absolute;top:10px;right:10px;font-size:9.5px;letter-spacing:.08em;
	text-transform:uppercase;padding:2px 7px;border-radius:20px;
	background:rgba(200,51,74,.18);color:#e84a6a;border:1px solid rgba(200,51,74,.35);
}
.hb-ag-oud-datum{display:block;font-size:11.5px;opacity:.65;margin:0 60px 4px 0;text-transform:capitalize;}
.hb-ag-oud-titel{display:block;font-weight:600;font-size:14px;line-height:1.35;}
.hb-ag-oud-type{display:block;margin-top:6px;font-size:11.5px;opacity:.6;}

/* ---------- verlopen eventpagina ---------- */
.hb-event-expired{
	margin:14px 0 18px;padding:12px 14px;border-radius:10px;
	border:1px solid rgba(200,51,74,.35);background:rgba(200,51,74,.10);
	font-size:13.5px;line-height:1.5;
}
.hb-event-expired a{color:#e84a6a;text-decoration:underline;}