/*
Theme Name: O Que Assistir Agora
Theme URI: https://oqueassistiragora.com.br
Author: O Que Assistir Agora
Description: Catálogo de filmes e séries do streaming brasileiro com sorteador filtrado. Dados via TMDB.
Version: 1.0.11
Text Domain: oqueassistir
*/

:root {
	--bg: #0b0e14;
	--surface: #141926;
	--surface-2: #1b2233;
	--text: #e8ecf3;
	--muted: #93a0b4;
	--accent: #f43f5e;
	--accent-2: #fb923c;
	--grad: linear-gradient(90deg, #fb923c, #f43f5e);
	--radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 26px; margin-bottom: 18px; }
.mutd { color: var(--muted); }

/* ---------- Header ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(11, 14, 20, .92); backdrop-filter: blur(10px); border-bottom: 1px solid #1e2637; }
.hd-in { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { font-size: 19px; white-space: nowrap; }
.brand strong { font-weight: 800; }
.brand-ag { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; margin-left: 5px; letter-spacing: .5px; }
.hd-nav { display: flex; gap: 18px; font-size: 15px; color: var(--muted); }
.hd-nav a:hover { color: var(--text); }
.hd-search { margin-left: auto; }
.hd-search input {
	background: var(--surface); border: 1px solid #232d42; color: var(--text);
	border-radius: 99px; padding: 8px 16px; width: 190px; font-size: 14px; outline: none;
}
.hd-search input:focus { border-color: var(--accent); }
.hd-burger { display: none; background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; }
.hd-menu { display: none; flex-direction: column; padding: 10px 20px 16px; gap: 12px; border-top: 1px solid #1e2637; }
.hd-menu.is-open { display: flex; }

/* ---------- Hero + filtros ---------- */
.hero { padding: 52px 0 30px; background: radial-gradient(1200px 400px at 50% -100px, #1d1530 0%, transparent 70%); }
.hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 900; text-wrap: balance; }
.hero .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); margin: 10px 0 26px; max-width: 640px; text-wrap: pretty; }

.filters { background: var(--surface); border: 1px solid #212b40; border-radius: var(--radius); padding: 20px; }
.fgroup { margin-bottom: 14px; }
.flabel { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	background: var(--surface-2); color: var(--text); border: 1px solid #26314a;
	padding: 7px 15px; border-radius: 99px; font-size: 14px; cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }
.factions { display: flex; gap: 12px; margin-top: 6px; }
.btn {
	border: 0; border-radius: 99px; padding: 12px 26px; font-size: 16px; font-weight: 700;
	cursor: pointer; transition: .15s;
}
.btn-primary { background: var(--grad); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid #26314a; }
.btn-ghost:hover { border-color: var(--accent); }

/* ---------- Grid de cards ---------- */
.sec { padding: 34px 0; }
.sec-alt { background: var(--surface); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-listing { grid-template-columns: repeat(6, 1fr); }

.card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); transition: transform .15s; display: block; }
.card:hover { transform: translateY(-4px); }
.poster { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.poster-empty { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; font-size: 44px; background: var(--surface-2); }
.nota {
	position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, .75);
	padding: 3px 9px; border-radius: 99px; font-size: 13px; font-weight: 700; color: #ffd166;
}
.tbadge {
	position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .7);
	padding: 3px 9px; border-radius: 99px; font-size: 11.5px; color: var(--text); text-transform: uppercase; letter-spacing: .5px;
}
.cinfo { display: block; padding: 10px 12px 12px; }
.cinfo strong { display: block; font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinfo em { font-style: normal; color: var(--muted); font-size: 12.5px; }

/* ---------- Fileiras por categoria ---------- */
.row { margin-bottom: 26px; }
.row-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.row-hd h3 { font-size: 20px; }
.row-all { color: var(--accent); font-size: 14px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: #26314a; border-radius: 99px; }

/* ---------- Blog ---------- */
.bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bcard { background: var(--surface-2); border-radius: var(--radius); overflow: hidden; padding-bottom: 12px; }
.bcard img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin-bottom: 10px; }
.bcard strong { display: block; padding: 0 14px; font-size: 15.5px; }
.bcard em { display: block; padding: 4px 14px 0; font-style: normal; color: var(--muted); font-size: 13px; }
.blog-soon { background: var(--surface-2); border: 1px dashed #2b3855; border-radius: var(--radius); padding: 26px; color: var(--muted); }
.sec-more { margin-top: 18px; text-align: center; }
.sec-more a { color: var(--accent); font-weight: 700; }
.catnav { margin-bottom: 22px; }
a.chip-link { display: inline-flex; align-items: center; gap: 6px; }
.cnt { background: rgba(0, 0, 0, .3); border-radius: 99px; padding: 0 7px; font-size: 11.5px; color: var(--muted); }
.chip.is-on .cnt { color: #fff; }
.blog-listing { margin-top: 6px; }

.seo-text { max-width: 760px; }
.seo-text p { color: var(--muted); }

/* ---------- Página do título ---------- */
.single { padding: 30px 20px 10px; }
.back { color: var(--muted); font-size: 14px; display: inline-block; margin-bottom: 18px; }
.back:hover { color: var(--text); }
.single-in { display: grid; grid-template-columns: 300px 1fr; gap: 34px; }
.single-poster img { border-radius: var(--radius); width: 100%; }
.single-info h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 8px; }
.single-info .ano { color: var(--muted); font-weight: 400; }
.meta-line { display: flex; gap: 16px; align-items: center; margin: 6px 0 12px; }
.nota-big { color: #ffd166; font-weight: 800; font-size: 20px; }
.gen-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pill { background: var(--surface-2); border: 1px solid #26314a; padding: 4px 13px; border-radius: 99px; font-size: 13px; }
.pill:hover { border-color: var(--accent); }
.share { display: flex; gap: 10px; margin: 4px 0 20px; }
.btn-share {
	background: var(--surface-2); color: var(--text); border: 1px solid #26314a;
	border-radius: 99px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px; transition: .15s;
}
.btn-share:hover { border-color: var(--accent); }
.btn-wa:hover { border-color: #25d366; color: #25d366; }

.watch { margin-bottom: 22px; }
.watch-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-watch { background: var(--surface-2); border: 1px solid #2b3855; padding: 10px 20px; font-size: 15px; }
.plat-netflix:hover { border-color: #e50914; color: #e50914; }
.plat-prime-video:hover { border-color: #00a8e1; color: #00a8e1; }
.plat-max:hover { border-color: #8b5cf6; color: #8b5cf6; }
.plat-disney-plus:hover { border-color: #4fc3f7; color: #4fc3f7; }
.plat-globoplay:hover { border-color: #fb1; color: #fb1; }
.plat-apple-tv-plus:hover { border-color: #fff; }
.plat-paramount-plus:hover { border-color: #0064ff; color: #4d94ff; }
.single-info h2 { font-size: 19px; margin: 18px 0 8px; }
.sinopse { color: var(--muted); max-width: 640px; }
.veredito { background: linear-gradient(135deg, rgba(251, 146, 60, .09), rgba(244, 63, 94, .06)); border: 1px solid rgba(251, 146, 60, .35); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; margin-top: 22px; max-width: 640px; }
.veredito-tag { display: inline-block; background: linear-gradient(135deg, #fb923c, #f43f5e); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border-radius: 99px; padding: 3px 11px; margin-bottom: 10px; }
.veredito h2 { margin-top: 0 !important; }
.veredito p:last-child { margin-bottom: 0; }

/* Trailer lite-embed */
.yt { position: relative; max-width: 760px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
	position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
	background: var(--grad); color: #fff; border: 0; font-size: 26px; cursor: pointer;
}
.yt-play:hover { transform: scale(1.08); }

/* ---------- Listagens / páginas ---------- */
.listing, .page-in { padding: 36px 20px; min-height: 55vh; }
.listing h1, .page-in h1 { margin-bottom: 8px; font-size: clamp(26px, 4vw, 36px); }
.listing-sub { color: var(--muted); margin-bottom: 22px; }
.listing .grid { margin-top: 18px; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pager .page-numbers {
	background: var(--surface-2); border: 1px solid #26314a; min-width: 38px; text-align: center;
	padding: 7px 12px; border-radius: 10px; font-size: 14px;
}
.pager .page-numbers.current { background: var(--grad); border-color: transparent; font-weight: 700; }

/* Paginador client-side (sugestões + categorias da home) */
.cpager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.cpager:empty { display: none; }
.cpager .pg {
	background: var(--surface-2); border: 1px solid #26314a; color: var(--text);
	min-width: 38px; padding: 7px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: .15s;
}
.cpager .pg:hover:not(:disabled) { border-color: var(--accent); }
.cpager .pg:disabled { opacity: .35; cursor: default; }
.cpager .pg.is-cur { background: var(--grad); border-color: transparent; font-weight: 700; }
.pg-dots { color: var(--muted); padding: 0 2px; }
.page-content { max-width: 720px; color: #c6cfdd; }
.page-content p { margin-bottom: 14px; }
.page-content h2 { font-size: 19px; margin: 26px 0 10px; color: var(--text); }
.page-content a { color: var(--accent); }
.page-content em { color: var(--muted); }
.bp-cover { border-radius: var(--radius); margin-bottom: 20px; }

/* Itens de lista do blog (posts "top N") */
.bl-item { display: flex; gap: 18px; background: var(--surface); border: 1px solid #212b40; border-radius: var(--radius); padding: 16px; margin: 18px 0; }
.bl-item > a { flex: 0 0 92px; }
.bl-item img { width: 92px; border-radius: 10px; aspect-ratio: 2 / 3; object-fit: cover; }
.bl-body h2, .bl-body h3 { font-size: 18px; margin: 0 0 2px; color: var(--text); }
.listing-sub p { margin: 0; }
.bl-meta { color: #ffd166; font-size: 13.5px; margin-bottom: 8px; }
.bl-meta strong { color: var(--muted); font-weight: 600; }
.bl-link { font-weight: 700; }
.blogpost .page-content { max-width: 760px; }
@media (max-width: 540px) {
	.bl-item { gap: 12px; padding: 12px; }
	.bl-item > a { flex-basis: 72px; }
	.bl-item img { width: 72px; }
}
.empty { color: var(--muted); padding: 30px 0; }
.adslot { max-width: 1120px; margin: 10px auto; padding: 0 20px; text-align: center; }

/* ---------- Footer ---------- */
.ft { border-top: 1px solid #1e2637; margin-top: 40px; padding: 30px 0 40px; color: var(--muted); font-size: 14px; }
.ft-brand { font-weight: 700; color: var(--text); margin-bottom: 10px; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.ft-nav a:hover { color: var(--text); }
.ft-tmdb { font-size: 12.5px; max-width: 640px; }
.ft-tmdb a { color: var(--accent); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
	.hd-nav, .hd-search { display: none; }
	.hd-burger { display: block; margin-left: auto; }
	.grid, .grid-listing { grid-template-columns: repeat(3, 1fr); }
	.rail { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
	.single-in { grid-template-columns: 1fr; }
	.single-poster { max-width: 260px; }
	.bloggrid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
	.grid, .grid-listing { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.rail { grid-auto-columns: calc((100% - 14px) / 2); }
	.factions { flex-direction: column; }
	.btn { width: 100%; }
}