/* 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)}
/* (v107) Por que a taxa é essa: embaixo do bairro, o valor do bairro da lista
   ou a conta da distância ("6,2 km × R$ 2,00 por km") com o endereço que o
   mapa achou; nos totais, a mesma conta embaixo do valor da taxa. */
.nota-taxa{
  display:grid;gap:3px;margin:-6px 0 16px;padding:12px 16px;border-radius:18px;
  background:var(--superficie,#FFF2E2);border:1px solid var(--crosta,#EBDCC8);
  font-size:.9rem;line-height:1.45;color:var(--texto,#2A201B);
}
.nota-taxa b{font-size:1rem}
.nota-taxa small{font-size:.76rem;color:var(--texto-fraco,#6B5A50)}
.nota-taxa.calculando{color:var(--texto-fraco,#6B5A50)}
.nota-taxa.erro{background:#FBEAE5;border-color:#EDC3B6;color:#7E2A12}
.nota-taxa[hidden]{display:none}
/* O bairro é escrito: as sugestões aparecem enquanto digita, sem a setinha de lista. */
#campoBairro::-webkit-calendar-picker-indicator{display:none!important}
.nota-taxa .nota-sugestao{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;
  color:var(--texto,#2A201B)}
.nota-sugestao button{border:1.5px solid var(--brasa,#C7351F);background:#fff;color:var(--brasa,#C7351F);
  border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.totais > .totais-conta{
  display:block;margin-top:-4px;padding:0 0 6px;text-align:right;
  font-size:.8rem;color:var(--texto-fraco,#6B5A50);
}
.totais > .totais-conta[hidden]{display:none}
/* O valor de cada linha do pedido não quebra ("R$" numa linha e "69,99" na outra). */
.resumo li > .valor{white-space:nowrap;flex:none}
.botao-principal.fechado-agora{background:var(--texto-fraco,#6B5A50)}

/* Contador da sacola e da linha do produto: o − e o + desenhados, no centro
   exato do botão; com uma unidade, o "tirar" vira a lixeira, na cor da marca. */
.contador button{display:inline-grid;place-items:center;min-width:28px;min-height:28px;color:inherit}
.contador button svg{display:block}
.contador .tirar-item{color:var(--brasa,#C7351F)}

/* ------------------------------------------------ Pix na sacola
   QR com o título ao lado; embaixo, em largura toda, a chave inteira numa
   pílula (toque copia) e o botão do copia e cola. No computador o QR é
   grande (o cliente lê com o celular) e a chave e o botão ficam ao lado
   dele; no celular o QR encolhe e nada sobra embaixo dele. */
.pix{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;
  background:#fff;border:1px solid var(--crosta,#EBDCC8);border-radius:22px;padding:16px;margin-top:14px;
}
.pix[hidden]{display:none}
.pix > *{grid-column:1 / -1;min-width:0}
.pix-qr{grid-column:1;justify-self:start;line-height:0;border:1px solid var(--crosta,#EBDCC8);border-radius:16px;
  padding:6px;background:#fff}
.pix-qr svg{width:172px;height:172px;display:block}
.pix-qr + .pix-cabeca{grid-column:2}
.pix-cabeca b{display:block;font-size:1.02rem;line-height:1.3}
.pix-cabeca p{margin:4px 0 0;font-size:.86rem;line-height:1.45;color:var(--texto-fraco,#6B5A50)}
.pix-no-celular{display:none}
@media (hover:none) and (pointer:coarse){.pix-no-pc{display:none}.pix-no-celular{display:block}}
.pix-campo{margin-top:14px}
.pix-rotulo{display:block;font-weight:600;font-size:.86rem;margin:0 0 6px}
.pix-chave{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;
  border:1.5px solid var(--crosta,#EBDCC8);border-radius:var(--raio,999px);background:var(--massa,#FFFBF4);
  padding:10px 16px 10px 20px;font:inherit;color:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:text;user-select:text;
}
.pix-chave:hover,.pix-chave.copiada{border-color:var(--carvao,#2A201B)}
.pix-chave:focus-visible,.botao-copiar:focus-visible{outline:2px solid var(--carvao,#2A201B);outline-offset:2px}
.pix-chave-valor{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-weight:700;font-size:1.05rem;
  line-height:1.3;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pix-chave-valor.pix-chave-quebra{white-space:normal;overflow-wrap:anywhere}
.pix-chave svg,.botao-copiar svg{flex:none;display:block}
.pix-chave svg{color:var(--texto-fraco,#6B5A50)}
.pix-chave .ic-certo,.botao-copiar .ic-certo{display:none}
.pix-chave.copiada .ic-copiar,.botao-copiar.copiada .ic-copiar{display:none}
.pix-chave.copiada .ic-certo,.botao-copiar.copiada .ic-certo{display:block}
.pix-chave.copiada svg{color:var(--carvao,#2A201B)}
.pix-titular{display:block;color:var(--texto-fraco,#6B5A50);font-size:.8rem;line-height:1.35;margin:6px 0 0 20px}
#pixCopiaCola{
  width:100%;margin-top:12px;height:72px;resize:none;font-size:.72rem;
  border:1.5px solid var(--crosta,#EBDCC8);border-radius:18px;padding:10px 16px;
  font-family:ui-monospace,monospace;color:var(--texto-fraco,#6B5A50);background:#fff;
}
#pixCopiaCola[hidden]{display:none}
.botao-copiar{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:12px;
  border:1.5px solid var(--carvao,#2A201B);background:#fff;color:var(--carvao,#2A201B);
  border-radius:var(--raio,999px);padding:11px 20px;font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.botao-copiar:active{background:var(--carvao,#2A201B);color:#FFFBF4}
.pix-nota{margin:10px 0 0;text-align:center;font-size:.8rem;line-height:1.4;color:var(--texto-fraco,#6B5A50)}
/* Computador (sacola larga): QR à esquerda, título, chave e botão ao lado. */
@media (min-width:600px){
  .pix:not(.pix-sem-qr){row-gap:0}
  .pix-qr{grid-row:1 / span 3}
  .pix-qr ~ .pix-campo,.pix-qr ~ .botao-copiar{grid-column:2}
  .pix-qr ~ .pix-campo{margin-top:12px}
}
/* Celular: QR menor, com o título ao lado; o resto em largura toda. */
@media (max-width:599px){
  .pix{padding:14px;column-gap:14px}
  .pix-qr{padding:5px;border-radius:14px}
  .pix-qr svg{width:clamp(96px,31vw,132px);height:clamp(96px,31vw,132px)}
}

/* ------------------------------------------------ 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}

/* ===================================================== (v111) todo o Brasil
   A sacola da loja que vende para todo o Brasil: o selo do envio, o CEP com
   o endereço achado, as opções de frete (pílulas com a data de chegada) e,
   no acompanhamento, a caixa do código de rastreio. */
.selo-brasil{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 16px;border-radius:18px;
  background:var(--superficie,#FFF2E2);font-size:.9rem;line-height:1.4}
.selo-brasil svg{flex:0 0 auto;color:var(--brasa,#C7351F)}
.selo-brasil b{font-weight:800}
.falta-gratis{margin:8px 0 0;font-size:.84rem;color:var(--texto-fraco,#6B5A50);font-weight:600}
.cep-achado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 10px;padding-left:4px;
  font-size:.9rem;color:var(--texto-fraco,#6B5A50)}
.cep-achado b{color:var(--texto,#2A201B)}
.cep-pino{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brasa,#C7351F);
  flex:0 0 auto;margin-right:2px}
.cep-corrigir{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--brasa,#C7351F);
  text-decoration:underline;cursor:pointer}
.fretes{display:grid;gap:10px}
.fretes-vazio{margin:0;padding:12px 16px;border-radius:18px;background:var(--superficie,#FFF2E2);font-size:.88rem;
  color:var(--texto-fraco,#6B5A50)}
.fretes-vazio.erro{background:#FBEAE5;color:#7E2A12}
.frete-opcao{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1.5px solid var(--crosta,#EBDCC8);background:#fff;border-radius:999px;padding:12px 20px}
.frete-opcao.ativa{border-color:var(--brasa,#C7351F);background:color-mix(in srgb, var(--brasa,#C7351F) 7%, #fff)}
.frete-bola{width:20px;height:20px;border-radius:50%;border:2px solid var(--crosta,#EBDCC8);flex:0 0 auto;background:#fff}
.frete-opcao.ativa .frete-bola{border:6px solid var(--brasa,#C7351F)}
.frete-texto{flex:1 1 auto;min-width:0}
.frete-texto b{display:block;font-size:.96rem}
.frete-texto small{display:block;font-size:.82rem;color:var(--texto-fraco,#6B5A50)}
.frete-valor{font-weight:800;white-space:nowrap}
.frete-valor.gratis{color:var(--manjericao,#177A52)}
/* O acompanhamento: o código de rastreio e os dois botões, do mesmo tamanho. */
.rastreio-caixa{border:1.5px solid var(--crosta,#EBDCC8);border-radius:22px;padding:16px 18px;margin:12px 0 4px;
  background:#fff;max-width:420px}
.rastreio-caixa small{display:block;font-size:.8rem;color:var(--texto-fraco,#6B5A50)}
.rastreio-codigo{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.04em;margin:2px 0 12px;
  color:var(--texto,#2A201B)}
.rastreio-botoes{display:grid;gap:8px}
.rastreio-botoes .botao-principal,.rastreio-botoes .botao-contorno{width:100%;justify-content:center;text-align:center}