/* ============================================================
   ELEVA AMAPÁ — CSS DO CHECKOUT (checkout.html)
   ============================================================ */

/* ---------- Card principal ---------- */
.checkout-card {
  background: linear-gradient(180deg, rgba(24,24,27,0.9), rgba(24,24,27,0.6));
  border: 1px solid #27272a;
  border-radius: 1.25rem;
}

/* ---------- Selo do plano ---------- */
.plano-badge {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

/* ---------- QR Code ---------- */
.qr-wrapper {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 40px -12px rgba(245, 158, 11, 0.15);
}

.qr-wrapper img {
  display: block;
  width: 220px;
  height: 220px;
  image-rendering: pixelated;
}

/* ---------- Código copia-e-cola ---------- */
.pix-code-box {
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 0.75rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: #a1a1aa;
  word-break: break-all;
  line-height: 1.5;
}

.btn-copy {
  transition: all 0.15s ease;
}
.btn-copy.copiado {
  background: #10b981 !important;
  color: #052e1e !important;
}

/* ---------- Countdown ---------- */
.countdown-ring {
  position: relative;
  width: 52px;
  height: 52px;
}
.countdown-ring svg {
  transform: rotate(-90deg);
}
.countdown-ring circle {
  fill: none;
  stroke-width: 4;
}
.countdown-ring .track {
  stroke: #27272a;
}
.countdown-ring .progress {
  stroke: #f59e0b;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}
.countdown-ring .progress.urgente {
  stroke: #ef4444;
}
.countdown-ring .tempo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #e4e4e7;
}

/* ---------- Pulso de "aguardando pagamento" ---------- */
.pulso-aguardando {
  position: relative;
}
.pulso-aguardando::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  animation: pulso-suave 2s ease-in-out infinite;
}
@keyframes pulso-suave {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* ---------- Tela de sucesso ---------- */
.sucesso-check {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 2px solid #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Loading spinner ---------- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(9,9,11,0.25);
  border-top-color: #09090b;
  border-radius: 999px;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Steps do topo ---------- */
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3f3f46;
  transition: all 0.3s ease;
}
.step-dot.ativo {
  background: #f59e0b;
  width: 24px;
}
.step-dot.concluido {
  background: #10b981;
}

/* ---------- Respeita usuários com movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulso-aguardando::before,
  .sucesso-check,
  .spinner {
    animation: none !important;
  }
}