/**
 * Cookie Banner
 * Desktop  : barra horizontal fixa (bottom bar) — full-width, acima do player
 * Mobile   : bottom sheet nativo (estilo iOS/Android)
 * Tema     : dark (padrão) · light (body.theme-light)
 * Tokens   : --primary-color, --primary-rgb, --bg-*, --text-*, --border-color
 */

/* ═══════════════════════════════════════════════════════════════════
   BASE COMUM
   ═══════════════════════════════════════════════════════════════════ */
.cookie-banner {
    position: fixed;
    z-index: 10500;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.36s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── Visível ── */
.cookie-banner.cookie-banner--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Saindo ── */
.cookie-banner.cookie-banner--hiding {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — BARRA HORIZONTAL (≥ 769px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* ── Container principal ── */
    .cookie-banner {
        /* Fica colada acima do player */
        bottom: var(--player-height, 90px);
        left: 0;
        right: 0;
        width: 100%;

        flex-direction: row;
        align-items: center;
        gap: 0;

        /* Entrada: sobe do player */
        transform: translateY(100%);

        /* Visual dark por padrão */
        background: rgba(12, 12, 14, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);

        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.05),
            0 -8px 40px rgba(0, 0, 0, 0.5);

        /* Padding interno lateral */
        padding: 0 32px;
        min-height: 72px;
    }

    /* ── Visível desktop ── */
    .cookie-banner.cookie-banner--visible {
        transform: translateY(0);
    }

    /* ── Saindo desktop ── */
    .cookie-banner.cookie-banner--hiding {
        transform: translateY(100%);
    }

    /* ── Handle pill — hidden no desktop ── */
    .cookie-banner__handle {
        display: none;
    }

    /* ── Ícone do app ── */
    .cookie-banner__header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 20px 0 0;
        flex-shrink: 0;
    }

    .cookie-banner__app-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--primary-color, #9968eb);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 2px 8px rgba(var(--primary-rgb, 153, 104, 235), 0.35);
    }

    .cookie-banner__app-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cookie-banner__app-icon--placeholder svg {
        width: 20px;
        height: 20px;
        color: #fff;
    }

    .cookie-banner__app-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .cookie-banner__app-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary, #ffffff);
        margin: 0;
        line-height: 1.2;
        letter-spacing: 0.2px;
        text-transform: uppercase;
    }

    .cookie-banner__app-host {
        font-size: 11px;
        font-weight: 400;
        color: var(--text-muted, rgba(255, 255, 255, 0.4));
        margin: 0;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* ── Separador vertical ── */
    .cookie-banner__divider {
        width: 1px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 20px;
        flex-shrink: 0;
        align-self: center;
    }

    /* ── Texto descritivo ── */
    .cookie-banner__desc {
        flex: 1;
        font-size: 13px;
        line-height: 1.55;
        color: var(--text-secondary, rgba(255, 255, 255, 0.6));
        margin: 0;
        padding: 0;
        min-width: 0;
    }

    .cookie-banner__privacy-link {
        color: var(--primary-color, #9968eb);
        text-decoration: none;
        font-weight: 500;
        white-space: nowrap;
        transition: opacity 0.15s;
    }

    .cookie-banner__privacy-link:hover {
        opacity: 0.8;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* ── Ações em linha ── */
    .cookie-banner__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 0 0 0 24px;
        flex-shrink: 0;
    }

    /* ── Botão base ── */
    .cookie-banner__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 22px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.1px;
        border-radius: 10px;
        cursor: pointer;
        border: none;
        outline: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition:
            opacity 0.18s ease,
            transform 0.15s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
    }

    .cookie-banner__btn:active {
        transform: scale(0.97);
    }

    /* ── Aceitar todos — filled com cor primária ── */
    .cookie-banner__btn--primary {
        background: var(--primary-color, #9968eb);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(var(--primary-rgb, 153, 104, 235), 0.35);
    }

    .cookie-banner__btn--primary:hover {
        opacity: 0.88;
        box-shadow: 0 6px 20px rgba(var(--primary-rgb, 153, 104, 235), 0.5);
        transform: translateY(-1px);
    }

    /* ── Apenas essenciais — ghost com borda primária ── */
    .cookie-banner__btn--secondary {
        background: transparent;
        color: var(--text-secondary, rgba(255, 255, 255, 0.65));
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: none;
    }

    .cookie-banner__btn--secondary:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary, #ffffff);
        border-color: rgba(255, 255, 255, 0.28);
    }

    /* ═══ LIGHT MODE — desktop ═══ */
    body.theme-light .cookie-banner {
        background: rgba(248, 248, 250, 0.97);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow:
            0 -1px 0 rgba(0, 0, 0, 0.06),
            0 -8px 32px rgba(0, 0, 0, 0.1);
    }

    body.theme-light .cookie-banner__app-name {
        color: #1c1c1e;
    }

    body.theme-light .cookie-banner__app-host {
        color: rgba(0, 0, 0, 0.4);
    }

    body.theme-light .cookie-banner__desc {
        color: rgba(0, 0, 0, 0.6);
    }

    body.theme-light .cookie-banner__divider {
        background: rgba(0, 0, 0, 0.1);
    }

    body.theme-light .cookie-banner__btn--secondary {
        color: rgba(0, 0, 0, 0.55);
        border-color: rgba(0, 0, 0, 0.15);
    }

    body.theme-light .cookie-banner__btn--secondary:hover {
        background: rgba(0, 0, 0, 0.05);
        color: rgba(0, 0, 0, 0.8);
        border-color: rgba(0, 0, 0, 0.28);
    }

    body.theme-light .cookie-banner__privacy-link {
        color: var(--primary-color, #9968eb);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — BOTTOM SHEET NATIVO (≤ 768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .cookie-banner {
        /* Gruda no topo da barra de nav inferior */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;

        flex-direction: column;
        gap: 0;

        /* Entrada: sobe do fundo */
        transform: translateY(100%);

        background: var(--surface-container, #19191f);
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        overflow: hidden;

        /* Padding para não ficar atrás da nav inferior */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));

        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.07),
            0 -12px 40px rgba(0, 0, 0, 0.5);

        /* Fica abaixo da nav (z: 9999) mas visível acima de tudo mais */
        z-index: 9998;
    }

    /* ── Visível mobile ── */
    .cookie-banner.cookie-banner--visible {
        transform: translateY(0);
    }

    /* ── Saindo mobile ── */
    .cookie-banner.cookie-banner--hiding {
        transform: translateY(80px);
    }

    /* ── Handle pill arraste ── */
    .cookie-banner__handle {
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        margin: 14px auto 0;
        flex-shrink: 0;
    }

    /* ── Cabeçalho app nativo ── */
    .cookie-banner__header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 20px 16px;
    }

    .cookie-banner__app-icon {
        width: 46px;
        height: 46px;
        border-radius: 11px;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--primary-color, #9968eb);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .cookie-banner__app-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cookie-banner__app-icon--placeholder svg {
        width: 26px;
        height: 26px;
        color: #fff;
    }

    .cookie-banner__app-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .cookie-banner__app-name {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary, #ffffff);
        margin: 0;
        line-height: 1.2;
        letter-spacing: -0.2px;
    }

    .cookie-banner__app-host {
        font-size: 12px;
        font-weight: 400;
        color: var(--text-muted, rgba(255, 255, 255, 0.45));
        margin: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Separador horizontal ── */
    .cookie-banner__divider {
        height: 0.5px;
        width: auto;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 20px;
        flex-shrink: 0;
    }

    /* ── Texto descritivo ── */
    .cookie-banner__desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--text-secondary, rgba(255, 255, 255, 0.65));
        margin: 0;
        padding: 16px 20px;
    }

    .cookie-banner__privacy-link {
        color: var(--primary-color, #9968eb);
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.15s;
    }

    .cookie-banner__privacy-link:hover {
        opacity: 0.8;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* ── Ações empilhadas ── */
    .cookie-banner__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px 20px 8px;
    }

    /* ── Botão base ── */
    .cookie-banner__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.1px;
        border-radius: 14px;
        cursor: pointer;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        transition:
            opacity 0.18s ease,
            transform 0.15s ease,
            background 0.2s ease;
        white-space: nowrap;
    }

    .cookie-banner__btn:active {
        transform: scale(0.97);
    }

    /* ── Aceitar todos ── */
    .cookie-banner__btn--primary {
        background: var(--primary-color, #9968eb);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(var(--primary-rgb, 153, 104, 235), 0.35);
    }

    .cookie-banner__btn--primary:hover {
        opacity: 0.88;
    }

    /* ── Apenas essenciais ── */
    .cookie-banner__btn--secondary {
        background: transparent;
        color: var(--primary-color, #9968eb);
        border: 1.5px solid var(--primary-color, #9968eb);
        box-shadow: none;
    }

    .cookie-banner__btn--secondary:hover {
        background: rgba(var(--primary-rgb, 153, 104, 235), 0.08);
    }

    /* ═══ LIGHT MODE — mobile ═══ */
    body.theme-light .cookie-banner {
        background: rgba(242, 242, 247, 0.98);
        box-shadow:
            0 -1px 0 rgba(0, 0, 0, 0.08),
            0 -12px 40px rgba(0, 0, 0, 0.1);
    }

    body.theme-light .cookie-banner__handle {
        background: rgba(0, 0, 0, 0.18);
    }

    body.theme-light .cookie-banner__app-name {
        color: #1c1c1e;
    }

    body.theme-light .cookie-banner__app-host {
        color: rgba(0, 0, 0, 0.45);
    }

    body.theme-light .cookie-banner__desc {
        color: rgba(0, 0, 0, 0.6);
    }

    body.theme-light .cookie-banner__divider {
        background: rgba(0, 0, 0, 0.1);
    }

    body.theme-light .cookie-banner__btn--secondary {
        color: var(--primary-color, #9968eb);
        border-color: var(--primary-color, #9968eb);
    }

    body.theme-light .cookie-banner__btn--secondary:hover {
        background: rgba(var(--primary-rgb, 153, 104, 235), 0.08);
    }

    body.theme-light .cookie-banner__privacy-link {
        color: var(--primary-color, #9968eb);
    }
}

/* ─────────────────────────────────────────────────────────────────
   Safe area overlay (compatibilidade com variables.css)
   ───────────────────────────────────────────────────────────────── */
.cookie-consent {
    padding-bottom: var(--safe-area-bottom);
}