:root {
  --bg: #212529; /* Fundo geral escuro */
  --panel: #2b3035; /* Fundo de painéis e inputs escuro */
  --muted: #adb5bd; /* Texto muted mais claro */
  --text: #f8f9fa; /* Texto principal claro */
  --brand: #ff4d4f; /* Cor da marca (vermelho) - mantida */
  --ok: #28a745; /* Cor de sucesso (verde) */
  --warn: #ffc107; /* Cor de aviso (laranja) */
  --danger: #dc3545; /* Cor de perigo (vermelho) */
  --card: #2b3035; /* Fundo dos cards escuro */
  --chip: #343a40; /* Fundo dos chips e tags escuro */
  --border: #495057; /* Cor da borda escura */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg); /* Fundo sólido escuro */
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
header {
  padding: 24px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(33, 37, 41, 0.9); /* Fundo escuro translúcido (baseado em --bg) */
  backdrop-filter: blur(8px);
  z-index: 10;
}
.container { max-width: 1100px; margin: 0 auto; }

/* Novo estilo para a linha superior do cabeçalho (logo + botão de toggle) */
.header-content-top {
  display: flex;
  justify-content: center; /* Centraliza o logo por padrão */
  align-items: center;
  position: relative; /* Necessário para posicionamento absoluto do menu-toggle */
  padding-bottom: 12px; /* Espaçamento padrão para desktop */
}

.brand {
  text-align: center; /* Centraliza o logotipo */
}
.brand img#brand-logo {
  max-height: 60px; /* Altura máxima do logotipo. Ajuste conforme necessário */
  width: auto; /* Mantém a proporção da imagem */
  display: inline-block; /* Permite que 'text-align: center' funcione */
}

/* Novo estilo para o botão de menu (hambúrguer) */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: none; /* Escondido por padrão em desktop */
  font-size: 24px;
  position: absolute; /* Posiciona o botão em relação a header-content-top */
  right: 0; /* Alinha à direita */
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-50%);
  color: var(--text);
}
.menu-toggle svg {
    display: block; /* Garante que o SVG seja exibido corretamente */
    fill: var(--muted); /* Cor do ícone */
}

/* Estilos para o conteúdo colapsável (controles, meta info, categorias) */
.header-collapsible {
  display: block; /* Visível por padrão em desktop */
}

.controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}
.search {
  display: flex; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; gap: 8px;
}
.search input {
  width: 100%; background: transparent; border: none; color: var(--text); outline: none; font-size: 14px;
}
.btn, .toggle {
  background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--brand); }
.toggle {
  display: inline-flex; align-items: center; gap: 8px; user-select: none;
}
.meta {
  margin-top: 8px; color: var(--muted); font-size: 12px;
}
nav.categories {
  margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.chip {
  background: var(--chip); color: var(--text); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.chip.active { border-color: var(--brand); color: var(--brand); } /* Cor do texto da chip ativa com a cor da marca */
section.menu { padding: 16px; }
.category-block { margin-bottom: 28px; }
.category-title {
  margin: 8px 0 12px; font-size: 20px; font-weight: 600; border-left: 3px solid var(--brand); padding-left: 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.thumb {
  background: var(--chip); /* Fundo da imagem escuro */
  aspect-ratio: 16/9; width: 100%; object-fit: cover;
}
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title-row h3 { margin: 0; font-size: 16px; }
.badge {
  font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip); color: var(--text); /* Cores padrão para badges */
}
.badge.promo { border-color: var(--warn); color: var(--warn); background: rgba(255, 193, 7, 0.15); } /* Cores de promo para tema escuro */
.desc { color: var(--muted); font-size: 13px; line-height: 1.4; }
.meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.price {
  font-weight: 700; color: var(--text); font-size: 16px; display: flex; gap: 8px; align-items: baseline;
}
.price .old {
  color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 13px;
}
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; background: var(--chip); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 2px 6px; /* Tags com fundo escuro e texto muted */
}
.icons { display: flex; gap: 8px; }
.icon { font-size: 14px; }
.card.unavailable { opacity: 0.6; position: relative; }
.card.unavailable::after {
  content: "Esgotado";
  position: absolute; top: 10px; right: 10px; background: rgba(220, 53, 69, 0.15); /* Fundo esgotado escuro */
  border: 1px solid var(--danger); color: var(--danger); /* Cor de texto esgotado */
  font-size: 12px; padding: 4px 8px; border-radius: 8px;
}
.empty {
  padding: 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); text-align: center; margin-top: 12px;
}
footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5; /* Melhorar legibilidade */
}
footer .footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}
footer .footer-description {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 500px; /* Limitar largura para melhor leitura */
}
footer .hungryon-link {
  display: inline-block;
  margin-top: 8px;
}
footer .hungryon-logo {
  max-height: 30px; /* Tamanho ajustado para o logo */
  width: auto;
  vertical-align: middle;
  border: none; /* Remover borda de link em algumas versões de navegador */
}
footer .footer-dynamic-notes {
  margin-bottom: 15px; /* Espaçamento entre as notas e o copyright */
  font-size: 12px;
  color: var(--muted);
}
footer .copyright-notes {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
a { color: #66b2ff; text-decoration: none; } /* Links azuis claros para tema escuro */
a:hover { text-decoration: underline; }

/* Estilos Responsivos para Mobile (até 639px de largura) */
@media (max-width: 639px) {
  header .container {
    padding-top: 16px; /* Ajusta o padding superior do header */
    padding-bottom: 0; /* Remove padding inferior para o header-content-top */
  }
  .header-content-top {
    justify-content: center; /* Mantém o logo centralizado */
    padding-bottom: 0; /* Remove padding na linha superior em mobile */
  }
  .menu-toggle {
    display: block; /* Mostra o botão de toggle em mobile */
  }
  .header-collapsible {
    display: none; /* Esconde o conteúdo colapsável por padrão em mobile */
    margin-top: 12px; /* Espaçamento abaixo da linha superior quando expandido */
    width: 100%; /* Ocupa toda a largura */
  }
  .header-collapsible.is-open {
    display: block; /* Mostra o conteúdo colapsável quando a classe is-open está presente */
  }

  /* Ajustes para os controles quando visíveis em mobile */
  .controls {
    grid-template-columns: 1fr; /* Empilha a busca e os botões */
    gap: 8px;
  }
  .search, .btn, .toggle {
    width: 100%; /* Faz a busca e os botões ocuparem toda a largura */
  }
  nav.categories {
    margin: 8px 0; /* Reduz a margem das categorias em mobile */
    justify-content: center; /* Centraliza os chips de categoria */
  }
}