/* ============================================================
   BOOKING FORM — hs26-look
   Gebruikt de hs26 design-tokens (var(--sea) enz.), die op deze
   pagina al geladen zijn via de hs26-header (hs26.css).
   BELANGRIJK: klassenamen die booking.js aanstuurt blijven behouden:
   .alert(.-success/-danger/-warning), .is-invalid, .is-valid,
   .invalid-feedback, .was-validated, .date-bezet, .date-vrij,
   en de .datepicker-widgetklassen.
   ============================================================ */

/* ---------- Formulier-kaart ---------- */
.hs-book-form {
  max-width: 760px;
  margin: 0 auto;
  background: var(--shell);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
}

/* ---------- Velden ---------- */
.hs-field { margin-bottom: var(--sp-3); }
.hs-field-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.hs-field-label {
  display: block; font-family: var(--font-body); font-weight: 600;
  color: var(--ink); margin-bottom: .5em;
}
.hs-req { color: var(--brass); }

.hs-input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: .8em 1em; border: 1.5px solid var(--mist); border-radius: 10px;
  background: var(--chalk); color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hs-input:focus {
  outline: 0; border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(14, 109, 141, .12);
}
textarea.hs-input { resize: vertical; min-height: 90px; }

/* Select met teal chevron */
.hs-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230E6D8D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; background-size: 14px 11px;
}

/* Datepicker-inputs met kalendericoon */
.datepicker-input {
  cursor: pointer; padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6D8D' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; background-size: 18px 18px;
}

.hs-field-help { display: block; margin-top: .4em; color: var(--slate); font-size: .85rem; }

/* Checkbox (eigen naam om botsing met hs26 .hs-check icoon te vermijden) */
.hs-book-check { display: flex; gap: .6em; align-items: flex-start; cursor: pointer; margin-top: var(--sp-2); }
.hs-book-check input { width: 1.2em; height: 1.2em; margin-top: .15em; accent-color: var(--sea); flex-shrink: 0; }
.hs-book-check span { color: var(--ink); }

/* ---------- Gastgegevens-kaart ---------- */
.hs-book-guest { margin: var(--sp-3) 0; }

/* ---------- Prijsoverzicht ---------- */
.hs-price {
  background: var(--sea-soft); border: 1.5px solid var(--sea);
  border-radius: var(--radius); padding: var(--sp-3); margin: var(--sp-3) 0;
}
.hs-price-row, .hs-price-total { display: flex; justify-content: space-between; align-items: center; padding: .35em 0; gap: var(--sp-2); }
.hs-price-row strong { color: var(--ink); font-weight: 600; }
.hs-price-row span { color: var(--sea); font-weight: 600; }
.hs-price-korting strong, .hs-price-korting span { color: #1e6b3a; }
.hs-price-total {
  border-top: 1px solid var(--sea); margin-top: .5em; padding-top: .7em;
}
.hs-price-total strong { font-family: var(--font-display); font-size: 1.2rem; }
.hs-price-total #totalPrice { color: var(--sea); }

/* ---------- Submit ---------- */
.hs-book-submit { text-align: center; margin-top: var(--sp-4); }
.hs-book-submit .hs-btn { min-width: 260px; }
.hs-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- Alerts (booking.js zet .alert .alert-<type>) ---------- */
.alert { border-radius: 10px; padding: .85em 1.1em; font-size: .95rem; font-weight: 500; }
.alert-success { background: #e6f4ea; color: #1e6b3a; }
.alert-danger  { background: #fbe9e9; color: #a12626; }
.alert-warning { background: #fff6e0; color: #8a5a00; }
#availabilityStatus { margin-bottom: var(--sp-2); }
#formMessage { margin-top: var(--sp-3); }

/* ---------- Validatie (booking.js zet deze klassen) ---------- */
.hs-input.is-invalid { border-color: #c0392b; }
.hs-input.is-valid { border-color: #2e7d46; }
.invalid-feedback { color: #c0392b; font-size: .85rem; margin-top: .35em; display: block; }
.was-validated .hs-input:invalid { border-color: #c0392b; }

/* ---------- Datepicker-widget (bootstrap-datepicker) in hs26-kleuren ---------- */
.datepicker.dropdown-menu {
  position: absolute !important; /* Bootstrap ontbreekt in hs26; anders valt de kalender onderaan de pagina (position:static) */
  background: #fff; border: 1px solid var(--mist); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .5rem; z-index: 3000;
}
.datepicker table tr td.date-bezet {
  background: #fbe9e9 !important; color: #a12626 !important;
  text-decoration: line-through; cursor: not-allowed; pointer-events: none;
}
.datepicker table tr td.date-vrij { background: #e6f4ea; color: #1e6b3a; }
.datepicker table tr td.date-vrij:hover { background: #d4ecdb; cursor: pointer; }
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover { background: #f5f2ec; color: #c4bdb0; cursor: not-allowed; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.day:hover { background: var(--sea) !important; color: #fff !important; border-color: var(--sea) !important; }
.datepicker table tr td.today { background: var(--sea-soft); font-weight: 700; }
.datepicker table tr td.today.active { background: var(--sea) !important; color: #fff !important; }
.datepicker .datepicker-switch { color: var(--sea); font-weight: 600; }
.datepicker .prev, .datepicker .next { color: var(--sea); font-weight: 600; }
.datepicker .prev:hover, .datepicker .next:hover { background: var(--sea-soft); color: var(--sea-deep); }
.datepicker thead tr th { color: var(--slate); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (min-width: 680px) {
  .hs-field-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hs-book-form { padding: var(--sp-3); }
  .hs-input { font-size: 16px; } /* voorkomt inzoomen op iOS */
  .hs-book-submit .hs-btn { width: 100%; min-width: 0; }
  .datepicker.dropdown-menu { font-size: 14px; }
}