/*
 * Tommy Booking Support — eigen opmaak voor de widgets (zoeken, resultaten, boeken).
 *
 * Tommy laadt zijn eigen CSS (zoekenboek/default.css, boeken.css, een Bootstrap 3 met tbs-prefix) en zet die soms pas
 * ná onze stylesheet in de pagina. Daarom begint elke regel met .b-tommy (de sectie om het blok): één class extra wint
 * altijd. !important alleen waar Tommy zelf !important gebruikt.
 */

.b-tommy {
  --t-accent: var(--color-accent, #123d1c);
  --t-accent-strong: #146027;
  --t-accent-soft: #e2f4e3;
  --t-ink: var(--color-text, #123d1c);
  --t-muted: #545e54;
  --t-border: #ced7cf;
  --t-surface: #ffffff;
  --t-surface-2: #f2f9f2;
  --t-radius: 12px;
  --t-radius-sm: 8px;
  /* Alle invoervelden (tekstvelden, keuzelijsten, datumvelden) en de knoppen tussen de velden: rond, overal hetzelfde */
  --t-field-radius: 999px;
  --t-control: 44px;
  --t-focus: 0 0 0 3px rgb(45 160 72 / .35);
  --t-ease: cubic-bezier(.25, 1, .5, 1);

  /* Kalender: beschikbaar / bezet / niet te kiezen / verleden */
  --t-free: #c0ebc4;
  --t-free-ink: #115020;
  --t-busy: #fbdedb;
  --t-busy-ink: #8a1c14;
  --t-off: #f1f4f1;
  --t-off-ink: #5a645b;
  --t-swatch-line: rgb(27 36 28 / .18);
  --t-past-ink: #98a399;

  /* Boekingsoverzicht: diepgroen met een korenkleurige knop, zoals de kaart op de appartementpagina's */
  --t-deep: #113117;
  --t-wheat: #e9b82c;
  --t-wheat-ink: #312504;
  --t-serif: var(--font-heading);
}

/* ==========================================================================
   Gedeeld: lettertype, velden, knoppen, focus
   ========================================================================== */

.b-tommy .tommy-zeb-wrapper,
.b-tommy .tommy-zeb-wrapper *,
.b-tommy #TommyBookingSupport :is(input, select, button, textarea) {
  font-family: inherit !important;
}

.b-tommy .tommy-zeb-wrapper { float: none; color: var(--t-ink); }

.b-tommy .tommy-zeb-wrapper :is(input, select),
.b-tommy #TommyBookingSupport :is(input, select) {
  height: var(--t-control);
  padding: 0 1.125rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-field-radius);
  background-color: var(--t-surface);
  color: var(--t-ink);
  font-size: 1rem;
  box-shadow: none;
  transition: border-color .15s var(--t-ease), box-shadow .15s var(--t-ease);
}

.b-tommy .tommy-zeb-wrapper :is(input, select):hover,
.b-tommy #TommyBookingSupport :is(input, select):hover { border-color: var(--t-muted); }

.b-tommy .tommy-zeb-wrapper :is(input, select, button, a):focus-visible,
.b-tommy #TommyBookingSupport :is(input, select, button, a):focus-visible {
  outline: none;
  border-color: var(--t-accent);
  box-shadow: var(--t-focus);
}

/* Datumvelden zijn readonly (de kalender opent bij klikken): laat dat ook zo voelen */
/* (niet het aantal personen: dat is een badge) */
.b-tommy .tommy-zeb-wrapper input[readonly]:not(.tommy-zeb-travelcompany-total) {
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23545e54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
}

/* Primaire knop: Zoeken, Boeken, Volgende */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-btn,
.b-tommy #TommyBookingSupport .tbs-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  float: none;
  min-height: var(--t-control);
  margin: 0 !important;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--t-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--t-ease), transform .15s var(--t-ease);
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-btn:hover,
.b-tommy #TommyBookingSupport .tbs-btn-success:hover { background: var(--t-accent-strong); color: #fff; }
/* Na een klik geen afwijkende kleur (Bootstrap kleurt :focus) */
.b-tommy #TommyBookingSupport .tbs-btn-success:focus:not(:hover) { background: var(--t-accent); color: #fff; }

.b-tommy .tommy-zeb-wrapper .tommy-zeb-btn:active,
.b-tommy #TommyBookingSupport .tbs-btn-success:active { transform: translateY(1px); }

/* ==========================================================================
   Zoekbalk (widget "mini", pagina Reserveren)
   ========================================================================== */

/* Tommy zet in de mini-widget álles op display:inline; geef de bouwstenen hun blokken terug */
.b-tommy .tommy-zeb-wrapper-mini :is(div, h2, tommy-search-and-book-mini, tommy-period, tommy-accommodation-type, tommy-accommodation-category, tommy-confirm-update, tommy-person-category-mini) {
  display: block;
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left {
  /* Flex in plaats van grid: Tommy verbergt soms velden (bijv. accommodatietype) en dan mogen er geen gaten vallen */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  width: 100%;
  float: none;
  /* Zonder eigen vlak: alleen de velden en de knop, direct op de pagina (geen achtergrond, geen binnenruimte) */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--t-ink);
  font-size: 1rem;
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-person-categories, .tommy-zeb-accommodation-types, .tommy-zeb-date) {
  float: none;
  max-width: none;
  flex: 1 1 13rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Periode is twee velden: geef die de ruimte */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date { flex: 2 1 20rem; }

/* Labels boven de velden */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-left h2,
.b-tommy .tommy-zeb-wrapper-mini h2.ng-binding {
  float: none;
  margin: 0 0 .375rem;
  color: var(--t-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}

.b-tommy .tommy-zeb-wrapper-mini tommy-period { width: 100%; }

.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* "Periode" alleen voor schermlezers: Aankomstdatum en Vertrekdatum zijn zelf de labels, op één lijn met Reisgezelschap */
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-date > h2.ng-binding {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.b-tommy .tommy-zeb-wrapper-mini :is(.tommy-zeb-date-begin-label, .tommy-zeb-date-end-label) {
  float: none;
  margin: 0 0 .375rem;
  color: var(--t-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period input,
.b-tommy .tommy-zeb-wrapper-mini :is(.tommy-zeb-date-begin-choice, .tommy-zeb-date-end-choice) input {
  width: 100%;
  margin: 0;
  padding: 0 2.5rem 0 .875rem;
}

.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-date-begin { margin: 0; }

.b-tommy .tommy-zeb-wrapper-mini :is(.tommy-zeb-accommodation-types, .tommy-zeb-accommodation-category) select { width: 100%; }

/*
 * Aantal personen: één veld met icoon, tekst, het aantal als badge en een pijltje.
 * Tommy levert een losse knop + een readonly input; de rand en het pijltje zitten daarom op de wrapper.
 */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini { width: 100%; }

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  min-width: 0;
  height: var(--t-control);
  padding: 0 .875rem 0 0;
  border: 1px solid var(--t-border);
  border-radius: var(--t-field-radius);
  background: var(--t-surface);
  cursor: pointer;
  transition: border-color .15s var(--t-ease), box-shadow .15s var(--t-ease);
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse:hover { border-color: var(--t-muted); }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse:focus-within { border-color: var(--t-accent); box-shadow: var(--t-focus); }

/* Pijltje, draait om als de lijst open is */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-left: .125rem;
  border-right: 2px solid var(--t-muted);
  border-bottom: 2px solid var(--t-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

/* Open: groene rand en het pijltje omhoog */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini:has(.tommy-zeb-person-category-list:not(.ng-hide)) .tommy-zeb-person-categories-collapse {
  border-color: var(--t-accent);
  box-shadow: var(--t-focus);
}
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini:has(.tommy-zeb-person-category-list:not(.ng-hide)) .tommy-zeb-person-categories-collapse::after {
  transform: translateY(2px) rotate(-135deg);
}

/* De tekst "Aantal personen", met een personen-icoon ervoor */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn,
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn:hover,
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn:focus {
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0 0 0 2.625rem;
  border: 0;
  border-radius: var(--t-field-radius) 0 0 var(--t-field-radius);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%232da048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat .875rem center;
  color: var(--t-ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  transform: none;
}

/* Het aantal als badge */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total {
  flex: none;
  width: auto;
  min-width: 1.875rem;
  max-width: 3rem;
  height: 1.875rem;
  margin: 0 !important;
  padding: 0 .5rem;
  border: 0;
  border-radius: 999px;
  background: var(--t-accent-soft);
  color: var(--t-accent-strong);
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
  field-sizing: content;
}
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total:is(:hover, :focus, :focus-visible) { border: 0; box-shadow: none; }

/* De keuzelijst: zacht openschuiven */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list {
  z-index: 20;
  gap: 0;
  width: max(100%, 19rem);
  max-width: calc(100vw - 2rem);
  margin-top: .5rem;
  padding: .25rem 1rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink);
  box-shadow: 0 8px 8px -4px rgb(27 36 28 / .12);
  transform-origin: top center;
  /* Sluiten: vervagen en iets omhoog/kleiner; display wacht tot dat klaar is (allow-discrete) */
  transition: opacity .2s ease-in, transform .22s ease-in, display .22s allow-discrete;
}
/* Openen: de lijst vouwt open vanaf het veld, daarna de regels één voor één.
   "backwards": na afloop gelden de gewone waarden weer, zodat het sluiten (transition) ervandaan kan vertrekken */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) { animation: ks-persons-open .38s cubic-bezier(.22, 1, .36, 1) backwards; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list.ng-hide { opacity: 0; transform: translateY(-.375rem) scale(.97); }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) > * { animation: ks-persons-row .4s cubic-bezier(.22, 1, .36, 1) backwards; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) > :nth-child(2) { animation-delay: .04s; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) > :nth-child(3) { animation-delay: .08s; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) > :nth-child(4) { animation-delay: .12s; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) > :nth-child(n+5) { animation-delay: .16s; }
@keyframes ks-persons-open {
  from { opacity: 0; transform: translateY(-.5rem) scale(.96); clip-path: inset(0 0 100% 0 round var(--t-radius)); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--t-radius)); }
}
@keyframes ks-persons-row {
  from { opacity: 0; transform: translateY(-.375rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list, .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list > * { animation: none !important; transition: none; }
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list > div + div { border-top: 1px solid var(--t-surface-2); }

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list > div { padding: .625rem 0; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-label { white-space: nowrap; }

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category .tommy-zeb-accommodation-person-category-choice {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex: 0 0 auto;
  align-self: center;
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice > * {
  height: auto;
  margin: 0;
  line-height: 1;
}

/* Plus/min: ronde knoppen van 32px (met 44px raakvlak via padding van de rij) */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--t-accent-soft);
  color: var(--t-accent-strong);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color .15s var(--t-ease);
}

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range:hover { background: var(--t-accent); color: #fff; }
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range.disabled { opacity: .35; pointer-events: none; }

.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice .tommy-zeb-min span,
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-accommodation-person-category-choice > * > span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1;
}

/* Zoeken-knop: zelfde hoogte als de velden, onderaan uitgelijnd */
.b-tommy .tommy-zeb-wrapper-mini tommy-confirm-update { flex: 0 0 auto; }
.b-tommy .tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update { padding: 0 2rem; }
/* Kolommen van de zoekbalk: drie even brede delen (reisgezelschap, datums, Zoeken), zie "Zoekbalk in kolommen" verderop */

@media (min-width: 1000px) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { padding: 0; }
}

@media (max-width: 599px) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { flex-direction: column; align-items: stretch; padding: 0; }
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-person-categories, .tommy-zeb-accommodation-types, .tommy-zeb-date) { flex: none; }
  .b-tommy .tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update { width: 100%; }
}

/* ==========================================================================
   Zoeken & resultaten (widget "default", pagina Resultaat)
   ========================================================================== */

.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) > tommy-search-and-book > div {
  display: grid;
  /* minmax(0, …): lange inhoud (zoals de samenvatting op mobiel) mag de kolom niet breder dan het scherm maken */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 900px) {
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) > tommy-search-and-book > div {
    /* Zoekblok iets breder (was 18rem), de resultaten krijgen de rest */
    grid-template-columns: clamp(18rem, 28%, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}

/* Taalkeuze: gewoon rechtsboven, niet zwevend over de inhoud */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-language-selector.ng-scope {
  position: static;
  grid-column: 1 / -1;
  width: auto;
  margin: 0;
  text-align: right;
}
.b-tommy .tommy-zeb-wrapper .tommy-zeb-language-selector-label { float: none; margin: 0 .5rem 0 0; color: var(--t-muted); }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-language-selector .ng-isolate-scope { float: none; display: inline-block; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-language-selector select { height: 2.5rem; }

/* Filterpaneel links */
/* Zoekblok bij de resultaten in het lichte geel van de appartementpagina's (achtergrond van Reserveren: #fbf7e3), zonder rand.
   Contrast op #fbf7e3: tekst 15:1, grijze labels 6,4:1. */
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left {
  width: auto;
  float: none;
  padding: 1.5rem;
  border: 0;
  border-radius: var(--t-radius);
  background: #fbf7e3;
  color: var(--t-ink);
}

@media (min-width: 900px) {
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left { position: sticky; top: calc(var(--header-offset, 0px) + 1.5rem); transition: top .35s cubic-bezier(.22, 1, .36, 1); }
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-left h1 {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  color: var(--t-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) :is(.tommy-zeb-person-categories, .tommy-zeb-accommodation-objects, .tommy-zeb-date, .tommy-zeb-accommodation-types) {
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgb(97 73 2 / .2); /* zelfde lijntje als in het gele overzicht */
}
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-date { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-accommodation-person-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem 0;
}
.b-tommy .tommy-zeb-wrapper .tommy-zeb-accommodation-person-category-label { float: none; line-height: 1.3; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-accommodation-person-category-choice { margin: 0; }
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-accommodation-person-category select { width: 4.5rem; height: 2.75rem; padding: 0 .5rem; }

.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) :is(.tommy-zeb-date-begin-label, .tommy-zeb-date-end-label) {
  margin: 0 0 .25rem;
  color: var(--t-muted);
  font-size: .875rem;
}
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-date-begin { margin: 0 0 .875rem; }
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-date input { width: 100%; }

/* Resultaten rechts */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-right { width: auto; float: none; padding: 0; }

.b-tommy .tommy-zeb-wrapper .tommy-zeb-results-label {
  margin: 0 0 1rem;
  padding: .875rem 1rem;
  border-radius: var(--t-radius-sm);
  background: var(--t-accent-soft);
  color: var(--t-free-ink);
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-result.ng-scope {
  display: grid;
  gap: 2rem;
  margin: 0 0 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-surface);
}
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result::after { display: none; }

/* Foto naast de tekst als de resultatenkolom breed genoeg is (vanaf 600px kolom, niet scherm: naast het zoekblok
   is de kolom smaller); smaller staat de foto erboven, anders wordt de tekstkolom smaller dan de foto */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-results { container-type: inline-size; }
@container (min-width: 600px) {
  .b-tommy .tommy-zeb-wrapper .tommy-zeb-result:is(.tommy-zeb-result-has-image, .ks-has-image) { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); }
  /* Foto over de volle hoogte van de kaart (binnen de binnenruimte), ook als de tekst hoger is; bijgesneden, niet vervormd */
  /* De foto telt niet mee voor de hoogte (absoluut geplaatst): de tekst bepaalt de hoogte, met minimaal 15rem */
  .b-tommy .tommy-zeb-wrapper .tommy-zeb-result .tommy-zeb-result-image { position: relative; align-self: stretch; min-height: 15rem; }
  .b-tommy .tommy-zeb-wrapper .tommy-zeb-result .tommy-zeb-result-image > a,
  .b-tommy .tommy-zeb-wrapper .tommy-zeb-result .tommy-zeb-result-image img { position: absolute; inset: 0; }
  .b-tommy .tommy-zeb-wrapper .tommy-zeb-result .tommy-zeb-result-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-image { float: none; min-width: 0; margin: 0; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--t-radius-sm);
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-details {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: auto !important;
  float: none;
  padding: 0 !important;
}

/* Naam van het appartement: kop (role="heading", zie snippets/blocks/tommy-search.php), in de koppenletter van de site */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-label.ng-binding {
  color: var(--t-ink);
  font-family: var(--font-heading) !important; /* wint van Tommy's "font-family: inherit !important" op alles in de widget */
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-description { color: var(--t-ink); line-height: 1.55; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-minmaxdays { color: var(--t-muted); font-size: .875rem; }

.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-price.ng-binding,
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-price {
  color: var(--t-ink);
  font-size: 1.25rem;
  font-weight: 700;
}
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-price del { color: var(--t-muted); font-weight: 400; font-size: 1rem; }

/* Tekst, kerngegevens en knoppen als één blok, verticaal in het midden naast de foto (knoppen niet meer onderaan geduwd) */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions { margin-top: 0; padding-top: .5rem; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result { align-items: center; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-details { justify-content: center; }
/* Meer rust: kaarten iets hoger (meer binnenruimte, grotere foto, meer lucht tussen naam, gegevens, prijs en knoppen) */
/* (binnenruimte en tussenruimte van de kaart: zie .tommy-zeb-result.ng-scope hierboven, die regel weegt zwaarder) */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-details { gap: .875rem; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions { padding-top: .375rem; }
/* Link naar de appartementpagina (toegevoegd in snippets/blocks/tommy-search.php): knop naast "Boeken", foto en naam klikbaar */
/* Twee even brede knoppen: naast elkaar als het past, anders onder elkaar over de volle breedte */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); align-items: stretch; gap: .75rem; max-width: 24rem; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions .tommy-zeb-result-action { display: flex; margin: 0; }
/* Zonder datums verbergt Tommy "Boeken", maar het lege vak blijft staan: weg ermee, zodat "Meer informatie" vooraan staat */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions .tommy-zeb-result-action:not(:has(a:not(.ng-hide))) { display: none; }
/* Alleen "Meer informatie" (nog geen datums): gewone knopbreedte, niet over de hele kolom */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions:not(:has(.tommy-zeb-result-action a:not(.ng-hide))) { display: flex; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions:not(:has(.tommy-zeb-result-action a:not(.ng-hide))) .ks-result-info { width: auto; flex: none; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions :is(.tommy-zeb-btn, .ks-result-info) { flex: 1; justify-content: center; width: 100%; }
.b-tommy .tommy-zeb-wrapper .ks-result-info {
  display: inline-flex;
  align-items: center;
  min-height: var(--t-control);
  padding: 0 1.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--t-accent);
  color: var(--t-accent-strong);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s var(--t-ease);
}
.b-tommy .tommy-zeb-wrapper .ks-result-info:hover { background: var(--t-accent-soft); }
/* "Boeken" (hoofdactie) eerst, "Meer informatie" erachter */
.b-tommy .tommy-zeb-wrapper .ks-result-info { order: 1; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result-actions > .tommy-zeb-result-action { order: 0; }
.b-tommy .tommy-zeb-wrapper .ks-result-image-link { display: block; overflow: hidden; border-radius: var(--t-radius-sm); }
.b-tommy .tommy-zeb-wrapper .ks-result-image-link img { transition: transform .4s var(--t-ease); }
.b-tommy .tommy-zeb-wrapper .ks-result-image-link:hover img { transform: scale(1.03); }
.b-tommy .tommy-zeb-wrapper .ks-result-title-link { color: inherit; text-decoration: none; }
.b-tommy .tommy-zeb-wrapper .ks-result-title-link:hover { color: var(--t-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .b-tommy .tommy-zeb-wrapper .ks-result-image-link img { transition: none; } }

/* "Reserveringssysteem door …": staat in de footer van de site, niet bij de widgets (Tommy zet soms inline display) */
.b-tommy .tbs-widget-label { display: none !important; }

/* "Reserveringssoftware door …" (oude opmaak, voor als hij toch zichtbaar wordt) */
.b-tommy .tommy-zeb-wrapper + .tbs-widget-label,
.b-tommy #TommyBookingSupport + .tbs-widget-label,
.b-tommy .tbs-widget-label {
  margin: 1rem 0 0;
  color: var(--t-muted);
  font-size: .8125rem;
  text-align: right;
}
.b-tommy .tbs-widget-label a { color: inherit; }

/* Datumkiezer (Pikaday) van de zoekwidgets: staat los in <body>, dus body als voorvoegsel om van Tommy te winnen */
body .pika-single {
  border: 1px solid #ced7cf;
  border-radius: 12px;
  color: var(--color-text, #123d1c);
  font-family: inherit;
  overflow: hidden;
}
body .pika-single.is-bound { box-shadow: 0 4px 8px rgb(27 36 28 / .1); }
body .pika-lendar { width: 17.5rem; margin: .75rem; }
body .pika-label { font-size: 1rem; }
body .pika-table th { color: #545e54; font-size: .75rem; }
body .pika-table abbr { text-decoration: none; }
body .pika-button,
body .is-disabled .pika-button {
  height: 2.25rem;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text, #123d1c);
  font-size: .875rem;
  text-align: center;
}
body .pika-button:hover,
body .pika-row.pick-whole-week:hover .pika-button { background: #e2f4e3; color: #115020; border-radius: 999px; }
body .is-today .pika-button { color: var(--color-accent, #123d1c); font-weight: 700; box-shadow: inset 0 0 0 1px var(--color-accent, #123d1c); }
body .is-selected .pika-button,
body .is-startrange .pika-button,
body .is-endrange .pika-button { background: var(--color-accent, #123d1c); color: #fff; box-shadow: none; font-weight: 700; }
body .is-inrange .pika-button { background: #e2f4e3; color: #115020; }
body .is-disabled .pika-button { color: #98a399; opacity: 1; }

/* Periodekiezer: de gekozen periode (en tijdens het kiezen de periode tot de dag onder de muis) als één doorlopende band;
   alleen aankomst en vertrek zijn aan de buitenkant helemaal rond. Klassen: Pikaday (is-*range) en snippets/blocks/tommy-search.php (ks-preview*). */
body .pika-table td { padding: 1px 0; }
body :is(.is-inrange, .ks-preview) .pika-button { border-radius: 0; }
body .is-inrange .pika-button { background: #e2f4e3; color: #115020; }
body .ks-preview:not(.is-disabled) .pika-button { background: #eef7ee; color: #115020; }
body .is-startrange:not(.is-endrange) .pika-button { border-radius: 999px 0 0 999px; }
body .is-endrange:not(.is-startrange) .pika-button { border-radius: 0 999px 999px 0; }
body .is-startrange.is-endrange .pika-button { border-radius: 999px; }
/* De aankomstdag in de vertrekkiezer is daar niet kiesbaar (is-disabled), maar blijft wel goed leesbaar */
body :is(.is-startrange, .is-endrange).is-disabled .pika-button { background: var(--color-accent, #123d1c); color: #fff; opacity: 1; }
body .ks-preview-end .pika-button { background: #c0ebc4; color: #115020; border-radius: 0 999px 999px 0; font-weight: 700; }
/* Aankomst met een voorvertoning erachter: rechts recht, zodat de band aansluit */
body .pika-table:has(.ks-preview, .ks-preview-end) .is-startrange .pika-button,
body .pika-table:has(.ks-preview, .ks-preview-end) .is-selected .pika-button { border-radius: 999px 0 0 999px; }
/* Twee maanden naast elkaar: een dunne lijn ertussen */
body .pika-single .pika-lendar + .pika-lendar { position: relative; }
body .pika-single .pika-lendar + .pika-lendar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.75rem; border-left: 1px solid #dce4dd; }

/* ==========================================================================
   Boekmodule (pagina's Boeken en de appartementen)
   ========================================================================== */

.b-tommy #TommyBookingSupport { color: var(--t-ink); font-size: 1rem; line-height: 1.5; }

/* Stappen bovenaan (Verblijf, Artikelen, Uw gegevens, Samenvatting) */
.b-tommy #TommyBookingSupport .tbs-navbar {
  min-height: 0;
  margin-bottom: 1.5rem;
  border: 0;
  border-radius: var(--t-radius);
  background: var(--t-surface-2);
}
.b-tommy #TommyBookingSupport .tbs-navbar .tbs-container-fluid { padding: .375rem; }
.b-tommy #TommyBookingSupport .tbs-navbar-collapse { padding: 0; border: 0; box-shadow: none; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; float: none; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li { float: none; }
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > li > a {
  padding: .625rem 1rem;
  border-radius: var(--t-radius-sm);
  background: transparent;
  color: var(--t-muted);
  font-weight: 500;
  line-height: 1.3;
}
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > li > a:hover { color: var(--t-ink); }
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a,
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a:hover,
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a:focus {
  background: var(--t-surface);
  color: var(--t-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(27 36 28 / .08);
}

/* Labels en velden */
.b-tommy #TommyBookingSupport label { color: var(--t-ink); font-weight: 600; }
.b-tommy #TommyBookingSupport .tbs-form-control { height: var(--t-control); font-size: 1rem; }
.b-tommy #TommyBookingSupport textarea.tbs-form-control { height: auto; min-height: 6rem; padding: .75rem 1.125rem; border-radius: 1.375rem; }
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-row { align-items: center; }

/* Overige knoppen */
.b-tommy #TommyBookingSupport .tbs-btn {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.6;
  transition: background-color .15s var(--t-ease), border-color .15s var(--t-ease), color .15s var(--t-ease);
}
.b-tommy #TommyBookingSupport .tbs-btn-success { padding: .5rem 1.5rem; }
.b-tommy #TommyBookingSupport :is(.tbs-btn-default, .tbs-btn-info, .tbs-btn-warning) {
  border: 1px solid var(--t-border);
  background: var(--t-surface);
  color: var(--t-ink);
}
.b-tommy #TommyBookingSupport :is(.tbs-btn-default, .tbs-btn-info, .tbs-btn-warning):hover {
  border-color: var(--t-accent);
  background: var(--t-accent-soft);
  color: var(--t-accent-strong);
}
.b-tommy #TommyBookingSupport .tbs-btn-danger { border-color: transparent; background: var(--t-busy); color: var(--t-busy-ink); }
.b-tommy #TommyBookingSupport .tbs-btn-danger:hover { background: #f6c5c0; color: var(--t-busy-ink); }

/* Kalender */
.b-tommy #TommyBookingSupport .tbs_kalenders table { border-collapse: separate; border-spacing: 3px; }
.b-tommy #TommyBookingSupport .tbs_kalenders th { color: var(--t-ink); font-weight: 600; text-align: center; text-transform: capitalize; }
.b-tommy #TommyBookingSupport .tbs_kalenders thead tr:last-child th,
.b-tommy #TommyBookingSupport .tbs-week th { color: var(--t-muted); font-size: .75rem; font-weight: 500; }

.b-tommy .tbs-calendar .tbs-day {
  border: 0;
  border-radius: var(--t-radius-sm);
  background-color: var(--t-off);
  transition: background-color .15s var(--t-ease), color .15s var(--t-ease);
}
.b-tommy .tbs-calendar .tbs-day div { color: var(--t-off-ink); font-size: .875rem; font-weight: 500; }

.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar { background-color: var(--t-free); }
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar div { color: var(--t-free-ink); font-weight: 600; text-decoration: none; }
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar:hover { background-color: var(--t-accent); }
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar:hover div { color: #fff; }

.b-tommy .tbs-calendar .tbs-day.tbs-bezet { background: var(--t-busy); }
.b-tommy .tbs-calendar .tbs-day.tbs-bezet div { color: var(--t-busy-ink); text-decoration: line-through; text-decoration-thickness: 1px; }

.b-tommy .tbs-calendar .tbs-day.tbs-nietbeschikbaar { background-color: var(--t-off); }
.b-tommy .tbs-calendar .tbs-day.tbs-nietbeschikbaar div { color: var(--t-off-ink); text-decoration: none; }

.b-tommy .tbs-calendar .tbs-day.tbs-verleden { background-color: transparent; }
.b-tommy .tbs-calendar .tbs-day.tbs-verleden div { color: var(--t-past-ink); text-decoration: none; }

/* Halve dagen (aankomst of vertrek): de schuine helft in dezelfde kleuren */
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag,
.b-tommy .tbs-legenda .tbs-day.tbs-aankomstdag,
.b-tommy .tbs-legenda .tbs-day.tbs-vertrekdag { background: var(--t-off); }
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag::before,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag::before,
.b-tommy .tbs-legenda .tbs-day.tbs-aankomstdag::before,
.b-tommy .tbs-legenda .tbs-day.tbs-vertrekdag::before { background-color: var(--t-free); }
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag-bezet::after,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag-bezet::after,
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar.tbs-aankomstdag-bezet::after,
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar.tbs-vertrekdag-bezet::after { background-color: var(--t-busy); }
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet::after,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet::after,
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet:hover,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet:hover,
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar.tbs-vertrekdag.tbs-vertrekdag-bezet:hover { background: var(--t-busy) !important; }
.b-tommy .tbs-calendar .tbs-day.tbs-aankomstdag.tbs-aankomstdag-bezet div,
.b-tommy .tbs-calendar .tbs-day.tbs-vertrekdag.tbs-vertrekdag-bezet div { color: var(--t-busy-ink); }

/* Gekozen dagen en de periode ertussen */
.b-tommy .tbs-calendar .tbs-day.tbs-selected { background-color: var(--t-accent) !important; }
.b-tommy .tbs-calendar .tbs-day.tbs-selected div { color: #fff !important; font-weight: 700; }
.b-tommy .tbs-calendar .tbs-day.tbs-highlight::before { background: rgb(45 160 72 / .28); border-radius: var(--t-radius-sm); }

/* Scheidingsrijen (.tbs-hr): een dunne lijn, geen grijs vlak (dat was alleen voor de legenda bedoeld) */
.b-tommy #TommyBookingSupport .tbs-hr {
  margin-top: 0;
  padding: .875rem 0;
  border: 0;
  border-top: 1px solid var(--t-border);
  border-radius: 0;
  background: none;
  color: var(--t-ink);
}
.b-tommy .tbs-legenda .tbs-day { width: 1.25rem; height: 1.25rem; border-radius: 4px; background-color: var(--t-free); box-shadow: inset 0 0 0 1px var(--t-swatch-line); }
.b-tommy .tbs-legenda .tbs-day.tbs-bezet { background: var(--t-busy); box-shadow: inset 0 0 0 1px #e9a7a1; }
.b-tommy #TommyBookingSupport .tbs-legenda ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.b-tommy #TommyBookingSupport .tbs-legenda li { display: inline-flex; align-items: center; gap: .5rem; }
.b-tommy #TommyBookingSupport .tbs-legenda .tbs-day { margin: 0; }
.b-tommy .tbs-legenda .tbs-day.tbs-nietbeschikbaar { background-color: var(--t-off); }
.b-tommy .tbs-legenda .tbs-day:is(.tbs-beschikbaar, .tbs-aankomstdag, .tbs-vertrekdag)::after { display: none; }

/* Overzicht van de boeking rechts */
.b-tommy #TommyBookingSupport .tbs_kassabon {
  padding: 1.25rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-surface);
}
@media (min-width: 992px) {
  /* Geen sticky: Tommy zet zelf inline position: relative, waardoor een top-waarde het blok alleen omlaag schuift */
  .b-tommy #TommyBookingSupport .tbs_kassabon { top: 0; }
}
.b-tommy #TommyBookingSupport .tbs_kassabon :is(h1, h2, h3) {
  margin: 0 0 1rem;
  color: var(--t-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.b-tommy #TommyBookingSupport .tbs_kassabon img { margin-bottom: 1rem; border-radius: var(--t-radius-sm); }

/* Foto van de accommodatie (op mobiel boven het formulier): breed en laag, zodat het formulier in beeld blijft */
.b-tommy #TommyBookingSupport .tbs-accommodatie-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: .5rem;
  border-radius: var(--t-radius-sm);
}
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-row { margin-left: 0; margin-right: 0; }
.b-tommy #TommyBookingSupport .tbs_kassabon [class*="tbs-col-"] { padding-left: 0; padding-right: 0; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-text-right { text-align: right; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success { width: 100%; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-hr { margin-top: .75rem; padding: .75rem 0 0; border-top: 1px solid var(--t-border); border-radius: 0; background: none; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-amount,
.b-tommy #TommyBookingSupport .tbs_kassabon .prijs { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   Boekmodule: afwerking (stappen, formulierkaart, kalender, overzicht)
   ========================================================================== */

/* Stappen als genummerde voortgang, met een lijn ertussen */
.b-tommy #TommyBookingSupport .tbs-navbar { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); background: transparent; }
.b-tommy #TommyBookingSupport .tbs-navbar .tbs-container-fluid { padding: 0; }
/* Gecentreerd, met de naam van de stap onder het cijfer en een lijn van cijfer tot cijfer */
.b-tommy #TommyBookingSupport .tbs-navbar-nav { counter-reset: tbs-step; flex-wrap: nowrap; align-items: flex-start; gap: 0; width: 100%; max-width: 54rem; margin: 0 auto; }
.b-tommy #TommyBookingSupport .tbs-navbar-collapse { display: block; width: 100%; }
/* Verborgen stappen (bijv. "Overig") nemen geen ruimte in; zo zijn de lijnen tussen de zichtbare stappen even lang */
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li:not(:has(> a:not(.tbs-hide))),
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li.tbs-hide { display: none; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li:has(> a:not(.tbs-hide)) { display: flex; align-items: flex-start; flex: 1 1 auto; counter-increment: tbs-step; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li:has(> a:not(.tbs-hide)):first-child { flex: 0 0 auto; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li:has(> a:not(.tbs-hide)) ~ li:has(> a:not(.tbs-hide))::before {
  content: "";
  flex: 1;
  height: 2px;
  min-width: 1rem;
  /* Op de hoogte van het midden van het cijfer (2.75rem hoog) */
  margin: calc(1.375rem - 1px) .5rem 0;
  border-radius: 2px;
  background: var(--t-border);
}
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li > a .tbs-glyphicon { display: none; }
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > li > a,
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a,
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a:hover,
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a:focus {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--t-muted);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li > a::before {
  content: counter(tbs-step);
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--t-border);
  border-radius: 50%;
  background: var(--t-surface);
  color: var(--t-muted);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s var(--t-ease), border-color .2s var(--t-ease), color .2s var(--t-ease);
}
.b-tommy #TommyBookingSupport .tbs-navbar-nav > li > a:hover::before { border-color: var(--t-accent); color: var(--t-accent-strong); }
.b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a { color: var(--t-ink); font-weight: 750; }
.b-tommy #TommyBookingSupport .tbs-navbar-nav > .tbs-active > a::before { border-color: var(--t-accent); background: var(--t-accent); color: #fff; box-shadow: none; }
/* Smal scherm: alleen het cijfer, met de naam alleen bij de huidige stap (de namen blijven voorleesbaar) */
@media (max-width: 599px) {
  .b-tommy #TommyBookingSupport .tbs-navbar-nav > li:has(> a:not(.tbs-hide)) ~ li:has(> a:not(.tbs-hide))::before { margin-inline: .25rem; min-width: .75rem; }
  .b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > li:not(.tbs-active) > a { font-size: 0; gap: 0; }
  .b-tommy #TommyBookingSupport .tbs-navbar-nav > li > a::before { width: 2.5rem; height: 2.5rem; font-size: .9375rem; }
  .b-tommy #TommyBookingSupport .tbs-navbar-nav > li:has(> a:not(.tbs-hide)) ~ li:has(> a:not(.tbs-hide))::before { margin-top: calc(1.25rem - 1px); }
  .b-tommy #TommyBookingSupport .tbs-navbar-default .tbs-navbar-nav > .tbs-active > a { font-size: .875rem; }
}

/* De stap zelf als witte kaart */
.b-tommy #TommyBookingSupport .tbs-page.tbs-active {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(.75rem, 2.5vw, 1.75rem);
  border-radius: 16px;
  background: var(--t-surface);
  box-shadow: 0 1px 2px rgb(27 36 28 / .06), 0 6px 8px -4px rgb(27 36 28 / .08);
}

/* Koppen binnen een stap (Artikelen, Uw gegevens …) in de serif van de site */
.b-tommy #TommyBookingSupport .tbs-page :is(h1, h2, h3) {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--t-ink);
}

/* Reisgezelschap: compacte rijen met smalle velden */
.b-tommy #TommyBookingSupport .tbs_persoonscategorien { margin-top: 0; }
.b-tommy #TommyBookingSupport .tbs_persoonscategorien label {
  display: block;
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.01em;
}
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-row.tbs-mg-b-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .5rem 0;
  border-bottom: 1px solid var(--t-surface-2);
}
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-row.tbs-mg-b-5::before,
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-row.tbs-mg-b-5::after { display: none; }
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-row.tbs-mg-b-5 > [class*="tbs-col-"] { width: auto; float: none; padding: 0; }
.b-tommy #TommyBookingSupport .tbs_persoonscategorien .tbs-naam { color: var(--t-ink); font-weight: 500; }
/* Het getalveld van Tommy wordt vervangen door een keuzelijst (script in snippets/blocks/tommy-book.php) */
.b-tommy #TommyBookingSupport .tbs_persoonscategorien input.tbs-aantal--replaced { display: none !important; }
.b-tommy #TommyBookingSupport .tbs_persoonscategorien select.tbs-aantal-select {
  width: 5.5rem;
  padding: 0 2rem 0 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.b-tommy #TommyBookingSupport .tbs_persoonscategorien input.tbs-aantal {
  width: 5.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Kalender: ronde navigatie, maandnaam als kop */
.b-tommy #TommyBookingSupport .tbs_kalenders { margin-top: 1.75rem; }
.b-tommy #TommyBookingSupport .tbs_kalenders .tbs-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.b-tommy #TommyBookingSupport .tbs_kalenders .tbs-btn .tbs-glyphicon { top: 0; line-height: 1; }
/* Maandnavigatie: knoppen op eigen breedte, maandkeuze vult de rest (geen afgekapte maandnaam op mobiel) */
.b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child { display: flex; align-items: center; gap: .75rem; margin: 0; }
.b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child::before,
.b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child::after { display: none; }
.b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child > [class*="tbs-col-"] { width: auto; float: none; padding: 0; }
.b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child > [class*="tbs-col-"]:nth-child(2) { flex: 1; min-width: 0; }
/* Maandkeuze: links en rechts evenveel ruimte (rechts staat het pijltje), zodat de maandnaam echt in het midden staat */
.b-tommy #TommyBookingSupport .tbs_kalenders select.tbs-form-control { width: 100%; height: var(--t-control); padding: 0 1.75rem; text-align: center; text-align-last: center; }
@media (max-width: 479px) {
  /* Knoppen even hoog als de velden erboven (44px); alleen de tussenruimte wordt kleiner */
  .b-tommy #TommyBookingSupport .tbs_kalenders > .tbs-col-xs-12 > .tbs-row:first-child { gap: .5rem; }
  .b-tommy #TommyBookingSupport .tbs_kalenders select.tbs-form-control { padding: 0 1.5rem; font-size: .9375rem; }
}
.b-tommy #TommyBookingSupport .tbs_kalenders .tbs-col-xs-3:first-child { text-align: left; }
.b-tommy #TommyBookingSupport .tbs_kalenders .tbs-col-xs-3:last-child { text-align: right; }
.b-tommy #TommyBookingSupport .tbs_kalenders select.tbs-form-control { border-radius: 999px; font-weight: 600; text-align: center; text-transform: capitalize; }
.b-tommy #TommyBookingSupport .tbs_kalenders thead tr:first-child th {
  padding-bottom: .5rem;
  border: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.01em;
}
.b-tommy #TommyBookingSupport .tbs_kalenders thead th { border-bottom: 0; }
.b-tommy #TommyBookingSupport .tbs_kalenders table { border-spacing: 4px; }
.b-tommy .tbs-calendar .tbs-day { border-radius: 10px; }
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar { transition: background-color .15s var(--t-ease), transform .15s var(--t-ease), box-shadow .15s var(--t-ease); }
.b-tommy .tbs-calendar .tbs-day.tbs-beschikbaar:hover { transform: translateY(-1px); box-shadow: 0 3px 6px -2px rgb(27 36 28 / .25); }
.b-tommy .tbs-calendar .tbs-day.tbs-selected { box-shadow: 0 0 0 3px var(--t-accent-soft); }

/* Legenda: kleurvakje + tekst, zonder achtergrond, met wat lucht onder het lijntje */
.b-tommy #TommyBookingSupport .tbs-legenda.tbs-hr { margin-top: 1.5rem; padding: 1.25rem 0 0; background: none; }
.b-tommy #TommyBookingSupport .tbs-legenda ul { justify-content: flex-start; gap: .75rem 1.5rem; }
.b-tommy #TommyBookingSupport .tbs-legenda li {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--t-ink);
  font-size: .8125rem;
}

/* Boekingsoverzicht: diepgroene kaart met de foto tot aan de rand */
/* Taalkeuze alleen tonen bij twee of meer talen (in het Tommy-account staat nu alleen Nederlands; één vlag doet niets) */
.b-tommy #TommyBookingSupport .tbs_talen { margin-bottom: .25rem; }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop):not(:has(li:not(.tbs-clone) ~ li:not(.tbs-clone))) { display: none; }
/* Taalkeuze als segmentknop: vlag + taalnaam (uit het title-attribuut van Tommy) */
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) ul {
  display: inline-flex;
  gap: .25rem;
  margin: 0 0 .75rem;
  padding: .25rem;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  background: var(--t-surface);
  list-style: none;
}
.b-tommy #TommyBookingSupport .tbs_talen .tbs-row > div { text-align: center; }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) li.tbs-clone { display: none; }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) li > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  padding: 0 .75rem 0 .5rem;
  border-radius: 999px;
  color: var(--t-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s var(--t-ease), color .15s var(--t-ease);
}
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) li > a::after { content: attr(title); }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) li > a:hover { background: var(--t-surface-2); color: var(--t-ink); }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) li:is(.tbs-active, .active, .selected) > a { background: var(--t-accent); color: #fff; }
.b-tommy #TommyBookingSupport :is(.tbs_talen, .tbs_talen-mobileontop) .tbs-flag { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(27 36 28 / .12); }
.b-tommy #TommyBookingSupport .tbs_kassabon {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--t-deep);
  color: #fff;
}
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs_totaal_overzicht,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs_kassabon_overzicht { padding: 0 1.25rem; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs_kassabon_overzicht { padding-bottom: 1.25rem; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-accommodatie-image { float: none; width: calc(100% + 2.5rem); margin: 0 -1.25rem; padding: 0; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-accommodatie-image img { width: 100%; margin: 0; border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.b-tommy #TommyBookingSupport .tbs_kassabon :is(h1, h2, h3),
.b-tommy #TommyBookingSupport .tbs_kassabon h2.tbs-totaal {
  margin: 1.25rem 0 1rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -.01em;
  text-align: left;
}
/* Totaal: geen grijs vlak van Tommy (zichtbaar als het overzicht op mobiel is ingeklapt) */
.b-tommy #TommyBookingSupport .tbs_kassabon h2.tbs-totaal { padding: 0; background: none; color: var(--t-wheat); }
/* Nog geen datums gekozen: geen bedrag, dan ook geen lege tweede regel (regelafbreking + pijltje) */
.b-tommy #TommyBookingSupport .tbs_kassabon h2.tbs-totaal:has(#totaal_amount:empty) :is(br, .tbs_kassabon_toggle) { display: none; }
/* In- en uitklappen van het overzicht (mobiel en tablet): een duidelijke tekstknop onder het bedrag in plaats van
   Tommy's losse pijltje; tekst en pijl wisselen mee (snippets/blocks/tommy-book.php regelt de animatie) */
/* Alleen waar Tommy het overzicht inklapt (tot 991px, zoals in Tommy's eigen CSS); daarboven geen knop */
@media (max-width: 991px) {
  .b-tommy #TommyBookingSupport .tbs_kassabon h2.tbs-totaal .tbs_kassabon_toggle:not([style*="none"]) {
    display: flex !important; /* Tommy dwingt de knop zelf op inline */
    align-items: center;
    gap: .375rem;
    width: fit-content;
    margin-top: .75rem;
    color: var(--t-accent);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
  }
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle :is(.tbs_kassabon_toggle_show, .tbs_kassabon_toggle_hide) { display: none !important; }
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle::before { content: "Bekijk details"; }
  .b-tommy #TommyBookingSupport .tbs_kassabon.tbs_kassabon_show .tbs_kassabon_toggle::before { content: "Verberg details"; }
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .b-tommy #TommyBookingSupport .tbs_kassabon.tbs_kassabon_show .tbs_kassabon_toggle::after { transform: rotate(180deg); }
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle:hover { color: var(--t-accent-strong); }
}
@media (min-width: 992px) {
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle { display: none !important; }
}
/* Uitgeklapt: de regels komen zacht in beeld */
.b-tommy #TommyBookingSupport .tbs_kassabon.tbs_kassabon_show > :not(.tbs_totaal_overzicht) { animation: ks-persons-row .35s cubic-bezier(.22, 1, .36, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .b-tommy #TommyBookingSupport .tbs_kassabon_toggle::after { transition: none; }
  .b-tommy #TommyBookingSupport .tbs_kassabon.tbs_kassabon_show > * { animation: none; }
}
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:focus {
  background: var(--t-wheat);
  color: var(--t-wheat-ink);
}
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:hover { background: #f6c959; color: var(--t-wheat-ink); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.b-tommy #TommyBookingSupport .tbs_kassabon,
.b-tommy #TommyBookingSupport .tbs_kassabon label,
.b-tommy #TommyBookingSupport .tbs_kassabon strong,
.b-tommy #TommyBookingSupport .tbs_kassabon b { color: #fff; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-row { color: rgb(255 255 255 / .85); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-hr { border-top-color: rgb(255 255 255 / .16); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-subtotaal,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-amount { color: #fff; font-weight: 700; }
.b-tommy #TommyBookingSupport .tbs_kassabon a:not(.tbs-btn) { color: var(--t-wheat); }

/* Overzicht op lichtgeel (#ffeaac) in plaats van donkergroen: donkere tekst, groene knop met witte tekst.
   Contrast: tekst 13,9:1, koppen 12,4:1, grijze tekst 5,9:1, groene links 4,9:1, wit op de knop 5,7:1. */
.b-tommy #TommyBookingSupport .tbs_kassabon { background: #ffeaac; color: var(--t-ink); }
.b-tommy #TommyBookingSupport .tbs_kassabon :is(h1, h2, h3),
.b-tommy #TommyBookingSupport .tbs_kassabon h2.tbs-totaal { color: var(--t-deep); }
.b-tommy #TommyBookingSupport .tbs_kassabon,
.b-tommy #TommyBookingSupport .tbs_kassabon label,
.b-tommy #TommyBookingSupport .tbs_kassabon strong,
.b-tommy #TommyBookingSupport .tbs_kassabon b,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-row,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-subtotaal,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-amount { color: var(--t-ink); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-text-muted { color: var(--t-muted); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-hr { border-top-color: rgb(97 73 2 / .2); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-hr-bottom { border-bottom-color: rgb(97 73 2 / .2); }
.b-tommy #TommyBookingSupport .tbs_kassabon a:not(.tbs-btn) { color: var(--t-accent); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success,
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:focus { --btn-fill: var(--t-accent-strong); background: var(--t-accent); color: #fff; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:hover { background: var(--t-accent-strong); color: #fff; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-btn-success:focus-visible { outline: 3px solid var(--t-accent); outline-offset: 2px; }

/* Desktop: de stappenbalk over de volle breedte van de module (de linkerkolom is 2/3), gecentreerd onder de titel;
   het overzicht rechts begint daaronder, gelijk met de witte stapkaart */
@media (min-width: 992px) {
  .b-tommy #TommyBookingSupport [class*="tbs-col-md-8"] > .tbs-navbar { position: relative; z-index: 1; width: calc((100% + 30px) * 1.5 - 30px); }
  .b-tommy #TommyBookingSupport .tbs_kassabon { margin-top: calc(4.375rem + clamp(1.5rem, 3vw, 2.25rem)); }

  /* Taalkeuze (bij twee of meer talen) rechts naast de stappenbalk, buiten de stroom: duwt het overzicht niet omlaag */
  .b-tommy #TommyBookingSupport .tbs-row > [class*="tbs-col-md-4"] { position: relative; }
  .b-tommy #TommyBookingSupport .tbs_talen {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 2.5rem;
    margin: 0;
    padding: 0;
  }
  .b-tommy #TommyBookingSupport .tbs_talen > .tbs-row { margin: 0; }
  .b-tommy #TommyBookingSupport .tbs_talen > .tbs-row::before,
  .b-tommy #TommyBookingSupport .tbs_talen > .tbs-row::after { display: none; }
  .b-tommy #TommyBookingSupport .tbs_talen [class*="tbs-col-"] { width: auto; float: none; margin: 0; padding: 0; }
  .b-tommy #TommyBookingSupport .tbs_talen ul { margin: 0; }
}

/* Buitenrand van de widget gelijk met de content van de andere blokken: de buitenste container van Tommy zonder eigen
   binnenruimte, dan heffen de -15px van de rij en de 15px van de kolommen elkaar op (gewone Bootstrap-rekensom) */
.b-tommy #TommyBookingSupport > .tbs-container-fluid { padding-left: 0; padding-right: 0; }

@media (max-width: 991px) {
  /* Kolommen onder elkaar: geen tussenruimte nodig, dus helemaal tot de contentrand */
  .b-tommy #TommyBookingSupport > .tbs-container-fluid > .tbs-row { margin-left: 0; margin-right: 0; }
  .b-tommy #TommyBookingSupport > .tbs-container-fluid > .tbs-row > [class*="tbs-col-"] { padding-left: 0; padding-right: 0; }
}

@media (max-width: 767px) {
  .b-tommy #TommyBookingSupport .tbs-page.tbs-active { padding: 1.25rem 1rem; border-radius: 12px; }
  .b-tommy #TommyBookingSupport .tbs-page.tbs-active > .tbs-container-fluid { padding-left: 0; padding-right: 0; }
}


/* Meldingen van Tommy (Bootstrap-modal, staat los in <body>) */
body .tbs-modal-backdrop.tbs-in { background: #0a1f0e; opacity: .55; }
body .tbs-modal .tbs-modal-dialog { max-width: 30rem; margin: 1rem auto; }
body .tbs-modal .tbs-modal-content {
  position: relative;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 8px -4px rgb(10 31 14 / .2);
  color: var(--color-text, #123d1c);
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
body .tbs-modal .tbs-modal-header { display: flex; align-items: center; justify-content: space-between; min-height: 0; padding: 1.25rem 1.25rem 0; border: 0; }
body .tbs-modal .tbs-modal-title { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 750; }
body .tbs-modal .tbs-modal-header .close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f9f2;
  color: var(--color-text, #123d1c);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
}
body .tbs-modal .tbs-modal-header .close:hover { background: #dce4dd; }
body .tbs-modal.tbs-modal-error .tbs-modal-content { border-top: 4px solid #8a1c14; }
body .tbs-modal .tbs-modal-body { padding: .75rem 1.25rem 1.5rem; font-size: 1rem; line-height: 1.55; }
body .tbs-modal .tbs-modal-footer { padding: 0 1.25rem 1.25rem; border: 0; }


/* ==========================================================================
   Samenvatting en overzichtsrijen: label links, waarde rechts, op één regel
   ========================================================================== */

.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-left: 0;
  margin-right: 0;
}
.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr::before,
.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr::after { display: none; }
.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr > [class*="tbs-col-"] { width: auto; float: none; padding: 0; }
.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr > [class*="tbs-col-"]:first-child { flex: 0 1 auto; }
.b-tommy #TommyBookingSupport :is(.tbs_overzicht, .tbs_kassabon_overzicht) .tbs-row.tbs-hr > [class*="tbs-col-"]:last-child:not(:first-child) { flex: 1 1 auto; text-align: right; }

/* Specificatie: regels met bedrag rechts, in dezelfde maat als de rest */
/* Ook de buitenste rij (.tbs-row.tbs-specificaties) zelf: anders steekt die met de negatieve marge van Bootstrap uit */
.b-tommy #TommyBookingSupport .tbs_overzicht :is(.tbs-specificaties, .tbs-specificaties .tbs-row) { margin-left: 0; margin-right: 0; }
.b-tommy #TommyBookingSupport .tbs_overzicht .tbs-specificaties [class*="tbs-col-"] { padding-left: 0; padding-right: 0; }
.b-tommy #TommyBookingSupport .tbs_overzicht { font-size: 1rem; }
.b-tommy #TommyBookingSupport .tbs_overzicht .tbs-row.tbs-hr:last-child { border-bottom: 1px solid var(--t-border); }

/* Akkoord-vinkjes: vinkje links naast de tekst, alles in dezelfde maat */
.b-tommy #TommyBookingSupport .tbs-page-overzicht .tbs-row:has(> .tbs_av),
.b-tommy #TommyBookingSupport .tbs-page-overzicht .tbs-row:has(> .tbs_pv) { margin: 0; padding: .375rem 0; border: 0; }
.b-tommy #TommyBookingSupport .tbs-page-overzicht .tbs-row:has(> .tbs_av) { margin-top: 1.25rem; }
.b-tommy #TommyBookingSupport :is(.tbs_av, .tbs_pv) {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 0;
}
.b-tommy #TommyBookingSupport :is(.tbs_av, .tbs_pv) input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: .125rem 0 0;
  padding: 0;
  accent-color: var(--t-accent);
  cursor: pointer;
}
.b-tommy #TommyBookingSupport :is(.tbs_av, .tbs_pv) label {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  cursor: pointer;
}
.b-tommy #TommyBookingSupport :is(.tbs_av, .tbs_pv) a { color: var(--t-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Knoppen onder elke stap: Vorige links, de hoofdknop rechts */
.b-tommy #TommyBookingSupport .tbs-page .tbs-row.tbs-hr:has(.tbs-btn) > .tbs-col-xs-12 {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.b-tommy #TommyBookingSupport .tbs-page .tbs-row.tbs-hr:has(.tbs-btn) .tbs-pull-right { float: none; }
.b-tommy #TommyBookingSupport .tbs-page .tbs-row.tbs-hr:has(.tbs-btn) { margin-top: 1.25rem; padding-top: 1.25rem; }
/* Samenvatting: de knoppenrij (en de lijn erboven) even breed als de vinkjes en het overzicht */
.b-tommy #TommyBookingSupport .tbs-page-overzicht .tbs-row.tbs-hr:has(.tbs-btn) { margin-left: 0; margin-right: 0; }
.b-tommy #TommyBookingSupport .tbs-page-overzicht .tbs-row.tbs-hr:has(.tbs-btn) > .tbs-col-xs-12 { padding-left: 0; padding-right: 0; }

/* Persoonsgegevens (en gasten/overig) in het groene overzicht: zelfde binnenruimte als de rest */
.b-tommy #TommyBookingSupport .tbs_kassabon :is(.tbs_persoonsgegevens_overzicht, .tbs_gasten_overzicht, .tbs_overig_overzicht) { padding: 0 1.25rem; }
.b-tommy #TommyBookingSupport .tbs_kassabon :is(.tbs_persoonsgegevens_overzicht, .tbs_gasten_overzicht, .tbs_overig_overzicht):not(:empty) { padding-bottom: 1.25rem; }
.b-tommy #TommyBookingSupport .tbs_kassabon :is(.tbs_persoonsgegevens_overzicht, .tbs_gasten_overzicht, .tbs_overig_overzicht) .tbs-row { margin-left: 0; margin-right: 0; }
.b-tommy #TommyBookingSupport .tbs_kassabon :is(.tbs_persoonsgegevens_overzicht, .tbs_gasten_overzicht, .tbs_overig_overzicht) [class*="tbs-col-"] { padding-left: 0; padding-right: 0; line-height: 1.6; }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs-hr-bottom { margin-bottom: .75rem; padding-bottom: .25rem; border-bottom: 1px solid rgb(255 255 255 / .16); }
.b-tommy #TommyBookingSupport .tbs_kassabon .tbs_title a { margin-left: .25rem; }
/* "Bewerken" onder de persoonsgegevens (verplaatst in snippets/blocks/tommy-book.php) */
.b-tommy #TommyBookingSupport .tbs_kassabon .ks-edit-row { margin: .625rem 0 0; }
.b-tommy #TommyBookingSupport .tbs_kassabon .ks-edit-row a { font-weight: 600; }


/* Keuzelijsten: eigen pijltje op een vaste afstand van de rand (het pijltje van de browser zat tegen de rand) */
.b-tommy .tommy-zeb-wrapper select,
.b-tommy #TommyBookingSupport select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23545e54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}
/* Getal en maand gecentreerd tussen de linkerrand en het pijltje */
.b-tommy #TommyBookingSupport .tbs_persoonscategorien select.tbs-aantal-select { padding: 0 2.25rem 0 1rem; text-align: center; text-align-last: center; background-position: right .875rem center; }
/* Maandkeuze als tekst met een pijltje er vlak achter (geen rand, geen vlak), midden tussen de vorige/volgende-knoppen.
   field-sizing maakt de keuzelijst zo breed als de gekozen maand; browsers zonder ondersteuning nemen de langste maand. */
.b-tommy #TommyBookingSupport .tbs_kalenders select.tbs-form-control {
  field-sizing: content;
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: right .125rem center;
  font-size: 1.0625rem;
  text-align: left;
  text-align-last: left;
  box-shadow: none;
}
.b-tommy #TommyBookingSupport .tbs_kalenders select.tbs-form-control:hover { color: var(--t-accent-strong); }
/* Zoekresultaten: aantal personen in dezelfde vorm als bij "Waaruit bestaat uw reisgezelschap?" in de boekmodule
   (pil, vet getal in het midden, pijltje op vaste afstand) */
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-accommodation-person-category select {
  width: 5.5rem;
  height: 2.75rem;
  padding: 0 2.25rem 0 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-align-last: center;
  background-position: right .875rem center;
  cursor: pointer;
}

/* Tekst boven "Bevestig boeking" (Tommy-instellingen → Teksten): eigen regel over de hele breedte, boven de knoppen */
.b-tommy #TommyBookingSupport .ks-confirm-note {
  order: -1;
  flex: 1 0 100%;
  margin: 0 0 .5rem;
  padding: .875rem 1rem;
  border-radius: .75rem;
  background: var(--t-accent-soft);
  font-size: .9375rem;
  line-height: 1.55;
  color: inherit;
}

/* Extra's (stap 2): de knoppen naast de aantal-keuzelijst krijgen dezelfde (ronde) vorm en hoogte als die lijst */
.b-tommy #TommyBookingSupport .tbs-page-artikelen .tbs-btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: var(--t-field-radius);
}

/* Desktop: de witte stapkaart groeit mee tot de onderkant van het groene overzicht ernaast (en andersom blijft het overzicht sticky) */
@media (min-width: 992px) {
  .b-tommy #TommyBookingSupport .tbs-row:has(> [class*="tbs-col-md-8"] > .tbs-page) { display: flex; align-items: stretch; }
  .b-tommy #TommyBookingSupport .tbs-row:has(> [class*="tbs-col-md-8"] > .tbs-page)::before,
  .b-tommy #TommyBookingSupport .tbs-row:has(> [class*="tbs-col-md-8"] > .tbs-page)::after { display: none; }
  .b-tommy #TommyBookingSupport [class*="tbs-col-md-8"]:has(> .tbs-page) { display: flex; flex-direction: column; float: none; }
  .b-tommy #TommyBookingSupport [class*="tbs-col-md-8"]:has(> .tbs-page) > .tbs-page.tbs-active { flex: 1 0 auto; }
  .b-tommy #TommyBookingSupport .tbs-row:has(> [class*="tbs-col-md-8"] > .tbs-page) > [class*="tbs-col-md-4"] { float: none; }
}

/* Extra's op mobiel en tablet (naam staat dan boven de keuze): keuzelijst en knop over de volle breedte, zonder Tommy's inspringing (push-4) */
@media (max-width: 991.98px) {
  .b-tommy #TommyBookingSupport #artikelen [class*="tbs-col-md-6"] > .tbs-row > [class*="tbs-col-xs-"] { width: 100%; left: auto; }
}

/* Extra's: namen even groot als de andere labels (reisgezelschap, akkoord-vinkjes) */
.b-tommy #TommyBookingSupport #artikelen h4[data-name="naam"] { margin: .625rem 0 .5rem; font-size: 1rem; font-weight: 500; line-height: 1.5; }

/* Zoekbalk: aankomst en vertrek als één compact veld zonder zichtbaar label (hints gezet in snippets/blocks/tommy-search.php):
   kalendericoon vooraan, een pijltje tussen aankomst en vertrek, één rand om het geheel */

/* Gestapeld (smal scherm): geen flex-basis, die zou daar als hoogte gelden */
@media (max-width: 599px) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date:has(.tommy-zeb-period[data-ks-period]) { flex: none; }
}
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] { position: relative; column-gap: 0; row-gap: 0; }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] > .tommy-zeb-date-begin { grid-row: 1; grid-column: 1; }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] > .tommy-zeb-date-end { grid-row: 1; grid-column: 2; }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] :is(.tommy-zeb-date-begin-label, .tommy-zeb-date-end-label) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Eén rand om beide helften (een eigen laag over de twee velden heen; klikken gaat erdoorheen) */
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]::after {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  z-index: 2;
  border: 1px solid var(--t-border);
  border-radius: var(--t-field-radius);
  pointer-events: none;
  transition: border-color .15s var(--t-ease), box-shadow .15s var(--t-ease);
}
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]:hover::after { border-color: var(--t-muted); }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]:focus-within::after { border-color: var(--t-accent); box-shadow: var(--t-focus); }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input,
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input:is(:hover, :focus, :focus-visible) {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  background-color: var(--t-surface);
  text-overflow: ellipsis;
}
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-begin input {
  padding: 0 .875rem 0 2.5rem !important;
  text-align: center;
  border-radius: var(--t-field-radius) 0 0 var(--t-field-radius);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%232da048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-position: left .875rem center;
}
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-end input {
  padding: 0 .875rem 0 2.5rem !important;
  text-align: center;
  border-radius: 0 var(--t-field-radius) var(--t-field-radius) 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%232da048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-position: left 1.25rem center;
}
/* Pijltje precies op de naad tussen aankomst en vertrek, op een klein rondje */
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  z-index: 3;
  align-self: center;
  justify-self: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--t-border);
  border-radius: 50%;
  background: var(--t-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23545e54' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
}
/* Een dunne scheidslijn achter het rondje */
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-begin input { box-shadow: inset -1px 0 0 var(--t-surface-2) !important; }
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input::placeholder { color: var(--t-muted); opacity: 1; }

/* Zoekbalk zonder zichtbare labels: "Reisgezelschap" alleen voor schermlezers (het veld zegt zelf "Aantal personen") */
.b-tommy .tommy-zeb-wrapper-mini .tommy-zeb-person-categories > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Zoekbalk in kolommen (vanaf 600px; daaronder staat alles onder elkaar):
   tot 1100px reisgezelschap en datums naast elkaar en Zoeken eronder over de volle breedte,
   breder drie even brede kolommen. Smaller dan ~300px past de datum (twee helften) niet meer. */
@media (min-width: 600px) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > * { min-width: 0; }
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > tommy-confirm-update { grid-column: 1 / -1; }
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left button.tommy-zeb-btn.tommy-zeb-update { width: 100%; }
}
@media (min-width: 1100px) {
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > tommy-confirm-update { grid-column: auto; }
}

/* "Aantal personen" in dezelfde kleur en dikte als de hints "Aankomst" en "Vertrek" */
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn,
.b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn:is(:hover, :focus) { color: var(--t-muted); font-weight: 400; }

/* Zoekresultaten op mobiel/tablet: zoekblok ingeklapt met een samenvatting en een eigen knop (gezet in snippets/blocks/tommy-search.php) */
.b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left :is(.ks-filter-summary, .ks-filter-toggle) { display: none; }
@media (max-width: 899.98px) {
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left[data-ks-filter]:not(.ks-open) > :not(h1, .ks-filter-summary, .ks-filter-toggle) { display: none !important; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left[data-ks-filter] > h1 { margin-bottom: .75rem; }
  /* Samenvatting: personen en periode onder elkaar, elk met een icoon */
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left[data-ks-filter]:not(.ks-open) .ks-filter-summary { display: block; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary { margin: 0 0 .875rem; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary__row { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .75rem 0; color: var(--t-ink); font-weight: 600; line-height: 1.35; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary__row + .ks-filter-summary__row { border-top: 1px solid rgb(97 73 2 / .2); }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary__icon { flex: none; margin-top: -.0625rem; color: var(--t-accent); }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary__nights { display: block; color: var(--t-muted); font-size: .875rem; font-weight: 500; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-summary__nights:empty { display: none; }
  /* Losse knop eronder: wit met een lichtgrijze rand (zoals de menuknop), over de hele breedte */
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    margin: 0 0 1rem;
    padding: 0 1.25rem;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    background: var(--t-surface);
    color: var(--t-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease-out, color .2s ease-out;
  }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left[data-ks-filter]:not(.ks-open) .ks-filter-toggle { margin-bottom: 0; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-toggle:hover { border-color: var(--t-muted); background: var(--t-surface); color: var(--t-ink); }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-toggle::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left.ks-open .ks-filter-toggle::after { transform: rotate(180deg); }
  /* Openen: de velden schuiven zacht in beeld */
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left.ks-open > :not(h1, .ks-filter-summary, .ks-filter-toggle) { animation: ks-persons-row .35s cubic-bezier(.22, 1, .36, 1) backwards; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left.ks-open > * { animation: none; }
  .b-tommy .tommy-zeb-wrapper:not(.tommy-zeb-wrapper-mini) .tommy-zeb-left .ks-filter-toggle::after { transition: none; }
}

/* Resultaatkaart: kolommen mogen smaller worden dan de foto of de knoppen (anders steken die op mobiel uit) */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result { grid-template-columns: minmax(0, 1fr); }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result > * { min-width: 0; }
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result img { max-width: 100%; }
/* Tommy zet het fotovak op sommige breedtes vast op 100 × 100px (de foto loopt dan over de tekst); laat het zijn kolom vullen */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-result .tommy-zeb-result-image { width: auto !important; height: auto !important; max-height: none !important; }

/* Kerngegevens in de zoekresultaten (toegevoegd in snippets/blocks/tommy-search.php), zelfde vorm als op de appartementpagina */
.b-tommy .tommy-zeb-wrapper .ks-result-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.b-tommy .tommy-zeb-wrapper .ks-result-facts__item { display: inline-flex; align-items: center; gap: .5rem; color: var(--t-ink); font-size: .9375rem; line-height: 1.3; }
.b-tommy .tommy-zeb-wrapper .ks-result-facts__item strong { font-weight: 700; }
.b-tommy .tommy-zeb-wrapper .ks-result-facts__icon { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--t-accent-soft); color: var(--t-accent-strong); }
.b-tommy .tommy-zeb-wrapper .ks-result-facts__icon svg { width: 1rem; height: 1rem; }

/* Taalkeuze van de zoekwidget is leeg bij maar één taal, maar neemt dan wel een rij (+ tussenruimte) in: weg ermee */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-language-selector:has(> tommy-language-selector:empty) { display: none; }

/* Knop "Klaar" onder de lijst met personen (toegevoegd in snippets/blocks/tommy-search.php) */
.b-tommy .tommy-zeb-wrapper .tommy-zeb-person-category-list .ks-persons-done {
  width: 100%;
  min-height: 2.75rem;
  margin: .5rem 0 .75rem !important;
}

/* ==========================================================================
   Knoppen: dezelfde hover als de rest van de site (main.css → "Knoppen"):
   vulling vanaf het punt waar de muis binnenkomt, pijltjes schuiven mee, klik even indrukken,
   geen onderstreping, geen focusrand of -kleur na een muisklik (wel met het toetsenbord).
   ========================================================================== */
.b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info), .b-tommy #TommyBookingSupport .tbs-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s var(--btn-ease, var(--t-ease)), background-color 0s, border-color .3s var(--t-ease), color .3s var(--t-ease), box-shadow .3s var(--t-ease);
  -webkit-tap-highlight-color: transparent;
}
/* Hoverkleur per soort knop; de standaard zonder gewicht (:where), zodat deze altijd winnen */
:where(.b-tommy .tommy-zeb-btn, .b-tommy .tbs-btn) { --btn-fill: var(--btn-fill-primary, #146027); }
:where(.b-tommy .ks-result-info, .b-tommy .tbs-btn-default, .b-tommy .tbs-btn-info, .b-tommy .tbs-btn-warning) { --btn-fill: var(--btn-fill-soft, #e2f4e3); }
:where(.b-tommy .tbs_kassabon .tbs-btn-success) { --btn-fill: var(--btn-fill-wheat, #f6c959); }
:where(.b-tommy .tbs-btn-danger) { --btn-fill: #f6c5c0; }
.b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info)::before, .b-tommy #TommyBookingSupport .tbs-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--btn-x, 50%);
  top: var(--btn-y, 50%);
  width: max(250%, 12rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s var(--btn-ease, var(--t-ease));
  pointer-events: none;
}
.b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info):hover, .b-tommy #TommyBookingSupport .tbs-btn:hover { text-decoration: none; }
@media (hover: hover) {
  .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info):hover, .b-tommy #TommyBookingSupport .tbs-btn:hover { transition: transform .2s var(--btn-ease, var(--t-ease)), background-color 0s linear .45s, border-color .3s var(--t-ease), color .3s var(--t-ease), box-shadow .3s var(--t-ease); }
  .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info):hover::before, .b-tommy #TommyBookingSupport .tbs-btn:hover::before { transform: translate(-50%, -50%) scale(1); }
}
@media (hover: none) { .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info)::before, .b-tommy #TommyBookingSupport .tbs-btn::before { display: none; } }
/* Omlijnde knop "Meer informatie": de rand (inset-schaduw) blijft staan */
.b-tommy .tommy-zeb-wrapper .ks-result-info:hover { box-shadow: inset 0 0 0 1.5px var(--t-accent); background-color: var(--btn-fill-soft, #e2f4e3); }
.b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info):active, .b-tommy #TommyBookingSupport .tbs-btn:active { transform: scale(.96); transition-duration: .1s; }
.b-tommy .tommy-zeb-wrapper .ks-result-info:active { box-shadow: inset 0 0 0 1.5px var(--t-accent); }
/* Pijltjes: vooruit naar rechts, terug naar links */
.b-tommy #TommyBookingSupport .tbs-btn :is(.tbs-glyphicon, i, svg) { display: inline-block; transition: transform .35s var(--btn-ease, var(--t-ease)); }
.b-tommy #TommyBookingSupport .tbs-btn:hover :is(.tbs-glyphicon-chevron-right, .tbs-glyphicon-arrow-right) { transform: translateX(3px); }
.b-tommy #TommyBookingSupport .tbs-btn:hover :is(.tbs-glyphicon-chevron-left, .tbs-glyphicon-arrow-left) { transform: translateX(-3px); }
/* Ronde pijlknoppen (vorige/volgende maand): het pijltje is de hele knop, dus geen beweging */
.b-tommy #TommyBookingSupport :is(.tbs-calendarPrevious, .tbs-calendarNext):hover :is(.tbs-glyphicon, i, svg) { transform: none; }
.b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn, .ks-result-info):focus:not(:focus-visible), .b-tommy #TommyBookingSupport .tbs-btn:focus:not(:focus-visible), .b-tommy #TommyBookingSupport .tbs-btn:active:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.b-tommy .tommy-zeb-wrapper .ks-result-info:focus:not(:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--t-accent); }

@media (prefers-reduced-motion: reduce) {
  .b-tommy *,
  .b-tommy *::before,
  .b-tommy *::after,
  body .pika-single * { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info)::before, .b-tommy #TommyBookingSupport .tbs-btn::before { display: none; }
  .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info), .b-tommy #TommyBookingSupport .tbs-btn, .b-tommy .tommy-zeb-wrapper :is(.tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .ks-result-info):hover, .b-tommy #TommyBookingSupport .tbs-btn:hover { transition: background-color .2s, border-color .2s, color .2s; transform: none !important; }
  .b-tommy #TommyBookingSupport .tbs-btn :is(.tbs-glyphicon, i, svg) { transform: none !important; }
}