/* ==========================================================================
   PedeJa — área do cliente (mobile-first)
   Base visual inspirada na leitura de cardápio do iFood: cartão horizontal,
   chips de categoria fixos e ficha do produto em bottom sheet.
   ========================================================================== */

:root {
  --marca: #ea1d2c;
  --tinta: #1f2937;
  --tinta-fraca: #6b7280;
  --linha: #ececec;
  --fundo: #f7f7f8;
  --raio: 12px;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  padding-bottom: 84px;               /* espaço da barra do carrinho */
}

.container-loja { max-width: 720px; margin: 0 auto; background: #fff; min-height: 100vh; }

/* ------------------------------------------------------------------- Capa */
.capa {
  height: 132px;
  background: linear-gradient(135deg, var(--marca), rgba(0,0,0,.65));
  background-size: cover;
  background-position: center;
  position: relative;
}
.capa .voltar {
  position: absolute; top: 12px; left: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  display: grid; place-items: center; text-decoration: none;
}

.cabecalho-loja { padding: 0 16px 12px; position: relative; }
.logo-loja {
  width: 72px; height: 72px; border-radius: 16px;
  border: 3px solid #fff; background: #fff;
  object-fit: cover; margin-top: -36px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 800; color: var(--marca);
}
.nome-loja { font-size: 1.25rem; font-weight: 800; margin: 8px 0 2px; line-height: 1.2; }
.meta-loja { font-size: .82rem; color: var(--tinta-fraca); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.meta-loja .ponto::before { content: "•"; margin-right: 10px; }

.status-loja { font-size: .78rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; }
.status-aberta { background: #dcfce7; color: #166534; }
.status-fechada { background: #fee2e2; color: #991b1b; }

.aviso-fechada {
  background: #fff7ed; color: #9a3412; border-top: 1px solid #fed7aa; border-bottom: 1px solid #fed7aa;
  padding: .6rem 1rem; font-size: .85rem; display: flex; gap: .5rem; align-items: center;
}

/* ------------------------------------------------------------------ Busca */
.barra-busca { padding: 10px 16px; }
.barra-busca input {
  border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha);
  padding-left: 38px; height: 42px; font-size: .9rem;
}
.barra-busca .bi-search { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: var(--tinta-fraca); }

/* --------------------------------------------------------------- Categorias */
.chips {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid var(--linha);
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  border-radius: 999px; padding: .38rem .85rem; font-size: .84rem; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.chip.ativo { background: var(--marca); border-color: var(--marca); color: #fff; }

/* ----------------------------------------------------------------- Produtos */
.secao-categoria { padding: 18px 16px 4px; }
.secao-categoria h2 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.secao-categoria p { font-size: .82rem; color: var(--tinta-fraca); margin: 2px 0 0; }

.cartao-produto {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--linha);
  cursor: pointer; background: #fff; width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0;
}
.cartao-produto:active { background: #fafafa; }
.cartao-produto .info { flex: 1; min-width: 0; }
.cartao-produto .nome { font-weight: 700; font-size: .95rem; margin-bottom: 2px; }
.cartao-produto .descricao {
  font-size: .82rem; color: var(--tinta-fraca); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao-produto .preco { font-size: .92rem; font-weight: 700; margin-top: 6px; }
.cartao-produto .preco .antigo { color: var(--tinta-fraca); text-decoration: line-through; font-weight: 500; font-size: .82rem; margin-right: 6px; }
.cartao-produto .preco .promo { color: #15803d; }
.cartao-produto img, .cartao-produto .sem-foto {
  width: 88px; height: 88px; border-radius: 10px; object-fit: cover; flex: none; background: var(--fundo);
  display: grid; place-items: center; color: #c9c9c9;
}
.cartao-produto.indisponivel { opacity: .55; }
.cartao-produto.indisponivel .nome { text-decoration: line-through; }

.selo-produto {
  display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .4rem; border-radius: 4px; margin-bottom: 4px;
}
.selo-promo { background: #dcfce7; color: #15803d; }
.selo-esgotado { background: #f3f4f6; color: #6b7280; }
.selo-destaque { background: #fef3c7; color: #92400e; }

/* -------------------------------------------------------- Ficha do produto */
.ficha .modal-dialog { margin: 0; max-width: 720px; }
@media (min-width: 721px) { .ficha .modal-dialog { margin: 1.75rem auto; } }
.ficha .modal-content { border: 0; border-radius: 16px 16px 0 0; min-height: 60vh; }
@media (min-width: 721px) { .ficha .modal-content { border-radius: 16px; } }
.ficha .modal-body { padding: 0; }
.ficha-imagem { width: 100%; max-height: 240px; object-fit: cover; }
.ficha-topo { padding: 16px; }
.ficha-topo h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; }
.ficha-topo .descricao { color: var(--tinta-fraca); font-size: .88rem; line-height: 1.45; }

.grupo-opcoes { border-top: 8px solid var(--fundo); }
.grupo-cabecalho {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 16px; background: #fff; position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--linha);
}
.grupo-cabecalho .titulo { font-weight: 700; font-size: .92rem; }
.grupo-cabecalho .ajuda { font-size: .76rem; color: var(--tinta-fraca); }
.etiqueta-obrigatorio {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  background: #4b5563; color: #fff; padding: .15rem .4rem; border-radius: 4px;
}
.grupo-opcoes.pendente .grupo-cabecalho { background: #fef2f2; }
.grupo-opcoes.pendente .etiqueta-obrigatorio { background: var(--marca); }

.linha-opcao {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linha);
}
.linha-opcao .nome { flex: 1; font-size: .9rem; }
.linha-opcao .valor { font-size: .85rem; color: #15803d; font-weight: 600; white-space: nowrap; }
.linha-opcao.esgotada { opacity: .5; }

.contador { display: flex; align-items: center; gap: 10px; }
.contador button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha);
  background: #fff; color: var(--marca); font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.contador button:disabled { color: #d1d5db; }
.contador .qtd { min-width: 18px; text-align: center; font-weight: 700; }

.ficha-rodape {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--linha);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 12px; align-items: center;
}
/* O Bootstrap 5.3 pinta o botao por variaveis (--bs-btn-*). Se a gente definir
   so `background`, no :hover ele aplica `var(--bs-btn-hover-bg)` — que nao
   existe — e o fundo some, deixando o botao branco. Por isso preenchemos as
   variaveis em vez de sobrescrever as propriedades. */
.btn-marca {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--marca);
  --bs-btn-border-color: var(--marca);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--marca);
  --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--marca);
  --bs-btn-active-border-color: var(--marca);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--marca);
  --bs-btn-disabled-border-color: var(--marca);
  --bs-btn-disabled-opacity: .5;
  border-radius: 8px;
  font-weight: 700;
  padding: .7rem 1rem;
}
/* O escurecimento vem de filtro, e nao de uma cor fixa: a marca muda por loja */
.btn-marca:hover:not(:disabled)  { filter: brightness(.92); }
.btn-marca:active:not(:disabled) { filter: brightness(.86); }

/* ------------------------------------------------------- Barra do carrinho */
.barra-carrinho {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--linha);
  backdrop-filter: blur(6px);
}
.barra-carrinho .btn {
  width: 100%; max-width: 700px; margin: 0 auto; display: flex;
  justify-content: space-between; align-items: center; gap: 10px;
}

/* ------------------------------------------------------ Carrinho / checkout */
.bloco { background: #fff; border-bottom: 8px solid var(--fundo); padding: 16px; }
.bloco h2 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.item-carrinho { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item-carrinho:last-child { border-bottom: 0; }
.item-carrinho .qtd-badge {
  background: var(--fundo); border-radius: 6px; padding: .1rem .45rem;
  font-weight: 700; font-size: .8rem; height: fit-content;
}
.item-carrinho .complementos { font-size: .78rem; color: var(--tinta-fraca); line-height: 1.4; }
.resumo-linha { display: flex; justify-content: space-between; font-size: .9rem; padding: 4px 0; }
.resumo-linha.total { font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 10px; }

.opcao-radio {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 8px; cursor: pointer;
}
.opcao-radio.selecionada { border-color: var(--marca); background: #fff5f5; }

/* --------------------------------------------------------- Acompanhamento */
.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { display: flex; gap: 12px; padding-bottom: 20px; position: relative; }
.linha-tempo li::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--linha);
}
.linha-tempo li:last-child::before { display: none; }
.linha-tempo .marcador {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--fundo); color: #9ca3af; font-size: .9rem;
}
.linha-tempo li.feito .marcador { background: #dcfce7; color: #166534; }
.linha-tempo li.atual .marcador { background: var(--marca); color: #fff; animation: bate 1.4s ease-in-out infinite; }
.linha-tempo .rotulo { font-weight: 700; font-size: .92rem; }
.linha-tempo .quando { font-size: .78rem; color: var(--tinta-fraca); }
@keyframes bate { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------------------------------------------------------------- Estrelas */
.estrelas { display: flex; gap: 6px; direction: rtl; justify-content: center; }
.estrelas input { display: none; }
.estrelas label { font-size: 2.1rem; color: #e5e7eb; cursor: pointer; line-height: 1; }
.estrelas input:checked ~ label, .estrelas label:hover, .estrelas label:hover ~ label { color: #f59e0b; }

/* ----------------------------------------------------------------- Diversos */
.rodape-marca { text-align: center; font-size: .76rem; color: var(--tinta-fraca); padding: 16px 12px 90px; }
.vazio-loja { text-align: center; padding: 3rem 1.5rem; color: var(--tinta-fraca); }
.texto-marca { color: var(--marca); }
.link-limpo { color: var(--marca); text-decoration: none; font-weight: 600; }

/* Selos de status usados no histórico do cliente */
.selo { font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; display: inline-block; }
.selo-aguardando   { background: #fef3c7; color: #92400e; }
.selo-aceito       { background: #dbeafe; color: #1e40af; }
.selo-em_preparo   { background: #e0e7ff; color: #3730a3; }
.selo-pronto       { background: #cffafe; color: #155e75; }
.selo-saiu_entrega { background: #ede9fe; color: #5b21b6; }
.selo-entregue     { background: #dcfce7; color: #166534; }
.selo-cancelado, .selo-recusado { background: #fee2e2; color: #991b1b; }