/* Custom Content Scrollbar - instance styles. Values come from CSS variables set on each wrapper. */

.ccs-scrollbar:focus {
	outline: none;
}
.ccs-scrollbar:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Responsive widths (same breakpoints as before) */
@media only screen and (max-width: 768px) {
	.ccs-w-tablet { width: var(--ccs-w-tablet) !important; }
}
@media only screen and (max-width: 480px) {
	.ccs-w-mobile { width: var(--ccs-w-mobile) !important; }
}
@media only screen and (max-width: 320px) {
	.ccs-w-small { width: var(--ccs-w-small) !important; }
}

/* Horizontal gallery */
.ccs-gallery-x .wp-scrollbar-image { float: left; }
.ccs-gallery-snap .wp-scrollbar-image img { width: var(--ccs-snap); }

/* Custom style for mCustomScrollbar (scrollbar inside or outside the box) */
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_vertical .mCSB_draggerRail,
.ccs-custom-style > .mCSB_scrollTools_vertical .mCSB_draggerRail {
	width: var(--ccs-rail-w) !important;
	background: var(--ccs-track-bg, var(--ccs-rail)) !important;
	border-radius: var(--ccs-rail-r) !important;
	border: var(--ccs-rail-bw, 0px) solid var(--ccs-rail-bc, transparent) !important;
	box-sizing: border-box;
}
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar,
.ccs-custom-style > .mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar {
	width: var(--ccs-bar-w) !important;
	background: linear-gradient(180deg, var(--ccs-bar), var(--ccs-bar2, var(--ccs-bar))) !important;
	border-radius: var(--ccs-bar-r) !important;
	border: var(--ccs-bar-bw, 0px) solid var(--ccs-bar-bc, transparent) !important;
	box-sizing: border-box;
}
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_horizontal .mCSB_draggerRail,
.ccs-custom-style > .mCSB_scrollTools_horizontal .mCSB_draggerRail {
	height: var(--ccs-rail-w) !important;
	background: var(--ccs-track-bg, var(--ccs-rail)) !important;
	border-radius: var(--ccs-rail-r) !important;
	border: var(--ccs-rail-bw, 0px) solid var(--ccs-rail-bc, transparent) !important;
	box-sizing: border-box;
	margin: var(--ccs-rail-m);
}
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.ccs-custom-style > .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
	height: var(--ccs-bar-w) !important;
	background: linear-gradient(90deg, var(--ccs-bar), var(--ccs-bar2, var(--ccs-bar))) !important;
	border-radius: var(--ccs-bar-r) !important;
	border: var(--ccs-bar-bw, 0px) solid var(--ccs-bar-bc, transparent) !important;
	box-sizing: border-box;
	margin: var(--ccs-bar-m);
}
/*
 * Keep the bar centered on the rail whatever their widths. mCustomScrollbar themes (and the old
 * "3px 0" horizontal margins) use fixed offsets that only line up with their own default sizes.
 */
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_vertical .mCSB_draggerRail,
.ccs-custom-style > .mCSB_scrollTools_vertical .mCSB_draggerRail,
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar,
.ccs-custom-style > .mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar {
	margin-left: auto !important;
	margin-right: auto !important;
}
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_horizontal .mCSB_draggerRail,
.ccs-custom-style > .mCSB_scrollTools_horizontal .mCSB_draggerRail,
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.ccs-custom-style > .mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
	position: relative;
	top: 50%;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transform: translateY(-50%);
}
/* "rounded" themes make the horizontal dragger shorter than its track; centering needs the full height. */
.ccs-custom-style > .mCustomScrollBox > .mCSB_scrollTools_horizontal .mCSB_dragger,
.ccs-custom-style > .mCSB_scrollTools_horizontal .mCSB_dragger {
	height: 100% !important;
}

.ccs-custom-style .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.ccs-custom-style .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.ccs-custom-style .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
	background: var(--ccs-bar-hover) !important;
}

/* Native engine: CSS only, no JavaScript */
.ccs-native.ccs-axis-y { overflow-x: hidden; overflow-y: auto; }
.ccs-native.ccs-axis-x { overflow-x: auto; overflow-y: hidden; }
.ccs-native.ccs-axis-yx { overflow: auto; }

/*
 * Scroll area class for any page builder: add "ccs-scroll" (vertical), "ccs-scroll-x" (horizontal)
 * or "ccs-scroll-both" to an element and give it a height. Elementor's Scrollbar controls add these too.
 */
.ccs-scroll { overflow-x: hidden; overflow-y: auto; }
.ccs-scroll-x { overflow-x: auto; overflow-y: hidden; }
.ccs-scroll-both { overflow: auto; }
.ccs-scroll, .ccs-scroll-x, .ccs-scroll-both { overscroll-behavior: contain; }
/* In flex layouts (Elementor containers, Bricks, Divi 5...) children must keep their size and overflow, not shrink. */
.ccs-scroll > *, .ccs-scroll-x > *, .ccs-scroll-both > * { flex-shrink: 0; }

/* Chrome, Edge, Safari */
.ccs-native::-webkit-scrollbar,
.ccs-scroll::-webkit-scrollbar,
.ccs-scroll-x::-webkit-scrollbar,
.ccs-scroll-both::-webkit-scrollbar {
	width: var(--ccs-bar-w, 10px);
	height: var(--ccs-bar-w, 10px);
}
/*
 * Variables: --ccs-bar, --ccs-bar2 (gradient end), --ccs-bar-hover, --ccs-rail, --ccs-bar-w, --ccs-bar-r,
 * --ccs-rail-r, --ccs-bar-bw / --ccs-bar-bc (bar border), --ccs-rail-bw / --ccs-rail-bc (rail border).
 * The floating look sets --ccs-track-bg, --ccs-thumb-border and --ccs-thumb-clip.
 */
.ccs-native::-webkit-scrollbar-track,
.ccs-scroll::-webkit-scrollbar-track,
.ccs-scroll-x::-webkit-scrollbar-track,
.ccs-scroll-both::-webkit-scrollbar-track {
	background: var(--ccs-track-bg, var(--ccs-rail, #C4C4C4));
	border-radius: var(--ccs-rail-r, 0);
	border: var(--ccs-rail-bw, 0px) solid var(--ccs-rail-bc, transparent);
}
.ccs-native::-webkit-scrollbar-thumb,
.ccs-scroll::-webkit-scrollbar-thumb,
.ccs-scroll-x::-webkit-scrollbar-thumb,
.ccs-scroll-both::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--ccs-bar, #1D1D1D), var(--ccs-bar2, var(--ccs-bar, #1D1D1D)));
	background-clip: var(--ccs-thumb-clip, border-box);
	border-radius: var(--ccs-bar-r, 0);
	border: var(--ccs-thumb-border, var(--ccs-bar-bw, 0px) solid var(--ccs-bar-bc, transparent));
}
.ccs-native::-webkit-scrollbar-thumb:horizontal,
.ccs-scroll::-webkit-scrollbar-thumb:horizontal,
.ccs-scroll-x::-webkit-scrollbar-thumb:horizontal,
.ccs-scroll-both::-webkit-scrollbar-thumb:horizontal {
	background-image: linear-gradient(90deg, var(--ccs-bar, #1D1D1D), var(--ccs-bar2, var(--ccs-bar, #1D1D1D)));
}
.ccs-native::-webkit-scrollbar-thumb:hover,
.ccs-scroll::-webkit-scrollbar-thumb:hover,
.ccs-scroll-x::-webkit-scrollbar-thumb:hover,
.ccs-scroll-both::-webkit-scrollbar-thumb:hover {
	background: var(--ccs-bar-hover, #000);
	background-clip: var(--ccs-thumb-clip, border-box);
}

/* Floating: no rail, the bar floats inside a transparent border. Also used by mCustomScrollbar areas. */
.ccs-style-floating {
	--ccs-track-bg: transparent;
	--ccs-thumb-border: 3px solid transparent;
	--ccs-thumb-clip: padding-box;
}

/* Auto hide for Native CSS areas: the bar shows on hover or keyboard focus. */
.ccs-autohide:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb,
.ccs-autohide:not(:hover):not(:focus-within)::-webkit-scrollbar-track {
	background: transparent;
	border-color: transparent;
}

/* Firefox (no ::-webkit-scrollbar support): solid colors only, no gradient or border. */
@supports not selector(::-webkit-scrollbar) {
	.ccs-native, .ccs-scroll, .ccs-scroll-x, .ccs-scroll-both {
		scrollbar-color: var(--ccs-bar, #1D1D1D) var(--ccs-track-bg, var(--ccs-rail, #C4C4C4));
		scrollbar-width: thin;
	}
	.ccs-autohide:not(:hover):not(:focus-within) {
		scrollbar-color: transparent transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccs-native, .ccs-scroll, .ccs-scroll-x, .ccs-scroll-both { scroll-behavior: auto; }
}