/* ═══════════════════════════════════════════════════════════════
   MEGAFLIX — mobile-fix.css
   APENAS patches adicionais mobile — NÃO sobrescreve style.css
   Carregado DEPOIS do style.css em todas as páginas
═══════════════════════════════════════════════════════════════ */

/* ── 1. VIEWPORT META já correto nas páginas — apenas garantias ── */
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ── 2. TOUCH TARGETS — mínimo 48px em elementos interativos ── */
@media (max-width: 780px) {
  .genre-pg-btn,
  .pg-btn,
  .tab-btn,
  .fsel,
  .genre-other-tag,
  .genre-switch,
  .btn-hero-watch,
  .btn-hero-info,
  .sp-topbar-btn,
  .player-close,
  .mob-menu-btn {
    min-height: 48px;
  }

  /* Botões de paginação do gênero — touch-friendly */
  .genre-pg-btn {
    min-width: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Botões de servidor no player */
  .srv-btn, .pob-srv-btn, .pob-ep-srv {
    min-height: 52px;
  }
}

/* ── 4. PLAYER MOBILE — sidebar vai para baixo do vídeo ── */
@media (max-width: 780px) {
  /* player-body sem padding que quebra o visual */
  .player-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  /* Sidebar/controles abaixo do vídeo, full-width */
  #playerMainRow {
    flex-direction: column !important;
    gap: 0 !important;
  }
  #playerMainRow > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Seções abaixo do player com padding lateral */
  #playerRelated,
  #playerComments,
  #playerLegalBlock,
  .player-related,
  .player-comments,
  .player-legal-block {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* ── 5. CARDS — tamanho mínimo legível em 320px ── */
@media (max-width: 360px) {
  .row-track .card {
    flex: 0 0 96px !important;
    width: 96px !important;
  }
  .row-viewport { margin: 0 26px !important; }
  .row-btn { width: 26px !important; }
}

/* ── 6. HERO — nunca cortar o título em mobile ── */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.35rem, 5.5vw, 1.9rem) !important;
    line-height: 1.15 !important;
  }
  .hero-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 28px !important;
  }
  /* Botões do hero empilhados em telas muito pequenas */
  .hero-btns {
    flex-direction: column;
    gap: 8px;
  }
  .btn-hero-watch, .btn-hero-info {
    width: 100%;
    justify-content: center;
  }
}

/* ── 7. MENU MOBILE — hamburger sempre com área correta ── */
.mob-menu-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 8. PÁGINA DE GÊNERO — corrige padding top em mobile ── */
@media (max-width: 640px) {
  /* O genre-page tem padding-top:120px (para o header fixo) — ok manter */
  .genre-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .genre-hero-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 12px !important;
  }
  .genre-hero {
    padding: 20px 0 16px !important;
    margin-bottom: 18px !important;
  }
  .genre-pg-nav {
    gap: 5px;
    flex-wrap: wrap;
  }
  /* Esconder botão "Anterior/Próximo" em texto, mostrar só seta em telas muito pequenas */
}

@media (max-width: 380px) {
  .genre-pg-btn {
    font-size: 12px !important;
    padding: 0 8px !important;
    min-width: 38px !important;
  }
}

/* ── 9. SÉRIE INFO ROW — nunca quebrar o layout horizontal ── */
@media (max-width: 480px) {
  .sp-info-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ── 10. TOPBAR DA SÉRIE — título não transborda ── */
@media (max-width: 480px) {
  .series-ov-title {
    max-width: 40vw !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .player-movie-title {
    max-width: 90px !important;
    font-size: 11px !important;
  }
}

/* ── 11. SCROLL SUAVE + OVERSCROLL ── */
.player-ov,
.series-ov,
.mob-nav-ov,
.mob-nav {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 12. EVITAR ZOOM iOS em inputs ── */
@media (max-width: 780px) {
  input[type="text"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
  /* busca mantém tamanho visual */
  .search-input {
    font-size: 16px !important;
  }
}

/* ── 13. GRID DE FILMES/SÉRIES — mínimo 2 colunas legíveis ── */
@media (max-width: 360px) {
  #pgGrid.sf-grid,
  .pg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── 14. BACK TO TOP — mobile otimizado ── */
@media (max-width: 640px) {
  button#sf-back-to-top {
    width: 42px;
    height: 42px;
    font-size: 20px;
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
  }
}

/* ── 15. FOOTER — padding lateral em mobile ── */
@media (max-width: 480px) {
  .footer-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .footer-legal-top {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── 16. REMOVE zoom indesejado ao tocar em cards ── */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s !important;
  }
  .top-card:hover .top-card-img {
    transform: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.5) !important;
  }
  .top-card:active .top-card-img {
    transform: scale(0.96) !important;
  }
  /* No touch, sempre mostrar o play button */
  .card-hover-layer {
    background: linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 45%,transparent 100%) !important;
    opacity: 1 !important;
  }
  .card-play {
    transform: scale(1) !important;
    opacity: 0.9 !important;
  }
  .card:hover .card-poster img,
  .card:hover .card-thumb {
    transform: none !important;
    filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HEADER DAS PÁGINAS DE GÊNERO — mobile-fix adicional
   As páginas genero-filmes.html / genero-series.html usam
   <header class="topbar"> com .topbar-inner que não tem
   regras mobile no style.css — adicionamos aqui
═══════════════════════════════════════════════════════════ */

/* topbar-inner: funciona como header-inner */
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* logo dentro do topbar-inner */
.topbar-inner .logo {
  font-size: 1.4rem;
  letter-spacing: 2px;
}

/* nav principal — oculto em mobile */
.topbar-inner .topbar-links {
  display: none;
}

/* header-right dentro do topbar */
.topbar-inner .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* mob-menu-btn visível por padrão nas páginas de gênero */
.topbar .mob-menu-btn {
  display: flex;
}

/* topbar como header fixo nas páginas de gênero */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14,20,32,.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 !important;
}

/* genre-page padding-top corrigido para não sobrepor o header */
.genre-page {
  padding-top: 80px;
}

@media (min-width: 1024px) {
  /* Em desktop mostrar nav links */
  .topbar-inner .topbar-links {
    display: flex;
    gap: 8px;
  }
  /* esconder hamburger em desktop */
  .topbar .mob-menu-btn {
    display: none;
  }
  .topbar-inner {
    padding: 0 24px;
    height: 68px;
    gap: 24px;
  }
  .topbar-inner .logo {
    font-size: 1.7rem;
  }
  .genre-page {
    padding-top: 120px;
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    padding: 0 10px;
    height: 52px;
  }
  .topbar-inner .logo {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  /* busca menor em mobile pequeno */
  .topbar-inner .search-input {
    width: 90px;
  }
  .topbar-inner .search-input:focus {
    width: 140px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER + NAVBAR MOBILE — otimização completa
   Garante que tudo apareça corretamente em todos os tamanhos
═══════════════════════════════════════════════════════════════ */

/* ── Desktop/tablet largo: hamburger oculto, navbar completa ── */
@media (min-width: 901px) {
  .mob-menu-btn { display: none !important; }
  .navbar-bar-inner {
    flex-direction: row !important;
    height: 50px !important;
    padding: 0 24px !important;
  }
  .navbar-left { gap: 20px; }
  .navbar-search-wrap { width: 280px; }
}

/* ── Tablet (≤900px): hamburger aparece, navbar vira 2 linhas ── */
@media (max-width: 900px) {
  /* Header */
  .header-inner { height: 58px !important; padding: 0 16px !important; gap: 12px !important; }
  .logo-svg { height: 30px !important; }
  .mob-menu-btn { display: flex !important; }

  /* Navbar bar: empilha verticalmente */
  .navbar-bar { top: 58px !important; }
  .navbar-bar-inner {
    flex-direction: column !important;
    height: auto !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow: visible !important; /* dropdown não pode ser cortado */
  }
  .navbar-left {
    width: 100%;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible; /* permite dropdown aparecer */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar-left::-webkit-scrollbar { display: none; }
  .navbar-links { gap: 0; overflow: visible; }
  .navbar-link { padding: 5px 10px; font-size: 12px; }
  .navbar-search-wrap { width: 100%; }
  .navbar-search-input { font-size: 16px !important; } /* evita zoom iOS */
}

/* ── Mobile (≤640px): header mais compacto ── */
@media (max-width: 640px) {
  .header-inner { height: 52px !important; padding: 0 12px !important; }
  .logo-svg { height: 26px !important; }
  .navbar-bar { top: 52px !important; }

  /* Sociais: só ícones, sem texto */
  .navbar-social-icon { width: 28px; height: 28px; }

  /* Links: scroll horizontal sem quebra de linha */
  .navbar-links { flex-wrap: nowrap; white-space: nowrap; }
  .navbar-link { padding: 5px 8px; font-size: 11px; letter-spacing: 0; }


  /* Busca: full-width e com tamanho legível */
  .navbar-search-wrap { width: 100%; }
  .navbar-search-input {
    width: 100% !important;
    font-size: 16px !important; /* evita zoom iOS */
    padding: 7px 40px 7px 12px;
  }

  /* Info banner no mobile: compacto mas visível */
  .info-badge { padding: 6px 12px; font-size: 10px; }
  .info-text { font-size: 11px !important; padding: 6px 10px !important; display: block !important; }
}

/* ── Mobile pequeno (≤420px) ── */
@media (max-width: 420px) {
  .header-inner { height: 48px !important; }
  .logo-svg { height: 24px !important; }
  .navbar-bar { top: 48px !important; }

  /* Info banner mantém texto mas menor */
  .info-text { font-size: 10px !important; padding: 5px 8px !important; display: block !important; }
  .info-socials { padding: 4px 8px; }

  /* Navbar: links bem compactos */
  .navbar-link { padding: 4px 7px; font-size: 10px; }
  .navbar-arr { display: none; }
}

/* ── Dropdown da navbar em mobile: largura maior, touch-friendly ── */
@media (max-width: 900px) {
  .navbar-dropdown {
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navbar-dropdown a {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 48px;
  }
}

/* ── HERO MOBILE — melhorias completas ── */

/* Tablet */
@media (max-width: 900px) {
  .hero {
    height: min(65vh, 480px) !important;
    align-items: flex-end;
  }
  .hero-content {
    padding: 0 20px 40px !important;
    max-width: 100%;
  }
  .hero-title {
    font-size: clamp(1.8rem, 5.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }
  .hero-overview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }
  .hero-thumbs { display: none !important; }
  .hero-btns { gap: 10px; }
  .btn-hero-watch, .btn-hero-info {
    padding: 11px 24px !important;
    font-size: 13px !important;
    min-height: 48px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .hero {
    height: min(72vh, 520px) !important; /* mais alto em mobile para destaque */
    align-items: flex-end;
  }
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(8,12,20,1) 0%,
      rgba(8,12,20,.85) 30%,
      rgba(8,12,20,.4) 65%,
      transparent 100%
    ) !important; /* gradiente mais forte para legibilidade */
  }
  .hero-content {
    padding: 0 16px 28px !important;
    max-width: 100%;
    width: 100%;
  }
  .hero-genre-tag {
    display: inline-block !important; /* reativa em mobile */
    font-size: 10px !important;
    padding: 3px 10px !important;
    margin-bottom: 10px !important;
  }
  .hero-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
  }
  .hero-info {
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
  }
  .hero-overview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.75) !important;
    margin-bottom: 18px !important;
    max-width: 100%;
  }
  .hero-btns {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .btn-hero-watch {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    min-width: 140px !important;
  }
  .btn-hero-info {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    min-width: 120px !important;
  }
  .hero-dots { bottom: 12px !important; }
}

/* Mobile pequeno */
@media (max-width: 420px) {
  .hero { height: min(78vh, 480px) !important; }
  .hero-title { font-size: clamp(1.3rem, 7vw, 1.7rem) !important; }
  .hero-overview { -webkit-line-clamp: 2 !important; font-size: 11px !important; }
  .hero-content { padding: 0 12px 24px !important; }
  .btn-hero-watch, .btn-hero-info {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* ── Sticky top dinâmico: garante que navbar não cubra conteúdo ──
   O JS já recalcula via pageshow/resize, mas o CSS serve de fallback */
@supports (top: env(safe-area-inset-top)) {
  .navbar-bar {
    /* adiciona safe area do notch em iPhones com navbar sticky */
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ── Touch: evita highlight azul nos links da navbar ── */
.navbar-link,
.navbar-social-icon,
.navbar-search-btn,
.info-social-btn,
.info-link {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Garante que o search-dropdown não vaze em mobile ── */
@media (max-width: 640px) {
  .navbar-search-wrap .search-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Btn-pedidos na navbar mobile: touch target adequado ── */
.navbar-link[onclick*="openPedidosOv"] {
  min-height: 36px;
}

/* ── Previne sobreposição do header sticky + navbar sticky
   ao fazer scroll rápido em iOS (momentum scrolling) ── */
.header, .navbar-bar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}