/* ============================================================
   Cookie consent (LGPD + Google Consent Mode v2)
   Tokens: tokens.css
   ============================================================ */

.pp-consent[hidden],
.pp-consent-modal[hidden],
.pp-consent-reopen[hidden] {
    display: none !important;
}

/* ---------- Banner inferior (compacto) ---------- */
/* right maior pra liberar espaço pro FAB do WhatsApp (~60px + 20px gap) */
.pp-consent {
    position: fixed;
    left: clamp(8px, 1.4vw, 20px);
    right: clamp(88px, 7vw, 100px);
    bottom: clamp(8px, 1.4vw, 20px);
    z-index: 9000;
    background: var(--color-surface, #FFF);
    border: 1px solid var(--line-strong, rgba(4, 22, 64, 0.16));
    border-radius: var(--radius-lg, clamp(10.5px, 1.2vw, 22px));
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(4, 22, 64, 0.14));
    padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.5vw, 22px);
    animation: pp-consent-in 0.32s ease-out;
}

@keyframes pp-consent-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pp-consent-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(12px, 1.8vw, 24px);
    align-items: center;
    max-width: clamp(800px, 88vw, 1100px);
    margin: 0 auto;
}

@media (max-width: 760px) {
    .pp-consent {
        right: clamp(8px, 1.4vw, 20px);
        bottom: clamp(80px, 14vw, 100px);
    }
    .pp-consent-inner {
        grid-template-columns: 1fr;
        gap: clamp(8px, 1.6vw, 14px);
    }
}

.pp-consent-desc {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(12px, 0.9vw, 13.5px);
    line-height: 1.5;
    color: var(--color-text, #3C4A66);
    margin: 0;
    max-width: clamp(420px, 50vw, 680px);
}

.pp-consent-desc a {
    color: var(--color-accent, #0072CE);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.pp-consent-desc a:hover {
    color: var(--color-navy, #001E62);
}

.pp-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 18px);
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .pp-consent-actions {
        justify-content: flex-start;
        gap: clamp(8px, 1.4vw, 14px);
    }
}

.pp-consent-btn {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(12px, 0.9vw, 13.5px);
    font-weight: 600;
    line-height: 1;
    padding: clamp(8px, 0.9vw, 12px) clamp(12px, 1.3vw, 18px);
    border-radius: var(--radius-pill, 999px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.pp-consent-btn:focus-visible {
    outline: 2px solid var(--color-accent, #0072CE);
    outline-offset: 3px;
}

/* CTA principal — destacado, maior, com sombra suave pra atrair clique */
.pp-consent-btn-primary {
    background: var(--color-navy, #001E62);
    color: #FFF;
    padding: clamp(10px, 1.1vw, 14px) clamp(18px, 2vw, 28px);
    box-shadow: 0 4px 12px rgba(0, 30, 98, 0.22);
}

.pp-consent-btn-primary:hover {
    background: var(--color-accent, #0072CE);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 114, 206, 0.3);
}

/* "Configurar" — link discreto, sem fundo */
.pp-consent-btn-link {
    background: transparent;
    color: var(--color-text, #3C4A66);
    padding: clamp(8px, 0.9vw, 12px) clamp(4px, 0.6vw, 10px);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong, rgba(4, 22, 64, 0.30));
}

.pp-consent-btn-link:hover {
    color: var(--color-navy, #001E62);
    text-decoration-color: var(--color-navy, #001E62);
}

/* "Recusar" — link super sutil, visível mas não competindo com o CTA */
.pp-consent-btn-mute {
    background: transparent;
    color: var(--color-text-soft, #727F97);
    padding: clamp(8px, 0.9vw, 12px) clamp(6px, 0.8vw, 12px);
    font-weight: 400;
    font-size: clamp(11.5px, 0.85vw, 12.5px);
}

.pp-consent-btn-mute:hover {
    color: var(--color-text, #3C4A66);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* X discreto no canto pra fechar sem decidir */
.pp-consent-close {
    background: transparent;
    border: none;
    color: var(--color-text-soft, #727F97);
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1;
    cursor: pointer;
    padding: clamp(6px, 0.6vw, 10px);
    margin-left: clamp(8px, 1vw, 16px);
    border-radius: var(--radius-pill, 999px);
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.6vw, 36px);
    height: clamp(28px, 2.6vw, 36px);
    flex-shrink: 0;
}

.pp-consent-close:hover {
    background: var(--color-bg-alt, #F1F3F8);
    color: var(--color-navy, #001E62);
}

.pp-consent-close:focus-visible {
    outline: 2px solid var(--color-accent, #0072CE);
    outline-offset: 2px;
}

/* manter classe legacy pra backward compat */
.pp-consent-btn-ghost {
    background: transparent;
    color: var(--color-navy, #001E62);
    border: 1px solid var(--line-strong, rgba(4, 22, 64, 0.16));
}

.pp-consent-btn-ghost:hover {
    background: var(--color-accent-tint, #E5F0FA);
    border-color: var(--color-accent, #0072CE);
}

/* ---------- Modal de personalização ---------- */
.pp-consent-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 24px);
    animation: pp-consent-in 0.22s ease-out;
}

.pp-consent-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 22, 64, 0.55);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.pp-consent-modal-card {
    position: relative;
    background: var(--color-surface, #FFF);
    border-radius: var(--radius-lg, clamp(10.5px, 1.2vw, 22px));
    box-shadow: var(--shadow-lg, 0 24px 64px rgba(4, 22, 64, 0.32));
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pp-consent-modal-head {
    padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 32px) clamp(8px, 1vw, 14px);
    border-bottom: 1px solid var(--line, rgba(4, 22, 64, 0.10));
    position: relative;
}

.pp-consent-modal-head .pp-consent-title {
    margin-bottom: 0;
}

.pp-consent-modal-close {
    position: absolute;
    top: clamp(10px, 1.2vw, 16px);
    right: clamp(10px, 1.2vw, 16px);
    width: clamp(30px, 3vw, 40px);
    height: clamp(30px, 3vw, 40px);
    border: none;
    background: transparent;
    color: var(--color-text-soft, #727F97);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-pill, 999px);
    transition: background 0.2s ease, color 0.2s ease;
}

.pp-consent-modal-close:hover {
    background: var(--color-bg-alt, #F1F3F8);
    color: var(--color-navy, #001E62);
}

.pp-consent-modal-body {
    padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 22px);
}

.pp-consent-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(12px, 1.6vw, 22px);
    align-items: flex-start;
    padding-block: clamp(8px, 1vw, 14px);
    border-bottom: 1px solid var(--line, rgba(4, 22, 64, 0.10));
}

.pp-consent-row:last-child {
    border-bottom: none;
}

.pp-consent-row-text h3 {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(13.5px, 1.05vw, 16px);
    color: var(--color-heading, #041640);
    margin: 0 0 clamp(3px, 0.4vw, 6px);
    font-weight: 600;
}

.pp-consent-row-text p {
    font-family: var(--font-body, sans-serif);
    font-size: clamp(12px, 0.9vw, 13.5px);
    line-height: 1.5;
    color: var(--color-text-soft, #727F97);
    margin: 0;
}

.pp-consent-toggle {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 10px);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.pp-consent-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pp-consent-toggle-track {
    width: clamp(36px, 3.4vw, 44px);
    height: clamp(20px, 1.9vw, 24px);
    background: var(--line-strong, rgba(4, 22, 64, 0.16));
    border-radius: var(--radius-pill, 999px);
    position: relative;
    transition: background 0.22s ease;
}

.pp-consent-toggle-track::after {
    content: "";
    position: absolute;
    top: clamp(2px, 0.2vw, 3px);
    left: clamp(2px, 0.2vw, 3px);
    width: calc(clamp(20px, 1.9vw, 24px) - clamp(4px, 0.4vw, 6px));
    height: calc(clamp(20px, 1.9vw, 24px) - clamp(4px, 0.4vw, 6px));
    background: #FFF;
    border-radius: 50%;
    transition: transform 0.22s ease;
    box-shadow: 0 2px 4px rgba(4, 22, 64, 0.18);
}

.pp-consent-toggle input:checked ~ .pp-consent-toggle-track {
    background: var(--color-accent, #0072CE);
}

.pp-consent-toggle input:checked ~ .pp-consent-toggle-track::after {
    transform: translateX(clamp(16px, 1.5vw, 20px));
}

.pp-consent-toggle-locked .pp-consent-toggle-track {
    background: var(--color-accent, #0072CE);
    opacity: 0.5;
    cursor: not-allowed;
}

.pp-consent-toggle-locked .pp-consent-toggle-track::after {
    transform: translateX(clamp(16px, 1.5vw, 20px));
}

.pp-consent-toggle-label {
    font-family: var(--font-mono, monospace);
    font-size: clamp(10.5px, 0.8vw, 12px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft, #727F97);
    min-width: clamp(80px, 7vw, 100px);
}

.pp-consent-toggle input:checked ~ .pp-consent-toggle-label {
    color: var(--color-navy, #001E62);
}

.pp-consent-modal-foot {
    padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px);
    border-top: 1px solid var(--line, rgba(4, 22, 64, 0.10));
    background: var(--color-bg-alt, #F1F3F8);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 14px);
    justify-content: flex-end;
}

/* Botões DENTRO do modal de personalização: radius padrão do site (md), não pill */
.pp-consent-modal-foot .pp-consent-btn {
    border-radius: var(--radius-md, clamp(7.5px, 0.9vw, 16px));
}

@media (max-width: 540px) {
    .pp-consent-row {
        grid-template-columns: 1fr;
    }
    .pp-consent-modal-foot {
        justify-content: stretch;
    }
    .pp-consent-modal-foot .pp-consent-btn {
        flex: 1 1 auto;
    }
}

/* ---------- Botão flutuante pra reabrir preferências ---------- */
.pp-consent-reopen {
    position: fixed;
    left: clamp(8px, 1.4vw, 18px);
    bottom: clamp(8px, 1.4vw, 18px);
    top: auto;
    right: auto;
    z-index: 8500;
    width: clamp(36px, 3.4vw, 44px);
    height: clamp(36px, 3.4vw, 44px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #FFF);
    border: 1px solid var(--line-strong, rgba(4, 22, 64, 0.16));
    color: var(--color-navy, #001E62);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(4, 22, 64, 0.08));
    transition: transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.pp-consent-reopen:hover {
    transform: translateY(-2px);
    color: var(--color-accent, #0072CE);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(4, 22, 64, 0.14));
}

.pp-consent-reopen svg {
    width: 60%;
    height: 60%;
}

/* Mobile: biscoito no topo direito (não conflita com WhatsApp inferior) */
@media (max-width: 760px) {
    .pp-consent-reopen {
        left: auto;
        bottom: auto;
        top: clamp(64px, 9vw, 88px);
        right: clamp(8px, 2vw, 16px);
    }
}