/* Botanical Wisdom demo — the version tabs, floating top-left over the header's empty space.
   On phones they move to the bottom as one compact row (Origineel · A · B · ↻ · ×) so they never cover the logo or menu.
   × hides the bar; the small "Demo" button brings it back. */
#bwd-tabs {
  position: fixed; top: 14px; left: 14px; z-index: 100000;
  display: flex; align-items: center; gap: 2px; max-width: calc(100vw - 24px);
  padding: 4px; border-radius: 40px;
  background: rgba(41, 45, 39, .92); box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  font: 600 11px/1 Raleway, Arial, sans-serif; letter-spacing: .6px;
}
#bwd-tabs[hidden], #bwd-tabs-open[hidden] { display: none; }
#bwd-tabs .bwd-tabs-label { color: rgba(244, 239, 231, .55); text-transform: uppercase; padding: 0 8px 0 10px; }
/* every button the same height with its text centred both ways — the old bar mixed sizes, so text sat at different heights */
#bwd-tabs a, #bwd-tabs .bwd-close {
  display: inline-flex; align-items: center; justify-content: center; height: 30px; box-sizing: border-box;
  color: #f4efe7; text-decoration: none; padding: 0 13px; border-radius: 30px; white-space: nowrap;
  font: inherit; line-height: 1; transition: background .25s, color .25s;
}
#bwd-tabs a:hover, #bwd-tabs .bwd-close:hover { background: rgba(244, 239, 231, .14); }
#bwd-tabs a[aria-current="true"] { background: #f4efe7; color: rgb(41, 45, 39); }
#bwd-tabs .bwd-short { display: none; }
#bwd-tabs a.bwd-replay { font-size: 15px; padding: 0 11px; margin-left: 2px; border-left: 1px solid rgba(244,239,231,.2); border-radius: 0 30px 30px 0; }
#bwd-tabs .bwd-close { border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: 400; padding: 0 11px; color: rgba(244, 239, 231, .7); }
#bwd-tabs-open {
  position: fixed; left: 12px; bottom: 12px; z-index: 100000; height: 30px; padding: 0 14px; border: 0; border-radius: 30px; cursor: pointer;
  background: rgba(41, 45, 39, .85); color: #f4efe7; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  font: 600 11px/1 Raleway, Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase;
}
@media (max-width: 760px) {
  #bwd-tabs { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); }
  #bwd-tabs .bwd-tabs-label, #bwd-tabs .bwd-long { display: none; }
  #bwd-tabs .bwd-short { display: inline; }
  #bwd-tabs a { padding: 0 12px; }
  #bwd-tabs a[href$="=a"], #bwd-tabs a[href$="=b"] { min-width: 34px; padding: 0 6px; }
  #bwd-tabs a.bwd-replay[href] { min-width: 0; padding: 0 10px; }
  /* their floating "Nederlands" language bar sits in the same spot on phones — hidden in the demo only.
     (This is the small bar, NOT the language pop-up: that one locks scrolling and must never be hidden.) */
  .trp-floating-switcher { display: none !important; }
}
