/* MyStudio Payments: checkout, status, donations, User CP history. --ms-* tokens only. */
.ms-pay { max-width: 640px; margin: 1.5rem auto; padding: 0 16px; }
.ms-pay-body { padding: 1.25rem; }
.ms-pay-alert { margin: 0 0 1rem; }
.ms-pay-label { display: block; margin: 0 0 .4rem; color: var(--ms-muted); font-weight: 600; text-transform: none; }
.ms-pay-hint { display: block; margin-top: .25rem; color: var(--ms-muted); text-transform: none; }

.ms-pay-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
    padding: 1rem; margin-bottom: 1.25rem; border: 1px solid var(--ms-border); border-radius: 10px; background: var(--ms-surface); }
.ms-pay-desc { font-weight: 600; color: var(--ms-text); min-width: 0; overflow-wrap: anywhere; }
.ms-pay-total { white-space: nowrap; color: var(--ms-muted); }
.ms-pay-amount { font-size: 1.5rem; color: var(--ms-text); margin-left: .35rem; }
.ms-pay-note { margin: 0 0 1rem; color: var(--ms-muted); }

.ms-pay-methods { display: grid; gap: .6rem; }
.ms-pay-method { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .85rem 1rem; margin: 0;
    text-align: left; cursor: pointer; font: inherit; color: var(--ms-text); background: var(--ms-surface);
    border: 1px solid var(--ms-border); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.ms-pay-method:hover, .ms-pay-method:focus-visible { border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-accent-subtle); outline: none; }
.ms-pay-method-icon { font-size: 1.6rem; line-height: 1; color: var(--ms-accent); }
.ms-pay-method-paypal .ms-pay-method-icon { color: #0070e0; }
.ms-pay-method-text { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.ms-pay-method-name { font-size: 1.05rem; font-weight: 700; }
.ms-pay-method-desc { font-size: .8rem; color: var(--ms-muted); }
.ms-pay-method-desc:empty { display: none; }
.ms-pay-method-go { color: var(--ms-muted); }
.ms-pay-empty { margin: 0; padding: 1rem; text-align: center; color: var(--ms-muted); }
.ms-pay-secure { margin: 1.25rem 0 0; color: var(--ms-muted); }

.ms-pay-result { display: flex; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 1rem; border-radius: 10px;
    border: 1px solid var(--ms-border); background: var(--ms-surface); }
.ms-pay-result-icon { font-size: 2.25rem; line-height: 1; color: var(--ms-accent); }
.ms-pay-tone-ok .ms-pay-result-icon { color: #198754; }
.ms-pay-tone-bad .ms-pay-result-icon { color: #dc3545; }
.ms-pay-tone-wait .ms-pay-result-icon { color: #b7791f; }
.ms-pay-result-status { font-size: 1.15rem; font-weight: 700; color: var(--ms-text); }
.ms-pay-result-msg { color: var(--ms-muted); }
.ms-pay-details { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.ms-pay-details th, .ms-pay-details td { padding: .45rem .25rem; border-bottom: 1px solid var(--ms-border); text-align: left; vertical-align: top; }
.ms-pay-details th { width: 35%; font-weight: 600; color: var(--ms-muted); }
.ms-pay-details td { overflow-wrap: anywhere; }
.ms-pay-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ms-pay-btn { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }

.ms-pay-intro { margin: 0 0 1rem; }
.ms-pay-donate { display: grid; gap: 1rem; }
.ms-pay-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-pay-preset-input { position: absolute; opacity: 0; pointer-events: none; }
.ms-pay-preset { padding: .55rem 1.1rem; border: 1px solid var(--ms-border); border-radius: 999px; cursor: pointer; font-weight: 600;
    background: var(--ms-surface); color: var(--ms-text); }
.ms-pay-preset-input:checked + .ms-pay-preset { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-text-inv); }
.ms-pay-preset-input:focus-visible + .ms-pay-preset { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.ms-pay-field { display: block; margin: 0; }
.ms-pay-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.ms-pay-goal { margin: 0 0 1.25rem; }
.ms-pay-goal-bar { height: 10px; border-radius: 999px; background: var(--ms-accent-subtle); overflow: hidden; }
.ms-pay-goal-bar span { display: block; height: 100%; background: var(--ms-accent); border-radius: inherit; }
.ms-pay-goal-text { margin-top: .35rem; color: var(--ms-muted); }

.ms-pay-history { overflow-x: auto; }
.ms-pay-table { width: 100%; border-collapse: collapse; }
.ms-pay-table th, .ms-pay-table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--ms-border); }
.ms-pay-table .ms-pay-num { text-align: right; white-space: nowrap; }
.ms-pay-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap;
    background: var(--ms-accent-subtle); color: var(--ms-text); }
.ms-pay-badge-completed, .ms-pay-badge-partially_refunded { background: rgba(25, 135, 84, .15); }
.ms-pay-badge-failed, .ms-pay-badge-reversed, .ms-pay-badge-cancelled, .ms-pay-badge-expired { background: rgba(220, 53, 69, .14); }
.ms-pay-badge-pending, .ms-pay-badge-review, .ms-pay-badge-approval, .ms-pay-badge-created { background: rgba(214, 158, 46, .18); }

@media (max-width: 576px) {
    .ms-pay { margin: 1rem auto; padding: 0; }
    .ms-pay-body { padding: 1rem; }
    .ms-pay-details th { width: 42%; }
    .ms-pay-table th:nth-child(1), .ms-pay-table td:nth-child(1) { display: none; }
    .ms-pay-actions { justify-content: stretch; }
    .ms-pay-actions .ms-pay-btn { flex: 1 1 auto; justify-content: center; }
}