/* Glassmorphism Mega Menu for Bakala Theme */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul {
    position: static !important;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li {
    position: static !important; /* Allow submenu to span full container width */
}

/* Target the dropdown containers */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;
    top: 100% !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
}

/* Give padding and adjust internal layout if it's the tab menu */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items {
    padding: 20px !important;
    min-height: 300px; /* Optional min height for aesthetics */
}

/* Make sure child elements don't have their own solid backgrounds */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .submenu,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .submenu ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dark mode compatibility override */
body.dark-mode .has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
body.dark-mode .has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    background: rgba(20, 20, 20, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Enhance submenu items for glass UI */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level > li {
    border-radius: 8px;
    transition: background 0.3s;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level > li:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

body.dark-mode .has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level > li:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Fix the hover underline animation due to position: static on LI */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li::after {
    display: none !important;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > span.title {
    position: relative;
    display: inline-flex; /* align icon and text side-by-side */
    align-items: center;
    height: 100%;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > span.title > a {
    display: inline-block; /* revert to inline-block so it behaves correctly next to the icon */
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > span.title::after {
    content: "";
    position: absolute;
    bottom: 0; /* Exactly at the bottom of the container */
    right: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-color, #ef394e);
    transition: width 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li:hover > span.title::after,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li.current-menu-item > span.title::after {
    width: 100%;
    left: 0;
    right: auto;
}

/* Fix overlapping submenus inside the glass mega menu */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .submenu ul {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items > ul.level > li.first.active .submenu ul,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items > ul.level > li:hover .submenu ul,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items > ul.level > li.active .submenu ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* --- Premium Aesthetic Enhancements --- */

/* 2. Spotlight Reveal (Fluent Design) */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    overflow: hidden; /* Contain the aurora and spotlight */
    position: absolute !important; /* ensure it's absolute */
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
        rgba(0, 0, 0, 0.04), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s;
}

body.dark-mode .has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items::after {
    background: radial-gradient(
        600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
        rgba(255, 255, 255, 0.08), 
        transparent 40%
    );
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items:hover::after {
    opacity: 1;
}

/* 3. Micro-animations for Category Icons */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .title2 a::before,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .title2 img.menu-item-icon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level > li:hover .title2 a::before,
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items .level > li:hover .title2 img.menu-item-icon {
    transform: scale(1.15) translateY(-3px);
}

/* 4. Aurora Blur Background */
.has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: 
        radial-gradient(circle at 15% 50%, rgba(255, 182, 255, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(132, 212, 255, 0.15), transparent 25%);
    pointer-events: none;
    z-index: -2;
    animation: aurora-spin 20s linear infinite;
    opacity: 0.8;
}

body.dark-mode .has-glass-mega-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items::before {
    background: 
        radial-gradient(circle at 15% 50%, rgba(147, 51, 234, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(56, 189, 248, 0.15), transparent 25%);
}

@keyframes aurora-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}