/* ===================================================================
   ZapPedidos — cardápio
   Depende de tema.css. É este arquivo que uma página de cliente usa:
   para mudar a cara da loja, troque as cores em tema.css.
   =================================================================== */

/* ---------------------------------------------------------------
   Topo
   --------------------------------------------------------------- */
.carrinho-botao{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 15px;
  border: var(--borda-fina);
  border-radius: 999px;
  background: var(--noite);
  color: var(--areia);
  font: 600 15px/1 Inter, sans-serif;
  cursor: pointer;
}
.carrinho-botao:hover{ border-color: var(--ambar); color: var(--ambar-cl) }
.carrinho-botao svg{ width: 20px; height: 20px }
.conta{
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ambar);
  color: #22160A;
  font: 700 13px/22px Inter, sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.carrinho-botao[data-vazio="sim"] .conta{ background: var(--mar); color: var(--bruma) }

/* ---------------------------------------------------------------
   Vitrine
   --------------------------------------------------------------- */
.capa{
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
  border-bottom: var(--borda-fina);
}
.capa h1{ font-size: clamp(2rem, 4.6vw, 3rem); max-width: 16ch; margin-bottom: 12px }
.capa p{ color: var(--bruma); max-width: 52ch }

.vitrine{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  padding: clamp(32px, 4vw, 52px) 0 60px;
}
.item-cardapio{
  display: flex;
  flex-direction: column;
  background: var(--noite);
  border: var(--borda-fina);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.item-cardapio img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--mar);
}
.item-corpo{ padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.item-corpo h3{ font-size: 1.14rem }
.item-preco{
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.item-corpo .btn{ width: 100% }

/* ---------------------------------------------------------------
   Carrinho lateral
   --------------------------------------------------------------- */
.cortina{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 10, 14, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cortina.aberta{ opacity: 1; pointer-events: auto }

.gaveta{
  position: fixed;
  top: 0; right: 0;
  z-index: 210;
  width: min(400px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--noite);
  border-left: var(--borda-fina);
  transform: translateX(102%);
  transition: transform .3s cubic-bezier(.3,.8,.3,1);
}
.gaveta.aberta{ transform: none }
@media (prefers-reduced-motion: reduce){ .gaveta{ transition: none } }

.gaveta-topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: var(--borda-fina);
}
.gaveta-topo h2{ font-size: 1.35rem }
.fechar{
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: var(--borda-fina);
  border-radius: 50%;
  background: transparent;
  color: var(--bruma);
  cursor: pointer;
}
.fechar:hover{ color: var(--areia); border-color: var(--bruma) }
.fechar svg{ width: 16px; height: 16px }

.gaveta-rolagem{ flex: 1; overflow-y: auto; padding: 18px 20px }
.gaveta-pe{ padding: 16px 20px 20px; border-top: var(--borda-fina); background: var(--noite) }
/* o rodapé da gaveta sobe acima da faixa de demonstração */
body.tem-aviso .gaveta{ padding-bottom: calc(var(--altura-aviso, 72px) + 6px) }

.linha-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: var(--borda-fina);
}
.linha-item:last-child{ border-bottom: 0 }
.linha-item strong{ font-weight: 600; font-size: 15px }
.linha-item .valor{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contador{ display: flex; align-items: center; gap: 10px; margin-top: 8px }
.contador button{
  width: 30px; height: 30px;
  border: var(--borda-fina);
  border-radius: 8px;
  background: var(--breu);
  color: var(--areia);
  font: 600 17px/1 Inter, sans-serif;
  cursor: pointer;
}
.contador button:hover{ border-color: var(--ambar); color: var(--ambar) }
.contador span{ min-width: 22px; text-align: center; font-variant-numeric: tabular-nums }

.vazio-carrinho{ color: var(--fumaca); text-align: center; padding: 40px 10px }

.soma{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 1.05rem;
}
.soma strong{
  font-family: Fraunces, Georgia, serif;
  font-size: 1.7rem;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}

.campo{ display: grid; gap: 6px; margin-bottom: 12px }
.campo label{ font-size: 13.5px; font-weight: 600; color: var(--bruma) }
.campo input{
  width: 100%;
  padding: 12px 14px;
  border: var(--borda-fina);
  border-radius: var(--raio-p);
  background: var(--breu);
  color: var(--areia);
  font: 400 16px/1.4 Inter, system-ui, sans-serif;
}
.campo input::placeholder{ color: var(--fumaca) }
.campo input:focus{ outline: none; border-color: var(--ambar) }

.pagamentos{ display: grid; gap: 8px; margin: 14px 0 }
.pagamento{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: var(--borda-fina);
  border-radius: var(--raio-p);
  background: var(--breu);
  color: var(--bruma);
  font: 500 15px/1.3 Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}
.pagamento:hover{ border-color: var(--bruma); color: var(--areia) }
.pagamento[aria-pressed="true"]{
  border-color: var(--ambar);
  background: rgba(240,166,60,.1);
  color: var(--ambar-cl);
}
.pagamento small{ display: block; color: var(--fumaca); font-size: 12.5px; font-weight: 400 }
.pagamento .marca-check{ margin-left: auto; opacity: 0; color: var(--ambar) }
.pagamento[aria-pressed="true"] .marca-check{ opacity: 1 }
.pagamento svg{ width: 18px; height: 18px; flex: none }

.erro-carrinho{ color: var(--tijolo); font-size: 14px; margin-bottom: 10px }
.gaveta-pe .btn{ width: 100% }