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

/* Fonte e fundo geral */
body {
  font-family: Arial, sans-serif;
   background-color: rgba(0, 0, 0, 0.9);
  color:#fbb98b;;
  padding-top: 110px; /* altura exata da topo-central */
}

/* carrossel de propaganda */
header.banner img {
  width: 100%;
  height: auto;
}

/* Topo com busca e botão */
.topo-central {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color:#fbb98b;
  box-shadow: 0 3px 8px rgba(0,0,0,0.7);
  z-index: 999;
}

/*Desconto bem bolado*/
.semijoia {
  width: 120px;
  height: 80px;
    border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* mantém o fundo limpo */
}

.semijoia img {
  width: 120px;
  height: 80px;
  object-fit: contain; /* ajusta sem distorcer */
}

/* Busca */
.search-input-wrapper {
  flex: 1; /* Ocupa todo espaço disponível */
  max-width: none; /* Remove a limitação máxima */
  margin-right: 15px; /* Espaço entre a busca e o combo */
}

.search-input-inner {
  display: flex;
  align-items: center;
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 25px;
  padding: 5px 15px;
  height: 45px;
  max-width: none; /* Remove a limitação máxima */
  width: 95%; /* Ocupa toda a largura disponível */
}

.search-input-inner input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
}

.search-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  color: gray;
}

/* Botão flutuante cadastrar */
.usuario-topo {
  display: flex;
  flex-direction: column;  /* Nome embaixo */
  align-items: center;      /* Centraliza */
}

.botao-cadastrar {
  background-color: #f1aa80;
  color: #fff;
  width: 50px; height: 50px;
  border: 2px solid #fff;    /* Borda branca */
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  margin-bottom: 4px;         /* Espaço abaixo do botão */
}

.botao-cadastrar:hover {
  background-color: #d32f2f;
}

.nome-usuario {
  font-size: 10px;              /* Fonte menor */
  color: #fff;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Combobox Cidade */
.combo-box {
    position: relative;
    min-width: 120px; /* Largura reduzida para ficar compacto */
    margin-right: 15px; /* Espaço entre o combo e o usuário */
}

.combo-box select {
    width: 100%;
    padding: 5px 30px 5px 15px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    height: 45px;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.combo-box::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #888;
    pointer-events: none;
}

.combo-box select:hover {
    border-color: #555;
}

.combo-box select:focus {
    border-color: #e53935;
}


/* Layout flexível para os elementos do topo */
     /* Grid de promoções - SEU ESTILO ADAPTADO */
        #lista {
            display: grid;
            max-width: 1400px;
            margin: 5px auto 5px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .card-promocao {
            background-color: #ffffff;
            border-radius: 12px;
            border: 1px solid#f2a97f;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .card-promocao:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }
        
        /* Topo do card - SEU ESTILO */
        .card-topo {
            display: flex;
            background-color: #fbb98b;
            justify-content: space-between;
            align-items: center;
            padding: 15px 15px 10px;
            color: #000000;
            font-size: 14px;
        }
        
        .loja {
            font-weight: bold;
            color: #333;
            font-size: 14px;
            flex: 1; /* Ocupa o espaço disponível */
            margin-right: 10px; /* Espaço entre o texto e o destaque */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; /* Impede quebra de linha */
            max-width: calc(100% - 100px); /* Limita a largura para não sobrepor o destaque */
            z-index: 1; /* Fica atrás do destaque */

           
        }

/***/
.destaque-vermelho {
            color: #ff0000 !important;
            padding: 5px 10px;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            border: 1px solid #ff0000 ;
            border-radius: 10px;
            background: linear-gradient(145deg, #ffef42, #ffd700);
            box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 
                        0 0 20px rgba(255, 0, 0, 0.4),
                        inset 0 0 12px rgba(255, 255, 255, 0.3);
            position: relative;
            z-index: 20; /* Valor alto para ficar sempre acima */
            text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
            font-family:  'Helvetica', Helvetica;
            animation: pulsating 2s infinite;
            transform: translateZ(0);
            backdrop-filter: blur(4px);
            transform-origin: center;
            flex-shrink: 0; /* Impede que o destaque diminua */
            white-space: nowrap; /* Garante que o texto não quebre */
        }

        /* Efeito de brilho externo */
        .destaque-vermelho::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg, #ffd700, #ff9900, #ffd700, #ff9900, #ffd700);
            background-size: 400% 400%;
            border-radius: 8px;
            z-index: -1;
            animation: glowing 1.5s ease infinite;
            opacity: 0.7;
            filter: blur(6px);
        }

        /* Animações */
        @keyframes pulsating {
            0% {
                box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 
                            0 0 20px rgba(255, 0, 0, 0.4),
                            inset 0 0 12px rgba(255, 255, 255, 0.3);
            }
            50% {
                box-shadow: 0 0 16px rgba(255, 215, 0, 0.9), 
                            0 0 28px rgba(255, 0, 0, 0.6),
                            inset 0 0 16px rgba(255, 255, 255, 0.5);
            }
            100% {
                box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 
                            0 0 20px rgba(255, 0, 0, 0.4),
                            inset 0 0 12px rgba(255, 255, 255, 0.3);
            }
        }

        @keyframes glowing {
            0% {
                background-position: 0% 50%;
                opacity: 0.6;
            }
            50% {
                background-position: 100% 50%;
                opacity: 0.8;
            }
            100% {
                background-position: 0% 50%;
                opacity: 0.6;
            }
        }
/**/
        
        /* Imagem do card - SEU ESTILO COMBINADO COM O MEU */
        .card-imagem {
            width: 100%;
            height: 200px;
            overflow: hidden;
            background: linear-gradient(45deg, #fefefe, #ffffff);
            position: relative;
            display: flex;              /* Centraliza a imagem */
            align-items: center;        /* Alinha verticalmente */
            justify-content: center;    /* Alinha horizontalmente */
            border-radius: 8px;         /* opcional, deixa mais bonito */
        }
        
        .card-imagem img {
            top : 10px;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
            border-radius: 8px;
        }
        
        .card-imagem img:hover {
            transform: scale(1.08);
        }
        
        /* Conteúdo do card - SEU ESTILO ADAPTADO */
        .card-conteudo {
            padding: 13px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card-conteudo .titulo {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.4;
            flex-grow: 1;
        }
        
        .precos {
            font-size: 1.25rem;
            font-weight: bold;
            color: #2c5530;
            margin-top: auto;
        }
        
        .preco-antigo {
            color: #999;
            text-decoration: line-through;
            font-size: 0.9rem;
            margin-left: 8px;
        }
        
        .preco-novo {
            font-size: 19px;
            font-weight: bold;
            color: #1dd223;
        }
        
        .desconto {
            background-color: #f8f8f8;
            color: #000;
            font-size: 12px;
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 12px;
            background: linear-gradient(45deg, #ffd700, #ff9900, #ffd700, #ff9900, #ffd700);
        }
        
        /* Rodapé do card - SEU ESTILO ADAPTADO */
        .card-rodape {
            display: flex;
            background-color: #2a2a2a;
            justify-content: space-between;
            align-items: center;
        }
        
        .tempo {
            font-size: 12px;
            font-weight: bold;
            color: #b0afae;
            animation: blink 1.5s infinite;
        }
        
        @keyframes blink {
            0%, 50%, 100% { opacity: 1; }
            25%, 75% { opacity: 0.6; }
        }
        
        .acoes-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .interacoes button {
            background-color: #444;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }
        
        .interacoes button:hover {
            background-color: #555;
        }
        

        
        .whatsapp-button:hover {
            transform: scale(1.2);
        }
        


        /* Destaques */
        .destaque-container {
            background: linear-gradient(135deg, #333, #222);
            border-radius: 12px;
            padding: 30px;
            margin: 40px 0;
            text-align: center;
        }
        
        .destaque-titulo {
            font-size: 24px;
            margin-bottom: 20px;
            color: #fff;
        }
        
        .destaque-descricao {
            font-size: 16px;
            color: #bbb;
            margin-bottom: 25px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Responsividade */
        @media (max-width: 768px) {
            .topo-central {
                flex-wrap: wrap;
            }
            
            .busca-container {
                max-width: 100%;
                margin-bottom: 15px;
            }
            
            .search-input-wrapper {
                margin-right: 10px;
            }
            
            .combo-box {
                min-width: 120px;
            }
            
            #lista {
                grid-template-columns: 1fr;
                padding: 15px;
            }
            
            .conteudo {
                padding: 15px;
            }
            
            .card-rodape {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }
            
            .acoes-container {
                width: 100%;
                justify-content: space-between;
            }
        }
        
        /* Animações */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        


/**********************************/

.acoes-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.interacoes button {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.interacoes button {
  background: none;
  border: none;
  color: #f1f1f1;
  cursor: pointer;
  font-weight: bold;
}

.interacoes button:hover {
  text-decoration: underline;
}

.modal-content {
  background-color: #1f1f1f;
  border: 4px solid #a1a09d;   /* Aqui a borda fica mais grossa e chamativa */
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  color: #fff;
  animation: fadeIn 0.3s ease;
}

/* Modal de Login */
/* Escondido por padrão, sem overlay até ativar */
#modalLogin {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;                /* <- Sempre flex para não "pular" */
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;         /* <- Evita clique enquanto escondido */
  transition: opacity 0.3s ease;
}

#modalLogin.show {
  opacity: 1;
  pointer-events: auto;         /* <- Permite interação */
}

#modalLogin .modal-content {
  background-color: #1f1f1f;
  color: #fff;
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#modalLogin .modal-content input[type="text"],
#modalLogin .modal-content input[type="password"] {
  width: 100%;
  padding: 12px 45px 12px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  color: #000;
  box-sizing: border-box;
  margin-top: 15px;
}

/* Botão ENTRAR */
.botao-login {
  width: 100%;
  padding: 14px 15px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  background-color: #f3ac82;
  color: #fff;
  margin-top: 20px;
  cursor: pointer;
}

.botao-login:hover {
  background-color: #d32f2f;
}

/* Botão de visualizar senha */
.senha-wrapper {
  position: relative; /* Torna-se o contêiner pai para o botão do olho */
  width: 100%; /* Garante que ocupe toda a largura disponível */
}

.toggle-visualizar {
  position: absolute;               /* Posicionamento absoluto dentro do .senha-wrapper */
  right: 12px;                      /* Distância da borda direita */
  top: 50%;                         /* Posiciona no meio vertical */
  transform: translateY(-50%);       /* Corrige o deslocamento para centralizar verticalmente */
  background: transparent;           /* Sem fundo */
  border: none;                     /* Sem borda */
  cursor: pointer;                  /* Cursor de clique */
  font-size: 18px;                   /* Tamanho do ícone */
  color: #666;                       /* Cor cinza */
  display: flex;                     /* Flexbox para centralizar o ícone */
  align-items: center;               /* Alinha verticalmente */
  justify-content: center;           /* Alinha horizontalmente */
  height: calc(100% - 30px);          /* Ajusta altura do botão (compensa o padding do input) */
  padding: 0;                        /* Remove qualquer padding do botão */
  line-height: 1;                    /* Garante alinhamento correto */
}

.toggle-visualizar i {
  pointer-events: none;
}

/* Fechar Modal */
#modalLogin .close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Link Cadastrar */
.cadastro-link {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
  color: #ccc;
}

.cadastro-link a {
  color: #00aced;
  text-decoration: none;
  font-weight: bold;
}

.cadastro-link a:hover {
  text-decoration: underline;
}

/*----------------------------------------------------*/

/* Lightbox */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#lightbox.show {
  display: flex;
}

#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Carrossel Modernizado */
        .carrossel-container {
            position: relative;
            width: calc(100% - 10px);
            max-width: 1400px;
            margin: 90px auto 30px;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .carrossel-slides {
            display: flex;
            transition: transform 0.4s ease;
        }

        .carrossel-slides img {
            flex: 0 0 100%;
            width: 100%;
            height: 300px;
            object-fit: cover;
            display: block;
        }

        /* Botões de navegação */
        .carrossel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            border: none;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 18px;
            z-index: 10;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }
        
        .carrossel-btn.esquerda { 
            left: 15px; 
        }
        
        .carrossel-btn.direita { 
            right: 15px; 
        }
        

        /* Indicadores */
        .carrossel-indicadores {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 5;
        }
        
        .carrossel-indicadores span {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .carrossel-indicadores span.ativo {
            background-color: #FFC107;
            transform: scale(1.2);
        }
        
        /* Responsividade */
        @media (max-width: 768px) {
            .carrossel-container {
                width: calc(100% - 10px);
                margin: 70px auto 20px;
            }
            
            .carrossel-slides img {
                height: 250px;
            }
            
            .carrossel-btn {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .carrossel-container {
                width: calc(100% - 10px);
                margin: 60px auto 15px;
            }
            
            .carrossel-slides img {
                height: 200px;
            }
            
            .carrossel-btn {
                width: 30px;
                height: 30px;
                font-size: 14px;
            }
            
            .carrossel-indicadores span {
                width: 4px;
                height:4px;
            }
        }
/*-- CSS: Botão do WhatsApp --*/
.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: white;
    border-radius: 23px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    gap: 3px;
  }


  .whatsapp-icon {
    width: 20px;
    height: 20px;
  }

  .senha-wrapper {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

/*Cadastro Membro*/
/* Overlay do modal de cadastro */
#modalCadastroMembro {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Quando ativo, exibe em flex e centraliza */
#modalCadastroMembro.ativo {
  display: flex;
}

/* Conteúdo do modal – aumentado e seguindo o padrão */
#modalCadastroMembro .modal-content {
  background-color: #1f1f1f;
  border: 2px solid #a1a09d;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  padding: 30px;
  width: 90%;
  max-width: 500px;    /* aumentei de 400px para 500px */
  display: flex;
  flex-direction: column;
  gap: 20px;           /* mais espaçamento */
  color: #f0f0f0;
  position: relative;
}

/* Fecha‑modal */
#modalCadastroMembro .close {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Labels no padrão */
#modalCadastroMembro label {
  font-weight: bold;
  font-size: 14px;
  color: #ccc;
}

/* Inputs seguindo o mesmo estilo do login */
#modalCadastroMembro input[type="text"],
#modalCadastroMembro input[type="password"] {
  width: 100%;
  padding: 12px 45px 12px 15px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #fff;
  box-sizing: border-box;
}

/* Wrapper de senha (com botão “olho”) */
#modalCadastroMembro .senha-wrapper {
  position: relative;
  width: 100%;
}

#modalCadastroMembro .toggle-visualizar {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: none;
  color: #ccc; font-size: 18px;
  cursor: pointer;
}

/* Botão “Cadastrar” no mesmo padrão */
#modalCadastroMembro .botao-login {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 6px;
  background-color: #e53935;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}

#modalCadastroMembro .botao-login:hover {
  background-color: #d32f2f;
}

/* Mensagem interna */
#modalCadastroMembro .login-msg {
  text-align: center;
  font-size: 14px;
  color: #ffc107;
}

/*------------------------------*/
/*Bola da curtida*/
.modal-numero {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  flex-direction: column;
}

/* Bola com borda dourada e número estilizado */
/* Modal de fundo escuro */
.modal-numero {
  display: none;                          /* Oculta inicialmente */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);          /* Fundo preto semi-transparente */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  flex-direction: column;
  padding: 20px;
}
/*  quadrado com borda branca e fundo preto */
.container-bola {
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 15px;
  width: 200px;      
  height: 200px;      
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
}

/* Bola com borda dourada */
.numero-bola {
  width: 100px;
  height: 100px;
  background: #f1f3f6;                    /* Fundo da bola */
  border-radius: 50%;                     /* Torna círculo */
  border: 4px solid gold;                 /* Borda dourada */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); /* Sombra dourada suave */
}

/* Número dentro da bola */
.numero-bola span {
  color: #000;                            /* Cor preta */
  font-size: 36px;                        /* Tamanho grande */
  font-weight: bold;
  font-family: 'Arial Black', Arial, sans-serif;  /* Fonte mais forte */
  text-shadow: 1px 1px #ccc;              /* Leve profundidade */
}

/* Botão OK menor e preto */
.modal-numero button {
  padding: 6px 16px;                      /* Botão menor */
  border: none;
  background: #5d5c5c;                       /* Fundo preto */
  color: #fff;                            /* Texto branco */
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.modal-numero button:hover {
  background: #333;                       /* Hover suave */
}



/*Div mensagem*/
.mensagem {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  max-width: 90%;
  padding: 15px 20px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  animation: fadeIn 0.5s ease;
}

/* Cores */
.mensagem.sucesso { background-color: #4caf50; }     /* Verde */
.mensagem.atencao { background-color: #ff9800; }     /* Amarelo */
.mensagem.erro    { background-color: #f44336; }     /* Vermelho */

/* Botão fechar */
.btn-fechar {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;       /* Negrito */
  color: #fff;
  cursor: pointer;
  line-height: 1;
  margin-top: -8px;        /* Sobe o botão */
  margin-left: 15px;       /* Afastamento lateral se necessário */
  padding: 0;
}

/* Animação */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/*Perfil usuario*/
.perfil-usuario {
  position: fixed;
  top: 65px; 
  right: 15px;   /* Alinhado à direita */
  background: #1f1f1f;
  color: #fff;
  border: 1px solid #fff; 
  border-radius: 10px;
  padding: 15px;
  width: 220px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 1000;
  font-family: Rubik, Adjusted Arial Fallback, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.nome-usuario-menu {
  font-size: 14px;              /* Fonte menor */
  color: #fff;
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nivel-usuario {
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
}

.progresso-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-bottom: 5px;
}

.progresso-container .icone {
  width: 16px;
  height: 16px;
  fill: #ccc;
  margin-right: 5px;
}

.perfil-usuario meter {
  width: 100%;
  height: 6px;
  border-radius: 4px;
}

.menu-usuario {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.menu-usuario li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #333;
}

.menu-usuario li:hover {
  background-color: #333;
}

/*estilo da tela de numeros dos membros*/
.sorteio-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.sorteio-container {
  background: #000;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 20px;
  width: 70%;
  max-width: 600px;
  color: #fff;
  text-align: center;
}

.sorteio-titulo {
  font-size: 20px;
  margin-bottom: 15px;
}

.sorteio-numeros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.sorteio-numero {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid gold;
  background: #fff;
  color: #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sorteio-fechar {
  background: #fff;
  color: #000;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  font-weight: bold;
}

/*Css do painel*/

nav {
  background: #2a2a2a;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

nav a {
  color: #ff5555;
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
}

.container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.promo-card {
  display: flex;
  border: 5px solid #333;
  border-radius: 12px;
  margin-bottom: 20px;
  background: #2e2e2e;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  color: #fff;
}

  .promo-card img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-right: 1px solid #444;
  }

.promo-content {
  padding: 15px;
  flex: 1;
}

.promo-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.promo-loja {
  color: #bbb;
  margin-bottom: 8px;
  font-size: 14px;
}

.promo-precos {
  margin-top: 10px;
}

.promo-precos span {
  display: inline-block;
  margin-right: 12px;
  font-size: 14px;
}

.preco-antigo {
  text-decoration: line-through;
  color: #888;
}

.preco-novo {
  color: #4caf50;
  font-weight: bold;
}

/* Toggle Ativo/Desativado */
.ativo {
  width: 50px;
  height: 26px;
  background: #555;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 1px solid #999;
}

.ativo::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: left 0.3s ease;
}

.ativo.on {
  background: #4caf50;
}

.ativo.on::after {
  left: calc(100% - 23px);
}


/* Toggle Ativo/Desativado */
.destaque {
  width: 50px;
  height: 26px;
  background: #555;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 1px solid #999;
}

.destaque::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: left 0.3s ease;
}

.destaque.on {
  background: #4caf50;
}

.destaque.on::after {
  left: calc(100% - 23px);
}


a {
  color: #ff5555;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

/*---------------------------------------------------*/
/* Overlay do modal “Trocar Senha” */
#modalTrocarSenha {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#modalTrocarSenha.ativo {
  display: flex;
}

/* Caixa de conteúdo */
#modalTrocarSenha .modal-content {
  background-color: #1f1f1f;
  border: 2px solid #a1a09d;
  border-radius: 12px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  color: #f0f0f0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Botão fechar */
#modalTrocarSenha .close {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Título */
#modalTrocarSenha h2 {
  margin-bottom: 10px;
  font-size: 20px;
  text-align: center;
  color: #ffffff;
}

/* Labels */
#modalTrocarSenha label {
  font-weight: bold;
  font-size: 14px;
  color: #ccc;
}

/* Inputs */
#modalTrocarSenha input[type="password"] {
  width: 100%;
  padding: 12px 45px 12px 15px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #fff;
  box-sizing: border-box;
}

/* Botão confirmar */
#modalTrocarSenha .botao-login {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 6px;
  background-color: #e53935;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#modalTrocarSenha .botao-login:hover {
  background-color: #d32f2f;
}

/* Mensagem interna */
#msgTrocaSenha {
  text-align: center;
  font-size: 14px;
  color: #ffc107;
}
/*------------------------------------------------*/
*---------------------------------------------------*/
/* Overlay do modal “Registrar Loja” */
#modalRegistrarLoja .modal-content {
  background-color: #1f1f1f;
  border: 2px solid #a1a09d;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  padding: 30px;
  width: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #f0f0f0;
  position: relative;
  margin: 80px auto; /* Isso centraliza o modal na vertical */
}

#modalRegistrarLoja {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Fecha‑modal */
#modalRegistrarLoja .close {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Labels no padrão */
#modalRegistrarLoja label {
  font-weight: bold;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 6px; 
  display: block;
}

#modalRegistrarLoja select {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #fff;
  box-sizing: border-box;
  appearance: none; /* remove estilo padrão do sistema */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23ccc' points='70,90 40,50 100,50 '/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
    margin-bottom: 20px;
}

/* Inputs seguindo o mesmo estilo do login */
#modalRegistrarLoja input[type="text"],
#modalRegistrarLoja input[type="password"] {
  width: 100%;
  padding: 12px 45px 12px 15px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #fff;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* Wrapper de senha (com botão “olho”) */
#modalRegistrarLoja .senha-wrapper {
  position: relative;
  width: 100%;
}

#modalRegistrarLoja .toggle-visualizar {
  position: absolute;
  right: 12px; top: 30%;
  transform: translateY(-50%);
  background: transparent; border: none;
  color: #ccc; font-size: 18px;
  cursor: pointer;
}

/* Botão “Cadastrar” no mesmo padrão */
#modalRegistrarLoja .botao-login {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 6px;
  background-color: #e53935;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}

#modalRegistrarLoja .botao-login:hover {
  background-color: #d32f2f;
}

/* Mensagem interna */
#modalRegistrarLoja .login-msg {
  text-align: center;
  font-size: 14px;
  color: #ffc107;
}

#modalRegistrarLoja h2 {
  margin-bottom: 10px;
  font-size: 20px;
  text-align: center;
  color: #ffffff;
}

/*Menu hamburguer*/
/* Botão Hamburguer */
.menu-toggle {
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Drawer Menu */
.drawer-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #fbb98b;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
    z-index: 1001;
}

.drawer-menu.open {
    left: 0;
}

.drawer-content {
    padding: 20px;
    position: relative;
}

.drawer-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
}

.drawer-nav a {
    padding: 12px 0;
    text-decoration: none;
    color: #fbb98b;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s ease;
}

.drawer-nav a:hover {
    color: #d4af37; /* Cor dourada para combinar com joias */
}

/* Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}