/* The wrapper now holds the toggle button and, for the capacity pair, the
   "?" help control beside it — so it lays them out itself rather than each
   consuming surface having to. */
.bd-br-request-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0;
}

.bd-br-request-link {
	cursor: pointer;
	text-decoration: underline;
}

.bd-br-request-btn[data-busy] {
	opacity: 0.6;
	pointer-events: none;
}

/* Inert because bd-b2b-loans reports free copies. The control carries a
   `title` saying so, and that tooltip is the whole point of the state — so no
   `pointer-events: none`, which stops the hover reaching the element in every
   browser, and no `disabled` attribute, which stops Chromium showing a title
   on a form control. The click is refused in assets/js/frontend.js, which
   already tested this class. Contrast [data-busy] above: a request in flight
   has nothing to explain, so suppressing the pointer there is correct. */
.bd-br-request-btn--disabled,
.bd-br-request-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* The button's base look, hover state included, is bd-core-shared's .bd-btn, not
   ours. Now that the pointer reaches an inert button, pin the two properties
   we do own so it keeps reading as inert while the tooltip is up. */
.bd-br-request-btn--disabled:hover,
.bd-br-request-btn--disabled:focus {
	opacity: 0.5;
	cursor: not-allowed;
}

.bd-br-debug-notice {
	margin: 10px 0;
	padding: 8px 12px;
	background: var(--bd-warning-soft, #FDF1E1);
	border: 1px dashed var(--bd-warning, #C68209);
	color: var(--bd-warning-ink, #966307);
	font-size: 0.9em;
}

/* ── "?" help control ─────────────────────────────────────────────────── */

/* The visible circle stays 20px; the ::after below widens the hit area to
   24x24 (WCAG 2.5.8 target size) without changing the look. */
.bd-br-help-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: var(--bd-radius-circle, 50%);
	background: transparent;
	color: inherit;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	opacity: 0.75;
}

.bd-br-help-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

.bd-br-help-btn:hover,
.bd-br-help-btn:focus {
	opacity: 1;
}

/* The modal that used to live here is bd-core-shared's since 0.39.0:
   .bd-modal in assets/css/modal.css, shipped with the tokens it uses.
   Five plugins open one, so its rules belong in one place. */