/* ===========================================================
   LGPD Consent Banner — Estilo BEMCSS (WP 6.8+)
   - Variáveis de cores
   - Anéis absolutos no cartão (Figma-like)
   - Sem build (CSS puro)
   =========================================================== */

/* =========================
   Variáveis (escopo plugin)
   ========================= */
.lgpd-banner {
    /* Cores base (modo claro) */
    --c-bg: #ffffff;
    --c-text: #222222;
    --c-title: #111111;
    --c-muted-1: #333333;
    --c-muted-2: #444444;
    --c-muted-3: #555555;
    --c-border: #444444;
    --c-link: #0053b3;

    /* Botões */
    --c-primary: #0053b3;
    --c-primary-hover: #003d85;
    --c-ghost-text: #333333;
    --c-ghost-border: #cccccc;
    --c-ghost-hover-bg: #f5f5f5;
    --c-save-bg: #efefef;
    --c-save-hover-bg: #e2e2e2;
    --c-save-text: #111111;

    /* Miscelânea */
    --c-timestamp: #AAAAAA;

    /* Acento (verde do selo) */
    --accent: rgb(16, 185, 129);
    /* #10B981 */
    --accent-border: rgba(16, 185, 129, 0.40);
    --accent-grad-1: rgba(16, 185, 129, 0.18);
    --accent-grad-2: rgba(16, 185, 129, 0.05);

    /* Anéis no cartão */
    --rings-gap: 25px;
    --rings-stroke: 2px;
    --rings-color: rgba(17, 24, 39, 0.07);
    --rings-glow: rgba(16, 185, 129, 0.10);

    /* Controle do fade dos anéis */
    --rings-mask-solid: 80px;
    /* raio 100% opaco a partir do centro */
    --rings-mask-fade: 100px;
    /* comprimento da transição até 0% */
}

/* =========================
   Overlay
   ========================= */
.lgpd-banner__overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 99999;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================
   Cartão / Modal
   ========================= */
.lgpd-banner__modal {
    background-color: var(--c-bg);
    color: var(--c-text);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    padding: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);

    /* canvas dos anéis */
    position: relative;
    z-index: 0;

    /* centro dos anéis = padding + metade do wrapper (56/2 = 28px) */
    --rings-x: calc(1.5rem + 28px);
    --rings-y: calc(1.5rem + 28px);

    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

/* Anéis absolutos por trás do conteúdo */
.lgpd-banner__modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    /* 1) glow no centro  2) anéis concêntricos */
    background-image:
        radial-gradient(circle at var(--rings-x) var(--rings-y),
            var(--rings-glow) 0,
            rgba(16, 185, 129, 0) 140px),
        repeating-radial-gradient(circle at var(--rings-x) var(--rings-y),
            transparent 0 calc(var(--rings-gap) - var(--rings-stroke)),
            var(--rings-color) calc(var(--rings-gap) - var(--rings-stroke)) var(--rings-gap));

    /* ===== fade de opaco → transparente ===== */
    -webkit-mask-image: radial-gradient(circle at var(--rings-x) var(--rings-y),
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) var(--rings-mask-solid),
            rgba(0, 0, 0, 0) calc(var(--rings-mask-solid) + var(--rings-mask-fade)));
    mask-image: radial-gradient(circle at var(--rings-x) var(--rings-y),
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) var(--rings-mask-solid),
            rgba(0, 0, 0, 0) calc(var(--rings-mask-solid) + var(--rings-mask-fade)));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Conteúdo acima dos anéis */
.lgpd-banner__header,
.lgpd-banner__body,
.lgpd-banner__footer {
    position: relative;
    z-index: 1;
}

.lgpd-banner__body {
    position: relative;
    overflow: auto;
    /* rolagem aqui */
    min-height: 0;
    /* evita “estourar” o grid */
    -webkit-overflow-scrolling: touch;
    /* suave no iOS */
    overscroll-behavior: contain;
    /* não propaga pro fundo */
}

/* =========================
   Header (selo + título)
   ========================= */
.lgpd-banner__header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* wrapper fixo do selo */
.lgpd-banner__visual {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* halo sutil atrás do ícone (sem anéis pesados) */
.lgpd-banner__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
            rgba(16, 185, 129, 0.12) 0%,
            rgba(16, 185, 129, 0) 70%);
    z-index: 1;
}

/* bolinha/ícone */
.lgpd-banner__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DCFAE6;
    border: .5rem solid #ECFDF3;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.60);
    z-index: 2;
}

.lgpd-banner__icon svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Título */
.lgpd-banner__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--c-title);
}

/* =========================
   Corpo
   ========================= */
.lgpd-banner__intro {
    font-size: 0.95rem;
    color: var(--c-muted-1);
    line-height: 1.4;
    margin: 0;
}

.lgpd-banner__policy {
    font-size: 0.9rem;
    color: var(--c-muted-2);
    margin-top: 0.25rem;
}

.lgpd-banner__policy-link {
    color: var(--c-link);
    text-decoration: underline;
    font-weight: 600;
}

/* Grupo */
.lgpd-banner__group {
    border: 1px solid var(--c-border);
    border-radius: .5rem;
    padding: 10px 16px;
    margin: 0.75rem 0;
    display: grid;
    gap: 8px;
    background-color: var(--c-bg);
}

.lgpd-banner__group-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-title);
    padding-inline: .5rem;
}

.lgpd-banner__group-desc {
    font-size: 0.9rem;
    color: var(--c-muted-3);
    line-height: 1.4;
    padding: 0;
}

.lgpd-banner__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.lgpd-banner__toggle.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lgpd-banner__toggle.is-disabled input {
    cursor: not-allowed;
}

.lgpd-banner__hint--disabled {
    display: block;
    margin-top: 0.25rem;
    opacity: 0.8;
    font-size: 0.6em;
}

.lgpd-banner__checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.lgpd-banner__toggle-label {
    font-size: 0.9rem;
    color: var(--c-text);
    user-select: none;
}

.lgpd-banner__timestamp {
    font-size: 0.8rem;
    color: var(--c-timestamp);
    margin-top: 0.5rem;
}

/* =========================
   Rodapé / Botões
   ========================= */
.lgpd-banner__footer {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.lgpd-banner__button {
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.lgpd-banner__button--primary {
    background-color: var(--c-primary);
    color: #ffffff;
}

.lgpd-banner__button--primary:hover {
    background-color: var(--c-primary-hover);
}

.lgpd-banner__button--ghost {
    background-color: transparent;
    color: var(--c-ghost-text);
    border: 1px solid var(--c-ghost-border);
}

.lgpd-banner__button--ghost:hover {
    background-color: var(--c-ghost-hover-bg);
}

.lgpd-banner__button--save {
    background-color: var(--c-save-bg);
    color: var(--c-save-text);
}

.lgpd-banner__button--save:hover {
    background-color: var(--c-save-hover-bg);
}

.lgpd-cookie-settings-trigger {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #667085;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.lgpd-cookie-settings-trigger:hover {
    color: #003A5D;
}

/* ===============================
   Dark mode (só troca variáveis)
   =============================== */
@media (prefers-color-scheme: dark) {
    .lgpd-banner {
        --c-bg: #1f1f1f;
        --c-text: #f2f2f2;
        --c-title: #ffffff;
        --c-muted-1: #cccccc;
        --c-muted-2: #f2f2f2;
        /* policy fica clara */
        --c-muted-3: #cccccc;
        --c-border: #f2f2f2;

        --c-ghost-text: #f2f2f2;
        --c-ghost-border: #666666;
        --c-ghost-hover-bg: #333333;

        --c-save-bg: #2b2b2b;
        --c-save-hover-bg: #3a3a3a;
        --c-save-text: #f2f2f2;

        /* anéis */
        --rings-color: rgba(255, 255, 255, 0.06);
        --rings-glow: rgba(16, 185, 129, 0.08);
    }
}

/* ===============================
   Responsividade
   =============================== */
@media (max-width: 480px) {
    .lgpd-banner__modal {
        width: 95%;
        padding: 1.2rem;

        /* recalc centro dos anéis (padding mudou) */
        --rings-x: calc(1.2rem + 28px);
        --rings-y: calc(1.2rem + 28px);
        --rings-gap: 24px;
    }

    .lgpd-banner__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .lgpd-banner__button {
        width: 100%;
    }
}