/**
 * Vislun Video System — controles comuns e orquestração visual responsiva
 *
 * PLAYER-MODELOS — MIGRAÇÃO CSS/JS — ZIP 2/3.
 * Regras movidas das autoridades antigas; não são cópias.
 */

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-row {
    position: relative;

    width: 100%;
    min-height: var(--vislun-player-control-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-controls-row {
    pointer-events: auto;
    cursor: default;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: var(--vislun-player-control-padding-bottom);

    background: transparent;

    cursor: default;
    pointer-events: auto;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-right {
    display: flex;
    align-items: center;

    min-width: 0;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left {
    gap: 0;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left
.vislun-player-rewind,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left
.vislun-player-toggle,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left
.vislun-player-forward {
    width: 36px;
    height: 36px;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-left
.vislun-player-time {
    margin-left: 4px;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-controls-right {
    gap: var(--vislun-player-control-gap);

    margin-left: auto;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-control {
    position: relative;

    flex: 0 0 auto;

    width: var(--vislun-player-control-height);
    height: var(--vislun-player-control-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: var(--vislun-player-white);

    appearance: none;
    -webkit-appearance: none;

    opacity: 0.96;

    transition:
        color var(--vislun-player-transition-fast),
        background var(--vislun-player-transition-fast),
        opacity var(--vislun-player-transition-fast),
        transform var(--vislun-player-transition-fast);

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-control > span {
    position: relative;

    display: block;

    width: var(--vislun-player-icon-size);
    height: var(--vislun-player-icon-size);

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-toggle:not(
    .vislun-player-center-toggle
) > span {
    width: 24px;
    height: 24px;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-center-toggle {
    position: absolute;
    inset: 0;

    z-index: 5;

    width: 68px;
    height: 68px;

    display: none;

    margin: auto;

    border-radius: 50%;

    background: transparent;
    color: var(--vislun-player-white);

    opacity: 1;

    filter:
        drop-shadow(
            0 2px 6px rgba(0, 0, 0, 0.74)
        );
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-center-toggle > span {
    width: 44px;
    height: 44px;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-seeking
.vislun-player-center-toggle {
    display: none !important;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback {
    position: absolute;
    top: 0;
    bottom: 0;

    z-index: 74;

    width: 38%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: var(--vislun-player-white);

    opacity: 0;
    visibility: hidden;

    box-sizing: border-box;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback-backward {
    left: 0;

    border-radius:
        0
        18px
        18px
        0;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.72) 40%,
            rgba(0, 0, 0, 0.46) 70%,
            rgba(0, 0, 0, 0.16) 90%,
            rgba(0, 0, 0, 0) 100%
        );
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback-forward {
    right: 0;

    border-radius:
        18px
        0
        0
        18px;

    background:
        linear-gradient(
            to left,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.42) 38%,
            rgba(0, 0, 0, 0.20) 70%,
            rgba(0, 0, 0, 0) 100%
        );
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback > span {
    display: block;

    width: 25px;
    height: 25px;

    background-color: currentColor;

    filter:
        drop-shadow(
            0 2px 6px rgba(0, 0, 0, 0.72)
        );

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    opacity: 0;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback.is-visible {
    visibility: visible;

    animation:
        vislun-player-skip-feedback-side
        620ms ease-out both;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback-backward.is-visible
> span {
    animation:
        vislun-player-skip-feedback-spin-backward
        620ms ease-out both;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-skip-feedback-forward.is-visible
> span {
    animation:
        vislun-player-skip-feedback-spin-forward
        620ms ease-out both;
}

@keyframes vislun-player-skip-feedback-side {
    0% {
        opacity: 0.88;
    }

    68% {
        opacity: 0.88;
    }

    100% {
        opacity: 0;
    }
}

@keyframes vislun-player-skip-feedback-spin-backward {
    0% {
        opacity: 1;

        transform:
            rotate(0deg)
            scale(0.76);
    }

    68% {
        opacity: 1;

        transform:
            rotate(-340deg)
            scale(1.08);
    }

    100% {
        opacity: 0;

        transform:
            rotate(-360deg)
            scale(1);
    }
}

@keyframes vislun-player-skip-feedback-spin-forward {
    0% {
        opacity: 1;

        transform:
            rotate(0deg)
            scale(0.76);
    }

    68% {
        opacity: 1;

        transform:
            rotate(340deg)
            scale(1.08);
    }

    100% {
        opacity: 0;

        transform:
            rotate(360deg)
            scale(1);
    }
}

.vislun-video-wrapper.vislun-video-custom-player
video[data-vislun-player-ui-active="1"] {
    touch-action: manipulation;
}

@media (
    pointer: coarse
) and (
    max-height: 520px
) and (
    orientation: landscape
) {
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-skip-feedback > span {
        width: 29px;
        height: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-skip-feedback.is-visible {
        animation-duration: 520ms;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-skip-feedback-backward.is-visible
    > span,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-skip-feedback-forward.is-visible
    > span {
        animation-name:
            vislun-player-skip-feedback-icon-reduced;

        animation-duration: 520ms;
    }
}

@keyframes vislun-player-skip-feedback-icon-reduced {
    0% {
        opacity: 1;

        transform: scale(0.86);
    }

    70% {
        opacity: 1;

        transform: scale(1);
    }

    100% {
        opacity: 0;

        transform: scale(1);
    }
}

@media (max-width: 768px) {
        .vislun-video-wrapper.vislun-video-custom-player {
        --vislun-player-control-height: 38px;
        --vislun-player-control-gap: 3px;
        --vislun-player-control-padding-x: 8px;
        --vislun-player-control-padding-bottom: 6px;
        --vislun-player-icon-size: 18px;
        --vislun-player-time-size: 11px;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-row {
        gap: 4px;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-time {
        min-width: 64px;
        padding: 0 2px;
    }

}

@media (max-width: 520px) {
    
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-volume {
        display: none;
    }

    
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-rewind,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-forward {
        display: none;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-center-toggle {
        display: inline-flex;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-center-toggle {
        display: inline-flex;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-time {
        min-width: 56px;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-time {
        margin-left: 2px;
    }
}

@media (
    hover: none
) and (
    pointer: coarse
) {
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-volume,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-settings-toggle,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-settings-menu {
        display: none !important;
    }
}

@media (
    pointer: coarse
) and (
    max-height: 520px
) and (
    orientation: landscape
) {
    
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-video-frame:is(
        :fullscreen,
        :-webkit-full-screen,
        .is-vislun-ios-fullscreen
    )
    .vislun-player-volume {
        display: flex !important;
    }

    
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-video-frame:is(
        :fullscreen,
        :-webkit-full-screen,
        .is-vislun-ios-fullscreen
    )
    .vislun-player-volume-control.is-volume-open
    .vislun-player-volume {
        opacity: 1;
        visibility: visible;

        transform:
            translate3d(-50%, 0, 0);

        pointer-events: auto;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-video-frame:is(
        :fullscreen,
        :-webkit-full-screen,
        .is-vislun-ios-fullscreen
    )
    .vislun-player-settings-toggle {
        display: inline-flex !important;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-video-frame:is(
        :fullscreen,
        :-webkit-full-screen,
        .is-vislun-ios-fullscreen
    )
    .vislun-player-settings-menu:not([hidden]) {
        display: block !important;
    }

    
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-rewind,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-forward {
        display: none;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-center-toggle {
        width: 76px;
        height: 76px;

        display: inline-flex;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-center-toggle > span {
        width: 50px;
        height: 50px;
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-controls-left
    .vislun-player-time {
        margin-left: 2px;
    }
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-control > span {
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-rewind > span {
    --vislun-player-rewind-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M368.46-522.38h-33.84q-8.4 0-13.9-5.68-5.49-5.67-5.49-14.34 0-8.68 5.67-14.02 5.66-5.35 14.33-5.35h54.27q8.68 0 14.01 5.33 5.34 5.34 5.34 14.06v203.15q0 8.83-5.75 14.61-5.75 5.77-14.54 5.77t-14.44-5.77q-5.66-5.78-5.66-14.61v-183.15Zm140.46 203.53q-17.93 0-30.39-12.45-12.45-12.46-12.45-30.39v-157.23q0-17.93 12.45-30.39 12.46-12.46 30.39-12.46h77.62q17.93 0 30.39 12.46 12.45 12.46 12.45 30.39v157.23q0 17.93-12.45 30.39-12.46 12.45-30.39 12.45h-77.62Zm2.16-40.38h73.3q2.31 0 3.47-1.15 1.15-1.16 1.15-3.47v-153.92q0-2.31-1.15-3.46-1.16-1.15-3.47-1.15h-73.3q-2.31 0-3.47 1.15-1.15 1.15-1.15 3.46v153.92q0 2.31 1.15 3.47 1.16 1.15 3.47 1.15ZM480.02-100q-70.79 0-132.63-26.46-61.85-26.46-108.16-72.77-46.31-46.31-72.77-108.14Q140-369.2 140-440q0-9.64 6.58-16.17 6.58-6.52 16.31-6.52 9.73 0 16.11 6.52 6.39 6.53 6.39 16.17 0 123.11 85.74 208.86 85.74 85.75 208.83 85.75 123.09 0 208.87-85.74t85.78-208.83q0-123.09-84.03-208.87-84.04-85.78-206.73-85.78h-22.39l55.46 55.46q6.7 6.69 6.89 16 .19 9.3-6.41 16-7.55 7.07-16.48 7.07-8.92 0-15.61-7.07l-91.54-91.93q-8.61-8.58-8.61-20.02t8.61-20.44l92.92-92.15q6.08-6.08 15.5-6.27 9.43-.19 15.93 5.89 6.03 6.46 5.84 15.69-.19 9.23-6.27 15.69L457-780h23q70.8 0 132.63 26.46t108.14 72.77q46.31 46.31 72.77 108.13Q820-510.81 820-440.02t-26.46 132.63q-26.46 61.85-72.77 108.16-46.31 46.31-108.13 72.77Q550.81-100 480.02-100Z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        var(--vislun-player-rewind-icon);

    mask-image:
        var(--vislun-player-rewind-icon);
}

.vislun-video-wrapper.vislun-video-custom-player {
    --vislun-player-play-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6l10 6l-10 6Z' stroke='white' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --vislun-player-pause-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.75 5.5C7.7835 5.5 7 6.2835 7 7.25V16.75C7 17.7165 7.7835 18.5 8.75 18.5 9.7165 18.5 10.5 17.7165 10.5 16.75V7.25C10.5 6.2835 9.7165 5.5 8.75 5.5zM15.25 5.5C14.2835 5.5 13.5 6.2835 13.5 7.25V16.75C13.5 17.7165 14.2835 18.5 15.25 18.5 16.2165 18.5 17 17.7165 17 16.75V7.25C17 6.2835 16.2165 5.5 15.25 5.5z' fill='white'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-toggle > span {
    -webkit-mask-image:
        var(--vislun-player-play-icon);

    mask-image:
        var(--vislun-player-play-icon);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-toggle.is-playing > span {
    -webkit-mask-image:
        var(--vislun-player-pause-icon);

    mask-image:
        var(--vislun-player-pause-icon);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-forward > span {
    --vislun-player-forward-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M480.02-100q-70.79 0-132.63-26.46-61.85-26.46-108.16-72.77-46.31-46.31-72.77-108.13Q140-369.19 140-439.98t26.46-132.63q26.46-61.85 72.77-108.16 46.31-46.31 108.14-72.77Q409.2-780 480-780h23l-60.08-60.08q-6.07-6.07-6.07-15.5 0-9.42 5.64-15.49 6.89-6.47 15.82-6.58 8.92-.12 15 5.96l92.92 92.15q8.61 9 8.61 20.44 0 11.44-8.61 20.02l-91.54 91.93q-6.69 7.07-15.61 7.07-8.93 0-16.48-7.07-6.6-6.7-6.41-16 .19-9.31 6.89-16l55.46-55.46h-22q-123.08 0-207.12 85.74-84.03 85.74-84.03 208.83 0 123.09 85.74 208.87t208.83 85.78q123.09 0 208.87-85.75T774.61-440q0-9.64 6.59-16.17 6.58-6.52 16.3-6.52 9.73 0 16.11 6.52Q820-449.64 820-440q0 70.8-26.46 132.63t-72.77 108.14q-46.31 46.31-108.13 72.77Q550.81-100 480.02-100ZM368.46-522.38h-33.84q-8.4 0-13.9-5.68-5.49-5.67-5.49-14.34 0-8.68 5.67-14.02 5.66-5.35 14.33-5.35h54.27q8.68 0 14.01 5.33 5.34 5.34 5.34 14.06v203.15q0 8.83-5.75 14.61-5.75 5.77-14.54 5.77t-14.44-5.77q-5.66-5.78-5.66-14.61v-183.15Zm140.46 203.53q-17.93 0-30.39-12.45-12.45-12.46-12.45-30.39v-157.23q0-17.93 12.45-30.39 12.46-12.46 30.39-12.46h77.62q17.93 0 30.39 12.46 12.45 12.46 12.45 30.39v157.23q0 17.93-12.45 30.39-12.46 12.45-30.39 12.45h-77.62Zm2.16-40.38h73.3q2.31 0 3.47-1.15 1.15-1.16 1.15-3.47v-153.92q0-2.31-1.15-3.46-1.16-1.15-3.47-1.15h-73.3q-2.31 0-3.47 1.15-1.15 1.15-1.15 3.46v153.92q0 2.31 1.15 3.47 1.16 1.15 3.47 1.15Z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        var(--vislun-player-forward-icon);

    mask-image:
        var(--vislun-player-forward-icon);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-volume-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.4-.8v7.6A4.4 4.4 0 0 0 17.5 12a4.4 4.4 0 0 0-2.1-3.8Zm0-3.4v2.1A6.4 6.4 0 0 1 19.5 12a6.4 6.4 0 0 1-4.1 5.1v2.1A8.4 8.4 0 0 0 21.5 12a8.4 8.4 0 0 0-6.1-7.2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.4-.8v7.6A4.4 4.4 0 0 0 17.5 12a4.4 4.4 0 0 0-2.1-3.8Zm0-3.4v2.1A6.4 6.4 0 0 1 19.5 12a6.4 6.4 0 0 1-4.1 5.1v2.1A8.4 8.4 0 0 0 21.5 12a8.4 8.4 0 0 0-6.1-7.2Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-volume-toggle.is-muted > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.2.1 1.4-1.4 2 2 2-2 1.4 1.4-2 2 2 2-1.4 1.4-2-2-2 2-1.4-1.4 2-2-2-2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 9v6h4l5 4V5L8 9H4Zm11.2.1 1.4-1.4 2 2 2-2 1.4 1.4-2 2 2 2-1.4 1.4-2-2-2 2-1.4-1.4 2-2-2-2Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-settings-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.4 13a7.4 7.4 0 0 0 .1-1 7.4 7.4 0 0 0-.1-1l2.1-1.6-2-3.4-2.5 1a7.6 7.6 0 0 0-1.7-1L15 3.3h-4L10.6 6a7.6 7.6 0 0 0-1.7 1L6.5 6l-2 3.4L6.6 11a7.4 7.4 0 0 0-.1 1 7.4 7.4 0 0 0 .1 1l-2.1 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 1.7 1l.4 2.7h4l.4-2.7a7.6 7.6 0 0 0 1.7-1l2.4 1 2-3.4-2.1-1.6ZM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.4 13a7.4 7.4 0 0 0 .1-1 7.4 7.4 0 0 0-.1-1l2.1-1.6-2-3.4-2.5 1a7.6 7.6 0 0 0-1.7-1L15 3.3h-4L10.6 6a7.6 7.6 0 0 0-1.7 1L6.5 6l-2 3.4L6.6 11a7.4 7.4 0 0 0-.1 1 7.4 7.4 0 0 0 .1 1l-2.1 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 1.7 1l.4 2.7h4l.4-2.7a7.6 7.6 0 0 0 1.7-1l2.4 1 2-3.4-2.1-1.6ZM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-pip[hidden] {
    display: none !important;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-pip > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 11h-8v6h8v-6Zm2-8H3C1.9 3 1 3.9 1 5v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H3V5h18v14Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 11h-8v6h8v-6Zm2-8H3C1.9 3 1 3.9 1 5v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H3V5h18v14Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-cast[hidden] {
    display: none !important;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-cast > span {
    --vislun-player-cast-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M480-480Zm320 320H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm-720 0v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        var(--vislun-player-cast-icon);

    mask-image:
        var(--vislun-player-cast-icon);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-cast.is-cast-connecting,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-cast.is-cast-connected {
    color: var(--vislun-player-accent);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-share-toggle > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18 16.1c-.8 0-1.5.3-2 .8L8.9 12.8c.1-.3.1-.5.1-.8s0-.5-.1-.8L16 7.1c.5.5 1.2.8 2 .8a3 3 0 1 0-3-3c0 .3 0 .5.1.8L8 9.8A3 3 0 1 0 8 14.2l7.1 4.1c-.1.2-.1.5-.1.7a3 3 0 1 0 3-2.9Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18 16.1c-.8 0-1.5.3-2 .8L8.9 12.8c.1-.3.1-.5.1-.8s0-.5-.1-.8L16 7.1c.5.5 1.2.8 2 .8a3 3 0 1 0-3-3c0 .3 0 .5.1.8L8 9.8A3 3 0 1 0 8 14.2l7.1 4.1c-.1.2-.1.5-.1.7a3 3 0 1 0 3-2.9Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-fullscreen > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M5 5h6v2H7v4H5V5Zm8 0h6v6h-2V7h-4V5ZM5 13h2v4h4v2H5v-6Zm12 0h2v6h-6v-2h4v-4Z'/%3E%3C/svg%3E");
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-fullscreen.is-fullscreen > span {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 5v4H5v2h6V5H9Zm6 0h-2v6h6V9h-4V5ZM5 13v2h4v4h2v-6H5Zm8 0v6h2v-4h4v-2h-6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 5v4H5v2h6V5H9Zm6 0h-2v6h6V9h-4V5ZM5 13v2h4v4h2v-6H5Zm8 0v6h2v-4h4v-2h-6Z'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-control:hover {
        color: var(--vislun-player-accent);

        background: rgba(255, 255, 255, 0.08);
    }

    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-time:hover {
        color: var(--vislun-player-accent);
    }
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-settings-toggle[aria-expanded="true"] {
    color: var(--vislun-player-accent);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-pip.is-picture-in-picture {
    background: var(--vislun-player-accent);
    color: var(--vislun-player-black);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-control:focus-visible,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-time:focus-visible,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-progress:focus-visible,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-settings-menu button:focus-visible {
    outline: 2px solid var(--vislun-player-accent);
    outline-offset: 2px;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active {
    
    --vislun-player-top-motion: 0px;
    --vislun-player-bottom-motion: 0px;

    opacity: 1;
    visibility: visible;

    pointer-events: none;

    transition:
        opacity var(--vislun-player-transition-normal),
        visibility var(--vislun-player-transition-normal);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-progress,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-volume-control,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-control,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-time,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-volume-range,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-settings-menu:not([hidden]),
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-settings-menu:not([hidden])
button {
    pointer-events: auto;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-progress,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-control,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-time,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-settings-menu
button {
    cursor: pointer;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-interactive
.vislun-player-volume-range {
    cursor: pointer;
}

.vislun-video-wrapper.vislun-video-custom-player
video[data-vislun-player-ui-active="1"] {
    cursor: pointer;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active
.vislun-player-progress:hover
.vislun-player-progress-track,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active
.vislun-player-progress:focus-visible
.vislun-player-progress-track,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-seeking
.vislun-player-progress-track {
    height: var(--vislun-player-progress-height-active);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-controls-hidden {
    
    --vislun-player-top-motion: -22px;
    --vislun-player-bottom-motion: 22px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-paused,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-settings-open,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-seeking,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-volume-open,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active.is-share-open {
    --vislun-player-top-motion: 0px;
    --vislun-player-bottom-motion: 0px;

    opacity: 1;
    visibility: visible;

    pointer-events: none;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-header,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-share-toggle {
    translate:
        0
        var(--vislun-player-top-motion, 0px);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-ui-gradient,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-progress-area,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-controls-row,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-settings-menu {
    translate:
        0
        var(--vislun-player-bottom-motion, 0px);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-header,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-ui-gradient,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-progress-area,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-controls-row,
.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-settings-menu {
    transition:
        translate var(--vislun-player-transition-normal);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui
> .vislun-player-share-toggle {
    transition:
        color var(--vislun-player-transition-fast),
        background var(--vislun-player-transition-fast),
        opacity var(--vislun-player-transition-fast),
        transform var(--vislun-player-transition-fast),
        translate var(--vislun-player-transition-normal);
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active
.vislun-player-progress-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.vislun-video-wrapper.vislun-video-custom-player
.vislun-player-ui.is-active
.vislun-player-control:active {
    transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-ui,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-control,
    .vislun-video-wrapper.vislun-video-custom-player
    .vislun-player-progress-track {
        transition: none !important;
    }
}