/**
 * Vislun Video System — diferenças visuais do modelo Vislun TV.
 *
 * Contém somente identidade e diferenças reais em relação à base Vislun.
 * Regras migradas de vislun-tv.css e public.css.
 */

/* =========================================================
   1. VARIÁVEIS OFICIAIS DO MODELO VISLUN TV
   ========================================================= */

.vislun-video-wrapper.vislun-video-vislun_tv {
    /* Identidade */
    --vislun-player-accent: #eebe0d;
    --vislun-player-accent-hover: #ffd42a;
    --vislun-player-white: #ffffff;
    --vislun-player-black: #000000;

    /*
     * O Vislun TV usa superfícies um pouco mais
     * escuras que o modelo Vislun comum.
     */
    --vislun-player-track: rgba(255, 255, 255, 0.34);
    --vislun-player-track-loaded: rgba(255, 255, 255, 0.52);
    --vislun-player-surface: rgba(0, 0, 0, 0.66);
    --vislun-player-surface-strong: rgba(0, 0, 0, 0.86);

    /* Gradiente inferior dos controles */
    --vislun-player-controls-gradient:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.20) 28%,
            rgba(0, 0, 0, 0.68) 72%,
            rgba(0, 0, 0, 0.88) 100%
        );

    /* Dimensões principais */
    --vislun-player-control-height: 36px;
    --vislun-player-control-gap: 6px;
    --vislun-player-control-padding-x: 12px;
    --vislun-player-control-padding-bottom: 8px;

    /* Barra de progresso */
    --vislun-player-progress-height: 2px;
    --vislun-player-progress-height-active: 3px;
    --vislun-player-progress-hit-area: 18px;
    --vislun-player-progress-thumb: 12px;

    /* Ícones e textos */
    --vislun-player-icon-size: 20px;
    --vislun-player-time-size: 12px;

    /* Percentual visual inicial do volume */
    --vislun-player-volume-level: 100%;

    /* Movimento */
    --vislun-player-transition-fast: 160ms ease;
    --vislun-player-transition-normal: 240ms ease;
}
.vislun-video-vislun_tv .vislun-video-cover-shade {
    background: rgba(0, 0, 0, 0.24);
}

.vislun-video-vislun_tv .vislun-video-cover-play {
    width: 82px;
    height: 56px;

    border-radius: 7px;

    background: #000000;

    box-shadow: none !important;
}

.vislun-video-vislun_tv .vislun-video-cover-play span {
    border-left-color: #eebe0d;
}

.vislun-video-vislun_tv .vislun-video-cover:hover .vislun-video-cover-shade {
    background: rgba(0, 0, 0, 0.24);
}

.vislun-video-vislun_tv .vislun-video-cover:hover .vislun-video-cover-play {
    background: #000000;

    box-shadow: none !important;
}

@media (max-width: 768px) {
    .vislun-video-vislun_tv .vislun-video-cover-play {
        width: 72px;
        height: 50px;
        border-radius: 7px;
    }
}