/* OrbitPay Finance — global brand system */
:root {
  --op-navy: #0B1F4A;
  --op-navy-deep: #061530;
  --op-blue: #1B4DFF;
  --op-blue-soft: #3D6BFF;
  --op-ink: #0A0A0B;
  --op-paper: #FFFFFF;
  --op-muted: #6B7280;
  --op-line: rgba(11, 31, 74, 0.12);
  --op-success: #0F9D58;
  --op-warn: #F59E0B;
  --op-danger: #E11D48;
  --op-radius: 16px;
  --op-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.op-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.op-logo img { height: 28px; width: auto; display: block; }
.op-logo.lg img { height: 40px; }
.op-logo.sm img { height: 22px; }
.op-wordmark {
  font-weight: 700; letter-spacing: -0.03em; font-size: 15px; color: var(--op-navy);
}
.op-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--op-navy);
  background: rgba(27, 77, 255, 0.08); border: 1px solid rgba(27, 77, 255, 0.15);
  padding: 6px 10px; border-radius: 999px;
}
.op-doc {
  max-width: 720px; margin: 0 auto; background: var(--op-paper); color: var(--op-ink);
  font-family: var(--op-font); border: 1px solid var(--op-line); border-radius: 20px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(6, 21, 48, 0.08);
}
.op-doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border-bottom: 1px solid var(--op-line);
  background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
}
.op-doc-body { padding: 24px; }
.op-doc-foot {
  padding: 16px 24px 22px; border-top: 1px solid var(--op-line);
  font-size: 12px; color: var(--op-muted); line-height: 1.5;
}
.op-doc-foot strong { color: var(--op-navy); }
.op-kicker { font-size: 12px; font-weight: 600; color: var(--op-blue); letter-spacing: 0.04em; text-transform: uppercase; }
.op-title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--op-navy); margin: 6px 0 4px; }
.op-meta { font-size: 13px; color: var(--op-muted); }
.op-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.op-table th, .op-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--op-line); font-size: 14px; }
.op-table th { color: var(--op-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.op-amount { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
.op-seal {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 12px 14px; border-radius: 12px; background: #F3F6FF; border: 1px solid rgba(27,77,255,0.12);
  font-size: 12px; color: var(--op-navy);
}
.op-doc {
  position: relative;
  overflow: hidden;
}
.op-doc::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: url("/assets/orbitpay-mark.png") center/contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.op-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.op-logo img { height: 36px; width: auto; }
.op-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
  background: rgba(11,31,74,0.08); color: #0B1F4A;
}
.op-kicker { font-size: 12px; font-weight: 700; color: #3D6BFF; letter-spacing: 0.04em; text-transform: uppercase; }
.op-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0; }
.op-meta { font-size: 13px; color: #5C6578; line-height: 1.45; }
.op-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.op-table th, .op-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid rgba(11,31,74,0.08); }
.op-seal { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 12px; color: #5C6578; }
.op-doc-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(11,31,74,0.08); font-size: 12px; color: #5C6578; }
.op-doc-body { position: relative; z-index: 1; }