/* ══════════════════════════════════════════════════════════════
   site.css · cabecalho, menu lateral e rodape
   Vale em todas as paginas. Nao toca no cartao do convite.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── base ───────────
   Vale em todas as paginas. Sem box-sizing, width:100% + padding
   estoura a caixa e os campos passam da area. */
*, *::before, *::after{ box-sizing:border-box }
body{ margin:0 }
img, svg{ vertical-align:middle }

/* O atributo hidden só esconde por uma regra do navegador, que perde para
   qualquer display declarado aqui. Sem esta linha, hidden=true num elemento
   com display:flex (botões, barras de ação) simplesmente não faz nada — e,
   por não ser erro, o console fica limpo e o sintoma engana. */
[hidden]{ display:none !important }

/* ── barra de rolagem: fina, discreta, sem atrapalhar ──────────────
   Não esconder: ela mostra que há mais conteúdo, e quem usa mouse precisa
   conseguir agarrá-la. No celular o sistema desenha a dele por cima do
   conteúdo, então lá isto quase não muda nada.

   --sb e --sb-hover mudam por contexto: claros no site escuro, escuros
   dentro dos popups (.pop__cx) e do cartão do convite (temas.css).

   Duas estratégias, uma por vez: as propriedades padrão nos navegadores
   novos; o prefixo -webkit só onde elas não existem. Chrome recente ignora
   ::-webkit-scrollbar quando há scrollbar-color, então misturar não ajuda. */
:root{ --sb:rgba(255,255,255,.34); --sb-hover:rgba(255,255,255,.58); }
*{ scrollbar-width:thin; scrollbar-color:var(--sb) transparent; }
@supports not (scrollbar-color:auto){
  *::-webkit-scrollbar{ width:9px; height:9px }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner{ background:transparent }
  *::-webkit-scrollbar-thumb{
    background:var(--sb); border-radius:99px;
    border:2px solid transparent; background-clip:content-box;
  }
  *::-webkit-scrollbar-thumb:hover{ background:var(--sb-hover); background-clip:content-box }
}

/* espaco do cabecalho fixo */
body.tem-topo{ padding-top:78px }

/* ─────────── botoes ─────────── */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:10px; padding:11px 18px; cursor:pointer;
  background:#e8e5df; color:#161618; text-decoration:none; text-align:center;
  font-family:'Archivo',sans-serif; font-size:14px; font-weight:600;
  white-space:nowrap; line-height:1.2;
  transition:background .15s, color .15s, border-color .15s;
}
.bt:hover{ background:#fff; color:#161618 }
.bt svg{ width:17px; height:17px }

.bt--vazio{
  background:transparent; color:#c9c5bf;
  border:1px solid #4a4a50; font-weight:500;
}
.bt--vazio:hover{ background:#2a2a2f; color:#fff; border-color:#5f5f66 }

.bt:disabled{ opacity:.5; cursor:not-allowed }

/* ─────────── avisos ─────────── */
.msg{
  padding:12px 15px; border-radius:11px; margin-bottom:12px;
  font-family:'Archivo',sans-serif; font-size:13.5px; line-height:1.5;
}
.msg--ok  { background:rgba(33,162,73,.14); border:1px solid rgba(33,162,73,.45); color:#8fdcaa }
.msg--erro{ background:rgba(255,77,46,.13); border:1px solid rgba(255,77,46,.45); color:#ff9c86 }

/* ─────────── cabecalho ─────────── */
.topo-site{
  position:fixed; top:0; left:0; right:0; z-index:40; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; background:rgba(23,23,26,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08);
}
.marca{
  font-family:'Archivo',sans-serif; font-weight:900; font-size:20px;
  letter-spacing:-.03em; color:#e8e5df; text-decoration:none;
}
.marca span{ color:#FF4D2E; }

/* convite: dentro do jogo o logo sai e entra a seta com o titulo.
   Nao e botao: so a seta recebe o clique, sem fundo nem efeito. */
.topo-voltar{
  display:none; align-items:center; color:#e8e5df; margin-left:-8px;  /* o desenho da seta tem folga interna: alinha com o logo */
  font-family:'Archivo',sans-serif; font-weight:400; font-size:16px; letter-spacing:normal;
  animation:topoVoltarEntra .22s ease-out;
}
.topo-voltar__seta{
  position:relative; display:block; width:26px; height:26px; flex:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.topo-voltar__seta svg{ display:block; width:100%; height:100% }
/* area de toque maior que o desenho, sem aparecer */
.topo-voltar__seta::before{ content:''; position:absolute; inset:-8px; }
.topo-voltar__txt{ margin-left:10px }
.topo-voltar[hidden]{ display:none }
.topo-site.com-voltar .marca{ display:none }
.topo-site.com-voltar .topo-voltar:not([hidden]){ display:flex }
@keyframes topoVoltarEntra{ from{ opacity:0; transform:translateX(-8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .topo-voltar{ animation:none } }

/* hamburguer de traços desiguais */
.burger{
  width:40px; height:40px; border:0; background:none; cursor:pointer;
  border-radius:999px; padding:0;
  display:flex; flex-direction:column; align-items:flex-end;
  justify-content:center; gap:5px;
}
.burger span{
  display:block; height:2px; border-radius:2px; background:#e8e5df;
  transition:width .2s ease;
}
.burger span:nth-child(1){ width:20px }
.burger span:nth-child(2){ width:14px }
.burger span:nth-child(3){ width:17px }
.burger:hover span:nth-child(2){ width:20px }

/* ─────────── menu lateral ───────────
   position:fixed + inset ancora no viewport: a altura nao muda
   quando a barra do navegador aparece ou some no celular. */
.menu-fundo{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,10,12,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.menu-fundo.on{ opacity:1 }

.menu{
  position:fixed; top:0; right:0; bottom:0; z-index:51;
  width:min(320px, 86vw);
  background:#1c1c20; border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.8,.3,1);
}
.menu.on{ transform:translateX(0) }

.menu__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px 0 20px; height:60px; flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.menu__x{
  width:38px; height:38px; border:0; background:none; cursor:pointer;
  border-radius:999px; color:#e8e5df;
  display:flex; align-items:center; justify-content:center;
}
.menu__x:hover{ background:rgba(255,255,255,.08) }
.menu__x svg{ width:20px; height:20px }

.menu__nav{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:14px 12px; display:flex; flex-direction:column; gap:2px;
}
.menu__nav a{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px;
  color:#e8e5df; text-decoration:none;
  font-family:'Archivo',sans-serif; font-size:14.5px;
}
.menu__nav a:hover{ background:rgba(255,255,255,.07) }
.menu__nav a svg{ width:19px; height:19px; flex:0 0 auto; opacity:.75 }
.menu__nav hr{ border:0; border-top:1px solid rgba(255,255,255,.09); margin:10px 14px }

.menu__usuario{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-top:1px solid rgba(255,255,255,.09);
}
.menu__foto{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; display:flex; align-items:center; justify-content:center;
}
.menu__iniciais{
  color:#fff; font-family:'Archivo',sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.02em;
}
.menu__dados{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.menu__dados b{
  font-family:'Archivo',sans-serif; font-size:14px; font-weight:600; color:#e8e5df;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.menu__dados a{
  font-family:'Archivo',sans-serif; font-size:12.5px;
  color:#8b8781; text-decoration:none; width:max-content;
}
.menu__dados a:hover{ color:#FF4D2E }

/* ─────────── rodape ─────────── */
.rodape-site{
  border-top:1px solid rgba(255,255,255,.08);
  background:#161619; padding:26px 18px;
}
.rodape-site__in{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.rodape-site nav{ display:flex; gap:18px; flex-wrap:wrap }
.rodape-site nav a{
  font-family:'Archivo',sans-serif; font-size:13px;
  color:#8b8781; text-decoration:none;
}
.rodape-site nav a:hover{ color:#e8e5df }
.rodape-site small{
  margin-left:auto; font-family:'Archivo',sans-serif; font-size:12px; color:#6e6a64;
}
@media (max-width:640px){
  .rodape-site small{ margin-left:0 }
}

/* ─────────── aviso curto das acoes (copiar link etc) ─────────── */
#avisoIcone{
  position:fixed; left:50%; bottom:26px; z-index:60;
  transform:translateX(-50%) translateY(12px);
  background:#161618; color:#e8e5df; border:1px solid #3a3a3e;
  border-radius:999px; padding:11px 20px;
  font-family:'Archivo',sans-serif; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
#avisoIcone.on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ─────────── ultimo recurso: link para copiar na mao ─────────── */
#caixaLink{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(10,10,12,.72); backdrop-filter:blur(5px);
}
#caixaLink.on{ display:flex }
.caixaLink__in{
  width:min(420px,100%); background:#1d1d20; border:1px solid #34343a;
  border-radius:14px; padding:20px;
}
.caixaLink__in p{
  font-family:'Archivo',sans-serif; font-size:14px; color:#e8e5df; margin-bottom:12px;
}
.caixaLink__in input{
  width:100%; padding:11px 12px; border:1px solid #3a3a3e; border-radius:9px;
  background:#141416; color:#e8e5df; font:inherit; font-size:13px;
}
.caixaLink__in button{
  margin-top:12px; width:100%; border:0; border-radius:9px; padding:11px;
  background:#e8e5df; color:#161618; font:inherit; font-size:14px;
  font-weight:600; cursor:pointer;
}

/* ─────────── sino de avisos ─────────── */
.topo-site__dir{ display:flex; align-items:center; gap:2px }
.sino{
  position:relative; width:40px; height:40px; border:0; background:none;
  cursor:pointer; border-radius:999px; color:#e8e5df;
  display:flex; align-items:center; justify-content:center;
}
.sino:hover{ background:rgba(255,255,255,.08) }
.sino svg{ width:21px; height:21px }
.sino__selo{
  position:absolute; top:4px; right:3px; min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:#FF4D2E; color:#fff;
  border:2px solid #17171a;
  font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

.avisos{
  position:absolute; top:56px; right:12px; z-index:45;
  width:min(340px, calc(100vw - 24px));
  background:#1d1d20; border:1px solid #34343a; border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.55); overflow:hidden;
}
.avisos[hidden]{ display:none }
.avisos header{
  padding:13px 16px; border-bottom:1px solid #2f2f34;
  font-family:'Archivo',sans-serif; font-size:14px; color:#e8e5df;
}
.avisos__lista{ max-height:min(60dvh, 380px); overflow-y:auto }
/* Prefixo proprio: '.aviso' ja era usado pelo alerta do gerenciador
   (outra coisa, com borda e cantos arredondados) e as duas regras se
   atropelavam nas paginas que carregam as duas folhas. */
.sinoItem{
  display:flex; gap:11px; padding:12px 16px; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sinoItem:hover{ background:rgba(255,255,255,.05) }

.sinoItem--novo{ background:rgba(255,77,46,.07) }
.sinoItem b{
  display:block; font-family:'Archivo',sans-serif; font-size:13.5px;
  font-weight:600; color:#e8e5df; line-height:1.35;
}
.sinoItem span{
  display:block; font-family:'Archivo',sans-serif; font-size:12.5px;
  color:#8b8781; line-height:1.45; margin-top:2px;
}
/* O icone tambem e um <span>, entao precisa empatar em forca com
   '.sinoItem span' (classe + elemento) e vir depois dela. Com classe
   sozinha ele perdia, e o desenho encolhia para o canto do circulo. */
.sinoItem span.sinoItem__ico{
  width:34px; height:34px; border-radius:999px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); margin-top:0;
}
.sinoItem__ico svg{ width:18px; height:18px; display:block; flex:0 0 auto }

.sinoItem time{
  display:block; font-family:'Archivo',sans-serif; font-size:11px; color:#6e6a64; margin-top:4px;
}
.avisos__vazio{
  padding:30px 16px; text-align:center;
  font-family:'Archivo',sans-serif; font-size:13px; color:#8b8781;
}

/* ══════════════════════════════════════════════════════════════
   .pop · o popup padrão

   Um contrato só, para todos:
       ilustração (.pop__ico) → título (.pop__titulo)
       → conteúdo (.pop__corpo) → ações (.pop__acoes)
   Fecha no X, no clique no fundo e no ESC (assets/js/pop.js).
   Cartão centralizado no computador e no celular.

   Mora no site.css, e não no temas.css, porque aparece em páginas
   que não carregam a folha de temas (gerenciador, cadastro, admin).
   ══════════════════════════════════════════════════════════════ */
.pop{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,10,12,.72); backdrop-filter:blur(6px);
  overscroll-behavior:contain;
  animation:pop-fundo .18s ease-out;
}
.pop[hidden]{ display:none }

.pop__cx{
  /* barra de rolagem escura sobre o fundo claro do cartão */
  --sb:rgba(0,0,0,.30); --sb-hover:rgba(0,0,0,.55);
  position:relative; display:flex; flex-direction:column;
  width:min(420px,100%);
  max-height:min(740px,92vh); max-height:min(740px,92dvh);
  padding:34px 26px 24px;
  background:#fff; color:#1a1a1a; border-radius:20px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  font-family:'Archivo',system-ui,sans-serif;
  animation:pop-entra .22s cubic-bezier(.2,.8,.2,1);
  outline:none;
}

.pop__x{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  border:0; border-radius:999px; background:#f1f1f1; color:#555; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pop__x:hover{ background:#e4e4e4 }
.pop__x svg{ width:16px; height:16px; stroke-width:2.2 }

/* ilustração: círculo com o tom do que o popup comunica.
   Troca de SVG num lugar só (includes/pop-icones.php). */
.pop__ico{
  flex:0 0 auto; width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--pop-tom-bg); color:var(--pop-tom);
  box-shadow:0 0 0 6px var(--pop-tom-anel);
}
.pop__ico svg{ width:30px; height:30px }
.pop__ico--neutro  { --pop-tom:#566070; --pop-tom-bg:#edf0f5; --pop-tom-anel:#f6f8fb }
.pop__ico--destaque{ --pop-tom:#a87700; --pop-tom-bg:#fdf1cf; --pop-tom-anel:#fef8e6 }
.pop__ico--sucesso { --pop-tom:#1a7a39; --pop-tom-bg:#e3f5ea; --pop-tom-anel:#f1faf4 }
.pop__ico--alerta  { --pop-tom:#c2410c; --pop-tom-bg:#ffe8dd; --pop-tom-anel:#fff4ee }
.pop__ico--info    { --pop-tom:#2563a8; --pop-tom-bg:#e2eefb; --pop-tom-anel:#f1f7fd }

.pop__titulo{
  flex:0 0 auto; margin:0;   /* sem isto, páginas sem o reset do jogo (entrar.php, meus-convites.php) herdavam a margem do h2 e o vão ficava o dobro */
  font-size:19px; font-weight:600; line-height:1.25; color:#1a1a1a;
}

/* o conteúdo rola; título e ações ficam à vista */
.pop__corpo{
  flex:1 1 auto; min-height:0; overscroll-behavior:contain; overflow-y:auto;
  /* folga lateral: o overflow recorta o contorno de foco dos campos nas bordas */
  margin:4px -8px 0; padding:2px 8px;
}
/* :where zera a especificidade: qualquer classe própria vence sem !important */
.pop__corpo :where(p){ font-size:14px; line-height:1.55; color:#555; margin-top:9px }
/* strong e só negrito: herda a cor do texto (antes era dourado em todo popup, e tingia até o e-mail do login).
   O dourado do prêmio é a classe .premio-nome, no tom que passa no contraste mínimo (5,3:1). */
.pop__corpo :where(p strong){ color:inherit }
.premio-nome{ color:#8a6500 }

.pop__lista{ margin-top:16px; text-align:left }
.pop__lista:empty{ display:none }
.pop__aviso{
  margin-top:10px; padding:8px 11px; border-radius:10px;
  background:#fdf6df; color:#8a6a00; font-size:12.5px; line-height:1.45;
}
.pop__vazio{ padding:24px 8px; text-align:center; font-size:13.5px; color:#777 }
.pop__erro{
  margin-top:12px; padding:10px 12px; border-radius:9px;
  background:#fdecea; border:1px solid #f5c2bd; color:#a33a2b;
  font-size:13px; line-height:1.45;
}

.pop__acoes{ flex:0 0 auto; display:flex; flex-direction:column; gap:9px; margin-top:20px }
/* O .bt do site é claro, feito para o fundo escuro; sobre o cartão branco
   ele quase some. No popup o botão principal é escuro. */
.pop__acoes .bt{ width:100%; padding:13px; font-size:14px; background:#1a1a1a; color:#fff }
.pop__acoes .bt:hover{ background:#000; color:#fff }
.pop__acoes .bt--vazio{
  background:transparent; color:#666; border:1px solid #d8d8d8; font-weight:500;
}
.pop__acoes .bt--vazio:hover{ background:#f3f3f3; color:#1a1a1a; border-color:#c4c4c4 }

/* caixa do link, no popup de convite publicado */
.pop__link{
  display:flex; gap:8px; align-items:center; margin-top:18px;
  padding:8px 8px 8px 12px; background:#f5f5f5; border:1px solid #e4e4e4; border-radius:10px;
}
.pop__link input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:#333; font:inherit; font-size:13px; overflow:hidden; text-overflow:ellipsis;
}
.pop__link button{
  border:0; border-radius:7px; background:#1a1a1a; color:#fff; cursor:pointer;
  padding:8px 14px; font:inherit; font-size:12.5px; font-weight:600;
}

/* ─── peças usadas pelos popups do jogo, do login e do cadastro ─── */

/* agrupa sem criar uma caixa: os filhos entram direto no flex do cartão.
   Serve para alternar dois conteúdos (ex.: aviso simples x perfil do comprador). */
.pop__grupo{ display:contents }

/* em vez do círculo com ícone, uma imagem maior (ex.: o envelope das boas-vindas) */
.pop__hero{ flex:0 0 auto; display:flex; justify-content:center; margin:-4px 0 12px }
/* 104px: testado com o envelope real (211x189) ao lado de 88, 100, 120 e 150; 150 dominava o popup */
.pop__hero img{ display:block; width:104px; max-width:60%; height:auto }

/* avatar de quem comprou o bloco */
.pop__avatar{
  flex:0 0 auto; width:78px; height:78px; margin:0 auto 12px; border-radius:50%;
  object-fit:cover; background:#eee; border:3px solid #e6e6e6;
}
.pop__avatar.is-winner{ border-color:#e0a800; box-shadow:0 0 0 5px rgba(224,168,0,.22) }
.pop__corpo .pop__status{ font-weight:700; color:#1b8a3a }
.pop__corpo .pop__status.is-winner{ color:#8a6500 }
.pop__corpo .pop__premio{ font-size:13px; color:#666 }
.pop__corpo .pop__premio.is-winner{ font-weight:700; color:#8a6500 }

/* checkout */
.pop__preco{ margin:14px 0 4px; font-size:2rem; font-weight:800; color:#1b8a3a }
.pop__opcoes{ display:flex; flex-direction:column; gap:10px; margin-top:16px; text-align:left }
.pop__opcao{
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  border:2px solid #e8e8e8; border-radius:12px; font-weight:600; color:#333;
}
.pop__opcao:hover{ border-color:#c9c9c9 }
.pop__opcao input{ width:18px; height:18px; accent-color:#1a1a1a; margin:0 }
.pop__opcao:has(input:checked){ border-color:#1a1a1a; background:#fafafa }
.pop__qr{
  display:flex; align-items:center; justify-content:center; height:150px; margin:14px auto 0;
  width:150px; border:2px dashed #d6d6d6; border-radius:14px; color:#999;
  font-size:12px; letter-spacing:.14em;
}

/* Pix (pagamento ligado): QR, copia e cola, contagem e estado */
.pix{ width:100%; text-align:center }
.pix[hidden], #pixPronto[hidden], .pix__msg[hidden], .pix__erro[hidden]{ display:none }
.pix__msg{ margin:26px 0; color:#666; font-weight:600 }
.pix__valor{ font-size:1.7rem; font-weight:800; color:#1b8a3a; margin:2px 0 10px }
.pix__qr{ width:min(210px, 56vw); aspect-ratio:1; margin:0 auto; padding:8px; background:#fff;
  border:1px solid #e3e3e3; border-radius:14px; box-sizing:border-box }
.pix__qr svg{ display:block; width:100%; height:100% }
.pix__copia{ display:flex; gap:8px; margin-top:12px; align-items:stretch }
.pix__copia input{ flex:1; min-width:0; padding:10px 12px; border:1px solid #d6d6d6; border-radius:10px; background:#fafafa;
  color:#333; font:inherit; font-size:13px; text-overflow:ellipsis }
.pix__copia .bt{ flex:0 0 auto; width:auto; padding:0 16px; background:#fff; color:#1a1a1a; border:1px solid #1a1a1a; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer }
.pix__copia .bt:hover{ background:#f3f3f3 }
.pix__ajuda{ margin:10px 0 0; font-size:12.5px; color:#777; line-height:1.4 }
.pix__tempo{ margin:10px 0 0; font-size:14px; color:#444 }
.pix__tempo b{ font-variant-numeric:tabular-nums }
.pix__estado{ margin:6px 0 0; font-size:13px; color:#666; min-height:1.3em }
.pix__erro{ margin:18px 0 6px }
/* Cartao (formulario do Mercado Pago dentro do popup) */
.cartaoreal{ width:100%; text-align:center }
.cartaoreal[hidden], #cartaoAnalise[hidden], #cartaoBrick[hidden]{ display:none }
.cartaoreal #cartaoBrick{ text-align:left; margin-top:6px }
.cartaoreal__titulo{ margin:18px 0 4px; font-size:1.05rem; font-weight:700; color:#1a1a1a }

/* formulários dentro de popup (completar cadastro) */
.pop__campo{ display:block; margin-top:14px; text-align:left }
.pop__campo > span{ display:block; margin-bottom:6px; font-size:12px; font-weight:500; color:#666 }
.pop__campo input{
  width:100%; padding:12px; border:1px solid #d6d6d6; border-radius:10px;
  background:#fafafa; color:#1a1a1a; font:inherit; font-size:14.5px;
}
.pop__campo input:focus{ outline:2px solid #1a1a1a; outline-offset:1px; background:#fff }
/* popup de cadastro: a frase de abertura ficou com 3 linhas; os campos ficam um pouco mais juntos
   para o cartao seguir cabendo sem rolagem nos mesmos tamanhos de tela */
#popCadastro .pop__campo{ margin-top:11px }
/* o aviso de erro do cadastro fica entre o título e os campos, fora da área que rola */
#popCadastro .pop__erro{ flex:0 0 auto; margin:12px 0 0; text-align:left }
/* todos os campos do cadastro com a mesma altura de linha; o de data (Nascimento) não pode ser mais largo nem mais alto que os outros:
   no iPhone ele ignora a largura e estica o cartão, e sem "appearance:none" tem altura própria */
#popCadastro .pop__campo input{ line-height:1.2 }
#popCadastro .pop__campo input[type=date]{
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; min-width:0; max-width:100%; box-sizing:border-box; text-align:left;
  height:calc(1.2em + 26px);                   /* = os outros campos: linha + 2×12px de respiro + 2×1px de borda */
}
#popCadastro .pop__campo input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; min-height:1.2em }
#popCadastro .pop__campo input[type=date]::-webkit-datetime-edit,
#popCadastro .pop__campo input[type=date]::-webkit-datetime-edit-fields-wrapper{ padding:0 }
/* iPhone: campo com letra menor que 16px faz o Safari dar zoom na página ao focar, e o cartão "estica" */
@supports (-webkit-touch-callout:none){
  #popCadastro .pop__campo input[type=text], #popCadastro .pop__campo input[type=date]{ font-size:16px }
}
/* equilibra as linhas da frase de abertura: sem palavra sozinha na ultima linha (navegador antigo ignora) */
#popCadastro .pop__corpo > p{ text-wrap:balance }
.pop__linha{ display:flex; gap:12px }
.pop__linha .pop__campo{ flex:1; min-width:0 }
.pop__aceite{
  display:flex; align-items:flex-start; gap:10px; margin-top:18px; text-align:left;
  font-size:13px; line-height:1.5; color:#444;
}
.pop__aceite input{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:#1a1a1a }
.pop__aceite a{ color:#1a1a1a; text-decoration:underline }
.pop__corpo .pop__nota{ font-size:11.5px; line-height:1.5; color:#777; margin-top:14px }

/* botões: dois lado a lado (voltar + avançar) e as cores de ação */
.pop__acoes--linha{ flex-direction:row }
.pop__acoes--linha .bt{ flex:1; width:auto }
.pop__acoes--linha .bt--vazio{ flex:0 0 auto; padding:13px 18px }
.pop__acoes .bt--ok{ background:#1b8a3a }
.pop__acoes .bt--ok:hover{ background:#157030 }
.pop__acoes .bt--acento{ background:#e67e22 }
/* link discreto no fim do popup (ex.: "Já participou? Entre"): ajuda sem competir com os botões */
.pop__textobt{
  align-self:center; margin-top:10px; padding:6px 10px; border:0; background:none;
  font:inherit; font-size:13px; color:#555; text-decoration:underline; cursor:pointer;
}
.pop__textobt:hover{ color:#1a1a1a }
.pop__textobt[hidden]{ display:none }
.pop__acoes .bt--acento:hover{ background:#cf6f1a }

@media (max-width:520px){
  .pop__linha{ flex-direction:column; gap:0 }
}

/* ─── animações: só transform e opacity ─── */
@keyframes pop-fundo{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pop-entra{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .pop, .pop__cx{ animation:none } }

/* ─── celular: o mesmo cartão centralizado, só com menos folga ─── */
@media (max-width:640px){
  .pop{ padding:14px }
  .pop__cx{ padding:32px 18px 20px }
}

/* rolagem da página travada enquanto há popup aberto.
   Testado em Chrome real: reservar o espaço da barra (scrollbar-gutter)
   deixava uma faixa de 10px à direita sem escurecer. Sem a reserva o
   overlay cobre a tela inteira, e o pequeno deslocamento do fundo acontece
   por baixo do desfoque, onde quase não se nota. */
html.pop-aberto{ overflow:hidden }

.pSort{
  display:flex;align-items:center;gap:11px;padding:9px 10px;
  border-radius:10px;background:rgba(224,168,0,.09);margin-bottom:7px;
}
.pSort img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#eee}
.pSort b{display:block;font-size:14px;font-weight:600;color:#1a1a1a}
.pSort span{display:block;font-size:12px;color:#8a6500}

/* item neutro da lista (participante sem premio) */
.pSort--normal{background:#f4f4f4}
.pSort--normal span{color:#777}

/* ─────────── pedido de saque ─────────── */
.sq-linhas{ margin-top:18px; text-align:left }
.sq-linhas div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid #eee;
}
.sq-linhas span{ font-size:13.5px; color:#666 }
.sq-linhas b{ font-size:14.5px; font-weight:600; color:#1a1a1a }
.sq-taxa{ color:#a33a2b }
/* o passo do codigo do saque: o botao a mesma distancia do link de reenvio que no passo do codigo do login (6px, em vez dos 20px dos popups) */
.sq-passo-codigo .pop__acoes{ margin-top:6px }
.sq-total{ border-bottom:0; padding-top:12px }
.sq-total span{ font-weight:600; color:#1a1a1a }
.sq-total b{ font-size:22px; color:#1a7a39 }
.sq-linhas--frio .sq-total b{ color:#1a1a1a }
.sq-chave{
  margin-top:12px; font-size:12.5px; color:#8a8a8a;
}

/* situação do saque no cartão */
.sqBox{ border-radius:12px; padding:12px 14px; margin-top:12px; border:1px solid }
.sq--analise{ background:rgba(62,124,177,.1); border-color:rgba(62,124,177,.4) }
.sq--ok{ background:rgba(33,162,73,.1); border-color:rgba(33,162,73,.4) }
.sq--erro{ background:rgba(255,77,46,.1); border-color:rgba(255,77,46,.4) }

/* ─── campos com 16px no celular ───────────────────────────────────────────────────────────
   O Safari do iPhone AMPLIA a tela quando se toca num campo com fonte menor que 16px (e quase nunca volta sozinho).
   Os campos do site têm 13 a 14,5px, então aqui eles ficam com 16px em tela de toque ou estreita. É uma regra de
   plataforma, por isso vale sobre qualquer outra (!important). Não usamos maximum-scale=1 no viewport: ele tiraria o
   zoom de acessibilidade de quem precisa. O campo oculto do gerenciador de senhas (.auth-oculto) nunca recebe foco. */
@media (pointer: coarse), (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]):not(.auth-oculto),
  select, textarea { font-size: 16px !important; }
}