.of-document-uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 8px 0;
}
.of-document-upload {
  --upload-ink: #245f50;
  --upload-line: #a9c9bc;
  --upload-bg: #eef7f3;
  border: 1px solid #dce5eb;
  border-radius: 7px;
  padding: 6px 9px;
  min-width: 0;
}
.of-document-upload.is-payment {
  --upload-ink: #275f87;
  --upload-line: #8caec8;
  --upload-bg: #edf5fc;
}
.of-document-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 23px; }
.of-document-head strong { font-size: 13px; }
.of-document-head button { padding: 2px 6px; min-height: 0; font-size: 11px; }
.of-document-upload p { margin: 0 0 4px; color: #526676; font-size: 11px; }
.of-document-drop {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 4px 8px; flex-wrap: wrap; padding: 4px 7px; min-height: 28px;
  border: 1px dashed var(--upload-line); border-radius: 5px;
  background: #f9fbfc; color: var(--upload-ink); cursor: pointer;
}
.of-document-drop span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.of-document-drop small { font-size: 10px; color: #455b70; }
.of-document-upload:hover .of-document-drop, .of-document-drop:focus-visible { background: var(--upload-bg); }
.of-document-upload.is-dragging { border-color: var(--upload-line); background: var(--upload-bg); }
.of-document-upload.is-dragging .of-document-drop { background: var(--upload-bg); }
.of-document-drop:disabled { opacity: .6; cursor: wait; }
.of-document-error { color: #a43d44; }
.of-payment-preview { width: 100%; max-height: 220px; object-fit: contain; background: #f3f6f8; }
@media (max-width: 760px) { .of-document-uploads { grid-template-columns: minmax(0, 1fr); } }