/* ==========================================================================
   C3 · bb — Boekbalk mobiel
   v1.0 · 2026-08-31 · Natuurlijk Gezonder
   --------------------------------------------------------------------------
   Prefix: bb-. Gebruikt uitsluitend tokens uit 00-tokens.css.
   Laadt na 95-ft-footer.css.

   Op een accommodatiesite is dit het element dat het meeste doet, en op de
   oude site stond het er niet. Wie op een telefoon halverwege de pagina
   besluit te boeken, moest daar terugscrollen naar de header — of de zes
   Lodgify-links in de kaarten vinden.

   DRIE REGELS DIE DE BALK NIET VERVELEND MAKEN:

   1. HIJ VERSCHIJNT PAS NA DE HERO. Het eerste scherm heeft zijn eigen
      knoppen; een vaste balk daaroverheen is dubbelop en kost 15 % van een
      telefoonscherm.
   2. HIJ VERDWIJNT BIJ DE FOOTER. Daar staan de links al, en een balk over
      een verzendknop of een cookiemelding heen is precies het soort ding
      waar mensen op afhaken.
   3. ALLEEN OP MOBIEL. Op desktop staat de knop in de sticky header en die
      is altijd in beeld.

   Beweging: uitsluitend `transform` — de balk schuift op de compositor en
   raakt geen layout.
   ========================================================================== */

.bb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ng-z-boekbalk);

  display: flex;
  align-items: center;
  gap: var(--ng-s-3);
  padding: var(--ng-s-3) var(--ng-gutter);
  padding-bottom: max(var(--ng-s-3), env(safe-area-inset-bottom));

  background: var(--ng-groen-900);
  color: var(--ng-tekst-op-diep);
  box-shadow: 0 -2px 16px rgba(20, 59, 53, .28);

  /* uit beeld tot het script hem toont */
  transform: translateY(100%);
  transition: transform var(--ng-duur-rustig) var(--ng-easing);
}

.bb.is-zichtbaar { transform: translateY(0); }

/* Desktop heeft de sticky header met dezelfde knop. */
@media (min-width: 62rem) {
  .bb { display: none; }
}

/* Zonder JavaScript verschijnt de balk niet — en dat is goed: dan zou hij
   ook boven de footer blijven hangen. De header houdt zijn eigen knop. */
.bb:not(.bb--js) { display: none; }

.bb__tekst {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--ng-t-micro);
  line-height: 1.35;
  color: rgba(255, 254, 252, .82);
}
.bb__tekst strong {
  display: block;
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  color: var(--ng-tekst-op-diep);
}

.bb__knop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* raakvlak */
  padding: .625rem var(--ng-s-4);
  border-radius: var(--ng-radius);
  background: var(--ng-op-actie);
  color: var(--ng-groen-900);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: .02em;
  text-decoration: none;
  transition:
    background-color var(--ng-duur-snel) var(--ng-easing),
    transform var(--ng-duur-snel) var(--ng-easing);
}
.bb__knop:hover { background: var(--ng-munt-200); color: var(--ng-groen-900); }
.bb__knop:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .bb { transition-duration: 120ms; }
}