/* oa-branch-gate.css — required branch-of-service picker shown before
   an analyze can run if no case branch has been chosen for the current
   analysis. Modal cannot be dismissed without picking — "Prefer not to
   say" is a valid choice. */

#oa-bg-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(13, 28, 51, .72); backdrop-filter: blur(2px);
  z-index: 10000;
  align-items: center; justify-content: center;
  padding: 18px;
}
#oa-bg-overlay.open { display: flex; }

#oa-bg-card {
  background: #fff; border-radius: 12px; max-width: 460px; width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  border-top: 4px solid var(--gold, #c69c1e);
  padding: 22px 24px 18px;
  font-family: inherit;
  max-height: 92vh; overflow-y: auto;
}
#oa-bg-card h2 {
  color: var(--navy, #1d3461); font-size: 18px; margin: 0 0 4px;
  letter-spacing: .3px;
}
#oa-bg-card .oa-bg-sub {
  color: #5a5a5a; font-size: 12.5px; margin: 0 0 16px; line-height: 1.5;
}
#oa-bg-card .oa-bg-sub strong { color: var(--navy, #1d3461); }

#oa-bg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
@media (max-width: 480px) { #oa-bg-list { grid-template-columns: 1fr; } }

.oa-bg-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 2px solid #e3dcc8; border-radius: 7px;
  cursor: pointer; background: #fff;
  font-size: 13.5px; color: var(--navy, #1d3461); font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
}
.oa-bg-opt:hover { border-color: var(--gold, #c69c1e); background: #fffbe6; }
.oa-bg-opt.selected { border-color: var(--gold, #c69c1e); background: #fff8d6; }
.oa-bg-opt img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.oa-bg-opt img.oa-bg-flag { object-fit: contain; border-radius: 3px; }

/* 2026-05-27 — divider above "Prefer not to say" + smaller/dimmer styling
   for the opt-out itself. Goal: keep the option available but stop
   promoting it. Spans the full 2-col grid (and the 1-col mobile layout). */
.oa-bg-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(to right, transparent, #d6cfb5 30%, #d6cfb5 70%, transparent);
  margin: 6px 0 2px;
}
.oa-bg-opt-private {
  grid-column: 1 / -1;
  font-size: 9px;
  color: #6b6b6b;
  font-weight: 500;
  padding: 4px 7px;
  gap: 6px;
}
.oa-bg-opt-private img { width: 12px; height: 12px; }

#oa-bg-actions { display: flex; align-items: center; justify-content: flex-end; }
#oa-bg-actions .oa-bg-hint { font-size: 11px; color: #888; }
#oa-bg-confirm {
  background: var(--navy, #1d3461); color: #fff; border: none;
  padding: 10px 22px; border-radius: 6px; font-weight: 800; font-size: 13.5px;
  cursor: pointer; transition: background .12s ease;
}
#oa-bg-confirm:disabled { background: #b7bcc6; cursor: not-allowed; }
#oa-bg-confirm:not(:disabled):hover { background: #22456b; }