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

/*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: #808080 !important;
}

/* Placeholder kleur */
#contact input::placeholder,
#contact textarea::placeholder {
  color: #808080;
  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: 2.4em;
  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: 20px !important;
  line-height: 1.5em;
  height: calc(3 * 1.5em + 20px) !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: 3.2em;
  background: #f1f1f1;
  border: 0;
  border-radius: 4px;
  font-size: 20px;
  color:#808080;  /* standaard placeholderkleur */
  padding: 5px 10px;
  box-sizing: border-box;
}

/* Tijd dropdowns smaller */
#hours, #minutes, #hours2, #minutes2, #halenHours, #halenMinutes, #brengenHours, #brengenMinutes {
  width: 120px;
  height: 2.4em;
  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: #808080;
}

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

/* Submit-knop */
input[type=submit],
input[type=submit]:hover {
  font-family: 'Poppins', sans-serif;
  color: #FFFFFF;
  width: 380px;
  height: 1.4em;
  font-size: 22px;
  padding: 0.5em;
  letter-spacing: 0.05em;
  border: 0;
  text-transform: none;
  background: #0056b3 !important;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
}

/* 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: 20px !important;
  height: 3.2em !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 BUTTON STYLING - MOBIEL-VRIENDELIJK */
/* ============================= */

/* Container van de buttons */
.radio-group-modern {
  display: flex;
  flex-wrap: wrap;       /* zorgt dat buttons op smalle schermen naar een nieuwe regel gaan */
  gap: 10px;             /* ruimte tussen buttons */
  justify-content: center; /* centreren */
}

/* Verberg de echte radio inputs */
.radio-option input[type="radio"] {
  display: none;                          /* input zelf verbergen */
  outline: none;                          /* focusvierkant desktop */
  -webkit-tap-highlight-color: transparent; /* verwijdert blauwe flits op mobiel */
  -moz-tap-highlight-color: transparent;    /* voor oudere Firefox op mobiel */
}

/* Labels voor de radio buttons */
.custom-label {
  display: inline-block;
  padding: 14px 14px;
  background-color: #ccc;
  border-radius: 50px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* Vloeiende animaties bij hover/klik */
  transition: transform 0.2s, background-color 0.2s, color 0.2s;
  
  -webkit-tap-highlight-color: transparent; /* verwijdert blauwe flits bij touch */
}

/* Hover effect desktop */
.custom-label:hover {
  background-color: #a3c9ff; /* lichtblauw bij hover */
  color: #000;
  transform: scale(1.05);    /* licht schalen */
}

/* Selectie effect */
.radio-option input[type="radio"]:checked + .custom-label {
  background-color: #0056b3; /* donkerblauw */
  color: #fff;
  transform: scale(1.05);
}

/* Focus effect (subtiel, geen vierkant) */
.radio-option input[type="radio"]:focus + .custom-label {
  outline: none; 
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.3); /* subtiele blauwe highlight */
}

/* ==== 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: 115px !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;
}

/* ============================= */
/* 📅 DATEPICKER STYLING */
/* ============================= */

.datepicker {
  width: 380px;
  font-size: 18px;
  margin: 0 auto;
  max-width: 95vw;
}

.datepicker-dropdown {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  position: absolute !important;
  z-index: 1050 !important;
}

.datepicker table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 5px !important;
}

.datepicker table tr td {
  padding: 8px;
  font-size: 18px;
  color: #000;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.datepicker table tr th {
  padding: 4px;
  font-size: 18px;
  color: #003366;
  background-color: #e0e0e0;
  border-radius: 5px;
  text-align: center;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  font-size: 20px;
  padding: 8px;
  background-color: #003366;
  color: #f2f2f2;
  border-radius: 6px;
  user-select: none;
}

.datepicker .datepicker-switch {
  background-color: #007BFF;
  color: #FFFFFF;
  font-weight: bold;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: #003366;
  color: #c8c8c8;
  cursor: pointer;
}

.datepicker table tr td.day:not(.disabled):hover {
  background-color: #fce7e7;
}

.datepicker table tr td.day:not(.disabled) {
  font-weight: bold;
  cursor: pointer;
}

.datepicker table tr td.day.disabled,
.datepicker table tr td.gesloten,
.gesloten.rood,
.lichtgrijs {
  color: #f4aaaa !important;
  background-color: transparent !important;
  font-weight: normal !important;
  cursor: default !important;
}

.datepicker table tr td.new {
  color: #6e6e6e !important;
  cursor: pointer;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover {
  background: none !important;
  box-shadow: none !important;
  color: #28a745 !important;
  font-weight: bold !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* Standaardkleur voor pijlknoppen */
.datepicker .prev,
.datepicker .next {
  opacity: 1;
  pointer-events: auto;
  background-color: #003366;
  color: #fff;
}

/* Uitgeschakelde pijlknoppen (aan begin/einde bereik) */
.datepicker .prev.disabled,
.datepicker .next.disabled {
  opacity: 0.4;
  pointer-events: none;
  background-color: #cccccc !important;
  color: #666666 !important;
}

/* Input veld voor datum */
#datepicker .form-control.datepicker-input {
    background: #f1f1f1;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    border: 0;
    width: 257px;
    height: 2.2em;
    font-size: 20px;
    text-align: left;
    vertical-align: middle;
    color: #000000;
    padding: 8px;
    border-radius: 4px;
}

/* Alert melding  2e formulier */
.custom-alert {
  display: inline-flex;             /* zet de inhoud naast elkaar */
  align-items: center;              /* centreert tekst en icoon verticaal */
  background-color: #fff;           /* witte achtergrond */
  color: #000;                      /* zwarte tekstkleur */
  border-radius: 4px;               /* iets ronder dan eerst */
  padding: 10px 10px;               /* meer ruimte rondom de inhoud */
  margin-top: 10px;                 /* iets meer ruimte boven de alert */
  font-size: 22px;                  /* grotere letters */
  gap: 12px;                        /* meer ruimte tussen icoon en tekst */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* iets sterkere schaduw */
  max-width: 300px;                 /* maximaal 350px breed → tekst breekt af */
}

.custom-alert::before {
  content: "!";                     /* uitroepteken */
  background-color: #ff6f00;        /* oranje blokje */
  color: #fff;                      /* wit uitroepteken */
  font-weight: 900;                 /* extra dik */
  font-size: 30px;                  /* groter uitroepteken */
  width: 35px;                      /* breder blokje */
  height: 35px;                     /* hoger blokje */
  display: flex;                    /* flexbox om te centreren */
  align-items: center;              /* verticaal centreren */
  justify-content: center;          /* horizontaal centreren */
  border-radius: 4px;               /* wat rondere hoeken */
}

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

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