.sbp-wrap{position:relative;display:inline-block}
.sbp-toggle{
  display:flex;align-items:center;gap:.5rem;
  border:none;border-radius:999px;padding:.5rem .9rem;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.sbp-label{font-weight:600}

.sbp-backdrop{
  position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .25s ease;
  z-index:9997;
}
.sbp-wrap.sbp-open .sbp-backdrop{opacity:1;pointer-events:auto}

.sbp-panel{
  position:fixed;top:0;bottom:0;width:340px;max-width:92vw;
  transform:translateX(100%);
  transition:transform .3s ease;
  padding:20px;box-sizing:border-box;z-index:9998;
  display:flex;flex-direction:column;gap:12px;
  box-shadow: -8px 0 20px rgba(0,0,0,.25);
  overflow:auto;
}
.sbp-wrap.sbp-left .sbp-panel{left:0;transform:translateX(-100%);box-shadow: 8px 0 20px rgba(0,0,0,.25)}
.sbp-wrap.sbp-right .sbp-panel{right:0}

.sbp-wrap.sbp-open.sbp-right .sbp-panel{transform:translateX(0)}
.sbp-wrap.sbp-open.sbp-left .sbp-panel{transform:translateX(0)}

.sbp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sbp-close{background:transparent;border:none;cursor:pointer}

.sbp-content .sbp-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.sbp-content .sbp-menu li{list-style:none}
.sbp-content .sbp-menu a{
  text-decoration:none;display:block;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.sbp-extra{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.25);}