/* Pas hier de kleuren aan op het thema. */
.hj-form { --hj-accent:#1d4354; --hj-accent-dark:#3e0836; --hj-tint:rgba(255,255,255,.45); --hj-border:#cfd6da; --hj-line:rgba(29,67,84,.35); --hj-card:rgba(255,255,255,.22); --hj-text:#1f2a30; max-width:720px; color:var(--hj-text); font-size:1.1rem; }
.hj-form *, .hj-form *::before, .hj-form *::after { box-sizing:border-box; }

/* Blokken als witte kaarten */
.hj-form fieldset { min-width:0; background:var(--hj-card); border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:24px 26px; margin:0 0 20px; }
.hj-form legend { float:left; width:100%; padding:0; margin:0 0 16px; font-size:1.3em; font-weight:700; color:var(--hj-accent); }
.hj-form legend + * { clear:both; }

.hj-form label { display:block; margin:0 0 6px; font-size:1em !important; font-weight:600; color:var(--hj-text); }
.hj-form input[type=text], .hj-form input[type=email], .hj-form input[type=tel], .hj-form input[type=number] {
	display:block; width:100%; height:48px; margin:6px 0 0; padding:0 14px; background:#fff; color:var(--hj-text);
	border:1.5px solid var(--hj-border); border-radius:10px; font:inherit; font-weight:400; line-height:normal; box-shadow:none;
}
.hj-form input:focus { border-color:var(--hj-accent); outline:3px solid rgba(29,67,84,.25); outline-offset:0; }
.hj-form input[type=checkbox], .hj-form input[type=radio] { width:20px; height:20px; margin:0; accent-color:var(--hj-accent); flex:none; }

.hj-row { margin:0 0 16px; }
.hj-half { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hj-addr { display:grid; grid-template-columns:160px 1fr; gap:16px; }
.hj-half label, .hj-addr label { margin:0; }

/* Keuze persoon / vereniging als twee tegels */
.hj-type { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hj-type legend { grid-column:1 / -1; }
.hj-type label, .hj-act-check, .hj-inline { display:flex; align-items:center; gap:10px; margin:0; font-weight:600; cursor:pointer; }
.hj-type label { padding:14px 16px; border:1.5px solid var(--hj-line); border-radius:12px; }
.hj-type label:has(input:checked) { border-color:var(--hj-accent); background:var(--hj-tint); }

/* Activiteiten als kaarten */
.hj-card { border:1.5px solid var(--hj-line); border-radius:12px; padding:14px 16px; margin:0 0 12px; }
.hj-card:has(.hj-act-check input:checked) { border-color:var(--hj-accent); background:var(--hj-tint); }
.hj-act { display:grid; grid-template-columns:13em auto auto 1fr; align-items:end; column-gap:20px; row-gap:10px; }
.hj-act-check { min-height:48px; }
.hj-sub { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--hj-line); }
.hj-act-n { display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0; font-weight:600; }
.hj-act-n input[type=number] { width:90px; margin:6px 0 0; text-align:center; }
.hj-card:not(:has(.hj-act-check input:checked)) .hj-act-n, .hj-card:not(:has(.hj-act-check input:checked)) .hj-sub { display:none; }

/* Knop (overschrijft de thema-knop) */
.hj-form .hj-submit { display:inline-block; width:auto; height:auto; padding:14px 32px; background:var(--hj-accent) none; color:#fff; border:0; border-radius:10px; font:inherit; font-weight:700; text-shadow:none; box-shadow:none; cursor:pointer; transition:background .15s; }
.hj-form .hj-submit:hover, .hj-form .hj-submit:focus-visible { background:var(--hj-accent-dark) none; }
.hj-form .hj-submit:focus-visible { outline:3px solid #fff; outline-offset:2px; }

.hj-hp { position:absolute; left:-9999px; }
.hj-notice { padding:16px 20px; border-radius:12px; margin-bottom:20px; background:#fff; border-left:6px solid var(--hj-accent); }
.hj-ok { border-left-color:#2e7d4f; }
.hj-error { border-left-color:#cf2e2e; }
.hj-error ul { margin:6px 0 0 18px; }

/* Zichtbaarheid per type (met JS gezet via data-type) */
.hj-form[data-type=persoon] .hj-vereniging, .hj-form[data-type=persoon] .hj-vereniging-act, .hj-form[data-type=persoon] .hj-who-vereniging { display:none; }
.hj-form[data-type=vereniging] .hj-persoon-act, .hj-form[data-type=vereniging] .hj-who-persoon, .hj-form[data-type=vereniging] .hj-persoon-only { display:none; }
.hj-contact { display:none; }
.hj-form.hj-show-contact .hj-contact { display:block; }
/* Verenigingsvelden staan los van een fieldset: geef ze dezelfde kaart-look */
.hj-vereniging { background:var(--hj-card); border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:24px 26px 10px; margin:0 0 20px; }
.hj-vereniging .hj-contact { background:var(--hj-tint); padding:18px; }
@media (max-width:560px) { .hj-act { grid-template-columns:1fr 1fr; } .hj-act-check { grid-column:1 / -1; } .hj-half, .hj-addr, .hj-type, .hj-ver-row { grid-template-columns:1fr; } .hj-form fieldset, .hj-vereniging { padding:18px; } }

/* Thema-stijlen neutraliseren: paarse balken achter labels/alinea's en scheve checkboxes */
.hj-form p, .hj-form label, .hj-form div, .hj-form legend { background:transparent !important; }
.hj-form p { margin-top:0; }
.hj-form input[type=checkbox], .hj-form input[type=radio] { margin:0 !important; padding:0 !important; position:static !important; vertical-align:middle; align-self:center; }
.hj-form .hj-act-check, .hj-form .hj-type label { line-height:1.3; }
.hj-form .hj-card { background:transparent !important; }
.hj-form .hj-card:has(.hj-act-check input:checked) { background:var(--hj-tint) !important; }
.hj-form .hj-type label:has(input:checked) { background:var(--hj-tint) !important; }
.hj-form .hj-vereniging { background:var(--hj-card) !important; }
.hj-form .hj-vereniging .hj-contact { background:var(--hj-tint) !important; }
.hj-form fieldset { background:var(--hj-card) !important; }

/* Focusring rond bij radio/checkbox (geen grijs vierkant) */
.hj-form input[type=radio]:focus, .hj-form input[type=checkbox]:focus { outline:none; }
.hj-form input[type=radio]:focus-visible { outline:2px solid var(--hj-accent); outline-offset:2px; border-radius:50%; }
.hj-form input[type=checkbox]:focus-visible { outline:2px solid var(--hj-accent); outline-offset:2px; }
.hj-form .hj-vereniging-act p { font-size:1em; }

/* Vereniging: naam en aantal op één regel */
.hj-ver-row { display:grid; grid-template-columns:1fr 9em; gap:16px; }
.hj-ver-row label { margin:0; }
/* Invoer even groot als de rest van de tekst (thema maakt cijfers kleiner) */
.hj-form input[type=text], .hj-form input[type=email], .hj-form input[type=tel], .hj-form input[type=number] { font-size:1em !important; }

/* Kapeltekst even groot en dik als de overige labels */
.hj-form .hj-vereniging-act p, .hj-form .hj-vereniging-act strong { font-size:1em !important; font-weight:600 !important; line-height:1.3; color:var(--hj-text); margin:0; }

/* Vaste tekstgrootte (rem), los van de em-instellingen van het thema */
.hj-form fieldset, .hj-form label, .hj-form p, .hj-form strong, .hj-form span, .hj-form button { font-size:1.15rem !important; }
.hj-form legend { font-size:1.35rem !important; }
.hj-form .hj-vereniging-act p, .hj-form .hj-vereniging-act strong { font-size:1.15rem !important; font-weight:600 !important; }
.hj-form input[type=text], .hj-form input[type=email], .hj-form input[type=tel], .hj-form input[type=number] { font-size:1.15rem !important; }

/* Activiteit- en keuze-labels: geen thema-hoogtes of marges */
.hj-form .hj-act-check, .hj-form .hj-type label { display:flex !important; align-items:center !important; height:auto !important; padding-top:0; padding-bottom:0; margin:0 !important; line-height:1.3 !important; }
.hj-form .hj-type label { padding:14px 16px !important; }
.hj-form .hj-act-check { min-height:48px; }
.hj-form .hj-act { min-height:0; }

/* Geen vierkant kader rond de gekozen radioknop */
.hj-form input[type=radio], .hj-form input[type=radio]:focus { outline:none !important; box-shadow:none !important; border-radius:50% !important; }

/* Sluitingsdatum onder een activiteit */
.hj-form .hj-deadline { margin:8px 0 0 !important; font-size:1rem !important; font-weight:400 !important; font-style:italic; color:var(--hj-text); }
