/* ==========================================================================
   WPForms in de huisstijl van Het Sportkamp
   Geldt voor formulieren met de klasse .hsk-wpform (gezet door het thema).
   ========================================================================== */

.hsk-wpform { margin-top: var(--space-xl); }
.hsk-wpform .wpforms-form { margin: 0; }

/* Raster: standaard volle breedte, .hsk-half = halve breedte */
.hsk-wpform .wpforms-field-container,
.hsk-wpform .hsk-step-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-m);
}

.hsk-wpform .wpforms-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.hsk-wpform .wpforms-field[hidden],
.hsk-wpform .child-block[hidden] { display: none !important; }

@media (min-width: 600px) {
  .hsk-wpform .wpforms-field-container,
  .hsk-wpform .hsk-step-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsk-wpform .wpforms-field.hsk-half { grid-column: span 1; }
}

/* Labels */
.hsk-wpform .wpforms-field-label,
.hsk-wpform legend.wpforms-field-label {
  display: block;
  margin: 0 0 var(--space-xs);
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--forest);
}

.hsk-wpform .wpforms-required-label { color: var(--berry); }

.hsk-wpform .wpforms-label-hide,
.hsk-wpform .wpforms-sublabel-hide {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hsk-wpform fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.hsk-wpform .wpforms-field-description {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Invoervelden */
.hsk-wpform input[type="text"],
.hsk-wpform input[type="email"],
.hsk-wpform input[type="tel"],
.hsk-wpform input[type="date"],
.hsk-wpform input[type="number"],
.hsk-wpform select,
.hsk-wpform textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 3.25rem;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(36, 98, 67, 0.2);
  border-radius: var(--radius-m);
  background-color: var(--white);
  box-shadow: none;
  font: inherit;
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.hsk-wpform textarea,
.hsk-wpform textarea.wpforms-field-large,
.hsk-wpform textarea.wpforms-field-small {
  min-height: 8rem;
  height: auto;
  resize: vertical;
}

.hsk-wpform select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23246243' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.hsk-wpform input:hover,
.hsk-wpform select:hover,
.hsk-wpform textarea:hover { border-color: rgba(36, 98, 67, 0.4); }

.hsk-wpform input:focus,
.hsk-wpform select:focus,
.hsk-wpform textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(84, 186, 108, 0.3);
}

/* Keuzelijsten */
.hsk-wpform .wpforms-field ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsk-wpform .wpforms-field li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Pillen (ja/nee, vriendjes) */
.hsk-wpform .hsk-pills ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hsk-wpform .hsk-pills input,
.hsk-wpform .hsk-camps input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.hsk-wpform .hsk-pills label.wpforms-field-label-inline {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1.1rem;
  border: 2px solid rgba(36, 98, 67, 0.2);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hsk-wpform .hsk-pills input:checked + label {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--white);
}

.hsk-wpform .hsk-pills input:focus-visible + label,
.hsk-wpform .hsk-camps input:focus-visible + label {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
}

/* Kampkeuze als kaarten */
.hsk-wpform .hsk-camps ul {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 640px) {
  .hsk-wpform .hsk-camps ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hsk-wpform .hsk-camps label.wpforms-field-label-inline {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  height: 100%;
  padding: var(--space-m) 3.5rem var(--space-m) var(--space-m);
  border: 2px solid rgba(36, 98, 67, 0.15);
  border-radius: var(--radius-m);
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--forest);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.hsk-wpform .hsk-camps label.wpforms-field-label-inline:hover { border-color: var(--apple); }

/* Vinkvakje rechts */
.hsk-wpform .hsk-camps label.wpforms-field-label-inline::after {
  content: "check";
  position: absolute;
  right: var(--space-m);
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: -0.95rem;
  border: 2px solid rgba(36, 98, 67, 0.3);
  border-radius: 0.55rem;
  font-family: "Material Symbols Rounded";
  font-size: 1.2rem;
  line-height: 1;
  color: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hsk-wpform .hsk-camps input:checked + label {
  border-color: var(--apple);
  background: var(--mint);
}

.hsk-wpform .hsk-camps input:checked + label::after {
  border-color: var(--apple);
  background: var(--apple);
  color: var(--white);
}

.hsk-wpform .hsk-camps .hsk-camp-dates {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Akkoord-vinkjes */
.hsk-wpform .hsk-consent li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
}

.hsk-wpform .hsk-consent input[type="checkbox"] {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  accent-color: var(--forest);
}

.hsk-wpform .hsk-consent label.wpforms-field-label-inline {
  font-weight: 400;
  color: var(--text);
}

.hsk-wpform .hsk-consent a { font-weight: 700; }

/* Foutmeldingen (WPForms en thema) */
.hsk-wpform label.wpforms-error,
.hsk-wpform em.wpforms-error,
.hsk-wpform .hsk-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 700;
  color: var(--berry);
}

.hsk-wpform .hsk-error::before {
  content: "error";
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-size: 1.1rem;
}

.hsk-wpform input.wpforms-error,
.hsk-wpform select.wpforms-error,
.hsk-wpform textarea.wpforms-error,
.hsk-wpform .hsk-has-error input:not([type="checkbox"]):not([type="radio"]),
.hsk-wpform .hsk-has-error select,
.hsk-wpform .hsk-has-error textarea { border-color: var(--berry); }

.hsk-wpform .hsk-has-error.hsk-camps label.wpforms-field-label-inline,
.hsk-wpform .hsk-has-error.hsk-pills label.wpforms-field-label-inline { border-color: rgba(185, 30, 71, 0.5); }

.hsk-wpform .wpforms-error-container,
.hsk-wpform .wpforms-error-alert {
  margin-bottom: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 0;
  border-radius: var(--radius-m);
  background: rgba(185, 30, 71, 0.08);
  color: var(--berry);
  font-weight: 700;
}

/* Verstuurknop */
.hsk-wpform .wpforms-submit-container { padding: 0; margin: 0; }
.hsk-wpform .wpforms-submit-container .wpforms-submit { cursor: pointer; }
.hsk-wpform .wpforms-submit-spinner { margin-left: var(--space-s); }
.hsk-form-host--contact .wpforms-submit-container {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-xl);
}

/* Bevestiging na versturen */
.hsk-form-host .wpforms-confirmation-container,
.hsk-form-host .wpforms-confirmation-container-full {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
}

.hsk-form-host .wpforms-confirmation-container-full .form-success,
.hsk-form-host .wpforms-confirmation-container .form-success { padding-block: var(--space-xl); }

/* Melding als het formulier nog niet bestaat */
.form-missing {
  margin-top: var(--space-l);
  padding: var(--space-l);
  border: 2px dashed rgba(36, 98, 67, 0.3);
  border-radius: var(--radius-m);
  background: var(--peach-soft);
}

.form-missing p + p { margin-top: var(--space-s); }

/* --------------------------------------------------------------------------
   Inschrijven in stappen (opgebouwd door forms.js)
   -------------------------------------------------------------------------- */
/* De stappen hebben elk hun eigen raster; de buitenste laag is dan een gewoon blok */
.hsk-form-host.is-enhanced .wpforms-field-container { display: block; }
.hsk-wpform .form-step { display: block; }
.hsk-wpform .form-step[hidden] { display: none; }

.hsk-wpform .form-step__head { margin-bottom: var(--space-xl); }
.hsk-wpform .form-step__head .form-step__intro { margin: var(--space-xs) 0 0; }

.hsk-wpform .form-section__title {
  grid-column: 1 / -1;
  margin: var(--space-l) 0 calc(var(--space-s) * -1);
  padding-top: var(--space-l);
  border-top: 2px dashed rgba(36, 98, 67, 0.15);
}

.hsk-wpform .form-section__title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.hsk-wpform .child-block {
  grid-column: 1 / -1;
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--peach-soft);
}

.hsk-wpform .child-block .hsk-step-fields { gap: var(--space-m); }

.hsk-wpform .add-child { justify-self: start; grid-column: 1 / -1; margin-top: 0; }

.hsk-wpform .review { margin-bottom: var(--space-xl); }

.hsk-wpform .review__body dl {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.3rem var(--space-m);
  margin: 0;
}

.hsk-wpform .review__body dt { color: var(--text-muted); }
.hsk-wpform .review__body dd { margin: 0; font-weight: 700; color: var(--forest); overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .hsk-wpform .review__body dl { grid-template-columns: 1fr; }
  .hsk-wpform .review__body dd { margin-bottom: var(--space-xs); }
}

.hsk-wpform .form-actions .wpforms-submit-container[hidden] { display: none; }