/**
 * Custom scrollbar styling for the Zoom setup wizard popup.
 *
 * Targets several possible scroll containers (.mfp-content, the popup box
 * itself, and .bp-step-blocks) because Magnific Popup / BuddyBoss can put
 * the actual overflow on any of these depending on markup version. Only
 * the element that truly has overflow will show the scrollbar; the rest
 * are harmless no-ops.
 *
 * Goals:
 * - ALWAYS visible on every device, including laptops with trackpads/macOS
 *   overlay scrollbars.
 * - Large, high-contrast, distinctly-shaped look so older/low-vision users
 *   can easily see, locate, and grab it.
 */

.bp-zoom-group-show-instructions,
.bp-zoom-group-show-instructions .mfp-content,
.bp-zoom-group-show-instructions .bp-step-nav-main,
.bp-zoom-group-show-instructions .bp-step-blocks,
.bp-zoom-group-show-instructions .bp-step-block,
.bp-zoom-group-show-instructions #zoom-instruction-container {
	scrollbar-gutter: stable !important;
	overflow-y: scroll !important;
	scrollbar-width: auto !important;
	/* scrollbar-color: var(--bb-primary-color, #16697a) var(--bb-background-blocks, #f2f4f5) !important; */
	overflow: overlay !important;
	-webkit-overflow-scrolling: auto !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar {
	width: 28px !important;
	height: 28px !important;
	-webkit-appearance: none !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-track,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-track,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-track,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-track,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-track,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-track {
	background: var(--bb-background-blocks, #f2f4f5) !important;
	border-left: 2px solid var(--bb-body-blocks-border, #d6d9dd) !important;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-thumb,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-thumb,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-thumb,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-thumb,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-thumb,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-thumb {
	background-color: var(--bb-primary-color, #16697a) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 24px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' fill='none'><path d='M8 0L3 6H13L8 0Z' fill='white' fill-opacity='0.9'/><path d='M8 24L3 18H13L8 24Z' fill='white' fill-opacity='0.9'/></svg>") !important;
	border-radius: 999px !important;
	border: 5px solid var(--bb-background-blocks, #f2f4f5) !important;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.15),
		0 0 4px rgba(0, 0, 0, 0.25) !important;
	min-height: 70px !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-thumb:hover,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-thumb:hover,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-thumb:hover,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-thumb:hover,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-thumb:hover,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-thumb:hover {
	background-color: var(--bb-primary-color-hover, #1e8aa4) !important;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		0 0 6px rgba(0, 0, 0, 0.35) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-thumb:active,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-thumb:active,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-thumb:active,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-thumb:active,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-thumb:active,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-thumb:active {
	background-color: var(--bb-primary-color-hover, #1e8aa4) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-button,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-button,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-button,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-button,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-button,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-button {
	display: block !important;
	background-color: var(--bb-primary-color, #16697a) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 14px 10px !important;
	height: 28px !important;
	width: 28px !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-button:vertical:start:decrement,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-button:vertical:start:decrement,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-button:vertical:start:decrement,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-button:vertical:start:decrement,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-button:vertical:start:decrement,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-button:vertical:start:decrement {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M7 0L0 10H14L7 0Z' fill='white'/></svg>") !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-button:vertical:end:increment,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-button:vertical:end:increment,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-button:vertical:end:increment,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-button:vertical:end:increment,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-button:vertical:end:increment,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-button:vertical:end:increment {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M7 10L14 0H0L7 10Z' fill='white'/></svg>") !important;
	border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-button:hover,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-button:hover,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-button:hover,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-button:hover,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-button:hover,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-button:hover {
	background-color: var(--bb-primary-color-hover, #1e8aa4) !important;
}

.bp-zoom-group-show-instructions::-webkit-scrollbar-corner,
.bp-zoom-group-show-instructions .mfp-content::-webkit-scrollbar-corner,
.bp-zoom-group-show-instructions .bp-step-nav-main::-webkit-scrollbar-corner,
.bp-zoom-group-show-instructions .bp-step-blocks::-webkit-scrollbar-corner,
.bp-zoom-group-show-instructions .bp-step-block::-webkit-scrollbar-corner,
.bp-zoom-group-show-instructions #zoom-instruction-container::-webkit-scrollbar-corner {
	background: var(--bb-background-blocks, #f2f4f5) !important;
}