/* =========================================================
   REALDEEN — SURAH READER DESKTOP GEOMETRY V1

   Geometry only.
   Theme / colors intentionally untouched.

   Structure:
   LEFT NAV COLUMN | MAIN QURAN READER
   ========================================================= */


@media (min-width: 1180px) {

    :root {
        /*
         * Matches the current visual width of the desktop
         * Surah/Ayah navigation without hard-locking one
         * screen size.
         */
        --rd-surah-nav-column:
            calc(10 * var(--spacing-mega));

        /*
         * Deliberate readable Quran canvas inside the
         * remaining reader column.
         */
        --rd-surah-reading-max:
            1240px;

        --rd-surah-reading-gutter:
            36px;
    }


    /* =====================================================
       SECONDARY SURAH BAR
       Al-Baqarah | Surah 2

       Replace generic 50 / 50 geometry with the same
       conceptual columns used by the reader below.
       ===================================================== */

    #progress_bar_section
    .ContextMenu_sectionsContainer__x91pr {
        width:
            100% !important;

        display:
            grid !important;

        grid-template-columns:
            var(--rd-surah-nav-column)
            minmax(0, 1fr) !important;

        align-items:
            center !important;

        margin:
            0 !important;

        padding:
            0 !important;

        box-sizing:
            border-box !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq {
        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        flex:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq
    .ContextMenu_row__3Hf3R {
        width:
            100% !important;

        min-width:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        margin:
            0 !important;

        padding:
            0 22px !important;

        box-sizing:
            border-box !important;
    }


    /*
     * The right-side markup contains an empty first <p>.
     * Remove it from the geometry so "Surah 2" is truly
     * centered inside the main reader column.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R
    > .ContextMenu_alignEnd__4YQyB:first-child {
        display:
            none !important;
    }


    #progress_bar_section
    .ContextMenu_alignStart__D4EZD,

    #progress_bar_section
    .ContextMenu_alignEnd__4YQyB {
        width:
            auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        text-align:
            center !important;
    }


    #progress_bar_section
    #quran_sidebar_show_hide {
        justify-content:
            center !important;
    }


    /* =====================================================
       MAIN READER
       Preserve existing outer/sidebar behavior.
       Only normalize the Quran content canvas inside it.
       ===================================================== */

    #surah_detail_right_section.QuranReader_container__8c0FU {
        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    #surah_detail_right_section
    > .QuranReader_infiniteScroll__IAfrZ {
        width:
            min(
                calc(100% - (2 * var(--rd-surah-reading-gutter))),
                var(--rd-surah-reading-max)
            ) !important;

        max-width:
            var(--rd-surah-reading-max) !important;

        min-width:
            0 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;
    }


    /* =====================================================
       CHAPTER HEADER + VERSES
       Ensure they obey the same inner reader canvas.
       ===================================================== */

    #surah_detail_right_section
    .QuranReader_infiniteScroll__IAfrZ
    > * {
        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    #surah_detail_right_section
    .TranslationViewCell_cellContainer__rhs1_ {
        width:
            100% !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }

}


/* =========================================================
   rd-surah-topbar-left-align-v2

   Al-Baqarah follows sidebar content gutter.
   Surah number remains centered over reader.
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_row__3Hf3R {
        justify-content:
            flex-start !important;

        padding-left:
            32px !important;

        padding-right:
            20px !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_alignStart__D4EZD {
        width:
            auto !important;

        margin:
            0 !important;

        text-align:
            left !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R {
        justify-content:
            center !important;
    }

}


/* =========================================================
   rd-surah-topbar-row-v3

   Correct original column flex direction.
   Match Al-Baqarah with sidebar's native content gutter.
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq
    .ContextMenu_row__3Hf3R {

        flex-direction:
            row !important;

        align-items:
            center !important;
    }


    /* LEFT — exact sidebar gutter */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_row__3Hf3R {

        justify-content:
            flex-start !important;

        padding-left:
            var(--spacing-large) !important;

        padding-right:
            var(--spacing-large) !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_surahName__9ovH0 {

        margin:
            0 !important;

        text-align:
            left !important;
    }


    /* RIGHT — keep Surah number centered over reader */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R {

        justify-content:
            center !important;

        padding-left:
            var(--spacing-large) !important;

        padding-right:
            var(--spacing-large) !important;
    }

}


/* =========================================================
   rd-surah-brand-align-v4

   Al-Baqarah:
   - vertically centered inside grey Surah bar
   - left edge aligned directly below REALDEEN.COM "R"
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section {
        --rd-surah-brand-left:
            var(--spacing-large);
    }


    #progress_bar_section
    .ContextMenu_sectionsContainer__x91pr {

        position:
            relative !important;

        min-height:
            100% !important;

        height:
            100% !important;

        padding-top:
            0 !important;

        padding-bottom:
            0 !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child {

        position:
            static !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_row__3Hf3R {

        position:
            static !important;

        height:
            100% !important;

        min-height:
            100% !important;

        padding:
            0 !important;

        margin:
            0 !important;
    }


    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_surahName__9ovH0 {

        position:
            absolute !important;

        left:
            var(--rd-surah-brand-left) !important;

        top:
            50% !important;

        transform:
            translateY(-50%) !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        line-height:
            1 !important;

        text-align:
            left !important;

        white-space:
            nowrap !important;
    }


    /*
     * Keep Surah 2 centered over reader.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R {

        height:
            100% !important;

        align-items:
            center !important;

        justify-content:
            center !important;
    }

}


/* =========================================================
   rd-surah-labels-over-inputs-v7

   Desktop final secondary-bar geometry:

   Al-Baqarah
       ↓
   Search surah

   Surah 2
       ↓
   Verse

   Positions are measured from the actual rendered inputs.
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section
    .ContextMenu_sectionsContainer__x91pr {

        position:
            relative !important;

        width:
            100% !important;

        height:
            100% !important;

        min-height:
            100% !important;

        padding-top:
            0 !important;

        padding-bottom:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Old half-section geometry must no longer control
     * where the two labels appear.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq,

    #progress_bar_section
    .ContextMenu_row__3Hf3R {

        position:
            static !important;
    }


    /*
     * AL-BAQARAH
     * centered directly above Search surah input.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:first-child
    .ContextMenu_surahName__9ovH0 {

        position:
            absolute !important;

        left:
            var(--rd-surah-title-x, 110px) !important;

        right:
            auto !important;

        top:
            50% !important;

        bottom:
            auto !important;

        transform:
            translate(-50%, -50%) !important;

        width:
            max-content !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        text-align:
            center !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }


    /*
     * Remove the unused empty paragraph in the right half.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R
    > .ContextMenu_alignEnd__4YQyB:first-child {

        display:
            none !important;
    }


    /*
     * SURAH 2
     * centered directly above Verse input.
     */

    #progress_bar_section
    .ContextMenu_halfSection__vu5Iq:last-child
    .ContextMenu_row__3Hf3R
    > .ContextMenu_alignEnd__4YQyB:last-child {

        position:
            absolute !important;

        left:
            var(--rd-surah-number-x, 270px) !important;

        right:
            auto !important;

        top:
            50% !important;

        bottom:
            auto !important;

        transform:
            translate(-50%, -50%) !important;

        width:
            max-content !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        text-align:
            center !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }

}


/* =========================================================
   rd-hide-surah-topbar-labels-v9
   Remove chapter name + Surah number from desktop grey bar.
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section
    .ContextMenu_surahName__9ovH0 {

        display:
            none !important;
    }


    #progress_bar_section
    .ContextMenu_primaryInfo__QL1fr {

        display:
            none !important;
    }

}


/* =========================================================
   rd-remove-surah-topbar-final-v11
   Final desktop removal of redundant Surah information bar.
   ========================================================= */

@media (min-width:1180px) {

    #progress_bar_section {
        display:
            none !important;

        visibility:
            hidden !important;

        position:
            absolute !important;

        width:
            0 !important;

        height:
            0 !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        max-width:
            0 !important;

        max-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        overflow:
            hidden !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;
    }

}