:root {
  --brand-color: #a61f67;
}
#confirmation {
  position: sticky;
  top: 0;
  background-color: #fdf0f6;
  padding: 1rem;
  border-left: 4px solid var(--brand-color);
  margin-bottom: 1rem;
  display: none;
}



/* Matchingstool */



/* Formulier container styling */
.max-w-4xl {
  max-width: 64rem; /* of gebruik Tailwind als je dat al doet */
}


/* Checkboxgroep in 1 kolom op mobiel, 2 kolommen vanaf sm (640px) */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem; /* vergelijkbaar met Tailwind gap-3 */
  padding-left: 0;
  margin-left: 0;
}

@media (min-width: 640px) {
  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Checkbox label-uitlijning: checkbox links, tekst ernaast */
.form-checkbox-label {
  display: flex;
  align-items: flex-start; /* checkbox staat verticaal aan de bovenkant */
  gap: 0.75rem;
  font-size: 0.875rem; /* vergelijkbaar met Tailwind text-sm */
  text-align: left;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
}

/* Checkbox zelf — maak hem zichtbaar, strak en in merkkleur */
.form-checkbox-label input[type="checkbox"] {
  margin: 0; /* GEEN margin-top */
  padding: 0;
  width: 1rem !important;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--brand-color); /* gebruik je eigen CSS custom property hier */
  position: relative;
  top: 2px; /* optisch centreren t.o.v. tekst */
}