/**
 * Smart Product Slider Styles
 * Optimized for Flatsome native slider & UX Builder canvas
 *
 * @package FlatsomeBlockManager
 */

/* ==========================================================================
   1. Wrapper & Tab Navigation
   ========================================================================== */
.uxb-smart-slider-wrapper {
	position: relative;
	margin-bottom: 30px;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
}

/*
 * Tab nav look comes from Flatsome's own nav classes (nav-line, nav-pills, nav-tabs...).
 * The rules below only mirror the layout Flatsome scopes to .tabbed-content, which is
 * not used here so Flatsome's tabs behavior does not hijack the AJAX tab switching.
 */
.uxb-smart-slider-wrapper > h4,
.uxb-smart-slider-wrapper > .uxb-tab-nav,
.uxb-smart-slider-wrapper > .uxb-tab-panels {
	width: 100%;
}

.uxb-smart-slider-wrapper > .uxb-tab-panels {
	min-width: 0;
}

.uxb-smart-slider-wrapper > .nav-line-bottom:before {
	bottom: 0;
	top: auto;
}

.uxb-smart-slider-wrapper > .nav-tabs > li {
	margin: 0 .1em -1px;
}

.uxb-tab-btn.is-loading {
	cursor: progress;
}

.uxb-tab-btn:focus-visible {
	outline: 2px solid var(--primary-color, #446084);
	outline-offset: 2px;
}

@media (min-width: 850px) {
	.uxb-smart-slider-wrapper > .nav-vertical {
		padding-top: 0;
		width: 25%;
	}

	.uxb-smart-slider-wrapper > .nav-vertical.nav-outline {
		padding-right: 15px;
	}

	.uxb-smart-slider-wrapper > .nav-vertical + .uxb-tab-panels {
		width: auto;
	}
}

/* ==========================================================================
   2. Tab Panels & CLS Prevention
   ========================================================================== */
.uxb-tab-panels {
	position: relative;
	min-height: 380px;
}

.uxb-tab-panel {
	display: none;
}

.uxb-tab-panel.active {
	display: block;
}

.uxb-tab-panel[data-animate][data-animate-transition] {
	transition-duration: var(--uxb-anim-speed, 0.7s) !important;
}

/* ==========================================================================
   3. Skeleton Loading State (CLS Optimization)
   ========================================================================== */
.uxb-slider-skeleton {
	width: 100%;
	padding: 10px 0;
}

.uxb-skeleton-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

/* Column count is set inline by smart-slider.js from the real product row at the current screen width. */

.uxb-skeleton-card {
	background: #fff;
	border-radius: 4px;
	padding: 10px;
	border: 1px solid #f0f0f0;
}

.uxb-skeleton-thumb {
	width: 100%;
	padding-top: 100%;
	background: #eee;
	border-radius: 4px;
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
}

.uxb-skeleton-line {
	height: 12px;
	background: #eee;
	border-radius: 4px;
	margin-bottom: 8px;
	position: relative;
	overflow: hidden;
}

.uxb-skeleton-line.category { width: 40%; }
.uxb-skeleton-line.title { width: 85%; height: 14px; }
.uxb-skeleton-line.price { width: 50%; height: 16px; margin-top: 6px; }

.uxb-skeleton-thumb::after,
.uxb-skeleton-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	animation: uxb-shimmer 1.4s infinite;
}

@keyframes uxb-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ==========================================================================
   4. Flatsome Slider Integration
   ========================================================================== */
.uxb-tab-panel .row.slider {
	margin-bottom: 0;
}

/*
 * Arrows like Flatsome: hidden until hover unless Navigation › Always Visible is on (.slider-show-nav), at
 * Flatsome's own 0.7. !important on purpose for both states: site-wide Custom CSS such as
 * `.flickity-prev-next-button { opacity: .8 }` must not override this element's option (user request).
 * Scoped to this element only; disabled arrows keep Flatsome's hidden state.
 */
.uxb-smart-slider-wrapper .slider:not(.slider-show-nav) .flickity-prev-next-button:not(:disabled) {
	opacity: 0 !important;
}

.uxb-smart-slider-wrapper .slider.slider-show-nav .flickity-prev-next-button:not(:disabled),
.uxb-smart-slider-wrapper .slider:not(.slider-show-nav):hover .flickity-prev-next-button:not(:disabled),
.uxb-smart-slider-wrapper .slider:not(.slider-show-nav) .flickity-prev-next-button:not(:disabled):focus-visible {
	opacity: 0.7 !important;
}

.uxb-smart-slider-wrapper .slider .flickity-prev-next-button:not(:disabled):hover {
	opacity: 1 !important;
}

/* Ensure empty notices are cleanly presented */
.uxb-no-products {
	padding: 40px 20px;
	text-align: center;
	color: #777;
	font-style: italic;
	background: #fdfdfd;
	border: 1px dashed #e2e2e2;
	border-radius: 6px;
}