/**
 * Fraia — Gravity Forms Styling
 *
 * Geladen op alle pagina's met een GF-formulier.
 *
 * Kleuren afgestemd op het Fraia-thema:
 *  Primair groen : #10B981  (--wp--preset--color--primary)
 *  Secundair roze: #ED9DF8  (--wp--preset--color--secondary)
 *  Font          : Plus Jakarta Sans
 */

/* ============================================================================
   0. GF CUSTOM PROPERTIES OVERSCHRIJVEN
   ============================================================================ */

.gform_wrapper {
  --gf-color-primary: #10B981;
  --gf-color-primary-rgb: 16, 185, 129;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: #059669;
  --gf-color-primary-lighter: #34d399;
  --gf-radius: 8px;
  --gf-ctrl-border-color: #e5e7eb;
}

/* ============================================================================
   1. VOORTGANGSBALK
   ============================================================================ */

.gform_wrapper .gf_progressbar_wrapper {
  margin-bottom: 32px;
}

.gform_wrapper .gf_progressbar_title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.gform_wrapper .gf_progressbar {
  background: #f3f4f6;
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

.gform_wrapper .gf_progressbar_percentage {
  background: linear-gradient(135deg, #10B981 0%, #ED9DF8 100%);
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.gform_wrapper .gf_progressbar_percentage span {
  display: none;
}

/* ============================================================================
   2. VERPLICHTE VELDEN MELDING
   ============================================================================ */

.gform_wrapper .gform_required_legend {
  font-size: 0.75rem !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
  margin-bottom: 20px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ============================================================================
   3. LABELS
   ============================================================================ */

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label:not(.gform-field-label--type-inline) {
  display: block;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.gform_wrapper .gfield_required {
  color: #10B981 !important;
  margin-left: 2px;
}

.gform_wrapper .gfield_description {
  font-size: 0.8125rem !important;
  color: #9ca3af !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* Verberg GF admin-labels "Dit veld is verborgen/bedoeld voor validatie" */
.gform_wrapper .admin-hidden-markup,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper li[class*="honeypot"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* gfield_visibility_hidden verbergt het veld visueel in de admin,
   maar kleurkiezer-velden moeten zichtbaar blijven — alleen de admin-markup verbergen */
.gform_wrapper .gfield_visibility_hidden:not(.fraia-color-text-input) {
  display: none !important;
}

/* Verberg honeypot-veld volledig */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_validation_container * {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Verberg "Dit veld is verborgen bij het bekijken van het formulier" tekst */
.gform_wrapper .gfield_admin_icons,
.gform_wrapper .gfield--is-hidden .gfield_label,
.gform_wrapper .gfield--is-hidden .gfield_description {
  display: none !important;
}

/* ============================================================================
   3. INVOERVELDEN
   ============================================================================ */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: #111827 !important;
  background: #ffffff !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-shadow: none !important;
  outline: none !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #d1d5db !important;
  opacity: 1 !important;
}

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

.gform_wrapper select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}

/* ============================================================================
   4. CHECKBOXEN & RADIOBUTTONS — card stijl
   ============================================================================ */

.gfield_checkbox .gchoice,
.gfield_radio .gchoice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
  margin-bottom: 6px !important;
  margin-right: 6px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  width: auto !important;
}

.gfield_checkbox .gchoice:hover,
.gfield_radio .gchoice:hover {
  border-color: #10B981 !important;
  background: #f0fdf4 !important;
}

.gfield_checkbox .gchoice.is-selected,
.gfield_radio .gchoice.is-selected {
  border-color: #10B981 !important;
  background: #f0fdf4 !important;
}

/* Hele card klikbaar maken */
.gfield_checkbox .gchoice label,
.gfield_radio .gchoice label {
  cursor: pointer !important;
  position: static !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  user-select: none !important;
}

/* Pseudo-klik op de hele card via label die de hele ruimte vult */
.gfield_checkbox .gchoice,
.gfield_radio .gchoice {
  position: relative !important;
}

.gfield_checkbox .gchoice label::before,
.gfield_radio .gchoice label::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer !important;
}

.gfield_checkbox .gfield-choice-input,
.gfield_radio .gfield-choice-input {
  flex-shrink: 0 !important;
  width: 17px !important;
  height: 17px !important;
  accent-color: #10B981 !important;
  cursor: pointer !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Container — wrap layout zodat cards naast elkaar passen */
.gfield_checkbox,
.gfield_radio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Uitgeschakeld door limitCheckboxes JS */
.gfield_checkbox .gchoice.is-disabled,
.gfield_radio .gchoice.is-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Max-keuzes melding */
.fraia-max-notice {
  color: #059669 !important;
  font-size: 0.8125rem !important;
  margin-top: 8px !important;
  display: none;
  padding: 8px 12px !important;
  background: #ecfdf5 !important;
  border-radius: 6px !important;
  border: 1px solid #a7f3d0 !important;
  width: 100% !important;
}

/* ============================================================================
   5. KLEURKIEZER
   ============================================================================ */

/* ============================================================================
   5. KLEURKIEZER
   Structuur in DOM:
     [GF HTML-blok]  .fraia-color-wrap
                       .fraia-color-label   (label)
                       .fraia-color-hint    (beschrijving)
                       .fraia-swatch-row
                         input.fraia-swatch (colorpicker vierkant)
                         span.fraia-swatch-label (wordt verborgen)
     [GF tekstveld]  .fraia-color-text-input
                       .ginput_container
                         input[type="text"] (hex invoer)
   Doel: label bovenaan, swatch + tekstveld naast elkaar, hint onderaan.
   ============================================================================ */

/* Verberg het GF-label en admin-markup van het tekstveld */
.fraia-color-text-input .gfield_label,
.fraia-color-text-input .admin-hidden-markup {
  display: none !important;
}

/* Het GF-tekstveld: geen extra marge, sluit direct aan op het HTML-blok */
.fraia-color-text-input {
  margin-top: -8px !important;
  padding-top: 0 !important;
}

.fraia-color-text-input .ginput_container {
  margin: 0 !important;
}

.gform_wrapper .fraia-color-text-input input[type="text"],
.fraia-swatch-row input[type="text"] {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  width: 110px !important;
  max-width: 110px !important;
  min-width: 0 !important;
  flex: 0 0 110px !important;
}

/* Label stijl passend bij andere velden */
.fraia-color-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Hint tekst stijl passend bij gfield_description */
.fraia-color-hint {
  font-size: 0.8125rem;
  color: #9ca3af;
  margin: 0 0 8px 0;
  line-height: 1.5;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Swatch-rij: swatch + tekstveld naast elkaar */
.fraia-swatch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Verberg de "of typ een hex-code" tekst — tekstveld spreekt voor zichzelf */
.fraia-swatch-label {
  display: none;
}

.fraia-color-wrap {
  margin-bottom: 0;
}

.fraia-swatch {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
  padding: 2px;
  background: none;
  flex-shrink: 0;
}

.fraia-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; }
.fraia-swatch::-webkit-color-swatch { border: none; border-radius: 6px; }
.fraia-swatch::-moz-color-swatch { border: none; border-radius: 6px; }

/* ============================================================================
   6. BESTANDSUPLOAD
   ============================================================================ */

.gform_wrapper input[type="file"] {
  width: 100% !important;
  padding: 28px 20px !important;
  border: 2px dashed #d1d5db !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  font-size: 0.9375rem !important;
  color: #9ca3af !important;
  cursor: pointer !important;
}

.gform_wrapper input[type="file"]:hover {
  border-color: #10B981 !important;
  background: #f0fdf4 !important;
}

/* ============================================================================
   7. DATUMPICKER
   GF's datepicker wordt als direct child van <body> gerenderd (buiten .gform_wrapper),
   dus we gebruiken .ui-datepicker zonder parent selector.
   ============================================================================ */

.ui-datepicker {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 12px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  z-index: 9999 !important;
  color: #111827 !important;
}

/* Verberg lege datepicker div die altijd in de DOM staat */
.ui-datepicker:empty {
  display: none !important;
}

.ui-datepicker-header {
  background: #f9fafb !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  margin-bottom: 8px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ui-datepicker-title {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}

.ui-datepicker table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.ui-datepicker th {
  color: #6b7280 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px !important;
  text-align: center !important;
}

.ui-datepicker td {
  padding: 2px !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block !important;
  padding: 5px 7px !important;
  color: #374151 !important;
  border-radius: 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}

.ui-datepicker td a:hover {
  background: #f0fdf4 !important;
  color: #10B981 !important;
}

.ui-datepicker td.ui-datepicker-today a {
  background: #ecfdf5 !important;
  color: #10B981 !important;
  font-weight: 600 !important;
}

.ui-datepicker td .ui-state-active {
  background: #10B981 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.9375rem !important;
  line-height: 1 !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: #f0fdf4 !important;
  color: #10B981 !important;
}

/* ============================================================================
   8. LAYOUT & WITRUIMTE
   ============================================================================ */

.gform_wrapper .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* ============================================================================
   9. VALIDATIEFOUTEN
   ============================================================================ */

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.10) !important;
}

.gform_wrapper .validation_message {
  color: #e11d48 !important;
  font-size: 0.8125rem !important;
  margin-top: 4px !important;
}

.gform_wrapper .validation_error {
  background: #fff1f2 !important;
  border: 1px solid #fda4af !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #be123c !important;
  font-size: 0.9375rem !important;
  margin-bottom: 20px !important;
}

/* ============================================================================
   9. KNOPPEN
   ============================================================================ */

.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
  display: flex !important;
  gap: 12px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid #f3f4f6 !important;
  background: none !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Volgende / Versturen — groen */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button[type="submit"],
.gform_wrapper input.gform_next_button,
.gform_wrapper input.gform_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 28px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  background: #10B981 !important;
  color: #ffffff !important;
  transition: background 0.15s, transform 0.15s !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
  text-decoration: none !important;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button[type="submit"]:hover,
.gform_wrapper input.gform_next_button:hover,
.gform_wrapper input.gform_button:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

/* Vorige — ghost */
.gform_wrapper .gform_previous_button,
.gform_wrapper input.gform_previous_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 24px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #6b7280 !important;
  transition: border-color 0.15s, color 0.15s !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.gform_wrapper .gform_previous_button:hover,
.gform_wrapper input.gform_previous_button:hover {
  border-color: #10B981 !important;
  color: #10B981 !important;
}

/* Opslaan & doorgaan */
.gform_wrapper .gform_save_link,
.gform_wrapper button.gform_save_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 11px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #6b7280 !important;
  transition: border-color 0.15s, color 0.15s !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.gform_wrapper .gform_save_link:hover,
.gform_wrapper button.gform_save_link:hover {
  border-color: #10B981 !important;
  color: #10B981 !important;
}

/* ============================================================================
   10. BEVESTIGINGSPAGINA
   ============================================================================ */

.gform_wrapper .gform_confirmation_message {
  background: #f0fdf4 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 12px !important;
  padding: 32px !important;
  color: #065f46 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* ============================================================================
   11. MOBIEL (≤ 640px)
   ============================================================================ */

@media (max-width: 640px) {
  .fraia-swatch-row { flex-wrap: wrap; }

  .gform_wrapper .fraia-color-text-input input[type="text"],
  .fraia-swatch-row input[type="text"] {
    width: 110px !important;
    max-width: 110px !important;
    flex: 0 0 110px !important;
  }

  .gform_wrapper .gform_page_footer,
  .gform_wrapper .gform_footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_button[type="submit"],
  .gform_wrapper input.gform_next_button,
  .gform_wrapper input.gform_button,
  .gform_wrapper .gform_previous_button,
  .gform_wrapper input.gform_previous_button,
  .gform_wrapper .gform_save_link {
    width: 100% !important;
    justify-content: center !important;
  }
}