/* BRILL_PAYMENT_UI_V1 */

.bv-payments-panel {
  margin-bottom: 18px;
}

.bv-payments-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.bv-payments-head h2 {
  margin: 3px 0 0;
}

.bv-payments-list {
  display: grid;
  gap: 10px;
}

.bv-payment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.bv-payment-main {
  min-width: 0;
}

.bv-payment-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 5px;
}

.bv-payment-title strong {
  font-size: 14px;
}

.bv-payment-meta {
  color: var(--muted, #8892a8);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bv-payment-side {
  text-align: right;
}

.bv-payment-amount {
  display: block;
  font-size: 16px;
  margin-bottom: 7px;
}

.bv-payment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(255,255,255,.07);
}

.bv-payment-badge.pending {
  background: rgba(255,190,70,.12);
  color: #f7c86d;
}

.bv-payment-badge.paid {
  background: rgba(70,220,150,.12);
  color: #73e7b2;
}

.bv-payment-badge.failed,
.bv-payment-badge.cancelled {
  background: rgba(255,90,100,.12);
  color: #ff8c94;
}

.bv-payment-badge.sandbox {
  background: rgba(90,145,255,.14);
  color: #8eb1ff;
}

.bv-paypal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: #09111f;
  background: #ffc439;
}

.bv-paypal-link:hover {
  filter: brightness(1.04);
}

.bv-payment-empty {
  padding: 16px;
  color: var(--muted, #8892a8);
  font-size: 13px;
}

@media (max-width: 720px) {
  .bv-payment-row {
    grid-template-columns: 1fr;
  }

  .bv-payment-side {
    text-align: left;
  }
}