/* ============================================================
   estilos.css — Urafiki Pay · Tema claro "Marfim Quente"
   ------------------------------------------------------------
   Para reverter ao tema escuro anterior: ver bloco comentado
   ":root — PALETA ESCURA (anterior)" no fim deste ficheiro.
   ============================================================ */
:root{
  /* fundo — marfim uniforme; sem varrimento de cor (era o que fazia o
     topo parecer quente e o fundo da página branco, como se fossem
     duas páginas coladas) */
  --bg-1:#F6F2EA; --bg-2:#F6F2EA;
  --lavagem-1:rgba(255,150,60,.10);   /* halo quente, canto sup. dto */
  --lavagem-2:rgba(14,147,132,.06);   /* halo verde-petróleo, esq.  */

  /* superfícies */
  --glass:#FFFDFA; --glass-border:#E8DFD1;
  --surface:#FFFDFA; --surface-2:#F4EFE6;
  --border:#E8DFD1; --border-forte:#DCCFBB;
  --sombra:0 1px 2px rgba(60,45,25,.05), 0 12px 30px rgba(60,45,25,.08);

  /* texto */
  --txt:#25201A; --txt-2:#6E655A;

  /* marca / acção */
  --accent-a:#0E9384; --accent-b:#0B7C6E;
  --cta-txt:#FFFFFF;

  /* canais (tom escurecido o suficiente para ler sobre marfim) */
  --mpesa:#C2201C; --emola:#B45309; --mkesh:#8A6D00; --entidade:#0E9384;
  --ok:#0F7A56; --erro:#C2371F; --info:#1D6FE0;

  /* compatibilidade com styles inline antigos nas páginas PHP
     (estes tokens eram usados no HTML mas nunca existiram) */
  --surface-1:var(--surface-2); --text-secondary:var(--txt-2); --text-muted:var(--txt-3);
  --txt-3:#8A8074;
}
*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
/* a interface cresce com o ecrã: 16px até ~1450px de largura, 19,5px a
   partir de ~2100px. Como quase tudo está em rem, o cartão inteiro
   acompanha e deixa de ficar uma ilha pequena num monitor grande. */
html{ background:var(--bg-1); font-size:clamp(16px, 0.55vw + 8px, 19.5px); }
body{
  /* coluna: conteúdo ao centro do ecrã, rodapé sempre encostado ao fundo,
     mesmo quando a página é curta (era daqui o vazio a meio da página) */
  display:flex; flex-direction:column; min-height:100vh;
  margin:0; color:var(--txt);
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(1100px 700px at 92% -10%, var(--lavagem-1) 0%, transparent 60%),
    radial-gradient(900px 620px at -10% 45%, var(--lavagem-2) 0%, transparent 55%),
    var(--bg-1);
  background-attachment:fixed; overflow-x:hidden;
}
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; margin:0; }
a{ color:var(--accent-a); text-decoration:none; cursor:pointer; font-weight:600; }

/* halos decorativos — quase imperceptíveis no tema claro (com opacidade
   alta faziam nódoas verdes/laranja nos cantos do ecrã) */
.orb{ position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; opacity:.5; }
.orb-1{ width:420px;height:420px; background:rgba(255,168,80,.16); top:-190px; right:-150px; animation:flutuar 14s ease-in-out infinite; }
.orb-2{ width:380px;height:380px; background:rgba(14,147,132,.10); bottom:-210px; left:-170px; animation:flutuar 18s ease-in-out infinite reverse; }
@keyframes flutuar{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-25px)} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{
  position:relative; z-index:2; width:100%; max-width:min(74rem, 94vw); margin:0 auto;
  padding:1.6rem 1.1rem 2.1rem;
  /* ocupa o espaço livre e centra o conteúdo verticalmente em ecrãs altos;
     flex:1 0 auto garante que nunca corta o topo em ecrãs baixos */
  flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; gap:1.35rem;
}
.wrap > .topo{ margin-bottom:0; }
.glass{
  background:var(--surface); border:1px solid var(--border); border-radius:1.35rem;
  box-shadow:var(--sombra);
}
.glass-soft{ background:var(--surface-2); border:1px solid var(--border); border-radius:.9rem; }

.topo{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.logo{ font-family:'Space Grotesk'; font-weight:700; font-size:1.3rem; color:var(--txt); }
.logo span{ background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo-img{ height:40px; width:auto; object-fit:contain; border-radius:8px; filter:drop-shadow(0 2px 8px rgba(60,45,25,.18)); }
.tag-proto{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-2);
  background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:.35rem .8rem; }

.painel{ padding:1.5rem; }
.avatar{ width:3rem;height:3rem;border-radius:.9rem; display:grid;place-items:center;
  font-family:'Space Grotesk'; font-weight:700; background:linear-gradient(135deg,#2F6FE4,#1E4FA8); color:#fff; }
.rotulo{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); }
.total{ font-family:'Space Grotesk'; font-weight:700; font-size:2.3rem; line-height:1.1; }
.total small{ font-size:1rem; font-weight:500; color:var(--txt-2); }
.linha{ display:flex; justify-content:space-between; font-size:.87rem; color:var(--txt-2); padding:.4rem 0; }
.linha b{ color:var(--txt); font-weight:600; }
.divisor{ border-top:1px dashed var(--border-forte); margin:.5rem 0; }
.crono{ color:var(--txt); font-weight:700; font-variant-numeric:tabular-nums; }
.nota{ font-size:.78rem; color:var(--txt-2); line-height:1.6; }
.nota b{ color:var(--txt); }
.nota a{ color:var(--accent-a); }

.grid-checkout{ display:grid; grid-template-columns:2fr 3fr; gap:1rem; }
@media (max-width:860px){ .grid-checkout{ grid-template-columns:1fr; } }
/* em monitores grandes o cartão respira mais e o valor ganha peso, para
   não parecer um selo perdido no meio do ecrã */
@media (min-width:1500px) and (min-height:850px){
  .painel{ padding:1.9rem; }
  .total{ font-size:2.7rem; }
  .tiles{ margin:1.1rem 0 1.4rem; }
}

.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:.65rem; margin:.9rem 0 1.15rem; }
@media (max-width:760px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
.tile{
  cursor:pointer; text-align:center; padding:.9rem .4rem .75rem; border-radius:1rem;
  background:var(--surface); border:1.5px solid var(--border);
  transition:transform .18s ease, border-color .18s ease, box-shadow .25s ease, background .18s ease;
  /* coluna: as taxas encostam ao fundo e ficam alinhadas entre tiles,
     mesmo quando um nome ocupa duas linhas (Entidade e Referência) */
  display:flex; flex-direction:column;
}
.tile:hover{ transform:translateY(-3px); border-color:var(--border-forte); }
.tile .ic{ width:2.75rem;height:2.75rem;border-radius:.75rem;display:grid;place-items:center;margin:0 auto .45rem;
  font-family:'Space Grotesk';font-weight:700;font-size:.72rem;color:#fff; }
/* o HTML traz width/height="44" nas imagens; sem isto os logótipos não
   acompanhavam o resto da interface em ecrãs grandes */
.tile .ic img{ width:100%; height:100%; object-fit:contain; border-radius:.75rem; }
.tile .ic.logo-pag{ background:transparent; font-size:0; overflow:hidden; }
.tile[data-c="mpesa"] .ic{ background:linear-gradient(135deg,#ff6b6b,#E5202E); }
.tile[data-c="emola"] .ic{ background:linear-gradient(135deg,#ffb057,#F07E13); }
.tile[data-c="mkesh"] .ic{ background:linear-gradient(135deg,#fde047,#FACC15); color:#1a1502; }
.tile[data-c="entidade"] .ic{ background:transparent; }
.tile[data-c="reference"] .ic{ background:transparent; }
.tile .nm{ font-weight:600; font-size:.86rem; }
.tile .pf{ font-size:.68rem; color:var(--txt-2); }
/* sobretaxa em tom neutro (uma cor por canal fazia cinco cores diferentes
   na mesma linha); só o desconto fica verde, por ser boa notícia */
.tile .taxas{ margin-top:auto; padding-top:.4rem; }
.tile .tx{ font-size:.7rem; font-weight:600; color:var(--txt-2); }
.tile .tx.desconto{ color:var(--ok); margin-top:2px; }

/* seleccionado: contorno da marca + tinta suave (sem brilho neon) */
.tile.ativo{ background:var(--sel-bg,var(--surface)); border-color:var(--sel,var(--txt));
  box-shadow:0 0 0 1px var(--sel,var(--txt)), 0 10px 24px var(--sel-sombra,rgba(60,45,25,.14)); }
.tile.ativo[data-c="mpesa"]{ --sel:#E5202E; --sel-bg:#FEF3F2; --sel-sombra:rgba(229,32,46,.20); }
.tile.ativo[data-c="emola"]{ --sel:#F07E13; --sel-bg:#FFF7ED; --sel-sombra:rgba(240,126,19,.20); }
.tile.ativo[data-c="mkesh"]{ --sel:#C9A400; --sel-bg:#FEFAE7; --sel-sombra:rgba(201,164,0,.20); }
.tile.ativo[data-c="entidade"]{ --sel:#0E9384; --sel-bg:#EFFAF7; --sel-sombra:rgba(14,147,132,.20); }
.tile.ativo[data-c="reference"]{ --sel:#0E9384; --sel-bg:#EFFAF7; --sel-sombra:rgba(14,147,132,.20); }
.tile.ativo[data-c="cartao"], .tile.ativo[data-c="visa"]{ --sel:#1A3FAA; --sel-bg:#EFF4FE; --sel-sombra:rgba(26,63,170,.20); }
.tile.pulso{ animation:pulso .5s ease; }
@keyframes pulso{ 50%{ transform:scale(1.05);} }

.campo-tel{ display:flex; }
.campo-tel .pref{ background:var(--surface-2); border:1.5px solid var(--border-forte); border-right:0;
  border-radius:.85rem 0 0 .85rem; padding:.85rem .95rem; font-weight:700; color:var(--txt-2); }
.campo-tel input{
  flex:1; min-width:0; background:#FFFFFF; border:1.5px solid var(--border-forte);
  border-radius:0 .85rem .85rem 0; padding:.85rem 1rem; font-size:1rem; color:var(--txt); outline:none;
  font-family:inherit;
}
.campo-tel input.solto{ border-radius:.85rem; }
.campo-tel input:focus{ border-color:var(--accent-a); box-shadow:0 0 0 3px rgba(14,147,132,.16); }
.campo-tel input::placeholder{ color:var(--txt-2); opacity:.6; }
.dica{ min-height:1.3rem; font-size:.78rem; margin:.4rem 0 1rem; color:var(--txt-2); }
.dica.mpesa{ color:var(--mpesa); } .dica.emola{ color:var(--emola); }
.dica.mkesh{ color:var(--mkesh); } .dica.entidade{ color:var(--entidade); }

.btn{
  display:block; width:100%; border:0; cursor:pointer; border-radius:.95rem; padding:1rem;
  font-family:'Space Grotesk'; font-weight:700; font-size:1rem; color:var(--cta-txt); text-align:center;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  box-shadow:0 12px 26px rgba(14,147,132,.28); transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(14,147,132,.32); }
.btn.fantasma{ background:transparent; border:1.5px solid var(--border-forte); color:var(--txt); box-shadow:none; }
.btn.fantasma:hover{ background:var(--surface-2); }
.selos{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.selo{ font-size:.66rem; font-weight:700; letter-spacing:.05em; border-radius:.5rem; padding:.3rem .6rem;
  background:var(--surface-2); border:1px solid var(--border); color:var(--txt-2); }

/* rodapé do site — encostado ao fundo do ecrã, com o filete alinhado à
   largura do conteúdo (a linha de ponta a ponta partia a página em duas) */
.rodape-site{
  position:relative; z-index:2; flex:0 0 auto;
  padding:0 18px 26px; text-align:center; font-size:.88rem; color:var(--txt-2);
}
.rodape-site .rodape-interior{
  max-width:1080px; margin:0 auto; padding-top:22px; border-top:1px solid var(--border);
}
.rodape-site a{ color:var(--txt-2); font-weight:500; }
.rodape-site a:hover{ color:var(--txt); }
.rodape-site .ponto-sep{ color:var(--border-forte); margin:0 10px; }
.rodape-site .copyright{ margin-top:10px; font-size:.82rem; color:var(--txt-3); }
/* no telemóvel o selo fixo tapava os métodos de pagamento ao rolar;
   o selo SSL continua visível na fila de selos por baixo do botão */
@media (max-width:760px){ .tag-fixo{ display:none; } }

.centro{ display:flex; justify-content:center; padding:0; }
.cartao-estado{ max-width:400px; width:100%; text-align:center; padding:2.2rem 1.8rem; }
.anel{ width:70px;height:70px; margin:0 auto 1.2rem; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--accent-a); animation:girar 1s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg);} }
.contador{ font-family:'Space Grotesk'; font-weight:700; font-size:1.7rem; color:var(--accent-a); font-variant-numeric:tabular-nums; }
.icone-fim{ width:78px;height:78px; margin:0 auto 1.1rem; border-radius:50%; display:grid; place-items:center; font-size:2rem; }
.icone-fim.ok{ background:rgba(15,122,86,.10); color:var(--ok); border:2px solid rgba(15,122,86,.35); }
.icone-fim.mau{ background:rgba(194,55,31,.10); color:var(--erro); border:2px solid rgba(194,55,31,.35); }
.mini-links{ font-size:.8rem; color:var(--txt-2); margin-top:1rem; line-height:1.9; }
.duplo{ display:flex; gap:10px; margin-top:1rem; }
.duplo .btn{ flex:1; }

/* ============================================================
   :root — PALETA ESCURA (anterior). Para reverter, descomentar
   este bloco e comentar as cores do :root no topo do ficheiro;
   as regras que dependem de tokens seguem automaticamente,
   mas as superfícies claras (.glass, .tile, .campo-tel input,
   .selo) precisam de voltar aos valores translúcidos originais
   guardados na pasta de backup .backup-tema-claro-DATA/
   ============================================================ */
/*
:root{
  --bg-1:#070F1F; --bg-2:#0E2A47;
  --glass:rgba(255,255,255,.07); --glass-border:rgba(255,255,255,.15);
  --txt:#EAF2FA; --txt-2:rgba(234,242,250,.62);
  --accent-a:#2DD4BF; --accent-b:#3B82F6;
  --mpesa:#FF3B3B; --emola:#FF8A1E; --mkesh:#FACC15; --entidade:#2DD4BF;
  --ok:#34D399; --erro:#F87171;
}
*/