/* =====================================================================
 * AVISO DE COOKIES — Blog Canela RS
 * Criado em 16/09/2026.
 *
 * Fica em themes/wc_blogcanelars/wc_css/ porque o index.php carrega
 * sozinho todo .css dessa pasta — nao precisa declarar link nenhum.
 *
 * O aviso antigo era uma faixa escura ocupando a largura inteira, sobre
 * a foto principal da home. Esta versao e uma caixa no canto inferior
 * esquerdo: continua impossivel de ignorar, mas nao come a primeira tela
 * do site. No celular ela ocupa a largura, porque canto em tela de 360px
 * viraria um selo ilegivel.
 * ===================================================================== */

.wc-cookies {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;

    width: 340px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;

    padding: 18px 20px 16px;
    border-radius: 14px;
    border: 1px solid #e4cfdd;
    background: #fff;
    box-shadow: 0 14px 40px rgba(60, 20, 45, .22);

    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #5f5b63;

    /* estado inicial: fora da tela, invisivel ao clique */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .24s ease, transform .24s ease;
}

.wc-cookies--visivel {
    opacity: 1;
    transform: translateY(0);
}

.wc-cookies__titulo {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #852b5b;
    line-height: 1.3;
}

.wc-cookies__texto {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 21px;
}

.wc-cookies__texto a {
    color: #852b5b;
    text-decoration: underline;
}

.wc-cookies__acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wc-cookies__btn {
    flex: 1 1 0;
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;

    /* sem transform nem filter no hover, de proposito: promover o botao
       a camada de GPU derruba o antialiasing subpixel e o texto sai
       borrado. Foi o que aconteceu com os botoes do site em 31/08. */
    transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.wc-cookies__btn--sim {
    color: #fff;
    background-image: linear-gradient(100deg, #9a3570 0%, #7c2557 52%, #5f1c42 100%);
    box-shadow: 0 6px 16px rgba(95, 28, 66, .3),
                inset 0 1px 0 rgba(255, 255, 255, .16);
    text-shadow: none;
}

.wc-cookies__btn--sim:hover {
    box-shadow: 0 8px 20px rgba(95, 28, 66, .4),
                inset 0 1px 0 rgba(255, 255, 255, .2);
}

.wc-cookies__btn--nao {
    color: #7c2557;
    background: #fff;
    border-color: #d8bbcd;
}

.wc-cookies__btn--nao:hover {
    background: #faf1f6;
    border-color: #b98aa6;
}

.wc-cookies__btn:focus-visible {
    outline: 3px solid #cc639b;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Celular: largura cheia, colada embaixo.
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
    .wc-cookies {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        padding: 16px 16px 14px;
    }
}

/* ---------------------------------------------------------------------
 * Quem pediu menos animacao no sistema recebe menos animacao.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wc-cookies {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------------
 * O link de rever a escolha, no rodape.
 * ------------------------------------------------------------------- */
.wc-cookies-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}