/* --- Off-canvas base panel --- */
.off-canvas-navigation{
  position:fixed; top:0; left:0;
  width:85vw; max-width:360px; height:100vh;
  overflow-y:auto;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  transform:translateX(-105%);
  transition:transform .28s ease;
  z-index:99998;
  padding-top:8px;
}

/* Visible when open */
.off-canvas-navigation.is-open{ transform:translateX(0); }

/* Overlay */
.echild-oc-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:99997;
}
.echild-oc-overlay.is-active{ display:block; }

/* Toggle buttons + prevent body scroll */
.off-canvas-navbar-toggle-buttons .navbar-toggle-close{ display:none; }
.off-canvas-navigation-wrapper.ocn-open .off-canvas-navbar-toggle-buttons .navbar-toggle-close{ display:inline-block; }
.off-canvas-navigation-wrapper.ocn-open .off-canvas-navbar-toggle-buttons .navbar-toggle-hamburger{ display:none; }
body.ocn-open{ overflow:hidden; }

/* Clean the "X" bubble / icons readable */
.off-canvas-navbar-toggle-buttons .navbar-toggler{
  background:transparent !important;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:6px; cursor:pointer;
}
.off-canvas-navbar-toggle-buttons .ec{ color:#222 !important; }

/* --- Reset Electro/YAMM/Bootstrap inside panel --- */
.off-canvas-navigation .nav,
.off-canvas-navigation .nav.nav-inline,
.off-canvas-navigation .yamm{
  display:block !important;
  list-style:none; margin:0; padding:8px 0;
}

.off-canvas-navigation .nav > li,
.off-canvas-navigation .nav.nav-inline > li,
.off-canvas-navigation .yamm > li{
  display:block !important;
  margin:0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

/* Links */
.off-canvas-navigation .nav > li > a,
.off-canvas-navigation .nav.nav-inline > li > a,
.off-canvas-navigation .yamm > li > a,
.off-canvas-navigation .menu-item > a{
  display:block !important; width:100%;
  padding:14px 16px;
  color:#1f2937 !important;
  background:transparent !important;
  text-decoration:none;
  font-size:16px; line-height:1.4; font-weight:500;
  border:0;
}
.off-canvas-navigation .nav > li > a:hover,
.off-canvas-navigation .menu-item > a:hover{
  color:#0ea5e9 !important;
  background:rgba(0,0,0,.035) !important;
}

/* Active/current item */
.off-canvas-navigation .current-menu-item > a,
.off-canvas-navigation .active > a{
  color:#0ea5e9 !important;
  font-weight:600;
}

/* --- Submenu (dropdown) --- */
.off-canvas-navigation .menu-item-has-children > a{
  position:relative; padding-right:36px;
}

/* Caret */
.off-canvas-navigation .menu-item-has-children > a::after{
  content:"▾";
  position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(0deg);
  font-size:14px; transition:transform .2s ease;
  opacity:.85;
}

/* Make dropdowns behave like stacked lists, not popovers */
.off-canvas-navigation .dropdown-menu{
  position:static !important;
  float:none !important;
  display:block !important;            /* always in flow */
  width:100% !important;
  margin:0; padding:0;
  border:0; box-shadow:none; background:transparent;
  /* collapsed state */
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .24s ease, visibility .24s step-end;
}

/* Expand when parent li gets .open (Bootstrap) */
.off-canvas-navigation .menu-item-has-children.open > .dropdown-menu{
  max-height:60vh; visibility:visible; transition:max-height .28s ease, visibility .0s;
}

/* Expand when the anchor toggles aria-expanded=true (theme/JS) */
.off-canvas-navigation .menu-item-has-children > a[aria-expanded="true"] + .dropdown-menu{
  max-height:60vh; visibility:visible; transition:max-height .28s ease, visibility .0s;
}

/* Rotate caret on expand */
.off-canvas-navigation .menu-item-has-children.open > a::after,
.off-canvas-navigation .menu-item-has-children > a[aria-expanded="true"]::after{
  transform:translateY(-50%) rotate(180deg);
}

/* Submenu items style */
.off-canvas-navigation .dropdown-menu > li{
  border-top:1px solid rgba(0,0,0,.06);
}
.off-canvas-navigation .dropdown-menu > li > a{
  padding:12px 22px; font-size:15px; color:#334155 !important;
}
.off-canvas-navigation .dropdown-menu > li > a:hover{
  color:#0ea5e9 !important; background:rgba(0,0,0,.03) !important;
}

/* Optional indent for deeper levels */
.off-canvas-navigation .dropdown-menu .menu-item-has-children > a{ padding-left:28px; }
.off-canvas-navigation .dropdown-menu .dropdown-menu > li > a{ padding-left:34px; }

/* Safety: neutralize Bootstrap dropdown backdrop inside panel */
.off-canvas-navigation .dropdown-backdrop{ display:none !important; }

/* Panel theme */
.off-canvas-navigation-wrapper .off-canvas-navigation{ background:#fff; }
.off-canvas-navigation a{ color:#222; }