/*
 * Bank UI (EAT-2961): Google Stitch "Emerald Assistant" design, on top of Bootstrap 4.
 * Scoped to .bk (pages) and .bk-nav (top bar) so the other pages keep the Bootstrap look.
 * Never use .text-danger in these pages outside the step forms: their scripts remove every .text-danger.
 */
:root {
  --bk-primary: #06c167;
  --bk-primary-dark: #006d37;
  --bk-primary-soft: #e7f8ef;
  --bk-surface: #f9f9ff;
  --bk-card: #ffffff;
  --bk-border: #e3e8f2;
  --bk-text: #151c27;
  --bk-muted: #5c6672;
  --bk-error: #ba1a1a;
  --bk-error-soft: #fff1ef;
  --bk-warning: #9a5b00;
  --bk-warning-soft: #fff7e6;
  --bk-info: #1d5fd1;
  --bk-info-soft: #eef4ff;
  --bk-radius: 0.5rem;
  --bk-radius-lg: 1rem;
  --bk-shadow: 0 2px 8px rgba(21, 28, 39, 0.05);
  --bk-font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --bk-font-title: 'Manrope', 'Inter', sans-serif;
  --bk-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Page ---------- */
body.bk-body { background: var(--bk-surface); }
.bk { font-family: var(--bk-font); color: var(--bk-text); font-size: 15px; }
.bk h1, .bk h2, .bk h3, .bk h4, .bk h5, .bk-title { font-family: var(--bk-font-title); color: var(--bk-text); }
.bk a { color: var(--bk-primary-dark); }
.bk .bk-muted { color: var(--bk-muted); }
.bk-label {
  font-family: var(--bk-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bk-muted);
}
.bk-section { margin-bottom: 24px; }

/* ---------- Top bar ---------- */
.bk-nav { background: #fff; border-bottom: 1px solid var(--bk-border); font-family: var(--bk-font); }
.bk-nav .navbar-brand img { width: 130px; }
.bk-nav .nav-link { color: var(--bk-text) !important; font-weight: 500; }
.bk-nav .bk-nav-user { color: var(--bk-text); font-weight: 600; font-size: 14px; max-width: 240px; white-space: normal; }
.bk-nav .bk-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--bk-primary-dark); color: #fff; font-size: 13px; font-weight: 600; margin-right: 6px;
}

/* ---------- Chips ---------- */
.bk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px;
  font-family: var(--bk-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em;
  background: #eef1f6; color: var(--bk-muted); white-space: nowrap;
}
.bk-chip .bk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bk-chip-success { background: var(--bk-primary-soft); color: var(--bk-primary-dark); }
.bk-chip-error { background: var(--bk-error-soft); color: var(--bk-error); }
.bk-chip-warning { background: var(--bk-warning-soft); color: var(--bk-warning); }
.bk-chip-info { background: var(--bk-info-soft); color: var(--bk-info); }

/* ---------- Cards ---------- */
.bk-card {
  background: var(--bk-card); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-lg);
  box-shadow: var(--bk-shadow); padding: 24px;
}
.bk-card-tight { padding: 16px; }
.bk-card + .bk-card { margin-top: 16px; }
.bk-card-title { display: flex; align-items: center; gap: 10px; font-family: var(--bk-font-title); font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.bk-card-title .bk-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--bk-radius); background: var(--bk-primary-soft); color: var(--bk-primary-dark);
}
.bk-panel { background: #f6f8fc; border: 1px solid var(--bk-border); border-radius: var(--bk-radius); padding: 16px; }

/* ---------- Buttons (inside .bk only) ---------- */
.bk .btn { border-radius: var(--bk-radius); font-weight: 600; font-family: var(--bk-font); }
.bk .btn-primary, .bk .btn-success { background: var(--bk-primary); border-color: var(--bk-primary); color: #fff; }
.bk .btn-primary:hover, .bk .btn-success:hover,
.bk .btn-primary:focus, .bk .btn-success:focus { background: #05a858; border-color: #05a858; color: #fff; }
.bk .btn-primary:disabled { background: #8fd9b3; border-color: #8fd9b3; }
.bk .btn-soft { background: var(--bk-info-soft); color: var(--bk-info); border: 1px solid transparent; }
.bk .btn-soft:hover { background: #dfe9ff; color: var(--bk-info); }
.bk .btn-soft-green { background: var(--bk-primary-soft); color: var(--bk-primary-dark); border: 1px solid transparent; }
.bk .btn-soft-green:hover { background: #d3f2e1; color: var(--bk-primary-dark); }
.bk .btn-outline { background: #fff; color: var(--bk-text); border: 1px solid var(--bk-border); }
.bk .btn-outline:hover { background: #f6f8fc; }
.bk .btn-danger { background: var(--bk-error); border-color: var(--bk-error); }
.bk .btn-lg { padding: 10px 22px; font-size: 16px; }

/* ---------- Forms ---------- */
.bk .form-group label, .bk .bk-field-label { font-weight: 600; font-size: 14px; color: var(--bk-text); margin-bottom: 6px; }
.bk .form-control {
  border-radius: var(--bk-radius); border: 1px solid var(--bk-border); background: #fbfcff;
  height: auto; padding: 10px 12px; font-size: 15px; color: var(--bk-text);
}
.bk .form-control:focus { border-color: var(--bk-primary); box-shadow: 0 0 0 3px rgba(6, 193, 103, 0.15); background: #fff; }
.bk .form-control:disabled, .bk .form-control[readonly] { background: #f1f4f9; }
.bk .input-group-text { border-radius: var(--bk-radius); border-color: var(--bk-border); background: #f1f4f9; font-weight: 600; }
.bk .bk-help { display: block; font-size: 13px; color: var(--bk-muted); margin-top: 4px; }
.bk .bk-form-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--bk-border); margin-top: 20px; padding-top: 20px;
}

/* ---------- Hero ---------- */
.bk-hero { padding: 32px 0 8px; }
.bk-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.bk-hero h1 .bk-accent { color: var(--bk-primary-dark); text-decoration: underline; text-decoration-color: var(--bk-primary); text-underline-offset: 6px; }
.bk-hero p.bk-lead { font-size: 16px; color: var(--bk-muted); max-width: 620px; }
.bk-account-id {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin: 10px 0 14px;
  background: #f6f8fc; border: 1px solid var(--bk-border); border-radius: var(--bk-radius);
  font-family: var(--bk-font-mono); font-size: 13px;
}
.bk-account-id .btn-copy { width: auto; color: var(--bk-muted); }
.bk-account-id .msg-copy { position: static; font-family: var(--bk-font); font-size: 12px; }

/* ---------- Alerts ---------- */
.bk-alert { display: flex; gap: 12px; border-radius: var(--bk-radius); padding: 14px 16px; margin-bottom: 16px; }
.bk-alert .bk-alert-icon { font-size: 18px; line-height: 1.3; }
.bk-alert-title { font-weight: 700; margin-bottom: 2px; }
.bk-alert-error { background: var(--bk-error-soft); color: #7a1010; }
.bk-alert-error .bk-alert-icon, .bk-alert-error .bk-alert-title { color: var(--bk-error); }
.bk-alert-warning { background: var(--bk-warning-soft); color: #6b4300; }
.bk-alert-warning .bk-alert-icon { color: var(--bk-warning); }
.bk-alert-info { background: var(--bk-info-soft); color: #1b3f80; }
.bk-alert-info .bk-alert-icon { color: var(--bk-info); }
.bk-alert-success { background: var(--bk-primary-soft); color: var(--bk-primary-dark); }
.bk-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Progress (4 steps) ---------- */
.bk-steps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bk-steps-head .bk-steps-count { color: var(--bk-primary-dark); font-weight: 600; font-size: 14px; }
.bk-step {
  display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border-radius: var(--bk-radius);
  background: #f6f8fc; border: 1px solid transparent; color: var(--bk-text) !important; text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s;
}
.bk-step:hover { border-color: var(--bk-border); background: #f0f3fa; }
.bk-step-badge {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: #e3e8f2; color: var(--bk-muted);
}
.bk-step-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.bk-step-desc { font-size: 12px; color: var(--bk-muted); margin-top: 2px; }
.bk-step-desc a { font-weight: 600; }
.bk-step.is-done .bk-step-badge { background: var(--bk-primary-dark); color: #fff; }
.bk-step.is-done .bk-label { color: var(--bk-primary-dark); }
.bk-step.is-current { background: #fff; border-color: var(--bk-primary); box-shadow: inset 4px 0 0 var(--bk-primary); }
.bk-step.is-current .bk-step-badge { background: var(--bk-primary); color: #fff; }
.bk-step.is-error { background: var(--bk-error-soft); }
.bk-step.is-error .bk-step-badge { background: var(--bk-error); color: #fff; }
.bk-step.is-error .bk-label, .bk-step.is-error .bk-step-desc { color: var(--bk-error); }
.bk-step.is-current.is-error { border-color: var(--bk-error); box-shadow: inset 4px 0 0 var(--bk-error); }

/* ---------- Step form header ---------- */
.bk-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-form-head h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; margin: 0; }
.bk-form-head .bk-num {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--bk-radius);
  background: var(--bk-primary-soft); color: var(--bk-primary-dark); font-size: 16px;
}

/* ---------- Uploads ---------- */
.bk-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 150px; padding: 16px; border: 2px dashed #cdd6e6; border-radius: var(--bk-radius); background: #f6f8fc;
  cursor: pointer; font-weight: 500 !important; color: var(--bk-muted) !important; width: 100%;
}
.bk-upload:hover { border-color: var(--bk-primary); background: #f1fbf6; }
.bk-upload .bk-upload-icon {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--bk-primary-dark); box-shadow: var(--bk-shadow); font-size: 18px;
}
.bk-upload strong { color: var(--bk-text); }
.bk-upload img[src^="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB"] { display: none; }
.bk-upload img { max-height: 120px; border-radius: 6px; }
.bk-provided { display: inline-flex; align-items: center; gap: 6px; color: var(--bk-primary-dark); font-weight: 600; font-size: 13px; }

/* ---------- Help lists (side cards) ---------- */
.bk-check-list { list-style: none; padding: 0; margin: 0; }
.bk-check-list li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; }
.bk-check-list li i { color: var(--bk-primary-dark); margin-top: 3px; }
.bk-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-tile-grid-wide { grid-template-columns: repeat(3, 1fr); }
.bk-tile { background: #f6f8fc; border-radius: var(--bk-radius); padding: 10px 12px; font-size: 13px; font-weight: 600; }
.bk-tile small { display: block; font-weight: 400; color: var(--bk-muted); margin-top: 2px; }

/* ---------- Bank accounts list ---------- */
.bk-bank-item { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--bk-border); border-radius: var(--bk-radius); }
.bk-bank-item + .bk-bank-item { margin-top: 8px; }
.bk-bank-item .bk-bank-icon {
  width: 40px; height: 40px; border-radius: var(--bk-radius); background: var(--bk-primary-soft); color: var(--bk-primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

/* ---------- UBO attestation block ---------- */
.bk-ubo.is-alert { border-color: #f3c3bd; }
.bk-ubo-owner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bk-ubo-owner > div { background: #fff; border: 1px solid var(--bk-border); border-radius: var(--bk-radius); padding: 10px 12px; }
.bk-ubo-owner strong { display: block; font-size: 15px; margin-top: 2px; }
.bk-ubo-owner span { display: block; font-size: 12px; color: var(--bk-muted); }
.bk-ubo-status { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 14px; }
.bk-ubo-status i { margin-top: 3px; }
.bk-ubo-error { color: var(--bk-error); font-size: 13px; }
.bk-ubo-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bk-ubo-actions form { margin: 0; }
.bk-ubo-actions .btn { width: 100%; }
.bk-ubo-link .form-control { font-family: var(--bk-font-mono); font-size: 12px; }

/* ---------- Signing page (client, mobile first) ---------- */
.bk-sign { max-width: 760px; }
.bk-doc { font-size: 0.85rem; line-height: 1.5; }
.bk-doc .bk-value { font-weight: 700; background: #fff4c7; padding: 0 3px; border-radius: 3px; }
.bk-doc table { font-size: 0.8rem; background: #fff; }
.bk-doc table th { background: #f6f8fc; }
.bk-pad { position: relative; border: 2px dashed #cdd6e6; border-radius: var(--bk-radius); background: #fff; }
.bk-pad canvas { display: block; width: 100%; height: 200px; touch-action: none; }
.bk-pad-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #9aa5b5; pointer-events: none; font-size: 14px; }
.bk-signature-image { display: block; max-width: 100%; max-height: 160px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .bk-hero { padding-top: 16px; }
  .bk-hero h1 { font-size: 30px; }
  .bk-card { padding: 18px; }
  .bk-ubo-owner, .bk-tile-grid, .bk-tile-grid-wide { grid-template-columns: 1fr; }
  .bk-form-head { flex-wrap: wrap; }
}

/* ---------- Fixes after the first review ---------- */
.bk-account-id code { color: var(--bk-text); }
.bk-label .bk-provided, .bk-field-label .bk-provided { text-transform: none; letter-spacing: 0; font-family: var(--bk-font); }
.bk-upload-done { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; margin-top: 4px; }

/* ---------- Stripe account state in the ID card ---------- */
.bk-account-caps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 14px; font-size: 13px; font-weight: 500; }
.bk-account-caps .is-on { color: var(--bk-primary-dark); }
.bk-account-caps .is-off { color: var(--bk-error); }

/* ---------- Loading state (public/js/bank-ui.js) ---------- */
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 4px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bk-spin .7s linear infinite;
}
.is-loading { cursor: progress; }
a.is-loading { pointer-events: none; opacity: .85; }
.bk-step.is-loading .bk-step-badge > * { display: none; }
.bk-step.is-loading .bk-step-badge { font-size: 0; }
.bk-step.is-loading .bk-step-badge::after {
  content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: bk-spin .7s linear infinite;
}