/* Basislayout */
#bpw-sticky-bar { position: fixed; left: 0; right: 0; padding: 6px; box-sizing: border-box; }
#bpw-sticky-bar .bpw-buttons { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: center; align-items: center; }
#bpw-sticky-bar .bpw-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 12px; text-decoration: none; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#bpw-sticky-bar .bpw-btn:focus { outline: 2px solid; outline-offset: 2px; }
#bpw-sticky-bar .bpw-icon { width: 20px; height: 20px; display: inline-block; }
#bpw-sticky-bar .bpw-label { line-height: 1; }

/* Posities */
#bpw-sticky-bar.bpw-pos-top { top: 0; }
#bpw-sticky-bar.bpw-pos-bottom { bottom: 0; }

/* Links/rechts verticale balk */
#bpw-sticky-bar.bpw-pos-left,
#bpw-sticky-bar.bpw-pos-right { top: 0; bottom: 0; width: auto; height: 100vh; display: flex; align-items: center; justify-content: center; }
#bpw-sticky-bar.bpw-pos-left { left: 0; right: auto; }
#bpw-sticky-bar.bpw-pos-right { right: 0; left: auto; }
#bpw-sticky-bar.bpw-pos-left .bpw-buttons,
#bpw-sticky-bar.bpw-pos-right .bpw-buttons { flex-direction: column; }

/* Prefs toggle */
#bpw-sticky-bar .bpw-prefs-toggle { position: absolute; right: 8px; top: 8px; border: none; background: #fff; color:#111; border-radius: 8px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; display:flex; align-items:center; gap:6px; z-index:2; }
#bpw-sticky-bar .bpw-prefs-toggle .bpw-gear{ width:18px; height:18px; display:block; }
#bpw-sticky-bar .bpw-prefs-toggle .bpw-prefs-text{ font-weight:600; }
#bpw-sticky-bar.bpw-pos-bottom .bpw-prefs-toggle { top: auto; bottom: 8px; }
#bpw-sticky-bar.bpw-pos-left .bpw-prefs-toggle { right: 8px; top: 8px; }
#bpw-sticky-bar.bpw-pos-right .bpw-prefs-toggle { left: 8px; right: auto; top: 8px; }
@media (max-width: 480px){ #bpw-sticky-bar .bpw-prefs-toggle .bpw-prefs-text{ display:none; } }
#bpw-sticky-bar.bpw-pos-bottom .bpw-prefs-toggle { top: auto; bottom: 8px; }
#bpw-sticky-bar.bpw-pos-left .bpw-prefs-toggle { right: 8px; top: 8px; }
#bpw-sticky-bar.bpw-pos-right .bpw-prefs-toggle { left: 8px; right: auto; top: 8px; }

/* Prefs panel */
#bpw-sticky-bar .bpw-prefs { position: absolute; right: 8px; top: 44px; background: #fff; color:#111; padding: 10px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 6px; z-index:3; }
#bpw-sticky-bar .bpw-prefs .bpw-prefs-actions { display: flex; gap: 8px; margin-top: 4px; }
#bpw-sticky-bar .bpw-prefs button { border: 1px solid #ddd; background: #f7f7f7; border-radius: 8px; padding: 6px 10px; cursor: pointer; }

/* Chips in admin */
.bpw-chip { width: 16px; height: 16px; display: inline-block; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); vertical-align: middle; margin-right: 6px; }

/* Hidden state (bezoeker override) */
#bpw-sticky-bar.bpw-hidden { display: none !important; }

@media (max-width: 480px) {
  #bpw-sticky-bar .bpw-label { display: none; }
  #bpw-sticky-bar .bpw-btn { padding: 8px; border-radius: 10px; }
}

/* Aan/Uit toggle */
#bpw-sticky-bar .bpw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: #f1f5f9;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
#bpw-sticky-bar .bpw-toggle:focus { outline: 2px solid; outline-offset: 2px; }





/* Toggle - tekst zwart */
#bpw-sticky-bar .bpw-toggle { color: #000; }
/* end toggle css */

/* Herstel-link: linksonder in beeld */
#bpw-restore-link {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: auto;
  padding: 8px 12px;
  background: #f1f5f9;
  color: #000;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-weight: 600;
  z-index: 10000;
  display: none;
}
body.bpw-sticky-off #bpw-restore-link { display: inline-flex; }