/* =========================================================
   REALDEEN MOBILE HOME + HEADER V3
   Mobile only.
   ========================================================= */

.rdg-mobile-actions-v3 {
    display: none;
}

@media (max-width: 767.98px) {

    /* =====================================================
       TOPICS INDEX — SHOW ONLY FOUR + VIEW MORE
       ===================================================== */

    #home_quran_topics
    .CallToActionButtons_buttonsContainer__V05v8.holy_quran_topic {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #home_quran_topics
    .CallToActionButtons_buttonsContainer__V05v8.holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(n+5) {
        display: none !important;
    }

    #home_quran_topics
    .CallToActionButtons_buttonsContainer__V05v8.holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(-n+4) {
        display: inline-flex !important;
    }

    #home_quran_topics
    .rd-home-topics-view-more-grid-v2 {
        grid-column: 1 / -1 !important;
        justify-self: end !important;
        align-self: center !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;

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

        margin: 2px 0 0 !important;
        padding: 8px 2px 2px 12px !important;

        color: #7bd6dc !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;

        text-decoration: none !important;
    }

    #home_quran_topics
    .rd-home-topics-view-more-grid-v2 svg {
        display: block !important;
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 13px !important;
    }

    #home_quran_topics
    #qgj-widget {
        padding-bottom: 14px !important;
    }


    /* =====================================================
       MOBILE HEADER — NEW RIGHT-SIDE QUICK CONTROLS
       ===================================================== */

    #rdgGlobalHeader .rdg-header-right {
        position: relative !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    /* Hide old desktop/right-side controls only on mobile.
       The hamburger/drawer on the left is untouched. */
    #rdgGlobalHeader
    .rdg-header-right
    > :not(.rdg-mobile-actions-v3) {
        display: none !important;
    }

    #rdgGlobalHeader .rdg-mobile-actions-v3 {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;

        width: auto !important;
        min-width: 0 !important;

        z-index: 1203 !important;
    }


    /* LOGIN */

    #rdgGlobalHeader .rdg-mobile-login-v3 {
        min-height: 44px !important;

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

        padding: 0 15px !important;

        color: #f5fbfc !important;
        background:
            linear-gradient(
                180deg,
                rgba(29, 54, 63, .96),
                rgba(19, 40, 48, .98)
            ) !important;

        border:
            1px solid rgba(120, 204, 211, .24) !important;

        border-radius: 11px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 7px 18px rgba(0,0,0,.10) !important;

        font-size: 13px !important;
        font-weight: 750 !important;
        line-height: 1 !important;

        white-space: nowrap !important;
        text-decoration: none !important;
    }

    #rdgGlobalHeader .rdg-mobile-login-v3 svg {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
    }


    /* LOGGED-IN ACCOUNT CHIP */

    #rdgGlobalHeader .rdg-mobile-account-v3 {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;

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

        padding: 0 !important;

        color: #07373c !important;
        background:
            linear-gradient(
                145deg,
                #86dbe0,
                #62bec6
            ) !important;

        border:
            1px solid rgba(173,233,237,.45) !important;

        border-radius: 11px !important;

        font-size: 13px !important;
        font-weight: 850 !important;

        text-decoration: none !important;
    }


    /* ELLIPSIS */

    #rdgGlobalHeader .rdg-mobile-more-wrap-v3 {
        position: relative !important;
        display: block !important;
    }

    #rdgGlobalHeader .rdg-mobile-more-button-v3 {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;

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

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

        color: #b9ccd0 !important;
        background:
            rgba(29, 48, 56, .82) !important;

        border:
            1px solid rgba(118, 181, 188, .18) !important;

        border-radius: 11px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025) !important;

        cursor: pointer !important;
    }

    #rdgGlobalHeader .rdg-mobile-more-button-v3 svg {
        width: 21px !important;
        height: 21px !important;
    }


    /* DROPDOWN */

    #rdgGlobalHeader .rdg-mobile-more-menu-v3 {
        position: absolute !important;

        top: calc(100% + 10px) !important;
        right: 0 !important;

        width: min(250px, calc(100vw - 28px)) !important;

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

        box-sizing: border-box !important;

        color: #eaf3f4 !important;
        background:
            linear-gradient(
                180deg,
                rgba(23, 42, 50, .995),
                rgba(15, 31, 38, .995)
            ) !important;

        border:
            1px solid rgba(115, 195, 202, .20) !important;

        border-radius: 13px !important;

        box-shadow:
            0 18px 42px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.028) !important;

        z-index: 9999 !important;
    }

    #rdgGlobalHeader .rdg-mobile-more-menu-v3[hidden] {
        display: none !important;
    }

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3
    a,

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3
    button {
        width: 100% !important;
        min-height: 43px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

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

        box-sizing: border-box !important;

        color: #dce9eb !important;
        background: transparent !important;

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

        font: inherit !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;

        text-align: left !important;
        text-decoration: none !important;

        cursor: pointer !important;
    }

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3
    a:hover,

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3
    button:hover {
        color: #ffffff !important;
        background: rgba(94, 181, 189, .09) !important;
    }

    #rdgGlobalHeader
    .rdg-mobile-more-menu-v3
    svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
        color: #82dbe0 !important;
    }

    #rdgGlobalHeader .rdg-mobile-more-divider-v3 {
        height: 1px !important;
        margin: 6px 5px !important;
        background: rgba(120, 181, 188, .13) !important;
    }

    #rdgGlobalHeader .rdg-mobile-create-v3 {
        color: #083940 !important;
        background:
            linear-gradient(
                145deg,
                #8adce1,
                #65c2c9
            ) !important;
        font-weight: 800 !important;
    }

    #rdgGlobalHeader
    .rdg-mobile-create-v3
    svg {
        color: #0d4a51 !important;
    }


    /* Keep the logo balanced with Login + ... */
    #rdgGlobalHeader .rdg-brand {
        max-width: calc(100vw - 244px) !important;
    }

    #rdgGlobalHeader .rdg-brand-name {
        font-size: 18px !important;
    }
}


@media (max-width: 390px) {

    #rdgGlobalHeader .rdg-mobile-login-v3 {
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    #rdgGlobalHeader .rdg-brand {
        max-width: calc(100vw - 222px) !important;
    }

    #rdgGlobalHeader .rdg-brand-name {
        font-size: 17px !important;
    }
}