/* ==========================================================================
   BOOGIE SLIDER - FRONTEND LAYOUT & CONTROLS CSS
   ========================================================================== */

.boogie-slider-wrapper {
	/* Default responsive CSS variables set by attributes via PHP inline style later or fallback defaults */
	--slides-to-show: 1;
	--gap: 20px;
	--transition-speed: 500ms;
	--boogie-slider-height: auto;
	
	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	direction: ltr;
}


/* ==========================================================================
   ALIGNMENT FALLBACK
   Ensures alignwide / alignfull behave on themes that don't define a
   wide layout in theme.json. Themes that do define one keep their values.
   ========================================================================== */
.boogie-slider-wrapper.alignfull {
	max-width: none;
}
.boogie-slider-wrapper.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* Responsive breakpoint overrides to prevent CLS before JS initializes */
@media (min-width: 600px) {
	.boogie-slider-wrapper {
		--slides-to-show: var(--slides-tablet, 2);
	}
}
@media (min-width: 1024px) {
	.boogie-slider-wrapper {
		--slides-to-show: var(--slides-desktop, 3);
	}
}

/* Auto (fixed-width) sizing: slides take a fixed width and as many as fit are
   shown; the edge slide is partially visible. JS reads the same widths and
   drives the step; these rules keep layout stable before JS initializes. */
.boogie-slider-wrapper.sizing-auto .boogie-slide-item {
	flex: 0 0 var(--slide-w-mobile, 200px);
	width: var(--slide-w-mobile, 200px);
}
@media (min-width: 600px) {
	.boogie-slider-wrapper.sizing-auto .boogie-slide-item {
		flex-basis: var(--slide-w-tablet, 240px);
		width: var(--slide-w-tablet, 240px);
	}
}
@media (min-width: 1024px) {
	.boogie-slider-wrapper.sizing-auto .boogie-slide-item {
		flex-basis: var(--slide-w-desktop, 280px);
		width: var(--slide-w-desktop, 280px);
	}
}

/* Height constraints */
.boogie-slider-wrapper.height-equal .boogie-slider-list {
	align-items: stretch;
}
.boogie-slider-wrapper.height-custom .boogie-slider-track {
	height: var(--boogie-slider-height);
}
.boogie-slider-wrapper.height-custom .boogie-slider-list {
	height: 100%;
}
.boogie-slider-wrapper.height-custom .boogie-slide-item {
	height: 100%;
}

/* Core Slider Track & List Layout */
.boogie-slider-track {
	overflow: hidden;
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

.boogie-slider-list {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	gap: var(--gap);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	touch-action: pan-y;
}

.boogie-slider-wrapper.scroll-classic .boogie-slider-list {
	cursor: grab;
}
.boogie-slider-wrapper.scroll-classic .boogie-slider-list.is-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}
.boogie-slider-wrapper.scroll-classic .boogie-slider-list.is-dragging * {
	pointer-events: none;
}

/* Classic Carousel smooth transition */
.boogie-slider-wrapper.scroll-classic .boogie-slider-list {
	transition-property: transform;
	transition-duration: var(--transition-speed);
	transition-timing-function: var(--transition-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Continuous Marquee Scrolling Animation */
.boogie-slider-wrapper.scroll-marquee .boogie-slider-list {
	animation-name: boogieMarquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.boogie-slider-wrapper.scroll-marquee.marquee-paused .boogie-slider-list {
	animation-play-state: paused !important;
}

@keyframes boogieMarquee {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(var(--marquee-translate, -100%), 0, 0);
	}
}

/* ==========================================================================
   NAVIGATION & PAGINATION STYLING (PREMIUM GLASSMORPHIC DETAILS)
   ========================================================================== */

/* Navigation Arrows Container */
.boogie-slider-arrows {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 calc(20px + var(--arrow-offset, 0px));
	pointer-events: none;
	z-index: 10;
}

.boogie-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	cursor: pointer;
	border: none;
	padding: 0;
	box-sizing: border-box;
	pointer-events: auto;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.boogie-arrow:active {
	transform: scale(0.95);
}

.boogie-arrow:focus-visible,
.boogie-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.boogie-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Arrow SVGs styling */
.boogie-arrow svg {
	width: 20px !important;
	height: 20px !important;
	display: block;
	pointer-events: none;
	stroke: currentColor;
	fill: none;
}

/* Glassmorphic Arrows - self-contained contrast so it reads on ANY background
   (photo, gradient, light or dark) without depending on .has-background.
   Dark translucent pill + blur + white icon + subtle ring and shadow. */
.boogie-slider-arrows.style-glassmorphic .boogie-arrow {
	background: var(--arrow-bg, rgba(255, 255, 255, 0.85));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--arrow-color, #111111);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.boogie-slider-arrows.style-glassmorphic .boogie-arrow:hover {
	background: var(--arrow-bg-hover, #ffffff);
	color: var(--arrow-hover-color, #111111);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Minimal Arrows Style - default is dark for light backgrounds */
.boogie-slider-arrows.style-minimal .boogie-arrow {
	background: var(--arrow-bg, transparent);
	border: 2px solid var(--arrow-color, rgba(0, 0, 0, 0.3));
	color: var(--arrow-color, #111111);
	box-shadow: none;
}

.boogie-slider-arrows.style-minimal .boogie-arrow:hover {
	border-color: var(--arrow-hover-color, #111111);
	background: var(--arrow-bg-hover, rgba(0, 0, 0, 0.05));
	color: var(--arrow-hover-color, #111111);
}

/* Minimal Arrows Style - white for dark/colored backgrounds */
.has-background .boogie-slider-arrows.style-minimal .boogie-arrow {
	border-color: var(--arrow-color, rgba(255, 255, 255, 0.6));
	background: var(--arrow-bg, transparent);
	color: var(--arrow-color, #ffffff);
	box-shadow: none;
}

.has-background .boogie-slider-arrows.style-minimal .boogie-arrow:hover {
	border-color: var(--arrow-hover-color, #ffffff);
	background: var(--arrow-bg-hover, rgba(255, 255, 255, 0.1));
	color: var(--arrow-hover-color, #ffffff);
}

/* Classic Solid Arrows Style */
.boogie-slider-arrows.style-classic .boogie-arrow {
	background: var(--arrow-bg, #111111);
	color: var(--arrow-color, #ffffff);
}

.boogie-slider-arrows.style-classic .boogie-arrow:hover {
	background: var(--arrow-bg-hover, #333333);
	color: var(--arrow-hover-color, #ffffff);
}

/* Pagination Dots */
.boogie-slider-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: calc(20px + clamp(0px, var(--pagination-offset, 0px), 1000px));
	transform: translateY(clamp(-1000px, var(--pagination-offset, 0px), 0px));
	width: 100%;
	position: relative;
	z-index: 10;
}

.boogie-dot {
	display: block;
	padding: 0;
	cursor: pointer;
	border: none;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dots design (Active dot expands into pill) */
.boogie-slider-pagination.style-dots .boogie-dot {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: var(--dot-color, rgba(0, 0, 0, 0.2));
}

.boogie-slider-pagination.style-dots .boogie-dot.active {
	width: 24px;
	background: var(--dot-active-color, #111111);
}

/* Clean Dots in Dark Themes */
.has-background .boogie-slider-pagination.style-dots .boogie-dot {
	background: var(--dot-color, rgba(255, 255, 255, 0.3));
}
.has-background .boogie-slider-pagination.style-dots .boogie-dot.active {
	background: var(--dot-active-color, #ffffff);
}

/* Progress Lines Style */
.boogie-slider-pagination.style-lines .boogie-dot {
	height: 3px;
	width: 30px;
	background: var(--dot-color, rgba(0, 0, 0, 0.15));
	border-radius: 1px;
}

.boogie-slider-pagination.style-lines .boogie-dot.active {
	background: var(--dot-active-color, #111111);
	width: 45px;
}

.has-background .boogie-slider-pagination.style-lines .boogie-dot {
	background: var(--dot-color, rgba(255, 255, 255, 0.2));
}
.has-background .boogie-slider-pagination.style-lines .boogie-dot.active {
	background: var(--dot-active-color, #ffffff);
}

/* Numbers style (01 / 05) */
.boogie-slider-pagination.style-numbers {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--dot-color, #666666);
	letter-spacing: 0.05em;
}

.has-background .boogie-slider-pagination.style-numbers {
	color: var(--dot-color, rgba(255, 255, 255, 0.7));
}

.boogie-slider-pagination.style-numbers span.current {
	color: var(--dot-active-color, #111111);
}

.has-background .boogie-slider-pagination.style-numbers span.current {
	color: var(--dot-active-color, #ffffff);
}

/* Top Progress Bar Indicator */
.boogie-slider-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
	z-index: 12;
}

.boogie-slider-progress-bar-fill {
	height: 100%;
	width: 0%;
	background: currentColor; /* Inherits text/color settings */
	transition: width linear;
}

/* ==========================================================================
   FADE & ZOOM EFFECTS ENGINE OVERRIDES
   ========================================================================== */

/* Stack slides absolutely so they sit on top of each other in classic fade/zoom modes */
.boogie-slider-wrapper.scroll-classic.effect-fade .boogie-slider-list,
.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slider-list {
	display: block !important;
	position: relative;
	width: 100%;
}

.boogie-slider-wrapper.scroll-classic.effect-fade .boogie-slide-item,
.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slide-item {
	width: 100% !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	left: -9999px !important; /* Move off-screen by default to prevent premature IntersectionObserver triggers */
	transition: opacity var(--transition-speed, 650ms) var(--transition-easing, cubic-bezier(0.16, 1, 0.3, 1)),
	            transform var(--transition-speed, 650ms) var(--transition-easing, cubic-bezier(0.16, 1, 0.3, 1)),
	            visibility var(--transition-speed, 650ms),
	            left 0s linear var(--transition-speed, 650ms) !important;
}

/* Inactive slides are placed absolutely, stretching to fill parent track height */
.boogie-slider-wrapper.scroll-classic.effect-fade .boogie-slide-item:not(.active-slide),
.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slide-item:not(.active-slide) {
	position: absolute !important;
	top: 0 !important;
	height: 100% !important;
}

/* Active slide is relative, naturally stretching the slider-list height */
.boogie-slider-wrapper.scroll-classic.effect-fade .boogie-slide-item.active-slide,
.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slide-item.active-slide {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 4 !important;
	left: 0 !important; /* Instantly bring onto screen */
	transition: opacity var(--transition-speed, 650ms) var(--transition-easing, cubic-bezier(0.16, 1, 0.3, 1)),
	            transform var(--transition-speed, 650ms) var(--transition-easing, cubic-bezier(0.16, 1, 0.3, 1)),
	            visibility var(--transition-speed, 650ms),
	            left 0s linear !important;
}

/* Inactive Fade Opacities */
.boogie-slider-wrapper.scroll-classic.effect-fade .boogie-slide-item:not(.active-slide) {
	opacity: var(--fade-opacity, 0) !important;
	visibility: visible !important;
}

/* Zoom state scaling + fade opacity (allows hybrid zoom-fade stack transitions) */
.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slide-item:not(.active-slide) {
	opacity: var(--fade-opacity, 0) !important;
	visibility: visible !important;
	transform: scale(var(--zoom-scale, 0.92)) !important;
}

.boogie-slider-wrapper.scroll-classic.effect-zoom .boogie-slide-item.active-slide {
	transform: scale(1) !important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.boogie-slider-wrapper .boogie-slider-list,
	.boogie-slider-wrapper .boogie-slide-item,
	.boogie-arrow,
	.boogie-dot {
		transition-duration: 0.01ms !important;
	}
	.boogie-slider-wrapper.scroll-marquee .boogie-slider-list {
		animation-play-state: paused !important;
	}
}