.bbe-offcanvas{position:relative;--bbe-oc-width:360px;--bbe-oc-height:100vh;--bbe-oc-overlay:rgba(0,0,0,.45);--bbe-oc-z:999999;--bbe-oc-h-offset:0px;--bbe-oc-v-offset:0px;--bbe-oc-rotate:0deg;}

.bbe-offcanvas-button-wrapper{display:inline-block;transform:translate(var(--bbe-oc-h-offset),var(--bbe-oc-v-offset)) rotate(var(--bbe-oc-rotate));}
.bbe-offcanvas-button{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;}

.bbe-offcanvas-overlay{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:calc(var(--bbe-oc-z) - 1);background:var(--bbe-oc-overlay);}

.bbe-offcanvas{--bbe-oc-hidden-shift:110%;}

.bbe-offcanvas .bbe-offcanvas-bar{
  position:fixed;
  top:0;
  bottom:auto;
  height:var(--bbe-oc-height);
  width:var(--bbe-oc-width);
  max-width:90vw;
  background:#fff;
  overflow:auto;
  z-index:var(--bbe-oc-z);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s ease;
}

/* Default positions */
.bbe-offcanvas[data-position="left"] .bbe-offcanvas-bar{left:0;right:auto;transform:translateX(calc(-1 * var(--bbe-oc-hidden-shift)));}
.bbe-offcanvas[data-position="right"] .bbe-offcanvas-bar{right:0;left:auto;transform:translateX(var(--bbe-oc-hidden-shift));}

/* Open state */
.bbe-offcanvas.bbe-open .bbe-offcanvas-overlay{opacity:1;visibility:visible;}
.bbe-offcanvas.bbe-open[data-position="left"] .bbe-offcanvas-bar,
.bbe-offcanvas.bbe-open[data-position="right"] .bbe-offcanvas-bar{transform:translateX(0);}

/* Reveal mode: bar under content */
.bbe-offcanvas[data-mode="reveal"] .bbe-offcanvas-bar{z-index:calc(var(--bbe-oc-z) - 2);box-shadow:none;}

/* No animation */
.bbe-offcanvas[data-mode="none"] .bbe-offcanvas-bar{transition:none;}
.bbe-offcanvas[data-mode="none"] .bbe-offcanvas-overlay{transition:none;}

.bbe-offcanvas-close{position:absolute;top:10px;right:10px;z-index:2;background:transparent;border:0;padding:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.bbe-offcanvas-close svg{width:18px;height:18px;display:block;}

.bbe-offcanvas-content{padding:24px;}

/* Alignment helpers (Elementor adds these classes via prefix_class) */
.elementor-align-center .bbe-offcanvas-button-wrapper{display:block;text-align:center;}
.elementor-align-right .bbe-offcanvas-button-wrapper{display:block;text-align:right;}
.elementor-align-justify .bbe-offcanvas-button-wrapper{display:block;}
.elementor-align-justify .bbe-offcanvas-button{width:100%;justify-content:center;}

/* Body lock */
body.bbe-offcanvas-active{overflow:hidden;}