/* =====================================================================
   payment-confirmed-redesign.css — Modal "Pagamento Confirmado" (PIX ok)
   PREVIEW ONLY por enquanto (não ligado no index.html).
   Visual: card vidro azul + selo de SUCESSO verde, profissional.
   ===================================================================== */

.payment-confirmed-overlay--pixok{
  background:rgba(4,8,20,.72) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
}

.payment-confirmed-card--pixok{
  max-width:340px !important;
  padding:34px 28px 30px !important;
  background:linear-gradient(180deg, rgba(16,22,44,.92), rgba(8,12,28,.95)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 60px rgba(16,185,129,.14),
             inset 0 1px 0 rgba(255,255,255,.06) !important;
  text-align:center !important;
}

/* Selo de sucesso verde com glow + anel externo */
.payment-confirmed-card--pixok .payment-confirmed-check-ring{
  width:86px !important;
  height:86px !important;
  margin:0 auto 18px !important;
  border-radius:50% !important;
  background:linear-gradient(150deg, #10B981 0%, #047857 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(16,185,129,.45),
             0 0 0 8px rgba(16,185,129,.12),
             inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.payment-confirmed-card--pixok .payment-confirmed-check-svg{
  width:44px !important;
  height:44px !important;
  color:#fff !important;
}

.payment-confirmed-title--pixok{
  font-size:21px !important;
  font-weight:900 !important;
  color:#fff !important;
  margin:0 0 8px !important;
  letter-spacing:.01em !important;
}

/* Subtítulo (novo) — no app real é 1 linha de markup a adicionar */
.payment-confirmed-card--pixok .payment-confirmed-sub{
  margin:0 auto !important;
  max-width:250px !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.72) !important;
}

/* X de fechar (canto superior direito) */
.payment-confirmed-card--pixok .payment-confirmed-x{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:32px !important;
  height:32px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.75) !important;
  font-size:13px !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background .15s ease, color .15s ease, border-color .15s ease !important;
}
.payment-confirmed-card--pixok .payment-confirmed-x:hover{
  background:rgba(255,255,255,.12) !important;color:#fff !important;
}

/* Botão "JOGAR AGORA" — CTA azul (fecha o modal e vai pra home) */
.payment-confirmed-card--pixok .payment-confirmed-primary{
  width:100% !important;
  min-height:50px !important;
  margin:22px 0 0 !important;
  border:none !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, #2563EB, #1E40AF) !important;
  color:#fff !important;
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(37,99,235,.35) !important;
  transition:filter .15s ease, transform .12s ease !important;
}
.payment-confirmed-card--pixok .payment-confirmed-primary:hover{filter:brightness(1.06) !important;}
.payment-confirmed-card--pixok .payment-confirmed-primary:active{transform:scale(.985) !important;}