/* ═══════════════════════════════════════════════════════════
   ZONAARDE AANMELDPORTAAL — formulier styling
   Matched met homepage tijdlijn + wanneer-aanmelden widget
═══════════════════════════════════════════════════════════ */

.zap-form-wrap {
  font-family: 'Lato', -apple-system, sans-serif;
  color: #313131;
  max-width: 620px;
  margin: 28px auto;
}
.zap-form-wrap.zap-rtl { direction: rtl; }

.zap-form {
  background: #fff;
  padding: 32px 36px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 28px rgba(0,149,235,.10), 0 1px 4px rgba(0,0,0,.06);
}

.zap-form label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #313131;
  margin-bottom: 8px;
}

.zap-form input[type=email],
.zap-form input[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  border: 1.5px solid #99D4F8;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.2;
  font-family: inherit;
  color: #313131;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.zap-form input[type=email]:focus,
.zap-form input[type=date]:focus {
  outline: none;
  border-color: #0095EB;
  box-shadow: 0 0 0 3px rgba(0,149,235,.18);
}
.zap-form input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
  padding: 2px;
}

.zap-field { margin-bottom: 20px; }

.zap-children { margin-bottom: 22px; }
.zap-children > label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}
.zap-child-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.zap-child-row input[type=date] { flex: 1; }
.zap-remove {
  background: transparent;
  border: 1.5px solid #E0E0E0;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 50%;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: Arial, sans-serif;
}
.zap-remove:hover {
  color: #fff;
  background: #d32f2f;
  border-color: #d32f2f;
}

.zap-add-child {
  background: #0095EB;
  border: none;
  color: #fff;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  transition: background .15s, transform .1s;
  box-shadow: 0 2px 8px rgba(0,149,235,.18);
}
.zap-add-child:hover {
  background: #0077C0;
  transform: translateY(-1px);
}

.zap-avg {
  margin-top: 4px;
  padding: 14px 16px;
  background: #F5F5F5;
  border-radius: 8px;
}
.zap-avg label {
  font-weight: 400;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 0;
}
.zap-avg input { margin-top: 4px; flex-shrink: 0; accent-color: #0095EB; }
.zap-avg-text { display: inline; }
.zap-avg-text a { color: #0077C0; text-decoration: underline; font-weight: 600; }

.zap-info {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 4px;
  vertical-align: middle;
  cursor: help;
}
.zap-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0095EB;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 1;
}
.zap-info-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: 80vw;
  padding: 10px 12px;
  background: #313131;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, visibility .15s;
  pointer-events: none;
  z-index: 10;
  font-weight: 400;
  text-align: left;
}
.zap-info-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #313131;
}
.zap-info:hover .zap-info-bubble,
.zap-info:focus .zap-info-bubble {
  opacity: 1;
  visibility: visible;
}
.zap-rtl .zap-info-bubble { text-align: right; }

.zap-submit {
  text-align: left;
  margin-top: 24px;
  text-align: left;
}
.zap-submit button {
  background: #0095EB;
  color: #fff;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,149,235,.22);
  transition: background .15s, transform .1s;
  min-width: 200px;
}
.zap-submit button:hover {
  background: #0077C0;
  transform: translateY(-1px);
}
.zap-submit button:active {
  transform: translateY(0);
}
/* Disabled-state: dezelfde normale themakleur, alleen met opacity 0.55 en
   cursor not-allowed — geen aparte bleke kleur die de interface "flets" maakt. */
.zap-submit button:disabled,
.zap-submit button.zap-disabled {
  background: #0095EB;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.55;
  transform: none;
}
.zap-submit button:disabled:hover,
.zap-submit button.zap-disabled:hover {
  background: #0095EB;
  transform: none;
}

/* ─── Meldingen ──────────────────────────────────────── */
.zap-msg {
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  border-left: 4px solid;
}
.zap-msg-success {
  background: #EAF7EF;
  color: #2E7D4F;
  border-left-color: #4CAF72;
}
.zap-msg-error {
  background: #FEF5E4;
  color: #7A4F00;
  border-left-color: #F5A623;
}
.zap-msg ul { margin: 0; padding-left: 20px; }
.zap-rtl .zap-msg ul { padding-left: 0; padding-right: 20px; }

/* ─── Inzage-pagina ──────────────────────────────────── */
.zap-inzage-wrap {
  font-family: 'Lato', -apple-system, sans-serif;
  color: #313131;
  max-width: 760px;
  margin: 28px auto;
  background: #fff;
  padding: 32px 36px;
  border-radius: 14px;
  box-shadow: 0 4px 28px rgba(0,149,235,.10), 0 1px 4px rgba(0,0,0,.06);
}
.zap-inzage-wrap h3,
.zap-inzage-wrap h4 {
  color: #0077C0;
  margin-top: 22px;
  margin-bottom: 12px;
}
.zap-inzage-wrap h3:first-child { margin-top: 0; }
.zap-inzage-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.zap-inzage-wrap th {
  text-align: left;
  padding: 12px 10px;
  background: #F2F8FD;
  color: #0077C0;
  font-weight: 700;
  border-bottom: 2px solid #99D4F8;
}
.zap-inzage-wrap td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid #EEE;
  vertical-align: top;
}
.zap-inzage-wrap .zap-status-actief {
  color: #2E7D4F;
  font-weight: 700;
  background: #EAF7EF;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.zap-inzage-wrap .zap-status-ingeschreven {
  color: #0077C0;
  font-weight: 700;
  background: #E5F4FD;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.zap-inzage-wrap .zap-status-gearchiveerd {
  color: #757575;
  font-weight: 700;
  background: #F5F5F5;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.zap-status-uitleg {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.45;
  font-style: italic;
}
.zap-afgerond-tekst {
  color: #7A4F00;
  background: #FEF5E4;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  display: block;
}
.zap-row-afgerond { opacity: .8; }
.zap-inzage-wrap form.zap-inline { display: inline; }
.zap-btn-danger {
  background: transparent;
  border: 1.5px solid #d32f2f;
  color: #d32f2f;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  transition: all .15s;
}
.zap-btn-danger:hover {
  background: #d32f2f;
  color: #fff;
}
.zap-inzage-wrap input[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 12px;
  min-height: 42px;
  border: 1.5px solid #99D4F8;
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
}
.zap-inzage-wrap input[type=date]:focus {
  outline: none;
  border-color: #0095EB;
  box-shadow: 0 0 0 3px rgba(0,149,235,.18);
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 620px) {
  .zap-form,
  .zap-inzage-wrap {
    padding: 22px 18px;
    border-radius: 12px;
  }
  .zap-submit button { width: 100%; }
  .zap-inzage-wrap table { font-size: 13px; }
  .zap-inzage-wrap th,
  .zap-inzage-wrap td { padding: 10px 6px; }
}