/* 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: #2a5e51;
}

/*Feestdag goud*/
.datepicker .day.feestdag,
.datepicker .day.feestdag.disabled {
    color: #d4af37 !important; /* goudkleurig cijfer */
    font-weight: bold;
    position: relative;
}

/* Klein rondje om het cijfer zonder cel te verstoren */
.datepicker .day.feestdag::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 29px;               /* klein rondje */
    height: 29px;
    border: 1px solid #d4af37; /* gouden rand */
    border-radius: 50%;
    pointer-events: none;
}

#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],
input[type=submit]:hover {
  font-family: 'Poppins', sans-serif;
  color: #FFFFFF  !important;
  width: 380px;
  height: 1.3em;
  font-size: 20px !important;
  padding: 0.5em;
  letter-spacing: 0.05em;
  border: 0;
  text-transform: none;
  background: #0056b3 !important;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
}

#contact input[type="submit"]:focus {
  background-color: #007bff !important;
  border: 2px solid black !important;
}

/* 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: transform 0.3s, background-color 0.3s, color 0.3s; /* soepelere hover/klik */
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-width: 90px;
  text-align: center;
}

.custom-label:hover {
  background-color: #a3c9ff; /* lichtblauw bij hover */
  color: #000;               /* eventueel tekstkleur aanpassen */
  transform: scale(1.05);    /* licht schalen voor interactief effect */
}

.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);
}

/* Verwijder het standaard focus-vierkant */
.radio-option input[type="radio"]:focus + .custom-label {
  outline: none; /* verwijdert het vierkant */
  box-shadow: 0 0 0 3px rgba(163, 201, 255, 0.5); /* subtiele highlight rond label */
}

/* ==== 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;
}

/* Flat modern schuifknop met donkerblauw bolletje en lichtere achtergrond */
.switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  width: 44px;
  height: 20px;
  background-color: #ddd;          /* standaard grijs */
  border-radius: 10px;
  transition: background-color 0.3s;
}

.slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 1px;
  top: 1px;
  background-color: #0056b3;       /* donkerblauw bolletje */
  border-radius: 50%;
  transition: transform 0.3s;
}

input:checked + .slider {
  background-color: #99ccff;       /* lichtere blauwe achtergrond bij actief */
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Label naast toggle */
.retour-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.retour-toggle-group span {
  font-weight: bold;
  color: #ff6f00;                 /* opvallend label */
  font-size: 14px;
}

/* === 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;
}

/* Alert melding  2e formulier */
.custom-alert {
  display: inline-flex;             /* past zich aan de inhoud aan */
  align-items: center;
  background-color: #fff;           /* wit vlak */
  color: #000;                      /* zwarte tekst */
  border-radius: 4px;
  padding: 8px 12px;                /* boven/onder + links/rechts padding */
  margin-top: 5px;
  font-size: 14px;
  gap: 10px;                        /* ruimte tussen vierkant en tekst */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.custom-alert::before {
  content: "!";                     /* uitroepteken */
  background-color: #ff6f00;        /* feloranje vierkant */
  color: #fff;                       /* wit uitroepteken */
  font-weight: 900;                 /* extra dik */
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

/* Style  2e formulie button*/
.extra-btn {
  background: #dddddd;
  color:#000;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  width: 60%;
  display: none; /* standaard verborgen */
  transition: background 0.3s ease;
}

.extra-btn:hover {
  background: #b0b0b0;
}