/* ==========================================================================
   Bookly-aanvraagformulier op /reserveren/ in de Bruuks Huus-huisstijl.
   Het formulier staat in .reserveer-form.bh-bookly (zelfde kaart als het
   vorige eigen formulier). Bookly zet zijn hoofdkleur als --bookly-main-color
   op :root; hier krijgt het formulier de actiekleur van het thema (groen) en
   volgen labels, velden en knoppen de bestaande formulierstijl uit main.css.
   ========================================================================== */

.bh-bookly{--bookly-main-color:var(--bh-action); --bookly-color:var(--bh-action)}

/* Basis: lettertype en tekstkleur van het thema in plaats van Bookly's reset. */
.bh-bookly .bookly-form,
.bh-bookly .bookly-form *{font-family:var(--sans)}
.bh-bookly .bookly-form{color:var(--ink); font-size:1rem; line-height:1.6; max-width:none}
.bh-bookly .bookly-form .bookly-box{margin-bottom:18px}
.bh-bookly .bookly-form .bookly-box.bookly-bold{font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.35; color:var(--green-deep)}

/* Labels zoals in het eigen formulier: klein, kapitalen, gedempt. */
.bh-bookly .bookly-form .bookly-form-group > label,
.bh-bookly .bookly-form label{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft) !important; margin-bottom:6px; display:block;
}
.bh-bookly .bookly-form .bookly-form-group{margin-bottom:16px}

/* Velden. */
.bh-bookly .bookly-form input[type="text"],
.bh-bookly .bookly-form input[type="email"],
.bh-bookly .bookly-form input[type="tel"],
.bh-bookly .bookly-form input[type="number"],
.bh-bookly .bookly-form select,
.bh-bookly .bookly-form textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background-color:var(--white);
  border:1px solid var(--line); border-radius:4px; padding:12px 14px; width:100%; min-height:48px; box-shadow:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bh-bookly .bookly-form select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23496154' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.bh-bookly .bookly-form textarea{min-height:110px; resize:vertical}
.bh-bookly .bookly-form input:focus,
.bh-bookly .bookly-form select:focus,
.bh-bookly .bookly-form textarea:focus{outline:none; border-color:var(--bh-focus); box-shadow:0 0 0 3px var(--bh-terracotta-a40)}

/* Foutmeldingen: terracotta tekst, dikkere rand op het veld. */
.bh-bookly .bookly-form .bookly-label-error{color:var(--bh-terracotta) !important; font-size:.9rem; font-weight:600; margin-top:6px}
.bh-bookly .bookly-form input.bookly-error,
.bh-bookly .bookly-form select.bookly-error,
.bh-bookly .bookly-form textarea.bookly-error{border:2px solid var(--bh-terracotta) !important}

/* Knoppen zoals .btn-primary; terug als rustige omlijnde knop. */
.bh-bookly .bookly-form .bookly-btn{
  font-family:var(--sans) !important; font-weight:700 !important; font-size:.98rem !important; letter-spacing:.01em !important; text-transform:none !important;
  color:var(--bh-on-accent) !important; background:var(--bh-action) !important; border-radius:3px !important;
  padding:14px 26px !important; min-height:50px; min-width:0;
  box-shadow:0 2px 0 var(--bh-action-hover);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.bh-bookly .bookly-form .bookly-btn:hover{transform:translateY(-2px); background:var(--bh-action-hover) !important}
.bh-bookly .bookly-form .bookly-btn:focus-visible{outline:3px solid var(--bh-focus); outline-offset:3px}
.bh-bookly .bookly-form .bookly-btn .ladda-label{font:inherit !important; color:inherit !important; text-transform:none !important; letter-spacing:inherit !important}
.bh-bookly .bookly-form .bookly-back-step,
.bh-bookly .bookly-form .bookly-js-back-step,
.bh-bookly .bookly-form .bookly-js-mobile-prev-step{
  background:transparent !important; color:var(--green-deep) !important; box-shadow:inset 0 0 0 1.5px var(--green-deep) !important;
}
.bh-bookly .bookly-form .bookly-back-step:hover,
.bh-bookly .bookly-form .bookly-js-back-step:hover,
.bh-bookly .bookly-form .bookly-js-mobile-prev-step:hover{background:var(--green-deep) !important; color:var(--paper) !important}
.bh-bookly .bookly-form .bookly-nav-steps{border-top:1px solid var(--line); padding-top:20px; margin-top:8px}

/* Voortgang: Bookly toont op brede schermen de stapnamen, op smalle schermen bolletjes. */
.bh-bookly .bookly-form ol.bookly-stepper{margin:0 0 22px}
.bh-bookly .bookly-form .bookly-progress-tracker{margin-bottom:24px}
.bh-bookly .bookly-form .bookly-progress-tracker > div{font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--ink-soft)}

/* Eerste stap: keuzes onder elkaar in twee kolommen in plaats van Bookly's smalle tabelrij. */
@media (min-width:641px){
  .bh-bookly .bookly-form .bookly-js-chain > .bookly-table{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; width:100%}
  .bh-bookly .bookly-form .bookly-js-chain > .bookly-table > .bookly-form-group{display:block; width:auto; margin:0 0 16px; padding:0}
}

/* Gegevensstap: naam, telefoon en e-mail onder elkaar, net als de velden eronder. Naast elkaar
   was de kolom te smal voor een e-mailadres en liep het telefoonlabel over twee regels. */
.bh-bookly .bookly-form .bookly-details-step .bookly-box.bookly-table{display:block !important; width:100%}
.bh-bookly .bookly-form .bookly-details-step .bookly-box.bookly-table > .bookly-form-group{display:block !important; width:auto; padding:0; margin:0 0 16px}
.bh-bookly .bookly-form .bookly-details-step .bookly-box.bookly-table > .bookly-form-group > div{margin-right:0}

/* Tijdstap: dagkoppen groen, tijden als rustige knoppen met duidelijke hover en focus. */
.bh-bookly .bookly-form .bookly-columnizer .bookly-day,
.bh-bookly .bookly-form .bookly-schedule-date{
  font-family:var(--sans) !important; font-size:.84rem !important; letter-spacing:.02em; border-radius:4px 4px 0 0;
}
.bh-bookly .bookly-form .bookly-columnizer .bookly-hour{
  font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:4px; min-height:48px;
}
.bh-bookly .bookly-form .bookly-columnizer .bookly-hour:focus-visible{outline:3px solid var(--bh-focus); outline-offset:2px}
.bh-bookly .bookly-form .bookly-time-next,
.bh-bookly .bookly-form .bookly-time-prev{min-width:48px}

/* Info over de ruimte (capaciteit) na het kiezen. */
.bh-bookly .bookly-form .bookly-staff-info,
.bh-bookly .bookly-form [class*="staff-info"]{font-size:.95rem; color:var(--ink-soft)}

/* Melding als Bookly niet actief is. */
.bh-bookly .bh-bookly-uit{margin:0; font-size:1.05rem}
.bh-bookly > .rf-note{margin-top:18px}

@media (prefers-reduced-motion: reduce){
  .bh-bookly .bookly-form .bookly-btn,
  .bh-bookly .bookly-form .bookly-btn:hover{transition:none; transform:none}
}

/* Telefoonveld met landkeuze: ruimte voor de vlag. */
.bh-bookly .bookly-form .iti{display:block; width:100%}
.bh-bookly .bookly-form .iti input[type="tel"]{padding-left:58px !important}

/* Toelichting onder de aanvraagvelden: kleiner en gedempt. */
.bh-bookly .bookly-form .bookly-form-group > div:not(:has(input, select, textarea)){font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin-top:6px}