/*
 * StreamFlix v6.22.2 — camada responsiva aditiva.
 * Não altera JavaScript, player engine, rotas, APIs ou regras de negócio.
 * Carregada depois dos estilos existentes para corrigir somente geometria,
 * overflow e adaptação de tela em celular, tablet, notebook, PC, ultrawide e TV.
 */

/* ---------- Base segura ---------- */
html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, picture, video, canvas, svg, iframe {
  max-width: 100%;
}

img, video, canvas {
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
}

input, select, textarea {
  min-width: 0;
}

/* Impede filhos de grid/flex de forçarem largura maior que a tela. */
#app > *,
.admin-main > *,
.wrap > *,
.grid > *,
.flex > *,
.sf-share-row > *,
.share-body > * {
  min-width: 0;
}

/* ---------- HOME / CATÁLOGO ---------- */
#app {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

#s-g,
#tc,
#mc,
#sc,
#tg,
#mg,
#sg {
  width: 100%;
  min-width: 0;
}

.cc,
.hs {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.pc,
.sf-card,
.sf-cat-card,
.sf-continue-card {
  min-width: 0;
}

.sf-hero {
  width: 100%;
  min-height: clamp(220px, 34vw, 560px);
}

.sf-hero > img,
#h-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-ad-slot,
.sf-ad-frame,
.sf-ad-slot iframe,
.sf-ad-slot img {
  max-width: 100% !important;
}

/* Modais da home nunca escapam da viewport. */
.gm {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.gm > div,
.sf-auth-card,
.sf-api-card {
  max-width: min(96vw, 760px) !important;
  max-height: min(92dvh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sf-bottom-nav {
  max-width: calc(100vw - 12px);
}

.sf-mobile-search {
  width: 100%;
  max-width: 100vw;
}

/* ---------- PLAYER ---------- */
#box,
#vid {
  width: 100%;
  max-width: 100vw;
}

#box {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#vid {
  height: 100%;
  max-height: 100dvh;
}

.ui,
.top,
.bot {
  max-width: 100%;
}

.top > *,
.bot > *,
.ct > *,
.cl,
.cr {
  min-width: 0;
}

.share-card,
.cast-card,
.play-error-card {
  width: min(94vw, 680px);
  max-width: calc(100vw - 20px);
  max-height: min(90vh, 90dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.player-ad-banner,
#recovery-badge,
#toast {
  max-width: calc(100vw - 20px);
}

/* ---------- ADMIN ---------- */
.admin-shell,
.admin-main {
  width: 100%;
  max-width: 100%;
}

.admin-main {
  overflow-x: hidden;
}

.admin-main .grid > *,
.admin-main .flex > *,
.admin-main form > * {
  min-width: 0;
}

.admin-table-wrap,
.admin-main .overflow-x-auto {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
}

.admin-drawer {
  max-width: min(92vw, 320px);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Inputs e áreas longas não empurram o painel para fora da tela. */
.admin-main input,
.admin-main select,
.admin-main textarea,
.admin-main pre,
.admin-main code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- PÁGINA DE CATEGORIA ---------- */
.wrap {
  width: 100%;
  max-width: 1800px;
}

.wrap .grid {
  width: 100%;
  min-width: 0;
}

.pager {
  flex-wrap: wrap;
}

/* ---------- LOGIN ---------- */
.glass {
  width: min(20rem, calc(100vw - 24px)) !important;
  max-width: 100%;
  margin:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

/* ---------- Telas muito pequenas: 280–359 px ---------- */
@media (max-width: 359px) {
  #app {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc,
  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sf-hero {
    min-height: 210px;
    border-radius: 12px !important;
  }

  .sf-hero .absolute.bottom-8.left-8 {
    left: 12px !important;
    right: 12px !important;
    bottom: 14px !important;
  }

  .sf-bottom-nav {
    width: calc(100vw - 8px) !important;
    padding-inline: 3px !important;
  }

  .sf-bottom-nav button {
    font-size: 8px !important;
    padding-inline: 1px !important;
  }

  .gm > div,
  .sf-auth-card,
  .sf-api-card {
    max-width: calc(100vw - 12px) !important;
  }

  .wrap {
    padding: 9px !important;
  }

  .wrap .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .admin-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .bulkbar > * {
    flex: 1 1 100% !important;
  }

  .admin-table {
    min-width: 620px;
  }

  .share-card,
  .cast-card,
  .play-error-card {
    max-width: calc(100vw - 10px);
  }
}

/* ---------- Celulares: 360–479 px ---------- */
@media (min-width: 360px) and (max-width: 479px) {
  #app {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sf-hero {
    min-height: 230px;
  }

  .sf-hero .absolute.bottom-8.left-8 {
    left: 14px !important;
    right: 14px !important;
    bottom: 16px !important;
  }

  .admin-table {
    min-width: 660px;
  }
}

/* ---------- Celulares grandes / tablets estreitos: 480–767 px ---------- */
@media (min-width: 480px) and (max-width: 767px) {
  #app {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sf-hero {
    min-height: clamp(250px, 52vw, 390px);
  }

  .admin-table {
    min-width: 700px;
  }
}

/* ---------- Tablets: 768–1023 px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  #app {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .admin-main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* ---------- Notebook / PC comum: 1024–1439 px ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  #app {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* ---------- Desktop grande / TV: 1440–1919 px ---------- */
@media (min-width: 1440px) and (max-width: 1919px) {
  #app {
    padding-left: 44px !important;
    padding-right: 44px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .admin-main {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}

/* ---------- 1080p largo / 2K / 4K ---------- */
@media (min-width: 1920px) {
  body {
    font-size: 16px;
  }

  #app {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  #s-g,
  #tc,
  #mc,
  #sc {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  #tg,
  #mg,
  #sg {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .sf-hero {
    min-height: 520px;
  }

  .wrap {
    max-width: 1900px;
  }

  .wrap .grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 18px !important;
  }

  .admin-main {
    max-width: 1900px;
    margin-inline: auto;
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .top {
    max-width: 1920px;
    margin-inline: auto;
  }
}

/* ---------- Paisagem baixa (celular/TV box) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .gm > div,
  .sf-auth-card,
  .sf-api-card,
  .share-card,
  .cast-card,
  .play-error-card {
    max-height: calc(100dvh - 12px);
  }

  #box,
  #vid {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* ---------- Touch ---------- */
@media (pointer: coarse) {
  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .admin-menu-btn,
  .sf-bottom-nav button {
    min-height: 42px;
  }
}

/* ---------- Acessibilidade / movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
 * StreamFlix v6.22.8 — correções visuais/responsivas finais
 * - Cards de canais usam a mesma geometria 2:3 de filmes/séries.
 * - Imagem sempre ocupa 100% do card (sem faixa vazia causada por dimensão
 *   natural da imagem ou por regras herdadas).
 * - Títulos ficam contidos no card e nunca empurram/encobrem o próximo item.
 * - Não altera player, APIs, autenticação, cache de catálogo ou streaming.
 * ======================================================================== */

/* Geometria única e previsível para cards do catálogo. */
#tg .sf-card-frame,
#mg .sf-card-frame,
#sg .sf-card-frame,
#s-g .sf-card-frame,
#hc-t .sf-card-frame,
#hc-m .sf-card-frame,
#hc-s .sf-card-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  min-height: 0;
}

/* Nas fileiras horizontais, mantém exatamente o tamanho visual antigo (128x192)
   mas deixa o ratio cuidar da altura em vez de depender da imagem. */
#hc-t .sf-card-frame,
#hc-m .sf-card-frame,
#hc-s .sf-card-frame {
  height: auto !important;
}

/* A imagem nunca decide a altura do card. Isso elimina áreas pretas/vazias
   criadas por proporções diferentes das logos dos canais. */
#tg .sf-card-frame > img,
#mg .sf-card-frame > img,
#sg .sf-card-frame > img,
#s-g .sf-card-frame > img,
#hc-t .sf-card-frame > img,
#hc-m .sf-card-frame > img,
#hc-s .sf-card-frame > img,
.wrap .pic > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Canais: não escurecer a logo inteira. A proteção do texto continua sendo
   feita pelo gradiente de título na parte inferior. */
#tg .sf-card-frame > img,
#hc-t .sf-card-frame > img {
  opacity: 1 !important;
  filter: none !important;
}

/* A sobreposição genérica da grade não precisa cobrir todo o canal. */
#tg .sf-card-frame > .absolute.inset-0 {
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 48%) !important;
  z-index: 1;
}

.sf-card-title-zone,
.wrap .title-zone {
  z-index: 3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sf-card-title,
.wrap .name {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Categoria completa: canais seguem o mesmo poster 2:3 de Filmes/Séries. */
.wrap.live .pic,
body.live .pic {
  aspect-ratio: 2 / 3 !important;
}

/* Nunca deixa uma linha de cards crescer além da largura útil. */
#tg,
#mg,
#sg,
#s-g,
#tc,
#mc,
#sc {
  align-items: start;
}

/* Melhor leitura em telas muito estreitas sem sobreposição de títulos. */
@media (max-width: 479px) {
  .sf-card-title-zone,
  .wrap .title-zone {
    min-height: 42px !important;
    padding: 19px 6px 6px !important;
  }

  .sf-card-title,
  .wrap .name {
    font-size: min(var(--sf-card-title-size, 11px), 11px) !important;
    line-height: 1.14 !important;
    -webkit-line-clamp: 2;
  }
}

/* Notebook/desktop: evita cards gigantes e mantém alinhamento regular. */
@media (min-width: 1024px) {
  #tg > .sf-card,
  #mg > .sf-card,
  #sg > .sf-card,
  #s-g > .sf-card {
    width: 100%;
    max-width: 100%;
  }
}

/* Ultrawide/4K: não deixa títulos crescerem junto com a tela. */
@media (min-width: 1920px) {
  .sf-card-title,
  .wrap .name {
    font-size: min(var(--sf-card-title-size, 13px), 14px) !important;
  }
}