/* =========================================================
   ChronoForms 8 – GLOBAL form styling
   Hangt aan wrappers met id="chronoform-..."
   ========================================================= */

/* (A) Algemene container: alleen “veilige” defaults */
[id^="chronoform-"]{
  max-width: 720px;
  width: 100%;
  margin: 0;        /* links uitgelijnd */
  padding: 0;
}

/* (B) Typografie: alleen spacing (geen kleuren/lettertypes afdwingen) */
[id^="chronoform-"] h1{ margin: 0 0 12px 0; }
[id^="chronoform-"] h2{ margin: 28px 0 10px 0; }
[id^="chronoform-"] p{
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* (C) Field spacing + labels */
[id^="chronoform-"] .field{ margin: 0 0 14px 0; }
[id^="chronoform-"] label{
  display: block;
  margin: 0 0 6px 0;
  font-weight: 600;
}

/* (D) Inputs (tekst, mail, pw, textarea, select) */
[id^="chronoform-"] input[type="text"],
[id^="chronoform-"] input[type="email"],
[id^="chronoform-"] input[type="password"],
[id^="chronoform-"] textarea,
[id^="chronoform-"] select{
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* (E) Focus accent */
[id^="chronoform-"] input[type="text"]:focus,
[id^="chronoform-"] input[type="email"]:focus,
[id^="chronoform-"] input[type="password"]:focus,
[id^="chronoform-"] textarea:focus,
[id^="chronoform-"] select:focus{
  border-color: #144273;
  box-shadow: 0 0 0 4px rgba(20,66,115,.14);
}

/* (F) Buttons (ChronoForms gebruikt vaak .ui.button of button.nui.button) */
[id^="chronoform-"] .ui.button,
[id^="chronoform-"] button.nui.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid #144273;
  background: #144273;
  color: #fff !important;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: opacity .15s ease, transform .05s ease, box-shadow .15s ease;
}

/* Hover/active (incl. template underline kill) */
[id^="chronoform-"] .ui.button:hover,
[id^="chronoform-"] button.nui.button:hover{
  opacity: .9;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  text-decoration: none !important;
}
[id^="chronoform-"] .ui.button:active,
[id^="chronoform-"] button.nui.button:active{
  transform: translateY(1px);
}

/* (G) Als ChronoForms extra classes meegeeft */
[id^="chronoform-"] button.nui.button.colored.slate{
  background: #144273 !important;
  border-color: #144273 !important;
  color: #fff !important;
}

/* (H) Kleine, rustige “verplicht” ster */
[id^="chronoform-"] .errormark{ opacity: .8; }

/* (I) Checkbox icon spacing (algemeen oké) */
[id^="chronoform-"] svg.fasvg.icon.square.unchecked.regular{
  margin-top: 2px;
}

/* (J) reCAPTCHA ruimte (v3 is onzichtbaar maar netjes) */
[id^="chronoform-"] .g-recaptcha{ margin: 6px 0 10px 0; }

/* (K) Mobiel: basis responsiviteit (je specials regel je per form) */
@media (max-width: 720px){
  [id^="chronoform-"]{ max-width: 100%; }
}

/* Multi-field naamvelden: stabiel grid */
[id^="chronoform-"] .equal.fields{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* voorkom dat child-fields buiten grid duwen */
[id^="chronoform-"] .equal.fields > .field{
  min-width: 0;
  width: auto !important; /* overridet inline width="10%" */
}

/* Naamvelden: Voornaam – Tussenvoegsel – Achternaam */
[id^="chronoform-"] .equal.fields:has(#voornaam):has(#tussenvoegsel):has(#achternaam){
  grid-template-columns: 2fr 1fr 2fr;
}

[id^="chronoform-"] #voornaam,
[id^="chronoform-"] #tussenvoegsel,
[id^="chronoform-"] #achternaam{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 720px){
  [id^="chronoform-"] .equal.fields:has(#voornaam):has(#tussenvoegsel):has(#achternaam){
    grid-template-columns: 1fr;
  }
}


/* mobiel: stapelen */
@media (max-width: 720px){
  [id^="chronoform-"] .equal.fields{
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }
}

/* =========================================================
   ChronoForms – readonly velden (EXCLUSIEF datumvelden)
   ========================================================= */

[id^="chronoform-"] input[readonly]:not([data-calendar]),
[id^="chronoform-"] textarea[readonly],
[id^="chronoform-"] select[readonly]{
  background-color: #f2f4f6;        /* lichtgrijs */
  color: #8a8f98;                   /* grijze tekst */
  border-color: rgba(0,0,0,.12);
  cursor: not-allowed;
}

/* Geen focus-accent voor echte readonly velden */
[id^="chronoform-"] input[readonly]:not([data-calendar]):focus,
[id^="chronoform-"] textarea[readonly]:focus,
[id^="chronoform-"] select[readonly]:focus{
  box-shadow: none;
  border-color: rgba(0,0,0,.12);
}

/* Placeholder ook rustiger */
[id^="chronoform-"] input[readonly]:not([data-calendar])::placeholder,
[id^="chronoform-"] textarea[readonly]::placeholder{
  color: #a0a5ad;
}

.nui.checkbox>label>svg {
    margin-top: 2px;
}

/* =========================================================
   ChronoForms – readonly velden (EXCLUSIEF datumvelden)
   ========================================================= */

[id^="chronoform-"] input[readonly]:not([data-calendar]),
[id^="chronoform-"] textarea[readonly],
[id^="chronoform-"] select[readonly]{
  background-color: #f2f4f6;        /* lichtgrijs */
  color: #8a8f98;                   /* grijze tekst */
  border-color: rgba(0,0,0,.12);
  cursor: not-allowed;
}

/* Geen focus-accent voor echte readonly velden */
[id^="chronoform-"] input[readonly]:not([data-calendar]):focus,
[id^="chronoform-"] textarea[readonly]:focus,
[id^="chronoform-"] select[readonly]:focus{
  box-shadow: none;
  border-color: rgba(0,0,0,.12);
}

/* Placeholder ook rustiger */
[id^="chronoform-"] input[readonly]:not([data-calendar])::placeholder,
[id^="chronoform-"] textarea[readonly]::placeholder{
  color: #a0a5ad;
}

th.nui a[href*="order_by"] {
   text-decoration: none;
}

/* ========== ChronoForm: aanmelden-school – uitzonderingen ========== */

/* Password icon layout (eye svg) */
#chronoform-aanmelden-school .input.iconed{ position: relative; }
#chronoform-aanmelden-school .input.iconed input{ padding-right: 44px; }
#chronoform-aanmelden-school .input.iconed .fasvg.icon.eye{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .65;
  cursor: pointer;
}
#chronoform-aanmelden-school .input.iconed .fasvg.icon.eye:hover{ opacity: .9; }


/* ========== ChronoForm: aanmelden-gastspreker – uitzonderingen ========== */

#chronoform-aanmelden-gastspreker h1{ margin: 0 0 10px 0; }
#chronoform-aanmelden-gastspreker h2{ margin: 16px 0 4px 0; }
#chronoform-aanmelden-gastspreker h3{ margin: 12px 0 4px 0; }

#chronoform-aanmelden-gastspreker ul{ margin: 0 0 14px 18px; }
#chronoform-aanmelden-gastspreker li{ margin: 0 0 6px 0; }


/* Provincies: forceer 2 kolommen, zonder andere checkboxgroepen te raken */
#chronoform-aanmelden-gastspreker .field_checkboxes.field.holder.provinces-holder > .nui.grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  align-items: start;
}
#chronoform-aanmelden-gastspreker .field_checkboxes.field.holder.provinces-holder > .nui.grid > .field{
  margin: 0 !important;
}
@media (max-width: 720px){
  #chronoform-aanmelden-gastspreker .field_checkboxes.field.holder.provinces-holder > .nui.grid{
    grid-template-columns: 1fr;
  }
}