/* Consentimento de cookies (Partials/_ConsentimentoCookie.cshtml). Arquivo próprio, carregado
   pelo partial, porque o _LayoutHotsite não carrega o site.css. As cores vêm do :root do
   site-fut.css e do site-giv.css, que todos os layouts carregam. */
.consentimento {
    bottom: 16px;
    left: 16px;
    position: fixed;
    width: min(340px, calc(100vw - 32px));
    /* Acima do resto da tela, inclusive do #six-seven-egg (99999) do site.css. */
    z-index: 100000;
}

.consentimento-caixa {
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: 0 14px 40px color-mix(in srgb, var(--black-medium) 22%, transparent);
    color: var(--black-medium);
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 20px;
}

.consentimento-titulo {
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    gap: 10px;
    margin-bottom: 8px;
}

    .consentimento-titulo i {
        color: var(--padrao-new);
        font-size: 1.8rem;
    }

.consentimento-texto {
    color: var(--gray-medium);
    margin: 0 0 14px;
}

    .consentimento-texto a {
        color: var(--padrao-new);
        text-decoration: underline;
    }

.consentimento-btn-principal {
    background: var(--padrao-new);
    border: 0;
    border-radius: 4.5rem;
    color: var(--superficie);
    cursor: pointer;
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 11px 20px;
    width: 100%;
}

    .consentimento-btn-principal:hover {
        background: var(--padrao-new-hover);
    }

.consentimento-link {
    background: none;
    border: 0;
    color: var(--gray-medium);
    cursor: pointer;
    display: block;
    font-size: 1.2rem;
    margin: 10px auto 0;
    padding: 2px 4px;
    text-decoration: underline;
}

    .consentimento-link:hover {
        color: var(--padrao-new);
    }

.consentimento-painel {
    padding: 16px 18px;
}

.consentimento-painel-topo {
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    justify-content: space-between;
    margin-bottom: 4px;
}

.consentimento-fechar {
    background: none;
    border: 0;
    color: var(--gray-silver);
    cursor: pointer;
    font-size: 2.2rem;
    line-height: 1;
    padding: 0 2px;
}

    .consentimento-fechar:hover {
        color: var(--black-medium);
    }

.consentimento-lista {
    margin-bottom: 14px;
    max-height: 52vh;
    overflow-y: auto;
}

.consentimento-categoria {
    border-top: 1px solid var(--gray-light-platinum);
    padding: 10px 0;
}

    .consentimento-categoria p {
        color: var(--gray-medium);
        font-size: 1.2rem;
        line-height: 1.35;
        margin: 3px 0 0 24px;
    }

.consentimento-categoria-topo {
    align-items: center;
    display: flex;
    gap: 8px;
}

    .consentimento-categoria-topo i {
        color: var(--padrao-new);
        font-size: 1.3rem;
        text-align: center;
        width: 16px;
    }

.consentimento-categoria-nome {
    font-weight: 700;
}

.consentimento-sempre {
    color: var(--gray-medium);
    font-size: 1.2rem;
    margin-left: auto;
}

/* Chave liga/desliga de cada categoria. */
.consentimento-chave {
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    height: 18px;
    margin: 0 0 0 auto;
    position: relative;
    width: 36px;
}

    .consentimento-chave input {
        height: 0;
        opacity: 0;
        position: absolute;
        width: 0;
    }

    .consentimento-chave span {
        background: var(--gray-light-silver);
        border-radius: 18px;
        inset: 0;
        position: absolute;
        transition: background .2s;
    }

        .consentimento-chave span::before {
            background: var(--superficie);
            border-radius: 50%;
            bottom: 2px;
            content: "";
            height: 14px;
            left: 2px;
            position: absolute;
            transition: transform .2s;
            width: 14px;
        }

    .consentimento-chave input:checked + span {
        background: var(--padrao-new);
    }

        .consentimento-chave input:checked + span::before {
            transform: translateX(18px);
        }

    .consentimento-chave input:focus-visible + span {
        outline: 2px solid var(--padrao-new);
        outline-offset: 2px;
    }

@media (max-width: 767px) {
    .consentimento {
        bottom: 8px;
        left: 8px;
        width: calc(100vw - 16px);
    }

    .consentimento-lista {
        max-height: 60vh;
    }
}