/* =============================================================
   CHECKOUT v2 — página única, pensada primeiro para o celular.

   Estrutura inspirada nos checkouts que mais vendem (Kiwify/Cakto):
   contador → banner → produto → dados → Pix → adicionais → total →
   botão → pilha de valor → garantia.

   Carregado DEPOIS de checkout.css, que continua servindo a página
   de obrigado. O que está aqui sobrescreve só o que o checkout usa.
   ============================================================= */

.page-checkout{background:var(--soft)}

/* ---------- contador ---------- */
.co-timer{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:9px 16px;
  background:linear-gradient(90deg,#E0483C,#F2663B);color:#fff;
  box-shadow:0 4px 14px rgba(224,72,60,.3);
}
.co-timer b{
  font-size:22px;font-weight:900;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.co-timer span{font-size:13px;font-weight:800;line-height:1.2}
.co-timer.zerado b{animation:co-pisca 1s steps(2) infinite}
@keyframes co-pisca{50%{opacity:.35}}

/* ---------- banner ---------- */
.co-banner{
  position:relative;overflow:hidden;text-align:center;
  padding:18px 16px 22px;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.16) 0 70px,transparent 71px),
    radial-gradient(circle at 92% 70%,rgba(255,255,255,.12) 0 110px,transparent 111px),
    linear-gradient(160deg,#3478F6 0%,#2359C4 100%);
  color:#fff;
}
.co-banner-logo{
  display:flex;width:max-content;margin:0 auto;align-items:center;gap:8px;
  color:#fff;text-decoration:none;font-weight:900;font-size:15px;opacity:.95;
}
.co-banner-logo i{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.18);font-style:normal;font-size:14px;
}
.co-banner-kicker{
  display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;
  background:var(--yellow);color:#272B35;
  font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.co-banner-titulo{
  max-width:520px;margin:10px auto 0;
  font-size:clamp(22px,6.4vw,32px);line-height:1.15;color:#fff;
}

/* leque de capas */
.co-leque{
  position:relative;margin:18px auto 0;
  width:min(100%,460px);aspect-ratio:460/230;
}
.co-leque img{
  position:absolute;bottom:0;
  width:21%;height:auto;aspect-ratio:210/300;object-fit:cover;
  left:calc(7% + var(--i) * 13.2%);
  transform:translateY(var(--y)) rotate(var(--r));
  transform-origin:50% 100%;
  border-radius:8px;
  box-shadow:0 10px 22px rgba(10,30,80,.4);
  border:2px solid rgba(255,255,255,.85);
}
.co-leque img:nth-child(3),.co-leque img:nth-child(4){z-index:2}
.co-leque img:nth-child(2),.co-leque img:nth-child(5){z-index:1}

.co-selo-bola{
  position:absolute;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:25%;aspect-ratio:1;border-radius:50%;
  font-size:clamp(9px,2.6vw,12px);font-weight:900;text-transform:uppercase;line-height:1.05;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.co-selo-bola b{font-size:clamp(22px,7vw,32px);line-height:1;text-transform:none}
.co-selo-bola--rosa{left:-2%;top:-4%;background:var(--pink);color:#fff;transform:rotate(-10deg)}
.co-selo-bola--amarela{right:-2%;top:-6%;background:var(--yellow);color:#272B35;transform:rotate(9deg)}
.co-selo-bola--amarela b{font-size:clamp(17px,5.2vw,24px);letter-spacing:-.02em}
.co-selo-bola--amarela small{font-size:clamp(9px,2.5vw,11px);text-transform:none}
.co-selo-bola--amarela s{text-decoration-color:var(--red);text-decoration-thickness:2px}

.co-banner-selos{
  list-style:none;margin:34px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;
}
.co-banner-selos li{
  padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:11.5px;font-weight:800;white-space:nowrap;
}
@media (max-width:380px){.co-banner-selos li{font-size:10.5px;padding:4px 7px}}

/* ---------- coluna única ---------- */
.co-main{padding:18px 12px 48px;background:transparent}
.co-coluna{max-width:560px;margin-inline:auto}
.co-coluna > * + *{margin-top:16px}
.co-card{padding:20px 16px;border-radius:20px}
@media (min-width:600px){.co-card{padding:26px 24px}}

/* ---------- produto ---------- */
.co-produto{
  display:flex;gap:14px;align-items:center;
  margin:0;padding:0 0 16px;background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--line);
}
.co-produto-foto{
  width:64px;height:auto;flex:none;aspect-ratio:210/300;object-fit:cover;
  border-radius:8px;box-shadow:0 5px 12px rgba(39,43,53,.18);
}
.co-produto-txt{min-width:0}
.co-produto-txt > b{display:block;font-size:16px;font-weight:900;line-height:1.2}
.co-produto-txt > small{display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--muted)}
.co-produto-preco{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.co-produto-preco s{font-size:14px;font-weight:800;color:var(--muted);text-decoration-color:var(--red);text-decoration-thickness:2px}
.co-produto-preco b{font-size:22px;font-weight:900;color:var(--green-d);line-height:1}
.co-pct{
  padding:3px 8px;border-radius:999px;background:var(--red);color:#fff;
  font-size:12px;font-weight:900;
}

/* ---------- seções do formulário ---------- */
.co-secao{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 12px;font-size:17px;font-weight:900;
}
.co-secao span{
  width:24px;height:24px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:13px;
}
.co-secao-sub{margin:-6px 0 12px;font-size:13px;font-weight:700;color:var(--muted)}

/* campos maiores: no celular, 16px evita o zoom automático do iOS */
.co-campo input{font-size:16px;min-height:50px}

/* ---------- método Pix ---------- */
.co-metodo-pix{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  border:2px solid var(--green);
  background:color-mix(in srgb,var(--green) 9%,var(--card));
}
.co-metodo-ic{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:grid;place-items:center;background:#32BCAD;color:#fff;
}
.co-metodo-ic svg{width:22px;height:22px}
.co-metodo-txt{display:flex;flex-direction:column;min-width:0}
.co-metodo-txt b{font-size:16px;font-weight:900}
.co-metodo-txt small{font-size:12.5px;font-weight:700;color:var(--muted)}
.co-metodo-ok{
  margin-left:auto;width:24px;height:24px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900;font-size:14px;
}

/* ---------- adicionais (estilo Cakto/Kiwify) ---------- */
.co-bump{
  display:block;margin:0;cursor:pointer;overflow:hidden;
  border-radius:16px;border:2px dashed var(--orange);
  background:color-mix(in srgb,var(--yellow) 10%,var(--card));
  box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.co-bump + .co-bump{margin-top:12px}
.co-bump:has(input:checked){
  border-style:solid;border-color:var(--green);
  background:color-mix(in srgb,var(--green) 9%,var(--card));
  box-shadow:0 8px 20px rgba(35,147,91,.18);
}
.co-bump-tag{
  display:block;padding:8px 12px;text-align:center;
  background:var(--orange);color:#fff;
  font-size:12.5px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;line-height:1.25;
}
.co-bump:has(input:checked) .co-bump-tag{background:var(--green-d)}

.co-bump-corpo{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 10px}
.co-bump-foto{
  width:86px;height:auto;flex:none;aspect-ratio:1;object-fit:cover;
  border-radius:10px;box-shadow:0 4px 10px rgba(39,43,53,.18);
}
.co-bump-nome{display:block;font-size:15.5px;font-weight:900;line-height:1.25}
.co-bump-desc{margin-top:3px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.4}
.co-bump-preco{
  display:block;margin-top:6px;padding:0;border:0;
  font-size:19px;font-weight:900;color:var(--green-d);
}
.co-bump-preco small{font-size:12px;font-weight:800;color:var(--muted)}

/* barra "Sim, quero adicionar!" com a seta apontando para a caixinha */
.co-bump-acao{
  display:flex;align-items:center;gap:10px;
  margin:0 12px 12px;padding:11px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--yellow) 30%,var(--card));
  font-size:15px;font-weight:900;
}
.co-bump:has(input:checked) .co-bump-acao{background:color-mix(in srgb,var(--green) 22%,var(--card))}
.co-bump-seta{
  color:var(--red);font-size:22px;line-height:1;
  animation:co-seta 1s ease-in-out infinite;
}
@keyframes co-seta{50%{transform:translateX(4px)}}
.co-bump:has(input:checked) .co-bump-seta{visibility:hidden;animation:none}
.co-bump-acao input{
  appearance:none;-webkit-appearance:none;
  width:26px;height:26px;flex:none;margin:0;
  border:2.5px solid var(--orange);border-radius:7px;background:var(--card);
  display:grid;place-items:center;cursor:pointer;
}
.co-bump-acao input::after{
  content:"✓";font-size:16px;font-weight:900;color:#fff;
  transform:scale(0);transition:transform .14s ease;
}
.co-bump-acao input:checked{background:var(--green);border-color:var(--green)}
.co-bump-acao input:checked::after{transform:scale(1)}

/* ---------- resumo e botão ---------- */
.co-lines{margin-top:20px}
.co-lines li b s{font-size:12.5px;color:var(--muted);font-weight:800;margin-right:4px}
.co-lines li.co-total{background:var(--card);border:2px solid var(--line);box-shadow:none;color:var(--text)}
.co-lines li.co-total b{color:var(--green-d)}

.co-btn--verde{
  width:100%;max-width:none;padding:20px;border-radius:14px;
  background:linear-gradient(180deg,#2FBF6B,#23935B);background-size:auto;
  color:#fff;font-size:19px;letter-spacing:.03em;
  animation:co-pulso-verde 2.2s ease-in-out infinite;
  box-shadow:0 10px 22px rgba(35,147,91,.35),inset 0 -3px 0 rgba(0,0,0,.18);
}
.co-btn--verde::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
.co-btn--verde:hover{box-shadow:0 14px 26px rgba(35,147,91,.42),inset 0 -3px 0 rgba(0,0,0,.18)}
@keyframes co-pulso-verde{
  0%,100%{box-shadow:0 10px 22px rgba(35,147,91,.35),inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 0 rgba(47,191,107,.45)}
  50%{box-shadow:0 10px 22px rgba(35,147,91,.35),inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 10px rgba(47,191,107,0)}
}
.co-btn-linha{margin-top:16px}
.co-seguro{font-size:13px;font-weight:800;color:var(--muted);text-align:center}
.co-aceite{
  margin-top:14px;font-size:11.5px;font-weight:600;line-height:1.5;
  color:var(--muted);text-align:center;
}
.co-aceite a{color:var(--blue);font-weight:800}

/* ---------- pilha de valor ---------- */
.co-valor h2{text-align:center;font-size:20px}
.co-valor-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.co-valor-lista li{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;border-radius:12px;background:var(--soft);
  font-size:14.5px;font-weight:800;
}
.co-valor-lista img{
  width:34px;height:auto;flex:none;aspect-ratio:210/300;object-fit:cover;border-radius:5px;
}
.co-valor-extra{margin-top:10px;text-align:center;font-size:14px;font-weight:800;color:var(--muted)}
.co-valor-total{
  margin-top:16px;padding:16px;border-radius:14px;text-align:center;
  background:color-mix(in srgb,var(--blue) 7%,var(--card));
  border:1px dashed color-mix(in srgb,var(--blue) 40%,var(--card));
}
.co-valor-total p{font-size:16px;font-weight:800}
.co-valor-total p s{color:var(--red);text-decoration-thickness:2px}
.co-valor-total > b{display:block;margin-top:4px;font-size:18px;font-weight:900}
.co-valor-hoje{margin-top:4px}
.co-valor-hoje strong{font-size:24px;font-weight:900;color:var(--green-d)}

/* ---------- garantia ---------- */
.co-garantia{
  display:block;text-align:center;
  padding:22px 18px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.co-garantia-selo{
  position:static;transform:none;margin:0 auto 10px;
  width:92px;height:92px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%,#6FDB9E,var(--green-d));color:#fff;
  box-shadow:0 8px 20px rgba(35,147,91,.35),0 0 0 5px color-mix(in srgb,var(--green) 25%,var(--card));
}
.co-garantia-selo b{font-size:38px;font-weight:900;line-height:.9}
.co-garantia-selo small{font-size:10px;font-weight:900;text-transform:uppercase;line-height:1.1}
.co-garantia h2{font-size:19px}
.co-garantia p{margin-top:6px;font-size:14px;font-weight:700;color:var(--muted);line-height:1.5}
.co-garantia p b{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .co-btn--verde,.co-bump-seta,.co-timer.zerado b{animation:none}
}