/* ─── LAYOUT GERAL ─── */

/* Header */
.app-header {
  height: auto;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-4);
  background-color: transparent;
  /* Removido fundo translúcido conforme solicitado */
  backdrop-filter: none;
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.brand-logo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-color: #FFFFFF; /* Fundo sempre branco conforme solicitado */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 4px solid #FFFFFF; /* Borda sempre branca */
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.brand-logo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* Impede interação, arraste e pressionamento longo */
  -webkit-touch-callout: none; /* Bloqueia o menu 'Salvar Imagem' no iOS/Android */
  -webkit-user-drag: none; /* Bloqueia o arrastar no computador */
  user-select: none; /* Bloqueia seleção */
}

.brand-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
}

.brand-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
}

.cart-icon-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.cart-icon-btn:hover {
  background-color: var(--color-surface-alt);
  transform: translateY(-2px);
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 0px;
  background-color: var(--color-accent);
  color: #FFF;
  font-size: 0.65rem;
  font-weight: bold;
  height: 16px;
  min-width: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Nav de Categorias */
.category-nav {
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 49;
  background-color: var(--color-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  white-space: nowrap;

  /* Esconder scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-nav-list {
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--space-4);
  height: 100%;
  align-items: center;
  gap: var(--space-2);
  min-width: max-content;
}

.category-nav-item {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 10px var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid transparent;
}

.category-nav-item:active {
  opacity: 0.7;
  transform: scale(0.96); /* Feedback tátil sem fundo que "gruda" */
}

@media (hover: hover) and (pointer: fine) {
  .category-nav-item:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-alt);
  }
}

.category-nav-item.active {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.2);
}

/* Área Principal - Categorias */
.app-main {
  padding: var(--space-4) var(--space-4);
  /* Espaço para o barra flutuante do carrinho */
  padding-bottom: calc(var(--cart-bar-height) + var(--space-6));
}

.category-section {
  margin-bottom: var(--space-8);
  scroll-margin-top: calc(var(--header-height) + var(--nav-height) + var(--space-4));
  animation: fadeInUp 0.6s ease both;
}

.category-header {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-surface-alt);
  padding-bottom: var(--space-2);
}

.category-title {
  font-size: var(--text-xl);
  font-family: var(--font-display);
}

.category-icon {
  font-size: var(--text-xl);
}

/* Animação de Entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estado de grid vazio */
.empty-state {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
}

/* ─── RODAPÉ (FOOTER) ─── */
/* Controle aqui o fundo e o espaçamento geral do fim da página */
.app-footer {
  background-color: var(--color-surface);
  padding: 3.5rem var(--space-6);
  text-align: center;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

/* Cada bloco do rodapé (ex: Bloco de Endereço ou Bloco de Horário) */
.footer-section {
  width: 100%;
  max-width: 400px;
}

/* TÍTULOS DAS SEÇÕES DO RODAPÉ (Ex: "ONDE ESTAMOS", "HORÁRIO") */
/* Ajuste aqui a fonte, cor, e as margens dos títulos principais do rodapé */
.footer-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-2);
}

/* A linha decorativa (aquela linha amarela/primária) abaixo do título */
.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
}

/* CONTEÚDO DENTRO DE CADA SEÇÃO (Endereço, Horários, etc) */
.footer-content {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-style: normal;
}

.hours-table {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-collapse: collapse;
}

.hours-table td {
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  border-bottom: 1px solid transparent;
}

.hours-table td:nth-child(2) {
  text-align: right;
  font-weight: 800;
  color: var(--color-text-primary);
}

/* SEÇÃO DOS ÍCONES DE REDES SOCIAIS (WhatsApp, Instagram, etc) */
.footer-social-wrapper {
  margin-top: 0.8rem;
  margin-bottom: var(--space-4);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* Ícones Sociais Circulares como na imagem */
.social-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
}

.social-icon svg {
  width: 24px;
  height: 24px;
}

.social-icon:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  transform: scale(1.1);
}

.footer-credits {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Barra Flutuante de Carrinho */
.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform var(--transition-base);
  z-index: 48;
}

/* Quando o container app limita a max-width, a barra tbm vai limitar */
.cart-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.cart-bar.visible {
  transform: translateY(0);
}

.cart-bar .btn-primary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

.cart-bar-total {
  font-weight: 700;
}

/* Responsividade de Header para nomes longos ou telas pequenas */
@media (max-width: 360px) {
  .brand-name {
    font-size: var(--text-base);
  }

  .brand-logo {
    width: 90px;
    height: 90px;
  }
}