* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  height: 100%; /* Permite que o body preencha toda a altura */
  min-height: 100vh;
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom; /* Permite zoom por gesto e rolagem */
}

/* Container */
.container {
  width: 100%; /* Faz com que o contêiner ocupe toda a largura */
  overflow: auto; /* Esconde qualquer conteúdo que transborde */
  display: flex; /* Usar flex para melhor alinhamento */
  justify-content: center; /* Centraliza o conteúdo */
}

/* Sidebar */
.sidebar {
  width: 20%;
  background-color: #1a1a1a;
  padding: 0 20px 20px 20px; /* Remove padding lateral do topo */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

/* Adicione um contêiner para a logo */
.logo-container {
  display: flex;
  justify-content: center; /* Centraliza a logo horizontalmente */
  width: 100%; /* Faz com que o contêiner ocupe a largura total da sidebar */
  margin-bottom: 20px; /* Espaço abaixo da logo */
  margin-top: 15px;
}

/* Adicione esta regra dentro da classe .logo */
.logo {
  display: block;
  max-width: 100%; /* Garante que a logo não ultrapasse o contêiner */
  height: auto; /* Mantém a proporção da imagem */
  max-height: 80px; /* Ajuste aqui para diminuir a altura da logo */
}

/* Menu */
.menu {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espaçamento entre itens do menu */
}

.menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
}

.menu a:hover,
.menu a.active {
  background-color: #0d0e10;
  color: #ffffff;
}

/* Estilo para o Select do Capítulo */
.chapter-select {
  background-color: #1a1a1a; /* Cor de fundo combinando com o layout */
  color: #ffffff; /* Cor do texto */
  border: 2px solid #444; /* Borda sutil */
  padding: 10px; /* Espaço interno */
  border-radius: 5px; /* Cantos arredondados */
  font-size: 14px; /* Tamanho do texto */
  width: 100%; /* Largura total do contêiner */
  max-width: 350px; /* Tamanho máximo para não ficar muito grande */
  margin: 10px auto; /* Centraliza o select e adiciona espaço em cima e embaixo */
  display: block;
  cursor: pointer; /* Muda o cursor para indicar que é interativo */
}

/* Quando o select está focado ou selecionado */
.chapter-select:focus,
.chapter-select.chapter-selected {
  border-color: #888; /* Altera a cor da borda ao focar */
}

.chapter-select:hover {
  background-color: #0d0e10; /* Cor de fundo ao passar o mouse */
  border-color: #666; /* Muda a cor da borda ao passar o mouse */
}

.chapter-select:focus {
  outline: none; /* Remove a borda padrão ao focar */
  border-color: #ffffff; /* Realça a borda ao focar */
}

@media (max-width: 768px) {
  .chapter-select {
    font-size: 14px; /* Reduz o tamanho do texto em telas menores */
    padding: 8px; /* Ajusta o padding */
  }
}

@media (max-width: 480px) {
  .chapter-select {
    font-size: 12px; /* Reduz ainda mais o tamanho do texto em telas muito pequenas */
    padding: 6px; /* Ajusta o padding */
  }
}

/* Rodapé */
.footer {
  margin-top: auto; /* Garante que o rodapé fique na parte inferior */
  background-color: #1a1a1a;
  font-family: Arial, sans-serif;
  padding: 10px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente o conteúdo */
  align-items: center; /* Alinha verticalmente os itens no centro */
}

.footer-content {
  display: flex;
  align-items: center; /* Alinha verticalmente os itens no centro */
  gap: 10px; /* Espaçamento entre o contador e os botões */
}

.page-counter {
  font-size: 14px; /* Tamanho do texto do contador */
  color: #ffffff; /* Cor do texto do contador */
}

/* Botões de Navegação */
.nav-controls {
  display: flex;
  gap: 10px; /* Espaçamento entre os botões de navegação */
}

/* Responsividade */
@media (max-width: 768px) {
  .footer {
    flex-direction: column; /* Muda a direção para coluna em dispositivos móveis */
    align-items: center; /* Centraliza horizontalmente o conteúdo */
    padding: 10px; /* Ajusta o padding em telas menores */
  }
  
  .footer-content {
    flex-direction: row; /* Mantém a direção em linha em dispositivos móveis */
    gap: 10px; /* Espaço entre os itens */
  }
  
  .page-counter {
    margin: 0 10px; /* Ajusta o espaçamento horizontal do contador */
    font-size: 16px; /* Ajusta o tamanho do texto do contador em telas menores */
  }
}

/* Botões de Navegação */
.nav-btn {
  background-color: #000;
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
}

.nav-btn.disabled {
  background-color: #555; /* Cor desativada */
  cursor: not-allowed; /* Cursor indicando que o botão está desativado */
  opacity: 0.6; /* Deixa o botão visualmente desativado */
}

#prev-page {
  left: 10px;
}

#next-page {
  right: 10px;
}

/* Coluna direita (Conteúdo do Mangá) */
.content {
  width: 80%;
  height: 100%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Alinha a imagem ao topo */
  overflow: hidden; /* Remove a barra de rolagem do conteúdo */
}

.manga-viewer {
  width: 100%;
  height: 100vh; /* Ocupa a altura total */
  display: flex;
  justify-content: center;
  align-items: center; /* Centraliza verticalmente */
  position: relative;
  overflow: hidden; /* Oculta a barra de rolagem por padrão */
  -webkit-overflow-scrolling: touch; /* Habilita rolagem suave */
}

.manga-viewer:has(img) {
  overflow: auto; /* Exibe a barra de rolagem somente se a imagem é maior que o contêiner */
}

/* Para navegadores que não suportam :has() */
.manga-viewer img {
  /* Adiciona rolagem se a imagem for maior que o contêiner */
  position: absolute;
  transform: translate(-50%, -50%); /* Centraliza a imagem */
  top: 0%;
}

#manga-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* Centraliza horizontalmente */
  transform: translate(0, 0); /* Remove qualquer translação horizontal */
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 768px) {
  .manga-viewer {
    justify-content: center; /* Centraliza o conteúdo na tela */
    overflow: auto;
  }

  .zoom-controls {
    display: none; /* Esconde os botões de zoom em telas menores */
  }
}

@media (max-width: 480px) {
  .manga-viewer {
    height: calc(100vh - 80px); /* Ajusta a altura da visualização do mangá */
    overflow: auto;
  }

  .zoom-controls {
    display: none; /* Esconde os botões de zoom em telas menores */
  }
}

/* Estilo da barra de rolagem para Webkit (Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Largura da barra de rolagem vertical */
  height: 12px; /* Altura da barra de rolagem horizontal */
}

::-webkit-scrollbar-track {
  background: #2b2b2b; /* Cor do fundo da área de rolagem */
}

::-webkit-scrollbar-thumb {
  background: #444; /* Cor do controle de rolagem */
  transition: background 0.3s; /* Transição suave para hover */
}

::-webkit-scrollbar-thumb:hover {
  background: #666; /* Cor do controle de rolagem ao passar o mouse */
}

/* Estilo da barra de rolagem para Firefox */
.scrollable-container {
  scrollbar-width: thin; /* Espessura da barra de rolagem */
  scrollbar-color: #444 #2b2b2b; /* Cor do controle e do fundo da área de rolagem */
}

/* Responsividade */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Muda a direção do layout para coluna em dispositivos móveis */
    width: 100%; /* Certifique-se de que o contêiner se ajuste à tela */
    overflow: auto;
  }

  .sidebar {
    width: 100%;
    height: auto;
    padding: 10px;
  }

  .logo {
    max-height: 60px; /* Ajusta a altura da logo para telas menores */
  }

  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px; /* Espaço abaixo do menu */
    align-items: center; /* Centraliza o menu horizontalmente */
    justify-content: center; /* Centraliza o menu verticalmente */
    text-align: center; /* Centraliza o texto dentro dos links do menu */
  }

  .menu a {
    font-size: 16px;
    padding: 5px;
  }

  .content {
    width: 100%;
  }

  .zoom-controls {
    display: none; /* Esconde os botões de zoom em telas menores */
  }
}

@media (max-width: 480px) {
  .menu a {
    font-size: 14px;
    padding: 4px;
  }

  .zoom-controls {
    display: none; /* Esconde os botões de zoom em telas menores */
  }
}