/* Utilitarios que o build purgado do Tailwind nao inclui,
   usados pelo fluxo guiado do ProductModal. */

/* item de complemento bloqueado ao atingir o limite de gratis */
.acai-bloqueado { opacity: .45; }

/* troca de aba entre os copos */
.acai-transicao { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }

/* contorno da aba inativa */
.acai-contorno { box-shadow: inset 0 0 0 1px var(--border); }

/* Fluxo das abas de categoria:
   a ultima secao (2159px) nunca alcancava o topo da viewport, porque o scroll
   maximo da pagina era 1944px. Sem alcancar o topo, o scroll-spy nunca marcava
   a ultima aba. Garantir uma viewport de altura resolve em qualquer tela.

   Atencao ao seletor: cada secao fica dentro do proprio div, entao TODAS
   casam com :last-of-type e a pagina ganha um buraco depois de cada
   categoria. Por isso o caminho e explicito ate o ultimo filho do container.

   Esticar a pagina para o scroll-spy alcancar a ultima secao deixava um vao
   morto no fim do cardapio, entao nada de min-height aqui. Em vez disso,
   quando a pagina chega ao fim, cardapio.js marca o body e a regra abaixo
   aponta a ultima aba - que e justamente a categoria visivel na tela. */
body.acai-fim-cardapio .sticky button:last-child {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
body.acai-fim-cardapio .sticky button:not(:last-child) {
  color: var(--muted-foreground);
  border-bottom-color: transparent;
}

/* ---------- Painel de avaliacoes ---------- */
/* Fica acima do modal de produto (z-50) do bundle. */
.acai-painel { z-index: 60; }

.acai-estrelas { display: inline-flex; gap: 1px; vertical-align: -2px; }

/* barra de distribuicao por nota */
.acai-barra {
  display: block;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted);
}
.acai-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* iniciais do cliente no lugar da foto */
.acai-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
}

/* filtros roláveis na horizontal, como as abas de categoria */
.acai-trilho-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.acai-trilho-filtros::-webkit-scrollbar { display: none; }

/* ---------- Indicador de etapas do checkout ---------- */
.acai-traco-etapa {
  flex: 1;
  min-width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--border);
}
.acai-traco-feito { background: var(--primary); }

/* h-6/w-6 nao existem no build purgado do Tailwind: sem largura, a bolinha
   da etapa encolhia ate virar um oval. Tamanho explicito resolve. */
.acai-bolinha-etapa { width: 24px; height: 24px; flex-shrink: 0; }

/* campo com aviso de preenchimento no checkout */
.acai-campo-erro { border-color: var(--destructive); }
.acai-campo-erro:focus { outline: none; border-color: var(--destructive); }

/* ---------- Revelação dos campos apos o CEP ---------- */
/* O container cresce de 0fr para 1fr: isso anima a altura de verdade,
   sem precisar saber quantos pixels o conteudo vai ocupar. */
.acai-revelar {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .32s ease, opacity .32s ease;
}
.acai-revelar.acai-aberto { grid-template-rows: 1fr; opacity: 1; }
.acai-revelar > .acai-revelar-interno { overflow: hidden; }

/* cada campo entra logo depois do anterior, dando ritmo a abertura */
@keyframes acai-surgir {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acai-aberto .acai-revelar-interno > * { animation: acai-surgir .3s ease-out both; }
.acai-aberto .acai-revelar-interno > *:nth-child(1) { animation-delay: .06s; }
.acai-aberto .acai-revelar-interno > *:nth-child(2) { animation-delay: .12s; }
.acai-aberto .acai-revelar-interno > *:nth-child(3) { animation-delay: .18s; }
.acai-aberto .acai-revelar-interno > *:nth-child(4) { animation-delay: .24s; }
.acai-aberto .acai-revelar-interno > *:nth-child(5) { animation-delay: .30s; }

/* pisca enquanto consulta o CEP */
@keyframes acai-pulsar { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.acai-buscando { animation: acai-pulsar 1s ease-in-out infinite; }

/* confirmacao de que o endereco veio do CEP */
.acai-achou { color: var(--discount, #16a34a); }

@media (prefers-reduced-motion: reduce) {
  .acai-revelar { transition: none; }
  .acai-aberto .acai-revelar-interno > * { animation: none; }
  .acai-buscando { animation: none; }
}

/* ---------- Popup da oferta do pedido ---------- */
.acai-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;              /* acima da barra inferior (z-40), abaixo do modal de produto (z-50 -> 60) */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .5);
  animation: acai-escurecer .2s ease-out both;
}

.acai-popup {
  width: 100%;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  animation: acai-entrar-popup .26s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes acai-escurecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes acai-entrar-popup {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* faixa fina que sobra quando o cliente fecha o popup */
.acai-faixa-oferta { animation: acai-surgir .28s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .acai-overlay, .acai-popup, .acai-faixa-oferta { animation: none; }
}

/* ============================================================
   Polimento de interacao — deixa o clicar/navegar menos "robotico"
   ============================================================ */

/* --- feedback de clique global: todo botao "afunda" levemente --- */
button { transition: transform .13s cubic-bezier(.2,.7,.3,1); }
button:not(:disabled):active { transform: scale(.97); }

/* --- cards de produto (unicos botoes dentro das secoes de categoria) --- */
section[id^="cat-"] button {
  border-radius: 14px;
  transition: background-color .22s ease, transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
/* mata o flash de opacity-70 do bundle e troca por um "press" suave.
   O tom do press e NEUTRO de proposito: com var(--primary) (o vermelho do
   iFood) o card ficava lavado de vermelho a cada toque no celular. */
section[id^="cat-"] button:active {
  opacity: 1 !important;
  transform: scale(.985);
  background-color: color-mix(in srgb, var(--foreground) 4%, transparent);
}
/* imagem do card ganha vida com um zoom leve */
section[id^="cat-"] button > div:last-child { overflow: hidden; }
section[id^="cat-"] button img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
section[id^="cat-"] button:active img { transform: scale(1.03); }

/* Hover so para quem tem ponteiro de verdade. No celular o navegador mantem o
   :hover no ultimo elemento tocado ate o proximo toque — era isso que deixava
   o card vermelho DEPOIS do clique, e nao so durante. */
@media (hover: hover) and (pointer: fine) {
  section[id^="cat-"] button:hover {
    background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  }
  section[id^="cat-"] button:hover img { transform: scale(1.07); }
}

/* --- titulos de secao com barra de acento, para "respirar" e guiar o olho --- */
section[id^="cat-"] h2 {
  position: relative;
  padding-left: 12px;
  font-size: 17px;
  letter-spacing: -.01em;
}
section[id^="cat-"] h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 4px;
  border-radius: 999px;
  background: var(--primary);
}

/* --- abas de categoria: press mais responsivo --- */
.sticky button { transition: color .2s ease, border-color .2s ease, transform .12s ease; }
.sticky button:not(:disabled):active { transform: scale(.93); }

/* --- entrada suave do modal de produto e do painel de avaliacoes --- */
@keyframes acai-modal-entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fixed.inset-0.z-50, .acai-painel {
  animation: acai-modal-entrar .28s cubic-bezier(.2, .8, .3, 1) both;
}

/* --- respeita quem prefere menos movimento --- */
@media (prefers-reduced-motion: reduce) {
  button, section[id^="cat-"] button, section[id^="cat-"] button img,
  .sticky button, .fixed.inset-0.z-50, .acai-painel {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- Rodapé do checkout: respiro entre faixa / aviso / botão ---------- */
/* O mb-2 do bundle nao existe no build purgado, entao a faixa da oferta, o
   aviso e o botao ficavam grudados. Um gap uniforme separa os tres. */
.acai-barra-inferior {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acai-barra-inferior > * { margin-bottom: 0; }

/* logo da loja nas respostas das avaliacoes */
.acai-logo-resposta {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--muted);
}

/* miniatura (icone) de cada complemento no modal */
.acai-chip-addon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--muted));
  font-size: 22px;
  line-height: 1;
}

/* miniatura de FOTO do complemento (quando existe o arquivo) */
.acai-chip-addon-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
}