.srk-emm-enabled,
.srk-emm-has-panel{position:relative; overflow:visible}

/* Hide normal dropdown if mega is enabled (theme-agnostic) */
/*
  Themes differ in markup:
  - <ul class="sub-menu">...</ul>
  - <ul>...</ul>
  - <div class="sub-menu">...</div>
  - <ul class="children">...</ul>
  If a mega panel is attached, we suppress ONLY the theme's default dropdown
  (direct children of the menu item), so you don't get a "double dropdown"
  (mega panel + small submenu).
*/
.srk-emm-has-panel > ul,
.srk-emm-has-panel > ul.sub-menu,
.srk-emm-has-panel > ul.children,
.srk-emm-has-panel > .sub-menu,
.srk-emm-has-panel > .children,
.srk-emm-has-panel > .dropdown-menu,
.srk-emm-has-panel > .nav-dropdown{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.srk-emm-panel{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  z-index:999999;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:16px;
  width:min(1200px, 95vw);
}

/* Dropdown caret / toggle button (for mega items without WP children) */
.srk-emm-has-panel{position:relative}

/* Arrow on the right for mega menu items (desktop + mobile) */
.srk-emm-has-panel > a{
  display:block;
  padding-right:28px;
}
.srk-emm-has-panel > .srk-emm-toggle{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:#000;
}
.srk-emm-has-panel > .srk-emm-toggle::before{
  opacity:1;
}

.srk-emm-has-panel > .srk-emm-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:-1px -8px 0 6px;
  line-height:1;
  cursor:pointer;
  vertical-align:middle;
}
.srk-emm-has-panel > .srk-emm-toggle::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.75;
}
.srk-emm-has-panel.srk-emm-open > .srk-emm-toggle::before{
  transform:rotate(-135deg);
}

/*
  Some themes hide ALL nested <ul> inside nav items (ex: .main-menu ul ul{display:none}).
  Elementor widgets (Icon List, Nav Menu, etc.) rely on <ul>/<li> markup, so the theme
  can accidentally hide the mega panel's inner lists.

  Force lists inside the mega panel to remain visible.
*/
.srk-emm-panel ul,
.srk-emm-panel ol{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  height:auto !important;
  width:auto !important;
  transform:none !important;

  /* Neutralize theme "submenu" cosmetics that can create white boxes */
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
}

/* Some themes set pointer-events:none on dropdown containers, restore clicks inside mega panel */
.srk-emm-panel,
.srk-emm-panel *{
  pointer-events:auto !important;
}

.srk-emm-panel li{
  display:list-item;
}

/* Keep Elementor Icon List readable even inside strict nav CSS */
.srk-emm-panel .elementor-icon-list-items{display:block !important;}
.srk-emm-panel .elementor-icon-list-item{display:block !important;}

/* Alignment */
.srk-emm-has-panel.srk-emm-align-center > .srk-emm-panel{left:50%;transform:translateX(-50%)}
.srk-emm-has-panel.srk-emm-align-right > .srk-emm-panel{left:auto;right:0}


@media (min-width: 980px){
  .srk-emm-has-panel.srk-emm-width-full > .srk-emm-panel{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;

    top: 95px !important;   /* IMPORTANT, set to your header height */
    bottom: auto !important; /* safety */
    
    width: min(94vw, 1440px) !important;
    max-width: min(94vw, 1440px) !important;
  }
}


/* Show on hover, desktop */
@media (min-width: 769px){
  .srk-emm-has-panel:hover > .srk-emm-panel{display:block}
  .srk-emm-has-panel.srk-emm-open > .srk-emm-panel{display:block}
}

/* Mobile: render the mega panel as a normal block under the item */
@media (max-width: 768px){
  .srk-emm-panel{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    transform:none;
    width:100%;
    max-width:none;
    box-shadow:none;
    padding:12px;
    margin-top:10px;
  }
  .srk-emm-has-panel.srk-emm-open > .srk-emm-panel{display:block}
  
/* Width */
.srk-emm-has-panel.srk-emm-width-full > .srk-emm-panel {
    left: 50%;
    transform: translateX(0%);
    width: 100%;
    max-width: 100%;
    top: 75%;
    border-radius: 5px;
    z-index: 9999999;
    box-shadow: 0px 0px 20px 0px #00000038;
}
.srk-emm-has-panel > .srk-emm-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0px -2px 0 6px;
  line-height:1;
  cursor:pointer;
  vertical-align:middle;
}
.srk-emm-has-panel > .srk-emm-toggle {
    top: 20px;
}
}