/* MENU */
.menu {
  width: 100%; /* ocupa toda a largura */
  height: 70px; /* altura do menu */
  background: linear-gradient(110deg, #050812 0%, #0a1538 55%, #102d78 100%); /* cria um degradê preto e azul mais moderno */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.35); /* cria uma sombra suave abaixo da navbar */
  display: flex; /* ativa o Flexbox */
  justify-content: center; /* centraliza horizontalmente */
  align-items: center; /* centraliza verticalmente */
  position: fixed; /* mantém o menu fixo */
  top: 0; /* posiciona no topo */
  left: 0; /* encosta na esquerda */
  z-index: 1000; /* mantém acima dos outros elementos */
}

/* LINKS PRINCIPAIS DA NAVBAR */
.menu .menu-conteudo > ul > li > a {
    position: relative; /* permite posicionar a linha decorativa */
    padding: 10px 0; /* cria espaço vertical */
    transition: color 0.3s ease; /* suaviza a mudança de cor */
}

/* LINHA AZUL ABAIXO DOS LINKS */
.menu .menu-conteudo > ul > li > a::after {
    content: ""; /* cria a linha decorativa */
    position: absolute; /* posiciona a linha dentro do link */
    bottom: 2px; /* coloca a linha abaixo do texto */
    left: 0; /* começa na esquerda */
    width: 0; /* inicia escondida */
    height: 2px; /* define a espessura */
    background: #4da3ff; /* define a cor azul */
    border-radius: 3px; /* arredonda as pontas */
    transition: width 0.3s ease; /* suaviza o crescimento */
}

/* EFEITO AO PASSAR O MOUSE */
.menu .menu-conteudo > ul > li > a:hover::after {
    width: 100%; /* mostra a linha completa */
}

.logo {
  position: absolute; /* permite posicionamento separado */
  left: 20px; /* distância da esquerda */
}

.logo img {
  height: 50px; /* altura da logo */
}

.menu ul {
  display: flex; /* coloca os links lado a lado */
  list-style: none; /* remove os marcadores */
  gap: 40px; /* espaço entre os links */
}

.menu a {
  color: white; /* cor dos links */
  text-decoration: none; /* remove o sublinhado */
  font-size: 18px; /* tamanho da fonte */
  font-weight: bold; /* deixa em negrito */
}

.menu a:hover {
  color: #4da3ff; /* muda a cor ao passar o mouse */
}
/* PERFIL DO USUÁRIO */

.perfil-menu {
  position: absolute; /* posiciona dentro do menu */
  right: 25px; /* distância da direita */
  display: flex; /* organiza o conteúdo */
  align-items: center; /* centraliza verticalmente */
  gap: 7px; /* espaço entre o carrinho e o avatar */
}

/* BOTÃO DO PERFIL NA NAVBAR */

.botao-perfil {
  width: 55px; /* define a largura do círculo */
  height: 55px; /* define a altura do círculo */
  display: flex; /* ativa o Flexbox para organizar o conteúdo */
  align-items: center; /* centraliza o piloto verticalmente */
  justify-content: center; /* centraliza o piloto horizontalmente */
  background: #111936; /* define o fundo azul escuro */
  border: 2px solid #245cff; /* adiciona a borda azul */
  border-radius: 50%; /* transforma o botão em um círculo */
  overflow: hidden; /* esconde as partes do piloto que ultrapassam o círculo */
  position: relative; /* permite posicionar elementos dentro do botão */
  color: white; /* define a cor de elementos de texto */
  font-size: 20px; /* define o tamanho de possíveis ícones */
  cursor: pointer; /* mostra a mãozinha ao passar o mouse */
  transition: 0.3s; /* suaviza os efeitos de interação */
  box-shadow: 0 0 0 3px rgba(36, 92, 255, 0.1); /* adiciona um contorno azul suave ao avatar */
}

.botao-perfil:hover {
  background: #245cff; /* muda o fundo para azul */
  transform: scale(1.08); /* aumenta levemente */
  box-shadow: 0 0 18px rgba(36, 92, 255, 0.6); /* brilho azul */
}

/* CAIXA DO PERFIL */

.caixa-perfil {
  position: absolute; /* posiciona em relação ao perfil */
  top: 58px; /* fica abaixo do botão */
  right: 0; /* alinha à direita */
  width: 280px; /* largura da caixa */
  padding: 18px; /* espaço interno */
  background: #0b1020; /* fundo azul escuro */
  border: 1px solid #245cff; /* borda azul */
  border-radius: 15px; /* arredonda os cantos */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* sombra */
  display: none; /* inicia escondida */
  z-index: 2000; /* fica acima dos outros elementos */
}

/* INFORMAÇÕES DO USUÁRIO */

.usuario-perfil {
  display: flex; /* coloca ícone e dados lado a lado */
  align-items: center; /* centraliza verticalmente */
  gap: 12px; /* espaço entre os elementos */
  padding-bottom: 15px; /* espaço inferior */
  margin-bottom: 10px; /* separa das opções */
  border-bottom: 1px solid #26304d; /* linha divisória */
}

/* CÍRCULO DO PILOTO DENTRO DO MENU */

.icone-usuario {
  width: 55px; /* define a largura do círculo */
  height: 55px; /* define a altura do círculo */
  display: flex; /* ativa o Flexbox */
  align-items: center; /* centraliza o piloto verticalmente */
  justify-content: center; /* centraliza o piloto horizontalmente */
  background: #16234a; /* define o fundo azul escuro */
  border-radius: 50%; /* deixa o elemento circular */
  overflow: hidden; /* recorta as partes do piloto que ultrapassam a borda */
  position: relative; /* estabelece uma referência de posicionamento */
  flex-shrink: 0; /* impede que o círculo diminua quando houver pouco espaço */
  color: #4da3ff; /* define a cor de possíveis ícones */
  font-size: 20px; /* define o tamanho de possíveis ícones */
}
/* IMAGEM DO PILOTO NA NAVBAR */

.avatar-navbar {
  width: 110%; /* aumenta a imagem para 110% da largura do círculo */
  height: 110%; /* aumenta a imagem para 110% da altura do círculo */
  object-fit: contain; /* mantém a proporção original da imagem */
  transform: translateY(
    5px
  ); /* desloca o piloto 5px para baixo, aproximando o pescoço da borda inferior */
  display: block; /* exibe a imagem como um bloco */
  flex-shrink: 0; /* impede que a imagem seja reduzida pelo Flexbox */
}

/* IMAGEM DO PILOTO DENTRO DO MENU */

.avatar-menu {
  width: 110%; /* aumenta a largura da imagem dentro do círculo */
  height: 110%; /* aumenta a altura da imagem dentro do círculo */
  object-fit: contain; /* evita que o piloto fique esticado ou deformado */
  transform: translateY(
    5px
  ); /* move o piloto para baixo, criando o efeito de sair do círculo */
  display: block; /* remove espaços extras do elemento de imagem */
  flex-shrink: 0; /* impede que a imagem diminua automaticamente */
}
.dados-usuario {
  display: flex; /* ativa o Flexbox */
  flex-direction: column; /* coloca nome e e-mail em coluna */
  gap: 3px; /* espaço entre eles */
}

.dados-usuario strong {
  color: white; /* cor do nome */
  font-size: 16px; /* tamanho do nome */
}

.dados-usuario span {
  color: #9da8bd; /* cor do e-mail */
  font-size: 13px; /* tamanho do e-mail */
}

/* LOGIN E CADASTRO */

.conta-menu {
  position: absolute; /* posiciona no menu */
  right: 25px; /* distância da direita */
  display: flex; /* coloca os links lado a lado */
  align-items: center; /* centraliza verticalmente */
  gap: 12px; /* espaço entre links */
}

.conta-menu a {
  color: white; /* cor dos links */
  text-decoration: none; /* remove o sublinhado */
  font-size: 16px; /* tamanho do texto */
  font-weight: bold; /* deixa em negrito */
}

.conta-menu a:hover {
  color: #4da3ff; /* muda a cor no hover */
}

.conta-menu .cadastro-menu {
  padding: 9px 15px; /* espaço interno */
  background: rgba(36, 92, 255, 0.12); /* adiciona um fundo azul transparente */
  box-shadow: inset 0 0 12px rgba(36, 92, 255, 0.08); /* cria um brilho interno discreto */
  border: 2px solid #245cff; /* borda azul */
  border-radius: 8px; /* arredonda os cantos */
  color: white; /* texto branco */
  transition: 0.3s; /* suaviza os efeitos */
}

.conta-menu .cadastro-menu:hover {
  background: linear-gradient(135deg, #245cff, #1240c7); /* cria um degradê azul ao passar o mouse */
  color: white; /* mantém o texto branco */
  box-shadow: 0 0 15px rgba(36, 92, 255, 0.5); /* brilho azul */
}

/* OPÇÕES DO PERFIL */

.opcoes-perfil {
  display: flex; /* ativa o Flexbox */
  flex-direction: column; /* coloca opções em coluna */
  gap: 5px; /* espaço entre opções */
}

.opcoes-perfil a {
  width: 100%; /* ocupa toda a largura */
  padding: 11px 12px; /* espaço interno */
  display: flex; /* coloca ícone e texto lado a lado */
  align-items: center; /* centraliza verticalmente */
  gap: 10px; /* espaço entre ícone e texto */
  color: #e6e6e6; /* cor do texto */
  text-decoration: none; /* remove o sublinhado */
  border-radius: 8px; /* arredonda os cantos */
  transition: 0.3s; /* suaviza o hover */
}

.opcoes-perfil a:hover {
  background: #16234a; /* fundo no hover */
  color: #4da3ff; /* texto azul */
}

.opcoes-perfil i {
  width: 20px; /* mantém os ícones alinhados */
  text-align: center; /* centraliza os ícones */
}

.opcoes-perfil .sair-perfil {
  color: #ff5c5c; /* opção de sair vermelha */
}

.opcoes-perfil .sair-perfil:hover {
  background: rgba(255, 92, 92, 0.1); /* fundo vermelho suave */
  color: #ff7070; /* vermelho mais claro */
}


/* MENU HAMBÚRGUER - CONFIGURAÇÃO GERAL*/
.menu-hamburguer {
    display: none; /* esconde o botão no computador */
}
.menu-conteudo {
    display: contents; /* mantém o layout original no PC */
}

/* MENU HAMBÚRGUER - TABLETS E CELULARES*/

@media (max-width: 820px) {

    /* MENU PRINCIPAL */
    .menu {
        height: 70px; /* mantém a altura original */
        justify-content: space-between; /* separa logo e botão */
        padding: 0 20px; /* espaçamento lateral */
    }
    /* LOGO */
    .menu .logo {
        position: static; /* acompanha o layout flex */
    }
    .menu .logo img {
        height: 40px; /* tamanho da logo no celular */
        display: block; /* remove espaço extra */
    }

    /* BOTÃO HAMBÚRGUER */
    .menu-hamburguer {
        display: flex; /* mostra somente no celular */
        flex-direction: column; /* empilha as linhas */
        align-items: center; /* centraliza */
        justify-content: center; /* centraliza */
        gap: 6px; /* distância entre as linhas */
        width: 46px; /* largura do botão */
        height: 44px; /* altura do botão */
        background: #111936; /* fundo azul escuro */
        border: 1px solid #245cff; /* borda azul */
        border-radius: 10px; /* cantos arredondados */
        cursor: pointer; /* cursor de clique */
        z-index: 1002; /* fica acima do painel */
    }

    /* TRÊS LINHAS */
    .menu-hamburguer span {
        display: block; /* permite definir dimensões */
        width: 23px; /* largura da linha */
        height: 3px; /* espessura */
        background: white; /* linhas brancas */
        border-radius: 5px; /* pontas arredondadas */
        transition: 0.3s ease; /* animação suave */
    }

    /* TRANSFORMA O BOTÃO EM X */

    .menu-hamburguer.ativo span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-hamburguer.ativo span:nth-child(2) {
        opacity: 0; /* esconde a linha central */
    }
    .menu-hamburguer.ativo span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* PAINEL QUE ABRE ABAIXO DA NAVBAR */
    .menu-conteudo {
        display: flex; /* organiza os elementos */
        flex-direction: column; /* links um abaixo do outro */
        align-items: stretch; /* ocupa a largura */
        gap: 15px; /* espaço entre as seções */
        position: absolute; /* aparece abaixo do menu */
        top: 70px; /* abaixo da navbar */
        left: 0; /* encosta na esquerda */
        width: 100%; /* ocupa a largura do celular */
        max-height: calc(100dvh - 70px); /* limita a altura */
        overflow-y: auto; /* permite rolar se necessário */
        padding: 0 20px; /* sem altura enquanto fechado */
        background: #080e25; /* fundo escuro */
        border-bottom: 1px solid #273454; /* borda inferior */
        opacity: 0; /* inicia invisível */
        visibility: hidden; /* esconde os links */
        transform: translateY(-12px); /* posição inicial */
        pointer-events: none; /* impede cliques fechado */
        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease,
            padding 0.3s ease;
    }

    /* PAINEL ABERTO */

    .menu.aberto .menu-conteudo {
        padding: 20px; /* espaço interno quando aberto */
        opacity: 1; /* torna visível */
        visibility: visible; /* libera visualização */
        transform: translateY(0); /* desce suavemente */
        pointer-events: auto; /* libera os cliques */
    }

    /* LINKS DAS PÁGINAS */

    .menu .menu-conteudo ul {
        display: flex; /* organiza os links */
        flex-direction: column; /* um abaixo do outro */
        align-items: stretch; /* largura disponível */
        gap: 5px; /* espaço entre links */
        width: 100%; /* ocupa o painel */
        list-style: none; /* remove marcadores */
    }

    /* CADA LINK */

    .menu .menu-conteudo ul a {
        display: block; /* torna toda a área clicável */
        padding: 12px 15px; /* espaçamento interno */
        border-radius: 9px; /* cantos arredondados */
        color: white; /* texto branco */
        font-size: 16px; /* tamanho legível */
        text-align: left; /* alinha à esquerda */
        transition: 0.3s ease; /* suaviza hover */
    }

    /* ANIMAÇÃO DOS LINKS */

    .menu .menu-conteudo ul a:hover {
        background: #16234a; /* destaca o link */
        color: #4da3ff; /* texto azul */
    }

    /* ENTRAR E CADASTRAR-SE */

    .menu .menu-conteudo .conta-menu {
        position: static; /* deixa de ficar presa à direita */
        display: flex; /* organiza os botões */
        flex-direction: column; /* um abaixo do outro */
        align-items: stretch; /* ocupa a largura */
        width: 100%; /* acompanha o painel */
        gap: 12px; /* espaço entre botões */
        padding-top: 15px; /* espaço acima */
        border-top: 1px solid #273454; /* separação discreta */
    }

    .menu .menu-conteudo .conta-menu a {
        text-align: center; /* centraliza o texto */
        padding: 12px; /* aumenta a área de clique */
    }

    .menu .menu-conteudo .acoes-menu {
        position: static; /* coloca o botão dentro do menu hambúrguer */
        width: 100%;
        padding-top: 12px;
    }

    .menu .menu-conteudo .botao-voltar {
        width: 100%;
    }

/* ÁREA DO PERFIL */

.menu .menu-conteudo .perfil-menu {
    position: relative; /* referência para a caixa */
    right: auto; /* remove posicionamento do PC */
    width: 100%; /* ocupa a largura disponível */
    display: flex; /* organiza o conteúdo */
    flex-direction: column; /* avatar acima da caixa */
    align-items: center; /* centraliza o avatar */
    gap: 15px; /* espaço entre avatar e caixa */
}

/* CAIXA COM INFORMAÇÕES DO USUÁRIO */

.menu .menu-conteudo .caixa-perfil {
    position: static; /* aparece abaixo do avatar */
    top: auto; /* remove posição vertical do PC */
    right: auto; /* remove posição lateral do PC */

    width: 100%; /* acompanha a largura do menu */
    max-width: 100%; /* não ultrapassa o painel */

    margin: 0; /* remove deslocamentos */
    padding: 18px; /* mantém espaçamento interno */

    box-sizing: border-box; /* inclui borda e padding na largura */
}

/* INFORMAÇÕES DO USUÁRIO */

.menu .menu-conteudo .dados-usuario {
    min-width: 0; /* permite reduzir o conteúdo */
}

/* E-MAIL DO USUÁRIO */

.menu .menu-conteudo .dados-usuario span {
    overflow-wrap: anywhere; /* evita texto cortado */
}
    /* PERFIL DO USUÁRIO LOGADO */

    .menu .menu-conteudo .perfil-menu {
        position: relative; /* permite menu de perfil interno */
        right: auto; /* remove posição do PC */
        align-self: center; /* centraliza o avatar */
    }
/* LINKS DO MENU NO CELULAR */
.menu .menu-conteudo > ul > li > a {
    padding: 12px 15px; /* mantém o espaço original dos links móveis */
}

/* REMOVE A LINHA ANIMADA NO CELULAR */
.menu .menu-conteudo > ul > li > a::after {
    display: none; /* esconde o efeito decorativo no menu hambúrguer */
}
}

/* BOTÃO VOLTAR - PÁGINA PAGAMENTOS  */
.acoes-menu {
    position: absolute; /* posiciona dentro da navbar */
    right: 25px; /* mantém distância da borda direita */
    display: flex; /* organiza os elementos */
    align-items: center; /* centraliza verticalmente */
    
}

/* BOTÃO VOLTAR */

.acoes-menu .botao-voltar {
    display: flex; /* ícone e texto lado a lado */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    gap: 7px; /* espaço entre seta e texto */

    padding: 10px 16px; /* espaçamento interno */
    border: 1px solid #245cff; /* borda azul */
    border-radius: 10px; /* cantos arredondados */

    background: #111936; /* fundo escuro */
    color: white; /* texto branco */
    text-decoration: none; /* remove sublinhado */

    font-size: 15px; /* tamanho do texto */
    transition: 0.3s ease; /* animação suave */
}

/* EFEITO AO PASSAR O MOUSE */

.acoes-menu .botao-voltar:hover {
    background: #245cff; /* destaca o botão */
    color: white; /* mantém o texto branco */
}

/* BOTÃO VOLTAR NO CELULAR */