/**
 * Mufasa LGPD/GDPR – Frontend Banner
 */

/* ── Animations (bounceInUp / bounceOutDown) ───────────────────────────── */
@keyframes mufasaLgpdBounceInUp {
    from { opacity: 0; transform: translate3d(0, 3000px, 0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: translate3d(0, -20px, 0); }
    75%  { transform: translate3d(0, 10px, 0); }
    90%  { transform: translate3d(0, -5px, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes mufasaLgpdBounceOutDown {
    20%      { transform: translate3d(0, 10px, 0); }
    40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); }
    to       { opacity: 0; transform: translate3d(0, 2000px, 0); }
}

/* ── Banner base ────────────────────────────────────────────────────────── */
:root {
    /* Fallback se --lgpd-accent inline não vier (contraste OK em fundo branco) */
    --lgpd-accent: #6d2840;
    --lgpd-z: 99999;
    --lgpd-btn-min: 108px;
}

.mufasa-lgpd-banner {
    position: fixed;
    z-index: var(--lgpd-z);
    left: 16px;
    right: 16px;
    margin: 0 auto;
    max-width: 1200px;
    min-height: 58px;
    background-color: #fff;
    border: solid 1px #eeeeee;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    display: none;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mufasa-lgpd-banner *,
.mufasa-lgpd-banner *::before,
.mufasa-lgpd-banner *::after {
    box-sizing: border-box;
}

/* Posição */
.mufasa-lgpd-bottom { bottom: 16px; }
.mufasa-lgpd-top    { top: 16px; }

/* JS adiciona .is-visible quando não há consentimento */
.mufasa-lgpd-banner.is-visible {
    display: flex !important;
    animation: mufasaLgpdBounceInUp 1s both;
}

/* JS adiciona .is-leaving no clique */
.mufasa-lgpd-banner.is-leaving {
    display: flex !important;
    animation: mufasaLgpdBounceOutDown 1s both;
}

/* ── Container interno ──────────────────────────────────────────────────── */
.mufasa-lgpd-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: inherit;
    padding: 2px 0;
}

/* ── Texto ──────────────────────────────────────────────────────────────── */
.mufasa-lgpd-text {
    vertical-align: middle;
    padding: 12px 12px 12px 14px;
    flex: 1;
    min-width: 0;
}

.mufasa-lgpd-title {
    display: none;
}

.mufasa-lgpd-message {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

.mufasa-lgpd-message a,
.mufasa-lgpd-link {
    color: var(--lgpd-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
}

.mufasa-lgpd-message a:hover,
.mufasa-lgpd-link:hover {
    opacity: 0.88;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.mufasa-lgpd-actions {
    padding: 12px 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Botões (mesma altura, largura mínima igual — evita tema WP sobrescrever) ─ */
.mufasa-lgpd-banner .mufasa-lgpd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    height: 36px;
    min-width: var(--lgpd-btn-min);
    padding: 0 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Seletor completo: bate tema que usa button / gradiente / -webkit-text-fill-color */
.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-primary {
    background-color: #111 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid #111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-primary:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-primary:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-secondary {
    background-color: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    border: 1px solid #111 !important;
    text-decoration: none;
    opacity: 1 !important;
    text-shadow: none !important;
}

.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-secondary:hover {
    background-color: #f0f0f0 !important;
    border-color: #000 !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

.mufasa-lgpd-banner button.mufasa-lgpd-btn.mufasa-lgpd-btn-secondary:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Responsivo (≤ 800px) ───────────────────────────────────────────────── */
@media only screen and (max-width: 800px) {
    .mufasa-lgpd-inner {
        flex-flow: column;
    }

    .mufasa-lgpd-text {
        padding: 12px 12px 0 12px;
    }

    .mufasa-lgpd-actions {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
    }

    .mufasa-lgpd-banner .mufasa-lgpd-btn {
        width: 100%;
        min-width: 0;
    }
}