/* tabletold — pagamentos (Fase 112). Tokens de app.css ("Luz de vela"): violeta arcano para
   créditos, ouro para o que está escolhido e para o total, brasa só para recusa e desconto. */

.pay { max-width: 720px; margin: 0 auto; width: 100%; }
.pay-region button { min-height: 44px; }

.pay-items { display: grid; gap: 10px; }
.pay-items.packs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pay-items.plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pay-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left;
  border-radius: var(--r-l); border: 1px solid var(--line); cursor: pointer; color: var(--text);
  background: radial-gradient(circle at 50% 0%, var(--arcane-soft), var(--surface) 70%);
  box-shadow: var(--shadow-1); font: inherit; min-width: 0; position: relative;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.pay-item:hover { border-color: var(--gold-lo); }
.pay-item:active { transform: scale(0.98); }
.pay-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pay-item.on {
  border-color: var(--gold-lo);
  background: radial-gradient(circle at 50% 0%, var(--gold-glow), var(--surface) 72%);
  box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-1);
}
.pay-item.on::after {
  content: "✓"; position: absolute; top: 10px; right: 12px;
  font: 700 15px var(--f-ui); color: var(--gold);
}
.pay-price { font: 700 17px var(--f-ui); font-variant-numeric: tabular-nums; }
.pay-price small { font: 500 12px var(--f-ui); color: var(--text-2); }
.pay-plan-name { font: 600 21px var(--f-titulo); }

.pay-coupon-row { align-items: stretch; flex-wrap: nowrap; }
.pay-coupon { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.pay-coupon-row .btn { flex: 0 0 auto; }
.pay-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; }
.pay-ok svg { width: 16px; height: 16px; }
.pay-discount { color: var(--ember); }

.pay-summary { gap: 12px; }
.pay-summary .mk-receipt { background: var(--surface); }
.pay-go { min-height: 52px; font-size: 16px; }
.pay-go svg { width: 18px; height: 18px; }
.pay-safe { display: flex; gap: 6px; align-items: flex-start; }
.pay-safe svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.btn.danger { color: var(--ember); border-color: var(--ember); }

.pay-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-history li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-soft);
}
.pay-h-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-h-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-h-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pay-h-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.pay-result.ok .card-head .ico { background: var(--gold-soft); color: var(--gold); }
.pay-result.bad .card-head .ico { background: var(--ember-soft); color: var(--ember); }
.pay-result.wait .card-head .ico { background: var(--arcane-soft); color: var(--arcane); }
.pay-dots { display: flex; gap: 6px; }
.pay-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--arcane); animation: bob 1.2s ease-in-out infinite; }
.pay-dots span:nth-child(2) { animation-delay: 0.15s; }
.pay-dots span:nth-child(3) { animation-delay: 0.3s; }
.pay-sim .btn { justify-content: center; }

@media (max-width: 380px) {
  .pay-items.packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-history li { flex-wrap: wrap; }
  .pay-h-side { flex-direction: row; align-items: center; }
}