/* Cascading Vertical Mega Menu Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --brand-blue: #4532c9;
    --menu-bg: #1a1b1e;
    --menu-hover-bg: #252630;
    --text-white: #ffffff;
    --text-muted: #c0c4d0;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   OVERFLOW FIX
   .page-wrapper has overflow:clip which clips
   absolutely-positioned dropdowns causing scroll.
   We override it safely just for the header area.
   ============================================= */
.main-header {
    position: relative;
    z-index: 999;
    overflow: visible !important;
}

nav.main-menu-one {
    position: relative;
    overflow: visible !important;
}

nav.main-menu-one .container {
    overflow: visible !important;
}

nav.main-menu-one .main-menu__list {
    overflow: visible !important;
}

/* =============================================
   DESKTOP — Vertical Cascading Mega Menu
   ============================================= */
@media (min-width: 1200px) {

    /* Anchor the position to this li */
    .main-menu__list>li.mega-menu-vertical {
        position: relative !important;
    }

    /* ---- Level 1 Panel (category list) ---- */
    .v-mega-menu {
        position: absolute;
        top: calc(100% + 0px);
        left: 0;
        width: 280px;
        background: #ffffff !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: var(--transition);
        z-index: 9999;
        border-top: 3px solid var(--brand-blue);
        border-radius: 0 0 6px 6px;
        overflow: visible !important;
        max-height: none !important;
        /* override noile.css 400px limit */
        flex-direction: column !important;
    }

    .mega-menu-vertical:hover>.v-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* ---- Level 1 Items ---- */
    .v-mega-menu>li {
        position: relative;
        display: block;
    }

    .v-mega-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 22px;
        color: #1a1b1e !important;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        transition: var(--transition);
        border-left: 3px solid transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        text-transform: none !important;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }

    .v-mega-menu > li:last-child > a {
        border-bottom: none;
    }

    /* Arrow icon — dark on white background */
    .v-mega-menu > li > a i {
        font-size: 11px !important;
        color: #1a1b1e !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: var(--transition);
        margin-left: 10px;
        flex-shrink: 0;
    }

    /* Hover — brand blue text, light grey bg */
    .v-mega-menu > li:hover > a,
    .v-mega-menu > li.active > a {
        color: var(--brand-blue) !important;
        background: #f4f4f8 !important;
        border-left-color: var(--brand-blue);
    }

    .v-mega-menu > li:hover > a i {
        color: var(--brand-blue) !important;
    }

    /* ---- Level 2 Panel (fly-out to the right) ---- */
    .v-submenu {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 260px;
        background: var(--menu-bg) !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transform: translateX(8px);
        transition: var(--transition);
        z-index: 10000;
        border-top: 3px solid var(--brand-blue);
        border-radius: 0 6px 6px 6px;
        overflow: visible !important;
        max-height: none !important;
        /* override noile.css 400px limit */
        flex-direction: column !important;
    }

    .v-has-submenu:hover>.v-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* ---- Level 2 Items ---- */
    .v-submenu li {
        display: block;
        position: relative;
    }

    .v-submenu li a i {
        margin-left: auto;
        font-size: 11px !important;
        color: rgba(255,255,255,0.7) !important;
    }

    /* ---- Level 3 Panel (flies out to the left permanently) ---- */
    .v-submenu-3 {
        position: absolute;
        top: 0;
        left: auto !important;
        right: 100% !important;
        min-width: 260px;
        background: var(--menu-bg) !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: var(--transition);
        z-index: 10001;
        border-top: 3px solid var(--brand-blue);
        border-radius: 6px 0 6px 6px;
        flex-direction: column !important;
        display: block !important;
    }

    .v-has-submenu-3:hover > .v-submenu-3 {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* ---- Level 3 Items ---- */
    .v-submenu-3 li {
        display: block;
    }

    .v-submenu-3 li a {
        display: flex !important;
        align-items: center !important;
        padding: 11px 22px !important;
        color: #ffffff !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: var(--transition);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        white-space: nowrap;
        background: transparent !important;
    }

    .v-submenu-3 li:last-child a {
        border-bottom: none !important;
    }

    .v-submenu-3 li a:hover {
        color: var(--text-white) !important;
        background: var(--menu-hover-bg) !important;
        padding-left: 26px !important;
    }

    .v-submenu li a {
        display: flex !important;
        align-items: center !important;
        padding: 11px 22px !important;
        color: #ffffff !important;
        /* pure white — max visibility on dark bg */
        font-family: 'Poppins', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: var(--transition);
        text-transform: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        white-space: nowrap;
        background: transparent !important;
        background-color: transparent !important;
    }

    .v-submenu li:last-child a {
        border-bottom: none;
    }

    .v-submenu li a:hover {
        color: var(--text-white) !important;
        background: var(--menu-hover-bg) !important;
        padding-left: 26px !important;
    }
}

/* =============================================
   GLOBAL — Prevent horizontal scroll on body
   ============================================= */
body {
    overflow-x: hidden;
}

/* =============================================
   MOBILE — Accordion Integration
   ============================================= */
@media (max-width: 1199px) {
    .v-mega-menu {
        display: none;
        padding: 0;
        list-style: none;
        background: rgba(255, 255, 255, 0.04);
    }

    .v-mega-menu.expanded {
        display: block;
    }

    .v-mega-menu>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .v-mega-menu>li>a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        text-transform: none !important;
    }

    .v-submenu, .v-submenu-3 {
        display: none;
        padding: 0 0 8px 20px;
        background: rgba(255, 255, 255, 0.02);
        list-style: none;
    }

    .v-has-submenu.expanded>.v-submenu, .v-has-submenu-3.expanded>.v-submenu-3 {
        display: block;
    }

    .v-submenu li a, .v-submenu-3 li a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 9px 20px !important;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
        color: rgba(255, 255, 255, 0.55) !important;
        text-transform: none !important;
    }

    .v-has-submenu > a > i, .v-has-submenu-3 > a > i {
        display: none !important;
    }
}