@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --creme: #faf3e6;
  --creme-2: #fffaf1;
  --creme-3: #f2e6d1;
  --vinho: #7a1f2b;
  --vinho-2: #9c2a3a;
  --dourado: #c99a3f;
  --texto: #2b1b12;
  --texto-fraco: #7a6a5c;
  --erro: #c23b3b;
  --sucesso: #2f9e52;
  --atencao: #b8790f;
  --borda: #e8d9c3;
  --raio: 16px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--creme);
  color: var(--texto);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--vinho); color: #fff; }
a { color: var(--vinho); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.marca {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px max(20px, var(--safe-r)) 14px max(20px, var(--safe-l));
  border-bottom: 1px solid var(--borda);
  background: rgba(250, 243, 230, 0.9);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--vinho); }
.topbar .brand img { height: 38px; width: 38px; object-fit: cover; border-radius: 50%; border: 2px solid var(--dourado); }

.container { max-width: 640px; margin: 0 auto; padding: 0 max(16px, var(--safe-r)) 40px max(16px, var(--safe-l)); }
.container.wide { max-width: 1000px; }

.frase-do-dia {
  margin: 20px max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--vinho), var(--vinho-2));
  color: #fff8ec;
  border-radius: var(--raio);
  text-align: center;
  box-shadow: 0 10px 30px rgba(122, 31, 43, 0.25);
}
.frase-do-dia .texto { font-size: 1.02rem; font-style: italic; line-height: 1.5; }
.frase-do-dia .referencia { margin-top: 8px; font-size: 0.85rem; color: var(--dourado); font-weight: 700; letter-spacing: 0.3px; }

.card {
  background: var(--creme-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: 0 8px 24px rgba(122, 31, 43, 0.06);
}

.grade-depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.depoimento-card { background: var(--creme-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: 0 8px 24px rgba(122, 31, 43, 0.06); }
.depoimento-estrelas { font-size: 0.95rem; margin-bottom: 8px; }
.depoimento-texto { font-style: italic; color: var(--texto); margin: 0 0 10px; }
.depoimento-nome { color: var(--dourado); font-weight: 700; margin: 0; font-size: 0.9rem; }

h1 { font-family: "Playfair Display", serif; font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 6px; color: var(--vinho); }
h2 { font-size: 1.2rem; margin: 22px 0 12px; color: var(--vinho); }
.subtitulo { color: var(--texto-fraco); margin: 0 0 20px; font-size: 0.98rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  min-height: 48px;
}
.btn:active { transform: scale(0.98); }
.btn-primario { background: linear-gradient(135deg, var(--vinho), var(--vinho-2)); color: #fff; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { filter: brightness(1.06); }
.btn-secundario { background: transparent; border: 2px solid var(--vinho); color: var(--vinho); }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.badge-sucesso { background: rgba(47, 158, 82, 0.15); color: var(--sucesso); }
.badge-atencao { background: rgba(184, 121, 15, 0.15); color: var(--atencao); }
.badge-erro { background: rgba(194, 59, 59, 0.15); color: var(--erro); }

label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.95rem; }
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--texto);
  font-size: 1rem;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--dourado); border-color: var(--dourado); }

.prato-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
}
.prato-card.selecionado { border-color: var(--vinho); box-shadow: 0 0 0 2px var(--vinho) inset; background: #fff6ee; }
.prato-card input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; transform: scale(1.3); }
.prato-card .nome { font-weight: 600; }
.prato-foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.prato-foto-vazia { display: flex; align-items: center; justify-content: center; background: var(--creme-3); font-size: 1.6rem; }

.hero-fotos-grid { display: flex; gap: 10px; overflow-x: auto; margin: 18px 0 4px; padding-bottom: 4px; scrollbar-width: none; }
.hero-fotos-grid::-webkit-scrollbar { display: none; }
.hero-fotos-grid img { width: 130px; height: 130px; object-fit: cover; border-radius: var(--raio); flex-shrink: 0; box-shadow: 0 8px 24px rgba(122, 31, 43, 0.15); }

.tipo-toggle { display: flex; gap: 10px; margin: 10px 0 18px; }
.tipo-toggle button {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid var(--borda);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}
.tipo-toggle button.ativo { border-color: var(--vinho); background: var(--vinho); color: #fff; }

.tamanho-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 18px; }
.tamanho-grid button {
  padding: 14px 8px;
  border-radius: 12px;
  border: 2px solid var(--borda);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}
.tamanho-grid button.ativo { border-color: var(--dourado); background: #fff6df; }
.tamanho-grid .preco { display: block; font-weight: 800; color: var(--vinho); margin-top: 4px; }

.lista-acompanhamentos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.lista-acompanhamentos span { background: var(--creme-3); padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; }

.kpi-card {
  background: var(--creme-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  text-align: center;
}
.kpi-card .valor { font-size: 1.9rem; font-weight: 800; color: var(--vinho); }
.kpi-card .valor.positivo { color: var(--sucesso); }
.kpi-card .rotulo { font-weight: 700; margin-top: 4px; }
.kpi-card .explicacao { color: var(--texto-fraco); font-size: 0.85rem; margin-top: 6px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }

.pedido-card { border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; background: #fff; }
.pedido-card .topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pedido-card .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pedido-card .acoes .btn { padding: 10px 14px; font-size: 0.9rem; min-height: 40px; }

/* Quebra em linhas em vez de rolar pro lado - numa tela de celular, uma
   barra que precisa arrastar esconde abas sem nenhuma pista visual (achado
   testando com captura de tela real em viewport de celular). Todas as
   abas ficam sempre visíveis, sem gesto nenhum necessário. */
.abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.abas button {
  flex: 1 1 30%;
  min-width: 104px;
  padding: 13px 10px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--texto-fraco);
  cursor: pointer;
  text-align: center;
}
.abas button.ativo { color: #fff; background: var(--vinho); border-color: var(--vinho); }

.toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; background: #fff; }

/* Card de prato/acompanhamento no admin: nome+tipo em cima, botoes de acao
   empilhados embaixo - nomes compridos nao espremem mais os botoes numa
   linha so. */
.item-prato { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.item-prato-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.item-prato-topo .nome { flex: 1; min-width: 140px; font-weight: 600; }
.item-prato-topo select { width: auto; margin: 0; padding: 6px 10px; font-size: 0.85rem; }
.item-prato-acoes { display: flex; flex-direction: column; gap: 8px; }
.item-prato-acoes .toggle-linha { display: flex; align-items: center; justify-content: space-between; }

.grupo-tipo { margin-bottom: 18px; }
.grupo-tipo:last-child { margin-bottom: 0; }
.grupo-tipo-titulo { margin: 0 0 10px; font-size: 1rem; color: var(--dourado); border-bottom: 1px solid var(--borda); padding-bottom: 6px; }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 999px; transition: 0.2s; }
.switch .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
.switch input:checked + .slider { background: var(--sucesso); }
.switch input:checked + .slider:before { transform: translateX(20px); }

.aviso { padding: 14px 16px; border-radius: 12px; background: var(--creme-3); color: var(--texto); font-size: 0.95rem; margin-bottom: 16px; }
.aviso.erro { background: rgba(194, 59, 59, 0.1); color: var(--erro); }
.aviso.sucesso { background: rgba(47, 158, 82, 0.1); color: var(--sucesso); }

.mensagem-vazio { text-align: center; padding: 40px 20px; color: var(--texto-fraco); }

.rodape { text-align: center; padding: 30px 16px; color: var(--texto-fraco); font-size: 0.85rem; }
.rodape a { color: var(--vinho); font-weight: 600; }

.qrcode-box { text-align: center; padding: 20px; }
.qrcode-box img { max-width: 260px; margin: 0 auto; border: 8px solid #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

.estrelas { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.estrelas button { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--borda); padding: 4px; line-height: 1; }
.estrelas button.ativa { color: var(--dourado); }

.carrinho-flutuante {
  position: sticky;
  bottom: 0;
  background: var(--creme-2);
  border-top: 1px solid var(--borda);
  padding: 14px max(16px, var(--safe-r)) max(14px, var(--safe-l));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}

@media (max-width: 600px) {
  .container { padding: 0 12px 32px; }
  .card { padding: 16px; }
  .kpi-card .valor { font-size: 1.6rem; }
}