/* =====================================================================
   JARDAN DELIVERY - estilo compartilhado

   Cores e fontes retiradas do material oficial da marca
   (_BRANDBOOK_Jardan.pdf e a pasta JARDAN - LOGOS - TEXTURAS - FONTES):
     verde   #00452A   verde claro #418646   creme #FCDEB6
     âmbar   #F39F31   terracota   #CE5456
   Tipografia: Rundeck nos títulos (a mesma do cardápio impresso),
   Circular Std no texto e Highway Gothic nas etiquetas em caixa alta.
   ===================================================================== */

@font-face {
  font-family: 'Circular Std';
  src: url('/publico/fontes/circular-book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular Std';
  src: url('/publico/fontes/circular-black.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rundeck';
  src: url('/publico/fontes/rundeck.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Highway Gothic';
  src: url('/publico/fontes/hwygoth.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --verde: #00452A;
  --verde-claro: #418646;
  --verde-fundo: #003620;
  --ambar: #F39F31;
  --ambar-escuro: #B9740F;
  --creme: #FDF5E7;
  --creme-2: #FCDEB6;
  --terracota: #CE5456;
  --tinta: #22261E;
  --tinta-2: #5B6255;
  --linha: rgba(0, 69, 42, 0.15);
  --branco: #FFFCF5;
  --fonte-texto: 'Circular Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Rundeck', Georgia, 'Times New Roman', serif;
  --fonte-etiqueta: 'Highway Gothic', 'Circular Std', system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(35, 40, 31, .06), 0 8px 24px rgba(35, 40, 31, .08);
  --sombra-alta: 0 12px 40px rgba(35, 40, 31, .18);
  --raio: 16px;
  --raio-g: 22px;
  --topo: env(safe-area-inset-top, 0px);
  --base: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, .display {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

/* etiquetas em caixa alta, como as seções do cardápio impresso */
.etiqueta-cardapio {
  font-family: var(--fonte-etiqueta);
  text-transform: uppercase;
  letter-spacing: .08em;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--verde); }

.envolucro { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 14px 22px;
  font-weight: 700; font-size: 16px; line-height: 1;
  background: var(--verde); color: #fff;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  min-height: 48px;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ambar { background: var(--ambar); color: #3A2A08; }
.btn-zap { background: #25D366; color: #08331B; }
.btn-vazio {
  background: transparent; color: var(--verde);
  box-shadow: inset 0 0 0 1.5px var(--linha);
}
.btn-perigo { background: var(--terracota); color: #fff; }
.btn-bloco { width: 100%; }
.btn-p { padding: 9px 14px; font-size: 14px; min-height: 38px; }

/* ------------------------------------------------------------ cartões e campos */
.cartao {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px;
}

label.campo { display: block; margin-bottom: 14px; }
label.campo > span {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--tinta-2); margin-bottom: 6px;
}
input[type=text], input[type=tel], input[type=number], input[type=password],
input[type=time], input[type=email], select, textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--linha); background: var(--branco);
  outline: none; transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--verde); }
textarea { resize: vertical; min-height: 76px; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.etiqueta-verde { background: rgba(27,107,74,.12); color: var(--verde); }
.etiqueta-ambar { background: rgba(232,163,61,.2); color: #8a5c05; }
.etiqueta-vermelha { background: rgba(194,84,63,.14); color: var(--terracota); }
.etiqueta-cinza { background: rgba(92,99,87,.12); color: var(--tinta-2); }

.vazio { text-align: center; padding: 48px 20px; color: var(--tinta-2); }
.vazio strong { display: block; font-size: 18px; color: var(--tinta); margin-bottom: 6px; }

/* ------------------------------------------------------------ faixa decorativa */
.faixa-flores {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--ambar) 0 26px, var(--terracota) 26px 52px,
      var(--verde-claro) 52px 78px, var(--creme-2) 78px 104px);
}

/* ------------------------------------------------------------ carregando */
.girando {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.aviso-erro {
  background: rgba(194,84,63,.1); color: var(--terracota);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600;
  margin-bottom: 12px;
}
.aviso-ok {
  background: rgba(27,107,74,.1); color: var(--verde);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------ modal */
.cortina {
  position: fixed; inset: 0; background: rgba(20,26,18,.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .18s ease;
  backdrop-filter: blur(2px);
}
.cortina.aberta { opacity: 1; pointer-events: auto; }
.folha {
  background: var(--creme); width: 100%; max-width: 640px;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(18px); transition: transform .18s ease;
  padding-bottom: var(--base);
}
.cortina.aberta .folha { transform: translateY(0); }
.folha-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; background: var(--creme); z-index: 2;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
.folha-corpo { overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.folha-base {
  padding: 12px 16px calc(12px + var(--base));
  border-top: 1px solid var(--linha); background: var(--creme);
}
.fechar-x {
  background: rgba(35,40,31,.07); border: 0; border-radius: 50%;
  width: 34px; height: 34px; font-size: 19px; line-height: 1; color: var(--tinta-2);
}

@media (min-width: 700px) {
  .cortina { align-items: center; }
  .folha { border-radius: var(--raio-g); max-height: 86vh; }
  .folha-topo { border-radius: var(--raio-g) var(--raio-g) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}