/*
Theme Name: FilmesFree Theme
Author: FilmesFree
Version: 1.5.0
Description: Tema estilo Netflix para filmes e séries (home + archives + singles com hero cinematográfico).
Text Domain: filmesfree
*/

:root { --ff-red:#e50914; --ff-bg:#0b0b0b; --ff-card:#141414; --ff-muted:#b3b3b3; --ff-line:rgba(255,255,255,.08); }

* { box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--ff-bg); color:#fff; font-family: Arial, sans-serif; margin:0; }
a { color:var(--ff-red); text-decoration:none; }
header { position:sticky; top:0; z-index:60; background:rgba(11,11,11,.88); backdrop-filter: blur(10px); padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
header .brand { font-weight:800; letter-spacing:.5px; }
.container { max-width:1200px; margin:0 auto; padding:22px 18px; }
.ff-home{ padding-top: 8px; }
.hero { padding:26px 18px; background:linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.2)); border-bottom:1px solid rgba(255,255,255,.06); }

/* Hero (base) */
.ff-hero {
  position: relative;
  min-height: 520px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.ff-hero .ff-hero-bg {
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: blur(2px) saturate(1.1);
  opacity: .9;
}
.ff-hero .ff-hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.65) 42%, rgba(11,11,11,.35) 70%, rgba(11,11,11,.9) 100%),
    linear-gradient(180deg, rgba(11,11,11,.25) 0%, rgba(11,11,11,.9) 92%);
}
.ff-hero .ff-hero-inner {
  position:relative;
  max-width: 1200px;
  margin:0 auto;
  padding: 34px 18px 26px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: end;
}

/* Portal hero (menos "Netflix", mais editorial) */
.ff-hero--portal{ min-height: 380px; }
.ff-hero--portal .ff-hero-bg{
  transform: scale(1.08);
  filter: blur(10px) saturate(1.05);
  opacity: .82;
}
.ff-hero--portal .ff-hero-overlay{
  background:
    linear-gradient(90deg, rgba(11,11,11,.94) 0%, rgba(11,11,11,.78) 48%, rgba(11,11,11,.70) 62%, rgba(11,11,11,.94) 100%),
    linear-gradient(180deg, rgba(11,11,11,.10) 0%, rgba(11,11,11,.92) 92%);
}
.ff-hero--portal .ff-hero-inner{
  grid-template-columns: 1fr 220px;
  align-items: center;
  padding: 22px 18px 18px;
}
.ff-hero-copy{ max-width: 760px; }
.ff-kicker{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.ff-hero--portal .ff-title{ font-size: 38px; margin-top: 10px; }
.ff-sinopse--portal{ font-size: 15px; max-width: 680px; color: rgba(255,255,255,.88); }
.ff-hero-media{ display:flex; justify-content:flex-end; }
.ff-hero-poster{
  width: 200px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.ff-hero-poster img{ width:100%; height:auto; display:block; }
.ff-poster {
  width: 100%;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
}
.ff-poster img { width:100%; height:auto; display:block; }
.ff-title { font-size: 44px; line-height:1.05; margin:0 0 10px; font-weight: 800; letter-spacing: -.5px; }
.ff-submeta { color: var(--ff-muted); font-size: 14px; margin-bottom: 12px; }
.ff-sinopse {
  max-width: 780px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 10px;
}
.ff-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.ff-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight: 700;
  font-size: 13px;
}
.ff-btn.primary { background: rgba(229,9,20,.92); border-color: rgba(229,9,20,.92); }
.ff-btn:hover { filter: brightness(1.07); }

/* Home rows */
.ff-row { margin: 12px 0 8px; }
.ff-row-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ff-row h2 { margin: 0; font-size: 18px; letter-spacing: -.2px; }

.ff-link{ color: rgba(255,255,255,.82); font-weight:800; font-size:13px; text-decoration:none; }
.ff-link:hover{ text-decoration:underline; color:#fff; }

.ff-block{ margin: 18px 0 12px; }
.ff-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 12px 4px 6px;
}
.ff-grid .ff-tile{ flex: initial; }

/* Explorar por gênero */
.ff-genres{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding: 10px 4px 2px;
}
.ff-genre-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.ff-genre-chip:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.ff-genre-chip.active{
  background: rgba(229,9,20,.18);
  border-color: rgba(229,9,20,.55);
  color:#fff;
}

.ff-scroll {
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding: 12px 4px 10px;
  scroll-snap-type: x mandatory;
}
.ff-scroll::-webkit-scrollbar { height: 10px; }
.ff-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }

.ff-tile {
  flex: 0 0 165px;
  scroll-snap-align: start;
  background: var(--ff-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow:hidden;
  transition: transform .15s ease, filter .15s ease;
}
.ff-tile:hover { transform: translateY(-3px); filter: brightness(1.05); }
.ff-tile-media img { width:100%; height:auto; display:block; }
.ff-tile .thumb { border-radius:0; }
.ff-tile-meta { display:flex; gap:6px; flex-wrap:wrap; padding: 8px 10px 0; }
.ff-pill {
  display:inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  color:#fff;
  font-weight: 800;
}
.ff-tile-title {
  padding: 8px 10px 12px;
  font-size: 13px;
  color:#fff;
  line-height:1.25;
  font-weight: 700;
}

/* (removido da home) tabs de navegação no hero */

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px; }
.card { background:var(--ff-card); border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.06); transition:transform .15s ease; }
.card:hover { transform: translateY(-3px); }
.thumb { width:100%; aspect-ratio: 2/3; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:12px; }
.card img { width:100%; height:auto; display:block; }
.card h3 { font-size:14px; margin:10px 10px 12px; color:#fff; line-height:1.25; }
.meta { color:var(--ff-muted); font-size:13px; margin-top:10px; }

.badges { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.badge { background:rgba(229,9,20,.15); border:1px solid rgba(229,9,20,.35); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }

.providers { margin-top:16px; padding:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px; }
.providers ul { margin:10px 0 0; padding-left:18px; }
.providers h3 { margin:0 0 6px; font-size: 16px; }
.providers .ff-provider-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.providers .ff-provider-top .ff-btn { padding:9px 12px; font-weight:800; }

.ff-body { max-width: 1200px; margin: 0 auto; padding: 22px 18px 8px; }
.ff-body-grid { display:grid; grid-template-columns: 1fr 360px; gap: 18px; }
@media (max-width: 980px){ .ff-body-grid { grid-template-columns:1fr; } }

.ff-cardbox { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
.ff-cardbox .meta { margin:0 0 10px; }

footer { padding:30px 18px; border-top:1px solid rgba(255,255,255,.06); color:var(--ff-muted); }
.notice-box { margin:16px 0; padding:14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.pager { margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pager a, .pager span { padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:#fff; }

/* anchor highlight */
.ff-flash { animation: ffFlash 1.3s ease; }
@keyframes ffFlash { 0%{ box-shadow:0 0 0 rgba(229,9,20,0);} 20%{ box-shadow:0 0 0 4px rgba(229,9,20,.25);} 100%{ box-shadow:0 0 0 rgba(229,9,20,0);} }

@media (max-width: 860px){
  .ff-hero { min-height: 520px; }
  .ff-hero .ff-hero-inner { grid-template-columns: 1fr; align-items:start; padding-top: 24px; }
  .ff-hero--portal{ min-height: 420px; }
  .ff-hero--portal .ff-hero-inner{ grid-template-columns: 1fr; }
  .ff-hero-media{ justify-content:flex-start; margin-top: 14px; }
  .ff-hero-poster{ width: 180px; }
  .ff-title { font-size: 34px; }
  .ff-poster { max-width: 320px; }
}

/* ==================== Séries: Temporadas + Episódios ==================== */

.ff-tabs { display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; }
.ff-tab {
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; font-weight:800; font-size: 13px;
  padding: 9px 12px; border-radius: 999px; cursor:pointer;
}
.ff-tab.active { background: rgba(229,9,20,.18); border-color: rgba(229,9,20,.40); }
.ff-tab:hover { filter: brightness(1.07); }

.ff-season-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 10px 0 12px; }

.ff-ep-list { display:grid; grid-template-columns: 1fr; gap: 12px; }
.ff-ep {
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.ff-ep-media { width:160px; border-radius: 10px; overflow:hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.ff-ep-media img { width:100%; height:auto; display:block; }
.ff-ep-ph { width:100%; height: 90px; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.55); font-size:12px; }
.ff-ep-title { font-size: 15px; font-weight: 900; }
.ff-ep-meta { margin-top: 6px; color: var(--ff-muted); font-size: 12px; }
.ff-ep-overview { margin-top: 10px; color: rgba(255,255,255,.90); font-size: 14px; line-height: 1.5; }
.ff-ep-overview.muted { color: rgba(255,255,255,.55); }

.ff-trailer { margin: 12px 0 18px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; }
.ff-trailer-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.ff-trailer h3 { margin:0; font-size: 16px; }
.ff-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow:hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.ff-video iframe { position:absolute; inset:0; width:100%; height:100%; }

/* Comentários (WP nativo) dentro do estilo do tema */
.ff-comments h3 { margin: 0 0 10px; font-size: 16px; }
.ff-comments .comment-respond,
.ff-comments .comment-list,
.ff-comments .comments-title { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; }
.ff-comments input[type="text"],
.ff-comments input[type="email"],
.ff-comments input[type="url"],
.ff-comments textarea {
  width:100%; max-width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding: 10px 12px;
}
.ff-comments .submit {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(229,9,20,.92);
  background: rgba(229,9,20,.92);
  color:#fff; font-weight: 900;
  cursor:pointer;
}
.ff-comments .submit:hover { filter: brightness(1.07); }

/* ==============================
   Extras (Elenco / Fotos / Trailer)
   ============================== */
.ff-extras-skel{opacity:.85;}
.ff-cast-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.ff-cast-item{display:flex;gap:10px;align-items:center;min-width:0;}
.ff-cast-item img{width:44px;height:44px;border-radius:999px;object-fit:cover;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.ff-cast-item .t{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ff-cast-item .s{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ff-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ff-media-grid a{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
.ff-media-grid img{display:block;width:100%;height:100%;object-fit:cover;}
.ff-trailer{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);}
.ff-trailer iframe{width:100%;height:360px;border:0;display:block;}

@media (max-width: 700px){
  .ff-ep { grid-template-columns: 1fr; }
  .ff-ep-media { width:100%; }
  .ff-cast-grid{grid-template-columns:repeat(2,1fr)}
  .ff-media-grid{grid-template-columns:repeat(2,1fr)}
  .ff-trailer iframe{height:220px}
}

/* Extras tabs (Trailer / Elenco / Fotos) */
.ff-tabpanels .ff-panel{ display:none; }
.ff-tabpanels .ff-panel.is-active{ display:block; }
.ff-tabs .ff-tab{ cursor:pointer; }
.ff-tabs .ff-tab.is-active{ border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.10); }