#payment-core-area { display: grid; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); }
.payment-ready-card, .payment-complete-card { display: grid; gap: var(--space-2, 8px); padding: var(--space-4, 16px); border: 1px solid var(--border-default, #e2d8de); border-radius: var(--radius-md, 14px); background: var(--surface-primary, #fff); }
.payment-ready-card { grid-template-columns: 1fr auto; align-items: center; }
.payment-ready-card p, .payment-ready-card small, .payment-complete-card p, .payment-complete-card small { margin: 0; color: var(--text-secondary, #6e646a); }
.payment-ready-card b, .payment-complete-amount { font-size: 1.45rem; color: var(--text-primary, #292328); }
.payment-complete-card { border-color: var(--success, #238a59); background: var(--success-bg, #f0faf4); }
.payment-complete-card h3 { margin: 0; color: var(--success, #238a59); }
.payment-lock-note { padding-top: var(--space-2, 8px); border-top: 1px solid var(--border-subtle, #e8e2e5); }
#payment-core-dialog .payment-context, #payment-core-dialog .payment-lines { display: grid; gap: var(--space-2, 8px); }
#payment-core-dialog .payment-context span, #payment-core-dialog .payment-history small { color: var(--text-secondary, #6e646a); }
#payment-core-dialog .payment-lines { padding: var(--space-3, 12px); border: 1px solid var(--border-subtle, #e8e2e5); border-radius: var(--radius-md, 14px); }
#payment-core-dialog .payment-line, .payment-history-row { display: flex; justify-content: space-between; gap: var(--space-3, 12px); }
#payment-core-dialog .payment-total { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #e8e2e5); font-weight: 700; }
#payment-core-dialog .payment-total b { font-size: 1.35rem; }
#payment-core-dialog .payment-methods { border: 0; padding: 0; margin: 0; }
#payment-core-dialog .payment-methods legend { margin-bottom: var(--space-2, 8px); font-weight: 600; }
.payment-method-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2, 8px); }
.payment-method-buttons button { min-height: 48px; border: 1px solid var(--border-default, #e2d8de); border-radius: var(--radius-sm, 10px); background: var(--surface-primary, #fff); color: var(--text-primary, #292328); font: inherit; font-weight: 600; cursor: pointer; }
.payment-method-buttons button.selected { border-color: var(--brand-primary, #eb028e); background: color-mix(in srgb, var(--brand-primary, #eb028e) 10%, white); color: var(--brand-primary, #eb028e); }
.receipt-option { display: flex; align-items: center; gap: var(--space-2, 8px); cursor: pointer; }
.receipt-option input { inline-size: 18px; block-size: 18px; accent-color: var(--brand-primary, #eb028e); }
.payment-actions { display: flex; justify-content: flex-end; gap: var(--space-2, 8px); }
.payment-result { min-height: 1.4em; margin: 0; color: var(--danger, #c4374d); }
.payment-cancel-button { justify-self: start; border-color: var(--danger, #c4374d); color: var(--danger, #c4374d); background: transparent; }
.payment-cancel-button:hover:not(:disabled) { background: #fff2f4; }
.payment-success { margin: 0 0 var(--space-2, 8px); color: var(--success, #238a59); font-weight: 600; }
.payment-history { border: 1px solid var(--border-subtle, #e8e2e5); border-radius: var(--radius-md, 14px); padding: var(--space-3, 12px); }
.payment-history summary { cursor: pointer; font-weight: 600; }
.payment-history[open] { display: grid; gap: var(--space-3, 12px); }
.payment-history-row > div { display: grid; gap: 3px; }
.payment-history-row > div:last-child { text-align: right; }
.payment-history-row small { display: block; }
.payment-refund { color: var(--danger, #c4374d); }

@media (max-width: 620px) {
  .payment-ready-card { grid-template-columns: 1fr; }
  .payment-ready-card .button { width: 100%; }
  .payment-method-buttons { grid-template-columns: 1fr; }
  .payment-actions { display: grid; grid-template-columns: 1fr; }
  .payment-actions .button { width: 100%; }
}