/* --- 1. CLEANUP & DOTS REMOVAL --- */
#mobile-drawer, .mobile-drawer { display: none !important; }

.custom-mobile-menu ul, .custom-mobile-menu li,
.main-navigation ul.sub-menu, .main-navigation ul.sub-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

.custom-mobile-menu li::before, .main-navigation ul.sub-menu li::before {
  content: none !important;
  display: none !important;
}

/* --- 2. DARK GLASS MENU BASE --- */
.custom-mobile-menu, 
.main-navigation ul.sub-menu {
  background: #0b0b2b96 !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%) !important;
  z-index: 9999;
}

/* --- 3. DESKTOP DROPDOWN (Flip Down & Spacing) --- */
@media (min-width: 1025px) {
  .main-navigation ul li { position: relative; perspective: 1000px; }
  
  .main-navigation ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 240px !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: top;
    transform: rotateX(-25deg) translateY(10px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 14px;
    overflow: hidden;
  }

  .main-navigation ul li:hover > ul.sub-menu {
    visibility: visible; opacity: 1; pointer-events: auto; transform: rotateX(0deg) translateY(0);
  }

  /* INCREASED SPACING FOR DESKTOP ITEMS */
  .main-navigation ul.sub-menu li a {
    padding: 20px 28px !important; /* More top/bottom spacing */
  }
}

/* --- 4. MOBILE MENU & TOGGLE FIX --- */
.custom-mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; width: 100%;
  opacity: 0; transform: translateY(-25px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
.custom-mobile-menu.active { display: block; opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  /* Snappy Sub-menu for mobile (No Lag) */
  .custom-mobile-menu ul.sub-menu { 
    display: none !important; 
    background: rgba(0, 0, 0, 0.2) !important; 
  }
  .custom-mobile-menu li.toggled > ul.sub-menu { display: block !important; }

  /* Sub-menu items animation reset (Crucial for speed) */
  .custom-mobile-menu ul.sub-menu li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }

  .drawer-nav-drop-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }

  .drawer-nav-drop-wrap .drawer-sub-toggle {
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 12px; cursor: pointer; transition: all 0.3s ease;
  }
  .li.toggled > .drawer-nav-drop-wrap .drawer-sub-toggle { 
    transform: rotate(180deg); background: rgba(139, 156, 255, 0.3) !important; 
  }
}

/* --- 5. TYPOGRAPHY & HOVER EFFECT --- */
.custom-mobile-menu li a,
.main-navigation ul.sub-menu li a {
  display: block !important;
  width: 100% !important;
  padding: 21px 25px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  letter-spacing: 1px;
  position: relative;
  transition: all .4s cubic-bezier(0.16,1,0.3,1);
  box-sizing: border-box !important;
}

.custom-mobile-menu li a:hover,
.main-navigation ul.sub-menu li a:hover {
  color: #ffffff !important;
  padding-left: 35px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
}

/* Gradient Accent Bar */
.custom-mobile-menu li a::before,
.main-navigation ul.sub-menu li a::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(0);
  width:4px; height:20px; background: linear-gradient(135deg,#667eea,#764ba2);
  transition: transform .4s cubic-bezier(.16,1,0.3,1);
  border-radius:0 3px 3px 0;
  z-index: 5;
}

.custom-mobile-menu li a:hover::before,
.main-navigation ul.sub-menu li a:hover::before { transform:translateY(-50%) scaleY(1); }

/* Top-level Stagger Animation for Mobile */
.custom-mobile-menu.active > ul > li {
  animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; transform: translateX(-25px);
}
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }