/*
========================================================================
 BPP_MOBILE_APP_NAV_V2_1
 Dashboard/profile trigger + live Chat badge + notification bell
========================================================================
*/


/* ========================================================================
   BPP_MOBILE_NOTIFICATION_DESKTOP_GUARD_V2_1_1

   The notification panel is mobile/tablet UI.
   Keep it physically out of desktop document flow even if JS creates it.
   ======================================================================== */

#bpp-mobile-notification-panel-v21 {
    display: none !important;
}

@media (max-width:1100px) {

    .rpg-gmh1__account-toggle,
    .rpg-gmh1__notifications,
    #bpp-global-mobile-bottom-nav .bpp-gmbn-item--chat {
        position:relative !important;
    }

    .bpp-mobile-app-badge-v21 {
        position:absolute !important;
        z-index:20 !important;

        display:none !important;
        align-items:center !important;
        justify-content:center !important;

        min-width:17px !important;
        height:17px !important;

        padding:0 4px !important;

        border:2px solid #fff !important;
        border-radius:999px !important;

        background:#e53935 !important;
        color:#fff !important;

        font-size:9px !important;
        font-weight:850 !important;
        line-height:1 !important;

        box-sizing:border-box !important;
        pointer-events:none !important;
    }

    .bpp-mobile-app-badge-v21.has-count {
        display:inline-flex !important;
    }

    .rpg-gmh1__notifications
    > .bpp-mobile-app-badge-v21 {
        top:-4px !important;
        right:-4px !important;
    }

    #bpp-global-mobile-bottom-nav
    .bpp-gmbn-item--chat
    > .bpp-mobile-app-badge-v21 {
        top:0 !important;
        left:calc(50% + 8px) !important;
    }


    #bpp-mobile-notification-panel-v21 {
        position:fixed !important;

        top:76px !important;
        left:12px !important;
        right:12px !important;

        z-index:2147483000 !important;

        display:none !important;

        max-width:430px !important;
        margin-left:auto !important;

        padding:8px !important;

        border:1px solid rgba(28,57,44,.12) !important;
        border-radius:18px !important;

        background:rgba(255,255,255,.995) !important;

        box-shadow:
            0 20px 60px
            rgba(18,43,32,.22) !important;

        backdrop-filter:blur(18px) !important;
        -webkit-backdrop-filter:blur(18px) !important;
    }

    #bpp-mobile-notification-panel-v21.is-open {
        display:block !important;
    }

    .bpp-mobile-notification-v21__head {
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        min-height:42px !important;

        padding:2px 7px 7px !important;
    }

    .bpp-mobile-notification-v21__head strong {
        color:#17241f !important;
        font-size:15px !important;
        font-weight:850 !important;
    }

    .bpp-mobile-notification-v21__close {
        width:34px !important;
        height:34px !important;

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

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

        background:#f2f6f4 !important;
        color:#46544e !important;

        font-size:20px !important;
        cursor:pointer !important;
    }

    .bpp-mobile-notification-v21__item {
        display:grid !important;

        grid-template-columns:
            42px minmax(0,1fr) auto !important;

        align-items:center !important;

        gap:10px !important;

        min-height:68px !important;

        padding:10px !important;

        border:1px solid #e3eae6 !important;
        border-radius:14px !important;

        background:#f8faf9 !important;

        color:inherit !important;
        text-decoration:none !important;
    }

    .bpp-mobile-notification-v21__icon {
        width:42px !important;
        height:42px !important;

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

        border-radius:13px !important;

        background:#eaf6f0 !important;
        color:#078f54 !important;
    }

    .bpp-mobile-notification-v21__icon svg {
        width:22px !important;
        height:22px !important;

        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9 !important;

        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    .bpp-mobile-notification-v21__copy {
        min-width:0 !important;
    }

    .bpp-mobile-notification-v21__copy strong {
        display:block !important;

        color:#1d2a24 !important;

        font-size:13px !important;
        font-weight:820 !important;
    }

    .bpp-mobile-notification-v21__copy small {
        display:block !important;

        margin-top:3px !important;

        overflow:hidden !important;

        color:#74817b !important;

        font-size:11px !important;
        line-height:1.3 !important;

        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .bpp-mobile-notification-v21__count {
        min-width:27px !important;
        height:27px !important;

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

        padding:0 7px !important;

        border-radius:999px !important;

        background:#078f54 !important;
        color:#fff !important;

        font-size:10px !important;
        font-weight:850 !important;
    }

    .bpp-mobile-notification-v21__foot {
        padding:8px 7px 3px !important;

        color:#84908a !important;

        font-size:10px !important;
        line-height:1.35 !important;
    }

}