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

/*
 * Must stay fully opaque: opacity < 1 on an ancestor makes position:fixed descendants
 * use this box as their containing block. The wrapper has no in-flow height, so the
 * panel would anchor incorrectly (especially obvious for data-position="right").
 * Themes that hide the closed widget with opacity should be overridden here.
 */
/* Never set opacity < 1 on .bbe-offcanvas — it breaks position:fixed on .bbe-offcanvas-bar */
.bbe-offcanvas,
.bbe-offcanvas:not(.bbe-open),
.bbe-offcanvas.bbe-open{opacity:1 !important;}

/* JS portals to body; display:contents keeps Elementor wrapper selectors working */
.bbe-offcanvas-portal{display:contents;position:static;z-index:auto;}

.bbe-offcanvas-button-wrapper{display:inline-block;transform:translate(var(--bbe-oc-h-offset),var(--bbe-oc-v-offset));}
.bbe-offcanvas-button{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;transform:none;font:inherit;color:inherit;}
.bbe-offcanvas-button.elementor-button{background-color:transparent;border-width:0;padding:0;box-shadow:none;appearance:none;-webkit-appearance:none;}

/* Animated theme menu icon (scoped to offcanvas trigger) */
.bbe-offcanvas-button.offcanvas-menu{background-color:transparent;border:none;cursor:pointer;padding:0;}
.bbe-offcanvas-button.offcanvas-menu .bbe-offcanvas-theme-icon{display:flex;line-height:0;}
.bbe-offcanvas-button.offcanvas-menu .bbe-offcanvas-theme-icon svg{width:28px;height:28px;display:block;}
.bbe-offcanvas-button.offcanvas-menu .line{fill:none;stroke:currentColor;stroke-width:6;transition:stroke-dasharray 600ms cubic-bezier(0.4,0,0.2,1),stroke-dashoffset 600ms cubic-bezier(0.4,0,0.2,1);}
.bbe-offcanvas-button.offcanvas-menu .line1{stroke-dasharray:60 207;stroke-width:6;}
.bbe-offcanvas-button.offcanvas-menu .line2{stroke-dasharray:50 60;stroke-width:6;}
.bbe-offcanvas-button.offcanvas-menu .line3{stroke-dasharray:30 207;stroke-width:6;}
.bbe-offcanvas-button.offcanvas-menu.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6;}
.bbe-offcanvas-button.offcanvas-menu.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6;}
.bbe-offcanvas-button.offcanvas-menu.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6;}

.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:var(--bbe-oc-panel-bg);
  overflow:auto;
  z-index:var(--bbe-oc-z);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* 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;pointer-events:auto;}
.bbe-offcanvas.bbe-open .bbe-offcanvas-bar{visibility:visible;pointer-events:auto;}
.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:var(--bbe-oc-close-bg,transparent);
  border:0;padding:8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;
  color:var(--bbe-oc-close-color,currentColor);
  fill:var(--bbe-oc-close-color,currentColor);
}
.bbe-offcanvas-close svg{width:18px;height:18px;display:block;}

/* Portfolio inline panel close icon (Open Panel Inline Below) */
.bbe-offcanvas-close--theme .bb-close-icon{width:22px;height:22px;display:inline-flex;}
.bbe-offcanvas-close--theme .bb-close-icon svg{width:100%;height:100%;}
.bbe-offcanvas-close--theme .bb-close-line{
  stroke:var(--bbe-oc-close-color,currentColor);
  stroke-width:2;stroke-linecap:round;stroke-dasharray:52;stroke-dashoffset:0;
}
.bbe-offcanvas-close--theme:hover .bb-close-line-a,
.bbe-offcanvas-close--theme:focus .bb-close-line-a{animation:bbeOcCloseDrawA 360ms cubic-bezier(0.667,1,0.333,1);}
.bbe-offcanvas-close--theme:hover .bb-close-line-b,
.bbe-offcanvas-close--theme:focus .bb-close-line-b{animation:bbeOcCloseDrawB 420ms cubic-bezier(0.667,1,0.333,1);}
@keyframes bbeOcCloseDrawA{0%{stroke-dashoffset:52;}100%{stroke-dashoffset:0;}}
@keyframes bbeOcCloseDrawB{0%{stroke-dashoffset:52;}100%{stroke-dashoffset:0;}}
.bbe-offcanvas-close-icon{display:inline-flex;line-height:0;}
.bbe-offcanvas-close-icon 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;}

/* Scroll lock: html only on desktop (no position:fixed = no jump). iOS uses body fixed via JS. */
html.bbe-offcanvas-active{overflow:hidden !important;overscroll-behavior:none;}
body.bbe-offcanvas-ios-lock{overflow:hidden !important;overscroll-behavior:none;}


/* Improve scrolling inside the offcanvas on iOS */
.bbe-offcanvas .bbe-offcanvas-bar{-webkit-overflow-scrolling:touch;}