/*
Theme Name: SambaPorno Clone
Theme URI: http://seusite.com/
Author: Seu Nome
Author URI: http://seusite.com/
Description: Um tema WordPress para um site de vídeos com funcionalidades de player, comentários e relacionados.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sambaporno-clone
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  overflow-x: hidden; /* Garante que o corpo não deslize horizontalmente */
}

/* Links globais com a cor solicitada */
a {
  color: #4286f6; /* Cor solicitada para todos os links */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #3366cc; /* Um tom mais escuro no hover */
}

header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 12px 0; /* Removido padding horizontal para que header-inner controle */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distribui os itens uniformemente */
  width: 100%; /* Ocupa a largura total do seu flex container */
  max-width: 1300px; /* Limita a largura máxima */
  padding: 0 20px; /* Adiciona padding para evitar que o conteúdo toque as bordas */
}
@media (max-width: 768px) {
  .header-inner {
    padding: 0 15px; /* Padding ligeiramente menor em telas menores */
  }
  .menu-toggle,
  .search-toggle {
    font-size: 20px;
    flex-shrink: 0; /* Impede que os botões encolham */
  }
  .logo {
    max-width: 120px;
    height: 35px;
  }
}
.menu-toggle,
.search-toggle {
  font-size: 22px;
  color: #333;
  cursor: pointer;
  margin: 0 6px;
  flex-shrink: 0; /* Impede que os botões encolham */
}
.logo {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.sidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: 260px;
  height: 100%;
  background-color: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  z-index: 999;
  padding: 20px;
  overflow-y: auto;
}
.sidebar.open {
  left: 0;
}
.sidebar h3 {
  margin-bottom: 10px;
  color: #000;
}

/* Estilos para o menu principal dentro da sidebar */
.sidebar .sidebar-menu {
  list-style: none; /* Remove marcadores de lista padrão */
  margin: 0;
  padding: 0;
}

.sidebar .sidebar-menu li {
  border-bottom: 1px solid #eee; /* Linha divisória para cada item de menu */
}

.sidebar .sidebar-menu li:last-child {
  border-bottom: none; /* Remove a linha do último item */
}

.sidebar .sidebar-menu li a {
  display: block;
  padding: 10px 0;
  color: #4286f6; /* Cor do link principal */
  text-decoration: none;
}

.sidebar .sidebar-menu li a:hover {
  color: #3366cc; /* Cor do link ao passar o mouse */
}

/* Estilos para submenus aninhados */
.sidebar .sidebar-menu ul.sub-menu {
  list-style: none;
  padding-left: 15px; /* Indentação para sub-itens */
  margin-top: 5px;
  border-top: 1px solid #eee; /* Linha superior para separar do item pai */
  padding-top: 5px;
}

.sidebar .sidebar-menu ul.sub-menu li {
  border-bottom: none; /* Sub-itens não precisam de borda inferior individual */
}

.sidebar .sidebar-menu ul.sub-menu li a {
  padding: 8px 0; /* Padding ligeiramente menor para sub-itens */
  color: #555; /* Cor diferente para sub-itens */
}

.sidebar .sidebar-menu ul.sub-menu li a:hover {
  color: #000;
}

.sidebar .sidebar-menu ul.sub-menu li a i {
  margin-right: 5px; /* Espaço para o ícone de seta */
  color: #888; /* Cor do ícone */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}
.overlay.show {
  display: block;
}
.container {
  max-width: 1300px;
  margin: 30px auto;
  padding: 0 20px;
}

/* --- Video Grid and Card Styles (for index.php, category.php, search.php, related-videos-section) --- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.video-card {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
  /* position: relative; Removido daqui, movido para .video-thumbnail-wrapper */
}
.video-card:hover {
  transform: scale(1.03);
}
.video-card,
.video-card *,
.video-card:link,
.video-card:visited,
.video-card:hover,
.video-card:active {
  color: inherit;
  text-decoration: none;
}

/* Novo wrapper para a imagem e overlays */
.video-thumbnail-wrapper {
  position: relative; /* Contêiner para os overlays absolutos */
  width: 100%;
  padding-bottom: 56.25%; /* Proporção 16:9 para a imagem */
  height: 0;
  overflow: hidden; /* Garante que nada vaze */
}

.video-thumbnail-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra o espaço */
  display: block;
}

.video-info {
  padding: 10px;
}
.video-title {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  margin-bottom: 5px;
  /* Estilos para truncar o título */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-meta {
  font-size: 12px;
  color: #888;
}

/* Overlays na imagem do vídeo */
.video-thumbnail-overlay {
  position: absolute;
  bottom: 10px; /* Distância da parte inferior da imagem */
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* Permite cliques passarem para o link do card */
  z-index: 2; /* Garante que o overlay esteja acima da imagem */
}

.like-percentage-overlay,
.duration-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-percentage-overlay {
  background-color: rgba(76, 175, 80, 0.8); /* Verde para likes */
}

.duration-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Preto para duração */
}

/* Barra de Pesquisa Expandida */
.search-expand {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 15px 20px;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.search-expand.active {
  transform: translateY(0);
}
.search-form {
  width: 100%;
  max-width: 800px;
  position: relative;
}
.search-expand-input {
  width: 100%;
  padding: 12px 50px 12px 20px;
  border: 2px solid #eee;
  border-radius: 30px;
  font-size: 16px;
  outline: none;
  transition: all 0.3s;
}
.search-expand-input:focus {
  border-color: #ff6b6b;
}
.search-expand-submit {
  position: absolute;
  right: 5px;
  top: 5px;
  background: #ff6b6b;
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.search-expand-submit:hover {
  background: #ff5252;
}
/* Evitar scroll quando pesquisa ou menu aberto */
body.search-open,
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Estilos de Paginação */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
  flex-wrap: wrap;
}
/* Adicionado para estilizar a lista de paginação gerada pelo WordPress */
.pagination ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex; /* Faz com que os itens da lista se comportem como flex items */
  flex-wrap: wrap; /* Permite que os itens quebrem a linha */
  gap: 10px; /* Adiciona espaçamento entre os botões */
}

.pagination button,
.pagination .page-numbers {
  /* Mantido para compatibilidade com o HTML estático */
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  color: #555;
  transition: all 0.2s ease;
}
/* Estilos para os links e spans dentro dos LIs */
.pagination ul.page-numbers li a,
.pagination ul.page-numbers li span {
  display: block; /* Faz com que o link/span preencha o LI e possa ter padding */
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 16px;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination button:hover:not(.active),
.pagination .page-numbers:hover:not(.current),
.pagination ul.page-numbers li a:hover:not(.current) {
  background-color: #eee;
  color: #333;
}
.pagination button.active,
.pagination .page-numbers.current,
.pagination .current,
.pagination ul.page-numbers li span.current {
  /* Garante que o número da página atual seja estilizado */
  background-color: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
  cursor: default;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Estilos para a barra de busca na página de resultados */
.search-results-bar {
  margin-bottom: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.search-results-bar .search-form {
  max-width: 100%;
}
.search-results-bar h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

/* Estilos para a página 404 */
.error-content {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-top: 50px;
  text-align: center;
}
.error-content h1 {
  font-size: 60px;
  color: #ff6b6b;
  margin-bottom: 20px;
}
.error-content p {
  font-size: 18px;
  color: #555;
  margin-bottom: 30px;
}
.error-content a {
  display: inline-block;
  background-color: #ff6b6b;
  color: white;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.error-content a:hover {
  background-color: #ff5252;
}

/* Estilos para a página de vídeo único (single-video.php) */
.main-video-area {
  width: 100%; /* Ocupa a largura total do container */
  background-color: #222; /* Fundo escuro para a área principal */
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: #f0f0f0; /* Cor do texto clara para contraste */
  margin-bottom: 30px; /* Espaçamento antes da seção de relacionados */
}
.video-player-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  background-color: #000;
}
.video-player-wrapper iframe,
.video-player-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-header-info {
  padding: 20px;
  border-bottom: 1px solid #333; /* Linha divisória sutil */
}
.video-header-info .video-title {
  font-size: 28px;
  font-weight: bold;
  color: #fff; /* Título branco */
  margin-bottom: 10px;
}
.video-header-info .video-meta-details {
  font-size: 15px;
  color: #bbb; /* Meta dados mais claros */
  margin-bottom: 15px;
}
.video-actions {
  display: flex;
  gap: 15px;
  overflow-x: auto; /* Permite rolagem horizontal se os botões não couberem */
  white-space: nowrap; /* Impede quebra de linha do texto dentro dos botões */
  padding-bottom: 5px; /* Pequeno padding para rolagem */
}
.video-actions button {
  background-color: #444; /* Botões mais escuros */
  border: 1px solid #555;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 15px;
  color: #fff; /* Texto do botão branco */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; /* Impede que os botões encolham */
}
.video-actions button:hover {
  background-color: #555;
  color: #fff;
}
/* Estilo para o botão de curtir/descurtir quando ativo/desabilitado */
.video-actions button.active {
  background-color: #ff6b6b; /* Cor de destaque para o botão ativo */
  border-color: #ff6b6b;
  color: white;
}
.video-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.video-description {
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #e0e0e0; /* Descrição mais clara */
  border-bottom: 1px solid #333;
}
.comments-section {
  background-color: #2a2a2a; /* Fundo para a seção de comentários */
  padding: 20px;
  margin-top: 0;
  border-top: 1px solid #333;
}
.comments-section h2 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  border-radius: 5px;
  resize: vertical;
  min-height: 100px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  background-color: #333; /* Fundo do textarea */
  color: #eee; /* Texto do textarea */
}
.comment-form textarea::placeholder {
  color: #aaa;
}
.comment-form button {
  align-self: flex-end;
  background-color: #4286f6; /* Botão de comentar azul */
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.comment-form button:hover {
  background-color: #3366cc;
}
.comment-list .comment-item {
  border-bottom: 1px solid #333;
  padding: 15px 0;
}
.comment-list .comment-item:last-child {
  border-bottom: none;
}
.comment-list .comment-author {
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}
.comment-list .comment-text {
  color: #e0e0e0;
  line-height: 1.5;
}
.comment-list .comment-meta {
  font-size: 13px;
  color: #bbb;
  margin-top: 5px;
}
.comments-toggle-button {
  background-color: #555;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 15px;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.3s ease;
}
.comments-toggle-button:hover {
  background-color: #666;
}

/* Nova seção para vídeos relacionados (substitui a sidebar) */
.related-videos-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 30px; /* Espaçamento do conteúdo acima */
}
.related-videos-section h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

/* Estilos para o conteúdo da página genérica */
.page-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.6;
  color: #444;
}
.page-content h1 {
  font-size: 28px;
  color: #222;
  margin-bottom: 20px;
  text-align: center;
}
.page-content h2 {
  font-size: 22px;
  color: #333;
  margin-top: 30px;
  margin-bottom: 15px;
}
.page-content p {
  margin-bottom: 15px;
}
.page-content ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}
.page-content li {
  margin-bottom: 5px;
}

/* Rodapé */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-size: 14px;
}
.footer p {
  margin-bottom: 10px;
}
.footer a {
  color: #4286f6; /* Aplicando a cor do link aqui também */
  text-decoration: none;
  margin: 0 10px;
}
.footer a:hover {
  text-decoration: underline;
}