/* Animações subindo e descendo da base da tela */
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(120%);
        /* Desce além do limite da tela */
    }
}

#cookiesTerms {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 9999;
    transform: translateX(-50%);

    width: 100vw;
    display: none;

    /* Removemos o background escuro e o blur */
    background-color: transparent;

    /* Afasta um pouco das bordas da tela no desktop */
    margin: 0;
    box-sizing: border-box;

    /* Permite que cliques passem pela área transparente e acertem o site embaixo */
    pointer-events: none;

    #cookiesTermsContent {
        /* Reativa os cliques apenas na caixa do banner */
        pointer-events: auto;

        display: flex;
        flex-direction: row;
        /* Fica lado a lado no desktop */
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;

        /* Evita que estique demais em telas ultrawide */
        margin: 0 auto;
        color: var(--cor-fonte-secundaria);
        padding: 20px 24px;
        border-radius: 12px;
        border: 1px solid var(--cor-borda-contraste);

        background-color: var(--cor-fundo);

        &.aparecer-termos {
            animation: slide-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards;
        }

        &.fechar-termos {
            animation: slide-down 500ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards;
        }

        .texto-termos-cookie {
            flex: 1;
            /* Faz o texto ocupar o espaço máximo possível */

            h3 {
                color: var(--cor-fonte);
                font-size: 1.5rem;
                line-height: 1;
                margin-bottom: 1rem;
            }

            p {
                color: var(--cor-fonte-secundaria);
                font-size: 0.875rem;
                line-height: 1.5;
                margin-bottom: 1rem;

                &:last-of-type {
                    margin: 0;
                }

                .link-privacidade {
                    font-weight: 500;
                    color: #0d6efd;
                    text-decoration: none;

                    &:hover {
                        color: #0a58ca;
                    }
                }
            }
        }

        #cookiesTermsActions {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 12px;
            flex-shrink: 0;
            /* Impede que os botões esmaguem quando a tela diminuir */

            .btn {
                all: unset;
                box-sizing: border-box;
                display: inline-block;

                font-size: 0.95rem;
                font-weight: 500;
                text-align: center;
                text-decoration: none;

                min-width: 130px;
                /* Botões um pouco menores para o formato horizontal */
                padding: 0.5rem 1rem;
                border-radius: 0.375rem;

                cursor: pointer;
                user-select: none;
                transition: all 0.2s ease-in-out;
            }

            #cookiesBtnAccept {
                color: white;
                background-color: #0d6efd;
                border: 1px solid #0d6efd;

                &:hover {
                    background-color: #0b5ed7;
                    border-color: #0a58ca;
                }
            }

            #cookiesBtnReject {
                color: var(--cor-fonte-secundaria);
                border: 1px solid var(--cor-borda-contraste);

                background-color: var(--cor-fundo);

                &:hover {
                    background-color: var(--cor-fundo-contraste);
                    color: var(--cor-fonte);
                }
            }
        }
    }
}


/* Responsividade para Mobile */
@media (max-width: 768px) {
    #cookiesTerms {
        bottom: 0px;
        /* Remove a margem externa lateral para grudar nos cantos da tela no celular */

        #cookiesTermsContent {
            flex-direction: column;
            /* Empilha o texto e os botões */
            align-items: stretch;
            border-radius: 16px 16px 0 0;
            /* Arredonda apenas os cantos superiores */
            padding: 24px 20px;
            gap: 20px;

            .texto-termos-cookie p {
                font-size: 0.9rem;
            }

            #cookiesTermsActions {
                flex-direction: column;
                /* Empilha os botões */
                width: 100%;

                .btn {
                    width: 100%;
                }

                /* Inverte a ordem: botão de Aceitar fica em cima (mais acessível ao dedão) */
                #cookiesBtnReject {
                    order: 2;
                }

                #cookiesBtnAccept {
                    order: 1;
                }
            }
        }
    }
}