/* ================================================================
   KARAMA MOBILE MENU FIX
   Hamburger + contrast + submenu
   ================================================================ */

@media (max-width: 1100px) {

    /* ------------------------------------------------------------
       MOBILE HEADER
    ------------------------------------------------------------ */

    .final-header {
        background: #07162c !important;
    }

    .final-header-inner {
        min-height: 74px !important;
    }


    /* ------------------------------------------------------------
       HAMBURGER BUTTON
    ------------------------------------------------------------ */

    .final-mobile-button {
        width: 46px !important;
        height: 46px !important;

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

        gap: 5px !important;

        padding: 0 !important;

        background: #a7192d !important;

        border:
            1px solid
            rgba(255,255,255,.18) !important;

        border-radius: 12px !important;

        box-shadow:
            0 8px 20px
            rgba(0,0,0,.18) !important;

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

        cursor: pointer !important;
    }


    .final-mobile-button span {
        display: block !important;

        width: 23px !important;
        height: 2.5px !important;

        margin: 0 !important;

        background: #ffffff !important;

        border-radius: 999px !important;

        opacity: 1 !important;

        transform: none;

        transition:
            transform .2s ease,
            opacity .2s ease;
    }


    /* عند فتح القائمة */
    .final-mobile-button.active span:nth-child(1),
    .final-mobile-button.is-open span:nth-child(1) {
        transform:
            translateY(7.5px)
            rotate(45deg) !important;
    }

    .final-mobile-button.active span:nth-child(2),
    .final-mobile-button.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .final-mobile-button.active span:nth-child(3),
    .final-mobile-button.is-open span:nth-child(3) {
        transform:
            translateY(-7.5px)
            rotate(-45deg) !important;
    }



    /* ------------------------------------------------------------
       MOBILE MENU CONTAINER
    ------------------------------------------------------------ */

    .final-mobile-navigation {
        background: #030b19 !important;

        color: #ffffff !important;

        border-top:
            1px solid
            rgba(255,255,255,.08) !important;

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.35) !important;
    }


    .final-mobile-inner {
        background: #030b19 !important;
        color: #ffffff !important;

        padding-top: 10px !important;
        padding-bottom: 24px !important;
    }



    /* ------------------------------------------------------------
       MAIN MENU LINKS
    ------------------------------------------------------------ */

    .final-mobile-main-link,
    .final-mobile-group-button {

        width: 100% !important;

        min-height: 50px !important;

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

        color: #ffffff !important;

        background: transparent !important;

        opacity: 1 !important;

        font-weight: 800 !important;
        font-size: 15px !important;

        text-decoration: none !important;

        border: 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.20) !important;
    }


    .final-mobile-main-link:hover,
    .final-mobile-main-link.active,
    .final-mobile-group-button:hover {

        color: #ffffff !important;

        background:
            rgba(167,25,45,.15) !important;
    }



    /* ------------------------------------------------------------
       PLUS BUTTON
    ------------------------------------------------------------ */

    .final-mobile-plus {

        width: 26px !important;
        height: 26px !important;

        display: grid !important;
        place-items: center !important;

        flex: 0 0 26px !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        color: #07162c !important;

        font-size: 16px !important;
        font-weight: 900 !important;

        line-height: 1 !important;

        opacity: 1 !important;
    }



    /* ------------------------------------------------------------
       SUBMENUS
    ------------------------------------------------------------ */

    .final-mobile-submenu {

        background: #0c1930 !important;

        color: #ffffff !important;

        padding: 7px 10px !important;

        margin: 0 !important;

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

        border:
            1px solid
            rgba(255,255,255,.07) !important;

        border-top: 0 !important;
    }


    /*
     * مهم:
     * يلغي الخلفية البيضاء التي ظهرت في الصورة.
     */
    .final-mobile-submenu.open,
    .final-mobile-submenu.active,
    .final-mobile-submenu[style*="display: block"] {

        background: #0c1930 !important;
        color: #ffffff !important;
    }


    .final-mobile-submenu a {

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

        min-height: 44px !important;

        padding:
            10px 12px !important;

        margin: 0 !important;

        color: #e9eef7 !important;

        background: transparent !important;

        text-decoration: none !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        opacity: 1 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08) !important;
    }


    .final-mobile-submenu a:last-child {
        border-bottom: 0 !important;
    }


    .final-mobile-submenu a:hover,
    .final-mobile-submenu a.active {

        color: #ffffff !important;

        background:
            rgba(184,25,46,.22) !important;

        border-radius: 7px !important;
    }



    /* ------------------------------------------------------------
       PREVENT WHITE HIGHLIGHT / BAD CONTRAST
    ------------------------------------------------------------ */

    .final-mobile-navigation *,
    .final-mobile-navigation button,
    .final-mobile-navigation a {

        -webkit-tap-highlight-color:
            rgba(181,25,45,.18);
    }


    .final-mobile-group {
        background: transparent !important;
    }


    /* أي عنصر فرعي أخذ اللون الأبيض من CSS قديم */
    .final-mobile-navigation
    .final-mobile-submenu * {

        text-shadow: none !important;
    }



    /* ------------------------------------------------------------
       HEADER ACTIONS
    ------------------------------------------------------------ */

    .final-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }


    /* لا تجعل أي زر أبيض يخفي الأيقونة */
    .final-header-actions
    button:not(.final-mobile-button) {

        color: #ffffff;
    }

}



/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 520px) {

    .final-mobile-navigation {
        max-height:
            calc(100vh - 74px) !important;

        overflow-y: auto !important;

        overscroll-behavior: contain;
    }


    .final-mobile-inner {
        padding:
            8px 14px
            24px !important;
    }


    .final-mobile-main-link,
    .final-mobile-group-button {
        font-size: 14px !important;
    }

}