/**
 * Slider Front-end Styles
 *
 * @package Ooshman\Sliders
 */

/* OOSH Slider Styles - Namespaced to avoid conflicts */
.oosh-slider-container {
	display: block !important;
}

.oosh-slider-container .oosh-home-slider {
	height: auto;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.oosh-slider-container .oosh-home-slider .splide__track,
.oosh-slider-container .oosh-home-slider .splide__list {
	height: auto;
}

.oosh-slider-container .splide__slide {
	height: auto;
	width: 100%;
}

.oosh-slider-container .oosh-big-container {
	height: auto;
	padding: 0 !important;
	position: relative;
}

.oosh-slider-container .splide {
	height: auto;
	width: 100%;
}

.oosh-slider-container .oosh-slide-content {
	padding: 0 !important;
	background-size: cover !important;
	min-height: 100%;
	position: relative;
}

/* Override theme padding */
.oosh-home-banner .oosh-big-container .oosh-slide-content {
	padding: 0 !important;
}

.oosh-slider-container .oosh-slider-background-image {
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	z-index: 0;
	position: relative;
}

.oosh-slider-container .oosh-slider-background-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.oosh-slider-container .row {
	height: 100%;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Slide link styling */
.oosh-slider-container .oosh-slide-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.oosh-slider-container .oosh-slide-link:hover {
	text-decoration: none;
}

/* Splide pagination dots - match existing style */
.oosh-slider-container .splide__pagination {
	bottom: 15px;
	left: 0;
	right: 0;
	margin: auto;
	width: max-content;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 25px;
	padding: 10px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px; /* reduced spacing between dots */
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure all pagination pages are visible */
.oosh-slider-container .splide__pagination li {
	display: inline-block !important;
	visibility: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}

.oosh-slider-container .splide__pagination__page {
	width: 10px !important;
	height: 10px !important;
	background: #ef442e;
	border-radius: 100%;
	opacity: 0.5;
	border: none;
	margin: 0 2px !important; /* reduced spacing */
	padding: 0 !important;
	cursor: pointer;
	transition: opacity 0.3s ease;
	display: inline-flex !important; /* prevent flex shrinking */
	align-items: center;
	justify-content: center;
	flex: 0 0 auto !important; /* prevent overlap due to flex shrink */
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
	visibility: visible !important;
	box-sizing: border-box !important;
}

.oosh-slider-container .splide__pagination__page.is-active {
	opacity: 1 !important;
	background: #ef442e !important; /* Same color but full opacity */
	width: 10px !important; /* Force same size */
	height: 10px !important; /* Force same size */
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
	padding: 0 !important;
	margin: 0 2px !important; /* Keep same margin */
	transform: none !important; /* Prevent any transforms */
	scale: 1 !important; /* Prevent scaling */
}

/* Match old slider pagination size on mobile */
@media (max-width: 768px) {
	.oosh-slider-container .splide__pagination__page {
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
	}

	.oosh-slider-container .splide__pagination__page.is-active {
		width: 8px !important;
		height: 8px !important;
		min-width: 8px !important;
		min-height: 8px !important;
		max-width: 8px !important;
		max-height: 8px !important;
	}
}

/* Hide Splide arrows */
.oosh-slider-container .splide__arrow {
	display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
	.oosh-slider-container .oosh-big-container {
		height: auto;
	}

	.oosh-slider-container .splide__slide {
		height: auto;
	}

	.oosh-slider-container .oosh-slide-content {
		padding: 0;
		min-height: auto;
	}

	.oosh-slider-container .splide__pagination {
		background: rgba(255, 255, 255, 0.5);
	}
}

/* Ensure fade transition works */
.oosh-slider-container .splide__slide {
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	position: relative;
	height: auto;
}

.oosh-slider-container .splide__slide.is-active,
.oosh-slider-container .splide__slide.is-visible {
	opacity: 1 !important;
}

/* Make sure first slide is visible on load */
.oosh-slider-container .splide__slide:first-child {
	opacity: 1;
}

/* Ensure slide content is visible */
.oosh-slider-container .splide__slide > div {
	height: auto;
	width: 100%;
}