/* =========================================================================
   AVISO DE COOKIES — v3 — SISTEMA SHINEWEB
   Par de: inc/inc-paginas-legais.php (markup, no wp_footer) + js/cookies.js.
   Carrega em todas as páginas, inclusive nas telas internas do sistema.

   Ideia central: um bilhete pequeno no canto, não uma faixa escura de
   ponta a ponta. Papel branco, régua de tabela de preço ("Necessários ....
   sempre ligados"), duas escolhas do mesmo tamanho — recusar dá o mesmo
   trabalho que aceitar, como a LGPD pede.

   Regras da casa:
   - Tudo em #shw-cookies.cb (1-1-0): vence o global.css e o landing-polish.css
     sem !important. Propriedades escritas por inteiro, porque nas telas
     internas o CSS em volta é outro.
   - Fonte: Poppins/Schibsted quando a página já carrega; senão, a do sistema.
   - Substituiu o #ir-cookie-banner (faixa #1e2937 com botão oliva) que ficava
     inline no functions.php.
   ========================================================================= */

#shw-cookies.cb {
    --cb-grafite:      #16211C;
    --cb-texto:        #34413A;
    --cb-cinza:        #5B665F;
    --cb-verde:        #1E6E52;
    --cb-verde-escuro: #155240;
    --cb-verde-claro:  #E3EFE8;
    --cb-regua-forte:  #C9C2AC;
    --cb-linha:        #DCE3DE;
    --cb-display: 'Schibsted Grotesk', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cb-corpo:   'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 100000;              /* acima do WhatsApp flutuante e da barra do carrinho */
    box-sizing: border-box;
    width: min(400px, calc(100% - 32px));
    margin: 0;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid var(--cb-regua-forte);
    border-radius: 10px;
    box-shadow: 0 22px 40px -18px rgba(22, 33, 28, .35), 0 2px 4px rgba(22, 33, 28, .06);
    color: var(--cb-texto);
    font: 400 .875rem/1.55 var(--cb-corpo);
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
#shw-cookies.cb[hidden] { display: none; }
#shw-cookies.cb.is-visivel { opacity: 1; transform: none; }

#shw-cookies.cb *,
#shw-cookies.cb *::before,
#shw-cookies.cb *::after { box-sizing: border-box; }

#shw-cookies.cb .cb-titulo {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font: 700 1.125rem/1.2 var(--cb-display);
    letter-spacing: -.015em;
    color: var(--cb-grafite);
    text-transform: none;
}

#shw-cookies.cb .cb-texto {
    margin: 0 0 14px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--cb-texto);
}

/* As duas categorias como linhas de uma tabela de preço. */
#shw-cookies.cb .cb-lista {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cb-linha);
}
#shw-cookies.cb .cb-lista li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px dashed var(--cb-linha);
    font-size: .8125rem;
    list-style: none;
}
#shw-cookies.cb .cb-lista li::before { content: none; }
#shw-cookies.cb .cb-lista span {
    font-weight: 500;
    color: var(--cb-grafite);
}
#shw-cookies.cb .cb-lista em {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--cb-verde-claro);
    border-radius: 4px;
    background: var(--cb-verde-claro);
    font-style: normal;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cb-verde-escuro);
    white-space: nowrap;
}
#shw-cookies.cb .cb-lista em.cb-opcional {
    background: transparent;
    border-color: var(--cb-regua-forte);
    color: var(--cb-texto);
}

/* Aceitar e recusar lado a lado, mesmo tamanho. */
#shw-cookies.cb .cb-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
#shw-cookies.cb .cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    font: 600 .875rem/1.2 var(--cb-corpo);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#shw-cookies.cb .cb-btn--cheio { background: var(--cb-verde); border-color: var(--cb-verde); color: #fff; }
#shw-cookies.cb .cb-btn--cheio:hover { background: var(--cb-verde-escuro); border-color: var(--cb-verde-escuro); }
#shw-cookies.cb .cb-btn--linha { border-color: var(--cb-grafite); color: var(--cb-grafite); }
#shw-cookies.cb .cb-btn--linha:hover { background: var(--cb-grafite); color: #fff; }

#shw-cookies.cb .cb-nota {
    margin: 12px 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--cb-cinza);
}
#shw-cookies.cb .cb-nota a {
    color: var(--cb-verde-escuro);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#shw-cookies.cb :is(a, button):focus-visible {
    outline: 2px solid var(--cb-verde);
    outline-offset: 2px;
    box-shadow: none;
}

/* Celular: ocupa a largura de baixo, com respiro. */
@media (max-width: 560px) {
    #shw-cookies.cb {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 18px 16px 14px;
    }
    /* No celular o aviso não pode cobrir meia tela: o texto já diz quais
       são as duas categorias, a lista fica só no desktop. */
    #shw-cookies.cb .cb-lista { display: none; }
    #shw-cookies.cb .cb-btn { padding: 0 8px; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    #shw-cookies.cb, #shw-cookies.cb .cb-btn { transition: none; }
    #shw-cookies.cb { transform: none; }
}

@media print {
    #shw-cookies.cb { display: none; }
}
