/* =========================================================
   FAKHRAEI CLINIC — STABLE HOVER MEGA MENU

   Existing Elementor WordPress Menu widget.
   Desktop behaviour controlled by mega-menu.js.
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1025px) {

    /* -----------------------------------------------------
       DESIGN TOKENS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing {
        --fk-menu-accent: #ff5a00;
        --fk-menu-accent-hover: #df4f00;

        --fk-menu-text: #24262b;
        --fk-menu-muted: #505258;

        --fk-panel-bg: rgba(255, 255, 255, 0.985);
        --fk-panel-border: rgba(30, 35, 48, 0.07);

        --fk-panel-radius: 20px;

        --fk-panel-shadow:
            0 24px 65px rgba(15, 23, 42, 0.12),
            0 5px 18px rgba(15, 23, 42, 0.05);

        position: relative !important;
        z-index: 1000;

        overflow: visible !important;
    }

    .elementor-widget-nav-menu.glassing,
    .elementor-widget-nav-menu.glassing * {
        box-sizing: border-box;
    }
    
    
    /* =========================================================
       MOBILE-ONLY MENU ITEMS
    ========================================================= */
    
    /* آیتم‌های مخصوص موبایل در تمام سطوح منوی دسکتاپ مخفی شوند */
    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    ul.fk-mega-root
    li.tools-menu {
        display: none !important;
    }


    /* -----------------------------------------------------
       DESKTOP CONTAINER
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main {
        position: relative !important;
        z-index: 1000;

        overflow: visible !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root {
        position: relative !important;

        display: flex !important;
        align-items: stretch;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       TOP-LEVEL ITEMS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item {
        position: relative !important;

        display: flex !important;
        align-items: stretch;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       TOP-LEVEL LINKS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item
    > a.elementor-item {
        position: relative;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        gap: 8px;

        min-height: 52px;

        white-space: nowrap;

        transition:
            color 150ms ease,
            background-color 150ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item.is-open
    > a.elementor-item,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.current-menu-item
    > a.elementor-item,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.current-menu-ancestor
    > a.elementor-item {
        color: var(--fk-menu-accent) !important;
    }


    /* -----------------------------------------------------
       REAL ARROW ELEMENT
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item-has-children
    > a.elementor-item
    > .fk-menu-arrow {
        position: relative;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 12px;
        height: 12px;

        flex: 0 0 12px;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none;

        transition: transform 170ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item-has-children
    > a.elementor-item
    > .fk-menu-arrow::before {
        content: "";

        display: block;

        width: 6px;
        height: 6px;

        margin-top: -3px;

        border-right: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;

        transform: rotate(45deg);
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item-has-children.is-open
    > a.elementor-item
    > .fk-menu-arrow {
        transform: rotate(180deg);
    }


    /*
     * هر Arrow باقی‌مانده از Elementor مخفی شود.
     * Arrow مستقل خودمان fk-menu-arrow باقی می‌ماند.
     */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    .sub-arrow {
        display: none !important;
    }


    /* -----------------------------------------------------
       SHARED TOP-LEVEL PANEL
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item-has-children
    > ul.sub-menu {
        --fk-panel-shift: 0px;

        position: absolute !important;

        top: 100% !important;
        bottom: auto !important;

        z-index: 100000 !important;

        margin: 0 !important;

        direction: rtl;
        text-align: right;

        background: var(--fk-panel-bg) !important;

        border: 1px solid var(--fk-panel-border) !important;
        border-radius: var(--fk-panel-radius) !important;

        box-shadow: var(--fk-panel-shadow) !important;

        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        height: 0;
        overflow: hidden !important;

        transform-origin: top center;

        transition:
            opacity 150ms ease,
            visibility 150ms ease,
            transform 150ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.menu-item-has-children.is-open
    > ul.sub-menu {
        height: auto;
    
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.is-open
    > ul.sub-menu {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* =====================================================
       NORMAL DROPDOWNS
    ===================================================== */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega)
    > ul.sub-menu {
        right: 0 !important;
        left: auto !important;

        display: block !important;

        width: max-content !important;
        min-width: 220px !important;
        max-width: min(290px, calc(100vw - 32px)) !important;

        padding: 9px !important;

        overflow: hidden !important;

        transform:
            translateX(var(--fk-panel-shift))
            translateY(4px);
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega).is-open
    > ul.sub-menu {
        transform:
            translateX(var(--fk-panel-shift))
            translateY(0);
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega)
    > ul.sub-menu
    > li {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega)
    > ul.sub-menu
    > li
    > a.elementor-sub-item {
        display: flex !important;
        align-items: center;

        width: 100% !important;
        min-height: 40px;

        margin: 0 !important;
        padding: 8px 11px !important;

        color: var(--fk-menu-text) !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 9px !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.7 !important;

        white-space: normal !important;
        text-decoration: none !important;

        transition:
            color 140ms ease,
            background-color 140ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega)
    > ul.sub-menu
    > li
    > a.elementor-sub-item:hover,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li:not(.mega)
    > ul.sub-menu
    > li
    > a.elementor-sub-item:focus-visible {
        color: var(--fk-menu-accent) !important;
        background: rgba(255, 90, 0, 0.06) !important;
    }


    /* =====================================================
       MEGA PANEL SETTINGS
    ===================================================== */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega {
        --fk-mega-columns: 3;
        --fk-mega-width: 760px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-1 {
        --fk-mega-columns: 1;
        --fk-mega-width: 320px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-2 {
        --fk-mega-columns: 2;
        --fk-mega-width: 570px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-3 {
        --fk-mega-columns: 3;
        --fk-mega-width: 760px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-4 {
        --fk-mega-columns: 4;
        --fk-mega-width: 920px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-5 {
        --fk-mega-columns: 5;
        --fk-mega-width: 1080px;
    }


    /* -----------------------------------------------------
       MEGA PANEL
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu {
        right: 50% !important;
        left: auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                var(--fk-mega-columns),
                minmax(0, 1fr)
            ) !important;

        align-items: start;

        width: min(
            var(--fk-mega-width),
            calc(100vw - 32px)
        ) !important;

        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;

        max-height: min(
            610px,
            calc(100vh - 130px)
        );

        padding: 24px 26px 26px !important;

        column-gap: clamp(
            26px,
            2.5vw,
            42px
        ) !important;

        row-gap: 26px !important;

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

        overscroll-behavior: contain;

        transform:
            translateX(
                calc(50% + var(--fk-panel-shift))
            )
            translateY(4px);
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.is-open
    > ul.sub-menu {
        transform:
            translateX(
                calc(50% + var(--fk-panel-shift))
            )
            translateY(0);
    }


    /* -----------------------------------------------------
       MEGA COLUMNS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li {
        position: static !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       COLUMN HEADINGS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > a.elementor-sub-item {
        display: inline-flex !important;
        align-items: center;

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

        margin: 0 0 9px !important;
        padding: 0 !important;

        color: var(--fk-menu-accent) !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.8 !important;

        white-space: normal !important;
        text-decoration: none !important;

        transition:
            color 140ms ease,
            opacity 140ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > a.elementor-sub-item:hover,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > a.elementor-sub-item:focus-visible {
        color: var(--fk-menu-accent-hover) !important;
        opacity: 0.86;
    }


    /* -----------------------------------------------------
       NESTED LISTS: ALWAYS STATIC
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: flex !important;
        flex-direction: column;
        align-items: stretch;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;

        animation: none !important;
        transition: none !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu
    > li {
        position: static !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       INNER LINKS
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu
    > li
    > a.elementor-sub-item {
        display: flex !important;
        align-items: center;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px;

        margin: 0 !important;
        padding: 5px 0 !important;

        color: var(--fk-menu-muted) !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.75 !important;

        white-space: normal !important;
        text-decoration: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none;

        transition:
            color 140ms ease,
            transform 140ms ease;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu
    > li
    > a.elementor-sub-item:hover,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu
    > li
    > a.elementor-sub-item:focus-visible {
        color: var(--fk-menu-accent) !important;
        transform: none;
    }


    /* -----------------------------------------------------
       DIRECT ITEMS WITHOUT CHILDREN
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li:not(.menu-item-has-children)
    > a.elementor-sub-item {
        display: flex !important;

        width: 100% !important;
        min-height: 34px;

        margin: 0 !important;
        padding: 5px 0 !important;

        color: var(--fk-menu-muted) !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.75 !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li:not(.menu-item-has-children)
    > a.elementor-sub-item:hover {
        color: var(--fk-menu-accent) !important;
        transform: none;
    }


    /* -----------------------------------------------------
       ACCESSIBILITY
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    a:focus-visible {
        outline: 2px solid rgba(255, 90, 0, 0.72) !important;
        outline-offset: 3px;
    }


    /* -----------------------------------------------------
       SCROLLBAR
    ----------------------------------------------------- */

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu::-webkit-scrollbar {
        width: 6px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu::-webkit-scrollbar-thumb {
        background: rgba(36, 38, 43, 0.2);
        border-radius: 999px;
    }
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (min-width: 1025px) and (max-width: 1199px) {

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega.cols-4 {
        --fk-mega-width: 860px;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu {
        padding: 22px 23px 24px !important;
        column-gap: 24px !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > a.elementor-sub-item {
        font-size: 14px !important;
    }

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.mega
    > ul.sub-menu
    > li
    > ul.sub-menu
    > li
    > a.elementor-sub-item {
        font-size: 13px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li
    > ul.sub-menu,

    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    a,

    .elementor-widget-nav-menu.glassing
    .fk-menu-arrow {
        transition: none !important;
    }
}


/* =========================================================
   MOBILE-ONLY MENU ITEMS
   Must remain at the end of this file
========================================================= */

@media (min-width: 1025px) {

    body
    .elementor-widget-nav-menu.glassing
    .elementor-nav-menu--main
    > ul.fk-mega-root
    > li.tools-menu.menu-item {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}