/* Register-payment presentation only; no payment handlers or financial rules. */
.sales-order-modal.order-action-compact.order-action-payment {
  width: 420px !important;
  max-width: calc(100vw - 24px) !important;
  border-top: 3px solid var(--orange-500);
  border-radius: 6px !important;
}

.order-action-compact.order-action-payment > .order-modal-header-v2 {
  padding: 12px 16px;
  gap: 12px;
}

.order-action-compact.order-action-payment .order-modal-title-row h2 {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -.02em;
}

.order-action-compact.order-action-payment .order-modal-title-row span {
  font-size: 11.5px;
  line-height: 17px;
  overflow-wrap: anywhere;
}

.order-action-compact.order-action-payment .modal-close {
  border-radius: 4px;
  flex: 0 0 30px;
}

.order-action-compact.order-action-payment > .order-modal-body {
  padding: 14px 16px !important;
}

.order-action-compact.order-action-payment .order-modal-section {
  min-width: 0;
}

.order-action-compact.order-action-payment .order-section-title strong {
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}

.order-action-compact.order-action-payment .order-section-title:not(:first-child) {
  margin-top: 14px !important;
}

.order-action-compact.order-action-payment .order-advance-box > div {
  height: 54px;
  grid-template-columns: 44px minmax(0, 1fr);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--card);
}

.order-action-compact.order-action-payment .order-advance-box > div:focus-within {
  border-color: var(--orange-500);
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

.order-action-compact.order-action-payment .order-advance-box span {
  font-size: 14px;
  background: var(--surface);
}

.order-action-compact.order-action-payment .order-advance-box input,
.order-action-compact.order-action-payment .order-advance-box input:focus,
.order-action-compact.order-action-payment .order-advance-box input:focus-visible {
  height: 52px;
  padding: 0 12px;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 27px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  background: var(--card);
}

.order-action-compact.order-action-payment .order-payment-options {
  gap: 8px;
}

.order-action-compact.order-action-payment .order-modal-section > div:has(> label > input[type='checkbox']) + .order-payment-options {
  margin-top: 8px;
}

.order-action-compact.order-action-payment .order-payment-options > button {
  min-width: 0;
  min-height: 38px;
  padding: 8px 6px;
  border-radius: 4px;
}

.order-action-compact.order-action-payment .order-payment-options > button.active {
  color: var(--navy-900);
  box-shadow: inset 0 -2px 0 var(--orange-500);
}

.order-action-compact.order-action-payment .order-payment-options > button strong {
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.order-action-compact.order-action-payment > .order-modal-footer-v2 {
  padding: 12px 16px !important;
  gap: 8px;
}

.order-action-compact.order-action-payment > .order-modal-footer-v2 button {
  height: 36px;
  min-height: 36px;
  border-radius: 4px;
}

.order-action-compact.order-action-payment button:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

.order-action-compact.order-action-payment .order-modal-section > p {
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  .order-action-compact.order-action-payment .order-payment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-action-compact.order-action-payment .order-payment-options > button:last-child {
    grid-column: 1 / -1;
  }
}

@media (pointer: coarse) {
  .order-action-compact.order-action-payment .order-payment-options > button,
  .order-action-compact.order-action-payment > .order-modal-footer-v2 button {
    min-height: 44px;
  }
  .order-action-compact.order-action-payment .modal-close {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}