/* ============================================================================
   AP EVENEMENT — AP Netwerkborrel (?ap_page=events) — 1-op-1 volgens OPDRACHT.
   Volledige herbouw. Alle maten px op het element; halve stappen
   (13.5/12.5/11.5/10.5) en gewichten 450/550 zijn opzettelijk. Wrapper .ap-event
   is een <div> (nooit <section>) i.v.m. de thema-valkuil white-space:pre-wrap.
   !important waar het thema forceert (font-size/weight, control-breedtes,
   button-achtergrond). Accent #1B4DE4, tekst-donker #0C1F3F.
   ============================================================================ */

/* Geen paddingcontainer bovenaan: hero van rand tot rand, direct onder de
   60px fixed header. .ap-content krijgt padding:0 en volle breedte. */
.ap-content:has(.ap-event){ padding:0 !important; max-width:none !important; background:#F5F7FB !important; }

/* De hero valt onder de 60px fixed header (met admin-bar: +32px / mobiel +46px). */
.ap-event{ margin-top:60px; }
body.admin-bar .ap-event{ margin-top:92px; }
@media screen and (max-width:782px){ body.admin-bar .ap-event{ margin-top:106px; } }

.ap-event{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; white-space:normal; color:#0C1F3F; line-height:1.5; width:100%; }
.ap-event, .ap-event *{ box-sizing:border-box; }
.ap-event img{ max-width:100%; display:block; }

/* Thema-marges neutraliseren binnen de wrapper. */
.ap-event p, .ap-event h1, .ap-event h2, .ap-event h3{ margin:0; }
.ap-event ul, .ap-event li{ margin:0; padding:0; list-style:none; }
.ap-event input, .ap-event select, .ap-event textarea, .ap-event button{ font-family:inherit; }
.ap-event a{ color:inherit; text-decoration:none; }

/* Herbruikbaar inline-SVG-icoon (subset-font-valkuil ontweken).
   Standaardmaat 16px; per plek overschreven door een specifiekere regel. */
.ap-ev-ic{ display:inline-flex; flex:0 0 auto; width:16px; height:16px; }
.ap-ev-ic svg{ width:100%; height:100%; display:block; }
/* Iconen met een extra wrapper-span krijgen hun maat expliciet mee. */
.ap-ev-feit__ic .ap-ev-ic{ width:19px; height:19px; }
.ap-ev-sug__caret .ap-ev-ic{ width:14px; height:14px; }

/* ============================ 2. HERO ============================ */
.ap-ev-hero{ position:relative; min-height:420px; background:#0A1A33; overflow:hidden; display:flex; align-items:flex-end; }
.ap-ev-hero__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.ap-ev-hero__grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,20,40,.62) 0%, rgba(8,20,40,.22) 34%, rgba(8,20,40,.84) 100%); pointer-events:none; }
.ap-ev-hero__glow{ position:absolute; inset:0; z-index:1; background:radial-gradient(760px 300px at 82% 8%, rgba(76,123,255,.22), transparent 70%); pointer-events:none; }
.ap-ev-hero__logo{ position:absolute; right:34px; top:30px; height:24px !important; width:auto !important; opacity:.5; z-index:3; }

/* WhatsApp-deelknop rechtsboven (optioneel; deelt de deeplink). */
.ap-ev-share{ position:absolute; right:24px; bottom:24px; z-index:3; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.10); color:#DCE7FD !important; font-size:11.5px !important; font-weight:550 !important; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .15s; }
.ap-ev-share:hover{ background:rgba(255,255,255,.18); }
.ap-ev-share .ap-ev-ic{ width:15px; height:15px; }

/* ---- De deelknop op zijn plek: rechts, vlak boven datum en tijd ----

   WAAROM OP `button` EN NIET OP DE KLASSE
   De regels hierboven voor .ap-ev-share komen niet aan. Op het scherm staat
   een massief blauwe knop bovenin de hero, in de gewone tekststroom, terwijl
   .ap-ev-share hem rechtsonder zou laten zweven met een doorzichtige
   achtergrond. De knop heeft in de html dus een andere klassenaam. Door hier
   het ELEMENT aan te spreken pakken we hem hoe hij ook heet.

   WAAROM TWEE KLASSEN IN DE SELECTOR
   Het thema kleurt elke knop blauw met `.woocommerce-page button` en
   !important. Dat is een klasse plus een element. Een eigen regel met maar
   een klasse verliest daarvan, ook met !important. Vandaar `.ap-event` en
   `.ap-ev-hero__in` samen.

   WAAROM `order`
   .ap-ev-hero__in is een kolom. Met order 1 op de knop en order 2 op de
   feitenregel komt de knop precies tussen de tekst en de datum- en tijdregel,
   ongeacht waar hij in de html staat. */
.ap-event .ap-ev-hero__in > button{
	order:1;
	align-self:flex-end;
	position:static !important;
	margin:0 !important;
	display:inline-flex !important;
	align-items:center;
	gap:7px;
	width:auto !important;
	min-width:0 !important;
	height:34px !important;
	padding:0 13px !important;
	border-radius:999px !important;
	border:1px solid rgba(255,255,255,.24) !important;
	background:rgba(255,255,255,.10) !important;
	background-image:none !important;
	color:#DCE7FD !important;
	font-size:11.5px !important;
	font-weight:550 !important;
	line-height:1 !important;
	text-shadow:none !important;
	box-shadow:none !important;
	cursor:pointer;
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	transition:background .15s;
}
.ap-event .ap-ev-hero__in > button:hover{ background:rgba(255,255,255,.18) !important; }
.ap-event .ap-ev-hero__in > button svg{ width:15px; height:15px; display:block; }
.ap-event .ap-ev-hero__in > .ap-ev-feiten{ order:2; }


.ap-ev-hero__in{ position:relative; z-index:2; width:100%; max-width:1400px; margin:0 auto; padding:44px 32px 34px; display:flex; flex-direction:column; gap:18px; }

.ap-ev-pills{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ap-ev-pill{ display:inline-flex; align-items:center; gap:7px; height:27px; padding:0 12px; border-radius:999px; }
.ap-ev-pill--lid{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); color:#DCE7FD !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.1em; text-transform:uppercase; }
.ap-ev-pill--open{ background:rgba(160,240,190,.13); border:1px solid rgba(160,240,190,.30); color:#A6EFC4 !important; font-size:11.5px !important; font-weight:550 !important; }
.ap-ev-pill--open .ap-ev-dot{ width:5px; height:5px; border-radius:50%; background:#5FD99A; flex:0 0 auto; }

.ap-ev-hero__titel{ font-size:46px !important; font-weight:600 !important; line-height:1.04 !important; letter-spacing:-.035em; color:#fff !important; max-width:15ch; }
.ap-ev-hero__intro{ font-size:16px !important; font-weight:400 !important; line-height:1.55 !important; color:#C3D3EC !important; max-width:56ch; }

.ap-ev-feiten{ margin-top:6px; display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, max-content)); gap:16px 30px; }
.ap-ev-feit{ display:flex; align-items:flex-start; gap:11px; }
.ap-ev-feit__ic{ width:19px; height:19px; color:#8FA8D4; margin-top:1px; }
.ap-ev-feit__ic i{ font-size:19px; color:#8FA8D4; }
.ap-ev-feit__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ap-ev-feit__label{ font-size:10px !important; font-weight:600 !important; letter-spacing:.1em; text-transform:uppercase; color:#7C93BB !important; }
.ap-ev-feit__waarde{ font-size:14px !important; font-weight:550 !important; color:#fff !important; }

/* ============================ 3. INDELING ============================ */
.ap-ev-body{ max-width:1400px; margin:0 auto; padding:28px 32px 48px; display:flex; gap:28px; align-items:flex-start; }
.ap-ev-main{ flex:2 1 480px; min-width:0; display:flex; flex-direction:column; gap:28px; }
.ap-ev-side{ flex:1 1 330px; min-width:0; position:sticky; top:80px; display:flex; flex-direction:column; gap:16px; }

.ap-ev-kicker{ display:block; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.11em; text-transform:uppercase; color:#8B99AE !important; }

/* Gedeelde witte kaart. */
.ap-ev-kaart{ background:#fff; border:1px solid #E7EBF2; border-radius:14px; }

/* ---------------------- 4a. Programma ---------------------- */
.ap-ev-sectie{ display:flex; flex-direction:column; gap:14px; }
.ap-ev-tijdlijn{ display:flex; flex-direction:column; }
.ap-ev-tl{ display:flex; gap:0; }
.ap-ev-tl__tijd{ flex:0 0 58px; font-size:12.5px !important; font-weight:600 !important; font-variant-numeric:tabular-nums; color:#42536B !important; padding-top:14px; }
.ap-ev-tl__lijn{ flex:0 0 20px; position:relative; display:flex; justify-content:center; }
.ap-ev-tl__lijn::before{ content:""; position:absolute; top:0; bottom:0; width:1px; background:#E7EBF2; }
.ap-ev-tl:last-child .ap-ev-tl__lijn::before{ background:transparent; }
.ap-ev-tl__dot{ position:relative; z-index:1; width:9px; height:9px; border-radius:50%; margin-top:16px; background:#C9D4E6; box-shadow:0 0 0 3px #F0F3F9; }
.ap-ev-tl:first-child .ap-ev-tl__dot{ background:#1B4DE4; box-shadow:0 0 0 3px #DCE7FD; }
.ap-ev-tl__tx{ flex:1 1 auto; min-width:0; padding:12px 0 18px 14px; }
.ap-ev-tl__titel{ font-size:14px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-tl__oms{ font-size:13px !important; font-weight:400 !important; line-height:1.55 !important; color:#6B7A93 !important; margin-top:3px; }

/* ---------------------- 4b. Wie er komen ---------------------- */
.ap-ev-wie__telling{ font-size:12.5px !important; font-weight:400 !important; color:#8B99AE !important; }
.ap-ev-tegels{ display:flex; flex-wrap:wrap; gap:10px; }
.ap-ev-tegel{ width:52px; height:52px; border-radius:12px; background:#fff; border:1px solid #E7EBF2; box-shadow:0 1px 2px rgba(16,35,64,.05); display:grid; place-items:center; overflow:hidden; }
.ap-ev-tegel img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.ap-ev-tegel__init{ font-size:14px !important; font-weight:600 !important; color:#42536B !important; }
.ap-ev-tegel--meer{ background:#EEF1F7; border-color:#EEF1F7; color:#6B7A93 !important; font-size:12px !important; font-weight:600 !important; }
.ap-ev-wie__leeg{ font-size:12.5px !important; font-weight:400 !important; line-height:1.55 !important; color:#6B7A93 !important; }

/* ---------------------- 4c. Locatie ---------------------- */
.ap-ev-loc{ display:flex; flex-wrap:wrap; gap:18px; }
.ap-ev-loc__foto{ flex:1 1 240px; min-width:0; aspect-ratio:16/10; border-radius:14px; border:1px solid #E7EBF2; overflow:hidden; background:#EDF1F7; position:relative; }
.ap-ev-loc__foto img{ width:100%; height:100%; object-fit:cover; }
.ap-ev-loc__foto-ph{ position:absolute; inset:0; display:grid; place-items:center; color:#B3BFD1; }
.ap-ev-loc__foto-ph .ap-ev-ic{ width:34px; height:34px; }
.ap-ev-loc__tx{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.ap-ev-loc__naam{ font-size:16px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-loc__oms{ font-size:13px !important; font-weight:400 !important; line-height:1.6 !important; color:#6B7A93 !important; }
.ap-ev-loc__rij{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px !important; font-weight:400 !important; color:#42536B !important; line-height:1.45; }
.ap-ev-loc__rij .ap-ev-ic{ width:15px; height:15px; color:#93A2B8; margin-top:1px; }
.ap-ev-loc__rij i{ font-size:15px; color:#93A2B8; }

/* ---------------------- 4d. Goed om te weten ---------------------- */
.ap-ev-weten{ display:flex; gap:12px; padding:16px 18px; border-radius:14px; border:1px solid #E7EBF2; background:#fff; }
.ap-ev-weten .ap-ev-ic{ width:18px; height:18px; color:#93A2B8; flex:0 0 18px; margin-top:1px; }
.ap-ev-weten__titel{ font-size:13px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-weten__tx{ font-size:12.5px !important; font-weight:400 !important; line-height:1.6 !important; color:#6B7A93 !important; margin-top:4px; }

/* ============================ 5. AANMELDKAART ============================ */
.ap-ev-aanmeld{ background:#fff; border:1px solid #E7EBF2; border-radius:16px; box-shadow:0 1px 1px rgba(16,35,64,.03), 0 14px 34px -22px rgba(16,35,64,.55); overflow:hidden; }

/* Toestanden: precies één paneel zichtbaar. */
.ap-ev-panel{ display:none; }
.ap-ev-aanmeld[data-state="open"]     .ap-ev-panel--open{ display:flex; }
.ap-ev-aanmeld[data-state="aangemeld"] .ap-ev-panel--done{ display:flex; }
.ap-ev-aanmeld[data-state="afgemeld"]  .ap-ev-panel--gone{ display:flex; }

/* Statusmelding (ok/gewijzigd/vol/error). */
.ap-ev-melding{ margin:14px 20px 0; padding:10px 12px; border-radius:10px; font-size:12px !important; font-weight:500 !important; line-height:1.45; }
.ap-ev-melding--ok{ background:#E9F8EF; color:#1B7A4B !important; border:1px solid #CDEEDC; }
.ap-ev-melding--err{ background:#FBE9E7; color:#B0403A !important; border:1px solid #E3B8B4; }

/* ---------------------- 5a. OPEN (formulier) ---------------------- */
.ap-ev-panel--open{ padding:20px 20px 18px; flex-direction:column; gap:15px; }
.ap-ev-form__titel{ font-size:16px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-form__sub{ font-size:12.5px !important; font-weight:400 !important; color:#6B7A93 !important; margin-top:3px; }
.ap-ev-veld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-ev-veld__label{ display:flex; align-items:center; gap:6px; font-size:11.5px !important; font-weight:550 !important; color:#42536B !important; }
.ap-ev-veld__opt{ font-size:11px !important; font-weight:400 !important; color:#8B99AE !important; }
.ap-event .ap-ev-veld input[type="text"]{ width:100% !important; height:40px; padding:0 12px; border-radius:10px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:13px !important; font-weight:400 !important; color:#0C1F3F !important; }
.ap-event .ap-ev-veld input:focus{ outline:none; border-color:#1B4DE4 !important; }
.ap-event .ap-ev-veld input::placeholder{ color:#A6B2C4; }

/* Radiokaarten (doel). */
.ap-ev-doelen{ display:flex; flex-direction:column; gap:6px; }
.ap-event .ap-ev-doel{ display:flex; align-items:flex-start; text-align:left; gap:11px; padding:10px 12px; border-radius:10px; border:1px solid #DDE3ED; background:#fff !important; cursor:pointer; transition:border-color .14s, background .14s; }
.ap-ev-doel:hover{ border-color:#C9D4E6; }
.ap-ev-doel__radio{ flex:0 0 16px; width:16px; height:16px; border-radius:50%; border:1.5px solid #C9D4E6; margin-top:1px; display:grid; place-items:center; transition:border-color .14s; }
.ap-ev-doel__radio::after{ content:""; width:8px; height:8px; border-radius:50%; background:#1B4DE4; transform:scale(0); transition:transform .14s; }
.ap-event .ap-ev-doel__tx{ flex:1 1 auto; text-align:left; }
.ap-ev-doel__tx b{ display:block; font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F !important; line-height:1.25; }
.ap-ev-doel__tx span{ display:block; font-size:11.5px !important; font-weight:400 !important; color:#7A889E !important; margin-top:1px; }
.ap-ev-doel.is-actief{ background:#F5F8FE !important; border-color:#1B4DE4; }
.ap-ev-doel.is-actief .ap-ev-doel__radio{ border-color:#1B4DE4; }
.ap-ev-doel.is-actief .ap-ev-doel__radio::after{ transform:scale(1); }

/* Dieetwensen. */
.ap-event .ap-ev-veld--dieet input{ width:100% !important; }

/* Introducees-teller. */
.ap-ev-teller{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px 7px 14px; border-radius:10px; border:1px solid #DDE3ED; background:#fff; }
.ap-ev-teller__tx{ font-size:12.5px !important; font-weight:500 !important; color:#7A889E !important; min-width:0; }
.ap-ev-teller__tx.is-vol{ color:#0C1F3F !important; }
.ap-ev-teller__ctrl{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ap-event .ap-ev-teller__knop{ width:28px !important; height:28px !important; border-radius:7px; border:1px solid #DDE3ED !important; background:#fff !important; color:#42536B !important; display:grid; place-items:center; padding:0; cursor:pointer; font-size:16px !important; line-height:1; transition:border-color .14s, background .14s; }
.ap-event .ap-ev-teller__knop:hover:not(:disabled){ border-color:#1B4DE4 !important; color:#1B4DE4 !important; }
.ap-event .ap-ev-teller__knop:disabled{ opacity:.4; cursor:default; }
.ap-ev-teller__getal{ min-width:16px; text-align:center; font-size:14px !important; font-weight:600 !important; font-variant-numeric:tabular-nums; color:#0C1F3F !important; }
.ap-ev-hulp{ font-size:11.5px !important; font-weight:400 !important; color:#8B99AE !important; }

/* Aanmeldknop. */
.ap-event .ap-ev-submit{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100% !important; height:44px; border-radius:11px; border:0; background:#1B4DE4 !important; color:#fff !important; font-size:13.5px !important; font-weight:600 !important; cursor:pointer; transition:background .15s, box-shadow .15s; }
.ap-event .ap-ev-submit:hover{ background:#143BB0 !important; box-shadow:0 3px 14px rgba(27,77,228,.28); }
.ap-event .ap-ev-submit:disabled{ background:#9CA9C2 !important; cursor:default; box-shadow:none; }
.ap-ev-submit i{ font-size:15px; }

/* ---------------------- 5b/5c. AANGEMELD / AFGEMELD ---------------------- */
.ap-ev-panel--done, .ap-ev-panel--gone{ padding:20px; flex-direction:column; gap:15px; }
.ap-ev-status__kop{ display:flex; align-items:center; gap:13px; }
.ap-ev-status__ic{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:0 0 42px; }
.ap-ev-status__ic--ok{ background:#E9F8EF; color:#2FA96B; }
.ap-ev-status__ic--ok i{ font-size:22px; color:#2FA96B; }
.ap-ev-status__ic--gone{ background:#FBE9E7; color:#B0403A; }
.ap-ev-status__ic .ap-ev-ic{ width:22px; height:22px; }
.ap-ev-status__titel{ font-size:15px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-status__sub{ font-size:12.5px !important; font-weight:400 !important; color:#6B7A93 !important; margin-top:2px; }

.ap-ev-samenvatting{ border:1px solid #EDF1F7; border-radius:11px; overflow:hidden; }
.ap-ev-samenvatting__rij{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; background:#FAFBFE; font-size:12.5px !important; }
.ap-ev-samenvatting__rij + .ap-ev-samenvatting__rij{ border-top:1px solid #EDF1F7; }
.ap-ev-samenvatting__k{ font-weight:400 !important; color:#6B7A93 !important; }
.ap-ev-samenvatting__v{ font-weight:550 !important; color:#0C1F3F !important; text-align:right; }

.ap-ev-verwijs{ display:flex; gap:11px; padding:12px 13px; border-radius:11px; background:#F5F8FE; border:1px solid #E1E9FA; }
.ap-ev-verwijs .ap-ev-ic{ width:16px; height:16px; color:#1B4DE4; flex:0 0 16px; margin-top:1px; }
.ap-ev-verwijs__titel{ font-size:12.5px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-verwijs__sub{ font-size:11.5px !important; font-weight:400 !important; line-height:1.5 !important; color:#6B7A93 !important; margin-top:2px; }

.ap-event .ap-ev-agenda{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100% !important; height:36px; border-radius:10px; border:1px solid #DDE3ED !important; background:#fff !important; color:#0C1F3F !important; font-size:12.5px !important; font-weight:550 !important; cursor:pointer; transition:border-color .14s, background .14s; }
.ap-event .ap-ev-agenda:hover{ border-color:#1B4DE4 !important; }
.ap-event .ap-ev-agenda.is-klaar{ color:#1B7A4B !important; border-color:#CDEEDC !important; background:#EFFAF3 !important; }
.ap-ev-agenda .ap-ev-ic{ width:15px; height:15px; }

.ap-ev-acties{ display:flex; gap:8px; }
.ap-event .ap-ev-actie{ flex:1 1 0; height:36px; border-radius:10px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:12.5px !important; font-weight:550 !important; cursor:pointer; color:#0C1F3F !important; transition:border-color .14s, background .14s, color .14s; }
.ap-event .ap-ev-actie--wijzig:hover{ border-color:#1B4DE4 !important; color:#1B4DE4 !important; }
.ap-event .ap-ev-actie--af{ border-color:#E3B8B4 !important; color:#B0403A !important; }
.ap-event .ap-ev-actie--af:hover{ background:#B0403A !important; border-color:#B0403A !important; color:#fff !important; }

/* 5c: knop opnieuw aanmelden. */
.ap-event .ap-ev-opnieuw{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100% !important; height:38px; border-radius:10px; border:1px solid #1B4DE4 !important; background:transparent !important; color:#1B4DE4 !important; font-size:13px !important; font-weight:600 !important; cursor:pointer; transition:background .14s; }
.ap-event .ap-ev-opnieuw:hover{ background:#F2F6FE !important; }

/* ---------------------- 5d. Bezettingsvoet ---------------------- */
.ap-ev-voet{ padding:14px 20px; background:#FAFBFE; border-top:1px solid #EEF1F7; }
.ap-ev-voet__rij{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ap-ev-voet__bezet{ font-size:11.5px !important; font-weight:400 !important; color:#6B7A93 !important; }
.ap-ev-voet__vrij{ font-size:11.5px !important; font-weight:550 !important; color:#2FA96B !important; }
.ap-ev-voet__vrij.is-vol{ color:#B0403A !important; }
.ap-ev-bar{ height:4px; border-radius:999px; background:#E7EBF2; overflow:hidden; }
.ap-ev-bar__fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#1B4DE4,#4C7BFF); }

/* ============================ 6. INTERESSANT VOOR JOU ============================ */
.ap-ev-suggesties{ background:#fff; border:1px solid #E7EBF2; border-radius:16px; box-shadow:0 1px 1px rgba(16,35,64,.03), 0 14px 34px -22px rgba(16,35,64,.55); overflow:hidden; }
.ap-ev-suggesties__kop{ padding:16px 18px 13px; }
.ap-ev-suggesties__titel{ display:flex; align-items:center; gap:8px; font-size:13.5px !important; font-weight:600 !important; color:#0C1F3F !important; }
.ap-ev-suggesties__titel .ap-ev-ic{ width:16px; height:16px; color:#1B4DE4; }
.ap-ev-suggesties__sub{ font-size:12px !important; font-weight:400 !important; color:#7A889E !important; margin-top:4px; line-height:1.45; }
.ap-ev-sug{ display:flex; align-items:center; gap:11px; padding:12px 18px; box-shadow:0 0 0 1px #F5F7FB; transition:background .14s; }
.ap-ev-sug:hover{ background:#FAFBFE; }
.ap-ev-sug__logo{ width:34px; height:34px; border-radius:9px; flex:0 0 34px; background:#F2F5FA; border:1px solid #E7EBF2; display:grid; place-items:center; overflow:hidden; font-size:12px !important; font-weight:600 !important; color:#42536B !important; }
.ap-ev-sug__logo img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.ap-ev-sug__tx{ flex:1 1 auto; min-width:0; }
.ap-ev-sug__naam{ font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-ev-sug__meta{ font-size:11.5px !important; font-weight:400 !important; color:#8B99AE !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-ev-sug__caret{ width:14px; height:14px; color:#B3BFD1; flex:0 0 14px; }
.ap-ev-suggesties__leeg{ padding:14px 18px 16px; font-size:12px !important; font-weight:400 !important; line-height:1.55 !important; color:#6B7A93 !important; box-shadow:0 0 0 1px #F5F7FB; }

/* ============================ 7. CONTACTKAART ============================ */
.ap-ev-contact{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; border:1px solid #E7EBF2; background:#fff; }
.ap-ev-contact__ic{ width:36px; height:36px; border-radius:10px; flex:0 0 36px; background:#F2F5FA; display:grid; place-items:center; color:#42536B; }
.ap-ev-contact__ic .ap-ev-ic{ width:17px; height:17px; }
.ap-ev-contact__titel{ font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F !important; }
.ap-ev-contact__mail{ display:inline-block; font-size:11.5px !important; font-weight:400 !important; color:#7A889E !important; margin-top:2px; }
.ap-ev-contact__mail:hover{ color:#1B4DE4 !important; }

/* ============================ 8. MOBIEL (<=720px) ============================ */
@media (max-width:720px){
	.ap-ev-hero{ min-height:340px; }
	.ap-ev-hero__in{ padding:30px 20px 24px; }
	.ap-ev-hero__titel{ font-size:32px !important; }
	.ap-ev-hero__intro{ font-size:14px !important; }
	.ap-ev-feiten{ grid-template-columns:repeat(2, minmax(0,1fr)); }
	.ap-ev-share{ right:16px; bottom:16px; }

	/* VOLLE BREEDTE OP MOBIEL.
	   Op desktop staan de twee kolommen naast elkaar en is align-items:flex-start
	   goed. Zodra het een kolom wordt betekent diezelfde regel "niet uitrekken,
	   maar zo smal als de inhoud", en dan houdt de witte kaart rechts ruimte over.
	   Daarom hier terug naar stretch. Ook de flex-waarden moeten terug: in een
	   kolom slaat de basis van 330px op de HOOGTE, niet op de breedte.
	   De zijmarge van 16px is dezelfde als op de andere schermen. */
	.ap-ev-body{ flex-direction:column; align-items:stretch; padding:20px 16px 40px; gap:20px; }
	/* Aanmeldkolom komt direct onder de hero, vóór het programma. */
	.ap-ev-main{ order:2; width:100%; flex:0 0 auto; }
	.ap-ev-side{ order:1; position:static; top:auto; width:100%; flex:0 0 auto; }

	.ap-event .ap-ev-veld input[type="text"]{ height:46px; }
	.ap-ev-doel{ min-height:48px; }
	.ap-event .ap-ev-submit{ height:48px; }
	.ap-event .ap-ev-agenda,
	.ap-event .ap-ev-actie,
	.ap-event .ap-ev-opnieuw{ min-height:44px; }
	.ap-event .ap-ev-teller__knop{ width:32px !important; height:32px !important; }
}