/* Ajustes locais v2 - Continuar Assistindo, fundo do login e player mobile */

/* Os cards de Continuar Assistindo sao clicaveis: exibe a mao em toda a area. */
.continue-card{
  cursor:pointer!important;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.continue-card:hover{
  border-color:#8e701c!important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.32);
}

/* Usa exatamente a arte de fundo presente no index_preview_stark_tv. */
.login-featured-bg{
  background-image:url('/login-preview-bg.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:saturate(.92) contrast(1.04)!important;
  transform:scale(1.015)!important;
  transition:none!important;
}
.login-featured-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.06) 18%,rgba(0,0,0,.36) 62%,rgba(0,0,0,.88) 100%),linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08),rgba(0,0,0,.54));
  pointer-events:none;
}

/* Mobile: deixa o player e principalmente o seletor de fonte mais compactos. */
@media(max-width:720px){
  .executing-view .player-shell{
    width:100%!important;
    border-radius:12px!important;
  }
  .executing-view .player-shell>header{
    padding:9px 10px!important;
    gap:8px!important;
  }
  .executing-view .player-shell>header>div:first-child{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .executing-view .player-shell header h2{
    font-size:15px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .executing-view .player-shell header small{
    font-size:9px!important;
  }
  .executing-view .player-actions{
    gap:5px!important;
    flex:0 0 auto!important;
  }
  .executing-view .player-actions select,
  .executing-view #sourceSelect{
    width:auto!important;
    max-width:108px!important;
    min-width:82px!important;
    min-height:30px!important;
    height:30px!important;
    padding:0 7px!important;
    font-size:10.5px!important;
    border-radius:8px!important;
  }
  .executing-view .player-actions button{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    padding:0!important;
    font-size:16px!important;
  }
  .executing-view .player-stage{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .executing-view .episode-panel{
    padding:11px!important;
  }
  .executing-view .episode-grid{
    gap:6px!important;
  }
  .executing-view .episode-grid button{
    padding:8px!important;
  }

  /* v5: o perfil precisa continuar tocavel no Chrome mobile mesmo com a busca ocupando o topo. */
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 52px!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .search-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    position:relative!important;
    z-index:1!important;
  }
  .top-actions{
    width:52px!important;
    min-width:52px!important;
    flex:0 0 52px!important;
    position:relative!important;
    z-index:220!important;
    overflow:visible!important;
  }
  .top-actions>.requests-top,
  .top-actions>.admin-top-wrap{
    display:none!important;
  }
  .profile-wrap{
    width:52px!important;
    min-width:52px!important;
    position:relative!important;
    z-index:230!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
  .profile{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    padding:6px!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    z-index:231!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .profile .avatar{
    pointer-events:none!important;
  }
  .profile-menu{
    position:fixed!important;
    top:62px!important;
    right:10px!important;
    left:auto!important;
    width:min(285px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 82px)!important;
    overflow:auto!important;
    z-index:9999!important;
    visibility:hidden!important;
  }
  .profile-menu.open{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  /* v6: a barra inferior vira um carrossel horizontal no celular. */
  .sidebar{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .sidebar .brand{
    display:none!important;
  }
  .sidebar .nav{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%!important;
    height:100%!important;
    gap:4px!important;
    padding:0 4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  .sidebar .nav::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .sidebar .nav .nav-item,
  .sidebar .nav .nav-item:nth-child(n+6){
    display:flex!important;
    flex:0 0 68px!important;
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:52px!important;
    min-height:52px!important;
    justify-content:center!important;
    align-items:center!important;
    scroll-snap-align:center!important;
    padding:7px!important;
  }
  .sidebar .nav .nav-item b{
    display:none!important;
  }
  .sidebar .nav .nav-item span{
    width:auto!important;
    min-width:24px!important;
    text-align:center!important;
    font-size:20px!important;
    pointer-events:none!important;
  }
}

@media(max-width:420px){
  .executing-view .player-actions select,
  .executing-view #sourceSelect{
    max-width:92px!important;
    min-width:72px!important;
    font-size:10px!important;
  }
  .executing-view .player-shell>header{
    padding:8px!important;
  }
}

/* v3: o topo do modal comum mostra sempre a imagem do card clicado. */
.details-card.no-trailer .trailer-layer .details-card-banner-v3{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 30%!important;
  display:block!important;
  z-index:0!important;
}
@media(max-width:620px){
  .details-card.no-trailer .trailer-layer .details-card-banner-v3{
    object-position:center 25%!important;
  }
}

/* v4: arte do card mais afastada e sem recorte/zoom excessivo. */
.details-card.no-trailer .trailer-layer{
  background:#020202!important;
  overflow:hidden!important;
}
.details-card.no-trailer .trailer-layer .details-card-banner-v4{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  z-index:0!important;
  transform:scale(.90)!important;
  transform-origin:center center!important;
}
@media(max-width:620px){
  .details-card.no-trailer .trailer-layer .details-card-banner-v4{
    transform:scale(.94)!important;
    object-position:center center!important;
  }
}