:root{
    ---background_primary: rgb(5 8 22);
    ---color-black: #000000;
    ---color-white: #fff;
    ---color-footer: rgb(14 22 41 / 83%);
    ---color-light: rgb(224 242 254);
}
.container_voce_pode_gostar{
    text-decoration: none;
    list-style: none;
}
html {
    scroll-behavior: smooth;
  }
  
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: rgba(255, 255, 255, .4);
}
.nav-souso-2-component-pesquisa-campo::placeholder{
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-souso-2-component-pesquisa-campo:focus::placeholder {
    transform: translateX(10px); /* Move o placeholder 10px para a direita */
    opacity: 0.5; /* Deixa o placeholder mais claro */
}
.background-image {
    display: block;
    width: 100%;
    height: 380px;
    background-image: url('caminho/para/sua-imagem.jpg'); /* Caminho da imagem */
    background-size: cover; /* Faz a imagem cobrir o contêiner */
    background-position: 0% center; /* Foca a imagem no lado esquerdo */
    background-repeat: no-repeat; /* Evita a repetição da imagem */
    filter: blur(5px);
    opacity: 0.5;
    position: relative;
    z-index: 0;
}
.background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.37);
    z-index: 1;
    pointer-events: none;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, .1);
}
body{
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    color: var(---color-white);
    transition: background-color 1s, color 0.3s;
    box-sizing: border-box;
    margin: 0;
    background: var(---background_primary);
}
   /* Estilo para o cabeçalho encolhido */
header.shrink {
    padding: 0; /* Remove o padding para encolher */
    height: 0; /* Define a altura como 0 para esconder */
    opacity: 0; /* Torna o cabeçalho invisível */
    transition: all 0.3s ease; /* Transição suave */
}
/* Cabeçalho (Header) */
header {
    background-color: var(---color-black);
    color: #fff;
    padding: 20px 0;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease; /* Transição suave para mudanças */
    position: fixed;
    right: 0;
    top: 0;
    align-items: center;
    display: flex;
    justify-content: space-between; 
    left: 0;
    z-index: 1000;
}
header.visible {
    padding: 20px; /* Restaura o padding */
    height: auto; /* Restaura a altura */
    opacity: 1; /* Torna o cabeçalho visível */
}

header nav ul {
    display: flex;
    gap: 3px;
    white-space: nowrap;
    list-style: none;
    padding: 0;
    justify-content: unset;
}


header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul li a {
    color: #fff;
    transition: color 0.3s ease;
    text-decoration: none;
}
header nav ul li a:hover{
    color: rgba(255, 255, 255, 0.651);
}


nav ul li a i {
    margin-right: 3px; /* Espaço entre o ícone e o texto */
}

/* Conteúdo Principal */
main {
    position: relative;
    top: 6rem;
  
}
aside{
    display: none;
}

/* Estilo para cada seção (Section) */
section {
    gap: 1rem;
    flex-direction: column;
    display: flex;
    padding: 40px;
    padding-bottom: 0;
}

#btn_iniciar_leitura{
    white-space: nowrap;
    position: absolute;
    bottom: 2rem;
    align-items: center;
    gap: 3px;
    display: flex;
    margin: 0.5rem;
    align-content: center;
    transition: color 0.3s ease;
    align-content: center;
}


#btn_iniciar_leitura:hover{
    color: rgba(255, 255, 255, 0.61);
}


/* Rodapé (Footer) */
footer {
    margin-top: 5rem !important;
    background-color: var(---color-footer);
    color: var(---color-white);
    text-align: center;
    padding: 1px 0;
    font-size: 12px;
    position: relative;
    bottom: 0;
    font: 300 12px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif !important;
    width: 100%;
}
.section-carousell{
    padding: 0;
}

.carousel {
    width: 100%;
    padding: 0;
    max-width: 1600px;
    margin: 0 auto;
    transition: opacity 0.1s ease-in-out !important; /* Controle de tempo */
}

/* Ajusta o tamanho das imagens */
.carousel-cell {
    transition: opacity 0.1s ease-in-out !important; /* Controle de tempo */
    width: 100%; /* Cada célula ocupa 20% da largura do container */
    height: auto; /* Altura automática para manter a proporção */
    margin-right: 0; /* Remove a margem entre as células */
    z-index: 1;

}

.carousel-image-container {
    position: relative;  /* Necessário para garantir que o pseudo-elemento fique posicionado em relação ao contêiner */
}
.carousel-image-container::before {
    content: "";  /* Necessário para o pseudo-elemento funcionar */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(14 22 41 / 83%);  /* Cor de sobreposição (ajuste conforme necessário) */
    z-index: 1;  /* Coloca o pseudo-elemento atrás da imagem de fundo */
    opacity: 0.7;  /* Ajusta a opacidade */
}
.additional-info p{
    padding: 0;
    margin: 0;
}

.avaliacao_additional{
    background: red;
    padding: 3px !important;
    font: 700 12px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    width: 30px;
    height: 100%;
    text-align: center;
    margin-right: 3px !important;
    border-radius: 5px;
}

.tipo_midia_carousell{
    right: 1rem;
    top: 1rem;
}
.genero_additional {
    max-width: 100%; /* Defina a largura máxima desejada */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    overflow: hidden; /* Oculta o texto excedente */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao final do texto */
}
.additional-info{
    justify-content: start;
    display: flex;
    padding: 10px;
    padding-bottom: 0;
    gap: 5px;
    align-items: center;
}

#site-header h1{
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    color: white;
    list-style: none;
    text-decoration: none;
}
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000;
}

/* Inicialmente mostrar o ícone de sol e esconder o de lua */
/* Inicialmente mostrar o ícone de lua e esconder o de sol */
#moon-icon {
    display: inline; /* Mantenha o ícone da lua visível por padrão */
}

#sun-icon {
    display: none; /* Esconder o ícone do sol por padrão */
}

/* Estilo para ambos ícones */
.theme-toggle i {
    color: #ffcc00; /* Cor padrão (sol) */
}

.theme-toggle i:hover {
    transform: scale(1.2);
}
footer.dark-mode {
    background: transparent;
 }
/* Modo escuro (dark mode) */
body.dark-mode {
    background-color: rgb(3 5 12);
    color: #ffffff;
}

body.dark-mode .theme-toggle i {
    color: #ffffff; /* Cor para ícone no modo escuro */
}

body.dark-mode #sun-icon {
    display: none; /* Esconder o ícone do sol no modo escuro */
}

body.dark-mode #moon-icon {
    display: inline; /* Mostrar o ícone da lua no modo escuro */
}
.container {
    max-width: 1600px; /* Largura máxima do contêiner */
    margin: 0 auto; /* Centraliza o contêiner */
  
}



.manga_lancamentos_content {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards se movam para a próxima linha */
    gap: 20px; /* Espaçamento entre os cards */
}
.manga_card a{
    opacity: 0;
    gap: 0.3rem;
    display: flex;
    position: relative;
    flex-direction: column;
    text-decoration: none;
    transition: opacity 1s ease; /* Transição suave para opacidade */
}

.manga_card {
    background: rgb(8 13 26 / 52%);
    border-radius: 0.5rem; /* Bordas arredondadas */
    overflow: hidden; /* Para esconder partes da imagem que saem do card */
    width: 193px; /* Largura fixa para os cards */
    text-align: center; /* Centraliza o texto */
    transition: transform 0.2s; /* Efeito de transição ao passar o mouse */
}

.manga_card h3 {
    padding: 1rem;
    background: rgb(15 23 42 / 44%);
    list-style: none;
    font-size: 15px;
    text-align: start;
    position: relative;
    margin: 0;
    text-decoration: none;
    color: var(---color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label_manga_lancamento_div {
    align-items: center;
    margin: 0;
    font-weight: 900;
    border-bottom: 2px solid #3498dbb9;
    justify-content: space-between;
    display: flex;
    text-align: center;
    position: relative; /* Mantém a posição relativa ao contêiner */
}

.label_manga_lancamento_div a {
    text-decoration: none;
    list-style: none;
    color: white;
    position: relative; /* Adiciona a posição relativa ao link */
    
}

.label_manga_lancamento_div a:hover {
    color: rgba(255, 255, 255, 0.678);
}

.label_manga_lancamento_div a::after { /* Use ::after em vez de ::before */
    content: "";
    position: absolute;
    left: 50%; /* Inicia do meio */
    bottom: -2px; /* Ajuste conforme necessário */
    width: 0; /* Inicia com largura zero */
    height: 2px; /* Espessura da linha */
    background: rgba(255, 255, 255, 0.678); /* Cor da linha */
    transition: width 0.3s ease, left 0.3s ease;
}

.label_manga_lancamento_div a:hover::after {
    width: 100%; /* Altera a largura para 100% ao passar o mouse */
    left: 0; /* Move a linha para o início */
}

.ri-search-line {
    font-size: 20px;
}
.loading-animation {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
}

.loading-animation::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite;
}
.nav-souso-2-component-pesquisa {
    position: relative; /* Para que o submenu de resultados fique posicionado corretamente */
}

#closeModal{
    cursor: pointer;
    font-size: 30px;
    cursor: pointer;
    color: white;
    height: 30px;
    width: 30px;
    align-items: center;
    display: flex;
    padding: 5px;
    transition: background 0.3s ease-in-out;
    border-radius: 50%;
}

#closeModal:hover{
    background: #00000041;
}

.container-component-souso-results_xams21{
    padding: 1rem;
    justify-content: space-between;
    display: flex;
    background: transparent;
}
/* Estilo para o loader circular */
.loading-results {
    border: 5px solid rgb(0 0 0 / 0%);
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.5s linear infinite;
}

/* Animação de rotação */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Centraliza o loader na página */
.loading-results {
    display: block;
    margin: 50px auto; /* Centraliza horizontalmente */
}


.loading {
    animation: loading 1.5s infinite;
    background-color: #a5a5a51a;
}
@keyframes loading {
    0% {
        background-color: #a5a5a51a;
    }
    50% {
        background-color: #a5a5a54d; /* Meio do efeito */
    }
    100% {
        background-color: #a5a5a51a;
    }
}

.container-component-souso-results {
    margin-left: 3rem;
    position: absolute;
    top: 100%;
    margin-right: 3rem;
    left: 0;
    right: 0;
    margin-top: 0;
    background: #373535fa;
    border-radius: 4px;
    max-height: 450px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0; /* Começa invisível */
    visibility: hidden; /* Oculta completamente */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transição de opacidade e visibilidade */
}

/* Classe "show" para exibir o contêiner */
.container-component-souso-results.show {
    opacity: 1; /* Visível */
    visibility: visible; /* Exibe o elemento */
}

.container-component-souso-results.hidden {
    opacity: 0; /* Visível */
    visibility: hidden; /* Exibe o elemento */
}


.mangas-container {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 20px 20px;
}

/* Cada item de mangá será uma linha */
.manga-item {
    justify-content: space-between;
    display: flex;
    align-items: center; /* Alinha a capa e as informações verticalmente ao centro */
    background-color: #1c1c1ce6;
    border-radius: 8px;
    cursor: pointer;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background 0.2s ease-in-out;
}

.share-buttons a:hover{
    background: rgba(32, 32, 32, 0.37);
    transform: scale(1.2);
    
}
.hover-active {
    background: rgba(32, 32, 32, 0.37) !important;
    transform: scale(1.2);
}

.manga-item:hover{
    transform: translateY(-5px);
    background: #131313;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.manga-item a{
    display: flex;
    text-decoration: none;
    border: none;
    justify-content: space-between;
    flex-direction: row;
}

/* Estilo da capa do mangá à esquerda */
.manga-capa {
    flex-shrink: 0; /* Impede que a capa seja reduzida */
    margin-right: 20px;
}
/* Estilos para a sobreposição de carregamento */
.loading-overlay {
    position: fixed; /* Fixa na tela */
    top: 0; /* Alinha ao topo */
    left: 0; /* Alinha à esquerda */
    width: 100vw; /* Largura total da tela */
    height: 100vh; /* Altura total da tela */
    background-color: rgb(0 0 0); /* Fundo semi-transparente */
    display: flex; /* Usar flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 9999; /* Garante que fique acima de outros elementos */
    opacity: 1; /* Opacidade padrão */
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}
.manga_card {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.manga_card:hover {
    transform: scale(1.05);
}

.loading-overlay.hidden {
    opacity: 0; /* Opacidade zero para esconder */
    visibility: hidden; /* Esconde o elemento */
}

.spinner {
    border: 16px solid rgb(0 0 0 / 0%);
    border-top: 16px solid #ffffff;
    border-radius: 50%;
    width: 80px; /* Largura do spinner */
    height: 80px; /* Altura do spinner */
    animation: spin 0.5s linear infinite;
}
.manga-capa img {
    width: 32px;
    height: 51px;
    border-radius: 4px;
}

.manga_exibicao{
    padding: 1rem;
    border-radius: 4px;
}
.idade-label {
    font: 800 10px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    justify-content: center;
    place-content: center;
    align-items: center;
    display: flex;
    color: var(---color-light);
    padding: 5px;
    border-radius: 3px;
    height: 55%;
    width: 22px;
    text-align: center;
}
.manga-info-titulo-component {
    max-width: 35rem;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.manga-info-titulo-component h3,
.manga-info-titulo-component span {
    margin: 0; /* Remove margens padrões */
    padding: 0; /* Remove penchimento padrão */
}

.manga-info-titulo-component span {
    color: rgb(153, 153, 153);
    font-size: 12px;
    display: inline-block; /* Permite aplicar o overflow no span */
    max-width: 35rem; /* Para garantir que não exceda o contêiner */
    overflow: hidden; /* Oculta conteúdo excedente */
    white-space: nowrap; /* Mantém em uma linha */
    text-overflow: ellipsis; /* Adiciona os três pontos ao final */
}

.caroucel-container-info {
    position: absolute;
    bottom: 25%;
    left: 10%;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
}

.container-info-titulo h2{
    margin: 0;
}

.container-info-titulo{
    padding: 10px;
    padding-bottom: 0;
    color: var(---color-light);
}

.carousel-cell.is-selected {
    z-index: 2;
    opacity: 1;
}

.foreground-image{
    width: 100%;
    height: 100%;
}
.capa_container_souso_zmadm {
    border-right: 1rem solid white;
    border-left: 1rem solid white;
    position: absolute;
    top: 50%;
    filter: none !important;
    opacity: 1 !important;
    right: 10%;
    transform: translate(-0%, -50%) rotate3d(1, 1, 1, 34deg);
    width: 430px;
    height: auto;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
  
    /* Sombra para dar profundidade */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 
                0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Efeito hover nas imagens dentro do container */
.capa_container_souso_zmadm img {
    transition: filter 0.3s ease; /* Transição suave do filtro */
}

/* Efeito hover aplicado apenas na imagem */
.capa_container_souso_zmadm:hover img {
    filter: brightness(0.8); /* Reduz o brilho da imagem para 60% no hover */
}
/* Efeito hover */
.capa_container_souso_zmadm:hover {
    transform: translate(-0%, -50%) rotate3d(1, 1, 1, 20deg); /* Leve mudança na rotação */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); /* Aumenta o box-shadow */
    background-color: rgba(255, 255, 255, 0.1); /* Adiciona um fundo sutil no hover */
    filter: brightness(0.6); /* Reduz o brilho da imagem para 60% no hover */
}

.sinopse-overlay p {
    margin: 0;
    max-height: 85px; /* Altura máxima suficiente para 4 linhas */
    padding-top: 0.8rem;
    overflow: hidden; /* Esconde o conteúdo excedente */
    -webkit-box-orient: vertical; /* Define a orientação vertical */
    -webkit-line-clamp: 4; /* Limita a exibição a 4 linhas */
    text-overflow: ellipsis; /* Adiciona "..." no final do texto cortado */
}
.sinopse-overlay {
    height: 85px;
    overflow: hidden;
    cursor: text !important;
    max-width: 300px; /* Largura máxima */
    display: -webkit-box; /* Exibe como um contêiner flexível */
    position: relative; /* Posicionamento sobre a imagem */
    color: #dadada; /* Cor do texto */
    padding: 10px; /* Espaçamento interno */
    padding-top: 0;
    border-radius: 5px; /* Bordas arredondadas */
    --line-height: 1.5rem;
    font-size: 1rem;
    font-family: Lato, Helvetica Neue, helvetica, sans-serif;
}

.livre {
    background-color: green; /* Fundo verde para livre */
}

.dez {
    background-color: blue; /* Fundo azul para +10 */
}

.doze {
    background-color: orange; /* Fundo laranja para +12 */
}

.quatorze {
    background-color: #FFA500; /* Fundo alaranjado para +14 */
}

.dezesseis {
    background-color: #FFD700; /* Fundo dourado para +16 */
}

.dezoito {
    background-color: rgb(0, 0, 0); /* Fundo vermelho para +18 */
}

/* Informações do mangá à direita da capa */
.manga-info {
    gap: 1rem;
    flex-grow: 1;
    flex-direction: row;
    display: flex;
    align-items: center;
}

.manga-info h3 {
    list-style: none;
    text-decoration: none;
    font-size: 20px;
    margin: 0 0 10px;
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    color: var(---color-light);
}

/* Adicione aqui estilos para mais informações, como capítulos ou descrição */
.manga-info p {
    font-size: 14px;
    color: #666;
}
.manga_card_pesquisa{
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 0.75rem;
    color: rgb(153, 153, 153);
}

.manga_capa_pesquisa img{
    width: 32px;
    height: 51px;
    border-radius: 4px 
}

.manga_card_pesquisa a{
    display: flex;
    justify-content: space-between;
}


@keyframes rotate {
    100% { transform: rotate(360deg) }
}

@keyframes prixClipFix {
    0% { clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0) }
    25% { clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0) }
    50% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%) }
    75% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%) }
    100% { clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0) }
}


.manga_card {
    position: relative; /* Necessário para o posicionamento do status */
    overflow: hidden; /* Para esconder o status fora da área da imagem */
}

.manga_card img {
    width: 100%; /* Largura total do contêiner */
    height: 100%; /* Altura total do contêiner */
    object-fit: cover; /* Faz a imagem cobrir a div sem distorcer */
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out; /* Transição suave para o zoom e o escurecimento */
}

.manga_capa:hover .overlay {
    opacity: 1; /* Torna o overlay visível quando hover */
    transform: scale(1.2); /* Aumenta o tamanho do overlay */
    transform-origin: center; /* Define o centro da transformação */
}

.overlay {
    position: absolute; /* Posição absoluta em relação à manga_capa */
    top: 0; /* Início no topo */
    left: 0; /* Início à esquerda */
    right: 0; /* Preencher até a direita */
    bottom: 0; /* Preencher até a parte inferior */
    background-color: #4f4f4f9d; /* Fundo semitransparente */
    color: white; /* Cor do texto */
    padding: 2.5rem; /* Espaçamento interno de 1rem em todas as direções */
    opacity: 0; /* Começa invisível */
    text-align: start;
    gap: 5px;
    transition-delay: .1s;
    transition: opacity 0.3s ease, transform 0.3s ease; 
    display: flex; /* Usar flexbox para organizar o conteúdo */
    flex-direction: column; /* Alinhar em coluna */
    justify-content: flex-start; /* Alinhar ao topo */
    transform: scale(1); /* Inicia em escala normal */
    box-sizing: border-box; /* Para garantir que o padding não afete o tamanho total */
}
.overlay h4 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 12px;
    white-space: normal;
    text-overflow: unset;
}


.manga_capa-extra-info{
    text-transform: uppercase;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: #99f42c;
    color: #111;
    bottom: auto;
    left: 0.5rem;
    top: 0.5rem;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    line-height: 25px;
    padding: 0 6px;
    border-radius: 3px;
    position: absolute;
    color: #111;
    margin-right: 3px;
}



.overlay p.overlay-text {
    font-family: sans-serif;
    margin: 0.1rem 0;
    font-size: 12px;
    font-weight: 700;
}
.ion--ios-information-circle-outline {
    width: 32px; /* Defina a largura desejada */
    height: 32px; /* Defina a altura desejada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3Cpath d='M235.4 172.2c0-11.4 9.3-19.9 20.5-19.9 11.4 0 20.7 8.5 20.7 19.9s-9.3 20-20.7 20c-11.2 0-20.5-8.6-20.5-20zm1.4 35.7H275V352h-38.2V207.9z' fill='%23000'/%3E%3Cpath d='M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z' fill='%23000'/%3E%3C/svg%3E");
    background-size: contain; /* Para ajustar o tamanho do ícone */
    background-repeat: no-repeat; /* Para não repetir a imagem */
  }


.manga_capa:hover img {
    filter: blur(2px); /* Aplica o efeito de desfoque apenas à imagem quando o hover é ativado */
    transition: filter 0.3s ease; /* Transição suave para o efeito de desfoque */
}

.manga_capa:hover .manga_capa-extra-info {
    filter: blur(2px); /* Aplica o efeito de desfoque apenas à imagem quando o hover é ativado */
    transition: filter 0.3s ease; /* Transição suave para o efeito de desfoque */
}



.manga_image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir a div */
    transition: transform 0.4s ease; /* Transição suave para o efeito de zoom */
    cursor: pointer;
}

.manga_capa{
    border-radius: 1px;
    height: 250px;
    object-fit: cover;
    position: relative;
    overflow: hidden;
}

.nav-souso-2-component-pesquisa-campo {
    font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
    color: white;
    height: 20px;
    outline: none;
    width: 400px;
    text-align: start;
    padding: 12px;
    border: none;
    background: #373535b0;
}

.nav-souso-2-component-pesquisa {
    background-color: #373535b0;
    display: flex;
}

.nav-souso-2-component-pesquisa-botao {
    background-color: #000000b0;
    cursor: pointer;
    color: white;
    border: none;
    padding: 10px;
    position: relative;
}

.ratings_stars {
    color: gold; /* Cor das estrelas */
    font-size: 24px; /* Tamanho dos ícones */
}

.manga_star{
    margin: 1rem;
    text-align: left;
}

.manga_star span{
    color: #ccc;
}

.last-empty-star {
    color: #ccc; /* Define a cor branca para a última estrela vazia */
}
.container_img_populares{
    position: relative;
}

.container_img_random{
    position: relative;
}
.flag_icon{
    width: 25px !important;
    height: 25px !important;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    border-radius: 1rem;
    object-fit: cover;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.back-to-top-btn {
    position: fixed;
    bottom: 15px;
    left: 20px;
    z-index: 100;
    display: none; /* Inicialmente escondido */
    background: rgb(65, 152, 238);
    color: white;
    border: none;
    justify-content: center;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.back-to-top-btn:hover {
    background: rgba(65, 151, 238, 0.829); /* Cor mais clara ao passar o mouse */
}
#manga_popular {
    display: flex;
    overflow: hidden; /* Garante que nada extrapole o container */
}

.manga_popular-div-1 {
    flex: 0 0 75%; /* Ocupa 75% da largura */
    padding: 20px; /* Espaçamento interno */
    overflow: hidden; /* Garante que o conteúdo não extrapole */
}

.manga_popular-div-2 {
    flex: 0 0 15%; /* Ocupa 15% da largura */
    background-color: #d0d0d0; /* Cor de fundo para visualização */
    padding: 20px; /* Espaçamento interno */
}

.swiper-container {
    padding: 10px 0; /* Padding ao redor do swiper */
}

.manga_card_casousel {
    width: 150px; /* Largura fixa do card */
    height: 230px; /* Altura fixa do card */
    margin: 5px; /* Espaçamento entre os cards */
    position: relative;
    border-radius: 4px;
    display: flex;
    overflow: hidden; /* Oculta partes que saem do card */
    box-sizing: border-box; /* Inclui padding e borda no tamanho total */
    transition: transform 0.2s; /* Transição suave para o hover */
}

.container_manga_card_a {
    text-decoration: none;
}
.manga_card_casousel:hover {
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
}
.swiper-slide {
    width: 193px !important; /* Defina a largura desejada */
}
.manga_image {
    width: 100%;
    min-height: 289px;
    object-fit: cover;
    height: 100%;
}
.manga_random_div {
    flex: 0 0 75%;
    padding: 20px;
    overflow: hidden;
}
.manga_lancamentos_content{
    padding: 20px;
}
.manga_random_div h2{
    text-transform: uppercase;
}

.manga_random{
    display: flex;
    overflow: hidden;
}
.manga_title {
    padding: 1rem;
    background: rgb(15 23 42 / 44%);
    list-style: none;
    font-size: 15px;
    text-align: start;
    position: relative;
    margin: 0;
    text-decoration: none;
    color: var(---color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ads_campo_secundario_div{
    display: flex;
    align-self: center;
}


.flickity-page-dots{
    text-align: end !important;
}

.flickity-prev-next-button.next {
    top: auto !important;
    left: 10px !important;
    border-radius: 20% 50% 50% 20% !important; 
    bottom: 0 !important;
}

.flickity-prev-next-button.previous{
    top: auto !important;
    left: 10px !important;
    border-radius: 20% 50% 50% 20% !important; 
    bottom: 3.5rem !important;
}

.flickity-button {
    position: absolute;
    background: rgb(0 0 0 / 50%) !important;
    border: none;
    color: #ffffff !important;
    transition: background 0.4s ease !important;
}

.flickity-button:hover{
    background: rgba(0, 0, 0, 0.781)  !important;
}

.manga_card_div_sinopse {
    max-width: 400px; /* Ajuste conforme necessário */
    position: relative;
    font-family: Arial, sans-serif;
  }
  
  .sinopse_texto {
    max-height: 4.5em; /* Aproximadamente 3 linhas de texto */
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  
  .souso-container-dialog {
    position: relative;
    padding: 1rem;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    margin-bottom: 0rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
    margin-top: 4rem;
}

.souso-container-dialog-message {
    margin: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    white-space: pre-line;
}

  .souso-container-dialog-message span {
    opacity: 0;
    transform: translateY(5px);
    animation: fadeInUp 0.1s ease-in forwards;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  /* Animação aplicada quando o texto completo é digitado */
  .scale-text {
    animation: scaleEffect 0.5s ease-in-out;
  }
.share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.share-buttons a{
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), 
                background 0.3s cubic-bezier(.4, 0, .2, 1);
}


.share-button.facebook {
    color: #3b5998;
}
.share-button {
    
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .manga_card_main {
        align-items: center;
        display: flex;
        position: relative;
        justify-content: center;
        display: flex;
        gap: 3rem;
        flex-wrap: wrap;
    }

    header {
        background-color: var(---color-black);
        color: #fff;
        padding: 20px 0;
        text-align: center;
        padding: 20px;
        transition: all 0.3s ease;
        position: fixed;
        right: 0;
        top: 0;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        left: 0;
        z-index: 1000;
        gap: 10px;
    }
    .manga_lancamentos_content {
        justify-content: space-evenly;
    }
    .manga_card {
        width: calc(50% - 10px);
    }

    #site-header h1{
        font-size: 18px;
    }
    .manga_lancamentos_content {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    header nav ul li {
        display: inline;
        margin: 0 7px;
    }

    .manga_image{
        height: 100%;
    }
    header nav ul {
        display: flex;
        margin-left: 0;
        justify-content: space-between;
        flex-flow: wrap;
        font-size: 14px;
        margin-top: 1rem;
        margin-right: 0;
        white-space: normal;
        list-style: none;
        list-style-position: initial;
        list-style-image: initial;
        list-style-type: none;
        padding: 0;
    }
    .container-component-souso-results {
        margin-left: 1rem;
        position: absolute;
        top: 100%;
        margin-right: 1rem;
        left: 0;
        right: 0;
        margin-top: 0;
        background: #373535fa;
        border-radius: 4px;
        max-height: 450px;
        overflow-y: auto;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .idade-label {
        font: 800 10px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        justify-content: center;
        place-content: center;
        align-items: center;
        display: flex;
        color: var(---color-light);
        padding: 5px;
        border-radius: 3px;
        height: 50%;
        width: 16px;
        text-align: center;
    }
    .background-image{
        filter: blur(5px);
        height: 250px !important;
    }

    .container-info-titulo h2{
       font-size: 15px;
    }
    .sinopse-overlay{
        height: 3rem;
        width: 90%;
    }
    .sinopse-overlay p {
        margin: 0;
        max-width: 100%;
        max-height: 3rem;
        padding-top: 0.8rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
    }
    .manga-info h3 {
        list-style: none;
        text-decoration: none;
        font-size: 20px;
        margin: 0 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        font: 300 14px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        max-width: 11rem;
        color: var(---color-light);
    }
    .overlay{
        padding: 1.5rem;
    }
    .manga_random_div{
        margin: 0;
        padding: 0;
    }
    .manga_lancamentos_content{
        padding: 0;
    }
    .manga_random_div h2 {
        font-size: 1.0rem;
        white-space: nowrap;
        line-height: 1.0rem;
    }
    .manga-info-titulo-component span {
        color: rgb(153, 153, 153);
        font-size: 12px;
        display: inline-block;
        max-width: 11rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #home{
        margin-top: 1rem !important;
    }
    .nav-souso-2-component-pesquisa-campo {
        font: 300 16px '__poppins_f68cdc', '__poppins_Fallback_f68cdc', Arial, sans-serif;
        color: white;
        height: 20px;
        outline: none;
        width: 250px;
        text-align: start;
        padding: 12px;
        border: none;
        background: #000000b0;
    }

    .label_manga_lancamento_div h2 {
        font-size: 1.0rem;
        white-space: nowrap;
        line-height: 1.0rem;
    }

    section {
        gap: 1rem;
        flex-direction: column;
        display: flex;
        padding: 15px;
        padding-bottom: 0;
    }
    .label_manga_lancamento_div a {
        text-decoration: none;
        list-style: none;
        color: white;
        position: relative; /* Adiciona a posição relativa ao link */
        font-size: 1.0rem;
        white-space: nowrap;
        line-height: 1.0rem;
    }
    .manga_popular-div-1{
        padding: 0px;
    }
    .foreground-image {
        display: none;
    }

    .caroucel-container-info {
        bottom: 0 !important;
        float: right;
        right: 0;
        left: auto !important;
        height: 7rem;
        padding: 6px;
        width: 20rem;
    }
    .manga_lancamentos_content{
        justify-content: space-evenly;
    }
    .backgrou{
        filter: none !important;
    }
    .manga_popular-div-1 h2{
        font-size: 1.0rem;
        white-space: nowrap;
        line-height: 1.0rem;
    }
    main {
        position: relative;
        top: 11rem;
    }
}
/* Celulares Pequenos (menos de 480px) */
@media (max-width: 480px) {
    .foreground-image {
        width: 120px;
        height: 180px;
        top: auto;
        bottom: 35%;
        right: 5%;
        transform: rotate3d(1, 1, 1, 15deg);
    }

    .caroucel-container-info {
        bottom: 5%;
        left: 5%;
        padding: 6px;
    }
}

@media (min-width: 1280px) {

    .foreground-image {
        width: 100% !important;
        height: 100% !important;
        right: 10%;
    }
    main {
        position: relative;
        top: 6rem;
      
    }

    .background-image{
        right: 10%;
    }
    .caroucel-container-info {
        bottom: 25%;
        left: 10%;
        padding: 14px;
        width: 340px;
    }
}


@media (min-width: 1440px ) {
    .foreground-image {
        width: 100% !important;
        height: 100% !important;
        right: 15%;
    }
    .sinopse-overlay{
        max-width: 80%;
        width: 80%;
    }

    .caroucel-container-info {
        bottom: 25%;
        left: 10%;
        padding: 14px;
        width: 35rem;
    }
}

@media only screen and (orientation: landscape) {

    .titulo-capitulo{
        margin-right: 5px;
        max-width: 20rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    header nav ul {
        display: flex;
        margin-left: 0;
        justify-content: end;
        flex-flow: wrap;
        font-size: 14px;
        margin-top: 1rem;
        margin-right: 0;
        white-space: normal;
        gap: 5px;
        list-style: none;
        list-style-position: initial;
        list-style-image: initial;
        list-style-type: none;
        padding: 0;
    }

    header{
        flex-direction: row;
    }

    #site-header h1 a{
        text-decoration: none;
        white-space: nowrap;
        color: inherit;
    }
}