/* NYM4 Delivery — cardápio público
   Tokens e estilos. Paleta "paprika" quente, fugindo do bege-terracota
   genérico de IA: laranja-paprika mais saturado + verde-louro para "aberto".
   Tipografia: pilha de sistema (confiável offline no PWA), contraste por peso. */

:root {
  color-scheme: light dark;

  /* ---- paleta clara ---- */
  --cor-fundo: #FBF6EF;
  --cor-superficie: #FFFFFF;
  --cor-superficie-alt: #F3EBDD;
  --cor-texto: #241A12;
  --cor-texto-suave: #5C5042;
  --cor-borda: #E6DAC6;
  --cor-primaria: #C6552A;
  --cor-primaria-escura: #9F4420;
  --cor-primaria-contraste: #FFFFFF;
  --cor-aberto: #4E7A3C;
  --cor-aberto-fundo: #E6EEDE;
  --cor-fechado: #AE3434;
  --cor-fechado-fundo: #F5E1DD;
  --cor-foco: #1C63D6;
  --sombra-flutuante: 0 8px 24px rgba(36, 26, 18, 0.18);

  /* ---- escala tipográfica ---- */
  --fonte-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;

  /* ---- espaço / raio ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --raio-cartao: 16px;
  --raio-pill: 999px;
  --raio-campo: 10px;
  --alvo-toque: 44px;

  --dur-rapida: 160ms;
  --dur-media: 240ms;
  --facil: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #1A140E;
    --cor-superficie: #241C14;
    --cor-superficie-alt: #2E241A;
    --cor-texto: #F4ECE0;
    --cor-texto-suave: #C7B9A6;
    --cor-borda: #3C2F22;
    --cor-primaria: #E58045;
    --cor-primaria-escura: #F0995F;
    --cor-primaria-contraste: #1A140E;
    --cor-aberto: #8FBD76;
    --cor-aberto-fundo: #28341F;
    --cor-fechado: #E08181;
    --cor-fechado-fundo: #3A2320;
    --cor-foco: #6FA8FF;
    --sombra-flutuante: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.25; }

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-conteudo {
  position: absolute;
  left: var(--esp-3);
  top: -48px;
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--raio-campo);
  border: 1px solid var(--cor-borda);
  transition: top var(--dur-rapida) var(--facil);
}

.pular-conteudo:focus-visible {
  top: var(--esp-3);
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- cabeçalho ---------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--raio-campo);
  object-fit: cover;
  background: var(--cor-superficie-alt);
  flex-shrink: 0;
}

.cabecalho__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cabecalho__nome {
  font-size: var(--fs-lg);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pill);
  width: fit-content;
}

.selo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.selo--aberto {
  color: var(--cor-aberto);
  background: var(--cor-aberto-fundo);
}

.selo--fechado {
  color: var(--cor-fechado);
  background: var(--cor-fechado-fundo);
}

/* ---------------- faixa fechada ---------------- */

.aviso-fechado {
  margin: var(--esp-3) var(--esp-4) 0;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-fechado-fundo);
  color: var(--cor-fechado);
  border-radius: var(--raio-campo);
  font-size: var(--fs-sm);
}

.aviso-fechado__titulo {
  font-weight: 700;
  margin: 0 0 var(--esp-2);
  color: var(--cor-texto);
}

.aviso-fechado__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  color: var(--cor-texto-suave);
}

.aviso-fechado__lista li {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* ---------------- busca ---------------- */

.busca {
  position: sticky;
  top: 68px;
  z-index: 25;
  padding: var(--esp-3) var(--esp-4) var(--esp-2);
  background: var(--cor-fundo);
}

.busca__campo {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-pill);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.busca__campo::placeholder { color: var(--cor-texto-suave); }

/* ---------------- chips de categoria ---------------- */

.categorias {
  position: sticky;
  top: 124px;
  z-index: 24;
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  padding: var(--esp-2) var(--esp-4) var(--esp-3);
  background: var(--cor-fundo);
  scrollbar-width: none;
  border-bottom: 1px solid var(--cor-borda);
}

.categorias::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 var(--esp-4);
  display: inline-flex;
  align-items: center;
  border-radius: var(--raio-pill);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--dur-rapida) var(--facil), color var(--dur-rapida) var(--facil);
}

.chip[aria-pressed="true"] {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
}

/* ---------------- produtos ---------------- */

.secao-categoria {
  padding: var(--esp-4);
}

.secao-categoria__titulo {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--esp-3);
}

.grade-produtos {
  display: grid;
  gap: var(--esp-3);
}

.cartao-produto {
  display: flex;
  gap: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  padding: var(--esp-3);
}

.cartao-produto__imagem {
  width: 84px;
  height: 84px;
  border-radius: var(--raio-campo);
  object-fit: cover;
  background: var(--cor-superficie-alt);
  flex-shrink: 0;
}

.cartao-produto__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cartao-produto__nome {
  font-size: var(--fs-md);
  font-weight: 700;
}

.cartao-produto__descricao {
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cartao-produto__rodape {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.cartao-produto__preco {
  font-weight: 700;
  font-size: var(--fs-base);
}

.estepe {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--cor-superficie-alt);
}

.estepe__botao {
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--cor-primaria);
  font-size: var(--fs-lg);
  font-weight: 700;
  border-radius: var(--raio-pill);
}

.estepe__botao:disabled { opacity: 0.4; cursor: not-allowed; }

.estepe__valor {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.sem-resultado {
  text-align: center;
  color: var(--cor-texto-suave);
  padding: var(--esp-6) var(--esp-4);
  font-size: var(--fs-sm);
}

/* ---------------- barra flutuante do carrinho ---------------- */

.barra-carrinho {
  position: fixed;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-pill);
  border: none;
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(0);
  transition: transform var(--dur-media) var(--facil), opacity var(--dur-media) var(--facil);
}

.barra-carrinho[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
}

.barra-carrinho__contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, 0.25);
  font-size: var(--fs-xs);
}

/* ---------------- gaveta do carrinho ---------------- */

.fundo-gaveta {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.5);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--facil);
}

.fundo-gaveta--visivel {
  opacity: 1;
  pointer-events: auto;
}

.gaveta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--sombra-flutuante);
  transform: translateY(100%);
  transition: transform var(--dur-media) var(--facil);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.gaveta--aberta { transform: translateY(0); }

.gaveta__alca {
  width: 40px;
  height: 4px;
  border-radius: var(--raio-pill);
  background: var(--cor-borda);
  margin: var(--esp-2) auto;
}

.gaveta__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--esp-4) var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
}

.gaveta__titulo { font-size: var(--fs-lg); font-weight: 700; }

.gaveta__fechar {
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-superficie-alt);
  border: none;
  border-radius: 50%;
  font-size: var(--fs-lg);
  color: var(--cor-texto);
}

.gaveta__corpo {
  overflow-y: auto;
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.item-carrinho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.item-carrinho__nome {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.item-carrinho__preco {
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
}

.carrinho-vazio {
  text-align: center;
  color: var(--cor-texto-suave);
  padding: var(--esp-5) 0;
}

.resumo {
  display: grid;
  gap: var(--esp-1);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--fs-sm);
}

.resumo__linha {
  display: flex;
  justify-content: space-between;
  color: var(--cor-texto-suave);
}

.resumo__linha--total {
  color: var(--cor-texto);
  font-weight: 700;
  font-size: var(--fs-md);
  padding-top: var(--esp-2);
}

.aviso-minimo {
  font-size: var(--fs-xs);
  color: var(--cor-fechado);
  background: var(--cor-fechado-fundo);
  border-radius: var(--raio-campo);
  padding: var(--esp-2) var(--esp-3);
}

.gaveta__rodape {
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.botao-primario {
  width: 100%;
  min-height: var(--alvo-toque);
  border: none;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  font-weight: 700;
  font-size: var(--fs-md);
}

.botao-primario:disabled {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

.botao-secundario {
  width: 100%;
  min-height: var(--alvo-toque);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--cor-texto);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-top: var(--esp-2);
}

/* ---------------- formulário de checkout ---------------- */

.form-checkout {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.campo__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.campo input,
.campo textarea,
.campo select {
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-campo);
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.campo textarea {
  min-height: 72px;
  resize: vertical;
  padding-top: var(--esp-2);
}

.grupo-pagamento {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.opcao-pagamento {
  flex: 1;
  min-height: var(--alvo-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-fundo);
  padding: 0 var(--esp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  position: relative;
}

.opcao-pagamento input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.opcao-pagamento:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-aberto-fundo);
  color: var(--cor-primaria-escura);
}

.opcao-pagamento:has(input:focus-visible) {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.erro-campo {
  font-size: var(--fs-xs);
  color: var(--cor-fechado);
  min-height: 1em;
}

.mensagem-envio {
  font-size: var(--fs-sm);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-campo);
  background: var(--cor-fechado-fundo);
  color: var(--cor-fechado);
}

@media (min-width: 720px) {
  .grade-produtos {
    grid-template-columns: repeat(2, 1fr);
  }

  .gaveta {
    left: auto;
    right: var(--esp-5);
    bottom: var(--esp-5);
    width: min(420px, 92vw);
    max-height: 80vh;
    border-radius: 20px;
  }

  .barra-carrinho {
    left: auto;
    width: min(420px, 92vw);
  }
}