/* VelloxPlay Web App 1.18 — player iPhone revisado para Safari e Chrome (WebKit)
   Regra principal: o botão X fica NA BARRA SUPERIOR, nunca por cima do vídeo.
   Isso evita o problema de camadas/composição do <video> no iOS. */

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-shell{
  grid-template-rows: calc(58px + max(18px, env(safe-area-inset-top))) minmax(0,1fr) 30px !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-bar{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  box-sizing:border-box !important;
  min-height:calc(58px + max(18px, env(safe-area-inset-top))) !important;
  height:calc(58px + max(18px, env(safe-area-inset-top))) !important;
  padding-top:max(18px, env(safe-area-inset-top)) !important;
  padding-left:max(12px, calc(env(safe-area-inset-left) + 12px)) !important;
  padding-right:max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  align-items:flex-end !important;
  background:#09090c !important;
  border-bottom:1px solid #202026 !important;
  z-index:5000 !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-bar > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  position:relative !important;
  z-index:6000 !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #playerFav,
body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #closePlayer{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  flex:0 0 46px !important;
  padding:0 !important;
  place-items:center !important;
  border-radius:50% !important;
  position:relative !important;
  z-index:7000 !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #closePlayer{
  color:#fff !important;
  background:#17171d !important;
  border:1px solid rgba(255,255,255,.22) !important;
  font-size:23px !important;
  font-weight:800 !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #playerFav{
  background:#17171d !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .now{
  min-width:0 !important;
  flex:1 1 auto !important;
}
body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .now img{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}
body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .now strong{
  max-width:42vw !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Não mostramos o botão flutuante no modo normal. No iOS ele pode cair atrás
   da camada nativa de composição do vídeo. */
body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-back-float{
  display:none !important;
}

/* Se cair no fullscreen interno (fallback), a barra some e então usamos o botão flutuante. */
body.vp-ios #playerModal.player-modal.app-fullscreen .player-back-float{
  display:grid !important;
  position:fixed !important;
  top:max(16px, calc(env(safe-area-inset-top) + 12px)) !important;
  right:max(16px, calc(env(safe-area-inset-right) + 12px)) !important;
  left:auto !important;
  width:50px !important;
  height:50px !important;
  z-index:12000 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(10,10,14,.90) !important;
  color:#fff !important;
  font-size:28px !important;
}

body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-foot{
  padding-left:max(12px, calc(env(safe-area-inset-left) + 12px)) !important;
  padding-right:max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  padding-bottom:max(6px, env(safe-area-inset-bottom)) !important;
}

@media (max-width:700px){
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-shell{
    grid-template-rows:calc(56px + max(18px, env(safe-area-inset-top))) minmax(0,1fr) 28px !important;
  }
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-bar{
    min-height:calc(56px + max(18px, env(safe-area-inset-top))) !important;
    height:calc(56px + max(18px, env(safe-area-inset-top))) !important;
  }
}

/* Em paisagem, regras antigas escondiam a barra. Aqui forçamos a barra e o X a continuarem acessíveis. */
@media (orientation:landscape) and (max-height:650px){
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-shell{
    display:grid !important;
    grid-template-rows:calc(48px + max(6px, env(safe-area-inset-top))) minmax(0,1fr) !important;
  }
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-bar{
    display:flex !important;
    min-height:calc(48px + max(6px, env(safe-area-inset-top))) !important;
    height:calc(48px + max(6px, env(safe-area-inset-top))) !important;
    padding-top:max(6px, env(safe-area-inset-top)) !important;
    padding-left:max(16px, calc(env(safe-area-inset-left) + 10px)) !important;
    padding-right:max(16px, calc(env(safe-area-inset-right) + 10px)) !important;
  }
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) .player-foot{display:none !important}
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #playerFav,
  body.vp-ios #playerModal.player-modal:not(.app-fullscreen) #closePlayer{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    flex-basis:42px !important;
  }
}