/* ============================================================================
 * Kleurrijk · Gravity Forms aanvraagformulier
 * Styling voor het formulier in de modal (#form-modal-container) en de
 * jQuery UI datepicker. Apart bestand — los te enqueuen naast
 * acf-content-blocks-v2.css.
 * ============================================================================ */

#form-modal-container .gform_wrapper {
  font-family: var(--default-font);
  --primary: var(--primary-color, #431E36);
  --accent: var(--accent-color, #FBA919);
}

/* GF Theme Framework (2.7+) stuurt maatvoering en placeholders via eigen
   variabelen — hier overschrijven zodat alles de huisstijl volgt */
#form-modal-container .gform_wrapper.gform-theme--framework,
#form-modal-container .gform-theme--framework {
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-border-radius: 11px;
  --gf-ctrl-placeholder-font-size: 16px;
  --gf-ctrl-placeholder-font-family: var(--default-font);
  --gf-ctrl-placeholder-color: rgba(67, 30, 54, 0.4);
}

/* Veldenraster: 12 kolommen (GF 2.5+), halve velden naast elkaar */
#form-modal-container .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 12px;
}
#form-modal-container .gfield { grid-column: 1 / -1; }
#form-modal-container .gfield.gf-half-left  { grid-column: span 6; }
#form-modal-container .gfield.gf-half-right { grid-column: span 6; }
@media (max-width: 600px) {
  #form-modal-container .gfield.gf-half-left,
  #form-modal-container .gfield.gf-half-right { grid-column: 1 / -1; }
}

/* Labels */
#form-modal-container .gfield_label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--secondary-color, #1F5458);
  margin-bottom: 6px;
}
#form-modal-container .gfield_required {
  color: rgba(67, 30, 54, 0.45);
  font-size: 10px;
  font-style: normal;
  padding-left: 4px;
}
#form-modal-container .gfield_required_text { font-style: normal; }

/* Invoervelden */
#form-modal-container .gfield input[type="text"],
#form-modal-container .gfield input[type="email"],
#form-modal-container .gfield input[type="tel"],
#form-modal-container .gfield input[type="number"],
#form-modal-container .gfield select,
#form-modal-container .gfield textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--default-font);
  font-size: 16px;
  color: var(--primary);
  padding: 11px 14px;
  background: white;
  border: 2px solid white;
  border-radius: 11px;
  outline: none;
  transition: border 0.2s ease;
}
#form-modal-container .gfield input:focus,
#form-modal-container .gfield select:focus,
#form-modal-container .gfield textarea:focus {
  border: 2px solid #E8DCD2;
}
#form-modal-container .gfield textarea { min-height: 96px; resize: vertical; }

/* Placeholders: zelfde maat en kleur als de invoer zelf */
#form-modal-container .gfield input::placeholder,
#form-modal-container .gfield textarea::placeholder,
#form-modal-container .gfield select::placeholder {
  font-family: var(--default-font);
  font-size: 16px;
  color: rgba(67, 30, 54, 0.4);
  opacity: 1; /* Firefox dimt placeholders anders extra */
}

/* Beschrijvingen en validatie */
#form-modal-container .gfield_description {
  font-size: 13px;
  color: rgba(67, 30, 54, 0.55);
  margin-top: 6px;
  padding: 0;
}
#form-modal-container .gfield_description.validation_message,
#form-modal-container .gfield_validation_message {
  color: #B3402A;
  background: none;
  border: 0;
  padding: 4px 0 0;
}
#form-modal-container .gform_validation_errors {
  background: rgba(179, 64, 42, 0.08);
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: none;
}
#form-modal-container .gform_validation_errors h2 {
  font-size: 16px;
  color: #B3402A;
  margin: 0;
}

/* Tijdvelden: uur + minuut netjes naast elkaar */
#form-modal-container .ginput_container_time { display: inline-block; }
#form-modal-container .gfield .clear-multi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#form-modal-container .ginput_container_time input { width: 74px; text-align: center; }
#form-modal-container .ginput_container_time i { line-height: 42px; font-style: normal; }
#form-modal-container .ginput_container_time label,
#form-modal-container .ginput_complex label {
  display: block;
  font-size: 12px;
  color: rgba(67, 30, 54, 0.5);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#form-modal-container .gfield_time_ampm { display: none; }

/* Datumveld met kalender-icoon */
#form-modal-container .ginput_container_date { position: relative; }
#form-modal-container .ginput_container_date input { padding-right: 42px; }
#form-modal-container .ginput_container_date .ui-datepicker-trigger {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.gform-theme--framework .gform-datepicker-calendar {
  background-color: white;
}

/* Opgemaakt overzicht (laatste stap) — gevuld door vulGfOverzicht() in
   function.js, via een GF HTML-veld met <div class="conf-gf-overzicht">.
   Geen lijntjes per regel: twee rustige groepen gescheiden door één hairline,
   en het totaal als eigen uitgelicht vlak. */
#form-modal-container .conf-gf-overzicht {
  background: white;
  border-radius: 14px;
  padding: 24px 26px;
}
#form-modal-container .conf-gf-overzicht .rij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 7px 0;
  font-size: 15px;
}
#form-modal-container .conf-gf-overzicht .rij span {
  color: rgba(67, 30, 54, 0.55);
  flex: none;
}
#form-modal-container .conf-gf-overzicht .rij b {
  color: var(--primary);
  font-weight: 600;
  text-align: right;
}
#form-modal-container .conf-gf-groep + .conf-gf-groep {
  border-top: 1px solid rgba(67, 30, 54, 0.1);
  margin-top: 14px;
  padding-top: 14px;
}
#form-modal-container .conf-gf-overzicht .rij--totaal {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(67, 30, 54, 0.06);
  border-radius: 12px;
  font-size: 16px;
}
#form-modal-container .conf-gf-overzicht .rij--totaal span {
  color: var(--primary);
  font-weight: 600;
}
#form-modal-container .conf-gf-overzicht .rij--totaal b {
  font-size: 21px;
}
#form-modal-container .conf-gf-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(67, 30, 54, 0.55);
}

/* Stappenbalk */
#form-modal-container .gf_page_steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}
#form-modal-container .gf_step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  opacity: 1;
}
#form-modal-container .gf_step_number {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(67, 30, 54, 0.1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}
#form-modal-container .gf_step_active .gf_step_number,
#form-modal-container .gf_step_completed .gf_step_number {
  background: var(--primary);
  color: var(--white-color, #FFFFFF);
}
#form-modal-container .gf_step_label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(67, 30, 54, 0.55);
}
#form-modal-container .gf_step_active .gf_step_label { color: var(--primary); }

/* Knoppen: Volgende/Vorige/Stuur aanvraag in huisstijl.
   !important is hier nodig: het GF Theme Framework stylet knoppen met eigen
   variabelen en hoge specificiteit. De submit-knop wordt zonder expliciet
   type-attribuut gerenderd, dus we matchen op .gform_button zelf. */
#form-modal-container .gform_page_footer,
#form-modal-container .gform_footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  margin-top: 22px;
  padding: 0;
}
#form-modal-container .gform_next_button,
#form-modal-container .gform_previous_button,
#form-modal-container .gform_button,
#form-modal-container .gform-theme-button,
#form-modal-container .gform_footer input[type="submit"],
#form-modal-container .gform_page_footer input[type="submit"] {
  font-family: var(--default-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 15px 26px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 999px !important;
  border: 0 !important;
  cursor: pointer;
  transition: all 0.25s ease;
}
#form-modal-container .gform_next_button {
  background: var(--primary) !important;
  color: var(--white-color, #FFFFFF) !important;
}
#form-modal-container .gform_next_button:hover { background: #5a2a49 !important; }
#form-modal-container .gform_button,
#form-modal-container .gform-theme-button--primary,
#form-modal-container .gform_footer input[type="submit"],
#form-modal-container .gform_page_footer input[type="submit"] {
  background: var(--accent) !important;
  color: var(--primary) !important;
}
#form-modal-container .gform_button:hover,
#form-modal-container .gform-theme-button--primary:hover,
#form-modal-container .gform_footer input[type="submit"]:hover,
#form-modal-container .gform_page_footer input[type="submit"]:hover {
  background: var(--primary) !important;
  color: var(--white-color, #FFFFFF) !important;
}
/* Volgende/Vorige zijn óók .gform_button in sommige GF-versies — daarom ná
   de submit-regels, zodat deze winnen voor de paginaknoppen */
#form-modal-container .gform_next_button,
#form-modal-container button.gform_next_button {
  background: var(--primary) !important;
  color: var(--white-color, #FFFFFF) !important;
}
#form-modal-container .gform_previous_button,
#form-modal-container button.gform_previous_button {
  background: transparent !important;
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 2px var(--primary) !important;
}
#form-modal-container .gform_previous_button:hover {
  background: var(--primary) !important;
  color: var(--white-color, #FFFFFF) !important;
}

/* ----------------------------------------------------------------------------
 * Datepicker mag buiten de modal vallen.
 * Het GF Theme Framework plaatst de kalender ín het formulier; een wrapper
 * met overflow:hidden (afgeronde hoeken) snijdt hem dan af. Daarom de hele
 * keten van modal tot veld op overflow:visible. De scroll-laag van
 * Magnific Popup (.mfp-wrap) blijft ongemoeid zodat een hoge modal scrollt.
 * -------------------------------------------------------------------------- */
.mfp-content,
.mfp-container,
#form-modal-container,
#form-modal-container .form-content,
#form-modal-container .gform_wrapper,
#form-modal-container .gform_wrapper form,
#form-modal-container .gform-body,
#form-modal-container .gform_page,
#form-modal-container .gform_page_fields,
#form-modal-container .gform_fields,
#form-modal-container .gfield,
#form-modal-container .ginput_container {
  overflow: visible !important;
}

/* ----------------------------------------------------------------------------
 * jQuery UI datepicker — werkt zowel los aan <body> als binnen het formulier
 * (GF Theme Framework voegt de class gform-theme-datepicker toe)
 * -------------------------------------------------------------------------- */
#ui-datepicker-div,
.gform-theme-datepicker {
  position: absolute; /* zonder jQuery UI-css valt de kalender anders in de paginaflow */
  z-index: 100000 !important;
  width: 320px;
  padding: 18px;
  background: var(--white-color, #FFFFFF);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(67, 30, 54, 0.3);
  font-family: var(--default-font, sans-serif);
  display: none;
}
#ui-datepicker-div .ui-datepicker-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 0;
  margin-bottom: 12px;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-color, #F0E7E0);
  cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: var(--accent-color, #FBA919); }
#ui-datepicker-div .ui-datepicker-title {
  display: flex;
  gap: 8px;
  justify-content: center;
  color: var(--primary-color, #431E36);
  font-weight: 700;
}
#ui-datepicker-div .ui-datepicker-title select {
  font-family: inherit;
  font-size: 14px;
  color: var(--primary-color, #431E36);
  background: var(--bg-color, #F0E7E0);
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
}
#ui-datepicker-div .ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
}
#ui-datepicker-div .ui-datepicker-calendar th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(67, 30, 54, 0.5);
  padding: 6px 0;
}
#ui-datepicker-div .ui-datepicker-calendar td {
  padding: 2px;
  text-align: center;
}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13.5px;
  color: var(--primary-color, #431E36);
  text-decoration: none;
  background: none;
  border: 0;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
  background: var(--bg-color, #F0E7E0);
}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
  background: var(--primary-color, #431E36);
  color: var(--white-color, #FFFFFF);
}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
  box-shadow: inset 0 0 0 2px var(--accent-color, #FBA919);
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled span {
  color: rgba(67, 30, 54, 0.25);
}

/* Schermlezer-tekst van jQuery UI ("Press F1 for help") visueel verbergen —
   deze klasse zit normaal in de jQuery UI-css, die het thema niet laadt */
.ui-helper-hidden-accessible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}