/* ============================================================================
   Bruuks Huus — Reserveringskalender (Taak 6, Webby lead)
   ----------------------------------------------------------------------------
   Kleur-spec (Benjamin, 2026-07-02): grijs = vrij, oranje = deels bezet
   (1-2 dagdelen), rood/terracotta = hele dag bezet, groen = jouw selectie.
   Uitsluitend brandbook-tokens (--bh-*) — geen losse hex-codes.
   Alleen geladen op page-reserveren.php (bh_enqueue_reservering_assets()).
   ============================================================================ */

.bh-kalender {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius-lg);
  box-shadow: var(--bh-shadow-md);
  padding: clamp(20px, 3vw, 32px);
  margin: 0 0 clamp(30px, 5vw, 48px);
}

/* ---------- Kop: ruimte-wissel + maandnavigatie ---------- */
.bh-kal-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bh-kal-wissel {
  position: relative;
  display: inline-flex;
  background: var(--bh-bg-alt);
  border-radius: var(--bh-radius-pill);
  padding: 4px;
  gap: 2px;
}

/* Glijdende pill-achtergrond (Taak wave-d, punt 3e): JS (kalender.js) positioneert
   deze via transform + width/height op de actieve tab, i.p.v. dat elke tab zijn
   eigen achtergrond aan/uit zet — dat gaf een harde wissel, dit glijdt. */
.bh-kal-wissel-pill {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bh-action);
  border-radius: var(--bh-radius-pill);
  transition: transform 0.32s var(--bh-ease), width 0.32s var(--bh-ease), height 0.32s var(--bh-ease);
  z-index: 0;
  pointer-events: none;
}

.bh-kal-tab {
  position: relative;
  z-index: 1;
  font-family: var(--bh-font);
  font-weight: var(--bh-w-semibold);
  font-size: var(--bh-fs-sm);
  color: var(--bh-text);
  background: transparent;
  border: none;
  border-radius: var(--bh-radius-pill);
  padding: 8px 18px;
  cursor: pointer;
  transition: color var(--bh-dur-fast) var(--bh-ease);
}
.bh-kal-tab:hover { color: var(--bh-heading); }
.bh-kal-tab.is-actief {
  color: var(--bh-on-accent);
}

.bh-kal-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bh-font);
}
.bh-kal-nav button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bh-border);
  background: var(--bh-surface);
  color: var(--bh-heading);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--bh-dur-fast) var(--bh-ease), border-color var(--bh-dur-fast) var(--bh-ease);
}
.bh-kal-nav button:hover { background: var(--bh-bg-alt); border-color: var(--bh-accent); }
.bh-kal-maandlabel {
  font-weight: var(--bh-w-bold);
  color: var(--bh-heading);
  min-width: 11ch;
  text-align: center;
  text-transform: capitalize;
}

/* ---------- Weekdagen + grid ---------- */
.bh-kal-weekdagen {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.bh-kal-weekdagen span {
  text-align: center;
  font-family: var(--bh-font);
  font-size: var(--bh-fs-xs);
  font-weight: var(--bh-w-bold);
  letter-spacing: var(--bh-ls-wide);
  text-transform: uppercase;
  color: var(--bh-text-muted);
}

.bh-kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  min-height: 60px;
}

.bh-kal-laden {
  grid-column: 1 / -1;
  font-family: var(--bh-font);
  font-style: italic;
  color: var(--bh-text-muted);
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.bh-kal-dag {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bh-radius-sm);
  border: none;
  font-family: var(--bh-font);
  font-weight: var(--bh-w-semibold);
  font-size: var(--bh-fs-sm);
  cursor: pointer;
  transition: transform var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease);
}
.bh-kal-dag.is-leeg { visibility: hidden; cursor: default; }
.bh-kal-dag:disabled { cursor: not-allowed; opacity: .55; }
.bh-kal-dag:not(:disabled):not(.is-leeg):hover { transform: translateY(-2px); box-shadow: var(--bh-shadow-sm); }

.bh-kal-dag.is-vrij     { background: var(--bh-salie-40); color: var(--bh-text-strong); }
.bh-kal-dag.is-deels    { background: var(--bh-oranje-70); color: var(--bh-text-strong); }
.bh-kal-dag.is-vol      { background: var(--bh-terracotta); color: var(--bh-on-accent); }
.bh-kal-dag.is-selectie { background: var(--bh-action); color: var(--bh-on-accent); box-shadow: 0 0 0 3px var(--bh-groen-40); }
.bh-kal-dag.is-verleden:not(.is-selectie) { background: var(--bh-bg-alt); color: var(--bh-text-muted); }

/* ---------- Legenda ---------- */
.bh-kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--bh-font);
  font-size: var(--bh-fs-xs);
  color: var(--bh-text-muted);
}
.bh-kal-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.bh-kal-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bh-kal-dot.is-vrij     { background: var(--bh-salie-40); }
.bh-kal-dot.is-deels    { background: var(--bh-oranje-70); }
.bh-kal-dot.is-vol      { background: var(--bh-terracotta); }
.bh-kal-dot.is-selectie { background: var(--bh-action); }

/* ---------- Interactie-paneel met links naar het Bookly-formulier ---------- */
.bh-kal-paneel {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-radius-md);
  background: var(--bh-bg-alt);
}
.bh-kal-paneel-titel {
  margin: 0 0 12px;
  font-family: var(--bh-font);
  font-weight: var(--bh-w-bold);
  color: var(--bh-heading);
}
.bh-kal-paneel-leeg { margin: 0; font-family: var(--bh-font); color: var(--bh-text-muted); font-style: italic; }

.bh-kal-keuzeknoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-kal-keuzeknop {
  font-family: var(--bh-font);
  font-weight: var(--bh-w-semibold);
  font-size: var(--bh-fs-sm);
  padding: 9px 18px;
  border-radius: var(--bh-radius-md);
  border: 1.5px solid var(--bh-heading);
  color: var(--bh-heading);
  background: var(--bh-surface);
  cursor: pointer;
  transition: background var(--bh-dur-fast) var(--bh-ease), color var(--bh-dur-fast) var(--bh-ease);
}
.bh-kal-keuzeknop:hover { background: var(--bh-action); color: var(--bh-on-accent); border-color: var(--bh-action); }
/* Legacy keuzeweergave van het oude eigen formulier, bewaard tot acceptatie. */
.bh-kal-keuzeknop.is-gekozen {
  background: var(--bh-action);
  color: var(--bh-on-accent);
  border-color: var(--bh-action);
  box-shadow: inset 0 2px 5px rgba(20, 26, 22, .4);
  transform: translateY(1px);
}
.bh-kal-keuzeknop.is-gekozen:hover { background: var(--bh-action); }

/* Eigen tijd: aantal uren kiezen, daarna de begintijd in het formulier. */
.bh-kal-eigen { margin-top: 16px; }
.bh-kal-eigen-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--bh-font);
  font-size: var(--bh-fs-sm);
  color: var(--bh-text-muted);
}
.bh-kal-eigen-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-kal-eigen-uren {
  font-family: var(--bh-font);
  font-size: var(--bh-fs-sm);
  color: var(--bh-heading);
  min-height: 42px;
  padding: 8px 40px 8px 14px;
  border: 1.5px solid var(--bh-border);
  border-radius: var(--bh-radius-md);
  background: var(--bh-surface) 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") no-repeat right 14px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.bh-kal-eigen-uren:focus-visible { outline: 3px solid var(--bh-focus); outline-offset: 2px; }

/* ---------- Legacy samenvatting van het oude eigen reserveringsformulier ---------- */
.bh-rf-samenvatting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--bh-border);
}
/* [hidden] en een class met display:flex hebben gelijke CSS-specificiteit —
   zonder deze regel wint de class en blijft het blok zichtbaar vóór er
   iets gekozen is. */
.bh-rf-samenvatting[hidden] { display: none; }
.bh-rf-badge-label {
  font-family: var(--bh-font);
  font-weight: 700;
  font-size: var(--bh-fs-xs);
  letter-spacing: var(--bh-ls-wide);
  text-transform: uppercase;
  color: var(--bh-text-muted);
}
.bh-rf-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--bh-font);
  font-weight: 700;
  font-size: .82rem;
  color: var(--bh-on-accent);
  background: var(--bh-action);
  border-radius: var(--bh-radius-pill);
  padding: 6px 14px;
}
.bh-rf-badge:empty { display: none; }

/* Legacy kalenderblokkades van het oude eigen beheer. */
.bh-kal-admin-rijen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.bh-kal-admin-rij {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--bh-font);
  font-weight: var(--bh-w-semibold);
  font-size: var(--bh-fs-xs);
  letter-spacing: var(--bh-ls-wide);
  text-transform: uppercase;
  color: var(--bh-text-muted);
}
.bh-kal-admin-rij select {
  font-family: var(--bh-font);
  font-size: var(--bh-fs-base);
  font-weight: var(--bh-w-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--bh-text-strong);
  padding: 8px 12px;
  border-radius: var(--bh-radius-sm);
  border: 1px solid var(--bh-border);
  background: var(--bh-surface);
}
.bh-kal-admin-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bh-kal-admin-snel {
  font-family: var(--bh-font);
  font-size: var(--bh-fs-xs);
  padding: 7px 14px;
  border-radius: var(--bh-radius-pill);
  border: 1px solid var(--bh-border);
  background: var(--bh-surface);
  color: var(--bh-text);
  cursor: pointer;
}
.bh-kal-admin-snel:hover { border-color: var(--bh-accent); color: var(--bh-heading); }
.bh-kal-paneel-status {
  margin: 8px 0 0;
  font-family: var(--bh-font);
  font-size: var(--bh-fs-sm);
  font-style: italic;
  color: var(--bh-text-muted);
}

/* ---------- Foutmelding in het reserveringsformulier ---------- */
.cf-sent.is-error { color: var(--bh-terracotta) !important; }

/* ---------- Honeypot (anti-spam, onzichtbaar voor mensen) ---------- */
.bh-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .bh-kal-top { flex-direction: column; align-items: flex-start; }
  .bh-kal-dag { font-size: var(--bh-fs-xs); }
  /* Vier ruimtes passen niet naast elkaar: twee per rij, de pill volgt via offsetTop. */
  .bh-kal-wissel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--bh-radius-lg); }
  .bh-kal-tab { padding: 10px 12px; }
}