/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
header{
	width:100%!important;
}
html, body {
  overflow-x: clip;  
  overflow-y: visible;
  position: relative;
}

::selection {
  background:var(--e-global-color-secondary) !important;
	color:white;
}

.doorlopend .swiper{
    overflow: visible!important;
}
body {
 font-size: 1.1vw!important;
}

@media screen and (min-width:1920px) {
 body {font-size: 21px!important;}
}

@media screen and (max-width:1100px) {
body {font-size: 16px!important;}
}
.elementor-button-icon svg{
	height:1em;
}
/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}


/* ========== SVG + tekst animatie (pijl vóór tekst) ========== */

.svgeffect .elementor-button{
  position: relative;
  overflow: hidden;
}

/* Wrapper blijft referentie */
.svgeffect .elementor-button-content-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* TEKST = ankerpunt */
.svgeffect .elementor-button-text{
  position: relative;
  display: inline-block;

  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}
/* ==============================================
   GRAVITY FORMS — GLOBALE STIJLEN
   Achtergrond: zwart
   Accentkleur: #D18941
   ============================================== */


/* ==============================================
   ALGEMENE OPMAAK
   ============================================== */

/* Volledige breedte */
.gform_wrapper,
.gform_wrapper .gform-body,
.gform_wrapper .gform_fields {
  width: 100% !important;
  max-width: 100% !important;
}

/* Afstand tussen velden */
.gform-theme--foundation .gform_fields {
  grid-row-gap: 24px !important;
}


/* ==============================================
   LABELS EN VERPLICHTE VELDEN
   ============================================== */

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper legend,
.gform_wrapper label {
  color: #fff !important;
}

/* Sub-labels */
.gform_wrapper .gform-field-label--type-sub {
  color: #fff !important;
}

/* Vereist */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text {
  color: #D18941 !important;
}


/* ==============================================
   TEKSTVELDEN
   ============================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 12px 0 !important;
  font-size: 1em !important;
  transition: border-color 0.25s ease !important;
}


/* ==============================================
   SELECTVELDEN
   ============================================== */

.gform_wrapper select,
.gform_wrapper .gfield_select,
.gform_wrapper .ginput_container_select select {
  background-color: #0E1617 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 1em !important;
  transition: border-color 0.25s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

/* Dropdownopties door browser laten afhandelen */
.gform_wrapper select option {
  background-color: revert !important;
  color: revert !important;
}


/* ==============================================
   FOCUS EN PLACEHOLDERS
   ============================================== */

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none !important;
  border-bottom-color: #D18941 !important;
  box-shadow: none !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}


/* ==============================================
   DATUMVELD EN KALENDERICOON
   ============================================== */

/* Datumveld volledige breedte */
body .gform_wrapper input[type="date"],
body .gform_wrapper .ginput_container_date input,
body .gform_wrapper .gfield input.datepicker {
  width: 100% !important;
  box-sizing: border-box !important;
}

/*
 * Nieuw Gravity Forms-kalendericoon.
 * Geen knopachtergrond, rand of padding.
 */
.gform_wrapper .gform-datepicker-toggle,
.gform_wrapper button.gform-datepicker-toggle,
.gform_wrapper .ginput_container_date .gform-datepicker-toggle {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #fff !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

/* Wit kalendericoon */
.gform_wrapper .gform-datepicker-toggle .gform-calendar-icon,
.gform_wrapper .gform-datepicker-toggle .dashicons,
.gform_wrapper .gform-datepicker-toggle .dashicons::before {
  color: #fff !important;
  opacity: 1 !important;
}

/* Geen afwijkende hover/focus-opmaak */
.gform_wrapper .gform-datepicker-toggle:hover,
.gform_wrapper .gform-datepicker-toggle:focus,
.gform_wrapper .gform-datepicker-toggle:focus-visible {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  color: #fff !important;
}

/* Oud Gravity Forms-datepickericoon */
.gform_wrapper .ui-datepicker-trigger {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}


/* ==============================================
   GEBLOKKEERDE DATUMS
   ============================================== */

/*
 * De plugin voegt de classes gfbd-blocked en
 * gfbd-period-blocked aan een geblokkeerde dag toe.
 */

/* Nieuwe Gravity Forms-datepicker */
.gform-datepicker-calendar .day.gfbd-blocked,
.gform-datepicker-calendar .day.gfbd-period-blocked,
.gform-datepicker-calendar td.gfbd-blocked,
.gform-datepicker-calendar td.gfbd-period-blocked {
  background: #F5C84C !important;
  color: #17120A !important;
  opacity: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Nummer binnen geblokkeerde dag */
.gform-datepicker-calendar .day.gfbd-blocked span,
.gform-datepicker-calendar .day.gfbd-period-blocked span,
.gform-datepicker-calendar td.gfbd-blocked span,
.gform-datepicker-calendar td.gfbd-period-blocked span {
  color: #17120A !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Hover op geblokkeerde datum */
.gform-datepicker-calendar .day.gfbd-blocked:hover,
.gform-datepicker-calendar .day.gfbd-period-blocked:hover,
.gform-datepicker-calendar td.gfbd-blocked:hover,
.gform-datepicker-calendar td.gfbd-period-blocked:hover {
  background: #E2B331 !important;
  color: #17120A !important;
}

/* Oude jQuery UI-datepicker */
#ui-datepicker-div td.gfbd-blocked,
#ui-datepicker-div td.gfbd-period-blocked,
.ui-datepicker td.gfbd-blocked,
.ui-datepicker td.gfbd-period-blocked {
  background: #F5C84C !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Oude kalender: inhoud van geblokkeerde dag */
#ui-datepicker-div td.gfbd-blocked > span,
#ui-datepicker-div td.gfbd-blocked > a,
#ui-datepicker-div td.gfbd-period-blocked > span,
#ui-datepicker-div td.gfbd-period-blocked > a,
.ui-datepicker td.gfbd-blocked > span,
.ui-datepicker td.gfbd-blocked > a,
.ui-datepicker td.gfbd-period-blocked > span,
.ui-datepicker td.gfbd-period-blocked > a {
  background: #F5C84C !important;
  border-color: #F5C84C !important;
  color: #17120A !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Oude kalender: hover */
#ui-datepicker-div td.gfbd-blocked:hover > span,
#ui-datepicker-div td.gfbd-blocked:hover > a,
#ui-datepicker-div td.gfbd-period-blocked:hover > span,
#ui-datepicker-div td.gfbd-period-blocked:hover > a,
.ui-datepicker td.gfbd-blocked:hover > span,
.ui-datepicker td.gfbd-blocked:hover > a,
.ui-datepicker td.gfbd-period-blocked:hover > span,
.ui-datepicker td.gfbd-period-blocked:hover > a {
  background: #E2B331 !important;
  border-color: #E2B331 !important;
  color: #17120A !important;
}

/*
 * Gravity Forms kan disabled dagen standaard vervagen.
 * Dat draaien we voor onze geblokkeerde datums terug.
 */
#ui-datepicker-div td.gfbd-blocked.ui-state-disabled,
#ui-datepicker-div td.gfbd-period-blocked.ui-state-disabled,
.ui-datepicker td.gfbd-blocked.ui-state-disabled,
.ui-datepicker td.gfbd-period-blocked.ui-state-disabled {
  opacity: 1 !important;
}


/* ==============================================
   CHECKBOXES EN RADIOBUTTONS
   ============================================== */

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  accent-color: #D18941;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  color: #fff !important;
}


/* ==============================================
   VALIDATIEFOUTEN
   ============================================== */

.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_error label {
  color: #D18941 !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_description.validation_message {
  color: #D18941 !important;
  font-size: 12px !important;
}

.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
  background: transparent !important;
  border: 1px solid #D18941 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #D18941 !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-bottom-color: #D18941 !important;
}


/* ==============================================
   IMAGE CHOICE-VELDEN
   ============================================== */

.gform_wrapper .gfield_radio.gfield_radio--image-choice,
.gform_wrapper .ginput_container_image_choice .gfield_radio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.gform_wrapper .ginput_container_image_choice .gfield_radio .gchoice {
  flex: 1 1 280px !important;
  max-width: 360px !important;
  margin: 0 !important;
}

/* Kaart */
.gform_wrapper .gfield-image-choice-wrapper-outer {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;

  background: #fff !important;
  border: 1px solid rgba(209, 137, 65, 0.4) !important;
  border-radius: 0 !important;

  transition: border-color 0.25s ease !important;
}

.gform_wrapper .gfield-image-choice-wrapper-outer:hover {
  border-color: #D18941 !important;
}

/* Geselecteerde kaart */
.gform_wrapper .gfield-image-choice-wrapper-outer:has(input:checked) {
  border-color: #D18941 !important;
  box-shadow: inset 0 0 0 1px #D18941 !important;
}

/* Gravity Forms-frameworkselectie */
.gform-theme--framework
.gfield--type-image_choice.gfield--image-choice-appearance-card
.gchoice:where(:has(input:checked)) {
  border-color: #D18941 !important;
}

.gform-theme--framework
.gfield--type-image_choice.gfield--image-choice-appearance-card
.gchoice:where(:has(input:checked))::after {
  background-color: #D18941 !important;
  border-color: #D18941 !important;
  color: #fff !important;
}

/* Afbeelding */
.gform_wrapper .gfield-choice-image-wrapper img,
.gform_wrapper .gfield-choice-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* Tekstgedeelte */
.gform_wrapper .gfield-image-choice-wrapper-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 12px !important;
  background: #fff !important;
}

.gform_wrapper .gfield-image-choice-wrapper-inner .gform-field-label,
.gform_wrapper .gfield-image-choice-wrapper-inner label {
  color: #111 !important;
  font-size: 14px !important;
}

.gform_wrapper .gfield-choice-input {
  flex-shrink: 0 !important;
  accent-color: #D18941 !important;
}


/* ==============================================
   PROGRESSBALK
   ============================================== */

.gform_wrapper .gf_progressbar_percentage {
  background: #D18941 !important;
}

.gform_wrapper .gf_progressbar {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
}

.gform_wrapper .gf_progressbar_title {
  color: #fff !important;
}


/* ==============================================
   VORIGE- EN VOLGENDEKNOPPEN
   ============================================== */

/*
 * Niet meer algemeen op .gform-theme-button toepassen.
 * Anders wordt ook de kalenderknop geraakt.
 */
.gform_wrapper .gform_page_footer .gform_next_button,
.gform_wrapper .gform_page_footer .gform_previous_button,
.gform_wrapper .gform_page_footer button[data-submission-type="next"],
.gform_wrapper .gform_page_footer button[data-submission-type="previous"] {
  padding: 1em !important;

  background: #D18941 !important;
  border: 1px solid #D18941 !important;
  border-radius: 3px !important;
  box-shadow: none !important;

  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
}

.gform_wrapper .gform_page_footer .gform_next_button:hover,
.gform_wrapper .gform_page_footer .gform_previous_button:hover,
.gform_wrapper .gform_page_footer button[data-submission-type="next"]:hover,
.gform_wrapper .gform_page_footer button[data-submission-type="previous"]:hover {
  background: #93612F !important;
  border-color: #93612F !important;
  color: #fff !important;
}


/* ==============================================
   VERSTUURKNOP
   ============================================== */

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  padding: 1em !important;

  background: #D18941 !important;
  border: none !important;
  border-radius: 3px !important;

  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;

  transition: background-color 0.25s ease !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  background: #93612F !important;
  color: #fff !important;
}


/* ==============================================
   BEVESTIGINGSBERICHT
   ============================================== */

.gform_wrapper .gform_confirmation_message {
  padding-left: 16px !important;
  border-left: 1px solid #D18941 !important;
  color: #fff !important;
}


/* ==============================================
   RESPONSIVE
   ============================================== */

/* Tablet */
@media (max-width: 768px) {
  .gform_wrapper
  .ginput_container_image_choice
  .gfield_radio
  .gchoice {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}

/* Mobiel */
@media (max-width: 480px) {
  .gform_wrapper
  .ginput_container_image_choice
  .gfield_radio
  .gchoice {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="number"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="password"],
  .gform_wrapper textarea,
  .gform_wrapper select {
    font-size: 16px !important;
  }
}
/* ==============================================
   GEBLOKKEERDE DATA — NIEUWE GF-KALENDER
   ============================================== */

.gform-datepicker-calendar td.day.gfbd-period-blocked {
  background: #F5C84C !important;
  color: #17120A !important;
  opacity: 1 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Het nummer binnen de dag */
.gform-datepicker-calendar td.day.gfbd-period-blocked span {
  background: transparent !important;
  color: #17120A !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Hover */
.gform-datepicker-calendar td.day.gfbd-period-blocked:hover {
  background: #E2B331 !important;
  color: #17120A !important;
}

/* Voorkomt dat geselecteerde styling de gele kleur overschrijft */
.gform-datepicker-calendar td.day.gfbd-period-blocked.selected,
.gform-datepicker-calendar td.day.gfbd-period-blocked.dayMarked,
.gform-datepicker-calendar td.day.gfbd-period-blocked.dayToday {
  background: #F5C84C !important;
  color: #17120A !important;
}

/* Weekenden eventueel subtiel grijs */
.gform-datepicker-calendar td.day.gfbd-weekend:not(.gfbd-period-blocked) {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(20, 35, 55, 0.45) !important;
}