/**
 * Nexcore — banner de consentimento
 *
 * Todas as cores e o raio vêm de propriedades CSS postas no elemento pelo PHP,
 * a partir das definições do painel. Quem quiser ir além do painel sobrepõe as
 * mesmas propriedades no CSS do tema:
 *
 *   #nxc-consentimento { --nxc-cb-fundo: #fff; --nxc-cb-texto: #111; }
 *
 * Nada aqui usa !important, para que o tema ganhe sempre que queira ganhar.
 */

.nxc-cb {
    position: fixed;
    z-index: 999999;
    box-sizing: border-box;
    color: var(--nxc-cb-texto, #e8eaed);
    font-size: 14px;
    line-height: 1.55;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.nxc-cb *,
.nxc-cb *::before,
.nxc-cb *::after {
    box-sizing: inherit;
}

.nxc-cb--visivel {
    opacity: 1;
}

.nxc-cb__caixa {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    background: var(--nxc-cb-fundo, #1a1d21);
    border-radius: var(--nxc-cb-raio, 10px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .28);
}

.nxc-cb__corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.nxc-cb__titulo {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.nxc-cb__texto {
    margin: 0;
    opacity: .85;
}

.nxc-cb__politica {
    color: var(--nxc-cb-destaque, #2a7de1);
    text-decoration: underline;
}

/* ---------------------------------------------------------- escolhas */

.nxc-cb__escolhas {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(127, 127, 127, .28);
    display: grid;
    gap: 12px;
}

.nxc-cb__escolha {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.nxc-cb__check {
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: var(--nxc-cb-destaque, #2a7de1);
    width: 16px;
    height: 16px;
}

.nxc-cb__escolha-txt strong {
    display: block;
    font-weight: 600;
}

.nxc-cb__escolha-txt span {
    display: block;
    opacity: .78;
    font-size: 13px;
}

/* ---------------------------------------------------------- botões */

.nxc-cb__botoes {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.nxc-cb__btn {
    font: inherit;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: calc(var(--nxc-cb-raio, 10px) - 4px);
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s ease;
}

.nxc-cb__btn:hover {
    opacity: .85;
}

.nxc-cb__btn:focus-visible {
    outline: 2px solid var(--nxc-cb-destaque, #2a7de1);
    outline-offset: 2px;
}

.nxc-cb__btn--aceitar {
    background: var(--nxc-cb-aceitar-fundo, #2a7de1);
    color: var(--nxc-cb-aceitar-texto, #fff);
}

/* Recusar tem de ser tão fácil de ver e de carregar como aceitar. Um botão
   apagado ao lado de um botão garrido é consentimento arrancado, não dado. */
.nxc-cb__btn--recusar,
.nxc-cb__btn--guardar {
    background: transparent;
    color: var(--nxc-cb-recusar-texto, #e8eaed);
    border: 1px solid currentColor;
}

.nxc-cb__btn--texto {
    background: transparent;
    color: var(--nxc-cb-recusar-texto, #e8eaed);
    text-decoration: underline;
    padding: 10px 8px;
}

/* ---------------------------------------------------------- formatos */

.nxc-cb[data-layout="barra-inferior"] {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    transform: translateY(12px);
}

.nxc-cb[data-layout="barra-superior"] {
    left: 0;
    right: 0;
    top: 0;
    padding: 14px;
    transform: translateY(-12px);
}

.nxc-cb[data-layout="barra-inferior"].nxc-cb--visivel,
.nxc-cb[data-layout="barra-superior"].nxc-cb--visivel {
    transform: translateY(0);
}

.nxc-cb[data-layout="canto-esquerdo"],
.nxc-cb[data-layout="canto-direito"] {
    bottom: 18px;
    width: min(420px, calc(100vw - 36px));
    transform: translateY(12px);
}

.nxc-cb[data-layout="canto-esquerdo"] { left: 18px; }
.nxc-cb[data-layout="canto-direito"]  { right: 18px; }

.nxc-cb[data-layout="canto-esquerdo"].nxc-cb--visivel,
.nxc-cb[data-layout="canto-direito"].nxc-cb--visivel {
    transform: translateY(0);
}

.nxc-cb[data-layout="canto-esquerdo"] .nxc-cb__caixa,
.nxc-cb[data-layout="canto-direito"] .nxc-cb__caixa,
.nxc-cb[data-layout="centro"] .nxc-cb__caixa {
    flex-direction: column;
    align-items: stretch;
}

.nxc-cb[data-layout="canto-esquerdo"] .nxc-cb__botoes,
.nxc-cb[data-layout="canto-direito"] .nxc-cb__botoes,
.nxc-cb[data-layout="centro"] .nxc-cb__botoes {
    justify-content: flex-end;
}

.nxc-cb[data-layout="centro"] {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.nxc-cb[data-layout="centro"] .nxc-cb__caixa {
    width: min(540px, 100%);
    transform: scale(.97);
    transition: transform .25s ease;
}

.nxc-cb[data-layout="centro"].nxc-cb--visivel .nxc-cb__caixa {
    transform: scale(1);
}

.nxc-cb[data-overlay="yes"][data-layout="centro"] {
    background: rgba(0, 0, 0, .45);
}

/* Tema claro: o contorno substitui a sombra, que num fundo claro não separa
   o banner da página. */
.nxc-cb[data-tema="claro"] .nxc-cb__caixa {
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .08);
}

/* ---------------------------------------------------------- reabrir */

.nxc-cb-reabrir {
    position: fixed;
    bottom: 16px;
    z-index: 999998;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--nxc-cb-fundo, #1a1d21);
    color: var(--nxc-cb-texto, #e8eaed);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    opacity: .75;
}

.nxc-cb-reabrir:hover {
    opacity: 1;
}

.nxc-cb-reabrir[data-posicao="esquerda"] { left: 16px; }
.nxc-cb-reabrir[data-posicao="direita"]  { right: 16px; }

.nxc-cb-link {
    cursor: pointer;
}

/* ---------------------------------------------------------- telemóvel */

@media (max-width: 700px) {
    .nxc-cb[data-layout="barra-inferior"],
    .nxc-cb[data-layout="barra-superior"],
    .nxc-cb[data-layout="canto-esquerdo"],
    .nxc-cb[data-layout="canto-direito"] {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        padding: 10px;
    }

    .nxc-cb__caixa {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .nxc-cb__botoes {
        justify-content: stretch;
    }

    .nxc-cb__botoes .nxc-cb__btn--aceitar,
    .nxc-cb__botoes .nxc-cb__btn--recusar,
    .nxc-cb__botoes .nxc-cb__btn--guardar {
        flex: 1 1 auto;
    }

    /* Num ecrã pequeno a lista de finalidades pode passar o ecrã. Rola por
       dentro, para os botões nunca ficarem fora do alcance. */
    .nxc-cb__escolhas {
        max-height: 40vh;
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nxc-cb,
    .nxc-cb__caixa {
        transition: none;
    }
}