/* ==========================================================
   Divi 5 Mobile Sliding Submenu
   ========================================================== */
@media (max-width: 980px) {
	
  /* Make the opened mobile drawer span the full module width */
  .et_pb_menu .mobile_nav .et_mobile_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
  }

  /* Ensure the menu module itself is a positioning context */
  .et_pb_menu,
  .et_pb_menu_inner_container {
    position: relative;
  }

	
  /* Hide the default nested submenus completely */
  .et_mobile_menu .sub-menu {
    display: none !important;
  }

  /* Remove Divi's default arrow/plus icon on parent items */
  .et_mobile_menu .menu-item-has-children > a:after,
  .et_mobile_menu .menu-item-has-children > a:before {
    display: none !important;
  }

  /* Chevron on top-level parent items */
  .et_pb_menu .et_mobile_menu li.menu-item-has-children > a {
    position: relative !important;
    padding-right: 40px !important;
  }

  .et_pb_menu .et_mobile_menu li.menu-item-has-children > a::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor !important;
    border-top: 2px solid currentColor !important;
    border-left: none !important;
    border-bottom: none !important;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.6;
    background: none !important;
    display: block !important;
  }

  /* Kill any Divi default plus/minus icon */
  .et_pb_menu .et_mobile_menu li.menu-item-has-children > a::before {
    display: none !important;
    content: none !important;
  }

  /* Make the mobile menu the positioning context for panels */
  .et_mobile_menu {
    position: relative;
  }

  /* Each slide-in panel */
  .slide-submenu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: #ffffff; /* change to match your menu bg */
    transform: translateX(100%)!important;
    transition: transform 0.3s ease;
    z-index: 10;
    margin: 0;
    padding: 0;
    visibility: hidden;
    box-sizing: border-box;
  }

  .slide-submenu-panel.is-active {
    transform: translateX(0)!important;
    visibility: visible;
  }

  /* Items inside the panel */
  .slide-submenu-item {
    display: block;
    padding: 10px 5%;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	   font-size:1rem;
  }

  .slide-submenu-item.has-slide-children {
    position: relative;
    padding-right: 40px;
  }

  .slide-submenu-item.has-slide-children::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.6;
  }

  .slide-submenu-item.current-menu-item {
    font-weight: 600;
	  border-bottom: 2px solid #FE6941;
  }

  /* Back button at the top of each panel */
  .slide-submenu-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 5%;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
	 
  }

  .slide-submenu-back::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 4px;
  }

  /* Force-hide the original sub-menus regardless of Divi rules */
  .et_pb_menu .et_mobile_menu li.menu-item-has-children > ul.sub-menu,
  .et_pb_menu_inner_container .et_mobile_menu ul.sub-menu,
  .et_mobile_menu li ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep the menu full width even while closing */
  .et_pb_menu .mobile_nav .et_mobile_menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* When closing, fade out instead of collapsing */
  .et_pb_menu .mobile_nav.closed .et_mobile_menu {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
  }

  .et_pb_menu .mobile_nav.opened .et_mobile_menu {
    opacity: 1;
    transform: translateY(0);
  }

  /* Make sure mobile_nav doesn't try to size itself based on content while closing */
  .et_pb_menu .mobile_nav {
    min-width: 0;
  }
	.et_pb_menu .mobile_nav .et_mobile_menu {
    transition: none !important;
    animation: none !important;
  }

  /* The base menu items slide left when a panel is open */
  .et_pb_menu .et_mobile_menu > li {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* When any panel is active, shift the base menu items off to the left */
  .et_pb_menu .mobile_nav.has-slide-open .et_mobile_menu > li {
    transform: translateX(-30%);
    opacity: 0;
  }

  /* Same effect for nested panels: when a deeper panel opens, the parent panel shifts left */
  .slide-submenu-panel {
    transition: transform 0.3s ease, opacity 0.3s ease;
	  padding: 5%;
  }

  .slide-submenu-panel.is-active.has-child-open {
    transform: translateX(-30%) !important;
    opacity: 0;
  }
}