/* =========================================================
   REALDEEN MOBILE SURAH READER — STICKY HEADER V1
   Mobile Surah pages only
   ========================================================= */

@media (max-width: 767.98px) {


    /* =====================================================
       MAIN REALDEEN HEADER STAYS VISIBLE WHILE READING
       ===================================================== */

    #rdgGlobalHeader {

        position:
            sticky !important;

        position:
            -webkit-sticky !important;

        top:
            0 !important;

        inset-block-start:
            0 !important;

        z-index:
            12050 !important;

        width:
            100% !important;

        transform:
            none !important;

        isolation:
            isolate !important;
    }


    #rdgGlobalHeader
    .rdg-header-inner {

        position:
            relative !important;

        z-index:
            2 !important;
    }


    /*
     * Keep drawer / mobile ... menu above Quran content.
     */

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3 {

        z-index:
            12100 !important;
    }



    /* =====================================================
       REMOVE OLD GREY SURAH CONTEXT BAR
       This is the strip visible above the Ayahs.
       ===================================================== */

    #progress_bar_section,

    .ContextMenu_container__M7_N3
    #progress_bar_section {

        display:
            none !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        width:
            0 !important;

        height:
            0 !important;

        min-height:
            0 !important;

        max-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        transform:
            none !important;

        pointer-events:
            none !important;

        overflow:
            hidden !important;
    }


    #progress_bar_section::before,

    #progress_bar_section::after {

        display:
            none !important;

        content:
            none !important;

        width:
            0 !important;

        height:
            0 !important;
    }



    /* =====================================================
       REMOVE ANY SPACE RESERVED FOR THAT OLD BAR
       ===================================================== */

    .ReadingPreferenceSwitcher_contextMenuContainer__RALtU {

        margin:
            0 !important;

        padding:
            0 !important;

        min-height:
            0 !important;

        height:
            auto !important;
    }


    .ContextMenu_visibleContainer__KnWDa,

    .ContextMenu_expandedContainer__W_YZP {

        min-height:
            0 !important;
    }



    /* =====================================================
       FIRST AYAH STARTS CLEANLY AFTER SURAH INTRO
       ===================================================== */

    #right_list_verse_section {

        margin-top:
            0 !important;

        padding-top:
            0 !important;

        border-top:
            0 !important;
    }


    #right_list_verse_section
    > .list_ayat:first-child {

        margin-top:
            0 !important;
    }



    /* =====================================================
       REMOVE THE EXTRA GREY/TOP DIVIDER AROUND AYAH AREA
       ===================================================== */

    #right_list_verse_section::before,

    #right_list_verse_section::after {

        display:
            none !important;

        content:
            none !important;
    }


    .ChapterHeader_bismillahContainer__EXMlw
    + #right_list_verse_section {

        border-top:
            0 !important;
    }

}


/* =========================================================
   MOBILE SURAH FIXED GLOBAL HEADER V2
   ========================================================= */

@media (max-width: 767.98px) {


    /* -----------------------------------------------------
       FORCE MAIN SITE HEADER TO REMAIN ON SCREEN
       ----------------------------------------------------- */

    html body #rdgGlobalHeader,

    html body nav.Navbar_container__vShO1.rd-header-v1 {

        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        inset-block-start:
            0 !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        transform:
            none !important;

        translate:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        display:
            block !important;

        z-index:
            2147483000 !important;

        isolation:
            isolate !important;

        backface-visibility:
            hidden !important;

        -webkit-backface-visibility:
            hidden !important;

        will-change:
            auto !important;
    }


    /*
     * Keep the actual header contents above Quran content.
     */

    html body #rdgGlobalHeader
    .rdg-header-inner,

    html body #rdgGlobalHeader
    .rdg-header-shell,

    html body
    nav.Navbar_container__vShO1.rd-header-v1
    .rd-header-shell-v1 {

        position:
            relative !important;

        z-index:
            2147483001 !important;
    }



    /* -----------------------------------------------------
       RESERVE HEADER HEIGHT
       Existing navbar placeholder if present.
       ----------------------------------------------------- */

    html body
    .Navbar_emptySpacePlaceholder__azPCk {

        display:
            block !important;

        height:
            86px !important;

        min-height:
            86px !important;

        max-height:
            86px !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }



    /* -----------------------------------------------------
       HEADER DRAWER / ... MENU MUST OPEN ABOVE EVERYTHING
       ----------------------------------------------------- */

    html body
    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3,

    html body
    #rdgGlobalDrawer,

    html body
    .rdg-drawer-v3 {

        z-index:
            2147483640 !important;
    }



    /* -----------------------------------------------------
       REMOVE OLD GREY QURAN CONTEXT / PROGRESS STRIP
       ----------------------------------------------------- */

    html body
    #progress_bar_section {

        display:
            none !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        position:
            absolute !important;

        width:
            0 !important;

        height:
            0 !important;

        min-height:
            0 !important;

        max-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        overflow:
            hidden !important;

        pointer-events:
            none !important;
    }


    html body
    #progress_bar_section::before,

    html body
    #progress_bar_section::after {

        display:
            none !important;

        content:
            none !important;

        height:
            0 !important;

        width:
            0 !important;

        background:
            transparent !important;
    }

}