// Step 6 — Documents

.step-body { padding: 20px; overflow-y: auto; }

.step-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.al-info {
  background: var(--gb-color-info-subtle, rgba(96, 165, 250, 0.10));
  border: 1px solid var(--gb-color-info-border, rgba(96, 165, 250, 0.25));
  color: var(--gb-color-info, #60a5fa);
}

.doc-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.doc-status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  border: 1px solid var(--gb-color-border, rgba(255, 255, 255, 0.10));
  background: var(--gb-color-surface-raised, rgba(255, 255, 255, 0.03));
  color: var(--gb-color-text-secondary, #6b7494);

  &.uploaded {
    border-color: var(--gb-color-success-border, rgba(34, 211, 160, 0.28));
    background: var(--gb-color-success-subtle, rgba(34, 211, 160, 0.06));
    color: var(--gb-color-success, #22d3a0);
  }

  &.missing {
    border-color: var(--gb-color-error-border, rgba(248, 113, 113, 0.28));
    background: var(--gb-color-error-subtle, rgba(248, 113, 113, 0.06));
    color: var(--gb-color-error, #f87171);
  }
}

.doc-status-icon { font-weight: 700; font-size: 12px; }

.doc-mandatory-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--gb-color-success-subtle, rgba(34, 211, 160, 0.08));
  border: 1px solid var(--gb-color-success-border, rgba(34, 211, 160, 0.20));
  color: var(--gb-color-success, #22d3a0);
}

.complete-icon { font-size: 14px; font-weight: 700; }

// ── RTL ───────────────────────────────────────────────────────────────────────
[dir="rtl"] {
  .doc-status-row { flex-direction: row-reverse; }
  .doc-status-item { flex-direction: row-reverse; }
  .complete-badge { flex-direction: row-reverse; }
}