/**
 * =============================================================================
 * PowerX Standard Swiper Slider Component Styles
 * =============================================================================
 * Clean, high-performance styling architecture for the PowerX Swiper Slider
 * widget. Provides full hardware acceleration, seamless Elementor template
 * container stretching, custom navigation buttons, and responsive pagination.
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1.0 - Swiper Wrapper & Main Container
 * 2.0 - Slide Items & Inner Flexbox Layout
 * 3.0 - Elementor Container & Section Full-Height Stretch
 * 4.0 - Swiper Navigation Controls (Prev / Next Arrows)
 * 5.0 - Swiper Pagination Bullets & Active Pill Indicators
 * =============================================================================
 *
 * @package PowerX_Core
 * @subpackage Widgets\Assets\CSS
 * @version 0.0.1
 */

/* =============================================================================
   1.0 - SWIPER WRAPPER & MAIN CONTAINER
   ============================================================================= */
.px-slider-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
	background-color: var(--px-slider-bg, transparent);
	border-radius: var(--px-slider-radius, 0);
}

.px-slider-wrapper .px-swiper-container {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	background-color: transparent;
	border-radius: inherit;
}

.px-slider-wrapper .swiper-wrapper {
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: auto;
}

/* =============================================================================
   2.0 - SLIDE ITEMS & INNER FLEXBOX LAYOUT
   ============================================================================= */
.px-slider-wrapper .swiper-slide {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	background-color: transparent;
	border-radius: inherit;
	flex-shrink: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	outline: none;
	border: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Fade sliders: seamless cross-dissolve with zero background bleed */
.px-slider-wrapper .swiper-fade .swiper-slide,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.px-slider-wrapper .swiper-fade .swiper-slide-active,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide-active,
.px-slider-wrapper.px-slider-effect-fade .px-slide-entering {
	z-index: var(--powerx-z-card, 2);
	visibility: visible;
	pointer-events: auto;
}

/* Leaving slide: remains 100% solid underneath during transition to prevent white background bleed */
.px-slider-wrapper.px-slider-effect-fade .px-slide-leaving {
	z-index: var(--powerx-z-content, 1);
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

/* Leaving slide inner content smoothly fades out quickly so texts do not overlap */
.px-slider-wrapper.px-slider-effect-fade .px-slide-leaving .px-slide-inner {
	opacity: 0;
	transition: opacity 0.25s ease-out;
}

.px-slider-wrapper .swiper-fade .swiper-slide-prev,
.px-slider-wrapper .swiper-fade .swiper-slide-next,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide-prev,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide-next,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide-duplicate-prev,
.px-slider-wrapper.px-slider-effect-fade .swiper-slide-duplicate-next {
	z-index: var(--powerx-z-content, 1);
	visibility: visible;
}

/* Non-fade sliders: isolate inactive slides to prevent subpixel edge leakage */
.px-slider-wrapper:not(.px-slider-effect-fade) .swiper-slide:not(.swiper-slide-active) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.px-slider-wrapper:not(.px-slider-effect-fade) .swiper-slide-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Anti-FOUC: Keep untriggered animated elements in inactive slides strictly hidden */
body:not(.elementor-editor-active) .px-slider-wrapper .swiper-slide:not(.swiper-slide-active) [data-settings*="_animation"],
body:not(.elementor-editor-active) .px-slider-wrapper .swiper-slide:not(.swiper-slide-active) [data-settings*="animation"],
body:not(.elementor-editor-active) .px-slider-wrapper .swiper-slide:not(.swiper-slide-active) .elementor-invisible {
	opacity: 0;
	visibility: hidden;
}

body:not(.elementor-editor-active) .px-slider-wrapper .swiper-slide:not(.swiper-slide-active):not(.px-slide-first):not(:first-child) .elementor-invisible {
	opacity: 0;
	visibility: hidden;
}

/* First Slide Zero-Delay Paint & LCP Hero Image Optimization */
.px-slider-wrapper .px-slide-lcp-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: var(--powerx-z-default, 0);
	pointer-events: none;
}

/* Ensure first slide is immediately 100% visible on initial render (eliminates LCP render delay) */
.px-slider-wrapper .swiper-slide:first-child,
.px-slider-wrapper .px-slide-first {
	opacity: 1;
	visibility: visible;
	z-index: var(--powerx-z-card, 2);
}

.px-slider-wrapper .px-slide-first .elementor-invisible,
.px-slider-wrapper .px-slide-first [data-settings*="animation"],
.px-slider-wrapper .swiper-slide:first-child .elementor-invisible,
.px-slider-wrapper .swiper-slide:first-child [data-settings*="animation"] {
	opacity: 1;
	visibility: visible;
	animation: none;
	transition: none;
}

.px-slider-wrapper .px-slide-inner {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: var(--powerx-z-content, 1);
	background-color: transparent;
	border-radius: inherit;
}

/* =============================================================================
   3.0 - ELEMENTOR CONTAINER & SECTION FULL-HEIGHT / FULL-WIDTH STRETCH
   ============================================================================= */
/* Ensure the parent Elementor widget container holding the slider is always 100% full width */
.elementor-element.elementor-widget-px-slider,
.elementor-widget-px-slider .elementor-widget-container {
	width: 100%;
	max-width: 100%;
}

.e-con:has(> .elementor-widget-container > .px-slider-wrapper),
.e-con:has(> .elementor-widget-px-slider) {
	--container-max-width: 100%;
	--content-width: 100%;
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.px-slider-wrapper .px-slide-inner .powerx-template-container,
.px-slider-wrapper .px-slide-inner .elementor {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

/* Outer slide container: Always stretch to 100% full width */
.px-slider-wrapper .px-slide-inner .elementor > .e-con,
.px-slider-wrapper .px-slide-inner .elementor > .e-flexbox-base,
.px-slider-wrapper .px-slide-inner .elementor > .elementor-section {
	width: 100%;
	max-width: 100%;
	--container-max-width: 100%;
	--content-width: 100%;
	flex: 1 1 100%;
}

@media (max-width: 1024px) {
	.px-slider-wrapper .px-slide-inner .elementor > .e-con,
	.px-slider-wrapper .px-slide-inner .elementor > .e-flexbox-base {
		padding-left: var(--container-default-padding-left, 10px);
		padding-right: var(--container-default-padding-right, 10px);
}
}

/* Inner content container inside the slide: Preserve natural height */
.px-slider-wrapper .px-slide-inner .elementor > .e-con > .e-con,
.px-slider-wrapper .px-slide-inner .elementor > .e-flexbox-base > .e-flexbox-base {
	height: auto;
	min-height: auto;
	--min-height: auto;
	--height: auto;
}

/* =============================================================================
   4.0 - SWIPER NAVIGATION CONTROLS (PREV / NEXT ARROWS)
   ============================================================================= */
.px-slider-wrapper .swiper-button-prev,
.px-slider-wrapper .swiper-button-next,
.px-slider-wrapper .px-slider-nav-btn {
	width: var(--px-arrow-size, 48px);
	height: var(--px-arrow-size, 48px);
	background: var(--px-arrow-bg, var(--powerx-neutral-0, #ffffff));
	color: var(--px-arrow-color, var(--powerx-neutral-900, #212134));
	border-width: var(--px-arrow-border-width, 1px);
	border-style: var(--px-arrow-border-style, none);
	border-color: var(--px-arrow-border, var(--powerx-neutral-150, #eaeaef));
	border-radius: var(--px-arrow-radius, var(--powerx-radius-full, 9999px));
	box-shadow: var(--powerx-shadow-md, 0 4px 12px rgba(33, 33, 52, 0.1));
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--powerx-z-active, 10);
}

.px-slider-wrapper .swiper-button-prev:after,
.px-slider-wrapper .swiper-button-next:after {
	font-size: var(--px-arrow-icon-size, 18px);
	font-weight: 700;
}

.px-slider-wrapper .swiper-button-prev:hover,
.px-slider-wrapper .swiper-button-next:hover,
.px-slider-wrapper .px-slider-nav-btn:hover {
	background: var(--px-arrow-hover-bg, var(--powerx-primary-500, #4945ff));
	color: var(--px-arrow-hover-color, var(--powerx-color-on-dark, #ffffff));
	border-color: var(--px-arrow-hover-border, var(--powerx-primary-500, #4945ff));
	box-shadow: var(--powerx-shadow-lg, 0 8px 24px rgba(73, 69, 255, 0.25));
}

@media (max-width: 767px) {
	.px-slider-wrapper.px-arrows-hide-mobile .swiper-button-prev,
	.px-slider-wrapper.px-arrows-hide-mobile .swiper-button-next,
	.px-slider-wrapper.px-arrows-hide-mobile .px-slider-nav-btn {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.px-slider-wrapper.px-arrows-hide-tablet .swiper-button-prev,
	.px-slider-wrapper.px-arrows-hide-tablet .swiper-button-next,
	.px-slider-wrapper.px-arrows-hide-tablet .px-slider-nav-btn {
		display: none;
	}
}

/* =============================================================================
   5.0 - SWIPER PAGINATION BULLETS & ACTIVE PILL INDICATORS
   ============================================================================= */
.px-slider-wrapper .swiper-pagination {
	position: absolute;
	bottom: var(--px-dots-offset-y, 28px);
	left: 0;
	width: 100%;
	z-index: var(--powerx-z-active, 10);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.25s ease;
	padding: var(--px-dots-wrap-pad, 0 30px);
}

.px-slider-wrapper .swiper-pagination-bullet {
	width: var(--px-dots-size, 10px);
	height: var(--px-dots-size, 10px);
	background: var(--px-dots-color, rgba(255, 255, 255, 0.7));
	border: var(--px-dots-border-width, 0) solid var(--px-dots-border-color, transparent);
	border-radius: var(--px-dots-radius, var(--powerx-radius-full, 9999px));
	opacity: var(--px-dots-opacity, 0.6);
	pointer-events: auto;
	cursor: pointer;
	margin: 0 var(--px-dots-gap, 5px);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.px-slider-wrapper .swiper-pagination-bullet:hover {
	opacity: 0.95;
	background: var(--px-dots-hover-color, var(--powerx-color-on-dark, #ffffff));
}

.px-slider-wrapper .swiper-pagination-bullet-active {
	width: var(--px-dots-active-width, 24px);
	height: var(--px-dots-size, 10px);
	border-radius: var(--px-dots-radius, var(--powerx-radius-full, 9999px));
	background: var(--px-dots-active-color, var(--powerx-primary-500, #4945ff));
	border-color: var(--px-dots-active-border-color, var(--powerx-primary-500, #4945ff));
	opacity: 1;
}

/* =============================================================================
   7.0 EMPTY STATE PLACEHOLDER
   ============================================================================= */
.px-slider-wrapper .px-widget-placeholder,
.px-widget-placeholder.px-widget-empty-state {
	padding: var(--px-slider-empty-pad, 24px 20px);
	border: 1px dashed var(--powerx-neutral-200, #cbd5e1);
	border-radius: var(--powerx-radius-sm, 4px);
	text-align: center;
	color: var(--powerx-neutral-600, #64748b);
	font-size: 14px;
	background: var(--powerx-neutral-100, #f8fafc);
	width: 100%;
	box-sizing: border-box;
}

.px-widget-placeholder .px-empty-icon {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: var(--powerx-neutral-400, #94a3b8);
	display: inline-block;
	margin-bottom: 8px;
}

.px-widget-placeholder .px-empty-title {
	display: block;
	font-size: 15px;
	color: var(--powerx-neutral-900, #1e293b);
	margin-bottom: var(--px-slider-empty-title-mb, 6px);
}

.px-widget-placeholder .px-empty-desc {
	margin: 0;
	font-size: 13px;
	color: var(--powerx-neutral-600, #64748b);
}

.px-widget-placeholder .px-empty-action {
	margin-top: 12px;
}

.px-widget-placeholder .px-btn,
.px-widget-placeholder a.px-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--px-slider-empty-btn-pad, 8px 16px);
	border-radius: var(--powerx-radius-sm, 4px);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.4;
	background: var(--powerx-primary-500, #4945ff);
	color: var(--powerx-color-on-dark, #ffffff);
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.px-widget-placeholder .px-btn:hover,
.px-widget-placeholder a.px-btn:hover {
	background: var(--powerx-primary-600, #3b36e0);
	color: var(--powerx-color-on-dark, #ffffff);
}