/* Tema laranja — simples e amigável (mobile-first, pedido feito no celular
   na porta de casa). Cor não é um espelho do PDV (que usa vermelho no
   próprio app.css) — é uma escolha nova só pro site.

   Design tokens (espaçamento/raio/sombra/transição) centralizados aqui em
   cima pra manter consistência entre as 4 telas (index, cadastro, painel,
   loja) sem repetir valor mágico espalhado pelo arquivo. */
:root {
  --laranja: #f97316;
  --laranja-escuro: #ea580c;
  --laranja-claro: #fff7ed;
  --laranja-suave: #ffedd5;
  --verde: #2f855a;
  --verde-claro: #f0fdf4;
  --vermelho: #c53030;
  --texto: #2c2013;
  --texto-suave: #78716c;
  --borda: #f0ddc7;
  --branco: #fff;

  --raio-sm: .5rem;
  --raio: .85rem;
  --raio-lg: 1.25rem;
  --sombra-sm: 0 1px 2px rgba(44, 32, 19, .06);
  --sombra: 0 2px 10px rgba(44, 32, 19, .08);
  --sombra-lg: 0 16px 36px -8px rgba(44, 32, 19, .22);
  --transicao: .15s ease;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--laranja-claro);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
::selection { background: var(--laranja-suave); color: var(--laranja-escuro); }
a, button, input, select { font-family: inherit; }
button { transition: background var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--laranja-escuro);
  outline-offset: 2px;
}
summary:focus-visible { outline: 2px solid var(--laranja-escuro); outline-offset: -2px; }

.topo {
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
  color: #fff;
  padding: 1.5rem 1.5rem 1.25rem;
}
.topo h1 { margin: .25rem 0; }
.topo .aviso { color: #ffe4c7; font-size: .85rem; margin: 0; }
.voltar { color: #ffe4c7; text-decoration: none; font-size: .85rem; font-weight: 600; }
.voltar:hover { text-decoration: underline; }

/* Cabeçalho da vitrine no estilo "app de pedidos": barra colorida com o
   nome da loja centralizado, parecido com o cardápio de referência
   (pedidos.pointdapizzasaocarlos.com.br/app). */
.topo-barra { display: flex; align-items: center; gap: .75rem; padding: .25rem 0; }
.topo-voltar {
  flex-shrink: 0;
  width: 1.5rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
  opacity: .9;
}
.topo-voltar:hover { opacity: 1; }
.topo-barra h1 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-espaco { flex-shrink: 0; width: 1.5rem; }

/* Abas fixas (Cardápio / Sacola), como a barra de navegação do app de
   referência -- em telas estreitas cada aba mostra um painel por vez,
   pra não obrigar rolar todos os produtos até achar o carrinho. */
.abas {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 5;
}
.aba {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .65rem .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
}
.aba-icone { font-size: 1.1rem; }
.aba.ativa { color: var(--laranja-escuro); border-bottom-color: var(--laranja); }
.aba:hover { color: var(--laranja-escuro); }
.badge {
  position: absolute;
  top: .35rem;
  right: 22%;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: var(--laranja-escuro);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

main { padding: 1.5rem; max-width: 960px; margin: 0 auto; }

/* --- Hero (index.html) --------------------------------------------------- */
.hero-topo { padding-bottom: 2rem; }
.hero-topo h1 { font-size: 1.7rem; margin: .35rem 0 .5rem; }
.hero-topo p { color: #ffe4c7; max-width: 40rem; margin: 0 0 1rem; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  color: var(--laranja-escuro) !important;
  font-weight: 700;
  text-decoration: none !important;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
}
.hero-cta:hover { transform: translateY(-1px); box-shadow: var(--sombra-lg); }
.hero-acoes { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.hero-login { color: #fff; font-weight: 700; text-decoration: none; font-size: .9rem; }
.hero-login:hover { text-decoration: underline; }

.secao-titulo { margin: 0 0 1rem; font-size: 1.05rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.grade-lojas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.card-loja {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.15rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-loja:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }
.icone-loja {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-loja-texto { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.card-loja h2 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-loja span { color: var(--laranja-escuro); font-size: .85rem; font-weight: 600; }

/* Estado vazio genérico (sem lojas, sem pedidos, ...) — ícone grande e
   texto discreto, centralizado, mesmo tratamento nas 3 telas que precisam. */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  color: var(--texto-suave);
  background: #fff;
  border: 1px dashed var(--borda);
  border-radius: var(--raio-lg);
  padding: 2.5rem 1.5rem;
}
.estado-vazio .estado-vazio-icone { font-size: 2rem; }
.estado-vazio strong { color: var(--texto); font-size: 1rem; }
.estado-vazio p { margin: 0; font-size: .9rem; max-width: 24rem; }

.layout-vitrine {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
/* Promoções fica numa 3ª aba, mas no desktop não faz sentido dividir a
   grade de 2 colunas em 3 -- ocupa a largura toda, numa linha própria
   abaixo de Cardápio+Sacola (é o último item, então o grid já quebra linha
   sozinho; isso só evita que ele fique espremido numa coluna só). */
#promocoes { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .layout-vitrine { grid-template-columns: 1fr; }
  /* Só uma aba (Cardápio, Promoções ou Sacola) por vez no celular -- o botão
     ativo em .abas controla qual painel aparece, ver ativarAba() em
     vitrine.js. #produtos e #promocoes precisam do par com ID porque
     `.lista-produtos` (display:flex, mesma especificidade de
     `.aba-conteudo`) vem depois no arquivo e venceria por ordem -- mesmo
     caso do #form-checkout.escondido abaixo. */
  .aba-conteudo { display: none; }
  #produtos.aba-conteudo, #promocoes.aba-conteudo { display: none; }
  #produtos.aba-visivel, #promocoes.aba-visivel { display: flex; }
  aside.aba-conteudo.aba-visivel { display: block; }
}

/* Cada categoria vira um cartão colapsável (<details>/<summary>), com a
   barra colorida imitando o cabeçalho de categoria do app de referência. */
.categoria {
  margin-bottom: 1rem;
  background: #fff;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.categoria-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: .8rem 1.1rem;
}
.categoria-titulo::-webkit-details-marker { display: none; }
.categoria-titulo::after { content: '−'; font-size: 1.2rem; font-weight: 400; }
.categoria:not([open]) .categoria-titulo::after { content: '+'; }

.lista-produtos { display: flex; flex-direction: column; gap: 1rem; }
.categoria-itens { display: flex; flex-direction: column; }
.produto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--borda);
  transition: background var(--transicao);
}
.produto:hover { background: var(--laranja-claro); }
.categoria-itens .produto:last-child { border-bottom: none; }
.produto.indisponivel { opacity: .55; }
.produto.indisponivel:hover { background: none; }
.produto-info { display: flex; flex-direction: column; gap: .15rem; }
.produto-info strong { color: var(--texto); }
.produto-info span { color: var(--verde); font-size: .9rem; font-weight: 700; }
.tag-indisponivel { font-size: .8rem; color: #a0aec0; }

.btn-add {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: var(--laranja);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-sm);
}
.btn-add:hover { background: var(--laranja-escuro); transform: scale(1.06); }
.btn-add:active { transform: scale(.96); }

/* Aba Promoções -- só exibição (ver comentário na tabela `promocoes` em
   site/db.js), cartão simples com o mesmo laranja claro do restante do site. */
.promocao {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: var(--laranja-claro);
  border: 1px solid #f6ad55;
  border-radius: var(--raio);
  padding: .9rem 1rem;
}
.promocao strong { color: var(--laranja-escuro); }
.promocao strong::before { content: '🏷️ '; }
.promocao span { font-size: .9rem; color: var(--texto-suave); }

#form-checkout button,
.form-chave button,
.form-cliente button,
#btn-finalizar {
  background: var(--laranja);
  color: #fff;
  border: none;
  border-radius: var(--raio-sm);
  padding: .7rem 1.15rem;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-sm);
}
#form-checkout button:hover,
.form-chave button:hover,
.form-cliente button:hover,
#btn-finalizar:hover {
  background: var(--laranja-escuro);
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}
#form-checkout button:active,
.form-chave button:active,
.form-cliente button:active,
#btn-finalizar:active {
  transform: translateY(0);
  box-shadow: var(--sombra-sm);
}
/* Botão de entrada da aba Sacola -- fora de #form-checkout (ver loja.html),
   então não herda o `width:100%` que o flex-column do form dá de graça aos
   próprios botões. */
#btn-finalizar { width: 100%; margin-top: .75rem; }
#btn-finalizar:disabled { background: #e8d9c8; color: #a89686; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-voltar-etapa { margin-bottom: .75rem; }

.carrinho {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.1rem;
  box-shadow: var(--sombra);
  position: sticky;
  top: 1rem;
  margin-bottom: 1rem;
}
.carrinho h2 { margin-top: 0; font-size: 1rem; }
.carrinho-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--borda);
}
.btn-remover {
  background: none;
  border: none;
  color: var(--vermelho);
  cursor: pointer;
  font-size: .9rem;
  padding: .2rem;
}
.btn-remover:hover { text-decoration: underline; }
.carrinho-resumo { font-size: .9rem; margin: .75rem 0; }
.carrinho-resumo-linha { display: flex; justify-content: space-between; padding: .15rem 0; }
#linha-desconto { color: var(--verde); font-weight: 600; }

/* Escolha do brinde de uma promoção "a cada N itens" (ver renderizarBrinde em
   vitrine.js). Fica entre a lista do carrinho e o resumo de valores. */
.caixa-brinde {
  background: #fff8e6;
  border: 1px dashed var(--laranja);
  border-radius: 10px;
  padding: .7rem .8rem;
  margin: .6rem 0;
}
.caixa-brinde strong { display: block; color: var(--laranja-escuro); font-size: .95rem; }
.caixa-brinde label { display: block; font-size: .8rem; color: var(--texto-suave); margin: .45rem 0 .2rem; }
.caixa-brinde select { width: 100%; }
.carrinho-resumo-linha.total { font-size: 1.1rem; font-weight: 800; color: var(--laranja-escuro); border-top: 1px dashed var(--borda); margin-top: .3rem; padding-top: .6rem; }

/* Antes vivia dentro de `.carrinho` (herdava o visual de cartão de lá); agora
   é irmão dela em loja.html (etapa própria da Sacola), então precisa do
   próprio fundo/sombra -- mesmo tratamento de `.caixa-cliente` ao lado. */
#form-checkout {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.1rem;
  box-shadow: var(--sombra);
}
#form-checkout input,
#form-checkout select,
.form-chave input,
.form-cliente input,
.form-cliente select {
  padding: .65rem .75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: .95rem;
  width: 100%;
  background: #fff;
  color: var(--texto);
}
#form-checkout input:focus,
#form-checkout select:focus,
.form-chave input:focus,
.form-cliente input:focus,
.form-cliente select:focus {
  border-color: var(--laranja);
}
.form-tipo-entrega { display: flex; gap: 1rem; font-size: .9rem; }
.form-tipo-entrega label { display: flex; align-items: center; gap: .35rem; font-weight: normal; cursor: pointer; }
#campos-endereco { display: flex; flex-direction: column; gap: .5rem; }
#campos-endereco.escondido { display: none; }
/* #form-checkout tem `display: flex` por ID (especificidade maior que
   `.escondido` sozinho) -- sem este par, a classe nunca venceria nele. */
#form-checkout.escondido { display: none; }
#form-checkout button:disabled { background: #e8d9c8; color: #a89686; cursor: not-allowed; transform: none; box-shadow: none; }
.mensagem { font-size: .85rem; color: var(--vermelho); min-height: 1.2em; }
.mensagem.sucesso { color: var(--verde); }
.dica-bairro { font-size: .8rem; color: var(--texto-suave); margin: 0; }

/* Passo de identificação do cliente (telefone -> entrar ou cadastrar) */
.caixa-cliente {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.1rem;
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}
.caixa-cliente h2 { margin-top: 0; font-size: 1rem; }
.form-cliente { display: flex; flex-direction: column; gap: .5rem; }
.faixa-logado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: var(--raio-lg);
  padding: .8rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  font-size: .9rem;
}
.faixa-logado button {
  background: none;
  border: none;
  color: var(--laranja-escuro);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.faixa-logado button:hover { text-decoration: underline; }

/* --- Cadastro de loja: proposta de valor + form lado a lado no desktop --- */
.layout-cadastro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 760px) {
  .layout-cadastro { grid-template-columns: 1fr; }
}
.beneficios { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.beneficio { display: flex; gap: .8rem; align-items: flex-start; }
.beneficio-icone {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--laranja-suave);
  color: var(--laranja-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.beneficio strong { display: block; font-size: .95rem; }
.beneficio span { font-size: .85rem; color: var(--texto-suave); }

.form-chave {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: #fff;
  padding: 1.4rem;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
  max-width: 400px;
}
.form-chave label { font-size: .8rem; color: var(--texto-suave); font-weight: 600; display: block; margin-bottom: .3rem; }
.btn-secundario { background: #fff !important; color: var(--laranja-escuro) !important; border: 1px solid var(--laranja) !important; box-shadow: none !important; }
.btn-secundario:hover { background: var(--laranja-claro) !important; }

.escondido { display: none; }
.caixa-chave {
  background: var(--laranja-claro);
  border: 1px solid #f6ad55;
  border-radius: var(--raio-lg);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
}
.caixa-chave h2 { margin-top: 0; font-size: 1.1rem; }
.caixa-chave label { font-size: .8rem; color: var(--texto-suave); font-weight: 600; display: block; margin-top: .6rem; }
.linha-copiavel { display: flex; gap: .5rem; align-items: stretch; margin-top: .25rem; }
.caixa-chave code {
  flex: 1;
  min-width: 0;
  display: block;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: .6rem .8rem;
  font-size: .95rem;
  word-break: break-all;
  user-select: all;
}
.btn-copiar {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--laranja);
  color: var(--laranja-escuro);
  border-radius: var(--raio-sm);
  padding: 0 .9rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-copiar:hover { background: var(--laranja-claro); }
.btn-copiar.copiado { background: var(--verde); border-color: var(--verde); color: #fff; }
.caixa-chave .linha-copiavel a {
  flex: 1;
  min-width: 0;
  display: block;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: .6rem .8rem;
  font-size: .9rem;
  color: var(--laranja-escuro);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caixa-chave .linha-copiavel a:hover { text-decoration: underline; }

.secao-config {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra);
}
.secao-config h2 { margin-top: 0; font-size: 1.05rem; }

/* --- Painel: tiles de resumo (pendentes/confirmados/total) -------------- */
.stat-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.stat-tile {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra);
  border-top: 3px solid var(--borda);
}
.stat-tile-pendentes { border-top-color: var(--laranja); }
.stat-tile-confirmados { border-top-color: var(--verde); }
.stat-tile-total { border-top-color: var(--texto-suave); }
.stat-tile-valor { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat-tile-rotulo { font-size: .8rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }

.lista-pedidos { display: flex; flex-direction: column; gap: .7rem; }
.pedido {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra);
  border-left: 4px solid #a0aec0;
}
.pedido-pendente { border-left-color: var(--laranja); }
.pedido-confirmado { border-left-color: var(--verde); }
.pedido-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.tag-status {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--laranja-claro);
  color: var(--laranja-escuro);
}
.pedido-confirmado .tag-status { background: var(--verde-claro); color: var(--verde); }
.pedido-linha { font-size: .9rem; color: var(--texto-suave); }
.pedido-linha strong { color: var(--texto); font-weight: 600; }

/* --- Nota do pedido (pedido.html) ---------------------------------------- */
.nota-banner {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--laranja-claro);
  border: 1px solid #f6ad55;
  border-radius: var(--raio-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.nota-banner-confirmado { background: var(--verde-claro); border-color: #86efac; }
.nota-banner-icone { font-size: 1.7rem; flex-shrink: 0; }
.nota-banner strong { display: block; font-size: .95rem; }
.nota-banner span { font-size: .85rem; color: var(--texto-suave); }

.nota-pedido {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1.25rem;
  box-shadow: var(--sombra);
  max-width: 480px;
}
.nota-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: .75rem;
  margin-bottom: .25rem;
  border-bottom: 1px dashed var(--borda);
}
.nota-cabecalho strong { font-size: 1.1rem; }
.nota-cabecalho span { font-size: .85rem; color: var(--texto-suave); }
.nota-secao-titulo {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texto-suave);
  margin: 1.1rem 0 .3rem;
}
.nota-secao-titulo:first-of-type { margin-top: .5rem; }

.link-botao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--laranja);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: .95rem;
  padding: .7rem 1.15rem;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  margin-top: 1.1rem;
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.link-botao:hover { background: var(--laranja-escuro); transform: translateY(-1px); box-shadow: var(--sombra); }

/* --- Admin do site: card de loja (admin.html/js) ------------------------- */
.loja-card {
  background: #fff;
  border-radius: var(--raio-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra);
  border-left: 4px solid var(--verde);
}
.loja-card.loja-inativa { border-left-color: var(--vermelho); }
.loja-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; gap: .5rem; flex-wrap: wrap; }
.tag-ativa { background: var(--verde-claro); color: var(--verde); }
.tag-inativa { background: #fff5f5; color: var(--vermelho); }
.loja-linha { font-size: .9rem; color: var(--texto-suave); }
.loja-linha strong { color: var(--texto); font-weight: 600; }
.loja-acoes { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.btn-perigo { background: #fff !important; color: var(--vermelho) !important; border: 1px solid var(--vermelho) !important; box-shadow: none !important; }
.btn-perigo:hover { background: #fff5f5 !important; }