:root{
  --bg:#0b0b12;
  --card:#151525;
  --text:#fff;
  --muted:#cfcfcf;
  --primary:#FFD60A;
  --primary-ink:#11100a;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --glow: 0 0 18px rgba(255,214,10,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,214,10,.08), transparent 60%),
    radial-gradient(900px 700px at 90% 110%, rgba(255,214,10,.04), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height:1.5;
}

/* topo */
.top{max-width:1100px;margin:12px auto 10px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:46px;height:46px;border-radius:999px;box-shadow:0 0 24px rgba(255,214,10,.15)}
.brand-name strong{display:block;font-weight:800}
.brand-name span{opacity:.7;font-size:12px}
.secure{display:flex;align-items:center;gap:8px;color:#52d36b;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:#52d36b}
.pulse{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.55}50%{opacity:1}}

/* ====== STRIPE ====== */
.stripe{
  max-width:1100px;
  margin:0 auto 10px;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(25,25,40,.92), rgba(25,25,40,.82));
  border-radius:14px;
}
.stripe__row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;color:#fff;white-space:nowrap}
.stripe .label{color:#fff;font-weight:700;letter-spacing:.2px}
.stripe .zap{font-size:18px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,214,10,.25))}
.pricePulse{
  color:#fff;font-weight:900;letter-spacing:.3px;text-shadow:0 0 6px rgba(255,255,255,.35);
  animation:pulseNum .9s ease-in-out infinite;
}
@keyframes pulseNum{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.04);filter:brightness(1.8)}}
.pill{
  display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);font-weight:900;letter-spacing:.5px;color:#fff
}

@media (max-width:640px){
  .stripe__row{gap:10px;font-size:15px}
}

/* CONTAINER */
.wrap{max-width:1100px;margin:0 auto;padding:6px 14px 20px}

/* CARD */
.card{
  background:linear-gradient(180deg, rgba(21,21,37,.98), rgba(21,21,37,.94));
  border-radius:18px; box-shadow:var(--shadow); padding:20px; margin:16px 0;
}
.card h1{margin:0;font-size:28px}
.lead{color:var(--muted);margin:8px 0 16px;font-size:16px}

/* form */
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;margin-top:10px}
.form label span{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
.form input, .form textarea{
  width:100%;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.06);
  background:#0f0f19;color:#fff
}
.form input::placeholder{color:rgba(255,255,255,.25)}
.form label:last-of-type{margin-bottom:18px}

/* botões base */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer}

/* Botão PIX grande (checkout.php) */
.btn.primary{
  display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  margin:0 auto;width:90%;max-width:420px;padding:20px 26px;border-radius:18px;
  background:var(--primary);color:var(--primary-ink);font-size:20px;font-weight:900;
  box-shadow:0 10px 24px rgba(0,0,0,.28);animation:pulseNum .9s ease-in-out infinite;
}
.btn.primary:active{transform:translateY(1px)}
.btn.primary .zap{font-size:18px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,214,10,.35))}
.btn.primary .pricePulse{color:#fff;font-weight:900;letter-spacing:.3px;text-shadow:0 0 6px rgba(255,255,255,.35);animation:pulseNum .9s ease-in-out infinite}

.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:#fff;padding:14px 16px;border-radius:12px}

.info.muted{color:var(--muted);margin-top:12px}
.badges{display:flex;gap:10px;margin-top:14px}
.badge{background:rgba(255,255,255,.08);padding:8px 12px;border-radius:14px;color:#fff;font-weight:600}

/* ========= QR PAGE ========= */
.cardQR__head{display:flex;align-items:center;justify-content:space-between}
.cardQR__head h2{margin:0;font-size:22px}
.timer-badge{background:#0f0f16;padding:8px 12px;border-radius:12px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.08)}
.alert{
  background:linear-gradient(180deg, rgba(255,214,10,.06), rgba(255,214,10,.02));
  border:1px solid rgba(255,255,255,.12);
  padding:12px 14px;border-radius:12px;color:#ffd60a;margin:14px 0;
}

/* QR — mantém o tamanho que estava bom pra você */
.qr-area{display:flex;justify-content:center;padding:8px 0 18px}
.qr-area img{
  width: clamp(150px, 32vw, 220px);
  max-width:100%;
  border-radius:12px;background:#fff;padding:8px;
}

/* ======= COPIA E COLA (DISPOSIÇÃO FINAL) ======= */
.qr-page .copy-area{ text-align:center; margin-top:8px; }
.qr-page .copy-area label{
  display:block; font-weight:800; margin:8px 0 10px;
}

/* Empilha: código (textarea) em cima, botão logo abaixo */
.qr-page .copy-row{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:760px; margin:0 auto;
}

/* “Pílula” do código — 1 linha com reticências (como sua referência) */
.qr-page .copy-row textarea{
  width:100%;
  min-height:56px;
  padding:14px 16px;
  border-radius:14px;
  background:#0f0f19;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:800;
  font-size:18px;
  line-height:1.2;

  resize:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Garante botão em largura total aqui */
.qr-page .copy-row .btn{ min-width: unset; width: 100%; }

/* Botão Copiar – 100% e pulsando */
#btnCopy{
  width:100%;
  min-height:56px;
  padding:0 18px;
  border-radius:14px;
  font-size:18px;
  font-weight:900;
  background:var(--primary);
  color:var(--primary-ink);
  border:0;
  box-shadow: var(--glow), var(--shadow);
  animation: copyPulse 1.2s ease-in-out infinite;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
#btnCopy:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#btnCopy:active{ transform:translateY(0); }

@keyframes copyPulse{
  0%,100%{ filter:brightness(1); box-shadow: var(--glow), var(--shadow); }
  50%    { filter:brightness(1.08); box-shadow: 0 0 26px rgba(255,214,10,.45), var(--shadow); }
}

.pending{color:#ffd60a;text-align:center;padding:14px 0}

/* ===== mobile ===== */
@media (max-width:640px){
  .form .grid{grid-template-columns:1fr}
  /* QR ligeiramente menor em telas estreitas */
  .qr-area img{ width: clamp(160px, 48vw, 240px); }
  .stripe__row{gap:10px;font-size:15px}
  .card h1{font-size:26px}
}

/* rodapé e selos */
.foot{max-width:1100px;margin:30px auto;text-align:center;color:#8b8b8b;padding-bottom:60px}
.hidden{display:none}

.pixBrand{display:flex;justify-content:center;align-items:center;margin:8px 0 6px}
.pixBrand img{max-width:220px;width:70%;height:auto}

.badges--footer{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 0}
.badges--footer img{max-width:480px;width:95%;height:auto;opacity:.95}

.badges{display:flex;gap:10px;margin-top:12px;justify-content:center}
.badges--short{flex-wrap:nowrap;white-space:nowrap}
.badges--short .badge{background:rgba(255,255,255,.08);color:#fff;font-weight:600;border-radius:14px;padding:8px 12px}

/* evitar zoom mobile em inputs */
input, textarea, select{ font-size:16px !important; }

/* === LIVE STATS (pessoas online / última compra) === */
.live-stats{
  margin:10px 0 6px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; background:#0f0f1a; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.live-stats__item{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.live-stats__icon{ width:18px; text-align:center; opacity:.9 }
.live-stats__text{ font-size:14px; color:#e9e9e9 }
.live-stats__text b{ color:var(--primary) }
.live-stats__note{ display:block; margin-top:6px; font-size:12px; color:#a9a9a9; opacity:.9 }

/* === NEWS TICKER (barra “notícia rolando”) === */
.news-ticker{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:linear-gradient(90deg, rgba(255,0,0,.12), rgba(255,0,0,.06));
  border:1px solid rgba(255,0,0,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  margin:10px 0 8px;
}
.news-dot{
  width:9px; height:9px; border-radius:50%; background:#ff3b3b;
  box-shadow:0 0 10px rgba(255,59,59,.8);
  animation:newsBlink 1s infinite;
}
@keyframes newsBlink{50%{opacity:.35}}
.news-text{ font-size:14px; color:#ffdede }

/* === MINI ÁUDIO (5s) === */
.audio-mini{
  display:flex; align-items:center; gap:10px;
  margin:10px 0 6px; padding:8px 10px; border-radius:12px;
  background:#0f0f1a; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.25);
  justify-content:flex-start;  /* ADICIONADO: alinha à esquerda */
}
.am-btn{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:#1b1b29; position:relative; box-shadow: inset 0 0 0 3px rgba(255,214,10,.2);
  -webkit-appearance:none; appearance:none; padding:0; line-height:0; /* ADICIONADO: corrige formato em iOS/Android */
}
.am-btn::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, var(--primary) 0 52%, transparent 54%);
  -webkit-mask: polygon(38% 30%, 78% 50%, 38% 70%); mask: polygon(38% 30%, 78% 50%, 38% 70%);
  border-radius:50%;
}
.am-btn.is-playing::after{ background:none; -webkit-mask:none; mask:none; }
.am-btn.is-playing::before{
  content:""; position:absolute; top:12px; left:15px; width:6px; height:18px; background:var(--primary); border-radius:2px;
  box-shadow:14px 0 0 var(--primary);
}
.am-copy{ font-size:14px; color:#e9e9e9; font-weight:700; }
.am-time{ margin-left:auto; font-size:12px; color:#cfcfcf }
