/* =========================================================
   NOSSOFUTE · INSTALAÇÃO PWA
   ========================================================= */

.nf-pwa-install {
    position: fixed;

    left: 50%;
    bottom:
        calc(18px + env(safe-area-inset-bottom));

    transform:
        translate(-50%, 18px);

    z-index: 999999;

    width:
        min(430px, calc(100vw - 24px));

    padding:
        15px;

    border:
        1px solid rgba(40, 223, 121, .36);

    border-radius:
        17px;

    background:
        rgba(5, 17, 29, .97);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255, 255, 255, .025);

    color:
        #f5f8fb;

    font-family:
        'Plus Jakarta Sans',
        system-ui,
        sans-serif;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .24s ease,
        transform .24s ease,
        visibility .24s ease;

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

    backdrop-filter:
        blur(18px);
}


.nf-pwa-install.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);
}


.nf-pwa-install-top {
    display: grid;

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

    gap:
        11px;

    align-items:
        center;
}


.nf-pwa-install-logo {
    width: 48px;
    height: 48px;

    display: flex;

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

    overflow: hidden;

    border:
        1px solid rgba(40, 223, 121, .24);

    border-radius:
        12px;

    background:
        #020b16;
}


.nf-pwa-install-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.nf-pwa-install-copy {
    min-width: 0;
}


.nf-pwa-install-eyebrow {
    display: block;

    margin-bottom: 2px;

    color:
        #28df79;

    font-size:
        9px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.nf-pwa-install-copy strong {
    display: block;

    margin: 0;

    color:
        #f7fafc;

    font-size:
        15px;

    line-height:
        1.25;

    font-weight:
        800;
}


.nf-pwa-install-copy p {
    margin:
        4px 0 0;

    color:
        #91a5b8;

    font-size:
        11px;

    line-height:
        1.42;
}


.nf-pwa-install-close {
    width: 30px;
    height: 30px;

    display: flex;

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

    align-self:
        start;

    padding: 0;

    border: 0;

    border-radius:
        8px;

    background:
        rgba(148, 163, 184, .07);

    color:
        #91a5b8;

    font-size:
        19px;

    line-height:
        1;

    cursor:
        pointer;
}


.nf-pwa-install-close:hover {
    background:
        rgba(148, 163, 184, .13);

    color:
        #ffffff;
}


.nf-pwa-install-actions {
    display: grid;

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

    gap:
        9px;

    margin-top:
        13px;
}


.nf-pwa-install-primary,
.nf-pwa-install-secondary {
    min-height:
        42px;

    border-radius:
        10px;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        750;

    cursor:
        pointer;
}


.nf-pwa-install-primary {
    padding:
        0 16px;

    border:
        1px solid rgba(40, 223, 121, .55);

    background:
        rgba(40, 223, 121, .14);

    color:
        #42e98a;
}


.nf-pwa-install-primary:hover {
    border-color:
        rgba(40, 223, 121, .82);

    background:
        rgba(40, 223, 121, .21);
}


.nf-pwa-install-secondary {
    padding:
        0 13px;

    border:
        1px solid rgba(148, 163, 184, .16);

    background:
        rgba(148, 163, 184, .05);

    color:
        #91a5b8;
}


.nf-pwa-ios-steps {
    display: flex;

    align-items: center;

    gap:
        7px;

    margin-top:
        11px;

    padding:
        9px 10px;

    border:
        1px solid rgba(148, 163, 184, .11);

    border-radius:
        10px;

    background:
        rgba(2, 8, 23, .45);

    color:
        #b7c5d3;

    font-size:
        10px;

    line-height:
        1.35;
}


.nf-pwa-ios-steps strong {
    color:
        #f4f7fa;
}


@media (min-width: 901px) {

    .nf-pwa-install {
        display: none !important;
    }
}