/*
|--------------------------------------------------------------------------
| EliteCover Role Mobile Navigation
|--------------------------------------------------------------------------
| Separate UI:
| Public Website
| Customer Portal
| Admin uses its own verification quick nav in app.php
|--------------------------------------------------------------------------
*/

.role-mobile-nav,
.role-install-sheet,
.customer-quick-sheet{
    display:none;
}

@media(max-width:991.98px){

    body{
        padding-bottom:
            calc(
                96px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

    .role-mobile-nav{
        position:fixed;
        left:10px;
        right:10px;
        bottom:
            calc(
                9px
                + env(
                    safe-area-inset-bottom
                )
            );
        z-index:99990;

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr)
            78px
            minmax(0,1fr)
            minmax(0,1fr);

        align-items:center;

        min-height:72px;

        padding:7px 6px;

        border:
            1px solid
            rgba(7,87,216,.10);

        border-radius:24px;

        background:
            rgba(
                255,
                255,
                255,
                .97
            );

        box-shadow:
            0 18px 50px
            rgba(4,28,72,.22);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        animation:
            roleNavRise
            .35s
            ease-out;
    }

    @keyframes roleNavRise{
        from{
            opacity:0;
            transform:
                translateY(30px);
        }

        to{
            opacity:1;
            transform:
                translateY(0);
        }
    }

    .role-nav-item{
        position:relative;

        display:flex !important;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:4px;

        min-width:0;
        min-height:54px;

        padding:7px 2px;

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

        color:#69768a !important;

        background:
            transparent !important;

        text-decoration:
            none !important;

        font-family:inherit;

        cursor:pointer;

        transition:
            transform .18s ease,
            color .18s ease,
            background .18s ease;
    }

    .role-nav-item:active{
        transform:
            scale(.91);
    }

    .role-nav-item i{
        font-size:21px;
        line-height:1;
    }

    .role-nav-item span{
        overflow:hidden;

        max-width:100%;

        font-size:10px;
        font-weight:800;

        line-height:1.1;

        white-space:nowrap;

        text-overflow:
            ellipsis;
    }

    .role-nav-item.active{
        color:
            var(
                --role-nav-primary,
                #0757d8
            ) !important;

        background:
            color-mix(
                in srgb,
                var(
                    --role-nav-primary,
                    #0757d8
                )
                10%,
                white
            ) !important;
    }

    .role-nav-item.active::before{
        content:"";

        position:absolute;

        top:3px;
        left:50%;

        width:20px;
        height:3px;

        border-radius:50px;

        background:
            var(
                --role-nav-primary,
                #0757d8
            );

        transform:
            translateX(-50%);
    }

    .role-nav-center{
        position:relative;

        top:-22px;

        display:flex !important;

        flex-direction:column;

        align-items:center;

        color:
            var(
                --role-nav-primary,
                #0757d8
            ) !important;

        text-decoration:
            none !important;
    }

    .role-nav-center-circle{
        position:relative;

        display:grid;

        place-items:center;

        width:63px;
        height:63px;

        border:
            5px
            solid
            #f4f7fb;

        border-radius:50%;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                var(
                    --role-nav-primary,
                    #0757d8
                ),
                var(
                    --role-nav-accent,
                    #16b8ad
                )
            );

        box-shadow:
            0 14px 31px
            rgba(7,87,216,.34);

        transition:
            transform .2s ease;
    }

    .role-nav-center:active
    .role-nav-center-circle{
        transform:
            scale(.90);
    }

    .role-nav-center-circle::after{
        content:"";

        position:absolute;

        inset:-7px;

        border:
            2px solid
            color-mix(
                in srgb,
                var(
                    --role-nav-primary,
                    #0757d8
                )
                25%,
                transparent
            );

        border-radius:50%;

        animation:
            centerSoftPulse
            2.5s
            infinite;
    }

    @keyframes centerSoftPulse{
        0%,100%{
            opacity:.30;
            transform:
                scale(.92);
        }

        50%{
            opacity:.70;
            transform:
                scale(1.06);
        }
    }

    .role-nav-center-circle i{
        font-size:26px;
    }

    .role-nav-center-label{
        margin-top:3px;

        font-size:10px;
        font-weight:900;
    }

    /*
    |--------------------------------------------------------------------------
    | Customer-specific tone
    |--------------------------------------------------------------------------
    */

    .customer-role-nav
    .role-nav-center-circle{
        background:
            linear-gradient(
                135deg,
                var(
                    --role-nav-primary,
                    #0757d8
                ),
                var(
                    --role-nav-accent,
                    #16b8ad
                )
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Customer Quick Actions
    |--------------------------------------------------------------------------
    */

    .customer-quick-sheet{
        position:fixed;

        inset:0;

        z-index:100010;
    }

    .customer-quick-sheet.show{
        display:block;
    }

    .customer-quick-backdrop{
        position:absolute;

        inset:0;

        background:
            rgba(2,18,45,.58);

        backdrop-filter:
            blur(4px);
    }

    .customer-quick-card{
        position:absolute;

        right:0;
        bottom:0;
        left:0;

        padding:
            14px
            20px
            calc(
                26px
                + env(
                    safe-area-inset-bottom
                )
            );

        border-radius:
            27px
            27px
            0
            0;

        background:#fff;

        box-shadow:
            0 -22px 65px
            rgba(6,31,77,.24);

        animation:
            customerSheetUp
            .24s
            ease-out;
    }

    @keyframes customerSheetUp{
        from{
            transform:
                translateY(100%);
        }

        to{
            transform:
                translateY(0);
        }
    }

    .customer-quick-grid{
        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:12px;
    }

    .customer-quick-grid a,
    .customer-quick-grid button{
        display:flex;

        min-height:92px;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:8px;

        border:
            1px solid
            #e1e8f1;

        border-radius:18px;

        color:#334259;

        background:
            #f9fbfd;

        text-decoration:none;

        font-family:inherit;
        font-weight:800;

        cursor:pointer;
    }

    .customer-quick-grid i{
        display:grid;

        place-items:center;

        width:39px;
        height:39px;

        border-radius:12px;

        color:
            var(
                --role-nav-primary,
                #0757d8
            );

        background:#edf4ff;

        font-size:19px;
    }

    .customer-quick-grid
    .danger-action{
        color:#a82c3a;
    }

    .customer-quick-grid
    .danger-action
    i{
        color:#dc3545;

        background:#fff0f1;
    }

    /*
    |--------------------------------------------------------------------------
    | Install sheet
    |--------------------------------------------------------------------------
    */

    .role-install-sheet{
        position:fixed;

        inset:0;

        z-index:100020;
    }

    .role-install-sheet.show{
        display:block;
    }

    .role-install-backdrop{
        position:absolute;

        inset:0;

        background:
            rgba(2,18,45,.58);

        backdrop-filter:
            blur(4px);
    }

    .role-install-card{
        position:absolute;

        right:0;
        bottom:0;
        left:0;

        padding:
            14px
            22px
            calc(
                25px
                + env(
                    safe-area-inset-bottom
                )
            );

        border-radius:
            27px
            27px
            0
            0;

        background:#fff;

        box-shadow:
            0 -20px 60px
            rgba(6,31,77,.23);

        text-align:center;
    }

    .role-install-handle{
        width:45px;
        height:5px;

        margin:
            0
            auto
            20px;

        border-radius:20px;

        background:#d7dfeb;
    }

    .role-install-close{
        position:absolute;

        top:18px;
        right:18px;

        display:grid;

        place-items:center;

        width:38px;
        height:38px;

        border:0;

        border-radius:50%;

        color:#526078;

        background:#f1f4f8;
    }

    .role-install-icon{
        display:grid;

        place-items:center;

        width:74px;
        height:74px;

        margin:
            0
            auto
            16px;

        overflow:hidden;

        border-radius:22px;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                var(
                    --role-nav-primary,
                    #0757d8
                ),
                var(
                    --role-nav-accent,
                    #16b8ad
                )
            );

        font-size:32px;
    }

    .role-install-icon img{
        width:100%;
        height:100%;

        object-fit:cover;
    }

    .role-install-card h4{
        margin:
            0
            0
            8px;

        font-size:23px;
        font-weight:900;
    }

    .role-install-card p{
        max-width:450px;

        margin:
            0
            auto
            20px;

        color:#6d778a;

        font-size:14px;

        line-height:1.65;
    }

    .role-install-primary,
    .role-install-secondary{
        display:block;

        width:100%;
        max-width:450px;

        min-height:51px;

        margin:
            10px
            auto
            0;

        border-radius:13px;

        font-family:inherit;

        font-weight:850;
    }

    .role-install-primary{
        border:0;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                var(
                    --role-nav-primary,
                    #0757d8
                ),
                var(
                    --role-nav-accent,
                    #16b8ad
                )
            );
    }

    .role-install-secondary{
        border:
            1px solid
            #dde5ef;

        color:#334259;

        background:#fff;
    }
}