/* Checkout owns one bounded scroll region and a non-scrolling action row.
   IDs intentionally outrank the theme's generic .modal-sheet overflow rules. */
#noticeModal, #manualDetailsModal, #orderModal {
  top: var(--checkout-viewport-top, 0px);
  bottom: auto;
  height: var(--checkout-viewport-height, 100vh);
  height: var(--checkout-viewport-height, 100dvh);
  box-sizing: border-box;
  padding: 8px 12px 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
#noticeModal > .modal-sheet,
#manualDetailsModal > .modal-sheet,
#orderModal > .modal-sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0;
  padding: 20px 18px 0;
}
#noticeModal > .modal-sheet::before,
#manualDetailsModal > .modal-sheet::before,
#orderModal > .modal-sheet::before { flex: 0 0 4px; margin: -8px auto 12px; }
#noticeModal .recharge-notice-head,
#manualDetailsModal .sheet-head,
#orderModal .sheet-head { flex: 0 0 auto; margin-bottom: 12px; }
#noticeModal .recharge-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#noticeModal .recharge-notice-head h3 { margin: 0; min-width: 0; }
#noticeModal .recharge-notice-head .plain-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
#noticeModal #checkoutIdentityError { color: var(--ux-danger); -webkit-text-fill-color: currentColor; background: var(--ux-fill); font-size: 14px; font-weight: 600; }
#noticeModal .notice-system-summary small { color: var(--ux-secondary); -webkit-text-fill-color: currentColor; }
#manualDetailsModal :is(#manualContactStepTitle, .manual-wechat-guide-toggle small, .manual-wechat-profile-result small) { color: var(--ux-secondary); -webkit-text-fill-color: currentColor; }
#manualDetailsModal .field-help-button { color: var(--ux-accent); -webkit-text-fill-color: currentColor; background: var(--ux-fill); }
#manualDetailsModal .manual-wechat-profile-result :is(strong, small) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#noticeModal .checkout-notice-scroll,
#manualDetailsModal .manual-form-scroll,
#orderModal .order-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px 16px;
  scroll-padding-block: 12px;
  overflow-wrap: anywhere;
}
#manualDetailsModal .manual-details-form,
#orderDetail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
#manualDetailsModal .manual-order-summary { max-height: none; overflow: visible; }
#manualDetailsModal .manual-form-actions,
#orderModal .order-payment-actions,
#noticeModal #confirmNotice {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
  margin: 0;
}
#manualDetailsModal .manual-form-actions,
#orderModal .order-payment-actions {
  padding: 12px 2px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--clarity-separator, rgba(100,116,139,.25));
  background: var(--clarity-surface-solid, var(--ux-surface, #fff));
}
#orderModal .order-payment-total {
  margin: 0 0 8px;
  color: var(--clarity-text, var(--ux-ink, #172033));
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
#orderModal .order-payment-actions .pay-links { margin: 0; }
#orderModal .order-payment-actions a { min-height: 48px; box-sizing: border-box; }
#noticeModal #confirmNotice { margin: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 48px; }
html[data-theme="dark"] #manualDetailsModal .manual-form-actions,
html[data-theme="dark"] #orderModal .order-payment-actions { background: var(--clarity-surface-solid, #1c2532); }
@media (max-width: 699px) {
  #noticeModal, #manualDetailsModal, #orderModal { padding: 6px 0 0; }
}
@media (max-height: 420px) {
  #noticeModal > .modal-sheet, #manualDetailsModal > .modal-sheet, #orderModal > .modal-sheet { padding-top: 12px; }
  #noticeModal > .modal-sheet::before, #manualDetailsModal > .modal-sheet::before, #orderModal > .modal-sheet::before { display: none; }
  #manualDetailsModal .sheet-head, #orderModal .sheet-head { margin-bottom: 4px; }
}