/* Fullscreen player custom controls styled like Netflix */
.player-wrap{position:relative}
.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen{width:100vw;height:100vh}
.player-wrap:fullscreen video,
.player-wrap:-webkit-full-screen video{width:100%;height:100%;background:#000}

.plyr__controls{display:none !important}

.fs-controls{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.fs-controls.show{opacity:1;pointer-events:auto}

.fs-controls button{border:none;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fs-controls button svg{fill:#fff}
.play-center{width:80px;height:80px}
.play-center svg{width:40px;height:40px}
.skip-back,.skip-forward{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px}
.skip-back{left:20%}
.skip-forward{right:20%}
.skip-back svg,.skip-forward svg{width:32px;height:32px}

.toolbar button svg{width:24px;height:24px}

.toolbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}
.toolbar button{background:none;color:#fff;border:none;font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}

#progress{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,#e50914 0%,#e50914 var(--progress,0%),#404040 var(--progress,0%),#404040 100%);cursor:pointer}
#progress::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4px}
#progress::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:none}