/* ============================================================
   TEMA DA LOJA — azul claro (aprovado em 14/08/2026)
   videiraatacado.com.br/loja
   ============================================================
   Este arquivo carrega DEPOIS do <style> interno de cada pagina, de
   proposito: mesma especificidade, quem vem por ultimo vence. E' o que
   permite trocar a identidade visual sem reescrever o CSS antigo — e
   voltar atras e' so tirar a linha do <link>.

   Ele so pinta: cor, borda e sombra. Nenhuma regra aqui muda tamanho,
   posicao, fluxo ou comportamento.

   Usado por:  loja/index.php  e  loja/acompanhar.php
   ⚠️ Ao editar, subir o ?v= nos dois <link>, senao o navegador do
   cliente continua com a versao velha.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — a paleta inteira mora aqui.
   Mexer numa linha destas muda o site todo.
   ------------------------------------------------------------ */
:root{
  --pag:#ffffff;          /* fundo principal */
  --sup:#f5fafd;          /* fundo secundario */
  --linha:#cfe3f1;        /* borda */
  --linha-forte:#aecfe6;  /* borda de campo/opcao */
  --txt:#1f2933;          /* texto principal */
  --txt2:#526574;         /* texto de apoio */
  --acao:#2f6f9f;         /* botao principal */
  --acao-h:#245a82;       /* botao com o mouse em cima */
  --acao-txt:#ffffff;
  --cab:#eaf5fc;          /* cabecalho e rodape */
  --cab-txt:#1f2933;
  --cab-txt2:#526574;
  --cab-linha:#cfe3f1;
  --chip-on:#dceef9;      /* categoria escolhida */
  --chip-on-txt:#1f2933;
  --rod:#eaf5fc;
  --rod-txt:#1f2933;
  --campo:#ffffff;
  --sel:#2f6f9f;          /* borda do que esta selecionado */
  --sel-fundo:#f5fafd;
}

/* As variaveis antigas (--verde1/--verde2/--dourado) sao usadas por dezenas
   de regras no CSS interno das paginas. Apontando elas pros tokens novos, boa
   parte do CSS antigo se repinta sozinho, sem precisar de regra pra cada uma. */
:root{
  --verde1:var(--acao);
  --verde2:var(--acao);
  --dourado:var(--acao);
  --bg:var(--pag);
  --card:#ffffff;
}

/* ------------------------------------------------------------
   2. BASE — vale nas duas paginas
   ------------------------------------------------------------ */
body{background:var(--pag);color:var(--txt)}

header{
  background:var(--cab);
  color:var(--cab-txt);
  box-shadow:none;                              /* era sombra escura */
  border-bottom:1px solid var(--cab-linha);     /* fio no lugar da sombra */
}

/* ------------------------------------------------------------
   3. VITRINE (index.php)
   ------------------------------------------------------------ */
.brand b{color:var(--cab-txt)}
.brand small{color:var(--cab-txt2)}

#btnCart{background:var(--acao);color:var(--acao-txt);border:1px solid var(--acao)}
#btnCart:hover{background:var(--acao-h);border-color:var(--acao-h)}
/* contador do carrinho: vermelho de proposito, e' contagem que precisa saltar */
#cartQtd{background:#c0392b;color:#fff;border:2px solid var(--cab)}

#busca{background:var(--campo);color:var(--txt);border:1px solid var(--linha-forte)}
#busca::placeholder{color:var(--txt2)}
#busca:focus{border-color:var(--sel)}

.chip{background:var(--pag);border:1px solid var(--linha);color:var(--txt2)}
.chip.on{background:var(--chip-on);border-color:var(--chip-on);color:var(--chip-on-txt)}

/* banner da promocao: moldura clara. A FOTO do flyer nao e' tocada. */
#promoBanner{background:var(--sup);border:1px solid var(--linha)}
.promo-titulo{background:var(--sup);color:var(--txt);border-bottom:1px solid var(--linha)}
.promo-dica{background:var(--sup);color:var(--txt2)}

.card{background:#fff;border:1px solid var(--linha);border-top:1px solid var(--linha);
      box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .nome{color:var(--txt)}
.card .preco{color:var(--txt)}
.card .grupo,.card .cod{color:var(--txt2)}
.card .foto{background:#fff}   /* sem filtro: a cor da foto do produto e' a real */

.qtd button{background:var(--acao);color:var(--acao-txt)}
.qtd button:hover{background:var(--acao-h)}
.qtd button.menos{background:var(--sup);color:var(--txt);border:1px solid var(--linha-forte)}
.addbtn{background:var(--acao);color:var(--acao-txt)}
.addbtn:hover{background:var(--acao-h)}

#rodape{background:var(--rod);color:var(--rod-txt);box-shadow:none;
        border-top:1px solid var(--linha)}
#rodape b{color:var(--rod-txt)}
#rodape button{background:var(--acao);color:var(--acao-txt)}
#rodape button:hover{background:var(--acao-h)}

/* ------------------------------------------------------------
   4. CARRINHO E CHECKOUT (telas internas do index.php)
   ------------------------------------------------------------ */
.tela{background:var(--pag)}
.tela-head{background:var(--cab);color:var(--cab-txt);border-bottom:1px solid var(--cab-linha)}
.tela-head button,.tela-head b{color:var(--cab-txt)}

.linha-item{background:#fff;border:1px solid var(--linha)}
.linha-item .info .n{color:var(--txt)}
.linha-item .info .p{color:var(--txt2)}
.linha-item .tot{color:var(--txt)}

.resumo{background:#fff;border:1px solid var(--linha)}
.resumo .total{border-top:1px solid var(--linha);color:var(--txt)}

label{color:var(--txt)}
input[type=text],input[type=tel],textarea{
  background:var(--campo);color:var(--txt);border:1px solid var(--linha-forte)}
input[type=text]:focus,input[type=tel]:focus,textarea:focus{
  border-color:var(--sel);outline:none}
#cepInfo{color:var(--txt2)}

.tipo-opt{border:1px solid var(--linha-forte);background:#fff;color:var(--txt)}
.tipo-opt.on{border:2px solid var(--sel);background:var(--sel-fundo)}
.tipo-opt small{color:var(--txt2)}

.veic{border:1px solid var(--linha-forte);background:#fff}
.veic.on{border:2px solid var(--sel);background:var(--sel-fundo)}
.veic .txt b{color:var(--txt)}
.veic .txt small{color:var(--txt2)}
.veic .pr{color:var(--txt)}
.veic .tag{background:var(--acao);color:var(--acao-txt)}
.veic.bloq{background:var(--sup);border-style:dashed;border-color:var(--linha-forte)}
.veic.bloq .pr{color:var(--txt2);text-decoration:line-through}

/* ------------------------------------------------------------
   5. BOTOES
   ------------------------------------------------------------ */
.btn-principal,.btn-acompanhar{
  background:var(--acao);color:var(--acao-txt);border:1px solid var(--acao)}
.btn-principal:hover,.btn-acompanhar:hover{
  background:var(--acao-h);border-color:var(--acao-h)}
.btn-principal:disabled{opacity:.5}
/* secundario: branco com borda azul */
.btn-paguei{background:#fff;color:var(--acao);border:1px solid var(--acao)}
.btn-paguei:hover{background:var(--sup)}
.btn-paguei:disabled{background:var(--sup);color:var(--txt2);border-color:var(--linha);cursor:default}

/* ------------------------------------------------------------
   6. TELA DO PIX
   ------------------------------------------------------------ */
#qrImg{background:#fff;border:1px solid var(--linha);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#copiaCola{background:var(--sup);border:1px dashed var(--linha-forte);color:var(--txt2)}
.status-pill{color:var(--txt2)}
.spinner{border-color:var(--linha);border-top-color:var(--acao)}
.sucesso h2{color:var(--txt)}
.vazio{color:var(--txt2)}

/* ------------------------------------------------------------
   7. AVISOS
   Neutros por padrao; coloridos SO quando comunicam estado.
   ------------------------------------------------------------ */
.aviso{background:var(--sup);border:1px solid var(--linha);color:var(--txt2)}
.aviso-peso{background:var(--sup);border:1px solid var(--linha);color:var(--txt2)}
.aviso-peso a{color:var(--acao);font-weight:700}

/* ALERTA: o peso do carrinho passou do que o veiculo leva */
.aviso-peso.alerta{background:#fff6ec;border:1px solid #e8a765;color:#7a4a10}
/* BLOQUEIO: este veiculo nao pode levar a carga */
.veic.bloq .txt small{color:#b3261e}
/* ESTADO: a loja esta fechada agora */
.fechada{background:#fff8e8;border-bottom:1px solid #eadcb4;color:#6b5316}
.fechada a{color:var(--acao);font-weight:700}
/* O card .bloqueio (pedido que nao cabe em veiculo nenhum) segue laranja, e o
   botao dele segue verde-WhatsApp: um comunica BLOQUEIO, o outro identifica o
   canal. Trocar essas duas cores seria perder clareza. Por isso nao ha regra
   pra .bloqueio aqui. */

/* ------------------------------------------------------------
   8. ACOMPANHAR MEU PEDIDO (acompanhar.php)
   A pagina tem CSS proprio; estas regras vencem por vir depois.
   ------------------------------------------------------------ */
.wrap .card{background:#fff;border:1px solid var(--linha);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.num b,.num span{color:var(--txt)}
.tipo{background:var(--sup);color:var(--txt)}
.tipo.ent{background:var(--chip-on);color:var(--chip-on-txt);border:1px solid var(--linha)}
.end{color:var(--txt2)}

/* linha do tempo */
.passo::before{background:var(--linha)}
.passo.ok::before{background:var(--acao)}
.bola{background:var(--sup);color:var(--txt2)}
.passo.ok .bola{background:var(--acao);color:var(--acao-txt)}
.passo.agora .bola{background:var(--acao);color:var(--acao-txt);
                   box-shadow:0 0 0 0 rgba(47,111,159,.45)}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(47,111,159,.45)}
  70%{box-shadow:0 0 0 12px rgba(47,111,159,0)}
  100%{box-shadow:0 0 0 0 rgba(47,111,159,0)}
}
.txt h3{color:#93a2ad}                                   /* etapa ainda nao alcancada */
.passo.ok .txt h3,.passo.agora .txt h3{color:var(--txt)}
.txt p{color:var(--txt2)}
.passo.agora .txt p{color:var(--txt)}

.btn-receber{background:var(--acao);color:var(--acao-txt);border:1px solid var(--acao);box-shadow:none}
.btn-receber:hover:not(:disabled){background:var(--acao-h);border-color:var(--acao-h)}
.btn-rastreio{background:var(--acao);color:var(--acao-txt);border:1px solid var(--acao)}
.btn-rastreio:hover{background:var(--acao-h);border-color:var(--acao-h)}
.btn-zap,.btn-retry{background:#fff;color:var(--acao);border:1px solid var(--acao)}
.btn-zap:hover,.btn-retry:hover{background:var(--sup)}

.nota{color:var(--txt2)}
.avisobox.azul{background:var(--sup);border:1px solid var(--linha);color:var(--txt)}
.avisobox.cinza{background:var(--sup);border:1px solid var(--linha);color:var(--txt2)}
/* ESTADO: entregas encerradas por hoje */
.avisobox.laranja{background:#fff8e8;border:1px solid #eadcb4;color:#6b5316}

.itens{color:var(--txt)}
.itens li{border-bottom:1px solid var(--linha)}
.itens b{color:var(--txt)}
.tit{color:var(--txt2)}
.pe{color:var(--txt2)}
.pe a{color:var(--acao)}
/* o spinner de "solicitando" fica sobre fundo CLARO agora, entao gira em azul */
.spin{border-color:var(--linha);border-top-color:var(--acao)}

/* ------------------------------------------------------------
   9. RESPONSIVO
   O layout ja era fluido (grid auto-fill + flex); aqui so' entram os
   ajustes que evitam aperto nas telas mais estreitas.
   ------------------------------------------------------------ */
@media (max-width:360px){
  /* em aparelho estreito o nome + carrinho disputam a mesma linha */
  .brand b{font-size:1.02rem}
  .brand small{font-size:.66rem}
  #btnCart{padding:8px 11px;font-size:.88rem}
  .chip{padding:6px 12px;font-size:.8rem}
}
@media (hover:none){
  /* em toque nao existe "passar o mouse": o estado hover fica grudado depois
     do toque e o botao parece travado no tom escuro. */
  .btn-principal:hover,.btn-acompanhar:hover,.addbtn:hover,.qtd button:hover,
  #btnCart:hover,#rodape button:hover,.btn-receber:hover,.btn-rastreio:hover{
    background:var(--acao);border-color:var(--acao)}
  .btn-zap:hover,.btn-retry:hover,.btn-paguei:hover{background:#fff}
}