/* =========================================================================
   tema.css — Doceria Doce Encanto
   Tokens da paleta + rebrand visual (estilo iFood) sobre css/delivry.css.
   Carregado SEMPRE depois de delivry.css. Substitui os blocos <style>
   inline que existiam no <head> de cada pagina.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Paleta */
  --if-red: #EA1D2C;        /* primaria: botoes, precos, destaques */
  --if-red-dark: #B4141F;   /* hover / pressed */
  --if-red-soft: #FEEBEC;   /* fundo de chips e alertas */
  --if-green: #50A773;      /* "Gratis", sucesso, loja aberta */
  --if-green-soft: #EAF5EF;
  --if-ink: #3F3E3E;        /* texto principal */
  --if-muted: #717171;      /* texto secundario (4,6:1 sobre branco) */
  --if-line: #E5E5E5;       /* divisorias e bordas de cartao */
  --if-bg: #F5F5F5;         /* fundo da pagina */
  --if-surface: #FFFFFF;    /* cartoes */
  --if-yellow: #FFB100;     /* estrelas de avaliacao */

  /* Derivados de layout — usados tambem por carrinho.css */
  --if-on-red: #FFFFFF;     /* texto/icone sobre fundo vermelho */
  --if-overlay: rgba(0, 0, 0, .5); /* cortina atras da gaveta */
  --if-disabled: #C7C7C7;   /* controles desativados */
  --if-raio: 8px;           /* raio padrao dos cartoes */
  --if-raio-pill: 999px;    /* raio dos botoes-pilula e chips */
  --if-sombra: 0 1px 3px rgba(0, 0, 0, .08);
  --if-sombra-alta: 0 -2px 12px rgba(0, 0, 0, .12);
  --if-fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --if-transicao: .2s ease;
  --if-foco: 0 0 0 3px rgba(234, 29, 44, .35); /* anel de :focus-visible */
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
body,
html {
  font-family: var(--if-fonte);
  color: var(--if-ink);
  background: var(--if-bg);
}

button,
input,
textarea,
select {
  font-family: var(--if-fonte);
}

a {
  color: var(--if-ink);
}

h1,
h2,
h3 {
  color: var(--if-ink);
}

/* Anel de foco visivel e consistente em tudo que recebe teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--if-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Barra de rolagem discreta no tom da marca. */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--if-line);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: #C7C7C7;
}

::selection {
  background: var(--if-red);
  color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   3. CABECALHO
   Faixa vermelha como capa + logo redonda branca sobreposta ao centro.
   ------------------------------------------------------------------------- */
header#topo {
  background: var(--if-surface);
  border-bottom: 1px solid var(--if-line);
}

header#topo .cover {
  background-color: var(--if-red);
  background-image: none;
  background-size: cover;
  background-position: center;
}

/* A "borda" e a folha branca arredondada que sobe por cima da faixa. */
header#topo .borda {
  background: var(--if-surface);
  border-radius: 24px 24px 0 0;
}

header#topo .cover .logo {
  background: var(--if-surface);
  border: 4px solid var(--if-surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

header#topo .info h1 {
  color: var(--if-ink);
  font-weight: 700;
  font-size: 22px;
}

header#topo .info h2 {
  color: var(--if-muted);
  font-weight: 400;
}

header#topo .info .detalhe,
header#topo .info .detalhes {
  color: var(--if-muted);
}

header#topo .info .icones a {
  border: 1px solid var(--if-line);
  background: var(--if-surface);
  color: var(--if-muted);
}

header#topo .info .icones a:hover,
header#topo .info .icones a:focus-visible {
  color: var(--if-red);
  border-color: var(--if-red);
  box-shadow: var(--if-sombra);
}

header#topo .info .horarios {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  color: var(--if-ink);
}

/* Barra de categorias: vermelha, texto branco. */
header#topo #menuCategorias {
  background: var(--if-red);
}

header#topo #menuCategorias.fixed {
  background: var(--if-red);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .15);
}

header#topo #menuCategorias a.pesquisar {
  color: #FFFFFF;
}

header#topo .categorias a {
  color: rgba(255, 255, 255, .82);
  border-top: 2px solid transparent;
  font-weight: 600;
}

header#topo .categorias a:hover,
header#topo .categorias a.ativo {
  color: #FFFFFF;
  border-top-color: #FFFFFF;
}

/* Campo de busca */
.form-busca input {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
}

.form-busca input::placeholder {
  color: var(--if-muted);
}

/* -------------------------------------------------------------------------
   4. STATUS DA LOJA
   ------------------------------------------------------------------------- */
.aberto {
  color: #2F7A50;                 /* verde escurecido para passar em AA */
  background-color: var(--if-green-soft);
  border-radius: var(--if-raio-pill);
  font-size: 13px;
}

.fechado {
  color: var(--if-red-dark);
  background-color: var(--if-red-soft);
  border-radius: var(--if-raio-pill);
  font-size: 13px;
}

/* -------------------------------------------------------------------------
   5. LISTA DE PRODUTOS — cartoes brancos, borda fina, raio 8px
   ------------------------------------------------------------------------- */
main#lista h1,
main#lista h2 {
  color: var(--if-ink);
  font-weight: 600;
}

main#lista .produtos .item a {
  background: var(--if-surface);
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  box-shadow: none;
  transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

main#lista .produtos .item a:hover,
main#lista .produtos .item a:focus-visible {
  background: var(--if-surface);
  border-color: var(--if-red);
  box-shadow: var(--if-sombra);
}

main#lista .produtos .item .texto h3 {
  color: var(--if-ink);
  font-weight: 600;
}

main#lista .produtos .item .texto span {
  color: var(--if-muted);
}

/* Preco riscado (o "de") em cinza; preco vigente em vermelho iFood. */
main#lista .produtos .item .texto span.precoPromocao,
#detalhesProduto .info1 .precoPromocao {
  color: var(--if-muted);
  font-weight: 400;
}

main#lista .produtos .item .texto span.preco,
#detalhesProduto .info1 .preco,
#detalhesProduto .info3 #precoProduto {
  color: var(--if-red);
  font-weight: 700;
}

main#lista .produtos .item figure {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
}

span.estoque i {
  color: var(--if-red);
}

/* Cartao em destaque (ex.: kit promocional) */
.selecionado,
a.disponivel.pulsar {
  border: 2px solid var(--if-green) !important;
}

/* -------------------------------------------------------------------------
   6. AVALIACOES — estrelas amarelas e texto secundario legivel
   ------------------------------------------------------------------------- */
.estrelas i,
.fa-star,
.fa-star-half-alt,
.fa-star-half-o {
  color: var(--if-yellow);
}

.avaliacao h3 {
  color: var(--if-ink);
}

.avaliacao p,
.avaliacao .data {
  color: var(--if-muted);
}

/* BUG 25 — rede de seguranca de contraste.
   Alguns textos vinham com cor inline cinza-claro (gray/#888/#999/#555),
   entre 3,5:1 e 4,0:1 sobre branco, abaixo do minimo AA de 4,5:1.
   Como estilo inline vence a folha, so !important corrige sem tocar no HTML. */
[style*="color:gray"],
[style*="color: gray"],
[style*="color:#888"],
[style*="color: #888"],
[style*="color:#999"],
[style*="color: #999"],
[style*="color:#555"],
[style*="color: #555"],
[style*="color:#777"],
[style*="color: #777"] {
  color: var(--if-muted) !important;
}

/* -------------------------------------------------------------------------
   7. BOTOES
   ------------------------------------------------------------------------- */
.btn,
a.voltar,
a.voltar2,
.btnSair,
.btnFidelidade,
.btnGoogle,
.btnEmail,
.btnSemCadastro,
#detalhesProduto button.adicionarProduto {
  background: var(--if-red);
  color: #FFFFFF;
  border-radius: var(--if-raio-pill);
  font-weight: 600;
  transition: background var(--if-transicao), box-shadow var(--if-transicao);
}

.btn:hover,
a.voltar:hover,
a.voltar2:hover,
.btnSair:hover,
.btnFidelidade:hover,
.btnGoogle:hover,
.btnEmail:hover,
.btnSemCadastro:hover {
  background: var(--if-red-dark);
  opacity: 1;
  box-shadow: 0 4px 10px rgba(180, 20, 31, .25);
}

.btnVerde {
  background: var(--if-green) !important;
}

.btnVerde:hover {
  background: #439263 !important;
}

.btnCinza {
  background: #C7C7C7 !important;
  color: #FFFFFF;
}

/* Stepper de quantidade nativo das paginas de produto */
.qtdeProduto,
.qtdeProdutoOpcao {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
}

.qtdeProduto button,
.qtdeProdutoOpcao button {
  color: var(--if-red);
}

.qtdeProduto button:hover i,
.qtdeProdutoOpcao button:hover i,
.qtdeProduto i:hover {
  color: var(--if-red-dark);
}

.qtdeProduto button:disabled,
.qtdeProdutoOpcao button:disabled {
  color: #C7C7C7;
}

/* -------------------------------------------------------------------------
   8. ALERTAS
   ------------------------------------------------------------------------- */
.alert {
  border-radius: var(--if-raio);
  outline: 0;
  border: 1px solid var(--if-line);
  background: var(--if-surface);
  color: var(--if-ink);
  text-shadow: none;
}

.alert > span {
  color: var(--if-red);
}

.alert-success {
  border-color: var(--if-green);
  background: var(--if-green-soft);
  color: #2F7A50;
}

.alert-error {
  border-color: var(--if-red);
  background: var(--if-red-soft);
  color: var(--if-red-dark);
}

.alert-info {
  border-color: var(--if-yellow);
  background: #FFF6E5;
  color: var(--if-ink);
}

/* -------------------------------------------------------------------------
   9. PAGINA DE PRODUTO
   ------------------------------------------------------------------------- */
#detalhesProduto .info1 .fotoProduto figure {
  border-radius: var(--if-raio);
  overflow: hidden;
}

#detalhesProduto .info1 .descricao {
  color: var(--if-muted);
}

#detalhesProduto .info2 .tipo .topo {
  background: var(--if-surface);
  border-bottom: 1px solid var(--if-line);
}

#detalhesProduto .info2 h3 {
  color: var(--if-ink);
  font-weight: 600;
}

#detalhesProduto .info2 .tipo .topo span.detalhe {
  color: var(--if-muted);
}

/* Chip "OBRIGATORIO" / contador de escolhas */
#detalhesProduto .info2 .tipo .topo .col2 span {
  background: var(--if-line);
  color: var(--if-ink);
  border-radius: var(--if-raio-pill);
}

#detalhesProduto .info2 .opcoes {
  border-bottom: 1px solid var(--if-line);
  background: var(--if-surface);
}

#detalhesProduto .info2 .opcoes span.detalheOpcao {
  color: var(--if-muted);
}

#detalhesProduto .info2 .opcoes .nome .preco {
  color: var(--if-green);
  font-weight: 600;
}

/* Caixa de selecao dos sabores */
#detalhesProduto .info2 .opcoes input[type="checkbox"] + label::before {
  border: 2px solid var(--if-line);
  border-radius: 4px;
}

#detalhesProduto .info2 .opcoes input[type="checkbox"]:checked + label::before,
#pedido .trocarPontos input[type="checkbox"]:checked + label::before,
#pedido .pagamentos input[type="radio"]:checked + label::before {
  background-color: var(--if-red);
  border: 2px solid var(--if-red);
}

/* Barra fixa de preco + "adicionar" no rodape da pagina de produto */
#detalhesProduto .info3 {
  background: var(--if-surface);
  border-top: 1px solid var(--if-line);
  box-shadow: var(--if-sombra-alta);
}

.info2 em,
.observacao2 em {
  color: var(--if-muted);
}

/* -------------------------------------------------------------------------
   10. CARRINHO ANTIGO / CHECKOUT NATIVO
   (Mantido tematizado: a sacola nova mora em carrinho.css.)
   ------------------------------------------------------------------------- */
footer {
  background: var(--if-red);
  color: #FFFFFF;
}

footer#carrinho a {
  color: #FFFFFF;
}

footer#carrinho a.rastreamento {
  background: var(--if-green);
}

footer#carrinho .container .icone span {
  background: #FFFFFF;
  color: var(--if-red);
  border-radius: var(--if-raio-pill);
}

#meuCarrinho,
#info,
#pedidoSelecionado {
  background: var(--if-surface);
}

#meuCarrinho button.fechar,
#rastreamento .registro span.passou,
#rastreamento .registro span.confirmacao {
  background: var(--if-red);
}

#meuCarrinho a.fechar {
  color: var(--if-muted);
}

.lista .item .col .nomeProduto {
  color: var(--if-ink);
  font-weight: 600;
}

.lista .item .col .detalheProduto,
.lista .item .col .complementosProduto,
.lista .item .col .obsProduto {
  color: var(--if-muted);
}

#meuCarrinho .totalPedido span,
#pedido .totalPedido span,
#pedido .valores .resumoTotalPedido span {
  color: var(--if-red);
  font-weight: 700;
}

/* Campos do formulario nativo */
#detalhesProduto .info2 > input,
#pedido .observacao2 input,
.form input,
.form select {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio);
  background: var(--if-surface);
  color: var(--if-ink);
}

.form label,
#pedido .observacao2 label,
#detalhesProduto .info2 > label {
  color: var(--if-muted);
}

input::placeholder {
  color: var(--if-muted);
}

#pedido .entrega .radio label input[type="radio"]:checked,
#pedido .entrega .radio label:hover {
  background: var(--if-red);
}

/* -------------------------------------------------------------------------
   11. MODAL NATIVO
   ------------------------------------------------------------------------- */
#modal {
  background-color: rgba(0, 0, 0, .5);
}

#modal .container {
  background: var(--if-surface);
  border-radius: var(--if-raio);
  border-top: 4px solid var(--if-red);
}

#modal .container .titulo {
  color: var(--if-ink);
  font-weight: 600;
}

#modal .container .titulo i {
  color: var(--if-red);
}

#modal .container button {
  background: var(--if-red);
}

.overlay {
  background: rgba(0, 0, 0, .6);
}

/* -------------------------------------------------------------------------
   12. CONTADOR REGRESSIVO DA PROMOCAO
   Aceita tanto os ids antigos quanto as classes novas (ids duplicados
   foram trocados por classes — ver bug 12 do contrato).
   ------------------------------------------------------------------------- */
.countdown {
  gap: 10px;
}

.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds,
.countdown .contagem-num,
#days,
#hours,
#minutes,
#seconds {
  background-color: var(--if-red);
  color: #FFFFFF;
  border-radius: var(--if-raio);
  font-weight: 600;
}

.box span,
.box p {
  color: var(--if-ink);
}

.countdown .box p,
.countdown .box span:last-child {
  color: var(--if-muted);
  font-size: .85rem;
}

/* A animacao `pulse` do delivry.css usa verde: mantida como destaque. */
.pulsar {
  border-radius: var(--if-raio);
}

/* -------------------------------------------------------------------------
   13. RODAPE DE CREDITOS
   ------------------------------------------------------------------------- */
main #desenvolvimento {
  color: var(--if-muted);
}

main #desenvolvimento .btn2 {
  border: 1px solid var(--if-line);
  border-radius: var(--if-raio-pill);
  background: var(--if-surface);
}

main #desenvolvimento .btn2:hover {
  background: var(--if-red);
  border-color: var(--if-red);
  color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   14. MOVIMENTO REDUZIDO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Ajustes finais de layout (verificados no navegador)
   ------------------------------------------------------------------------ */

/* O contador de estoque fica dentro de um <b> vermelho: o texto precisa
   herdar o branco do pai, senao o numero some sobre o fundo vermelho. */
.estoque-combo,
.estoque b .estoque-combo {
	color: inherit !important;
}

/* `1fr` equivale a minmax(auto, 1fr): o conteudo empurra e as colunas saem
   desiguais (253/236/219px). minmax(0,...) trava o minimo, e auto-fill evita
   espremer tres cartoes numa largura em que so cabem dois. */
main#lista .produtos,
.produtos {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	align-items: stretch;
}

/* Abaixo do breakpoint do delivry.css, uma coluna so. */
@media only screen and (max-width: 767px) {
	main#lista .produtos,
	.produtos {
		grid-template-columns: 1fr;
	}
}

/* A barra da sacola e fixa no rodape: reserva espaco para ela nao cobrir
   o ultimo cartao da lista. */
body:has(#barraSacola:not([hidden])) {
	padding-bottom: 76px;
}

/* A pilha de toasts dividia z-index 1200 e o rodape com a barra da sacola,
   entao as notificacoes ficavam por baixo dela. Sobe a pilha e a coloca
   acima da barra, mas ainda abaixo da gaveta (1300). */
.toast-pilha {
	left: auto !important;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	width: min(360px, calc(100vw - 32px)) !important;
	z-index: 1250;
	pointer-events: none;
}

.toast-pilha > * {
	pointer-events: auto;
}

/* Com a sacola preenchida, a barra ocupa o rodape: empurra os toasts. */
body:has(#barraSacola:not([hidden])) .toast-pilha {
	bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
	.toast-pilha {
		right: 12px;
		width: calc(100vw - 24px) !important;
	}
}

/* ---------------------------------------------------------------------------
   Banner do cabeçalho
   Substitui a faixa vermelha lisa. Enquanto não houver arte, os arquivos
   banner-*.webp são um retângulo na própria cor da marca, então o visual
   continua idêntico ao de antes.

   Para trocar: salve a arte em _originais-alta/banner.png (ou .jpg) e rode
   ./otimizar-imagens.sh — ele gera as três larguras automaticamente.
   ------------------------------------------------------------------------ */
header#topo .cover {
	background-image: url('../images/opt/banner-640.webp');
}

/* A arte tem 1086px de largura: acima disso não há o que ganhar gerando
   arquivo maior — seria só upscale, mais pesado e mais borrado. */
@media (min-width: 641px) {
	header#topo .cover {
		background-image: url('../images/opt/banner-1086.webp');
	}
}
