/* Floating Island Menu (Pill Header) */
.has-island-menu {
    max-width: 1280px !important; /* Limits the width so it floats like an island */
    margin: 15px auto !important; /* Detaches it from the top edge */
    border-radius: 20px; /* Pill shape */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important; /* Floating shadow */
    left: 10px !important;
    right: 10px !important;
    transition: top 0.4s ease, border-radius 0.4s ease, margin 0.4s ease, box-shadow 0.4s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.has-island-menu{
    @supports(corner-shape:superellipse(2)) {
        corner-shape: superellipse(2) !important
    }
    @supports(corner-shape:squircle) {
        border-radius: 40px !important;
        corner-shape: squircle !important
    }
}
/* Maintain floating gap when sticky mode is triggered */
.has-island-menu.mobile-top-bar {
    top: 15px !important;
}

/* Ensure inner container respects the rounded borders */
.has-island-menu .main-menu-div {
    border-radius: inherit;
}

/* Combine with Glassmorphism */
.has-glass-mega-menu.has-island-menu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Dark Mode Support */
body.dark-mode .has-island-menu {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .has-glass-mega-menu.has-island-menu {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- MEGA MENU POSITIONING ADJUSTMENTS --- */
/* Detach the dropdown slightly so it doesn't overlap the island's rounded corners */
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    margin-top: 10px !important;
    border-radius: 24px !important;
}

/* Add shadow to normal submenus if glass mode is off, to match the floating style */
.has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-mode .has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
body.dark-mode .has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
    border-radius: 24px !important;
}

/* Adjust the red hover line to fit the rounded style */
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > span.title::after {
    border-radius: 10px !important;
}