.cg-form {
  display: block;
}

.cg-form__row {
  margin-bottom: 16px;
}

.cg-form__row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.cg-form__row input,
.cg-form__row textarea {
  width: 100%;
  border: 1px solid #d9dbe6;
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
}

.cg-form__row textarea {
  min-height: 120px;
  resize: vertical;
}

.cg-form__error {
  color: #d1384a;
  font-size: 13px;
  min-height: 18px;
  margin: 6px 0 0;
}

.cg-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.cg-form__message {
  margin: 0;
  font-size: 14px;
}

.cg-form__message.is-error {
  color: #d1384a;
}

.popup-form .cg-form {
  margin-top: 12px;
}

.footer .accordion .accordion__title {
  cursor: pointer;
}

/* Supress build has hidden-on-load animation states; in this local setup we render immediately. */
[data-animate='fade-in'],
[data-animate='fade-to-top'],
[data-animate='fade-to-bottom'],
[data-animate='fade-to-left'],
[data-animate='fade-to-right'],
[data-animate='text'] {
  opacity: 1 !important;
  transform: none !important;
}

[data-animate='text'] .animate-item {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ===================================================
   Connect section (donkere achtergrond) - cg-form
   =================================================== */

/* Grid layout: 2 kolommen zoals Gravity Forms */
.connect .cg-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.connect .cg-form__fields .cg-form__row--full {
  grid-column: 1 / -1;
}

/* Labels: wit */
.connect .cg-form__row label {
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Inputs: transparant, witte tekst, alleen bottom border */
.connect .cg-form__row input,
.connect .cg-form__row textarea,
.connect .cg-form__row select {
  background-color: transparent;
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.175);
  border-radius: 0;
  padding: 8px 0;
}

.connect .cg-form__row input::placeholder,
.connect .cg-form__row textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.connect .cg-form__row input:focus,
.connect .cg-form__row textarea:focus {
  outline: none;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Error tekst */
.connect .cg-form__error {
  color: #ff8080;
}

/* Submit button: wit met donkere tekst */
.connect .cg-form__actions .btn,
.connect .cg-form__actions button[type='submit'],
.connect .cg-form button.button {
  color: #000E43;
  background-color: #fff;
  border-radius: var(--size-radius-btn, 9999px);
}
.connect .cg-form__actions .btn:hover,
.connect .cg-form__actions button[type='submit']:hover {
  background-color: #7E90FF;
  color: #000E43;
}

/* Checkbox/consent styling */
.connect .cg-form__row input[type='checkbox'] {
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  width: 16px;
  height: 16px;
}
.connect .cg-form .form-check__text,
.connect .cg-form .gfield_consent_label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

/* 2-koloms grid voor cg-form in connect sectie */
.connect .cg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

/* Hidden inputs nemen geen grid ruimte */
.connect .cg-form input[type='hidden'] {
  display: none;
}

/* Alle rows standaard half-breed */
.connect .cg-form .cg-form__row {
  grid-column: span 1;
}

/* Adres, bericht, consent, submit = full breedte */
.connect .cg-form .cg-form__row:has(input[name='address']),
.connect .cg-form .cg-form__row:has(textarea),
.connect .cg-form .cg-form__row:has(input[type='checkbox']),
.connect .cg-form .cg-form__actions {
  grid-column: 1 / -1;
}

/* Override: connect__form sets color: #000E43 on all children - wij overschrijven dat */
.connect .connect__form .cg-form label,
.connect .connect__form .cg-form .cg-form__row label {
  color: #fff !important;
}
.connect .connect__form .cg-form input:not([type='hidden']):not([type='checkbox']):not([type='submit']),
.connect .connect__form .cg-form textarea,
.connect .connect__form .cg-form select {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.175) !important;
  background-color: transparent !important;
}
.connect .connect__form .cg-form input::placeholder,
.connect .connect__form .cg-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}