/*
|--------------------------------------------------------------------------
| InsurePro Common Mobile Footer Menu
|--------------------------------------------------------------------------
*/

.insurepro-mobile-nav,
.insurepro-install-sheet {
    display: none;
}

@media (max-width: 991.98px) {

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

    .insurepro-mobile-nav {
        position: fixed !important;

        left: 10px !important;
        right: 10px !important;

        bottom:
            calc(
                9px
                + env(safe-area-inset-bottom)
            ) !important;

        z-index: 99999 !important;

        display: grid !important;

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

        align-items: center;

        min-height: 70px;

        padding: 7px 6px;

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

        border-radius: 23px;

        background:
            rgba(255, 255, 255, 0.98) !important;

        box-shadow:
            0 16px 46px
            rgba(6, 31, 77, 0.22);

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

    .insurepro-mobile-nav-item {
        position: relative;

        display: flex !important;

        flex-direction: column;

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

        gap: 4px;

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

        padding: 6px 2px;

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

        color: #69768a !important;

        background: transparent !important;

        text-decoration: none !important;

        font-family: inherit;

        cursor: pointer;
    }

    .insurepro-mobile-nav-item i {
        font-size: 20px;
        line-height: 1;
    }

    .insurepro-mobile-nav-item span {
        overflow: hidden;

        max-width: 100%;

        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;

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

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

        background: #edf4ff !important;
    }

    .insurepro-mobile-nav-item.active::before {
        content: "";

        position: absolute;

        top: 3px;
        left: 50%;

        width: 18px;
        height: 3px;

        border-radius: 10px;

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

        transform: translateX(-50%);
    }

    /*
    |--------------------------------------------------------------------------
    | Center Apply Button
    |--------------------------------------------------------------------------
    */

    .insurepro-mobile-nav-apply {
        position: relative;

        top: -21px;

        display: flex !important;

        flex-direction: column;

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

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

        text-decoration: none !important;
    }

    .insurepro-mobile-nav-apply-circle {
        display: grid;

        place-items: center;

        width: 61px;
        height: 61px;

        border:
            5px
            solid
            var(
                --insurepro-nav-bg,
                #f4f7fb
            );

        border-radius: 50%;

        color: #fff;

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

        box-shadow:
            0 13px 29px
            rgba(7, 87, 216, 0.33);
    }

    .insurepro-mobile-nav-apply-circle i {
        font-size: 25px;
    }

    .insurepro-mobile-nav-apply-label {
        margin-top: 2px;

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

    /*
    |--------------------------------------------------------------------------
    | Install Bottom Sheet
    |--------------------------------------------------------------------------
    */

    .insurepro-install-sheet {
        position: fixed;

        inset: 0;

        z-index: 100000;
    }

    .insurepro-install-sheet.show {
        display: block !important;
    }

    .insurepro-install-backdrop {
        position: absolute;

        inset: 0;

        background:
            rgba(2, 18, 45, 0.58);

        backdrop-filter: blur(4px);
    }

    .insurepro-install-card {
        position: absolute;

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

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

        border-radius:
            26px
            26px
            0
            0;

        background: #fff;

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

        text-align: center;
    }

    .insurepro-install-handle {
        width: 44px;
        height: 5px;

        margin: 0 auto 20px;

        border-radius: 20px;

        background: #d7dfeb;
    }

    .insurepro-install-close {
        position: absolute;

        top: 18px;
        right: 18px;

        width: 37px;
        height: 37px;

        border: 0;
        border-radius: 50%;

        color: #526078;

        background: #f1f4f8;
    }

    .insurepro-install-icon {
        display: grid;

        place-items: center;

        width: 72px;
        height: 72px;

        margin: 0 auto 16px;

        overflow: hidden;

        border-radius: 21px;

        color: #fff;

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

        font-size: 32px;
    }

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

        object-fit: cover;
    }

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

        color: #172033;

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

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

        margin: 0 auto 20px;

        color: #6d778a;

        font-size: 14px;
        line-height: 1.65;
    }

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

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

        min-height: 51px;

        margin: 10px auto 0;

        border-radius: 12px;

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

        cursor: pointer;
    }

    .insurepro-install-primary {
        border: 0;

        color: #fff;

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

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

        color: #334259;

        background: #fff;
    }
}