/* Estilos globais */
body {
    font-family: Arial, sans-serif;
    background-color: #e0e8f0;
    margin: 0;
    padding: 0;
    color: #333;
    display: flex; /* Flex para ajudar na centralização do conteúdo */
    flex-direction: column; /* Organiza verticalmente */
    min-height: 100vh; /* Garante que o corpo ocupe pelo menos a altura total da tela */
}

header {
    background-color: #34425a; /* Cor de fundo do cabeçalho */
    color: white; /* Cor do texto */
    padding: 20px; /* Espaçamento ao redor do cabeçalho */
    text-align: center; /* Alinha o texto no centro */
}

.header-content {
    display: flex; /* Habilita o uso de flexbox */
    justify-content: space-between; /* Espaça o título à esquerda e os botões à direita */
    align-items: center; /* Alinha verticalmente os itens */
}

.header-content h1 {
    margin: 0; /* Remove margens do título */
    font-size: 2.5rem; /* Tamanho da fonte do título */
}

.header-content .highlight {
    color: #f79f1f; /* Cor do destaque no título */
}

.button-container {
    display: flex; /* Mantém os botões lado a lado */
    gap: 10px; /* Espaço entre os botões */
}

.header-content .vip-signin {
    background-color: #f79f1f; /* Cor de fundo do botão */
    padding: 10px 20px; /* Espaçamento interno */
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do texto */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    font-size: 1rem; /* Tamanho da fonte */
    transition: background-color 0.3s, transform 0.3s; /* Transições suaves */
}

/* Efeito de hover para ambos os botões */
.header-content .vip-signin:hover {
    background-color: #d68b1a; /* Cor do botão ao passar o mouse */
    transform: translateY(-2px); /* Eleva o botão ao passar o mouse */
}

.top-nav {
    background-color: #4f6980;
    padding: 10px;
}

.top-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.top-nav ul li {
    margin: 0 15px;
}

.top-nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Altura mínima para o main */
.main-container {
    display: flex;
    margin: 20px;
    min-height: 600px; /* Defina a altura mínima desejada */
    flex-grow: 1; /* Permite que o contêiner cresça para ocupar o espaço restante */
}

.sidebar {
    width: 200px;
    background-color: #d0dce4;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra leve para a sidebar */
}

.menu-item {
    display: flex; /* Permite que a flecha e o link fiquem em linha */
    align-items: center; /* Alinha verticalmente no centro */
    margin-bottom: 10px; /* Espaçamento entre os itens */
    padding: 5px; /* Espaçamento interno para a área clicável */
    border: 1px solid #34425a; /* Borda fina com a mesma cor do texto */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s; /* Efeito de transição para o hover */
}

.menu-item a {
    display: flex; /* Permite que a flecha e o texto fiquem em linha */
    align-items: center; /* Alinha verticalmente no centro */
    text-decoration: none !important; /* Remove o sublinhado do link */
    color: #34425a; /* Cor do texto do link */
    width: 100%; /* Garante que o link ocupe toda a largura do menu-item */
    height: 100%; /* Garante que o link ocupe toda a altura do menu-item */
}

.menu-item:hover {
    background-color: #c0d4e4; /* Cor de fundo ao passar o mouse */
}

.arrow {
    margin-right: 5px; /* Espaçamento entre a flecha e o texto do menu */
    color: #34425a; /* Cor da flecha */
    font-size: 1.2rem; /* Tamanho da flecha */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px; /* Espaçamento entre os itens da lista */
}

.sidebar ul li a {
    text-decoration: none;
    color: #34425a; /* Cor do texto do link */
    font-weight: bold;
}

.sidebar ul li a:hover {
    text-decoration: underline; /* Efeito de hover nos links */
}

.content {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 20px;
    margin-left: 20px; /* Distância do menu lateral */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto; /* Adiciona rolagem caso o conteúdo exceda a altura */
}

.content h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.info-box, .updates {
    background-color: #f1f4f9;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.info-box h3, .updates h3 {
    font-size: 1.6rem;
}

.info-box ol, .updates ul {
    padding-left: 20px;
}

.info-box ol li, .updates ul li {
    margin-bottom: 10px;
}

.info-box ol li a, .updates ul li a {
    color: #007bff;
    text-decoration: none;
}

.info-box ol li a:hover, .updates ul li a:hover {
    text-decoration: underline;
}

/* SERVICE */
.service-cards {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte */
    gap: 20px; /* Espaçamento entre os cards */
    justify-content: center; /* Centraliza os cards no contêiner */
    margin: 0 auto; /* Centraliza a área de cards */
    max-width: 1200px; /* Largura máxima para evitar que os cards se estiquem demais */
}

.service-card {
    background-color: #f1f4f9; /* Cor de fundo */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra do card */
    flex: 0 0 calc(33.333% - 20px); /* Largura para 3 por linha */
    height: 180px; /* Altura fixa dos cards */
    transition: transform 0.3s, box-shadow 0.3s; /* Efeitos de transição */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
}

/* Efeitos ao passar o mouse */
.service-card:hover {
    transform: translateY(-5px); /* Eleva o card ao passar o mouse */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Aumenta a sombra ao passar o mouse */
}

.card-link {
    display: block; /* Faz o link ocupar todo o espaço do card */
    color: inherit; /* Herda a cor do texto do card */
    text-decoration: none; /* Remove o sublinhado */
    height: 100%; /* Garante que o link ocupe toda a altura do card */
}

.card-link h3 {
    color: #34425a; /* Cor azul para o título do card */
    margin-bottom: 10px; /* Espaçamento abaixo do título */
}

.card-link p {
    margin: 0; /* Remove a margem padrão do parágrafo */
}

.divider {
    height: 2px; /* Altura da linha */
    background-color: #007bff; /* Cor da linha */
    margin: 10px 0; /* Espaçamento acima e abaixo da linha */
}

/* card bloqueados */
.product-card {
    border: 1px solid #34425a; /* Cor padrão dos produtos */
    padding: 10px;
    margin: 10px;
    border-radius: 5px; /* Se desejar bordas arredondadas */
}

.product-card.blocked {
    border: 2px solid red; /* Borda vermelha para produtos bloqueados */
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
    .service-card {
        flex: 0 0 calc(50% - 20px); /* 2 por linha em telas menores */
    }
}

@media (max-width: 480px) {
    .service-card {
        flex: 0 0 100%; /* 1 por linha em telas muito pequenas */
    }

    .sidebar {
        width: 100%; /* Sidebar ocupa toda a largura em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo da sidebar */
    }

    .main-container {
        flex-direction: column; /* Muda a direção para coluna em telas pequenas */
    }

    .content {
        margin-left: 0; /* Remove a margem à esquerda */
    }
}

.title-container {
    display: flex; /* Organiza o título e o subtítulo lado a lado */
    align-items: center; /* Alinha verticalmente ao centro */
    gap: 10px; /* Espaçamento entre o título e o subtítulo */
}

.title-container .title {
    font-size: 1.2em; /* Ajuste o tamanho do título conforme necessário */
    margin: 0; /* Remove margens */
    color: #34425a; /* Cor para combinar com o tema */
}

.title-container .subtitle {
    font-size: 0.8em; /* Mantém a fonte menor para o subtítulo */
    color: #7d7d7d; /* Cor cinza */
    margin: 0; /* Remove margens */
}



/* DIV AZUL MARINHA FIXA PHP: <div class="fixed-line"></div> */
.fixed-line {
    border-top: 2px solid #34425a; /* Linha fixa com a cor azul marinho */
    margin: 10px 0; /* Ajuste de margem */
    width: 100%; /* Garante que a linha ocupe 100% da largura do container */
}

/* Carregamento */

/* Estilos para o indicador de carregamento */
#loading {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; /* Inicialmente oculto */
    display: flex;
    align-items: center; /* Alinha verticalmente o conteúdo */
}

.spinner {
    width: 20px;        /* Largura da bolinha */
    height: 20px;       /* Altura da bolinha */
    border: 4px solid #ccc; /* Cor da borda da bolinha */
    border-top: 4px solid #34425a; /* Cor da parte superior da bolinha */
    border-radius: 50%; /* Torna a div em forma de círculo */
    animation: spin 1s linear infinite; /* Animação */
    margin-right: 10px; /* Espaço entre a bolinha e o texto */
}

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

/* Avatar card viewer */
.avatar-card {
    display: flex;
    justify-content: space-between; /* Alinha as informações e a imagem */
    border: 1px solid #ccc; /* Borda do card */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 15px; /* Espaçamento interno */
    background-color: #fff; /* Cor de fundo do card */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

.avatar-info {
    flex: 1; /* Preenche o espaço disponível */
    margin-right: 15px; /* Espaçamento à direita da informação */
}

.avatar-image {
    width: 100px; /* Largura da imagem */
    height: auto; /* Altura automática */
    display: flex; /* Alinha a imagem */
    flex-direction: column; /* Coloca a imagem e o nome em coluna */
    align-items: center; /* Centraliza a imagem e o texto */
}

.avatar-image img {
    max-width: 100%; /* Limita a largura máxima da imagem */
    border-radius: 8px; /* Bordas arredondadas na imagem */
}

.avatar-image h1 {
    margin-top: 10px; /* Espaço entre a imagem e o nome */
    text-align: center; /* Centraliza o nome */
}

.avatar-buttons {
    margin-top: 15px; /* Espaçamento acima dos botões */
}

.form-group {
    margin-bottom: 15px; /* Espaçamento entre o campo de entrada e o botão */
}

.btn {
    display: inline-block; /* Exibe os botões em linha */
    background-color: #34425a; /* Cor de fundo azul marinho */
    color: white; /* Cor do texto */
    padding: 10px 15px; /* Espaçamento interno dos botões */
    border-radius: 5px; /* Bordas arredondadas */
    text-decoration: none; /* Remove o sublinhado */
    transition: background-color 0.3s; /* Efeito de transição na cor de fundo */
    margin-right: 10px; /* Espaçamento à direita entre os botões */
}

.btn:last-child {
    margin-right: 0; /* Remove o espaçamento do último botão */
}

.btn:hover {
    background-color: #2b3e54; /* Cor de fundo ao passar o mouse */
}

/* Info player card do hidden outfit viewer */

.player-info {
    display: flex; /* Mantém o layout flexível */
    align-items: flex-start; /* Alinha os itens no topo */
    margin-bottom: 10px; /* Espaço entre os jogadores */
}

.avatar-photo {
    width: 100px; /* Largura da imagem */
    height: 80px; /* Altura da imagem */
    margin-right: 10px; /* Espaço à direita da imagem */
}

.name-and-actions {
    display: flex; /* Permite que o nome e o botão se alinhem verticalmente */
    flex-direction: column; /* Organiza o conteúdo em uma coluna */
}

.player-name {
    margin: 0; /* Remove margem do título do jogador */
    font-size: 16px; /* Tamanho da fonte do nome do jogador */
    font-weight: bold; /* Negrito para o nome do jogador */
    color: #333; /* Cor do texto do nome */
}

.player-gender {
    margin: 0; /* Remove margem do texto de gênero */
    font-size: 16px; /* Ajusta o tamanho da fonte para igualar ao nome */
    font-weight: bold; /* Negrito para o gênero, se desejado */
    color: #666; /* Cor do texto, pode ser alterado conforme necessário */
}

.fixed-line {
    border-top: 1px solid #ccc; /* Linha de separação */
    margin: 10px 0; /* Margem acima e abaixo da linha */
}

.actions {
    margin-top: 5px; /* Espaço acima do botão */
}






/* FOOTER */
footer {
    background-color: #34425a;
    padding: 15px 0;
    color: white;
    text-align: center;
    width: 100%;
    min-height: 50px; /* Altura mínima para o rodapé */
}

.footer-content {
    display: flex;
    justify-content: center; /* Centraliza todo o conteúdo */
    align-items: center; /* Alinha verticalmente */
    padding: 20px;
    background-color: #34425a; /* Azul marinho do layout */
    color: white;
}

#siteseal {
    margin-right: 30px; /* Espaçamento entre selo de segurança e o resto do conteúdo */
}

.footer-right {
    display: flex;
    flex-direction: row; /* Alinha links e texto em linha */
    align-items: center; /* Alinha verticalmente */
}

.footer-links {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0; /* Remove a margem */
}

.footer-links li {
    display: inline;
}

.footer-links a {
    color: white;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

footer p {
    margin: 0; /* Remove margem para manter alinhamento */
}

/* CS cards products */
.room-products-section,
.avatar-products-section {
    display: flex; /* Usa flexbox para organizar os cards em linha */
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte se não houver espaço suficiente */
    justify-content: flex-start; /* Alinha os cards à esquerda */
    margin: 20px 0; /* Margem vertical para separar as seções */
    padding: 15px; /* Adiciona espaçamento interno para o conteúdo */
    border: 2px solid #34425a; /* Borda azul marinho ao redor da seção de produtos */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #ffffff; /* Cor de fundo branco */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ao redor */
}


.product-card {
    background-color: #f1f4f9; /* Cor de fundo */
    padding: 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    border: 2px solid #34425a; /* Borda com cor azul marinho */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra do card */
    width: 265px; /* Largura do card */
    height: 135px; /* Altura do card */
    margin: 10px; /* Margem entre os cards */
    display: flex;
    flex-direction: column; /* Para empilhar imagem e informações verticalmente */
    justify-content: space-between; /* Garante espaço entre o conteúdo */
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
}

.product-content {
    display: flex; /* Alinha a imagem e as informações lado a lado */
    align-items: center; /* Centraliza verticalmente */
}

.product-image {
    width: 100px; /* Largura da imagem */
    height: 80px; /* Altura da imagem */
    object-fit: cover; /* Corta a imagem para manter a proporção */
    margin-right: 10px; /* Espaço entre a imagem e o texto */
}

.product-info {
    display: flex; 
    flex-direction: column; /* Alinha os elementos de texto verticalmente */
}

.actions {
    display: flex; /* Alinha os botões horizontalmente */
    justify-content: space-between; /* Espaço entre os botões */
    margin-top: 10px; /* Espaço acima dos botões */
}

.button {
    display: inline-block; /* Para garantir que o botão tenha padding */
    padding: 5px 10px; /* Espaçamento interno do botão */
    background-color: #34425a; /* Cor do botão */
    color: white; /* Cor do texto do botão */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 3px; /* Bordas levemente arredondadas */
    transition: background-color 0.3s; /* Efeito de transição para o hover */
}

.button:hover {
    background-color: #4f6980; /* Cor de fundo ao passar o mouse */
}

.product-card h5, .product-card p {
    margin: 0; /* Remove margem padrão do título e parágrafo */
    font-size: 14px; /* Tamanho da fonte do título */
}

/* Estilos específicos para o card de informações da sala */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Card Container */
.room-result {
    background-color: #e6f1f8; /* Azul claro para destaque */
    border: 1px solid #a6c8e0; /* Borda azul suave */
    border-radius: 5px; /* Bordas levemente arredondadas */
    padding: 15px;
    margin-bottom: 20px;
    font-family: Arial, sans-serif; /* Fonte simples */
    color: #34425a; /* Azul marinho para o texto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leve sombra */
}

.room-result .room-image {
    float: left;
    margin-right: 15px;
    border-radius: 5px; /* Arredondamento leve para a imagem */
    width: 150px; /* Largura fixa */
    height: 110px; /* Altura fixa */
    object-fit: cover; /* Mantém a proporção sem distorcer */
    border: 1px solid #ccc; /* Borda para destaque */
    display: block; /* Garante que a imagem se comporte como um bloco */
    max-width: 150px; /* Garante que a largura não exceda o limite */
    max-height: 110px; /* Garante que a altura não exceda o limite */
}


/* Título da sala */
.room-result h3 {
    margin: 0;
    font-size: 18px;
    color: #0b4f6c; /* Azul destacado */
    font-weight: bold;
}

/* Informação adicional */
.room-result p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Links para ações */
.room-result a {
    color: #1b7db6; /* Azul para links */
    text-decoration: none;
    font-weight: bold;
}

.room-result a:hover {
    text-decoration: underline;
}

/* Divisor */
.room-result hr {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

/* Área de participantes */
.participants {
    margin-top: 10px;
    display: inline-block; /* Alterar para inline-block para evitar comportamento de flex */
    line-height: 1.6; /* Controla o espaçamento vertical */
}

.participant {
    background-color: #ffffff; /* Fundo branco para contraste */
    border: 1px solid #ddd; /* Borda leve */
    border-radius: 3px;
    padding: 5px 10px;
    margin: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.participant img {
    width: 16px; /* Ícones pequenos */
    height: 16px;
    margin-right: 5px;
    border-radius: 50%; /* Tornar ícones redondos */
}

/* Botão de ações */
.room-result .action-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #1b7db6; /* Azul vibrante */
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

.room-result .action-button:hover {
    background-color: #144e74; /* Tom mais escuro ao passar o mouse */
}

/* BOTAO DE MUDAR PAGINAS DAS ROOM EM BUSCA */
.pagination-btn {
    background-color: #34425a; /* Cor de fundo azul escuro */
    color: white; /* Cor do texto */
    border: none; /* Remover borda */
    border-radius: 4px; /* Bordas arredondadas */
    padding: 8px 16px; /* Espaçamento interno */
    font-size: 14px; /* Tamanho da fonte */
    font-weight: bold; /* Deixar o texto em negrito */
    cursor: pointer; /* Muda o cursor ao passar o mouse */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: background-color 0.3s ease; /* Animação suave ao passar o mouse */
}

.pagination-btn:hover {
    background-color: #2a3647; /* Cor de fundo mais escura ao passar o mouse */
}

.pagination-btn:active {
    background-color: #1e2733; /* Cor de fundo ainda mais escura ao clicar */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Reduz a sombra ao clicar */
    transform: translateY(1px); /* Efeito de clique (botão "afundado") */
}

/* ERROR MSG */
.error-message {
    color: #d9534f;
    font-weight: bold;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #d9534f;
    background-color: #f2dede;
    border-radius: 5px;
}

.pagination {
    display: flex;
    gap: 5px;
    margin-top: 20px;
}

.pagination-btn {
    padding: 5px 10px;
    border: 1px solid #34425a; /* Azul escuro semelhante ao botão */
    background-color: #34425a; /* Fundo azul escuro */
    color: white; /* Texto branco */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para o botão */
    transition: background-color 0.3s, transform 0.2s; /* Transições suaves */
}

.pagination-btn.active {
    font-weight: bold;
    background-color: #28a745; /* Tom verde visível */
    color: #ffffff; /* Garantir contraste com o texto */
}

.pagination-btn:hover {
    background-color: #4a576f; /* Tom mais claro ao passar o mouse */
    transform: scale(1.05); /* Efeito de ampliação leve */
}

#subscription-content {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

#subscription-content h1 {
    font-size: 1.8rem;
    color: #34425a;
    margin-bottom: 20px;
}

#subscription-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

#subscription-content ul li {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #555;
}

#subscription-content #paymentForm div {
    margin-bottom: 15px;
    text-align: left;
}

#subscription-content #paymentForm label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

#subscription-content #paymentForm input[type="text"],
#subscription-content #paymentForm input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    outline: none;
    transition: border 0.3s ease;
}

#subscription-content #paymentForm input[type="text"]:focus,
#subscription-content #paymentForm input[type="email"]:focus {
    border-color: #34425a;
}

#subscription-content #value-display {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: left;
    margin-top: 5px;
}

#subscription-content .payment-options label {
    font-size: 0.9rem;
    cursor: pointer;
    display: block;
    margin-bottom: 10px;
}

#subscription-content button {
    background-color: #34425a;
    color: #fff;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#subscription-content button:hover {
    background-color: #293b4d;
}

#subscription-content #subscription-result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: none;
}

#subscription-content #subscription-result.show {
    display: block;
}

#subscription-content #subscription-result h3 {
    color: #34425a;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

#subscription-content #subscription-result img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}

#subscription-content #subscription-result .copy-code {
    font-size: 0.9rem;
    background-color: #eaeaea;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

#subscription-content #subscription-result .copy-code:hover {
    background-color: #ddd;
}

.paymentData {
    text-align: center;
    margin-top: 20px;
}

#qr_code_img {
    border: 5px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

#qr_code_cp {
    display: block;
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 10px;
    font-size: 1rem;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    cursor: default;
}

.copy-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.copy-btn:hover {
    background-color: #0056b3;
}

/* Outfit viewer users */
/* Container principal para os outfits */
/* Container principal dos outfits */
#outfits {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colunas por linha */
    gap: 20px; /* Espaçamento entre os items */
    padding: 20px;
}

/* Cada card de outfit */
.avatar {
    background-color: #f4f4f4; /* Cor de fundo para destacar os cards */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Imagem do outfit */
.avatar-img {
    max-width: 100%; /* Garantir que a imagem não ultrapasse o limite do card */
    height: auto;
    border-radius: 4px;
}

/* Botão "Try it" */
.tryit img {
    margin-top: 10px;
    cursor: pointer;
    width: 80px;
}

/* Texto de informações */
.info {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.info a {
    text-decoration: none;
    color: #34425a; /* Azul marinho */
}

.info a:hover {
    color: #ff9900; /* Cor de destaque ao passar o mouse */
}