/* 
Gravity Forms + Divi child theme stylesheet
Koppelt Gravity Forms aan Divi global design variables
Plaats dit bestand in de hoofdmap van je child theme en laad het in via functions.php
*/

body .gform-theme--framework,
body .gform-theme--api,
body .gform_wrapper.gravity-theme,
body .gform-theme,
.et-boc #main-content .gform-theme{
  --gf-color-primary: var(--gcid-primary-color) !important;
  --gf-color-primary-contrast: #ffffff !important;
  --gf-color-primary-darker: var(--gcid-jtb3u0ij4d) !important;
  --gf-color-primary-lighter: var(--gcid-eq8vtyb45n) !important;
--gf-color-in-ctrl-primary-darker: var(--gcid-jtb3u0ij4d) !important;

  --gf-color-secondary: var(--gcid-secondary-color) !important;
  --gf-color-secondary-contrast: #ffffff !important;
  --gf-color-secondary-darker: color-mix(in srgb, var(--gcid-secondary-color) 85%, black) !important;
  --gf-color-secondary-lighter: color-mix(in srgb, var(--gcid-secondary-color) 85%, white) !important;

  --gf-color-in-ctrl: var(--gcid-ula5tq49su) !important;
  --gf-color-in-ctrl-contrast: var(--gcid-body-color) !important;
  --gf-color-in-ctrl-primary: var(--gcid-primary-color) !important;
  --gf-color-in-ctrl-primary-contrast: #ffffff !important;

  --gf-color-out-ctrl-light: color-mix(in srgb, var(--gcid-body-color) 10%, white) !important;
  --gf-color-out-ctrl-dark: color-mix(in srgb, var(--gcid-body-color) 65%, transparent) !important;

  --gf-color-danger: var(--gcid-b8ac9d35-d5cf-43ce-9b67-728304ee5aa6) !important;
  --gf-color-success: var(--gcid-primary-color) !important;

  --gf-font-family-base: var(--et_global_body_font), sans-serif !important;
  --gf-font-family-primary: var(--et_global_body_font), sans-serif !important;
  --gf-font-family-secondary: var(--et_global_body_font), sans-serif !important;
  --gf-font-family-tertiary: var(--et_global_body_font), sans-serif !important;

  --gf-ctrl-border-color: color-mix(in srgb, var(--gcid-body-color) 18%, white) !important;
  --gf-ctrl-border-color-focus: var(--gcid-primary-color) !important;
  --gf-ctrl-outline-color-focus: var(--gcid-primary-color) !important;
  --gf-ctrl-accent-color: var(--gcid-primary-color) !important;

  --gf-ctrl-shadow-color-focus: color-mix(in srgb, var(--gcid-primary-color) 20%, transparent) !important;
  --gf-ctrl-shadow-size-focus: 1px !important;

  --gf-ctrl-label-color-primary: var(--gcid-heading-color) !important;
  --gf-ctrl-label-color-secondary: var(--gcid-body-color) !important;

  --gf-ctrl-radius: var(--gvid-oa3aesl055) !important;
  --gf-ctrl-btn-radius: var(--gvid-oa3aesl055) !important;
  --gf-radius: var(--gvid-oa3aesl055) !important;

  --gf-ctrl-placeholder-color: color-mix(in srgb, var(--gcid-body-color) 55%, white) !important;
  --gf-ctrl-color: var(--gcid-body-color) !important;

  --gf-ctrl-btn-bg-color: var(--gcid-primary-color) !important;
  --gf-ctrl-btn-color: #ffffff !important;
  --gf-ctrl-btn-border-color: var(--gcid-primary-color) !important;
	
  --gf-ctrl-outline-width-focus:0px !important;	
}

/* Form heading verbergen */
body .gform_heading {
  display: none !important;
}

/* Algemene typografie */
body .gform_wrapper.gravity-theme,
body .gform_wrapper.gravity-theme input,
body .gform_wrapper.gravity-theme select,
body .gform_wrapper.gravity-theme textarea,
body .gform_wrapper.gravity-theme button,
body .gform_wrapper.gravity-theme .gfield_description,
body .gform_wrapper.gravity-theme .instruction,
body .gform_wrapper.gravity-theme .gform_description {
  font-family: var(--et_global_body_font), sans-serif !important;
  color: var(--gcid-body-color) !important;
}

/* Labels en titels */
body .gform_wrapper.gravity-theme .gfield_label,
body .gform_wrapper.gravity-theme legend.gfield_label,
body .gform_wrapper.gravity-theme .gform_title,
body .gform_wrapper.gravity-theme .gsection_title {
  font-family: var(--et_global_heading_font), sans-serif !important;
  color: var(--gcid-heading-color) !important;
}

body .gform_wrapper.gravity-theme .gfield_label,
body .gform_wrapper.gravity-theme legend.gfield_label {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

body .gform_wrapper.gravity-theme .gsection_title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

body .gform_wrapper.gravity-theme .gfield_description,
body .gform_wrapper.gravity-theme .instruction,
body .gform_wrapper.gravity-theme .gform_description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  opacity: 0.8 !important;
}

/* Inputvelden */
body .gform_wrapper.gravity-theme input[type="text"],
body .gform_wrapper.gravity-theme input[type="email"],
body .gform_wrapper.gravity-theme input[type="tel"],
body .gform_wrapper.gravity-theme input[type="number"],
body .gform_wrapper.gravity-theme input[type="password"],
body .gform_wrapper.gravity-theme input[type="url"],
body .gform_wrapper.gravity-theme input[type="date"],
body .gform_wrapper.gravity-theme input[type="search"],
body .gform_wrapper.gravity-theme input[type="file"],
body .gform_wrapper.gravity-theme select,
body .gform_wrapper.gravity-theme textarea {
  width: 100% !important;
  background: var(--gcid-ula5tq49su) !important;
  color: var(--gcid-body-color) !important;
  border: 1px solid color-mix(in srgb, var(--gcid-body-color) 18%, white) !important;
  border-radius: var(--gvid-oa3aesl055) !important;
  box-shadow: none !important;
  font-family: var(--et_global_body_font), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

body .gform_wrapper.gravity-theme textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Placeholder */
body .gform_wrapper.gravity-theme input::placeholder,
body .gform_wrapper.gravity-theme textarea::placeholder {
  color: color-mix(in srgb, var(--gcid-body-color) 55%, white) !important;
  opacity: 1 !important;
}

/* Focus */
body .gform_wrapper.gravity-theme input:focus,
body .gform_wrapper.gravity-theme select:focus,
body .gform_wrapper.gravity-theme textarea:focus {
  border-color: var(--gcid-primary-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gcid-primary-color) 16%, transparent) !important;

}

/* Checkbox en radio */
body .gform_wrapper.gravity-theme input[type="checkbox"],
body .gform_wrapper.gravity-theme input[type="radio"] {
  accent-color: var(--gcid-primary-color) !important;
}

/* Knoppen */
body .gform_wrapper.gravity-theme .gform_button,
body .gform_wrapper.gravity-theme button[type="submit"],
body .gform_wrapper.gravity-theme input[type="submit"],
body .gform_wrapper.gravity-theme .gform_page_footer .button {
  appearance: none !important;
  background: var(--gcid-primary-color) !important;
  border: 1px solid var(--gcid-primary-color) !important;
  color: #ffffff !important;
  font-family: var(--et_global_body_font), sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 16px 24px !important;
  border-radius: var(--gvid-oa3aesl055) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

body .gform_wrapper.gravity-theme .gform_button:hover,
body .gform_wrapper.gravity-theme button[type="submit"]:hover,
body .gform_wrapper.gravity-theme input[type="submit"]:hover,
body .gform_wrapper.gravity-theme .gform_page_footer .button:hover {
  background: var(--gcid-jtb3u0ij4d) !important;
  border-color: var(--gcid-jtb3u0ij4d) !important;
}

body .gform_wrapper.gravity-theme .gform_button:disabled,
body .gform_wrapper.gravity-theme button[type="submit"]:disabled,
body .gform_wrapper.gravity-theme input[type="submit"]:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Progress bar en stappen */
body .gform_wrapper.gravity-theme .gf_step_label {
  font-family: var(--et_global_body_font), sans-serif !important;
  color: var(--gcid-body-color) !important;
}

body .gform_wrapper.gravity-theme .gf_step_active .gf_step_number,
body .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number {
  background: var(--gcid-primary-color) !important;
  color: #ffffff !important;
}

/* Errors */
body .gform_wrapper.gravity-theme .gfield_error input,
body .gform_wrapper.gravity-theme .gfield_error select,
body .gform_wrapper.gravity-theme .gfield_error textarea {
  border-color: var(--gcid-b8ac9d35-d5cf-43ce-9b67-728304ee5aa6) !important;
}

body .gform_wrapper.gravity-theme .validation_message,
body .gform_wrapper.gravity-theme .gfield_validation_message,
body .gform_wrapper.gravity-theme .validation_error {
  color: var(--gcid-b8ac9d35-d5cf-43ce-9b67-728304ee5aa6) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Confirmation */
body .gform_wrapper.gravity-theme .gform_confirmation_message {
  color: var(--gcid-heading-color) !important;
  font-family: var(--et_global_body_font), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* File upload */
body .gform_wrapper.gravity-theme .gform_fileupload_rules,
body .gform_wrapper.gravity-theme .gform_drop_instructions {
  color: var(--gcid-body-color) !important;
  font-family: var(--et_global_body_font), sans-serif !important;
}