/**
 * YouTube player layout for Programs (section-jt-payer).
 * Extracted from template-parts/section-jt-payer.php.
 */

.yt-player {
        color: #fff;
        font-family: Arial, sans-serif
    }

    .yt-player .container {
        margin: 0 auto;
        padding: 20px 12px 12px;
        display: grid;
        grid-template-columns:2.5fr 0.9fr;
        gap: 16px;
        background: #19191a
    }

    .yt-player .player {
        width: 100%;
        overflow: hidden;
        background: #000
    }

    .yt-player .player iframe {
        width: 100%;
        height: 100%;
        border: none
    }

    .yt-player .list {
        overflow-y: auto;
        padding-right: 6px;
        scroll-behavior: smooth
    }

    .yt-player .list::-webkit-scrollbar {
        width: 6px
    }

    .yt-player .list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .25);
        border-radius: 999px
    }

    .yt-player .item {
        margin-bottom: 12px;
        cursor: pointer;
        transition: .2s;
        display: flex;
        justify-content: center
    }

    .yt-player .item:hover {
        transform: scale(1.03)
    }

    .yt-player .item.active .thumb{
        border-bottom: 5px solid #F9A215;
    }

    .yt-player .thumb {
        width: 100%;
        max-width: 260px;
        height: 130px;
        overflow: hidden;
        position: relative
    }

    .yt-player .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .yt-player .play-mini {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .yt-player .play-mini div {
        width: 36px;
        height: 30px;
        border-radius: 25%;
        position: relative;
        background: #f98715;
        transform: scale(1.08)
    }

    .yt-player .play-mini div::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-35%, -50%);
        width: 0;
        height: 0;
        border-left: 12px solid #fff;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent
    }

    .toggle-btn .arrow{
        display:block;
        width:0;
        height:0;
        border-top:8px solid transparent;
        border-bottom:8px solid transparent;
        border-left:10px solid #fff;
    }

    .toggle-btn .menu{
        display:block;
        width:16px;
        height:2px;
        background:#fff;
        position:relative;
    }

    .toggle-btn .menu::before,
    .toggle-btn .menu::after{
        content:'';
        position:absolute;
        left:0;
        width:16px;
        height:2px;
        background:#fff;
    }

    .yt-player .container{
        position:relative;
        margin:0 auto;
        padding:20px 12px 12px;
        display:grid;
        grid-template-columns:2.5fr 0.9fr;
        gap:16px;
        background:#19191a;
        transition:all .35s ease;
    }

    .yt-player .player{
        width:100%;
        background:#000;
    }

    .yt-player .player iframe{
        width:100%;
        height:100%;
    }

    .yt-player.collapsed .player{
        aspect-ratio:16/9;
    }

    .yt-player .list {
        overflow-y: auto;
        padding-right: 6px;
        scroll-behavior: smooth;
        transition: all .35s ease;
        transform: translateX(0);
        opacity: 1;
    }

    .yt-player.collapsed .container{
        grid-template-columns:1fr 0fr;
    }

    .yt-player.collapsed .container{
        padding:10px;
        gap: 0;
    }

    .yt-player.collapsed .list{
        transform:translateX(40px);
        opacity:0;
        pointer-events:none;
    }

    .toggle-btn .menu::before{
        top:-6px;
    }

    .toggle-btn .menu::after{
        top:6px;
    }
    .toggle-btn{
        position: absolute;
        right: -24px;
        top: 0px;
        width: 24px;
        height: 46px;
        background: #19191a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 0 8px 8px 0;
        z-index: 20;
        user-select: none;
        transition: .25s;
    }

    /*.toggle-btn:hover{*/
    /*    background:rgba(0,0,0,.85);*/
    /*}*/

    .yt-player .meta{
        display:none;
    }

    @media (max-width: 900px) {
        .yt-player .container {
            grid-template-columns:1fr
        }

        .yt-player .player {
            height: 260px !important
        }
    }

    @media (max-width: 768px) {

        .yt-player .container{
            display: flex;
            position: relative;
            flex-direction: column;
        }

        .toggle-btn{
            /*position: static;*/
            /*margin: 10px auto 0;*/
            /*width: 46px;*/
            /*height: 32px;*/
            /*border-radius: 6px;*/
            position: absolute;
            left: 50%;
            bottom: -18px;
            top: auto;
            right: auto;
            transform: translateX(-50%);
            width: 46px;
            height: 32px;
            border-radius: 6px;
        }


        #toggleBtn{
            order: 3;
        }

        #list{
            order: 2;
        }

        #playerWrap{
            order: 1;
        }

        .yt-player .item{
            display:flex;
            gap:12px;
            padding:10px 12px;
            border-radius:8px;
            align-items:center;
        }

        .yt-player .thumb{
            width:140px;
            height:78px;
            flex-shrink:0;
            border-radius:6px;
            overflow:hidden;
        }

        .yt-player .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .yt-player .meta{
            flex:1;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }

        .yt-player .item.active .thumb {
            border-bottom: unset;
            border-left:4px solid #F9A215;
            padding-left:6px;
        }

        .yt-player .meta .title{
            font-size:14px;
            color:#fff;
            line-height:1.4;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            word-break:break-word;
        }

        .yt-player.collapsed .list{
            height: 0 !important;
            overflow: hidden;
            opacity: 0;
            transform: translateX(40px);
            pointer-events: none;
        }

        .yt-player .item:active{
            background:rgba(255,255,255,0.05);
        }
    }