/*
 * A publicidade antes do vídeo.
 *
 * Ela ocupa o mesmo palco do player e fica por cima de tudo enquanto roda —
 * inclusive da barra de compartilhar, que não faz sentido durante o anúncio.
 * Quando termina, a caixa some do DOM e o palco volta a ser do vídeo.
 */

.bandvad {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #05070c;
    display: block;
    opacity: 0;
    transition: opacity .25s ease;
}

.bandvad.is-tocando { opacity: 1; }

/* Enquanto o anúncio roda, nada mais do player disputa a tela. */
.bandvid.is-anuncio .bandvid__share,
.bandvid.is-anuncio .bandvid__controles,
.bandvid.is-anuncio .bandvid__selo,
.bandvid.is-anuncio .bandvid__titulo { display: none; }

.bandvad__quadro,
.bandvad__quadro iframe,
.bandvad__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bandvad__video { object-fit: contain; background: #05070c; }

/* ── O selo "Publicidade" ────────────────────────────────────────────── */

.bandvad__marca {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 140px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(5, 7, 12, .62);
    backdrop-filter: blur(6px);
    color: #fff;
    font: 600 11px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── O botão do anunciante ───────────────────────────────────────────── */

.bandvad__cta {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    color: #101216;
    font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .18s ease, background .18s ease;
}

.bandvad__cta:hover,
.bandvad__cta:focus-visible {
    background: var(--bv-vermelho, #d8151f);
    color: #fff;
    transform: translateY(-1px);
}

.bandvad__cta span { font-size: 16px; line-height: 1; }

/* ── O pé: contagem, som e pular ─────────────────────────────────────── */

.bandvad__pe {
    position: absolute;
    right: 12px;
    bottom: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bandvad__conta {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(5, 7, 12, .62);
    backdrop-filter: blur(6px);
    color: #e9e9ec;
    font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.bandvad__conta:empty { display: none; }

.bandvad__som,
.bandvad__pular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(5, 7, 12, .62);
    backdrop-filter: blur(6px);
    color: #fff;
    font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.bandvad__som svg { width: 15px; height: 15px; }

.bandvad__som:hover,
.bandvad__pular:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6);
}

.bandvad__som[hidden],
.bandvad__pular[hidden] { display: none; }

/* ── A linha do tempo do anúncio ─────────────────────────────────────── */

.bandvad__linha {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 3;
    background: rgba(255, 255, 255, .18);
}

.bandvad__cheio {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bv-vermelho, #d8151f);
    transition: width .25s linear;
}

/* ── Celular ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .bandvad__marca { font-size: 10px; padding: 4px 8px; max-width: calc(100% - 120px); }
    .bandvad__cta { padding: 7px 11px; font-size: 12px; }
    .bandvad__pe { right: 8px; bottom: 14px; gap: 6px; }
    .bandvad__conta,
    .bandvad__som,
    .bandvad__pular { padding: 7px 10px; font-size: 11px; }
}

/* Enquanto o anúncio roda, o botão de play da matéria não existe. */
.bandvid.is-anuncio .bandvid__play { display: none; }