.payments-view { width: 100%; max-width: 1130px; margin-inline: auto; }
.payments-view h1 { margin: 0 0 10px; font-size: 29px; font-weight: 600; letter-spacing: -.75px; }
.payments-view .payments-intro { margin-bottom: 26px; color: var(--muted); line-height: 1.6; }
.payments-content { max-width: 680px; }
.payment-panel { padding: 28px; border: 1px solid var(--line); border-radius: 10px; }
.payment-panel h2 { font-size: 21px; font-weight: 550; letter-spacing: -.35px; margin-bottom: 10px; }
.payment-panel p { color: var(--muted); line-height: 1.6; }
.payment-terms { margin: 24px 0; font-size: 14px; line-height: 1.5; }
.payment-terms > div { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.payment-terms > div:first-child { padding-top: 0; }
.payment-terms dt { color: var(--muted); }
.payment-terms dd { margin: 0; overflow-wrap: anywhere; }
.payment-terms dd small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.payment-panel fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.payment-panel legend { margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 550; }
.payment-methods { display: flex; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.payment-panel .payment-method { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; margin: 0; font-weight: 400; }
.payment-method input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.payment-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 18px; }
.payment-fields .wide { grid-column: 1 / -1; }
.payment-panel label:not(.payment-method) { font-size: 13px; font-weight: 400; }
.payment-panel input[type="text"] { border-radius: 6px; font-size: 16px; }
.payment-panel input[aria-invalid="true"] { border-color: #a12620; }
.payment-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.payment-actions :is(a,button) { font-size: 14px; }
.payment-actions a { color: var(--accent); text-underline-offset: 3px; }
.payment-panel .payment-help { font-size: 12px; margin: 16px 0 0; }
.payment-state-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; margin-bottom: 20px; color: var(--accent); }
.payment-state-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.payment-state-mark.active { background: var(--tint); border-color: var(--tint); }
.payment-steps { padding-left: 22px; margin: 24px 0; }
.payment-steps li { padding-left: 5px; margin: 14px 0; line-height: 1.6; }
.payment-bank-help { padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.payment-bank-help summary { cursor: pointer; min-height: 36px; }
.payment-bank-help p { margin: 10px 0; }
.payment-bank-help a { color: var(--accent); }
.payment-feedback:empty { display: none; }
.payment-feedback { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.payments-view [tabindex="-1"]:focus { outline: none; }
#paymentsLink { margin-top: 20px; }
@media (max-width: 600px) {
  .payments-view h1 { font-size: 25px; }
  .payment-panel { padding: 22px 18px; }
  .payment-terms > div { grid-template-columns: 1fr; gap: 4px; }
  .payment-fields { grid-template-columns: minmax(0,1fr); }
  .payment-actions { gap: 12px; }
  .payment-actions .primary-button { width: 100%; }
}

.payments-view .billing-back { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 14px; text-underline-offset: 3px; }