/* =========================================================
   ContestBot Desktop Mega Menu - Stable 3 Column Version
   Fixes issue where hovering over the panel reverts it back
   to the old vertical dropdown format.
========================================================= */

@media (min-width: 901px) {

    /* Prevent parent containers from clipping the fixed mega panel */
    .cm-nav,
    .cm-nav-v3,
    .cm-nav-top,
    .cm-menu,
    .cm-drop,
    .cm-app,
    body {
        overflow: visible !important;
    }

    /* Mega dropdown should not behave like the old small dropdown */
    .cm-drop-mega {
        position: static !important;
    }

    /*
       Critical fix:
       Older CSS likely has something like:
       .cm-drop:hover .cm-drop-panel { display:block; }
       This overrides that behavior for mega menus.
    */
    .cm-drop-mega:hover > .cm-drop-panel,
    .cm-drop-mega:hover > .cm-mega-panel {
        display: none !important;
    }

    .cm-drop-mega.cm-drop-open:hover > .cm-mega-panel,
    .cm-drop-mega.cm-drop-open > .cm-mega-panel {
        display: grid !important;
    }

    .cm-drop-mega > .cm-drop-panel.cm-mega-panel,
    .cm-drop-mega > .cm-mega-panel {
        display: none !important;
        position: fixed !important;

        top: var(--cm-mega-top, 154px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: min(1180px, calc(100vw - 48px)) !important;
        max-width: 1180px !important;
        max-height: calc(100vh - var(--cm-mega-top, 154px) - 28px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 999999 !important;

        padding: 18px !important;
        border-radius: 22px !important;
        background: #0d172b !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        box-shadow: 0 34px 90px rgba(0, 0, 0, .55) !important;

        grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .cm-drop-mega.cm-drop-open > .cm-drop-panel.cm-mega-panel,
    .cm-drop-mega.cm-drop-open > .cm-mega-panel {
        display: grid !important;
    }

    /*
       Critical fix:
       Force each menu column to stay as a column inside the 3-column grid.
       This prevents the old dropdown CSS from making everything full-width.
    */
    .cm-drop-mega .cm-menu-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .cm-drop-mega .cm-menu-col .cm-drop-heading {
        display: block !important;
        color: #ffd000 !important;
        font-size: 13px !important;
        font-weight: 1000 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
        margin: 0 0 4px !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
    }

    .cm-drop-mega .cm-menu-col a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-height: 46px !important;

        border-radius: 14px !important;
        background: rgba(255, 255, 255, .07) !important;
        color: #ffffff !important;

        padding: 12px 16px !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .cm-drop-mega .cm-menu-col a:hover {
        background: rgba(255, 208, 0, .18) !important;
        color: #ffd000 !important;
    }

    .cm-drop-mega .cm-mega-panel::-webkit-scrollbar {
        width: 10px;
    }

    .cm-drop-mega .cm-mega-panel::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .22);
        border-radius: 999px;
    }
}

/* =========================================================
   Mobile / Tablet Reset
   Keeps normal stacked dropdown behavior on mobile.
========================================================= */

@media (max-width: 900px) {
    .cm-drop-mega {
        position: relative !important;
    }

    .cm-drop-mega > .cm-drop-panel.cm-mega-panel,
    .cm-drop-mega > .cm-mega-panel {
        position: static !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        display: none !important;
    }

    .cm-drop-mega.cm-drop-open > .cm-drop-panel.cm-mega-panel,
    .cm-drop-mega.cm-drop-open > .cm-mega-panel {
        display: block !important;
    }

    .cm-drop-mega .cm-menu-col {
        display: block !important;
    }
}

/* =========================================================
   RewardBot Mobile Menu Hard Reset
   Backup rules for /includes/menu.php hard overlay.
========================================================= */
@media (max-width: 900px) {
    #cmNav.cm-nav-open #cmMenu.cm-menu {
        display: grid !important;
    }

    #cmNav #cmMenu.cm-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: var(--cm-mobile-menu-top, 112px) !important;
        max-height: calc(100vh - var(--cm-mobile-menu-top, 112px) - 14px) !important;
        overflow-y: auto !important;
        z-index: 10000001 !important;
    }

    #cmNav #cmMenu .cm-drop-panel,
    #cmNav #cmMenu .cm-mega-panel,
    #cmNav #cmMenu .cm-eventbot-panel,
    #cmNav #cmMenu .cm-offerbot-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
    }
}