/* ===== 1. Variáveis: cores e fontes do Café Aconchego ===== */
:root {
  --cor-fundo: #fdf8f0;     /* creme */
  --cor-texto: #3d1d0a;     /* quase preto (café) */
  --cor-marrom: #6c3919;    /* marrom escuro */
  --cor-destaque: #d98a28;  /* caramelo */
  --cor-preco: #a4551a;     /* caramelo escuro: mais legível sobre o branco */
  --cor-card: #ffffff;      /* fundo dos cards */
  --cor-whatsapp: #1f7a4d;  /* verde escuro: lembra o WhatsApp e mantém bom contraste com o branco */

  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;
}

/* ===== 2. Reset: tira espaçamentos automáticos do navegador ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== 3. Página ===== */
body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  line-height: 1.5;
}

img {
  max-width: 100%;  /* a imagem nunca fica mais larga que a caixa dela */
  display: block;
}

/* ===== 4. Cabeçalho ===== */
header {
  background-color: var(--cor-marrom);
  color: var(--cor-fundo);
  text-align: center;
  padding: 24px 16px;
}

header h1 {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
}

header p {
  opacity: 0.85;
}

/* ===== 5. Área principal ===== */
main {
  max-width: 1100px;  /* em telas grandes, o conteúdo não se espalha demais */
  margin: 0 auto;     /* centraliza na horizontal */
  padding: 24px 16px;
}

/* ===== 6. Grade de cards ===== */
#lista-itens {
  display: grid;
  /* cria quantas colunas couberem, cada uma com no mínimo 250px */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;  /* espaço entre os cards */
}

.card {
  background-color: var(--cor-card);
  border-radius: 16px;  /* cantos arredondados */
  overflow: hidden;     /* corta a foto nos cantos arredondados */
  box-shadow: 0 2px 8px rgba(61, 29, 10, 0.08);  /* sombra suave */
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  height: 180px;      /* todas as fotos com a mesma altura */
  object-fit: cover;  /* preenche o espaço sem distorcer (corta as sobras) */
}

.card-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;  /* ocupa toda a altura que sobrar no card */
}

.card-info h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
}

.card-info p {
  font-size: 0.9rem;
  opacity: 0.8;
  flex-grow: 1;  /* empurra o preço para o fim do card */
}

.card-info strong {
  color: var(--cor-preco);
  font-size: 1.1rem;
}

/* ===== 7. Botões de categoria ===== */
.categorias {
  display: flex;      /* coloca os botões lado a lado */
  gap: 8px;
  overflow-x: auto;   /* no celular, se não couber, rola para o lado */
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.categoria {
  flex-shrink: 0;           /* o botão não encolhe nem quebra o texto */
  font-family: inherit;     /* botões não herdam a fonte sozinhos */
  font-size: 0.95rem;
  padding: 8px 16px;
  border: 1px solid var(--cor-marrom);
  border-radius: 999px;     /* formato de pílula */
  background-color: transparent;
  color: var(--cor-marrom);
  cursor: pointer;          /* mãozinha ao passar o mouse */
}

.categoria:hover {
  background-color: rgba(108, 57, 25, 0.08);  /* marrom bem clarinho */
}

/* O botão da categoria escolhida fica "preenchido" */
.categoria.ativa {
  background-color: var(--cor-marrom);
  color: var(--cor-fundo);
}

/* ===== 8. Campo de busca ===== */
.busca {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;  /* 16px: abaixo disso, o iPhone dá zoom sozinho ao tocar no campo */
  padding: 12px 16px;
  border: 1px solid var(--cor-marrom);
  border-radius: 999px;
  background-color: var(--cor-card);
  color: var(--cor-texto);
  margin-bottom: 16px;
}

/* Destaque quando o campo está selecionado (importante para quem usa teclado) */
.busca:focus {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
}

/* Mensagem de "nenhum item encontrado" */
.sem-resultados {
  grid-column: 1 / -1;  /* ocupa a largura inteira da grade, e não só uma coluna */
  text-align: center;
  padding: 40px 16px;
  opacity: 0.7;
}

/* ===== 9. Rodapé do card: preço + botão "Adicionar" ===== */
.card-rodape {
  display: flex;
  justify-content: space-between;  /* preço na esquerda, botão na direita */
  align-items: center;             /* alinha os dois na vertical */
  gap: 8px;
}

.botao-adicionar {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background-color: var(--cor-marrom);
  color: var(--cor-fundo);
  cursor: pointer;
}

.botao-adicionar:hover {
  background-color: var(--cor-texto);  /* escurece um pouco */
}

.botao-adicionar:active {
  transform: scale(0.95);  /* "afunda" de leve ao tocar */
}

/* ===== 10. Botão flutuante do carrinho ===== */
.botao-carrinho {
  position: fixed;  /* fica "grudado" na tela, mesmo rolando a página */
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background-color: var(--cor-marrom);
  color: var(--cor-fundo);
  box-shadow: 0 4px 12px rgba(61, 29, 10, 0.3);
  cursor: pointer;
}

/* Sem esta regra, o "display: flex" acima venceria o atributo hidden e o botão nunca sumiria */
.botao-carrinho[hidden] {
  display: none;
}

/* A "bolinha" com o número */
.contador {
  min-width: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--cor-destaque);
  color: var(--cor-texto);
  font-size: 0.85rem;
  text-align: center;
}

/* ===== 11. Painel do carrinho ===== */
.painel-carrinho {
  width: min(480px, 100% - 32px);  /* até 480px, mas sempre com margem no celular */
  max-height: 80vh;                /* no máximo 80% da altura da tela... */
  overflow-y: auto;                /* ...e, se passar disso, rola por dentro */
  margin: auto;                    /* centraliza (o reset lá no topo tinha zerado isso) */
  padding: 20px;
  border: none;
  border-radius: 20px;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* O fundo escurecido atrás do painel */
.painel-carrinho::backdrop {
  background-color: rgba(61, 29, 10, 0.5);
}

.painel-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.painel-cabecalho h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
}

.botao-fechar {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--cor-texto);
  font-size: 1.25rem;
  cursor: pointer;
}

.botao-fechar:hover {
  background-color: rgba(108, 57, 25, 0.08);
}

.lista-carrinho {
  list-style: none;  /* tira as bolinhas da lista */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.linha-carrinho {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(108, 57, 25, 0.15);  /* linha divisória */
}

.linha-subtotal {
  font-weight: 600;
  white-space: nowrap;  /* "R$ 37,80" nunca quebra em duas linhas */
}

.painel-total {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 1.15rem;
  font-weight: 600;
}

.painel-total strong {
  color: var(--cor-preco);
}

/* ===== 12. Botões + / − no painel do carrinho ===== */
.linha-carrinho {
  align-items: center;  /* centraliza nome e botões na vertical */
}

.linha-info {
  display: flex;
  flex-direction: column;  /* nome em cima, subtotal embaixo */
}

.controle-quantidade {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.botao-quantidade {
  width: 36px;   /* 36px: grande o bastante para o dedo no celular */
  height: 36px;
  border: 1px solid var(--cor-marrom);
  border-radius: 50%;
  background-color: transparent;
  color: var(--cor-marrom);
  font-size: 1.1rem;
  cursor: pointer;
}

.botao-quantidade:hover {
  background-color: rgba(108, 57, 25, 0.08);
}

.carrinho-vazio {
  text-align: center;
  padding: 24px 0;
  opacity: 0.7;
}

/* ===== 13. Botão "Esvaziar carrinho" ===== */
.botao-esvaziar {
  display: block;
  margin: 16px auto 0;  /* centralizado, abaixo do total */
  padding: 8px;
  border: none;
  background-color: transparent;
  color: var(--cor-marrom);
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: underline;  /* aparência de link: ação secundária, discreta */
  cursor: pointer;
}

/* Mesma armadilha da seção 10: o "display: block" venceria o atributo hidden */
.botao-esvaziar[hidden] {
  display: none;
}

/* ===== 14. Número da mesa no cabeçalho ===== */
.mesa {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background-color: var(--cor-destaque);
  color: var(--cor-texto);
  font-weight: 600;
}

/* De novo a regra do hidden: o "display: inline-block" venceria o atributo */
.mesa[hidden] {
  display: none;
}

/* ===== 15. Botão "Enviar pedido pelo WhatsApp" ===== */
.botao-enviar {
  display: block;
  width: 100%;  /* ação principal do painel: ocupa a largura toda */
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background-color: var(--cor-whatsapp);
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.botao-enviar:hover {
  filter: brightness(1.1);  /* clareia um pouco */
}

.botao-enviar[hidden] {
  display: none;
}

/* ===== 16. Modo retirada: nome do cliente ===== */
.dados-retirada {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--cor-card);
}

.dados-retirada label {
  display: block;  /* o rótulo fica numa linha própria, acima do campo */
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 600;
}

.campo-nome {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cor-marrom);
  border-radius: 12px;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 1rem;  /* 16px: evita o zoom automático do iPhone */
}

.campo-nome:focus {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
}

.erro {
  margin-top: 8px;
  color: #b3261e;  /* vermelho escuro: legível sobre o branco */
  font-size: 0.9rem;
}

/* ===== 17. Rodapé: assinatura da Harada Tecnologias ===== */
.rodape {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 96px;  /* embaixo, espaço extra para o botão flutuante não cobrir o rodapé */
  border-top: 1px solid rgba(108, 57, 25, 0.15);
  text-align: center;
  font-size: 0.85rem;
  color: var(--cor-marrom);
}

/* Nome da marca em destaque */
.rodape-marca {
  color: var(--cor-marrom);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;  /* o nome da marca nunca quebra no meio */
}

.rodape-marca:hover {
  text-decoration: underline;
}

/* O ® pequeno e elevado, colado ao nome, como manda a tipografia */
.marca-registrada {
  margin-left: 1px;
  font-size: 0.65em;
  font-weight: 400;
  vertical-align: super;  /* sobe o símbolo, como um expoente */
  line-height: 0;         /* impede que o símbolo elevado aumente a altura da linha */
}