/* Shared visual language for active onboarding surfaces. */
:root {
  --onboarding-navy: #102f4a;
  --onboarding-navy-deep: #0b263e;
  --onboarding-teal: #0f9589;
  --onboarding-teal-dark: #0b756d;
  --onboarding-aqua: #e8f8f5;
  --onboarding-blue: #edf6fc;
  --onboarding-border: #d9e7ed;
  --onboarding-muted: #668094;
  --onboarding-shadow: 0 18px 45px rgba(29, 74, 96, .10);
}

body.ob-standalone-body {
  min-height: 100vh;
  background: #f7fbfc;
  color: var(--onboarding-navy);
}

.ob-standalone-page {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 7% 4%, rgba(111, 220, 207, .18), transparent 31rem),
    radial-gradient(circle at 94% 94%, rgba(129, 180, 232, .17), transparent 34rem),
    #f7fbfc;
}

.ob-standalone-page::before,
.ob-standalone-page::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: 999px;
}

.ob-standalone-page::before {
  top: 5rem;
  left: -8rem;
  width: 25rem;
  height: 25rem;
  background: rgba(109, 217, 204, .10);
  filter: blur(8px);
}

.ob-standalone-page::after {
  right: -10rem;
  bottom: -8rem;
  width: 30rem;
  height: 30rem;
  background: rgba(123, 177, 232, .09);
  filter: blur(10px);
}

.ob-standalone-header {
  border-bottom: 1px solid rgba(211, 229, 235, .82);
  background: rgba(255, 255, 255, .80);
  box-shadow: 0 8px 26px rgba(38, 87, 108, .06);
  backdrop-filter: blur(12px);
}

.ob-shell-card {
  border: 1px solid rgba(211, 229, 235, .95);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--onboarding-shadow);
}

.ob-eyebrow {
  color: var(--onboarding-teal-dark);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ob-page-title {
  color: var(--onboarding-navy-deep);
  letter-spacing: -.04em;
}

.ob-page-copy {
  color: var(--onboarding-muted);
}

.ob-form-input {
  border-color: #cbdde5 !important;
  background: #fff !important;
  color: #17364f !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ob-form-input:focus {
  border-color: #15a596 !important;
  box-shadow: 0 0 0 3px rgba(21, 165, 150, .13) !important;
}

.ob-form-input[aria-invalid="true"] {
  border-color: #e18b8f !important;
  background: #fffafa !important;
}

.ob-form-input.is-success {
  border-color: #83cdb8 !important;
  background: #fbfffd !important;
}

.ob-success-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(113, 220, 196, .18), transparent 18rem),
    rgba(255, 255, 255, .97);
}

.ob-success-icon {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  margin: 0 auto;
  border: 1px solid #b9e6d8;
  border-radius: 1.25rem;
  background: #eafaf4;
  color: #0c8b72;
  box-shadow: 0 10px 24px rgba(41, 159, 133, .12);
}

.ob-reference-box {
  border: 1px solid #bfe5dc;
  border-radius: .8rem;
  background: #effbf8;
  color: #0c7569;
}

.ob-error-card {
  border-color: #f0caca;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 206, 181, .18), transparent 18rem),
    rgba(255, 255, 255, .97);
}

.ob-error-icon {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  margin: 0 auto;
  border: 1px solid #f0caca;
  border-radius: 1.25rem;
  background: #fff3f1;
  color: #c55b58;
}

.ob-status-badge {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .3rem .62rem;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.ob-status-badge[data-status="request_received"] { border-color: #c5ddea; background: #edf6fc; color: #326a8d; }
.ob-status-badge[data-status="under_review"] { border-color: #ccd2f1; background: #f0f1fc; color: #4d5799; }
.ob-status-badge[data-status="kyc_invited"] { border-color: #dbcaf0; background: #f5effb; color: #7653a3; }
.ob-status-badge[data-status="kyc_pending"],
.ob-status-badge[data-status="pending"] { border-color: #eedaa4; background: #fff8e5; color: #9a6b18; }
.ob-status-badge[data-status="needs_changes"] { border-color: #f0cfab; background: #fff3e5; color: #a46122; }
.ob-status-badge[data-status="rejected"] { border-color: #efc6ca; background: #fff1f2; color: #b84d59; }
.ob-status-badge[data-status="approved"] { border-color: #b9dfd1; background: #edf9f3; color: #187859; }
.ob-status-badge[data-status="not_submitted"] { border-color: #d8e0e6; background: #f5f7f8; color: #687c8b; }

.ob-status-banner {
  border: 1px solid transparent;
  border-radius: 1rem;
  padding: 1rem 1.15rem;
}

.ob-status-banner--changes { border-color: #f0cfab; background: #fff6e9; color: #87531e; }
.ob-status-banner--rejected { border-color: #efc6ca; background: #fff3f3; color: #99434d; }
.ob-status-banner--approved { border-color: #b9dfd1; background: #effaf5; color: #176b52; }
.ob-status-banner--pending { border-color: #eedaa4; background: #fff8e5; color: #8c651d; }

.ob-admin-page {
  margin: -0.75rem -0.75rem -1rem;
  padding: 1rem .75rem 1.5rem;
  background:
    radial-gradient(circle at 8% 0%, rgba(119, 219, 207, .13), transparent 28rem),
    radial-gradient(circle at 100% 100%, rgba(125, 174, 229, .11), transparent 30rem),
    #f6fafc;
}

.ob-admin-card {
  border-color: #dbe8ed !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 30px rgba(42, 80, 99, .07) !important;
}

.ob-admin-card--business { background: #f3f9fc !important; }
.ob-admin-card--contact { background: #f1fbf8 !important; }
.ob-admin-card--kyc { background: #f6f3fb !important; }
.ob-admin-card--documents { background: #fbfcfd !important; }
.ob-admin-card--review { background: #fffaf0 !important; }

.ob-admin-card .ob-admin-card-heading {
  border-color: rgba(191, 215, 224, .72) !important;
}

.ob-admin-card .ob-admin-card-heading h2,
.ob-admin-card .ob-admin-card-heading i {
  color: var(--onboarding-navy) !important;
}

.ob-admin-filterbar {
  border-color: #dbe8ed !important;
  background: rgba(248, 252, 253, .88) !important;
}

.ob-admin-tabs {
  padding: .35rem;
  border: 1px solid #dbe8ed;
  border-radius: .85rem;
  background: rgba(238, 248, 250, .72);
}

.ob-admin-table-card {
  border-color: #dbe8ed !important;
  box-shadow: 0 14px 34px rgba(42, 80, 99, .08) !important;
}

.ob-admin-table-card thead { background: #f0f8fa !important; }
.ob-admin-table-card tbody tr:hover { background: #f1fbfa !important; }

.ob-admin-action-card {
  border-color: #dbe8ed !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 12px 30px rgba(42, 80, 99, .07) !important;
}

.ob-focus-ring:focus {
  border-color: #15a596 !important;
  box-shadow: 0 0 0 3px rgba(21, 165, 150, .13) !important;
}

.onboarding-review-card:first-child {
  border-color: #cfe4ed;
  background: #f1f8fc;
}

.onboarding-review-card:nth-child(2) {
  border-color: #c9e8df;
  background: #f0faf7;
}

@media (max-width: 640px) {
  .ob-admin-page { margin-inline: -.5rem; padding-inline: .5rem; }
  .ob-shell-card { border-radius: 1rem; }
  .ob-standalone-page::before { left: -13rem; }
  .ob-standalone-page::after { right: -15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-form-input { transition: none; }
}