/**
 * O2 Marquee Gallery Styles
 *
 * Base styles for the marquee gallery widget.
 * Instance-specific styles (gap, radius) are rendered inline.
 */

/* Keyframes */
@keyframes marqueeVertical {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}

@keyframes marqueeHorizontal {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Base container */
.marquee-gallery {
	line-height: 0;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.marquee-gallery-item {
	line-height: 0;
}

/* Columns container */
.marquee-columns {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.marquee-column {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

.marquee-column-track {
	width: 100% !important;
	box-sizing: border-box !important;
}

.marquee-gallery-item img {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Widget wrapper full width */
.elementor-widget-marquee_gallery {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-widget-marquee_gallery > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* Lightbox navigation arrows */
.elementor-lightbox .elementor-swiper-button {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.elementor-lightbox .elementor-swiper-button-prev,
.elementor-lightbox .elementor-swiper-button-next {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 50px !important;
	height: 50px !important;
	background: rgba(0,0,0,0.5) !important;
	border-radius: 50% !important;
	align-items: center !important;
	justify-content: center !important;
}

.elementor-lightbox .elementor-swiper-button-prev {
	left: 20px !important;
}

.elementor-lightbox .elementor-swiper-button-next {
	right: 20px !important;
}

.elementor-lightbox .elementor-swiper-button i,
.elementor-lightbox .elementor-swiper-button svg {
	color: white !important;
	fill: white !important;
	font-size: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
	.elementor-widget-marquee_gallery {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}