/* VelloxPlay 2.3 — player isolado e responsivo.
   Este arquivo é carregado DEPOIS do CSS principal para neutralizar regras antigas. */
#playerModal.player-modal{
  position:fixed!important; inset:0!important; width:100vw!important; height:var(--app-height,100dvh)!important;
  margin:0!important; padding:0!important; overflow:hidden!important; background:#000!important;
  z-index:1000!important; display:block!important; place-items:unset!important; backdrop-filter:none!important;
}
#playerModal.player-modal.hidden{display:none!important}
#playerModal .player-shell{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important;
  display:grid!important; grid-template-rows:58px minmax(0,1fr) 30px!important; background:#000!important; overflow:hidden!important;
}
#playerModal .player-bar,#playerModal .player-foot{position:relative!important; z-index:60!important}
#playerModal .video-stage{
  position:relative!important; inset:auto!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important;
  overflow:hidden!important; background:#000!important; display:block!important; isolation:isolate!important;
}
#playerModal #video{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important;
  margin:0!important; padding:0!important; background:#000!important; object-position:center center!important; transform:none!important;
  z-index:1!important; display:block!important;
}
#playerModal #video[data-fit="contain"]{object-fit:contain!important}
#playerModal #video[data-fit="cover"]{object-fit:cover!important}

/* Overlay de controles: sempre ocupa a largura inteira do vídeo. */
#playerModal #videoControls{
  box-sizing:border-box!important; position:absolute!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; max-width:none!important;
  z-index:80!important; display:grid!important; grid-template-rows:26px 48px!important; align-items:center!important; gap:7px!important;
  padding:44px 16px max(12px,calc(10px + env(safe-area-inset-bottom))) 16px!important;
  background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.62) 50%,transparent 100%)!important;
  transition:opacity .18s ease,transform .18s ease,visibility .18s linear!important;
}
#playerModal #timelineRow{
  box-sizing:border-box!important; width:100%!important; min-width:0!important; height:26px!important;
  display:grid!important; grid-template-columns:48px minmax(80px,1fr) 48px auto!important; align-items:center!important; gap:8px!important;
}
#playerModal #timelineRow .time-label{display:block!important; min-width:0!important; width:auto!important; font-size:11px!important; line-height:1!important; color:#fff!important; text-align:left!important; font-variant-numeric:tabular-nums!important}
#playerModal #durationTime{text-align:right!important}
#playerModal #seekBar{display:block!important; width:100%!important; min-width:0!important; max-width:none!important; height:18px!important; margin:0!important; padding:0!important; accent-color:#e50914!important}
#playerModal #liveBadge{justify-self:start!important}

#playerModal #videoControls .control-row{
  box-sizing:border-box!important; width:100%!important; min-width:0!important; height:48px!important;
  display:grid!important; grid-template-columns:44px 44px 44px minmax(0,1fr) minmax(80px,140px) 44px 44px 44px!important;
  align-items:center!important; gap:8px!important; flex-direction:row!important;
}
#playerModal #videoControls .video-control{
  box-sizing:border-box!important; width:42px!important; height:42px!important; min-width:42px!important; max-width:42px!important;
  margin:0!important; padding:0!important; display:grid!important; place-items:center!important; position:relative!important;
}
#playerModal #videoControls .seek-control small{position:absolute!important; left:50%!important; bottom:7px!important; transform:translateX(-50%)!important; font-size:8px!important; line-height:1!important}
#playerModal #controlTitle{display:block!important; min-width:0!important; max-width:none!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:12px!important}
#playerModal #videoControls .video-control-spacer{display:none!important}
#playerModal #volumeSlider{display:block!important; width:100%!important; min-width:70px!important; max-width:140px!important; margin:0!important; accent-color:#e50914!important}

/* Estado de ocultação. O JS também aplica estes valores inline com !important. */
#playerModal #videoControls.vp-controls-hidden{opacity:0!important; visibility:hidden!important; transform:translateY(16px)!important; pointer-events:none!important}
#playerModal #videoControls.vp-controls-hidden *{pointer-events:none!important}
#playerModal #videoControls.vp-controls-visible{opacity:1!important; visibility:visible!important; transform:translateY(0)!important; pointer-events:auto!important}

/* Fullscreen interno: sem duplicar controles ou deformar o vídeo. */
#playerModal.app-fullscreen .player-shell{display:block!important; position:fixed!important; inset:0!important; width:100vw!important; height:var(--app-height,100dvh)!important}
#playerModal.app-fullscreen .player-bar,#playerModal.app-fullscreen .player-foot{display:none!important}
#playerModal.app-fullscreen .video-stage{position:fixed!important; inset:0!important; width:100vw!important; height:var(--app-height,100dvh)!important}
#playerModal.app-fullscreen #video{width:100vw!important; height:var(--app-height,100dvh)!important}
#playerModal.app-fullscreen #fullscreenBtn{display:grid!important}

@media(max-width:760px){
  #playerModal .player-shell{grid-template-rows:52px minmax(0,1fr) 26px!important}
  #playerModal #videoControls{grid-template-rows:24px 44px!important; gap:5px!important; padding:38px 10px max(9px,calc(7px + env(safe-area-inset-bottom))) 10px!important}
  #playerModal #timelineRow{grid-template-columns:42px minmax(60px,1fr) 42px auto!important; gap:6px!important; height:24px!important}
  #playerModal #timelineRow .time-label{font-size:10px!important}
  #playerModal #videoControls .control-row{grid-template-columns:40px 40px 40px minmax(0,1fr) 40px 40px 40px!important; gap:6px!important; height:44px!important}
  #playerModal #videoControls .video-control{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;font-size:16px!important}
  #playerModal #volumeSlider{display:none!important}
  #playerModal #controlTitle{font-size:11px!important}
}
@media(max-width:430px){
  #playerModal #controlTitle{display:none!important}
  #playerModal #videoControls .control-row{grid-template-columns:38px 38px 38px minmax(4px,1fr) 38px 38px 38px!important; gap:5px!important}
}
@media(orientation:landscape) and (max-height:560px){
  #playerModal:not(.app-fullscreen) .player-bar,#playerModal:not(.app-fullscreen) .player-foot{display:none!important}
  #playerModal:not(.app-fullscreen) .player-shell{display:block!important}
  #playerModal:not(.app-fullscreen) .video-stage{position:absolute!important; inset:0!important}
  #playerModal #videoControls{padding-top:28px!important; padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
}