/* ═══════════════════════════════════════════════════════════
   AZUL 360 · CHECKOUT — comportamento

   Este arquivo NÃO decide aparência. Cor, tipografia, espaço e forma
   vêm de /design/tokens.css (fonte única de verdade); o visual da
   página vem de theme-ds.css.

   Aqui mora só o que é mecânico: troca de telas, estados de erro,
   ícones e as duas animações funcionais.
   ═══════════════════════════════════════════════════════════ */

/* ── Troca de telas (formulário → PIX → sucesso) ── */
.ck-view{ display:none; }
.ck-view.is-on{ display:block; }

/* ── Erro: só aparece quando o JS marca ── */
.ck-err{ display:none; }
.ck-err.is-on{ display:block; }

/* ── Ícones: máscara para herdarem a cor do texto ──
   Tamanho 1em, então quem controla é o font-size do elemento pai. */
[data-ico]::before{
  content:"";
  display:inline-block;
  width:1em; height:1em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  vertical-align:-.125em;
}
[data-ico="lock"]::before{   -webkit-mask-image:var(--i-lock);   mask-image:var(--i-lock); }
[data-ico="shield"]::before{ -webkit-mask-image:var(--i-shield); mask-image:var(--i-shield); }
[data-ico="check"]::before{  -webkit-mask-image:var(--i-check);  mask-image:var(--i-check); }
[data-ico="arrow"]::before{  -webkit-mask-image:var(--i-arrow);  mask-image:var(--i-arrow); }
[data-ico="pix"]::before{    -webkit-mask-image:var(--i-pix);    mask-image:var(--i-pix); }
[data-ico="card"]::before{   -webkit-mask-image:var(--i-card);   mask-image:var(--i-card); }
[data-ico="back"]::before{   -webkit-mask-image:var(--i-back);   mask-image:var(--i-back); }
[data-ico="doc"]::before{    -webkit-mask-image:var(--i-doc);    mask-image:var(--i-doc); }

/* Traço de 1,5px, geométrico — como manda o sistema */
:root{
  --i-lock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='10.5' width='17' height='11' rx='1.5'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5.5 6v5.2c0 4 2.7 6.9 6.5 8.3 3.8-1.4 6.5-4.3 6.5-8.3V6L12 3.5Z'/%3E%3Cpath d='m9.2 11.9 2 2 3.6-3.8'/%3E%3C/svg%3E");
  --i-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6.5 9 17.5 4 12.5'/%3E%3C/svg%3E");
  --i-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12.5 5.5 19 12 12.5 18.5'/%3E%3C/svg%3E");
  /* Símbolo oficial do Pix (Banco Central). Marca de terceiro usada
     para indicar o meio de pagamento aceito — não é ícone nosso. */
  --i-pix:    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M242.4%20292.5C247.8%20287.1%20257.1%20287.1%20262.5%20292.5L339.5%20369.5C353.7%20383.7%20372.6%20391.5%20392.6%20391.5H407.7L310.6%20488.6C280.3%20518.1%20231.1%20518.1%20200.8%20488.6L103.3%20391.1H112.6C132.6%20391.1%20151.5%20383.3%20165.7%20369.1L242.4%20292.5zM262.5%20218.9C257.1%20224.3%20247.8%20224.3%20242.4%20218.9L165.7%20142.2C151.5%20128%20132.6%20120.2%20112.6%20120.2H103.3L200.8%2022.7C231.1-7.6%20280.3-7.6%20310.6%2022.7L407.7%20119.8H392.6C372.6%20119.8%20353.7%20127.6%20339.5%20141.8L262.5%20218.9zM112.6%20142.7C126.4%20142.7%20139.1%20148.3%20149.7%20158L226.4%20234.7C233.3%20241.6%20242.4%20245.1%20251.5%20245.1C260.6%20245.1%20269.7%20241.6%20276.6%20234.7L353.6%20157.7C363.3%20148%20376.9%20142.4%20390.7%20142.4H430.3L488.6%20200.7C518.9%20231%20518.9%20280.2%20488.6%20310.5L430.3%20368.8H390.7C376.9%20368.8%20363.3%20363.2%20353.6%20353.5L276.6%20276.5C263.1%20263%20240%20263%20226.4%20276.6L149.7%20353.3C139.1%20363%20126.4%20368.6%20112.6%20368.6H80.4L22.7%20310.5C-7.6%20280.2-7.6%20231%2022.7%20200.7L80.4%20142.7H112.6z%27%2F%3E%3C%2Fsvg%3E");
  --i-card:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='1.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");
  --i-back:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
  --i-doc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5A1.5 1.5 0 0 0 6 5v14a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 18 19V7.5Z'/%3E%3Cpath d='M14 3.5V8h4'/%3E%3C/svg%3E");
}

/* ── QR Code: o canvas é injetado pelo JS ── */
.ck-qr-box canvas{ display:block; width:100%; height:auto; }

/* ── Pulso do "aguardando pagamento" ──
   Sem halo: o sistema proíbe sombra. A vida vem da opacidade. */
@keyframes ckRespira{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
.ck-pulse{
  width:7px; height:7px; border-radius:50%;
  flex:0 0 auto;
  animation:ckRespira 1.8s ease-in-out infinite;
}

/* ── Spinner do botão ── */
@keyframes ckGira{ to{ transform:rotate(360deg); } }
.ck-spin{
  width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:ckGira .7s linear infinite;
  display:inline-block;
}

@media (prefers-reduced-motion:reduce){
  .ck-pulse,.ck-spin{ animation:none; }
}