/* YT Player Pro v3.9.0 */

/* ── Reset ───────────────────────────────────────────── */
.ytpp-wrap,.ytpp-wrap *{
    box-sizing:border-box!important;margin:0!important;padding:0!important;
    border:none!important;outline:none!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    line-height:1!important;list-style:none!important;float:none!important;
    text-decoration:none!important
}
.ytpp-wrap{display:block!important;width:100%!important;margin:0 auto!important}

/* ── Root — CSS custom properties ────────────────────── */
.ytpp-root{
    position:relative!important;width:100%!important;
    background:#000!important;border-radius:6px!important;
    overflow:hidden!important;display:block!important;cursor:pointer!important;
    --ytpp-bar:#111111;
    --ytpp-icon:#ffffff;
}

/* ── Stage 16:9 ──────────────────────────────────────── */
.ytpp-stage{
    position:relative!important;width:100%!important;
    padding-top:56.25%!important;background:#000!important;
    overflow:hidden!important;display:block!important;
}

/* ── Player Wrapper ──────────────────────────────────── */
.ytpp-player-wrapper{
    position:absolute!important;inset:0!important;
    z-index:1!important;background:#000!important;
}
.ytpp-player-container{position:absolute!important;inset:0!important;}
.ytpp-player-wrapper>iframe{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
    border:none!important;background:#000!important;
    pointer-events:none!important;
}

/* ── Poster ──────────────────────────────────────────── */
.ytpp-poster{
    position:absolute!important;inset:0!important;
    z-index:3!important;background:#111!important;
    pointer-events:none!important;
    transition:opacity .3s ease!important;
}
.ytpp-poster img{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
    object-fit:cover!important;display:block!important;
}
.ytpp-poster-hide{opacity:0!important;pointer-events:none!important;}

/* ── Overlay ─────────────────────────────────────────── */
.ytpp-overlay{
    position:absolute!important;inset:0!important;
    z-index:8!important;cursor:pointer!important;
    background:transparent!important;pointer-events:all!important;
}

/* ── Bloqueios de canto ──────────────────────────────── */
.ytpp-block-tl{
    position:absolute!important;top:0!important;left:0!important;
    width:220px!important;height:64px!important;
    z-index:9!important;background:transparent!important;pointer-events:none!important;
}
.ytpp-block-br{
    position:absolute!important;bottom:0!important;right:0!important;
    width:260px!important;height:64px!important;
    z-index:9!important;background:transparent!important;pointer-events:none!important;
}

/* ── Badge AO VIVO — sempre oculto no overlay ───────── */
.ytpp-live-badge,.ytpp-live-badge.visible{
    display:none!important;visibility:hidden!important;pointer-events:none!important;
}

/* ── Título do vídeo (aparece ao pausar, não ao vivo) ── */
.ytpp-title{
    position:absolute!important;left:0!important;right:0!important;
    bottom:58px!important;
    z-index:12!important;
    padding:10px 16px!important;
    background:linear-gradient(transparent,rgba(0,0,0,.55) 40%,rgba(0,0,0,.75))!important;
    color:var(--ytpp-icon)!important;
    font-size:14px!important;font-weight:600!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    pointer-events:none!important;
    opacity:0!important;
    /* Só opacity — sem transform — evita layout jitter no mobile */
    transition:opacity .3s ease!important;
}
.ytpp-root.paused:not(.live) .ytpp-title{opacity:1!important;}
.ytpp-title:empty{opacity:0!important;}

@media(max-width:768px){
    .ytpp-title{font-size:12px!important;bottom:52px!important;padding:8px 12px!important;}
}
@media(max-width:420px){
    .ytpp-title{font-size:11px!important;bottom:48px!important;padding:6px 10px!important;}
}

/* ══════════════════════════════════════════════════════
   BIG PLAY BUTTON
   Desktop: 140×88 | Mobile: 100×64 | Pequeno: 86×56
   Sem translateY → sem shaking no mobile
   ══════════════════════════════════════════════════════ */
.ytpp-bigplay{
    position:absolute!important;
    top:50%!important;left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:140px!important;height:88px!important;
    border-radius:22px!important;
    background:var(--ytpp-bar)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    z-index:10!important;cursor:pointer!important;pointer-events:all!important;
    opacity:1!important;
    /* Só opacity — sem transform adicional — evita tremor */
    transition:opacity .2s ease!important;
    overflow:hidden!important;
}
.ytpp-bigplay svg{
    display:block!important;flex-shrink:0!important;
    pointer-events:none!important;
    transform:translateX(3px)!important;
    transition:opacity .2s!important;
}
@media(max-width:768px){
    .ytpp-bigplay{width:100px!important;height:64px!important;border-radius:16px!important;}
    .ytpp-bigplay svg{width:32px!important;height:32px!important;}
}
@media(max-width:420px){
    .ytpp-bigplay{width:86px!important;height:56px!important;border-radius:14px!important;}
    .ytpp-bigplay svg{width:28px!important;height:28px!important;}
}
/* Some quando tocando — só opacity (sem scale para evitar tremor) */
.ytpp-root.playing .ytpp-bigplay{opacity:0!important;pointer-events:none!important;}

/* ── Spinner ─────────────────────────────────────────── */
.ytpp-spinner{
    display:none!important;position:absolute!important;
    width:30px!important;height:30px!important;
    border:3px solid rgba(255,255,255,.25)!important;
    border-top-color:#fff!important;border-radius:50%!important;
    animation:ytpp-spin .7s linear infinite!important;
    pointer-events:none!important;
}
@keyframes ytpp-spin{to{transform:rotate(360deg);}}
.ytpp-bigplay.ytpp-loading svg{opacity:0!important;}
.ytpp-bigplay.ytpp-loading .ytpp-spinner{display:block!important;}

/* ══════════════════════════════════════════════════════
   BARRA DE CONTROLES

   FIX CRÍTICO — SHAKING NO MOBILE:
   Causa: transform:translateY(6px) reiniciava animação a cada touchstart
   (scroll) → botão tremendo.

   Solução: APENAS opacity na transição da barra.
   Nenhum translateY → nenhum movimento → zero shaking.
   ══════════════════════════════════════════════════════ */
.ytpp-bar{
    position:absolute!important;
    bottom:0!important;left:0!important;right:0!important;
    height:54px!important;
    display:flex!important;align-items:center!important;
    gap:6px!important;padding:0 14px!important;
    z-index:11!important;
    background:var(--ytpp-bar)!important;
    color:var(--ytpp-icon)!important;

    /* Só opacity — sem transform → sem layout shift → sem tremor */
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .22s ease!important;
}
.ytpp-root.bar-show .ytpp-bar{
    opacity:1!important;
    pointer-events:auto!important;
}
@media(max-width:768px){
    .ytpp-bar{height:48px!important;padding:0 10px!important;gap:4px!important;}
}
@media(max-width:420px){
    .ytpp-bar{height:44px!important;padding:0 8px!important;gap:3px!important;}
}

/* ── Botões ──────────────────────────────────────────── */
.ytpp-btn{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:42px!important;height:42px!important;min-width:42px!important;
    background:transparent!important;color:var(--ytpp-icon)!important;
    cursor:pointer!important;border-radius:6px!important;
    flex-shrink:0!important;
    transition:background .15s!important;
    position:relative!important;
    -webkit-tap-highlight-color:transparent!important;
    /* Evita tap delay no iOS */
    touch-action:manipulation!important;
}
.ytpp-btn:hover{background:rgba(255,255,255,.2)!important;}
.ytpp-btn:active{opacity:.75!important;}
.ytpp-btn .si{display:block!important;pointer-events:none!important;}

@media(max-width:768px){
    .ytpp-btn{width:38px!important;height:38px!important;min-width:38px!important;}
}
@media(max-width:420px){
    .ytpp-btn{width:34px!important;height:34px!important;min-width:34px!important;}
}

/* ── Estados ícones ──────────────────────────────────── */
.ytpp-play .si-play {display:block!important;}
.ytpp-play .si-pause{display:none!important;}
.ytpp-root.playing .ytpp-play .si-play {display:none!important;}
.ytpp-root.playing .ytpp-play .si-pause{display:block!important;}

.ytpp-mute .si-vol-on {display:block!important;}
.ytpp-mute .si-vol-off{display:none!important;}
.ytpp-root.muted .ytpp-mute .si-vol-on {display:none!important;}
.ytpp-root.muted .ytpp-mute .si-vol-off{display:block!important;}

.ytpp-fs .si-fs-enter{display:block!important;}
.ytpp-fs .si-fs-exit {display:none!important;}
.ytpp-root.in-fs .ytpp-fs .si-fs-enter{display:none!important;}
.ytpp-root.in-fs .ytpp-fs .si-fs-exit {display:block!important;}

/* ── Volume slider ───────────────────────────────────── */
.ytpp-vol{
    width:78px!important;min-width:44px!important;height:5px!important;
    -webkit-appearance:none!important;appearance:none!important;
    background:rgba(255,255,255,.35)!important;
    border-radius:3px!important;cursor:pointer!important;flex-shrink:0!important;
    /* Evita scroll acidental ao arrastar no mobile */
    touch-action:none!important;
}
.ytpp-vol::-webkit-slider-thumb{
    -webkit-appearance:none!important;
    width:18px!important;height:18px!important;
    border-radius:50%!important;background:#fff!important;cursor:pointer!important;
}
.ytpp-vol::-moz-range-thumb{
    width:18px!important;height:18px!important;
    border-radius:50%!important;background:#fff!important;
    border:none!important;cursor:pointer!important;
}
@media(max-width:768px){.ytpp-vol{width:60px!important;}}
@media(max-width:420px){.ytpp-vol{display:none!important;}}

/* ── Progresso ───────────────────────────────────────── */
.ytpp-prog-wrap{
    flex:1!important;min-width:40px!important;
    padding:0 4px!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;
    height:100%!important;touch-action:none!important;
}
.ytpp-prog-track{
    position:relative!important;width:100%!important;height:5px!important;
    background:rgba(255,255,255,.25)!important;
    border-radius:3px!important;overflow:visible!important;
    transition:height .15s!important;
}
.ytpp-prog-wrap:hover .ytpp-prog-track{height:7px!important;}

.ytpp-prog-buf,.ytpp-prog-fill{
    position:absolute!important;top:0!important;left:0!important;
    height:100%!important;width:0%!important;
    border-radius:3px!important;pointer-events:none!important;
    transition:width .1s linear!important;
}
.ytpp-prog-buf{background:rgba(255,255,255,.3)!important;z-index:1!important;}
.ytpp-prog-fill{background:#e74c3c!important;z-index:2!important;}
.ytpp-prog-fill::after{
    content:''!important;position:absolute!important;
    right:-7px!important;top:50%!important;transform:translateY(-50%)!important;
    width:14px!important;height:14px!important;
    background:#e74c3c!important;border-radius:50%!important;
    opacity:0!important;transition:opacity .15s!important;
}
.ytpp-prog-wrap:hover .ytpp-prog-fill::after{opacity:1!important;}

/* ── Tempo / AO VIVO ─────────────────────────────────── */
.ytpp-time{
    font-size:12px!important;white-space:nowrap!important;
    flex-shrink:0!important;min-width:95px!important;
    text-align:center!important;user-select:none!important;
    font-weight:500!important;letter-spacing:.3px!important;
    /* Herda a cor dos ícones via currentColor da .ytpp-bar */
    color:currentColor!important;
}
/* AO VIVO: peso e espaçamento — cor já vem de currentColor */
.ytpp-time--live{
    font-weight:700!important;letter-spacing:1px!important;
    text-transform:uppercase!important;
}
@media(max-width:768px){.ytpp-time{font-size:11px!important;min-width:72px!important;}}
@media(max-width:420px){.ytpp-time{font-size:10px!important;min-width:60px!important;}}

/* ── Velocidade ──────────────────────────────────────── */
.ytpp-speed-wrap{position:relative!important;flex-shrink:0!important;}
.ytpp-speed-btn{
    width:auto!important;padding:0 10px!important;
    font-size:12px!important;font-weight:700!important;letter-spacing:.3px!important;
}
.ytpp-speed-menu{
    display:none!important;position:absolute!important;
    bottom:calc(100% + 6px)!important;right:0!important;
    min-width:76px!important;border-radius:6px!important;overflow:hidden!important;
    box-shadow:0 4px 16px rgba(0,0,0,.55)!important;
    z-index:50!important;background:#1c1c1c!important;
}
.ytpp-speed-wrap.open .ytpp-speed-menu{display:block!important;}
.ytpp-speed-opt{
    display:block!important;width:100%!important;padding:9px 14px!important;
    font-size:12px!important;text-align:left!important;cursor:pointer!important;
    background:transparent!important;color:#ccc!important;transition:background .12s!important;
    touch-action:manipulation!important;
}
.ytpp-speed-opt:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.ytpp-speed-opt.active{color:#e74c3c!important;font-weight:700!important;}
@media(max-width:768px){.ytpp-speed-wrap{display:none!important;}}

/* ══════════════════════════════════════════════════════
   FULLSCREEN
   ══════════════════════════════════════════════════════ */
.ytpp-root:fullscreen,
.ytpp-root:-webkit-full-screen{
    width:100vw!important;height:100vh!important;
    max-width:100vw!important;max-height:100vh!important;
    border-radius:0!important;background:#000!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
.ytpp-root:fullscreen .ytpp-stage,
.ytpp-root:-webkit-full-screen .ytpp-stage{
    flex:1!important;padding-top:0!important;height:0!important;min-height:0!important;
}
.ytpp-root:fullscreen .ytpp-player-wrapper,
.ytpp-root:-webkit-full-screen .ytpp-player-wrapper{
    position:absolute!important;inset:0!important;
}
.ytpp-root:fullscreen .ytpp-player-wrapper>iframe,
.ytpp-root:-webkit-full-screen .ytpp-player-wrapper>iframe{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
.ytpp-root:fullscreen .ytpp-bar,
.ytpp-root:-webkit-full-screen .ytpp-bar{
    position:absolute!important;bottom:0!important;left:0!important;
    right:0!important;height:60px!important;
}
.ytpp-root:fullscreen .ytpp-bigplay,
.ytpp-root:-webkit-full-screen .ytpp-bigplay{
    width:160px!important;height:100px!important;border-radius:20px!important;
}
.ytpp-root:fullscreen .ytpp-title,
.ytpp-root:-webkit-full-screen .ytpp-title{
    font-size:16px!important;bottom:64px!important;
}