/* BoulaxaFlix - visual mais leve, escuro e inspirado no YouTube */
:root{
  --yt-bg:#0f0f0f;
  --yt-panel:#181818;
  --yt-panel-2:#212121;
  --yt-line:rgba(255,255,255,.1);
  --yt-text:#f1f1f1;
  --yt-muted:#aaa;
  --yt-blue:#0ba7fc;
}

body{
  background:var(--yt-bg)!important;
  color:var(--yt-text)!important;
}

.header{
  background:rgba(15,15,15,.96)!important;
  border-bottom:1px solid var(--yt-line)!important;
  padding:10px 28px!important;
  backdrop-filter:blur(12px);
}

.header-container{
  gap:24px!important;
}

.logo img{
  width:150px!important;
  max-height:42px!important;
  object-fit:contain!important;
}

.nav-links a{
  color:var(--yt-text)!important;
  font-size:14px!important;
  font-weight:600!important;
  padding:8px 10px;
  border-radius:999px;
}

.nav-links a:hover,
.nav-links a.active{
  background:var(--yt-panel-2);
  text-decoration:none;
}

.header-right{
  gap:14px!important;
}

.search-btn,
.notifications-btn,
.user-avatar,
.login-nav-btn{
  border-radius:999px!important;
}

.hero{
  height:62vh!important;
  min-height:430px!important;
  border-radius:0 0 18px 18px;
}

.hero-overlay{
  background:linear-gradient(180deg,rgba(15,15,15,.08),var(--yt-bg) 96%),linear-gradient(90deg,rgba(0,0,0,.72),transparent 70%)!important;
}

.hero-content{
  left:28px!important;
  bottom:18%!important;
}

.content{
  margin-top:0!important;
  padding:18px 28px 0!important;
}

.row,
.bf-dynamic-row{
  margin:0 0 34px!important;
  padding:0!important;
  overflow:visible!important;
}

#bf-recent-clicks,
#bf-my-list{
  margin-bottom:34px!important;
}

.row-title{
  font-size:20px!important;
  font-weight:800!important;
  margin-bottom:14px!important;
}

.row-cards{
  gap:14px!important;
  padding:2px 0 8px!important;
}

.row-cards .card{
  width:276px!important;
  min-width:276px!important;
  max-width:276px!important;
  aspect-ratio:16/9!important;
  border-radius:12px!important;
  background:var(--yt-panel)!important;
  box-shadow:none!important;
  transition:transform .18s ease,filter .18s ease!important;
}

.row-cards .card:hover{
  transform:translateY(-4px) scale(1.02)!important;
  z-index:20!important;
}

.row-cards .card img{
  border-radius:12px!important;
}

.card-hover{
  background:transparent!important;
  bottom:auto!important;
  top:100%!important;
  padding:8px 0 0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
}

.card-hover h3{
  color:var(--yt-text)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.35!important;
}

.bf-fav-btn{
  opacity:1!important;
  background:rgba(15,15,15,.78)!important;
}

.bf-fav-btn.is-active{
  background:var(--yt-blue)!important;
}

.bf-search-box{
  border-radius:24px!important;
  background:#121212!important;
  border-color:#303030!important;
}

.bf-search-banner{
  width:276px!important;
  min-width:276px!important;
  max-width:276px!important;
  aspect-ratio:16/9!important;
  border-radius:12px!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
}

.bf-searching .hero,
.bf-searching .content,
.bf-searching footer,
.footer{
  display:none!important;
}

.bf-searching .bf-search-topbar{
  left:28px!important;
  right:28px!important;
  top:78px!important;
  width:auto!important;
  max-width:none!important;
}

.bf-searching .bf-search-results{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,276px)!important;
  gap:14px!important;
  max-height:calc(100vh - 150px)!important;
  overflow:auto!important;
  padding:18px 0!important;
}

.notifications-panel,
.dropdown-menu{
  border-radius:14px!important;
  background:#181818!important;
  border-color:var(--yt-line)!important;
}

.bf-suggestion-card{
  width:min(820px,100%)!important;
  border-radius:14px!important;
  background:#0f0f0f!important;
}

.bf-suggestion-card h2{
  font-size:28px!important;
}

.bf-suggestion-card input,
.bf-suggestion-card select,
.bf-suggestion-card textarea{
  border-radius:10px!important;
  background:#181818!important;
}

.bf-suggestion-history{
  max-height:360px!important;
}

.bf-suggestion-history article{
  border-radius:12px!important;
  background:#181818!important;
  display:grid!important;
  gap:6px!important;
}

.bf-suggestion-history small[data-status="pendente"]{
  background:rgba(255,204,77,.16)!important;
  color:#ffe08a!important;
}

.bf-suggestion-history small[data-status="aprovada"]{
  background:rgba(45,211,111,.16)!important;
  color:#82ffae!important;
}

.bf-suggestion-history small[data-status="rejeitada"]{
  background:rgba(255,77,97,.16)!important;
  color:#ff9aa7!important;
}

.bf-series-modal{position:fixed;inset:0;z-index:2147482500;background:rgba(0,0,0,.72);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px}.bf-series-modal.is-hidden{display:none}.bf-series-card{width:min(940px,calc(100vw - 28px));min-height:78vh;border-radius:14px;background:#171717;color:#fff;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.72);position:relative}.bf-series-close{position:absolute;right:18px;top:18px;z-index:4;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.76);color:#fff;font-size:28px;line-height:1;cursor:pointer}.bf-series-hero{min-height:440px;background-size:cover;background-position:center;position:relative;padding:260px 52px 34px}.bf-series-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),#171717 92%),linear-gradient(90deg,rgba(0,0,0,.62),transparent 62%)}.bf-series-hero>*{position:relative;z-index:2}.bf-series-logo{max-width:min(380px,70%);max-height:120px;object-fit:contain;object-position:left center;display:block;margin-bottom:18px}.bf-series-hero h2{font-size:58px;line-height:.95;margin:0 0 18px}.bf-series-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.bf-series-play,.bf-series-add{border:0;border-radius:999px;padding:13px 18px;font-weight:900;cursor:pointer}.bf-series-play{background:#fff;color:#000}.bf-series-add{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.44);padding:0;font-size:28px}.bf-series-add.is-active{background:var(--yt-blue);border-color:var(--yt-blue)}.bf-series-body{display:grid;grid-template-columns:1.25fr .85fr;gap:42px;padding:0 52px 42px}.bf-series-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#bdbdbd;font-weight:800;margin-bottom:18px}.bf-series-synopsis{font-size:18px;line-height:1.55;color:#f2f2f2}.bf-series-side{color:#b9b9b9;line-height:1.5}.bf-series-side strong{color:#fff}.bf-episodes-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}.bf-episodes-head h3{font-size:28px}.bf-season-select{border:1px solid rgba(255,255,255,.24);border-radius:999px;background:#242424;color:#fff;padding:12px 14px;font:inherit;font-weight:900}.bf-episode-list{grid-column:1/-1;display:grid;gap:8px}.bf-episode{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding:13px 0;color:#fff;text-decoration:none}.bf-episode span{color:#999;font-size:24px;font-weight:900}.bf-episode strong{display:block}.bf-episode small{color:#aaa}.bf-episode button{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:8px 12px;font-weight:900}

.bf-payment-warning{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:2147481500!important;width:min(620px,calc(100% - 32px))!important;border:1px solid rgba(11,167,252,.32)!important;border-radius:16px!important;background:#181818!important;box-shadow:0 24px 80px rgba(0,0,0,.6)!important;padding:22px!important;color:#fff!important}.bf-payment-warning-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}.bf-payment-warning strong{display:block;font-size:22px;margin-bottom:8px}.bf-payment-warning p{color:#aaa;line-height:1.5;margin-bottom:14px}.bf-payment-warning a{display:inline-flex;border-radius:999px;background:var(--yt-blue);color:#fff;text-decoration:none;padding:11px 16px;font-weight:900}

.bf-site-toast{position:fixed;right:22px;bottom:22px;z-index:2147482600;max-width:360px;border:1px solid rgba(11,167,252,.45);border-radius:12px;background:#181818;box-shadow:0 18px 60px rgba(0,0,0,.5);color:#fff;padding:13px 15px;font:800 14px Inter,Arial,sans-serif;transform:translateY(14px);opacity:0;transition:.22s}.bf-site-toast.is-visible{transform:translateY(0);opacity:1}.bf-site-toast.is-error{border-color:rgba(181,25,42,.72)}

button:focus-visible,a:focus-visible,.card:focus-visible{outline:3px solid var(--yt-blue)!important;outline-offset:4px}

@media(max-width:760px){
  .header{padding:8px 14px!important}
  .nav-links{display:none!important}
  .content{padding:14px!important}
  .row-cards .card{width:220px!important;min-width:220px!important;max-width:220px!important}
  .hero-content{left:16px!important}
}

@media(max-width:760px){.bf-series-modal{padding:0}.bf-series-card{width:100%;min-height:100vh;border-radius:0}.bf-series-hero{min-height:340px;padding:210px 20px 26px}.bf-series-hero h2{font-size:38px}.bf-series-body{grid-template-columns:1fr;padding:0 20px 32px;gap:20px}.bf-episode{grid-template-columns:40px 1fr}.bf-episode button{grid-column:2}}

/* Overrides finais: cards sempre horizontais 16:9. */
.row-cards > .card,
.content .card,
.bf-dynamic-row .card,
.bf-search-banner {
  width: 276px !important;
  min-width: 276px !important;
  max-width: 276px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.row-cards > .card img,
.content .card img,
.bf-dynamic-row .card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.row-cards > .card .card-hover,
.content .card .card-hover {
  display: none !important;
}

.notifications-panel {
  width: min(440px, calc(100vw - 28px)) !important;
  max-height: min(620px, calc(100vh - 96px)) !important;
  overflow: auto !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(12, 15, 22, .98) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62) !important;
  backdrop-filter: blur(18px) !important;
}

.notification-item {
  grid-template-columns: 118px 1fr !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
}

.notification-item:hover {
  background: linear-gradient(180deg, rgba(11,167,252,.18), rgba(255,255,255,.04)) !important;
  border-color: rgba(11,167,252,.38) !important;
}

.notification-item-img {
  width: 118px !important;
  min-width: 118px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px !important;
  background-color: #202020 !important;
}

.notification-item-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.notification-item-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
}

@media(max-width:760px){
  .row-cards > .card,
  .content .card,
  .bf-dynamic-row .card,
  .bf-search-banner {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* Hero em vídeo: o trailer ocupa o banner inteiro no topo. */
.hero {
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
}

.hero-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.08) !important;
  pointer-events: none !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.hero-content {
  position: absolute !important;
  z-index: 2 !important;
}