/* Dingda checkout: quiet surfaces, provider logos and one selection colour. */
.checkout-ui {
  --checkout-page: #f6f8fc;
  --checkout-surface: #fff;
  --checkout-inset: #f2f5fa;
  --checkout-border: #e1e6ef;
  --checkout-text: #263044;
  --checkout-muted: #717d91;
  --checkout-accent: #4f70df;
  --checkout-selected: #f0f4ff;
  --checkout-button: #4f70df;
  background: var(--checkout-page);
  color: var(--checkout-text);
}
[data-theme="dark"] .checkout-ui, .checkout-ui[data-theme="dark"] {
  --checkout-page: #13161c;
  --checkout-surface: #1e232d;
  --checkout-inset: #272e3a;
  --checkout-border: #303846;
  --checkout-text: #eef1f7;
  --checkout-muted: #9aa6ba;
  --checkout-accent: #90aaff;
  --checkout-selected: #222c42;
  --checkout-button: #5575e8;
}
.checkout-ui .detail-header {
  height: 60px;
  flex-shrink: 0;
  background: var(--checkout-page);
  border-color: var(--checkout-border);
}
.checkout-ui .detail-header-name, .checkout-ui .detail-back { color: var(--checkout-text); }
.checkout-ui .checkout-safe { color: var(--checkout-muted); gap: 4px; font-size: 11px; }
.checkout-ui .checkout-scroll { width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 20px 32px; }
.checkout-ui .checkout-order {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: none;
}
.checkout-ui .checkout-order-row { justify-content: flex-start; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 13px; line-height: 24px; color: var(--checkout-muted); }
.checkout-ui .checkout-order-row > :first-child { flex-shrink: 0; }
.checkout-ui .checkout-plan-name { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px 8px; color: var(--checkout-text); text-align: left; }
.checkout-ui .checkout-creator-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.checkout-ui .checkout-plan-name .membership-badge { --badge-height: 24px; }
.checkout-ui .checkout-amount { border-color: var(--checkout-border); padding-top: 18px; }
.checkout-ui .checkout-label { color: var(--checkout-muted); font-size: 12px; margin-bottom: 6px; }
.checkout-ui .checkout-price { display: block; color: var(--checkout-text); font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.checkout-ui .checkout-section { margin-bottom: 22px; }
.checkout-ui .checkout-section h4 { color: var(--checkout-text); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.checkout-ui .checkout-test-notice { padding: 11px 13px; background: var(--checkout-inset); border: 1px solid var(--checkout-border); border-radius: 10px; color: var(--checkout-muted); font-size: 12px; line-height: 1.7; }
.checkout-ui .pay-method {
  position: relative;
  min-height: 76px;
  padding: 14px;
  margin-bottom: 10px;
  gap: 12px;
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-border);
  border-radius: 14px;
}
.checkout-ui .pay-method:has(input:checked) { background: var(--checkout-selected); border-color: var(--checkout-accent); }
.checkout-ui .pay-method:focus-within { outline: none; }
.checkout-ui .pay-method:has(input:focus-visible) { outline: 2px solid var(--checkout-accent); outline-offset: 3px; }
.checkout-ui .pay-method-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--checkout-inset); }
.checkout-ui .pay-method-icon img { width: 28px; height: 28px; opacity: 1; }
.checkout-ui .pay-method-info { min-width: 0; }
.checkout-ui .pay-method-name { color: var(--checkout-text); font-size: 14px; font-weight: 600; line-height: 1.5; }
.checkout-ui .pay-method-desc { color: var(--checkout-muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.checkout-ui #checkoutPaymentChannels .pay-check, .checkout-ui #channels .pay-check {
  position: relative;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 1.5px solid var(--checkout-muted);
  color: var(--checkout-muted);
  background: transparent;
  box-shadow: none;
}
.checkout-ui #checkoutPaymentChannels .pay-method:has(input:checked) .pay-check,
.checkout-ui #channels .pay-method:has(input:checked) .pay-check {
  border-color: var(--checkout-button);
  color: #fff;
  background: var(--checkout-button);
  box-shadow: none;
}
.checkout-ui .pay-method:has(input:checked) .pay-check::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid currentColor; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
.checkout-ui .btn-checkout { background: var(--checkout-button); color: #fff; border-radius: 14px; box-shadow: none; font-size: 15px; font-weight: 600; margin-bottom: 0; }
.checkout-ui .btn-checkout .material-icons-round { font-size: 20px; }
.checkout-ui .btn-checkout:disabled { opacity: .45; cursor: not-allowed; }
.checkout-ui .btn-checkout-secondary { background: var(--checkout-inset); color: var(--checkout-accent); border: 1px solid var(--checkout-border); }
.checkout-ui .checkout-redeem-section { margin-top: 18px; }
.checkout-ui .redeem-row { gap: 10px; }
.checkout-ui .redeem-input { min-width: 0; background: var(--checkout-surface); color: var(--checkout-text); border: 1px solid var(--checkout-border); border-radius: 12px; font-size: 13px; height: 46px; }
.checkout-ui .redeem-input::placeholder { color: var(--checkout-muted); }
.checkout-ui .btn-redeem { height: 46px; border: 1px solid var(--checkout-border); border-radius: 12px; padding: 0 20px; background: var(--checkout-inset); color: var(--checkout-accent); font-size: 13px; }
.checkout-ui #retryPaymentChannels { margin-top: 10px; }
.checkout-ui .checkout-note { color: var(--checkout-muted); font-size: 11px; line-height: 1.6; }
.checkout-ui button:focus-visible, .checkout-ui .redeem-input:focus-visible { outline: 2px solid var(--checkout-accent); outline-offset: 3px; }
@media (max-width: 360px) {
  .checkout-ui .checkout-scroll { padding: 20px 14px 28px; }
  .checkout-ui .checkout-order { padding: 18px 16px; }
  .checkout-ui .pay-method { padding: 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .checkout-ui .pay-method { transition: none; } }