/* Google Fonts Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Koppen */
h1, h3.text-center, h5 {
  font-family: 'Poppins', sans-serif;
  color: #81b6d0;
}
h1 { font-size: 14px; }
h3.text-center {
  font-size: 20px;
  color: #1b1e23;
}
h4.text-center {
  text-align: center;
  font-size: 18px;
  color: #81b6d0;
}

#contact {
  background-color: #f9f9f9; /* lichtgrijs */
  border: 1px solid #ccc;    /* subtiel grijs randje */
  border-radius: 6px;
  padding: 20px;
  box-sizing: border-box;
}

/* Algemene input, select, textarea */
#contact input, #contact select, #contact textarea {
  font-family: 'Poppins', sans-serif;
}

/* Focus effect inputs/select/textarea */
#contact input:focus, #contact select:focus, #contact textarea:focus {
  background: #fff !important;
  border: 2px solid #a3c9ff !important;
  box-shadow: none !important;
}

/* Ongeldige velden */
input:invalid, select:invalid, textarea:invalid {
  border-color: #ccc !important;
  color: #aaa;
}

/* Placeholder kleur */
#contact input::placeholder,
#contact textarea::placeholder {
  color: #aaa;
  opacity: 1;
}

/* Algemene tekstvelden */
#contact input[type=text],
#contact input[type=email],
#contact input[type=tel] {
  background: #f1f1f1;
  cursor: pointer;
  border: 0;
  width: 380px;
  height: 1.6em;
  font-size: 16px;
  color: #000;
  padding: 8px;
  border-radius: 4px;
  text-align: left;
  vertical-align: middle;
}

/* Tekstveld (textarea) */
#contact textarea {
  background: #f1f1f1;
  cursor: pointer;
  border: 0;
  color: #000;
  font-size: 16px !important;
  line-height: 1.5em;
  height: calc(3 * 1.5em + 16px) !important;
  width: 325px !important;
  padding: 8px !important;
  border-radius: 4px;
  box-sizing: border-box !important;
}

/* Select dropdowns */
select.cform-text, #contact select.initial-option,
#hours, #minutes, #hours2, #minutes2, #halenHours, #halenMinutes, #brengenHours, #brengenMinutes {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  width: 325px;
  height: 2.4em;
  background: #f1f1f1;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  color: #aaa; /* standaard placeholderkleur */
  padding: 5px 10px;
  box-sizing: border-box;
}

/* Tijd dropdowns smaller */
#hours, #minutes, #hours2, #minutes2, #halenHours, #halenMinutes, #brengenHours, #brengenMinutes {
  width: 120px;
  height: 2.2em;
  padding: 0 10px;
}

/* Opties kleur */
select.cform-text option,
#hours option, #minutes option,
#hours2 option, #minutes2 option,
#halenHours option, #halenMinutes option,
#brengenHours option, #brengenMinutes option {
  background: #fff;
  font-size: 16px;
  color: #000;
}

/* Placeholder opties kleur */
select.cform-text option[value=""],
#hours option[value=""], #minutes option[value=""],
#hours2 option[value=""], #minutes2 option[value=""],
#halenHours option[value=""], #halenMinutes option[value=""],
#brengenHours option[value=""], #brengenMinutes option[value=""] {
color: #aaa;
}

/* Select na selectie (JS .selected) */
select.cform-text.selected,
#hours.selected, #minutes.selected,
#hours2.selected, #minutes2.selected,
#halenHours.selected, #halenMinutes.selected,
#brengenHours.selected, #brengenMinutes.selected {
  color: #000 !important;
}

/* Eerste optie in dropdowns - donkergrijze achtergrond, witte tekst */
select.cform-text option:first-child,
#hours option:first-child,
#minutes option:first-child,
#hours2 option:first-child,
#minutes2 option:first-child,
#halenHours option:first-child,
#halenMinutes option:first-child,
#brengenHours option:first-child,
#brengenMinutes option:first-child {
  background-color: #808080;
  color: #FFFFFF;
  font-size: 18px;
}

#hours2, #minutes2 {
  color: #aaa; /* standaard lichte placeholder kleur */
}

#hours2.selected, #minutes2.selected {
  color: #000; /* kleur als er iets geselecteerd is */
}

/* Submit knop */
input[type=submit] {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  width: 380px !important;
  height: 1.4em !important;
  font-size: 1.3em;
  padding: 0.5em;
  border-radius: 3px;
  border: 0;
  background: #0056b3 !important;
  box-shadow: none;
  text-shadow: none;
  margin: 0 auto;
  display: block;
  text-transform: none;
  letter-spacing: 0.05em;
}
input[type=submit]:focus {
  background-color: #007bff !important;
  border: 2px solid black !important;
  box-shadow: none !important;
}
input[type=submit]:hover {
  background-color: #0056b3 !important;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

/* Kleinere velden lettergrootte en hoogte */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact select.cform-text,
#datepicker input.form-control.datepicker-input,
#halenPicker input.form-control.datepicker-input,
#brengenPicker input.form-control.datepicker-input,
#hours, #minutes,
#hours2, #minutes2,
#halenHours, #halenMinutes,
#brengenHours, #brengenMinutes {
font-size: 16px !important;
  height: 2.6em !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

/* Verberg specifieke invoervelden */
input#klantnummer.hform-text,
input#security_id.hform-text {
  display: none;
}

/* invoerveld kalender  */
.datepicker-input {
  width: 260px !important;
}

/* Radio buttons modern */
.radio-group-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.radio-option {
  position: relative;
}
.radio-option input[type="radio"] {
  display: none;
}
.custom-label {
  display: inline-block;
  padding: 8px 20px;
  background-color: #ccc;
  border-radius: 50px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-width: 90px;
  text-align: center;
}
.radio-option.haalbreng .custom-label {
  min-width: 200px;
}
.radio-option input[type="radio"]:checked + .custom-label {
  background-color: #0056b3;
  color: #fff;
  transform: scale(1.05);
}

/* ==== spamcode en uitkomst uitlijning ==== */
.captcha-wrapper {
  display: flex;
  justify-content: center;  /* Horizontaal centreren */
  margin-top: 10px;
}

.captcha-group {
  display: flex;
  align-items: center;      /* Verticaal centreren */
  gap: 12px;                /* Afstand tussen img en input */
}

.captcha-input {
  width: 100px !important;
  font-size: 12px;
  text-align: center;
  padding: 4px;
  border-radius: 4px;
  border: none;
  background: #f1f1f1;
  font-family: 'Poppins', sans-serif;
}

/* Slider knop styling - compacter */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;  /* was 50px */
  height: 22px; /* was 28px */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;  /* was 22px */
  width: 16px;   /* was 22px */
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #0056b3; /* bootstrap primary blauw */
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.retour-toggle-group {
  display: flex;
  align-items: center;    /* Verticaal centreren */
  justify-content: flex-start; /* Tekst en knop links uitlijnen binnen container */
  gap: 10px;              /* Ruimte tussen knop en tekst */
  margin-bottom: 20px; /* meer ruimte onder de hele groep */
  margin-top: 10px;
  padding-left: 35px;     /* Dit schuift de hele groep naar rechts */
}
.switch {
  margin-top: 0;         
}

/* === DATUMPICKER STYLING (medium formaat) === */
/* Kalender dropdown */
.datepicker-dropdown {
  z-index: 9999 !important;
  position: absolute !important;
  left: 20% !important;
  transform: translateX(0) !important;
  top: 100%;
}

/* Algemene kalender */
.datepicker {
  width: 360px;
  font-size: 20px;
}

/* Inactieve dagen */
.datepicker table tr td.day.disabled {
  color: #f4aaaa !important;
}

/* Actieve dagen vet */
.datepicker table tr td.day:not(.disabled) {
  font-weight: bold;
}

/* Maand/jaar niet klikbaar */
.datepicker table thead tr th.datepicker-switch {
  pointer-events: none;
}

/* Dagcellen */
.datepicker table tr td {
  padding: 12px;
  font-size: 18px;
  color: #000000;
}

/* Weekdagen (kop) */
.datepicker table tr th {
  padding: 12px;
  font-size: 18px;
  color: #003366;
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 2px;
}

/* Datumselector bovenin */
.datepicker .datepicker-switch {
  background-color: #007BFF;
  color: #FFFFFF;
  font-size: 22px;
}

/* Navigatieknoppen vorige/volgende maand */
.datepicker .prev,
.datepicker .next {
  background-color: #003366;
  color: #f2f2f2;
  font-size: 18px;
}

/* Hover-effect op navigatieknoppen */
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: #c8c8c8;
  color: #000000;
}

/* Kalenderstructuur */
.datepicker table {
  border-collapse: collapse;
  width: 100%;
}

.datepicker table thead {
  border: 1px solid #ccc;
  background-color: #e0e0e0;
}

.datepicker table thead tr th {
  border: none;
  text-align: center;
  width: 14.28%;
  box-sizing: border-box;
}