/* =====================================================================
   SABOR DE CASA — PEDIDOS ONLINE
   Página de pedido: cardápio, sacola, entrega, PIX e WhatsApp.
   Mobile-first, cores da marca (laranja + azul royal).
   ===================================================================== */
:root {
  --laranja: #E85D1A;
  --laranja-2: #FF7A33;
  --laranja-escuro: #C7480E;
  --azul: #1F3BAA;
  --bg: #FFF6EC;
  --bg-2: #FDEEDD;
  --card: #FFFFFF;
  --texto: #241C16;
  --suave: #6E6056;
  --fraco: #A3968A;
  --borda: rgba(36, 28, 22, .10);
  --verde: #1FA553;
  --erro: #D64533;
  --r: 16px;
  --r-lg: 24px;
  --sombra: 0 10px 30px -12px rgba(80, 50, 20, .25);
  --f-titulo: 'Poppins', system-ui, sans-serif;
  --f-corpo: 'Inter', system-ui, sans-serif;
  --f-script: 'Yellowtail', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--f-corpo);
  background:
    radial-gradient(900px 400px at 85% -140px, rgba(232, 93, 26, .14), transparent 60%),
    var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding-bottom: 110px; /* espaço pra barra da sacola */
}
img { max-width: 100%; display: block; }
button { font-family: var(--f-corpo); cursor: pointer; }
input { font-family: var(--f-corpo); }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.2; }

/* ===================== TOPO ===================== */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 246, 236, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.topo__in {
  max-width: 1060px; margin: 0 auto;
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { display: flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1; }
.marca__col { display: flex; flex-direction: column; }
.marca__prefixo { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--texto); font-weight: 700; margin: 0 0 3px 3px; }
.marca__caixa { background: var(--laranja); border-radius: 6px; padding: 3px 10px 5px; box-shadow: 0 4px 12px -4px rgba(232,93,26,.55); }
.marca__script { font-family: var(--f-script); color: #fff; font-size: 21px; white-space: nowrap; }
.marca__talher { width: 24px; height: 24px; fill: var(--texto); margin-left: -1px; flex: none; }
.topo__info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--verde); }
.selo.fechado { color: var(--erro); }
.selo__ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(31, 165, 83, .18); }
.topo__meta { font-size: 11.5px; color: var(--suave); }

/* ===================== AVISO DO DIA ===================== */
.aviso-dia { background: var(--azul); color: #fff; }
.aviso-dia__in { max-width: 1060px; margin: 0 auto; padding: 8px 18px; font-size: 13.5px; }
.aviso-dia strong { color: #FFD9A8; }
.aviso-dia--fechado { background: #8C2F22; }
.menu-vazio { text-align: center; color: var(--suave); padding: 60px 20px; font-size: 15px; }

/* ===================== HERO ===================== */
.hero__in { max-width: 1060px; margin: 0 auto; padding: 30px 18px 6px; }
.hero h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -.5px; }
.hero__ponto { color: var(--laranja); }
.hero p { color: var(--suave); margin-top: 6px; font-size: 15px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-info {
  background: var(--card); border: 1px solid var(--borda);
  font-size: 12.5px; font-weight: 600; color: var(--suave);
  padding: 7px 12px; border-radius: 999px;
}

/* ===================== CATEGORIAS ===================== */
.cats {
  position: sticky; top: 57px; z-index: 35;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 18px;
  max-width: 1060px; margin: 0 auto;
  scrollbar-width: none;
  background: linear-gradient(var(--bg) 75%, transparent);
}
.cats::-webkit-scrollbar { display: none; }
.cat-pill {
  flex: none;
  background: var(--card); border: 1.5px solid var(--borda);
  color: var(--texto); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  transition: all .18s ease;
}
.cat-pill.ativo { background: var(--laranja); border-color: var(--laranja); color: #fff; box-shadow: 0 6px 16px -6px rgba(232, 93, 26, .5); }

/* ===================== CARDÁPIO ===================== */
.menu { max-width: 1060px; margin: 0 auto; padding: 6px 18px 40px; }
.menu-grupo { padding-top: 18px; }
.menu-grupo > h2 {
  font-size: 21px; font-weight: 700; margin: 10px 0 4px;
  display: flex; align-items: baseline; gap: 10px;
}
.menu-grupo > h2 small { font-family: var(--f-corpo); font-size: 12.5px; font-weight: 500; color: var(--fraco); }
.menu-grade { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 700px) { .menu-grade { grid-template-columns: 1fr 1fr; } }

.prato {
  display: grid; grid-template-columns: 1fr 108px;
  gap: 14px; align-items: stretch;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 14px;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.prato:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.prato:active { transform: scale(.99); }
.prato__info { display: flex; flex-direction: column; min-width: 0; }
.prato__nome { font-family: var(--f-titulo); font-weight: 700; font-size: 15.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prato__tag { background: rgba(232, 93, 26, .12); color: var(--laranja-escuro); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.prato__desc { color: var(--suave); font-size: 13px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prato__base { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; }
.prato__preco { font-weight: 700; font-size: 15.5px; }
.prato__preco small { color: var(--fraco); font-weight: 500; }
.prato__add {
  margin-left: auto;
  background: var(--bg-2); color: var(--laranja-escuro);
  border: 0; font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 999px;
  transition: background .15s;
}
.prato:hover .prato__add { background: var(--laranja); color: #fff; }
.prato__foto {
  width: 108px; height: 108px; border-radius: 12px;
  overflow: hidden; background: var(--bg-2);
  display: grid; place-items: center;
}
.prato__foto > * { grid-area: 1 / 1; }
.prato__foto img { width: 100%; height: 100%; object-fit: cover; }
.prato__foto svg { width: 34px; height: 34px; stroke: var(--fraco); fill: none; stroke-width: 1.6; }
.prato--sem-foto { grid-template-columns: 1fr; }

/* ===================== RODAPÉ ===================== */
.rodape { max-width: 1060px; margin: 0 auto; padding: 10px 18px 30px; color: var(--suave); font-size: 13.5px; }
.rodape__mini { color: var(--fraco); font-size: 12px; margin-top: 4px; }
.rodape a { color: var(--laranja-escuro); }

/* ===================== BARRA DA SACOLA ===================== */
.sacola-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px;
  background: var(--laranja);
  color: #fff; border: 0;
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 15.5px; font-weight: 700;
  box-shadow: 0 18px 40px -10px rgba(232, 93, 26, .55);
  animation: subir .3s ease;
}
@keyframes subir { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sacola-bar__qtd {
  background: #fff; color: var(--laranja-escuro);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13.5px;
}
.sacola-bar__total { margin-left: auto; }

/* ===================== FOLHAS (modais) ===================== */
.veu { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; }
@media (min-width: 640px) { .veu { place-items: center; } }
.veu__fundo { position: absolute; inset: 0; background: rgba(24, 14, 8, .5); backdrop-filter: blur(3px); }
.folha {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 92dvh;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  animation: folha-sobe .28s ease;
  overflow: hidden;
}
@media (min-width: 640px) { .folha { border-radius: 22px; max-height: 88vh; } }
@keyframes folha-sobe { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.folha__x {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--borda);
  font-size: 20px; line-height: 1; color: var(--texto);
}
.folha__corpo { padding: 18px 20px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.folha__pe {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  display: flex; gap: 12px; align-items: center;
  background: var(--card);
}
.folha__pe--col { flex-direction: column; align-items: stretch; gap: 10px; }

/* --------- modal do item --------- */
.item-foto { height: 210px; background: var(--bg-2); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-foto--vazia { display: none; }
.folha--item h2 { font-size: 21px; padding-right: 30px; }
.item-desc { color: var(--suave); font-size: 14px; margin-top: 4px; }
.item-preco { font-weight: 700; font-size: 16px; margin-top: 8px; color: var(--laranja-escuro); }
.bloco { margin-top: 18px; }
.bloco h3 { font-size: 14.5px; margin-bottom: 10px; }
.adics { display: flex; flex-direction: column; gap: 8px; }
.adic {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.adic input { width: 18px; height: 18px; accent-color: var(--laranja); }
.adic__preco { margin-left: auto; color: var(--suave); font-weight: 600; font-size: 13.5px; }
.adic:has(input:checked) { border-color: var(--laranja); background: rgba(232, 93, 26, .06); }
input[type=text], input[type=tel] {
  width: 100%;
  border: 1.5px solid var(--borda); border-radius: 12px;
  padding: 12px 14px; font-size: 16px; /* 16px evita o zoom automático do iPhone */
  background: #fff; color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(232, 93, 26, .15); }
input::placeholder { color: var(--fraco); }

.qtd {
  display: flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  padding: 4px;
}
.qtd button {
  width: 38px; height: 38px; border: 0; border-radius: 9px;
  background: var(--bg-2); color: var(--laranja-escuro);
  font-size: 20px; font-weight: 700;
}
.qtd span { min-width: 34px; text-align: center; font-weight: 700; font-size: 16px; }

.btn-principal {
  flex: 1;
  background: var(--laranja); color: #fff;
  border: 0; border-radius: 14px;
  padding: 15px 18px;
  font-size: 15.5px; font-weight: 700;
  transition: filter .15s, transform .1s;
  box-shadow: 0 10px 24px -8px rgba(232, 93, 26, .5);
}
.btn-principal:hover { filter: brightness(1.06); }
.btn-principal:active { transform: scale(.98); }
.btn-principal--grande { padding: 17px; font-size: 16.5px; }
.btn-suave {
  background: var(--bg-2); color: var(--laranja-escuro);
  border: 0; border-radius: 12px;
  padding: 12px 16px; font-weight: 700; font-size: 14px;
}
.btn-suave--linha {
  width: 100%; background: none; margin-top: 8px;
  color: var(--suave); text-decoration: underline; font-weight: 600;
}

/* --------- sacola --------- */
.passo__cab { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.passo__cab h2 { font-size: 20px; }
.volta {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borda); background: #fff;
  font-size: 18px; flex: none;
}
.carrinho { list-style: none; display: flex; flex-direction: column; }
.c-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 13px 0; border-bottom: 1px solid var(--borda); }
.c-item:last-child { border-bottom: 0; }
.c-item__nome { font-weight: 600; font-size: 14.5px; }
.c-item__det { grid-column: 1; color: var(--suave); font-size: 12.5px; }
.c-item__preco { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; text-align: right; }
.c-item__acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.c-item__acoes .qtd { padding: 2px; }
.c-item__acoes .qtd button { width: 38px; height: 38px; font-size: 17px; }
.c-item__acoes .qtd span { min-width: 26px; font-size: 14px; }
.c-item__rm {
  background: none; border: 0; color: var(--erro);
  font-size: 13.5px; font-weight: 600; text-decoration: underline;
  padding: 12px 10px; min-height: 44px; margin-left: auto;
}
.sacola-vazia { text-align: center; color: var(--suave); padding: 30px 0; }
.add-mais { display: inline-block; margin-top: 14px; color: var(--laranja-escuro); font-weight: 700; font-size: 14px; text-decoration: none; }
.linha-total { display: flex; justify-content: space-between; font-size: 15px; }
.linha-total strong { font-size: 17px; }

/* --------- chat de bebida --------- */
.chat { margin-top: 16px; animation: chat-entra .35s ease; }
@keyframes chat-entra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat__balao {
  background: var(--bg-2);
  border-radius: 16px;
  padding: 13px 14px 11px;
}
.chat__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chat__avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--laranja), var(--laranja-escuro));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(232, 93, 26, .35);
}
.chat__avatar svg { width: 19px; height: 19px; fill: currentColor; }
.chat__cab strong { font-family: var(--f-titulo); font-size: 14.5px; }
.chat__balao > p { font-size: 13px; color: var(--suave); }
/* sugestões empilhadas — cada bebida em sua linha, texto inteiro visível (não corta) */
.chat__sugestoes { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.chat__sug {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--borda);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13.5px; font-weight: 600;
}
.chat__sug::after { content: "+"; color: var(--laranja); font-size: 17px; font-weight: 700; }
.chat__sug:hover { border-color: var(--laranja); color: var(--laranja-escuro); }
.chat__nao { background: none; border: 0; color: var(--suave); font-size: 13px; margin-top: 8px; text-decoration: underline; padding: 8px 10px 4px 0; }

/* --------- entrega --------- */
.modo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.modo__b {
  border: 1.5px solid var(--borda); border-radius: 14px;
  background: #fff; padding: 13px;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  transition: all .15s;
}
.modo__b strong { font-size: 15px; }
.modo__b span { font-size: 12px; color: var(--suave); }
.modo__b.ativo { border-color: var(--laranja); background: rgba(232, 93, 26, .06); box-shadow: 0 0 0 1px var(--laranja); }
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo label small { color: var(--fraco); font-weight: 500; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-local {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(31, 59, 170, .08); color: var(--azul);
  border: 1.5px dashed rgba(31, 59, 170, .4); border-radius: 12px;
  padding: 12px; font-weight: 700; font-size: 14px;
  margin-bottom: 14px;
}
.btn-local svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-local__msg { font-size: 12.5px; color: var(--suave); margin: -6px 0 12px; }
.erro { color: var(--erro); font-size: 13.5px; font-weight: 600; margin-top: 4px; }

/* --------- pagamento --------- */
.pags { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pag {
  border: 1.5px solid var(--borda); border-radius: 14px;
  background: #fff; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  transition: all .15s;
}
.pag strong { font-size: 15px; }
.pag span { font-size: 12.5px; color: var(--suave); }
.pag.ativo { border-color: var(--laranja); background: rgba(232, 93, 26, .06); box-shadow: 0 0 0 1px var(--laranja); }
.resumo {
  background: var(--bg-2); border-radius: 14px;
  padding: 14px 16px; font-size: 13.5px;
  display: flex; flex-direction: column; gap: 6px;
}
.resumo .r-linha { display: flex; justify-content: space-between; gap: 12px; }
.resumo .r-linha span:first-child { color: var(--suave); }
.resumo .r-divisor { border-top: 1px dashed rgba(36, 28, 22, .2); margin: 4px 0; }

/* --------- pronto --------- */
.pronto { text-align: center; padding-bottom: 26px; }
.pronto__selo {
  width: 74px; height: 74px; margin: 14px auto 14px;
  border-radius: 50%;
  background: rgba(31, 165, 83, .12);
  display: grid; place-items: center;
  animation: pop .4s ease;
}
@keyframes pop { 0% { transform: scale(.5); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pronto__selo svg { width: 36px; height: 36px; stroke: var(--verde); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pronto h2 { font-size: 23px; }
.pronto__cod { color: var(--suave); font-size: 14px; margin-top: 4px; }
.pronto__cod strong { color: var(--texto); letter-spacing: 1px; }
.pix-box {
  margin: 18px auto 0; max-width: 320px;
  background: var(--bg-2); border-radius: 18px;
  padding: 18px;
}
.pix-box h3 { font-size: 16px; }
.pix-box > p { font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.pix-qr { background: #fff; border-radius: 14px; padding: 12px; margin: 12px auto; width: fit-content; box-shadow: var(--sombra); }
.pix-qr svg { display: block; width: 200px; height: 200px; }
.pix-valor { font-size: 14px; margin-bottom: 10px; }
.pix-dica { font-size: 12px; color: var(--suave); margin-top: 10px; }
.btn-whats {
  margin: 18px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 360px;
  background: #25D366; color: #fff;
  border: 0; border-radius: 14px;
  padding: 16px;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .55);
}
.btn-whats svg { width: 22px; height: 22px; fill: currentColor; }
.pronto__dica { font-size: 12.5px; color: var(--suave); margin-top: 10px; }
#btn-novo { margin-top: 16px; }

/* --------- toast --------- */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 90;
  background: var(--texto); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--sombra);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
  max-width: calc(100% - 40px);
  text-align: center;
}
.toast.show { opacity: 1; }