/* ViralX VAST Ads v1.0 — Estilos del reproductor */

/* Overlay — cubre el contenedor .vdcn */
#vxvast-overlay {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    background: #000;
    z-index: 9999;
    overflow: hidden;
}

/* Vídeo del anuncio */
#vxvast-video {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain;
}

/* Contador regresivo (dentro de skip-area) */
#vxvast-countdown {
    color: rgba(255,255,255,.85);
    font: 13px/1 sans-serif;
    white-space: nowrap;
}
/* Etiqueta "Publicidad" — bottom-left, encima del cronómetro */
#vxvast-label {
    position: absolute;
    bottom: 56px; left: 8px;
    z-index: 10;
    background: rgba(0,0,0,.65);
    color: #fff;
    font: 600 11px/1 sans-serif;
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
    letter-spacing: .3px;
}

/* ── Barra inferior: cronómetro izquierda + saltar derecha ───── */
#vxvast-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 52px;
    z-index: 10;
    background: linear-gradient(transparent, rgba(0,0,0,.70));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}

/* Cronómetro — bottom-left, alineado con botón saltar */
#vxvast-timer {
    display: flex;
    align-items: center;
    gap: 1px;
    font: 600 14px/1.4 monospace;
    text-shadow: 0 1px 4px #000, 0 0 8px #000;
    white-space: nowrap;
    padding-top: 4px; /* evita que los números queden cortados por arriba */
    pointer-events: none;
}

/* Área de saltar — bottom-right */
#vxvast-skip-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón Saltar */
#vxvast-skip {
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
    font: 600 13px/1 sans-serif;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
#vxvast-skip:hover {
    background: rgba(255,255,255,.2);
    border-color: #fff;
}

/* Botón play manual (autoplay bloqueado) */
#vxvast-playbtn {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    gap: 10px;
}
#vxvast-playbtn svg {
    width: 70px; height: 70px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
#vxvast-playbtn p {
    color: #fff;
    font: 600 14px/1.4 sans-serif;
    margin: 0;
    text-align: center;
}

/* ── Companion Ad ─────────────────────────────────────────────── */
#vxvast-companion {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;   /* fondo transparente — opacidad desde JS */
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 40px;
    padding: 6px 16px 6px 6px;
    text-decoration: none;
    cursor: pointer;
    max-width: 92%;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    transition: opacity .15s, transform .15s;
    backdrop-filter: blur(4px);          /* efecto cristal sobre el vídeo */
    -webkit-backdrop-filter: blur(4px);
}
#vxvast-companion:hover {
    transform: translateX(-50%) translateY(-2px);
}
#vxvast-comp-img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.3);
    display: block;
}
#vxvast-comp-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#vxvast-comp-name {
    color: #fff;
    font: 600 13px/1.2 sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
#vxvast-comp-cta {
    display: inline-block;
    font: 700 12px/1 sans-serif;
    padding: 5px 12px;
    white-space: nowrap;
    letter-spacing: .3px;
}

/* Responsive móvil */
@media (max-width: 480px) {
    #vxvast-skip        { font-size: 11px; padding: 5px 10px; }
    #vxvast-countdown   { font-size: 11px; }
    #vxvast-playbtn svg { width: 56px; height: 56px; }
    #vxvast-companion   { padding: 5px 12px 5px 5px; gap: 8px; }
    #vxvast-comp-img    { width: 38px; height: 38px; }
    #vxvast-comp-name   { font-size: 11px; max-width: 130px; }
    #vxvast-comp-cta    { font-size: 11px; padding: 4px 9px; }
}