.co-live-channel-source-youtube .co-live-channel-embed{
    background:transparent;
    border:0;
    backdrop-filter:none;
    overflow:visible;
}

.co-live-channel-source-youtube .co-live-channel-embed iframe{
    min-height:0;
    border-radius:0;
}

.co-live-channel-yt{
    width:100%;
}

.co-live-channel-yt-main{
    width:100%;
}

.co-live-channel-yt-player{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:18px;
    overflow:hidden;
    background:#000;
    box-shadow:0 18px 40px rgba(0, 0, 0, .3);
}

.co-live-channel-yt-player iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    border:0;
}

.co-live-channel-yt-main-meta{
    margin:14px 0 0;
}

.co-live-channel-yt-main-title{
    margin:0;
    color:#fff;
    font-size:clamp(1rem, 1.6vw, 1.25rem);
    font-weight:700;
    line-height:1.4;
    letter-spacing:-.01em;
}

.co-live-channel-yt-grid{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:26px;
}

.co-live-channel-yt-viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
}

.co-live-channel-yt-slides{
    display:flex;
}

.co-live-channel-yt-slide{
    display:none;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    width:100%;
}

.co-live-channel-yt-slide.is-active{
    display:grid;
}

.co-live-channel-yt-card{
    display:block;
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
}

.co-live-channel-yt-card-thumb{
    position:relative;
    display:block;
    aspect-ratio:16 / 9;
    border-radius:14px;
    overflow:hidden;
    background:#000;
}

.co-live-channel-yt-card-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease, opacity .25s ease;
}

.co-live-channel-yt-card-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5));
    opacity:0;
    transition:opacity .25s ease;
}

.co-live-channel-yt-card-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:10px 0 0;
    color:rgba(255, 255, 255, .88);
    font-size:.92rem;
    font-weight:600;
    line-height:1.4;
    transition:color .2s ease;
}

.co-live-channel-yt-card.is-active .co-live-channel-yt-card-title{
    color:#ff4d57;
}

.co-live-channel-yt-card:hover .co-live-channel-yt-card-title,
.co-live-channel-yt-card:focus-visible .co-live-channel-yt-card-title{
    color:#fff;
}

.co-live-channel-yt-card:hover .co-live-channel-yt-card-thumb img,
.co-live-channel-yt-card:focus-visible .co-live-channel-yt-card-thumb img,
.co-live-channel-yt-card.is-active .co-live-channel-yt-card-thumb img{
    transform:scale(1.04);
}

.co-live-channel-yt-card:hover .co-live-channel-yt-card-thumb::after,
.co-live-channel-yt-card:focus-visible .co-live-channel-yt-card-thumb::after,
.co-live-channel-yt-card.is-active .co-live-channel-yt-card-thumb::after{
    opacity:1;
}

.co-live-channel-yt-card.is-active .co-live-channel-yt-card-thumb{
    box-shadow:inset 0 0 0 2px #ff4d57, inset 0 0 18px rgba(255, 77, 87, .25);
}

.co-live-channel-yt-card.is-active .co-live-channel-yt-card-thumb::before{
    content:"";
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    width:22px;
    height:22px;
    filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    background:
        linear-gradient(#fff, #fff) no-repeat 0 100% / 3px 55%,
        linear-gradient(#fff, #fff) no-repeat 50% 100% / 3px 100%,
        linear-gradient(#fff, #fff) no-repeat 100% 100% / 3px 70%;
    animation:co-live-eq 1.1s ease-in-out infinite;
}

@keyframes co-live-eq{
    0%, 100%{
        background:
            linear-gradient(#fff, #fff) no-repeat 0 100% / 3px 55%,
            linear-gradient(#fff, #fff) no-repeat 50% 100% / 3px 100%,
            linear-gradient(#fff, #fff) no-repeat 100% 100% / 3px 70%;
    }
    33%{
        background:
            linear-gradient(#fff, #fff) no-repeat 0 100% / 3px 95%,
            linear-gradient(#fff, #fff) no-repeat 50% 100% / 3px 45%,
            linear-gradient(#fff, #fff) no-repeat 100% 100% / 3px 100%;
    }
    66%{
        background:
            linear-gradient(#fff, #fff) no-repeat 0 100% / 3px 65%,
            linear-gradient(#fff, #fff) no-repeat 50% 100% / 3px 90%,
            linear-gradient(#fff, #fff) no-repeat 100% 100% / 3px 40%;
    }
}

.co-live-channel-yt-arrow{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255, 255, 255, .18);
    border-radius:50%;
    background:rgba(255, 255, 255, .08);
    color:#fff;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.co-live-channel-yt-arrow img{
    display:block;
    width:24px;
    height:24px;
}

.co-live-channel-yt-arrow:hover:not(:disabled),
.co-live-channel-yt-arrow:focus-visible:not(:disabled){
    background:rgba(255, 255, 255, .16);
    border-color:rgba(255, 255, 255, .32);
    transform:scale(1.05);
}

.co-live-channel-yt-arrow:disabled{
    opacity:.32;
    cursor:default;
}

@media (max-width: 767px){
    .co-live-channel-yt-grid{
        gap:10px;
        margin-top:20px;
    }

    .co-live-channel-yt-slide{
        grid-template-columns:repeat(3, 1fr);
        gap:10px;
    }

    .co-live-channel-yt-card-title{
        margin-top:7px;
        font-size:.72rem;
        -webkit-line-clamp:2;
    }

    .co-live-channel-yt-arrow{
        width:36px;
        height:36px;
    }

    .co-live-channel-yt-arrow img{
        width:20px;
        height:20px;
    }

    .co-live-channel-yt-main-title{
        font-size:1rem;
    }
}