/* ============================================================
   1. MEGA MENU CONTAINER
   - Handles visibility, positioning, and fade effects.
   - Ensure your Section has the class: dm-mega-menu
============================================================ */
.dm-mega-menu {
    display: none !important;
    opacity: 0 !important;
    transition: opacity 100ms ease !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

.dm-mega-menu.show {
    display: block !important;
    opacity: 1 !important;
}

/* ============================================================
   1b. STICKY / FIXED MODE
   - JavaScript adds .dm-mm-fixed + inline top/left/width
     when Divi's sticky header (#et-fixed-header) is active.
   - `top` pixel value is always written as an inline style
     by the JS engine so it tracks live header height on scroll.
============================================================ */
.dm-mega-menu.dm-mm-fixed {
    position: fixed !important;
    /* top, left, width → managed by plugin-script.js */
}

header.est-fixe {
    position: sticky;
    top: 0;
    z-index: 99999;
}

/* ============================================================
   2. LAYOUT & ALIGNMENT
============================================================ */
.dm-mega-menu .inner-mm {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   3. ANIMATION SETUP (INITIAL STATE)
============================================================ */
.dm-mega-menu .inner-mm .left-column,
.dm-mega-menu .inner-mm .top-1,
.dm-mega-menu .inner-mm .top-2,
.dm-mega-menu .inner-mm .top-3,
.dm-mega-menu .inner-mm .bottom-1,
.dm-mega-menu .inner-mm .bottom-2,
.dm-mega-menu .inner-mm .bottom-3 {
    opacity: 0;
    transform: translateY(30px);
}

/* ============================================================
   4. ANIMATION TIMING (STAGGER EFFECT)
============================================================ */
.dm-mega-menu.show .inner-mm .left-column {
    animation: slideUp 600ms ease forwards;
    animation-delay: 0ms;
}

.dm-mega-menu.show .inner-mm .top-1 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 100ms;
}

.dm-mega-menu.show .inner-mm .top-2 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 200ms;
}

.dm-mega-menu.show .inner-mm .top-3 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 300ms;
}

.dm-mega-menu.show .inner-mm .bottom-1 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 400ms;
}

.dm-mega-menu.show .inner-mm .bottom-2 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 500ms;
}

.dm-mega-menu.show .inner-mm .bottom-3 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 600ms;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   5. VISUAL BUILDER VISIBILITY (Divi editor)
============================================================ */
body.et-fb .dm-mega-menu,
body.et-pb-preview .dm-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

body.et-fb .dm-mega-menu .inner-mm .left-column,
body.et-fb .dm-mega-menu .inner-mm .top-1,
body.et-fb .dm-mega-menu .inner-mm .top-2,
body.et-fb .dm-mega-menu .inner-mm .top-3,
body.et-fb .dm-mega-menu .inner-mm .bottom-1,
body.et-fb .dm-mega-menu .inner-mm .bottom-2,
body.et-fb .dm-mega-menu .inner-mm .bottom-3 {
    opacity: 1 !important;
    transform: none !important;
}