/* RESET */

*{
  margin:0;              /* Remove todas as margens padrão dos elementos */
  padding:0;             /* Remove todos os espaçamentos internos padrão */
  box-sizing:border-box; /* Faz com que largura e altura incluam padding e borda no cálculo */
  font-family:Arial, Helvetica, sans-serif; /* Define a fonte padrão da página */
}

/* ROOT */

:root{

  /* REM SPACING */

  --rem-0:0rem;
  --rem-0125:0.125rem;
  --rem-025:0.25rem;
  --rem-05:0.5rem;
  --rem-075:0.75rem;
  --rem-1:1rem;
  --rem-125:1.25rem;
  --rem-15:1.5rem;
  --rem-175:1.75rem;
  --rem-2:2rem;
  --rem-25:2.5rem;
  --rem-3:3rem;
  --rem-4:4rem;
  --rem-5:5rem;
  --rem-6:6rem;
  --rem-7:7rem;
  --rem-8:8rem;

  /* CORES NEUTRAS */

  --branco: #ffffff;
  --branco-suave: #f5f5f5;
  --cinza-claro: #d4d6d8;
  --cinza: #b2b3bb;
  --preto-suave: #222222;
  --preto: #000000;


  /* PALETA DE CORES */

  --vermelho: #d55547;
  --vermelho-suave: #d59d99;

  --azul: #3d5f90;
  --azul-forte: #1b34c8;
  --azul-medio: #14608b;
  --azul-suave: #70b5cb;
  --azul-claro: #4269d8;

  --verde: #0cb723;
  --verde-medio: #116c0e;
  --verde-escuro: #0b4b17;
  --verde-mais-escuro: #081e0e;

  --ciano: #1a6580;

  --escuro: #090f0a;

}

/* HTML E BODY */
html, body{
  font-size: 16px;
  height:100%;     /* Define que a altura deles será 100% da altura da tela */
}

/* BODY */

body{
  background:var(--branco);        /* Define a cor de fundo da página usando uma variável CSS chamada --branco */
  color:var(--preto-suave);        /* Define a cor padrão do texto usando a variável --preto-suave */
  line-height:1.4;                 /* Define o espaçamento entre linhas do texto (1.4 vezes o tamanho da fonte) */
  display:flex;                    /* Transforma o body em um container flexbox */
  flex-direction:column;           /* Organiza os elementos dentro do body em coluna (um embaixo do outro) */
  min-height:100vh;                /* Define altura mínima de 100% da altura da tela (viewport height) */
}

/* CONTAINER */

.container {
  width: 100%;             /* Faz o container ocupar 100% da largura disponível da tela */
  max-width: 1600px;       /* Define um limite máximo de largura (1600px), evitando que o layout fique muito largo em telas grandes */
  margin: 0 auto;          /* Centraliza o container horizontalmente na tela (auto divide o espaço das laterais) */
  padding: 0;              /* Remove qualquer espaçamento interno dentro do container */
  display: flex;           /* Transforma o container em um Flexbox para facilitar o alinhamento dos elementos internos */
  flex-direction: column;  /* Organiza os elementos dentro do container em coluna (um embaixo do outro) */
  flex:1;                  /* Faz o container crescer e ocupar o espaço disponível dentro do elemento pai (geralmente o body) */
}

/* HEADER */

header{
  width:100%;              /* Faz o header ocupar 100% da largura disponível da página */
  background:var(--branco); /* Define a cor de fundo usando a variável CSS --branco */
}

.header{
  display:flex;                 /* Transforma o elemento em um container Flexbox */
  align-items:center;           /* Alinha os itens verticalmente no centro */
  justify-content:space-between; /* Coloca o primeiro item à esquerda e o último à direita */
  gap:var(--rem-1);             /* Cria um espaçamento entre os elementos usando a variável --rem-1 */
  padding:var(--rem-1);         /* Adiciona espaço interno dentro do header usando a variável --rem-1 */
}

.header a {
  text-decoration: none;
  color: var(--escuro);
}

/* Menu */

.menu-hamburguer {
  display: none;              /* Esconde o botão por padrão (normalmente só aparece em telas pequenas via media query) */
  background: none;           /* Remove qualquer fundo padrão do botão */
  border: none;               /* Remove qualquer borda padrão */
  font-size: 1.8rem;          /* Tamanho do ícone ou texto do botão (~28px) */
  cursor: pointer;            /* Cursor de mãozinha, indicando que é clicável */
  color: var(--preto);        /* Cor do ícone/texto do botão, usando variável CSS para preto */
}

/* Logo */

.logo img{
  height: 70px;   /* Define a altura da imagem do logo como 70 pixels */
}

/* PESQUISA */

.pesquisa {
    flex: 1; /* Faz o elemento crescer para ocupar espaço disponível dentro do container flex */
    display: flex; /* Define que o container será flexível, permitindo alinhar itens internos facilmente */
    align-items: center; /* Centraliza verticalmente os elementos dentro do container */
    border: 1px solid var(--preto-suave); /* Adiciona uma borda de 1px com cor definida pela variável --preto-suave */
    border-radius: var(--rem-025); /* Arredonda os cantos do container com valor definido pela variável --rem-025 */
    max-width: 624px; /* Limita a largura máxima do container para 624px */
    margin: auto; /* Centraliza horizontalmente o container na página */
    position: relative; /* Necessário para posicionar elementos filhos de forma absoluta (ex: autocomplete) */
    background: var(--branco); /* Define a cor de fundo do container */
    overflow: visible; /* Permite que conteúdos internos que "vazem" do container fiquem visíveis */
}

.pesquisa input {
    flex: 1; /* Faz o input ocupar todo espaço disponível dentro do container .pesquisa */
    border: none; /* Remove bordas do input */
    padding: 10px; /* Espaçamento interno de 10px */
    font-size: var(--rem-1); /* Define o tamanho da fonte usando a variável --rem-1 */
    outline: none; /* Remove a borda de foco padrão ao clicar no input */
    min-width: 0; /* Evita que o input ultrapasse limites do container em flexbox */
}

/* AUTOCOMPLETE */

.autocomplete-container {
    position: absolute; /* Posiciona o container relativo ao pai (.pesquisa) */
    top: 100%; /* Coloca logo abaixo do input */
    left: 0; /* Alinha à esquerda do input */
    width: 100%; /* Faz o container ocupar toda a largura do input */
}

.autocomplete-lista {
    position: absolute; /* Posiciona cada lista relativamente ao container autocomplete-container */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa toda a largura do container */
    background: var(--branco); /* Fundo branco */
    border: 1px solid var(--cinza-claro); /* Borda clara */
    border-top: none; /* Remove a borda superior para que fique conectado ao input */
    max-height: 300px; /* Altura máxima de 300px, rolável se exceder */
    overflow-y: auto; /* Adiciona barra de rolagem vertical se o conteúdo ultrapassar o max-height */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    display: none; /* Inicialmente escondido */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave abaixo da lista */
}

.autocomplete-item {
    display: flex; /* Permite alinhar ícone e texto lado a lado */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    gap: 10px; /* Espaço de 10px entre os elementos internos */
    padding: var(--rem-05); /* Espaçamento interno usando variável */
    cursor: pointer; /* Mostra cursor de clique ao passar o mouse */
    border-bottom: 1px solid var(--cinza-claro); /* Linha separando os itens */
}

.autocomplete-item:hover {
    background: var(--branco-suave); /* Muda o fundo quando o mouse passa por cima */
}

.autocomplete-item img {
    width: var(--rem-25); /* Define largura da imagem */
    height: var(--rem-25); /* Define altura da imagem */
    object-fit: cover; /* Ajusta a imagem para cobrir o espaço sem deformar */
    border-radius: var(--rem-025); /* Arredonda os cantos da imagem */
}

.acoes-pesquisa {
    display: flex; /* Container flexível para os botões */
    align-items: center; /* Centraliza verticalmente os botões */
    gap: 5px; /* Espaçamento entre os botões */
}

.acoes-pesquisa button {
    border: none; /* Remove borda padrão do botão */
    background: none; /* Remove fundo do botão */
    cursor: pointer; /* Mostra cursor de clique */
    padding: 0 8px; /* Espaçamento horizontal interno */
    font-size: var(--rem-1); /* Define tamanho da fonte */
    color: var(--verde-medio); /* Cor padrão do botão */
    display: flex; /* Permite alinhar conteúdo interno */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}

#btnLimpar {
    display: none; /* Inicialmente escondido, geralmente aparece quando há texto para limpar */
    color: var(--vermelho); /* Cor vermelha para indicar ação de exclusão */
}

#btnFiltro {
    color: var(--azul-medio); /* Define a cor do botão de filtro como azul médio */
}

/* Inico */

/* Container do início do carrinho */
.inicio-carrinho{
    display: flex; /* coloca os elementos lado a lado */
    justify-content: space-between; /* cria espaço entre os itens */
    align-items: center; /* alinha os itens verticalmente no centro */
}

/* Botão Nossa Empresa */
.btn-empresa{
    display: flex; /* deixa o ícone e texto alinhados na horizontal */
    align-items: center; /* centraliza verticalmente o conteúdo */
    gap: 6px; /* cria espaço entre o ícone e o texto */
    text-decoration: none; /* remove o sublinhado do link */
    color: var(--verde-escuro); /* define a cor do texto usando variável */
    font-weight: 600; /* deixa o texto mais forte (semi-negrito) */
    padding: 6px 10px; /* espaço interno do botão */
    border-radius: 8px; /* arredonda os cantos do botão */
    transition: 0.2s; /* cria uma animação suave nas mudanças */
}

/* Ícone dentro do botão empresa */
.btn-empresa i{
    font-size: var(--rem-175); /* define o tamanho do ícone usando variável */
}

/* Container do texto do botão */
.texto-empresa{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca os textos um embaixo do outro */
    font-size: var(--rem-075); /* define o tamanho do texto */
    line-height: 1; /* reduz o espaçamento entre as linhas */
}

/* Efeito ao passar o mouse no botão */
.btn-empresa:hover{
    background-color: var(--cinza-claro); /* muda a cor de fundo quando passa o mouse */
}

/* Carrinho */
.inicio a,
.carrinho button {
  position: relative;        /* Necessário para posicionar o badge de quantidade de itens dentro do botão */
  background: none;          /* Remove o fundo padrão do botão */
  border: none;              /* Remove a borda padrão do botão */
  padding: var(--rem-05);    /* Espaçamento interno do botão (ex: 0.5rem ≈ 8px) */
  cursor: pointer;           /* Muda o cursor para mãozinha, indicando que é clicável */
  font-size: var(--rem-175);        /* Define o tamanho do ícone dentro do botão (aprox. 28px) */
  color: var(--verde-escuro); /* Define a cor do ícone do carrinho usando a variável --verde-escuro */
  display: flex;             /* Torna o botão um container flexbox (útil para alinhar ícone e badge) */
  align-items: center;       /* Centraliza verticalmente o conteúdo do botão */
  justify-content: center;   /* Centraliza horizontalmente o conteúdo do botão */
}

/* Notificação */
.carrinho .badge {
  position: absolute;           /* Posiciona a badge em relação ao botão pai (.carrinho button) */
  top: -5px;                    /* Move a badge 5px acima do topo do botão */
  right: -5px;                  /* Move a badge 5px à direita do botão */
  background: var(--verde);     /* Define a cor de fundo da badge (geralmente verde) */
  color: var(--branco);         /* Cor do texto dentro da badge */
  font-size: 0.7rem;            /* Tamanho do número dentro da badge (≈11px) */
  font-weight: bold;             /* Deixa o número em negrito */
  width: 18px;                   /* Largura da badge */
  height: 18px;                  /* Altura da badge */
  border-radius: 50%;            /* Torna a badge **redonda**, formando uma bolinha */
  display: none;                 /* Esconde a badge por padrão (aparecerá só quando houver itens) */
  align-items: center;           /* Centraliza verticalmente o número dentro da badge */
  justify-content: center;       /* Centraliza horizontalmente o número dentro da badge */
}

.carrinho .badge.ativo {
  display: flex;  /* Mostra a badge, transformando-a em um container flex para centralizar o número */
}

/* CONTEUDO */

.conteudo{
  flex:1;   /* Faz o elemento crescer e ocupar todo o espaço disponível dentro do container flex */
}

/* FOOTER */

footer {
  background: var(--verde-escuro);   /* Fundo do rodapé em verde escuro */
  color: var(--branco);              /* Cor do texto padrão dentro do footer é branca */
  margin-top: auto;                   /* Faz o footer "grudar" na parte inferior quando usado em layout flex com min-height: 100vh */
}

.footer {
  max-width: 1200px;                                /* Limita a largura máxima do conteúdo do footer */
  margin: auto;                                     /* Centraliza o footer horizontalmente */
  display: grid;                                    /* Usa Grid Layout para organizar o conteúdo em colunas */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Cria colunas responsivas, cada uma com mínimo de 200px, se ajustando automaticamente */
  gap: var(--rem-2);                                /* Espaço entre colunas e linhas do grid */
  padding: var(--rem-2);                            /* Espaçamento interno em todos os lados */
}

.footer img {
  height: 60px;              /* Define altura das imagens dentro do footer (como logo ou ícones) */
}

.footer p,
.footer a {
  color: var(--branco);       /* Texto e links brancos para contraste com fundo verde escuro */
  font-size: 0.8rem;          /* Tamanho de fonte legível, mas menor que o padrão de corpo de texto */
  line-height: 1.6;           /* Espaçamento entre linhas para melhor leitura */
}

@media (max-width: 1024px) {

  .header {
    flex-wrap: wrap; /* Permite quebra de linha */
  }

  /* Primeira linha */
  .menu-hamburguer {
    display: block; /* Faz o elemento aparecer como um bloco, permitindo que ele seja exibido e ocupe sua própria linha */
    order: 1; /* Define a ordem do elemento dentro de um container flex, fazendo ele aparecer na posição 1 */
  }

  .logo {
    order: 2; /* Define que o logo será o segundo elemento dentro do container flex */
    flex: 1; /* Faz o elemento ocupar o espaço restante disponível */
    display: flex; /* Transforma o logo em um container flex */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
  }

  .inicio-carrinho {
    order: 3; /* Define que o carrinho será o terceiro elemento dentro do container flex */
  }

  /* Segunda linha - barra de pesquisa */
  .pesquisa {
    order: 4; /* Define que a barra de pesquisa aparecerá depois dos outros elementos */
    width: 90%; /* Define que a largura será 90% do container */
    margin-top: var(--rem-05); /* Adiciona um espaço acima usando uma variável CSS */
    max-width: none; /* Remove qualquer limite máximo de largura que existia antes */
    flex: unset; /* Remove o comportamento flex aplicado anteriormente */
  }

  .pesquisa input {
    width: 100%;       /* Agora a barra realmente ocupa tudo */
  }

  .acoes-pesquisa {
    position: absolute; /* Posiciona o elemento de forma absoluta em relação ao elemento pai */
    right: 10px; /* Coloca o elemento a 10px da borda direita */
    top: 50%; /* Move o elemento para o meio vertical do elemento pai */
    transform: translateY(-50%); /* Ajusta o posicionamento para centralizar verticalmente */
  }

  .footer p,
  .footer a {
    font-size: 0.7rem;          /* Tamanho de fonte legível, mas menor que o padrão de corpo de texto */
  }

}

@media (max-width: 480px) {

  /* HEADER */
  .header {
    padding: var(--rem-05); /* reduz espaçamento */
    gap: var(--rem-05);
  }

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

  .menu-hamburguer {
    font-size: 1.5rem;
  }

  /* BOTÃO EMPRESA */
  .btn-empresa {
    padding: 4px 6px;
    font-size: 0.7rem;
  }

  .texto-empresa {
    display: none; /* esconde texto e deixa só ícone */
  }

  /* PESQUISA */
  .pesquisa {
    width: 100%;
    margin-top: var(--rem-05);
  }

  .pesquisa input {
    font-size: 0.9rem;
    padding: 8px;
  }

  .acoes-pesquisa button {
    font-size: 0.9rem;
    padding: 0 5px;
  }

  /* AUTOCOMPLETE */
  .autocomplete-item {
    padding: var(--rem-025);
    gap: 6px;
  }

  .autocomplete-item img {
    width: 30px;
    height: 30px;
  }

  /* CARRINHO */
  .inicio a,
  .carrinho button {
    font-size: 1.4rem;
    padding: var(--rem-025);
  }

  .carrinho .badge {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }

  /* FOOTER */
  .footer {
    grid-template-columns: 1fr; /* uma coluna só */
    text-align: center;
  }

  .footer img {
    height: 50px;
  }

  .footer p,
  .footer a {
    font-size: 0.7rem;
  }

}