/**
 * Layout Fix CSS
 * Estilos para evitar o "pulo" da página durante o carregamento
 */

/* Conteúdo pré-renderizado (vindo do cache) */
#episodes.prerender,
#serie_contenido.prerender {
  min-height: auto !important;
  display: block !important;
  opacity: 1 !important; /* Ensure visibility without animation */
}

/* Preparação da div episodes antes do conteúdo ser carregado */
#episodes.preload {
  display: block !important;
  min-height: 400px;
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  overflow: hidden;
}

#episodes.preload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007cba;
  border-radius: 50%;
  /* Removed animation: spin 1s linear infinite; */
}

/* Preparação da div serie_contenido antes do conteúdo ser carregado */
#serie_contenido.preload {
  display: block !important;
  min-height: 300px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  overflow: hidden;
}

#serie_contenido.preload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007cba;
  border-radius: 50%;
  /* Removed animation: spin 1s linear infinite; */
}

/* Garantir que a div episodes seja imediatamente visível, mesmo com a classe fixidtab */
#episodes.fixidtab.prerender,
#episodes.fixidtab.loaded {
  display: block !important;
}

/* Estilos para o link do episódio para remover a formatação padrão de link */
.episode-link-wrapper {
  color: inherit; /* Herda a cor do texto do elemento pai */
  text-decoration: none; /* Remove o sublinhado */
  display: block; /* Garante que o link ocupe toda a área do item da lista */
}

.episode-link-wrapper:hover,
.episode-link-wrapper:focus,
.episode-link-wrapper:active {
  /* Permite que a cor de hover padrão do tema seja aplicada */
  text-decoration: none; /* Garante que não haja sublinhado ao passar o mouse, focar ou ativar */
}

/* Estilo para links de episódios visitados (cor amarela/dourada) */
.episode-link-wrapper:visited .numerando,
.episode-link-wrapper:visited .episodiotitle,
.episode-link-wrapper:visited .episodiotitle span.date,
.episode-link-wrapper:visited .data h3,
.episode-link-wrapper:visited .data span {
  color: #ffc386; /* Cor amarela/dourada para links visitados */
}

/* Garante que o texto dentro do link mude de cor ao passar o mouse */
.episode-link-wrapper:hover .numerando,
.episode-link-wrapper:hover .episodiotitle,
.episode-link-wrapper:hover .episodiotitle span.date,
.episode-link-wrapper:hover .data h3,
.episode-link-wrapper:hover .data span {
  color: var(
    --primary-color
  ); /* Cor de link padrão ao passar o mouse. Ajuste se o tema tiver uma cor específica. */
}

/* Estilo para o overlay do botão de play */
/* Estilo para o overlay do botão de play, específico para as listas de episódios */
#episodes .imagen,
#serie_contenido .imagen {
  position: relative; /* Garante que o overlay seja posicionado corretamente dentro da imagem */
}

#episodes .play-button-overlay,
#serie_contenido .play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
}

#episodes .play-button-overlay img,
#serie_contenido .play-button-overlay img {
  width: 25px; /* Reduz o tamanho do ícone de play */
  height: 25px;
  opacity: 0.75;
}

/* ======================================
 * MODULE WRAPPER CLS FIXES
 * (Previously generated as inline CSS)
 * ====================================== */

.module-wrapper {
  min-height: 320px;
}
.module-wrapper .items.owl-carousel .item .poster {
  aspect-ratio: 185 / 278;
  background-color: #000;
  height: auto;
  display: block;
}
.module-wrapper .items.owl-carousel .item .poster img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Genre badges */
.sheader,
.sgeneros {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.sgeneros a {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  padding: 3px 8px;
  border-radius: 3px;
  margin: 2px 3px 2px 0;
  display: inline-block;
  text-decoration: none;
  font-size: 12px;
  white-space: normal;
}
.sgeneros {
  line-height: 1.8;
  padding-bottom: 5px;
  padding-left: 0;
  margin-left: 0;
}
.sgeneros a:first-child {
  margin-left: 0 !important;
  padding-left: 8px !important;
}

/* Custom scrollbar (mCSB widget — not affected by colors.dark.min.css cascade) */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: var(--primary-color) !important;
}
/* NOTE: html/body scrollbar-color is set via wp_add_inline_style() in doo_scripts.php,
 * which outputs AFTER colors.dark.min.css and therefore correctly overrides its
 * hardcoded scrollbar-color value. */

/* Player background */
.pframe {
  background-color: var(--player-bg) !important;
}

/* ======================================
 * HOME SEO CONTENT LAYOUT FIXES
 * ====================================== */

/* Home SEO Content - CSS limpo após correção dos widgets */
.home-seo-content {
  clear: both;
  width: 100%;
  float: none;
  display: block;
  margin: 20px 0 0 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 5px;
  box-sizing: border-box;
}

/* Responsivo */
@media (max-width: 768px) {
  .home-seo-content {
    margin: 15px 0 0 0;
    padding: 15px;
  }
}