/*
 * Payment Assistant provider toggle (REPAY | BILL).
 * Paired with Resources/Scripts/provider-toggle.js. Kept separate from
 * bb-styles-modern.css because that file is synced from docs-bb-template.
 */

/* The control only works with JS, so it only appears after the script runs. */
.provider-toggle
{
	display: none;
}

html.provider-toggle-ready .provider-toggle
{
	display: block;
	margin: 20px 0;
	padding: 12px 16px 16px;
	border: 2px solid var(--bbdoc-color-action, #0974a1);
	border-radius: 6px;
}

.provider-toggle legend
{
	padding: 0 6px;
	font-weight: 600;
	color: var(--bbdoc-color-heading, #212327);
}

.provider-toggle label
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 32px 0 0;
	font-weight: 600;
	cursor: pointer;
}

.provider-toggle input[type="radio"]
{
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--bbdoc-color-action, #0974a1);
	cursor: pointer;
}

.provider-toggle input[type="radio"]:focus-visible
{
	outline: 2px solid var(--bbdoc-color-action, #0974a1);
	outline-offset: 3px;
}

.provider-toggle-status
{
	margin: 8px 0 0;
	font-size: 13px;
}

/* Without JS, every provider section shows (good for crawlers and LLMs). */
html.provider-toggle-ready .provider-section
{
	display: none;
}

html.provider-toggle-ready[data-pa-provider="repay"] .provider-section[data-provider="repay"],
html.provider-toggle-ready[data-pa-provider="bill"] .provider-section[data-provider="bill"]
{
	display: block;
}

html.provider-toggle-ready[data-pa-provider="repay"] li.provider-section[data-provider="repay"],
html.provider-toggle-ready[data-pa-provider="bill"] li.provider-section[data-provider="bill"]
{
	display: list-item;
}

@media print
{
	html.provider-toggle-ready .provider-toggle
	{
		display: none;
	}
}