.pagamento-wrap {
  display: grid;
  gap: 16px;
}

.pagamento-resumo {
  display: grid;
  gap: 6px;
}

.pagamento-valor {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy, #0f172a);
}

.pagamento-valor-periodo {
  font-size: 14px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.65);
  margin-left: 8px;
}

.pagamento-valor-sub {
  color: rgba(30, 41, 59, 0.8);
  font-size: 14px;
}

.pagamento-metodos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pagamento-metodo {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.pagamento-metodo.is-active {
  border-color: #0ea5e9;
  color: #0f172a;
  background: #f0f9ff;
}

.pagamento-paineis {
  display: grid;
  gap: 12px;
}

.pagamento-painel {
  display: none;
}

.pagamento-painel.is-active {
  display: grid;
  gap: 12px;
}

.pagamento-form {
  display: grid;
  gap: 10px;
}

.pagamento-form input[type="text"],
.pagamento-form input[type="email"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
}

.pagamento-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pagamento-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pagamento-doc-tipo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pagamento-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.9);
}

.pagamento-doc-hint-text {
  font-size: 13px;
  color: rgba(71, 85, 105, 0.9);
  margin-top: 6px;
}

.pagamento-resultado {
  display: none;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  border-radius: 8px;
  padding: 10px;
  color: #0c4a6e;
}

.pagamento-resultado.is-visible {
  display: block;
}

.pagamento-resultado__content {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.pagamento-resultado__header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagamento-resultado__heading {
  font-size: 16px;
  line-height: 1.3;
}

.pagamento-resultado__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

.pagamento-resultado__text {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  text-align: left;
  width: 100%;
  max-width: 640px;
}

.pagamento-resultado__qr {
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  padding: 10px;
  margin-inline: auto;
  display: block;
}

.pagamento-resultado__copy-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pagamento-resultado__pix-code {
  margin: 0;
  width: 100%;
  max-width: 640px;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eff6ff;
  color: #0f172a;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
}

.pagamento-resultado__boleto {
  margin: 0;
  width: 100%;
  max-width: 640px;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
}

.pagamento-resultado__link {
  display: inline-block;
  word-break: break-word;
  color: #0369a1;
  font-weight: 600;
}

.pagamento-card-note {
  margin: 0;
  font-size: 14px;
}

.pagamento-nota {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

@media (max-width: 768px) {
  .pagamento-metodos {
    grid-template-columns: 1fr;
  }

  .pagamento-grid-3 {
    grid-template-columns: 1fr;
  }

  .pagamento-grid-2 {
    grid-template-columns: 1fr;
  }
}