/*!
 * Wexlab Advanced Slider - Shared Frontend Styles
 * Uses CSS custom properties (--wexlab-*) so per-widget Elementor
 * Style controls can theme every instance without editing this file.
 */

.wexlab-slider-wrap {
	position: relative;
	--wexlab-tilt: 1;
	--wexlab-magnetic: 1;
	--wexlab-cursor-drag: 0;
	--wexlab-tilt-strength: 10;
	--wexlab-magnetic-strength: 0.35;
	width: 100%;
	max-width: var( --wexlab-wrap-max-width, 100% );
	margin: var( --wexlab-wrap-margin, 0 );
	padding: var( --wexlab-wrap-padding, 0 );
	overflow: var( --wexlab-wrap-overflow, hidden );
}

.wexlab-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	outline: none;
}

.wexlab-slider-track {
	display: flex;
	will-change: transform;
	touch-action: pan-y;
	user-select: none;
}

.wexlab-slide {
	flex-shrink: 0;
	position: relative;
	background: var( --wexlab-slide-bg, transparent );
	border-radius: var( --wexlab-slide-radius, 0 );
	border: var( --wexlab-slide-border, none );
	box-shadow: var( --wexlab-slide-shadow, none );
	overflow: hidden;
	transition: transform var( --wexlab-transition-duration, .3s ) ease, box-shadow var( --wexlab-transition-duration, .3s ) ease, opacity var( --wexlab-transition-duration, .3s ) ease;
}

.wexlab-slide:hover {
	background: var( --wexlab-slide-hover-bg, var( --wexlab-slide-bg, transparent ) );
	box-shadow: var( --wexlab-slide-hover-shadow, var( --wexlab-slide-shadow, none ) );
	transform: var( --wexlab-slide-hover-transform, none );
}

.wexlab-slide-inner {
	padding: var( --wexlab-slide-padding, 0 );
	height: 100%;
}

/* Images */
.wexlab-slide img {
	display: block;
	width: var( --wexlab-image-width, 100% );
	height: var( --wexlab-image-height, auto );
	max-width: 100%;
	object-fit: var( --wexlab-image-fit, cover );
	object-position: var( --wexlab-image-position, center center );
	border-radius: var( --wexlab-image-radius, 0 );
	filter: var( --wexlab-image-filter, none );
	transition: transform var( --wexlab-transition-duration, .3s ) ease, filter var( --wexlab-transition-duration, .3s ) ease, opacity var( --wexlab-transition-duration, .3s ) ease;
}

.wexlab-slide:hover img {
	transform: var( --wexlab-image-hover-transform, none );
	filter: var( --wexlab-image-hover-filter, var( --wexlab-image-filter, none ) );
}

/* Arrows */
.wexlab-slider-arrows {
	pointer-events: none;
}

.wexlab-arrow-prev,
.wexlab-arrow-next {
	pointer-events: auto;
	position: absolute;
	top: var( --wexlab-arrow-vertical-offset, 50% );
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --wexlab-arrow-size, 44px );
	height: var( --wexlab-arrow-size, 44px );
	border-radius: var( --wexlab-arrow-radius, 50% );
	background: var( --wexlab-arrow-bg, rgba(0,0,0,.5) );
	color: var( --wexlab-arrow-color, #fff );
	border: var( --wexlab-arrow-border, none );
	box-shadow: var( --wexlab-arrow-shadow, none );
	cursor: pointer;
	z-index: 5;
	opacity: var( --wexlab-arrow-opacity, 1 );
	transition: all var( --wexlab-transition-duration, .3s ) ease;
}

.wexlab-arrow-prev:hover,
.wexlab-arrow-next:hover {
	background: var( --wexlab-arrow-hover-bg, var( --wexlab-arrow-bg, rgba(0,0,0,.75) ) );
	color: var( --wexlab-arrow-hover-color, var( --wexlab-arrow-color, #fff ) );
	opacity: var( --wexlab-arrow-hover-opacity, 1 );
}

.wexlab-arrow-prev {
	left: var( --wexlab-arrow-horizontal-offset, 16px );
}

.wexlab-arrow-next {
	right: var( --wexlab-arrow-horizontal-offset, 16px );
}

.wexlab-arrow-prev svg,
.wexlab-arrow-next svg {
	width: var( --wexlab-arrow-icon-size, 18px );
	height: var( --wexlab-arrow-icon-size, 18px );
	fill: currentColor;
}

/* Pagination */
.wexlab-slider-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --wexlab-dot-spacing, 8px );
	margin-top: var( --wexlab-pagination-margin, 16px );
}

.wexlab-dot {
	width: var( --wexlab-dot-size, 8px );
	height: var( --wexlab-dot-size, 8px );
	border-radius: var( --wexlab-dot-radius, 50% );
	background: var( --wexlab-dot-color, rgba(0,0,0,.25) );
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all var( --wexlab-transition-duration, .3s ) ease;
}

.wexlab-dot.is-active {
	width: var( --wexlab-dot-active-size, 22px );
	background: var( --wexlab-dot-active-color, #333 );
}

/* Thumbnails */
.wexlab-thumbs {
	display: flex;
	gap: var( --wexlab-thumb-gap, 8px );
	margin-top: var( --wexlab-thumb-margin, 12px );
	overflow-x: auto;
}

.wexlab-thumb {
	flex-shrink: 0;
	width: var( --wexlab-thumb-width, 72px );
	height: var( --wexlab-thumb-height, 56px );
	border-radius: var( --wexlab-thumb-radius, 4px );
	border: var( --wexlab-thumb-border, 2px solid transparent );
	opacity: var( --wexlab-thumb-opacity, .6 );
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	background: none;
}

.wexlab-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wexlab-thumb.is-active {
	border-color: var( --wexlab-thumb-active-border-color, #333 );
	opacity: var( --wexlab-thumb-active-opacity, 1 );
}

/* Content blocks used across widgets */
.wexlab-heading {
	color: var( --wexlab-heading-color, inherit );
	font-family: var( --wexlab-heading-font-family, inherit );
	font-size: var( --wexlab-heading-font-size, 28px );
	font-weight: var( --wexlab-heading-font-weight, 700 );
	line-height: var( --wexlab-heading-line-height, 1.3 );
	letter-spacing: var( --wexlab-heading-letter-spacing, normal );
	margin: var( --wexlab-heading-margin, 0 0 12px );
}

.wexlab-subheading {
	color: var( --wexlab-subheading-color, inherit );
	font-size: var( --wexlab-subheading-font-size, 16px );
	font-weight: var( --wexlab-subheading-font-weight, 600 );
	margin: var( --wexlab-subheading-margin, 0 0 8px );
	text-transform: var( --wexlab-subheading-transform, none );
}

.wexlab-description {
	color: var( --wexlab-description-color, inherit );
	font-size: var( --wexlab-description-font-size, 15px );
	line-height: var( --wexlab-description-line-height, 1.6 );
	margin: var( --wexlab-description-margin, 0 0 16px );
}

.wexlab-btn {
	display: inline-flex;
	align-items: center;
	gap: var( --wexlab-btn-icon-spacing, 8px );
	color: var( --wexlab-btn-color, #fff );
	background: var( --wexlab-btn-bg, #333 );
	border: var( --wexlab-btn-border, none );
	border-radius: var( --wexlab-btn-radius, 4px );
	padding: var( --wexlab-btn-padding, 12px 24px );
	font-size: var( --wexlab-btn-font-size, 14px );
	font-weight: var( --wexlab-btn-font-weight, 600 );
	text-decoration: none;
	cursor: pointer;
	transition: all var( --wexlab-transition-duration, .3s ) ease;
}

.wexlab-btn:hover {
	color: var( --wexlab-btn-hover-color, var( --wexlab-btn-color, #fff ) );
	background: var( --wexlab-btn-hover-bg, var( --wexlab-btn-bg, #555 ) );
	transform: var( --wexlab-btn-hover-transform, none );
}

.wexlab-btn-secondary {
	background: var( --wexlab-btn-secondary-bg, transparent );
	color: var( --wexlab-btn-secondary-color, #333 );
	border: var( --wexlab-btn-secondary-border, 2px solid currentColor );
}

.wexlab-badge {
	display: inline-block;
	background: var( --wexlab-badge-bg, #e74c3c );
	color: var( --wexlab-badge-color, #fff );
	font-size: var( --wexlab-badge-font-size, 11px );
	font-weight: 700;
	padding: var( --wexlab-badge-padding, 4px 10px );
	border-radius: var( --wexlab-badge-radius, 3px );
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Stars (testimonials, products) */
.wexlab-stars {
	display: inline-flex;
	gap: var( --wexlab-star-spacing, 2px );
	color: var( --wexlab-star-color, #f5b400 );
	margin: var( --wexlab-star-margin, 0 0 10px );
}

.wexlab-stars svg {
	width: var( --wexlab-star-size, 16px );
	height: var( --wexlab-star-size, 16px );
	fill: currentColor;
}

.wexlab-stars .is-empty {
	color: var( --wexlab-star-empty-color, #ddd );
}

/* Hero */
.wexlab-hero-slide {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	min-height: var( --wexlab-hero-min-height, 480px );
}

.wexlab-hero-overlay {
	position: absolute;
	inset: 0;
	background: var( --wexlab-hero-overlay-bg, rgba(0,0,0,.35) );
	background-image: var( --wexlab-hero-overlay-gradient, none );
}

.wexlab-hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var( --wexlab-hero-content-padding, 40px );
	justify-content: var( --wexlab-hero-vertical-align, center );
	align-items: var( --wexlab-hero-horizontal-align, flex-start );
	text-align: var( --wexlab-hero-text-align, left );
}

/* Testimonial */
.wexlab-testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.wexlab-testimonial-author img {
	width: var( --wexlab-avatar-size, 48px );
	height: var( --wexlab-avatar-size, 48px );
	border-radius: 50%;
	object-fit: cover;
}

.wexlab-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #2ecc71;
	font-size: 12px;
}

/* Logo slider */
.wexlab-logo-slide img {
	filter: var( --wexlab-logo-filter, grayscale(100%) );
	opacity: var( --wexlab-logo-opacity, .6 );
	object-fit: contain;
	width: auto;
	max-height: var( --wexlab-logo-max-height, 60px );
	margin: 0 auto;
}

.wexlab-logo-slide:hover img {
	filter: var( --wexlab-logo-hover-filter, none );
	opacity: var( --wexlab-logo-hover-opacity, 1 );
}

/* Post / card / product meta */
.wexlab-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: var( --wexlab-meta-color, #888 );
	margin-bottom: 8px;
}

.wexlab-price ins {
	text-decoration: none;
	color: var( --wexlab-sale-price-color, #e74c3c );
	margin-left: 6px;
}

.wexlab-price del {
	color: var( --wexlab-regular-price-color, #999 );
}

/* Responsive helpers */
@media ( max-width: 1024px ) {
	.wexlab-slide { }
}

@media ( max-width: 767px ) {
	.wexlab-arrow-prev,
	.wexlab-arrow-next {
		width: var( --wexlab-arrow-size-mobile, 34px );
		height: var( --wexlab-arrow-size-mobile, 34px );
	}
	.wexlab-hero-content {
		padding: var( --wexlab-hero-content-padding-mobile, 24px );
		text-align: var( --wexlab-hero-text-align-mobile, center );
		align-items: var( --wexlab-hero-horizontal-align-mobile, center );
	}
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.wexlab-slider-track,
	.wexlab-slide,
	.wexlab-slide img,
	.wexlab-btn {
		transition: none !important;
		animation: none !important;
	}
}

/* Screen-reader only text for accessible labels */
.wexlab-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Animation classes applied on viewport entry (respects reduced motion via JS gate) */
.wexlab-anim { opacity: 0; }
.wexlab-anim.wexlab-anim-in { opacity: 1; transition: opacity .6s ease, transform .6s ease; }
.wexlab-anim-fade { }
.wexlab-anim-slide-up { transform: translateY( 30px ); }
.wexlab-anim-slide-up.wexlab-anim-in { transform: translateY( 0 ); }
.wexlab-anim-zoom { transform: scale( .9 ); }
.wexlab-anim-zoom.wexlab-anim-in { transform: scale( 1 ); }

/* =========================================================
 * Premium Hover Interactions — tilt cards, magnetic buttons,
 * custom drag cursor. Bound by wexlab-slider-interactions.js.
 * Desktop-only (hover:hover + pointer:fine), reduced-motion safe.
 * ========================================================= */
.wexlab-slide-inner,
.wexlab-hero-slide,
.wexlab-mc-slide {
	will-change: transform;
	transition: transform 0.15s ease-out;
}

.wexlab-btn,
.wexlab-arrow-prev,
.wexlab-arrow-next,
.wexlab-team-button,
.wexlab-portfolio-button,
.wexlab-mc-btn {
	will-change: transform;
}

.wexlab-cursor-hint {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 20;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(20, 20, 30, 0.85);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.wexlab-cursor-hint.is-visible {
	opacity: 1;
	transform: scale(1);
}
.wexlab-slider-wrap.wexlab-cursor-drag-active,
.wexlab-slider-wrap.wexlab-cursor-drag-active * {
	cursor: none;
}

@media (hover: none), (pointer: coarse) {
	.wexlab-cursor-hint {
		display: none !important;
	}
	.wexlab-slider-wrap.wexlab-cursor-drag-active,
	.wexlab-slider-wrap.wexlab-cursor-drag-active * {
		cursor: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wexlab-slide-inner,
	.wexlab-hero-slide,
	.wexlab-mc-slide,
	.wexlab-btn,
	.wexlab-arrow-prev,
	.wexlab-arrow-next,
	.wexlab-team-button,
	.wexlab-portfolio-button,
	.wexlab-mc-btn {
		transform: none !important;
		transition: none !important;
	}
	.wexlab-cursor-hint {
		display: none !important;
	}
}