/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.19.4.1678887278
Updated: 2023-03-15 14:34:38

*/

/* =========================================
   INSCHRIJVEN — FORM STYLING (scoped)
   Scope: elk element met .inschrijven-form
   Palet:
   --brand-red: #DD2334; --ink: #18282F; --muted: #525A5A; --border: #E4E3E3
   ========================================= */

.inschrijven-form {
  --brand-red: #DD2334;
  --brand-red-hover: #b91e2a;
  --ink: #18282F;
  --muted: #525A5A;
  --border: #E4E3E3;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(24, 40, 47, 0.08);
  --focus: 0 0 0 3px rgba(221, 35, 52, 0.25);
  color: var(--ink);
}

/* Container/kaart */
.inschrijven-form form,
.inschrijven-form .wpcf7 form,
.inschrijven-form .gform_wrapper form,
.inschrijven-form .wpforms-form,
.inschrijven-form .fluentform,
.inschrijven-form .fluent_form,
.inschrijven-form .nf-form-cont,
.inschrijven-form .nf-form-content,
.inschrijven-form .et_pb_contact_form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px) !important;
}

/* Titels/intro */
.inschrijven-form h2,
.inschrijven-form .gform_title,
.inschrijven-form .wpcf7-form .wpcf7-form-title {
  margin: 0 0 12px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
.inschrijven-form .gform_description,
.inschrijven-form .wpcf7-form p.intro,
.inschrijven-form .form-desc { color: var(--muted); }

/* Velden */
.inschrijven-form input[type="text"],
.inschrijven-form input[type="email"],
.inschrijven-form input[type="tel"],
.inschrijven-form input[type="url"],
.inschrijven-form input[type="number"],
.inschrijven-form input[type="password"],
.inschrijven-form select,
.inschrijven-form textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.inschrijven-form textarea { min-height: 130px; resize: vertical; }
.inschrijven-form ::placeholder { color: #8b8f91; opacity: 1; }
.inschrijven-form input:focus,
.inschrijven-form select:focus,
.inschrijven-form textarea:focus {
  outline: none;
  border-color: var(--brand-red) !important;
  box-shadow: var(--focus);
}

/* Labels & required */
.inschrijven-form label { display:inline-block; color:var(--ink); font-weight:600; margin:10px 0 6px; }
.inschrijven-form .required,
.inschrijven-form .gfield_required,
.inschrijven-form .wpcf7-form .required { color: var(--brand-red); margin-left: 4px; }

/* Grid (2 kolommen op ≥768px) */
@media (min-width: 768px) {
  /* Gravity, WPForms, Fluent, CF7 p-wrappers */
  .inschrijven-form .gform_fields,
  .inschrijven-form .wpforms-field-container,
  .inschrijven-form .ff-el-group-wrap,
  .inschrijven-form .wpcf7-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
  }
  /* Full-width voor lange velden */
  .inschrijven-form textarea,
  .inschrijven-form .gfield--width-full,
  .inschrijven-form .wpforms-field-textarea,
  .inschrijven-form .ff-el-textarea,
  .inschrijven-form .wpcf7-form .full {
    grid-column: 1 / -1;
  }
}

/* Select pijltje (basic) */
.inschrijven-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, #777 50%),
    linear-gradient(135deg, #777 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) 16px,
    calc(100% - 15px) 16px,
    100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 100%;
  background-repeat: no-repeat;
  padding-right: 42px !important;
}

/* Checkboxes & radios */
.inschrijven-form input[type="checkbox"],
.inschrijven-form input[type="radio"] {
  accent-color: var(--brand-red);
  width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px;
}

/* Help/validatie */
.inschrijven-form .help-text,
.inschrijven-form .gfield_description,
.inschrijven-form .wpforms-field-description,
.inschrijven-form .ff-el-help { color: var(--muted); font-size: 13px; margin-top: 6px; }

.inschrijven-form .error,
.inschrijven-form .gfield_validation_message,
.inschrijven-form .wpcf7-not-valid-tip,
.inschrijven-form .wpforms-error,
.inschrijven-form .ff-el-is-error .error { color:#9f1c27; font-size:13px; margin-top:6px; }

/* Submit button */
.inschrijven-form input[type="submit"],
.inschrijven-form button[type="submit"],
.inschrijven-form .et_pb_button,
.inschrijven-form .gform_button,
.inschrijven-form .wpcf7-submit,
.inschrijven-form .wpforms-submit,
.inschrijven-form .ff-btn-submit,
.inschrijven-form .ff_submit_btn_wrapper .ff-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 18px !important;
  background: var(--brand-red) !important;
  color: #fff !important;
  border: 1px solid var(--brand-red) !important;
  border-radius: var(--radius) !important;
  font-weight: 700; font-size: 16px; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: transform .06s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.inschrijven-form input[type="submit"]:hover,
.inschrijven-form button[type="submit"]:hover,
.inschrijven-form .et_pb_button:hover,
.inschrijven-form .gform_button:hover,
.inschrijven-form .wpcf7-submit:hover,
.inschrijven-form .wpforms-submit:hover,
.inschrijven-form .ff-btn-submit:hover {
  background: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
  transform: translateY(-1px);
}
.inschrijven-form input[type="submit"]:focus-visible,
.inschrijven-form button[type="submit"]:focus-visible,
.inschrijven-form .et_pb_button:focus-visible,
.inschrijven-form .gform_button:focus-visible,
.inschrijven-form .wpcf7-submit:focus-visible,
.inschrijven-form .wpforms-submit:focus-visible,
.inschrijven-form .ff-btn-submit:focus-visible { outline: none; box-shadow: var(--focus); }

/* Plugin-specifieke kleine fixes */
.inschrijven-form .wpcf7-form p { margin: 0 0 16px; }
.inschrijven-form .gform_wrapper .gfield--type-consent label { font-weight: 500; }
.inschrijven-form .et_contact_bottom_container { margin-top: 8px; }

/*********************************
contactform 7 aanpassingen
**********************************/
input#password_current,input#password_1,input#password_2,input#password,input[type=text], input[type=tel], input[type=email], input.text, input.title, textarea {width:100%; background-color: #eee; border: none!important; -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important; border-radius: 3px !important; font-size: 14px; color: #999 !important; padding: 8px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-color:#fdbc19!important; }

input[type=submit]{ background: #f27d2e; border: 2px solid transparent; padding: 2px 9px 1px 9px !important;color: #f5f5f5!important; font-weight:700; border-color:#f27d2e; font-size: 18px; -moz-border-radius: 10px  !important; -webkit-border-radius: 10px  !important; border-radius: 4px 4px 4px 4px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;text-align:right;}

input[type=submit]:hover{ background: rgba( 0, 0, 0, 0.05 ); border: 2px solid #f27d2e; color:#f27d2e!important;cursor:pointer; }

input[type=submit]:after{ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }