/*
|--------------------------------------------------------------------------
| INSTALL BANNER
|--------------------------------------------------------------------------
*/

.install-banner {

    position: fixed;

    left: 50%;
    bottom: 24px;

    transform:
        translateX(-50%)
        translateY(120%);

    width: min(
        520px,
        calc(100vw - 32px)
    );

    background:
        rgba(
            22,
            28,
            24,
            .96
        );

    border:
        1px solid
        rgba(
            183,
            217,
            92,
            .35
        );

    border-radius:
        20px;

    padding:
        18px 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 40px
        rgba(
            0,
            0,
            0,
            .35
        );

    z-index: 999999;

    transition:
        .35s ease;
}

.install-banner.visible {

    transform:
        translateX(-50%)
        translateY(0);
}

.install-banner-content {

    display: flex;
    flex-direction: column;
    gap: 6px;

    color:
        #fff;
}

.install-banner-content strong {

    color:
        #b7d95c;

    font-size:
        16px;
}

.install-banner-content span {

    font-size:
        14px;

    line-height:
        1.5;
}

.install-banner-close {

    border: none;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            .7
        );

    cursor: pointer;

    font-size:
        18px;
}