/*
Torven Gravity Forms skin — v2
Zelfde look als de klantenservice/contact-formulieren uit de HTML-templates:
floating labels, hairline borders, gold-deep actieve labels, form-ok bevestiging.
Afwijkend van de HTML (bewust): border-radius 4px, knoppen in display-font,
uppercase, op --gcid-primary-color met hover naar gold-deep.

Plaatsen in de hoofdmap van het child theme, laden via functions.php.
Vereist torven-gf-float.js voor de .tv-float / .tv-focus / .tv-filled states.
*/

body .gform-theme--framework,
body .gform-theme--api,
body .gform_wrapper.gravity-theme,
body .gform-theme,
.et-boc #main-content .gform-theme {
  /* Torven tokens, met Divi-variabelen waar die bestaan */
  --tv-ink: var(--gcid-heading-color, #1A1A18);
  --tv-body: var(--gcid-body-color, #2B2B28);
  --tv-steel: #6F6E66;
  --tv-line: rgba(26, 26, 24, .12);
  --tv-gold: var(--gcid-primary-color, #BFA468);
  --tv-gold-deep: var(--gcid-jtb3u0ij4d, #A98F52);
  --tv-paper: #F4F1EB;
  --tv-white: #FFFFFF;
  --tv-ok: #4C7A4C;
  --tv-err: #AA3333;
  --tv-r: 4px;
  --tv-font-body: var(--et_global_body_font, 'Barlow'), sans-serif;
  --tv-font-display: var(--smvp-display-font, 'Science Gothic'), var(--et_global_body_font, 'Barlow'), sans-serif;

  /* GF framework-variabelen op de Torven waardes */
  --gf-color-primary: var(--tv-gold) !important;
  --gf-color-primary-contrast: #ffffff !important;
  --gf-color-primary-darker: var(--tv-gold-deep) !important;
  --gf-color-danger: var(--tv-err) !important;
  --gf-color-success: var(--tv-ok) !important;
  --gf-font-family-base: var(--tv-font-body) !important;
  --gf-ctrl-border-color: var(--tv-line) !important;
  --gf-ctrl-border-color-focus: var(--tv-ink) !important;
  --gf-ctrl-outline-color-focus: var(--tv-ink) !important;
  --gf-ctrl-accent-color: var(--tv-gold) !important;
  --gf-ctrl-shadow-color-focus: transparent !important;
  --gf-ctrl-shadow-size-focus: 0px !important;
  --gf-ctrl-outline-width-focus: 0px !important;
  --gf-ctrl-radius: var(--tv-r) !important;
  --gf-ctrl-btn-radius: var(--tv-r) !important;
  --gf-radius: var(--tv-r) !important;
  --gf-ctrl-color: var(--tv-body) !important;
  --gf-ctrl-placeholder-color: var(--tv-steel) !important;
  --gf-ctrl-label-color-primary: var(--tv-ink) !important;
  --gf-ctrl-label-color-secondary: var(--tv-body) !important;
	--gf-color-in-ctrl-primary: var(--tv-gold) !important;
}

/* Form heading verbergen (titel staat al op de pagina) */
body .gform_heading { display: none !important; }

/* ===== Basis typografie ===== */
body .gform_wrapper.gravity-theme,
body .gform-theme--framework {
  font-family: var(--tv-font-body) !important;
  color: var(--tv-body) !important;
}

/* ===== Velden: hairline, radius 4, witte achtergrond ===== */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="date"],
body .gform_wrapper input[type="password"],
body .gform_wrapper input[type="search"],
body .gform_wrapper select,
body .gform_wrapper textarea {
  width: 100% !important;
  background: var(--tv-white) !important;
  color: var(--tv-ink) !important;
  border: 1px solid var(--tv-line) !important;
  border-radius: var(--tv-r) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: 500 15px/1.4 var(--tv-font-body) !important;
  padding: 16px !important;
  height: auto !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  transition: border-color .18s ease !important;
}

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

body .gform_wrapper input:focus,
body .gform_wrapper select:focus,
body .gform_wrapper textarea:focus {
  border-color: var(--tv-ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

body .gform_wrapper input::placeholder,
body .gform_wrapper textarea::placeholder {
  color: var(--tv-steel) !important;
  opacity: 1 !important;
}

/* ===== Floating labels (velden krijgen .tv-float via torven-gf-float.js) ===== */
body .gform_wrapper .gfield.tv-float {
  position: relative !important;
}

body .gform_wrapper .gfield.tv-float > .gfield_label {
  position: absolute !important;
  left: 17px !important;
  top: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
  font: 400 15px/1 var(--tv-font-body) !important;
  color: var(--tv-steel) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  pointer-events: none !important;
  transition: all .15s ease !important;
}

/* Ruimte voor het zwevende label in de control */
body .gform_wrapper .gfield.tv-float input,
body .gform_wrapper .gfield.tv-float select {
  padding: 27px 16px 9px !important;
  min-height: 60px !important;
}
body .gform_wrapper .gfield.tv-float textarea {
  padding: 29px 16px 10px !important;
}

/* Actieve staat: omhoog, klein, caps, gold-deep — exact als de HTML */
body .gform_wrapper .gfield.tv-float.tv-focus > .gfield_label,
body .gform_wrapper .gfield.tv-float.tv-filled > .gfield_label {
  top: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--tv-gold-deep) !important;
}

/* Verplicht-sterretje ingetogen meekleuren */
body .gform_wrapper .gfield_required { color: inherit !important; padding-left: 2px !important; }

/* Custom caret op selects (appearance none) */
body .gform_wrapper .gfield.tv-select .ginput_container_select { position: relative !important; }
body .gform_wrapper .gfield.tv-select .ginput_container_select::after {
  content: '' !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 1.6px solid var(--tv-ink) !important;
  border-bottom: 1.6px solid var(--tv-ink) !important;
  transform: translateY(-70%) rotate(45deg) !important;
  pointer-events: none !important;
}

/* ===== Niet-zwevende labels (radio, checkbox, upload, naamveld) ===== */
body .gform_wrapper .gfield:not(.tv-float) > .gfield_label,
body .gform_wrapper .gfield:not(.tv-float) legend.gfield_label {
  font: 600 15px/1.4 var(--tv-font-body) !important;
  color: var(--tv-ink) !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
}

/* Keuzeopties */
body .gform_wrapper .gchoice label {
  font: 500 15px/1.5 var(--tv-font-body) !important;
  color: var(--tv-body) !important;
}
body .gform_wrapper input[type="checkbox"],
body .gform_wrapper input[type="radio"] {
  accent-color: var(--tv-gold) !important;
  width: 17px !important;
  height: 17px !important;
}

/* Beschrijvingen */
body .gform_wrapper .gfield_description,
body .gform_wrapper .instruction,
body .gform_wrapper .gform_fileupload_rules {
  margin-top: 6px !important;
  font: 400 13px/1.5 var(--tv-font-body) !important;
  color: var(--tv-steel) !important;
  opacity: 1 !important;
}

/* ===== File upload (drag & drop zone bij meerdere bestanden) ===== */
body .gform_wrapper .gform_drop_area {
  border: 1px dashed var(--tv-steel) !important;
  border-radius: var(--tv-r) !important;
  background: var(--tv-white) !important;
  padding: 26px 20px !important;
  transition: background-color .18s ease, border-color .18s ease !important;
}
body .gform_wrapper .gform_drop_area:hover,
body .gform_wrapper .gform_drop_area.gform_drop_area_hover {
  background: var(--tv-paper) !important;
  border-color: var(--tv-gold-deep) !important;
}
body .gform_wrapper .gform_drop_instructions {
  font: 500 14px var(--tv-font-body) !important;
  color: var(--tv-body) !important;
  display: block !important;
  margin-bottom: 10px !important;
}
body .gform_wrapper .gform_button_select_files {
  height: 40px !important;
  padding: 0 20px !important;
}

/* ===== Knoppen: display-font, uppercase, primary, hover naar gold-deep ===== */
body .gform_wrapper .gform_button,
body .gform_wrapper button[type="submit"],
body .gform_wrapper input[type="submit"],
body .gform_wrapper .gform_page_footer .button,
body .gform_wrapper .gform_button_select_files {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  padding: 0 30px !important;
  background: var(--gcid-primary-color, #BFA468) !important;
  border: 1px solid var(--gcid-primary-color, #BFA468) !important;
  color: #ffffff !important;
  font-family: var(--tv-font-display) !important;
  font-size: 15px !important;
  font-weight: 550 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: var(--tv-r) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transform: translateY(0) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body .gform_wrapper .gform_button:hover,
body .gform_wrapper button[type="submit"]:hover,
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer .button:hover,
body .gform_wrapper .gform_button_select_files:hover {
  background: var(--tv-gold-deep) !important;
  border-color: var(--tv-gold-deep) !important;
  transform: translateY(-1px) !important;
}

body .gform_wrapper .gform_button:active,
body .gform_wrapper button[type="submit"]:active,
body .gform_wrapper input[type="submit"]:active {
  transform: translateY(0) !important;
}

body .gform_wrapper .gform_button:focus-visible,
body .gform_wrapper button[type="submit"]:focus-visible {
  outline: 2px solid var(--tv-gold-deep) !important;
  outline-offset: 2px !important;
}

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

/* ===== Validatie ===== */
body .gform_wrapper .gfield_error input,
body .gform_wrapper .gfield_error select,
body .gform_wrapper .gfield_error textarea {
  border-color: var(--tv-err) !important;
}
body .gform_wrapper .gfield_error.tv-float > .gfield_label { color: var(--tv-err) !important; }
body .gform_wrapper .gfield_validation_message,
body .gform_wrapper .validation_message {
  background: none !important;
  border: 0 !important;
  padding: 5px 0 0 !important;
  font: 400 12.5px/1.4 var(--tv-font-body) !important;
  color: var(--tv-err) !important;
}
body .gform_wrapper .gform_validation_errors {
  background: var(--tv-white) !important;
  border: 1px solid var(--tv-line) !important;
  border-left: 2px solid var(--tv-err) !important;
  border-radius: var(--tv-r) !important;
  box-shadow: none !important;
  padding: 18px 22px !important;
}
body .gform_wrapper .gform_validation_errors .gform_submission_error {
  font: 600 15px/1.4 var(--tv-font-body) !important;
  color: var(--tv-ink) !important;
}

/* ===== Bevestiging: als het .form-ok blok uit de HTML ===== */
body .gform_confirmation_message {
  display: block !important;
  border: 1px solid var(--tv-line) !important;
  border-left: 2px solid var(--tv-ok) !important;
  border-radius: var(--tv-r) !important;
  background: var(--tv-paper) !important;
  padding: 22px 24px !important;
  max-width: 680px !important;
  font: 400 15px/1.6 var(--tv-font-body) !important;
  color: var(--tv-body) !important;
}
body .gform_confirmation_message strong,
body .gform_confirmation_message b { font-weight: 600 !important; color: var(--tv-ink) !important; }

/* ===== Layout ===== */
body .gform_wrapper .gform_fields { row-gap: 18px !important; }
body .gform_wrapper .gform_footer { margin-top: 10px !important; padding-top: 0 !important; }