/* Peças das telas do cliente que valem para TODAS as lojas.

   Loja com visual próprio (lojas/<apelido>/static/css/cliente.css) troca o
   cliente.css padrão inteiro — e ficava sem o que foi criado depois dele: a
   busca aparecia crua, o "esgotado" e o preço riscado da oferta sem estilo.
   Este arquivo vem sempre junto, nas duas: aqui só entra componente. Cor e
   fonte continuam vindo do visual de cada loja (as mesmas variáveis). */

/* ------------------------------------------------ cardápio (já existiam) */
/* Item que o cliente abriu a partir de um anúncio da Vitrine. */
.item-chegou{animation:item-chegou 2.6s ease}
@keyframes item-chegou{0%,60%{box-shadow:0 0 0 3px var(--cor-marca,#1E6BE1);border-radius:16px}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.item-chegou{animation:none;outline:3px solid var(--cor-marca,#1E6BE1)}}
/* Preço cheio riscado quando o item está em oferta relâmpago. */
.preco-de{font-weight:500;opacity:.6;margin-right:4px}

/* Varejo: tamanho/cor, peso e esgotado */
.escolha-variante{margin-top:8px;font:inherit;font-size:.9rem;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--cor-borda,var(--crosta,#ddd));background:var(--cor-fundo,#fff);color:inherit;
  max-width:100%;width:100%}
.escolha-variante.pede-escolha{border-color:#D93A1E;box-shadow:0 0 0 3px rgba(217,58,30,.18)}
.por-kg{font-style:normal;font-size:.82em;opacity:.8;margin-left:2px}
.linha-preco .esgotado{font-style:normal;font-size:.78rem;font-weight:700;color:#B3301A;margin-left:8px;
  background:#FDECE9;padding:2px 10px;border-radius:999px}

/* Busca (catálogo grande: mercado, loja de roupa, cardápio comprido) */
.busca-cardapio{padding:18px 0 2px}
.busca-cardapio input{
  width:100%;font:inherit;font-size:1rem;color:inherit;
  padding:13px 18px 13px 48px;border-radius:999px;
  border:1.5px solid var(--cor-borda,var(--crosta,#ddd));
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A50' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 18px 50%;
  background-size:19px;-webkit-appearance:none;appearance:none;
}
.busca-cardapio input:focus{outline:none;border-color:var(--carvao,#2A201B);box-shadow:0 0 0 3px rgba(42,32,27,.08)}
.busca-cardapio input::placeholder{color:var(--texto-fraco,#6B5A50);opacity:.85}
.busca-vazia{text-align:center;opacity:.75;padding:20px 0}

/* Item com texto comprido não estica a coluna da grade no celular. */
.lista > li{min-width:0}
.linha-texto{min-width:0}
.pix-demo{background:#FFF4E0;border:1.5px dashed #E3B45C;color:#7A4D05;border-radius:18px;padding:12px 16px;
  margin:0 0 12px;font-size:.92rem;line-height:1.45}
/* Cardápio ainda sem produtos (loja que acabou de nascer). */
.cardapio-vazio{background:var(--cartao,#fff);border:1px solid var(--linha,var(--crosta,#eadfd6));border-radius:22px;
  padding:36px 24px;text-align:center;margin:8px auto 0;max-width:560px;display:grid;gap:12px;justify-items:center}
.cardapio-vazio h2{margin:0;font-size:1.3rem}
.cardapio-vazio p{margin:0;color:var(--texto-fraco);line-height:1.5}
.cardapio-vazio .botao{margin-top:6px}
.cardapio-vazio .botao-principal{flex:none;display:inline-flex;text-decoration:none;padding:13px 28px}

/* ------------------------------------------------ campos e botões */
.campo select{
  width:100%;border:1.5px solid var(--crosta,#ddd);border-radius:var(--raio,999px);
  padding:13px 44px 13px 18px;font-size:1rem;font-family:inherit;color:inherit;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size:18px;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.campo select:focus{border-color:var(--carvao,#2A201B);outline:none}
.botao-contorno{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--carvao,#2A201B);background:#fff;color:var(--carvao,#2A201B);
  border-radius:var(--raio,999px);padding:13px 22px;font:inherit;font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;line-height:1.2;text-align:center;
}
.botao-contorno:active{background:var(--carvao,#2A201B);color:#FFFBF4}
.botao-contorno svg{flex:none}
.botao-contorno.perigo{border-color:#E2B3A6;color:#9B2C12}
.botao-contorno.perigo:active{background:#9B2C12;color:#fff}
a.botao-principal{text-decoration:none;align-items:center}

/* ------------------------------------------------ sacola */
/* Recado dentro da sacola: casa fechada, itens que saíram do cardápio. */
.aviso-sacola{
  border-radius:18px;padding:12px 16px;margin:14px 0 4px;font-size:.92rem;line-height:1.45;
  background:#FFF4E0;border:1px solid #F0D19A;color:#6B4406;
}
.aviso-sacola b{display:block;font-size:.98rem}
.aviso-sacola.fechada{background:#FBEAE5;border-color:#EDC3B6;color:#7E2A12}
/* "Usamos os dados do seu último pedido — Não é você?" */
.dados-lembrados{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:space-between;
  font-size:.86rem;color:var(--texto-fraco,#6B5A50);margin:18px 0 -6px;
  background:var(--superficie,#FFF2E2);border-radius:14px;padding:10px 14px;
}
.dados-lembrados button{
  background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brasa,#C7351F);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.taxa-bairro{font-weight:700;color:var(--texto,#2A201B)}
.botao-principal.fechado-agora{background:var(--texto-fraco,#6B5A50)}

/* ------------------------------------------------ acompanhar o pedido */
.previsao{
  display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 16px;
  background:#fff;border:1px solid var(--crosta,#EBDCC8);border-radius:18px;font-size:.93rem;
}
.previsao svg{flex:none;color:var(--brasa,#C7351F)}
.acoes-cliente{display:grid;gap:10px;margin:22px 0 0}
@media (min-width:520px){.acoes-cliente{grid-template-columns:1fr 1fr}}
.acoes-cliente .botao-principal{flex:none}
.acoes-cliente .largo-todo{grid-column:1/-1}

/* ------------------------------------------------ horário marcado */
.codigo-rotulo{display:block;font-size:.86rem;font-weight:700;color:var(--texto-fraco,#6B5A50);margin:0 0 8px}
.agendado h1{margin-top:14px}
.agendado .dia-extenso{display:block;font-size:1rem;font-weight:600;color:var(--texto-fraco,#6B5A50);margin-bottom:2px}
/* "Segunda-feira", não "Segunda-Feira" (o capitalize sobe a letra depois do hífen). */
.agendado .dia-extenso::first-letter{text-transform:uppercase}
.agendado .trilha{margin:26px 0}
.agendado .resumo li b{font-weight:600}
.agendado .resumo li span:last-child{text-align:right}
.aviso-agenda{border-radius:18px;padding:12px 16px;margin:18px 0 0;font-size:.93rem;
  background:#FBEAE5;border:1px solid #EDC3B6;color:#7E2A12}
.desmarcar{margin-top:18px}
.desmarcar .botao-contorno{width:100%}
.outro-horario{display:block;text-align:center;margin-top:22px;font-weight:700;color:var(--brasa,#C7351F)}

/* ------------------------------------------------ foto de capa
   O véu escuro vai POR CIMA da foto. Antes ele ficava por baixo (a foto vinha
   depois no HTML e cobria o véu), e em foto clara o título e o texto quase
   sumiam. Vale também para as lojas de visual próprio. */
.capa-com-foto .capa-foto{z-index:0;opacity:1}
.capa-com-foto::before{z-index:1;
  background:linear-gradient(180deg,rgba(12,8,6,.46) 0%,rgba(12,8,6,.58) 55%,rgba(12,8,6,.74) 100%)}
.capa-com-foto .capa-mascote{z-index:1}
.capa-com-foto .capa-interna{z-index:2}
.capa-com-foto h1,.capa-com-foto .capa-info,.capa-com-foto .volta{text-shadow:0 1px 14px rgba(0,0,0,.4)}

/* Lista de escolha (tamanho, cor) com texto comprido termina em "…". */
select{text-overflow:ellipsis}