/* VOTEMAIS - INSTAGRAM BROWSER V1 */

#vm-instagram-aviso,
#vm-instagram-aviso *{
    box-sizing:border-box;
}

#vm-instagram-aviso{
    position:fixed;
    inset:auto 0 0;
    z-index:2147483000;
    padding:15px;
    padding-bottom:max(15px,env(safe-area-inset-bottom));
    background:
        linear-gradient(
            135deg,
            #39004f 0%,
            #15103e 42%,
            #102b75 78%,
            #116ed6 100%
        );
    border-top:2px solid #facc15;
    border-radius:23px 23px 0 0;
    box-shadow:0 -15px 55px #0008;
    color:#fff;
    font-family:Arial,sans-serif;
    animation:vmIgEntrada .35s ease-out both;
}

#vm-instagram-aviso .vmig-conteudo{
    max-width:420px;
    margin:0 auto;
    text-align:center;
}

#vm-instagram-aviso .vmig-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin:0 auto 10px;
    border-radius:15px;
    background:#ffffff19;
    border:1px solid #ffffff30;
    font-size:23px;
}

#vm-instagram-aviso h2{
    color:#fff;
    font-size:21px;
    line-height:1.2;
    margin:0 0 10px;
}

#vm-instagram-aviso p{
    color:#dce7ff;
    font-size:13px;
    line-height:1.55;
    margin:0 0 15px;
}

#vm-instagram-aviso button{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:46px;
    border-radius:12px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:transform .18s,filter .18s;
    font-family:inherit;
}

#vm-instagram-aviso button:active{
    transform:scale(.97);
}

#vmig-abrir{
    background:#facc15;
    color:#241900;
    border:0;
    box-shadow:0 6px 20px #facc1530;
}

#vmig-copiar{
    margin-top:9px;
    background:#ffffff16;
    color:#fff;
    border:1px solid #ffffff35;
}

#vmig-continuar{
    margin-top:9px;
    background:transparent;
    color:#e0e7ff;
    border:0;
}

#vmig-instrucao{
    margin-top:12px;
    padding:11px;
    border:1px solid #ffffff27;
    border-radius:10px;
    background:#ffffff0d;
    color:#dce7ff;
    font-size:12px;
    line-height:1.5;
}

#vm-instagram-aviso button:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

@keyframes vmIgEntrada{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(min-width:721px){
    #vm-instagram-aviso{
        max-width:440px;
        left:auto;
        right:20px;
        bottom:20px;
        border:1px solid #facc15;
        border-radius:20px;
    }
}

@media(prefers-reduced-motion:reduce){
    #vm-instagram-aviso{
        animation:none;
    }
    #vm-instagram-aviso button{
        transition:none;
    }
}



/* VM-INSTAGRAM-FULLSCREEN-V2-START */

/* Tela completa: oculta visualmente o site */

#vm-instagram-aviso{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    max-width:none !important;

    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;

    z-index:2147483647 !important;

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

    overflow-x:hidden !important;
    overflow-y:auto !important;

    padding:
        max(24px,env(safe-area-inset-top))
        20px
        max(24px,env(safe-area-inset-bottom)) !important;

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

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,57,189,.20),
            transparent 42%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(35,135,255,.30),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #310046 0%,
            #130a3c 40%,
            #0a215d 72%,
            #116ed6 100%
        ) !important;

    box-shadow:none !important;

    animation:none !important;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

/* Grade visual da identidade VoteMais */

#vm-instagram-aviso::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:44px 44px;

    z-index:0;
}

/* Conteudo central */

#vm-instagram-aviso .vmig-conteudo{
    position:relative;
    z-index:1;

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

    margin:auto;

    text-align:center;
}

#vm-instagram-aviso .vmig-logo{
    font-size:29px;
    font-weight:950;
    letter-spacing:-1px;
    color:#fff;

    margin-bottom:30px;
}

#vm-instagram-aviso .vmig-logo strong{
    color:#facc15;
}

/* Icone */

#vm-instagram-aviso .vmig-icone{
    display:grid;
    place-items:center;

    width:70px;
    height:70px;

    margin:0 auto 19px;

    border-radius:22px;

    font-size:31px;

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

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 12px 30px rgba(0,0,0,.16);

    animation:vmIgIcone 3s ease-in-out infinite;
}

#vm-instagram-aviso .vmig-tag{
    display:block;

    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;

    color:#facc15;

    margin-bottom:12px;
}

/* Titulos */

#vm-instagram-aviso h2{
    font-size:clamp(25px,6vw,33px);
    line-height:1.15;

    letter-spacing:-.8px;

    color:#fff;

    margin:0 0 15px;
}

#vm-instagram-aviso .vmig-descricao{
    font-size:14px;
    line-height:1.65;

    color:#dce7ff;

    margin:0 0 27px;
}

/* Container dos botoes */

#vm-instagram-aviso .vmig-botoes{
    display:grid;
    gap:11px;

    width:100%;
}

/* Todos os botoes */

#vm-instagram-aviso .vmig-botoes button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:100%;
    min-height:52px;

    margin:0 !important;

    border-radius:14px;

    font-family:inherit;
    font-size:13px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

#vm-instagram-aviso .vmig-botoes button:hover{
    transform:translateY(-2px);
}

#vm-instagram-aviso .vmig-botoes button:active{
    transform:scale(.96);
}

/* Botao 1 - Copiar link */

#vmig-copiar{
    background:#facc15 !important;
    color:#241900 !important;

    border:1px solid #ffe066 !important;

    box-shadow:
        0 9px 26px rgba(250,204,21,.23);
}

/* Botao 2 - Abrir navegador */

#vmig-abrir{
    background:
        linear-gradient(
            110deg,
            #7536e9,
            #286af0
        ) !important;

    color:#fff !important;

    border:1px solid rgba(255,255,255,.25) !important;

    box-shadow:
        0 9px 25px rgba(25,63,179,.22);
}

/* Botao 3 - Continuar */

#vmig-continuar{
    background:rgba(255,255,255,.08) !important;

    color:#e5edff !important;

    border:1px solid rgba(255,255,255,.22) !important;

    box-shadow:none !important;
}

/* Instrucoes */

#vmig-instrucao{
    margin-top:20px !important;

    padding:13px !important;

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

    border:1px solid rgba(255,255,255,.12) !important;

    border-radius:12px !important;

    color:#cbdaf8 !important;

    font-size:11px !important;
    line-height:1.55 !important;
}

/* Rodape */

#vm-instagram-aviso .vmig-rodape{
    margin-top:30px;

    font-size:9px;
    font-weight:850;

    letter-spacing:.14em;

    color:rgba(255,255,255,.45);
}

/* Animacao leve */

@keyframes vmIgIcone{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}

/* Telas pequenas */

@media(max-width:420px){

    #vm-instagram-aviso{
        padding-left:21px !important;
        padding-right:21px !important;
    }

    #vm-instagram-aviso .vmig-logo{
        margin-bottom:25px;
    }

    #vm-instagram-aviso .vmig-icone{
        width:60px;
        height:60px;
        font-size:27px;
        margin-bottom:15px;
    }

    #vm-instagram-aviso h2{
        font-size:27px;
    }

    #vm-instagram-aviso .vmig-descricao{
        font-size:13px;
        margin-bottom:23px;
    }

    #vm-instagram-aviso .vmig-botoes button{
        min-height:49px;
    }

}

/* Acessibilidade */

@media(prefers-reduced-motion:reduce){

    #vm-instagram-aviso .vmig-icone{
        animation:none !important;
    }

    #vm-instagram-aviso .vmig-botoes button{
        transition:none !important;
    }

}

/* VM-INSTAGRAM-FULLSCREEN-V2-END */


/* VM-INSTAGRAM-BOTOES-V3-START */

/* 1. PRINCIPAL - ABRIR NAVEGADOR */

#vm-instagram-aviso #vmig-abrir{
    order:1;

    background:
        linear-gradient(
            110deg,
            #ffe066,
            #facc15
        ) !important;

    color:#241900 !important;

    border:1px solid #ffe88a !important;

    box-shadow:
        0 10px 30px rgba(250,204,21,.28),
        inset 0 1px 0 rgba(255,255,255,.45) !important;

    font-weight:950 !important;

    animation:vmIgBotaoPrincipal 3s ease-in-out infinite;
}

#vm-instagram-aviso #vmig-abrir:hover{
    filter:brightness(1.08);

    box-shadow:
        0 13px 35px rgba(250,204,21,.38) !important;
}

#vm-instagram-aviso #vmig-abrir:active{
    animation:none;

    transform:scale(.96);

    filter:brightness(.97);
}


/* 2. SECUNDARIO - COPIAR LINK */

#vm-instagram-aviso #vmig-copiar{
    order:2;

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

    color:#e8efff !important;

    border:1px solid rgba(255,255,255,.26) !important;

    box-shadow:none !important;

    font-weight:800 !important;

    animation:none !important;
}

#vm-instagram-aviso #vmig-copiar:hover{
    background:rgba(255,255,255,.15) !important;

    border-color:rgba(255,255,255,.40) !important;
}

#vm-instagram-aviso #vmig-copiar:active{
    background:rgba(255,255,255,.20) !important;

    transform:scale(.97);
}


/* 3. DISCRETO - CONTINUAR INSTAGRAM */

#vm-instagram-aviso #vmig-continuar{
    order:3;

    min-height:38px !important;

    margin-top:4px !important;

    padding:8px !important;

    background:transparent !important;

    color:#b9c7e5 !important;

    border:1px solid transparent !important;

    border-radius:9px !important;

    box-shadow:none !important;

    font-size:12px !important;

    font-weight:600 !important;

    text-decoration:underline;

    text-underline-offset:4px;

    animation:none !important;
}

#vm-instagram-aviso #vmig-continuar:hover{
    color:#ffffff !important;

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

    transform:none !important;
}

#vm-instagram-aviso #vmig-continuar:active{
    color:#ffffff !important;

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

    transform:scale(.98);
}


/* GARANTE A ORDEM EM TODAS AS TELAS */

#vm-instagram-aviso .vmig-botoes{
    display:flex !important;

    flex-direction:column !important;

    gap:11px !important;
}


/* PULSO SUAVE SOMENTE NO BOTAO PRINCIPAL */

@keyframes vmIgBotaoPrincipal{

    0%,100%{
        box-shadow:
            0 10px 26px rgba(250,204,21,.20);
    }

    50%{
        box-shadow:
            0 10px 34px rgba(250,204,21,.38);
    }

}


/* ACESSIBILIDADE */

#vm-instagram-aviso .vmig-botoes button:focus-visible{
    outline:2px solid #ffffff !important;

    outline-offset:4px !important;
}

@media(prefers-reduced-motion:reduce){

    #vm-instagram-aviso #vmig-abrir{
        animation:none !important;
    }

    #vm-instagram-aviso .vmig-botoes button{
        transition:none !important;
    }

}

/* VM-INSTAGRAM-BOTOES-V3-END */