/* ytv-style.css - popup styling */
.ytv-gallery-grid{display:flex;flex-wrap:wrap;gap:12px;}
.ytv-thumb{width:220px;height:124px;position:relative;cursor:pointer;overflow:hidden;border-radius:4px;background:#000;}
.ytv-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ytv-thumb .ytv-thumb-overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;background:rgba(0,0,0,0.25);}
.ytv-thumb:hover .ytv-thumb-overlay{opacity:1;}
.ytv-play{font-size:28px;color:#fff;padding:6px 10px;border-radius:50%;background:rgba(0,0,0,0.45);}

/* Popup */
.ytv-popup-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}
.ytv-popup{width:90%;max-width:1200px;height:80%;background:transparent;display:flex;box-shadow:0 8px 40px rgba(0,0,0,0.6);overflow:hidden;border-radius:6px;}
.ytv-popup-left{flex:1;background: #c45628; /* user requested own color - orange like screenshot */;display:flex;align-items:center;justify-content:center;position:relative;}
.ytv-player-wrap{width:100%;height:100%;padding:24px;box-sizing:border-box;}
.ytv-player-wrap iframe{width:100%;height:100%;border:0;border-radius:4px;background:#000;}
.ytv-popup-right{width:320px;background:#111;color:#fff;overflow:hidden;display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;box-sizing:border-box;}
.ytv-thumbs-list{width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:8px;}
.ytv-right-thumb{width:100%;height:90px;cursor:pointer;overflow:hidden;border-radius:4px;border:2px solid transparent;}
.ytv-right-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.95;}
.ytv-right-thumb.active{border-color:#ff0066;}
.ytv-popup-close{position:absolute;right:12px;top:12px;z-index:2;background:transparent;border:0;color:#fff;font-size:32px;cursor:pointer;}

/* responsive */
@media (max-width:900px){
    .ytv-popup{flex-direction:column;height:92%;}
    .ytv-popup-right{width:100%;height:160px;order:2;padding:8px;overflow:auto;}
    .ytv-popup-left{order:1;height:60%;}
    .ytv-right-thumb{width:140px;height:80px;}
    .ytv-thumbs-list{flex-direction:row;height:100%;gap:8px;}
}