/* ============================================================
   Landing Bundle Addons — Frontend CSS
   Icon Hover Card Widget
   ============================================================ */

/* ─── Card ──────────────────────────────────────────────────── */
.lba-ihc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: pointer;
	/* Default padding — bottom is generous to keep content clear of arrow */
	padding: 36px 32px 72px;
	background-color: #ffffff;
	border: 1px solid #EBEBEB;
	border-radius: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	/* NO CSS transition on transform — GSAP handles lift timing to avoid conflict */
	transition: box-shadow 0.35s ease;
	-webkit-font-smoothing: antialiased;
}

/* Full-cover link */
.lba-ihc-card-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: block;
}

/* ─── Main Icon ─────────────────────────────────────────────── */
.lba-ihc-icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	margin-bottom: 24px;
	line-height: 1;
}

.lba-ihc-icon i {
	font-size: 44px;
	color: #6FCF4C;
	display: block;
}

.lba-ihc-icon svg {
	width: 44px;
	height: 44px;
	fill: #6FCF4C;
}

/* ─── Heading ───────────────────────────────────────────────── */
.lba-ihc-heading {
	position: relative;
	z-index: 2;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: #1A1A2E;
	letter-spacing: -0.01em;
}

/* ─── Description ───────────────────────────────────────────── */
.lba-ihc-description {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #6B7280;
}

/* ─── Arrow ─────────────────────────────────────────────────── */
.lba-ihc-arrow {
	position: absolute;
	bottom: 24px;
	right: 26px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #1A1A2E;
	pointer-events: none;
	opacity: 0;
	transform: translate(6px, 6px);
}

.lba-ihc-arrow svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	flex-shrink: 0;
}

.lba-ihc-arrow i {
	display: block;
	font-size: inherit;
	line-height: 1;
}

.lba-ihc-arrow img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* ─── Decoration ────────────────────────────────────────────── */
.lba-ihc-decoration {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	width: 180px;
	height: 180px;
	opacity: 0;
}

/* Top Right anchor */
.lba-ihc-deco-top-right .lba-ihc-decoration {
	top: -40px;
	right: -40px;
	bottom: auto;
	left: auto;
}

/* Bottom Right anchor */
.lba-ihc-deco-bottom-right .lba-ihc-decoration {
	bottom: -40px;
	right: -40px;
	top: auto;
	left: auto;
}

.lba-ihc-decoration-svg {
	width: 100%;
	height: 100%;
	display: block;
	color: #F0EDE8;
}

/* ─── Editor panel body (controls sidebar): keep icon stable ─── */
.elementor-editor-active .lba-ihc-icon {
	transform: none;
}


/* ============================================================
   Landing Bundle Addons — Creative Tabs Widget
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.lba-ct-wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	width: 100%;
	background-color: #f5f4ee;
	border: 1px solid #dddad0;
	border-radius: 8px;
}

/* ── Tabs Panel ──────────────────────────────────────────── */
.lba-ct-tabs-panel {
	display: flex;
	flex-direction: column;
	width: 45%;
	flex-shrink: 0;
}

/* ── Single Tab ──────────────────────────────────────────── */
.lba-ct-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 24px 24px 28px;
	cursor: pointer;
	transition: background-color 0.3s ease, flex-grow 0.4s ease;
	user-select: none;
	-webkit-user-select: none;
	flex-grow: 0;
}

.lba-ct-tab:not(:last-child) {
	border-bottom: 1px solid #dddad0;
}

/* Active tab – grows to fill remaining height; content pinned to bottom */
.lba-ct-tab.lba-ct-active {
	flex-grow: 1;
}

/* ── Stroke wrap (left edge indicator column) ────────────── */
.lba-ct-stroke-wrap {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	overflow: hidden;
	pointer-events: none;
}

/* Track: static faint background on active tab */
.lba-ct-stroke-track {
	position: absolute;
	inset: 0;
	background-color: rgba(107, 143, 113, 0.18);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lba-ct-tab.lba-ct-active .lba-ct-stroke-track {
	opacity: 1;
}

/* Progress bar – animated by JS on autoplay */
.lba-ct-tab-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%;
	background-color: #6b8f71;
	will-change: height;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes lba-ct-fill-down {
	from {
		height: 0%;
	}

	to {
		height: 100%;
	}
}

@keyframes lba-ct-fill-up {
	from {
		height: 0%;
	}

	to {
		height: 100%;
	}
}

/* ── Tab Top Row: heading (left) + number (right) ─────────── */
.lba-ct-tab-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lba-ct-heading {
	margin: 0;
	padding: 0;
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #2d2d2a;
	transition: color 0.3s ease;
}

.lba-ct-tab.lba-ct-active .lba-ct-heading {
	color: #1a1a16;
}

.lba-ct-tab-number {
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 400;
	color: #aaa99a;
	letter-spacing: 0.05em;
	line-height: 1;
	transition: color 0.3s ease;
}

.lba-ct-tab.lba-ct-active .lba-ct-tab-number {
	color: #2d2d2a;
}

/* ── Tab Bottom: description (only visible on active) ───────── */
.lba-ct-tab-bottom {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
	margin-top: auto;
	/* Push to bottom naturally */
}

.lba-ct-tab.lba-ct-active .lba-ct-tab-bottom {
	grid-template-rows: 1fr;
	opacity: 1;
}

.lba-ct-description-wrap {
	overflow: hidden;
	min-height: 0;
}

.lba-ct-description {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5a5a52;
}

/* ── Content Panel (desktop right side) ──────────────────── */
.lba-ct-content-panel {
	position: relative;
	width: 55%;
	min-height: 400px;
	background-color: #2d2d2a;
	overflow: hidden;
	flex-shrink: 0;
}

.lba-ct-content-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 1;
}

.lba-ct-content-slide.lba-ct-content-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.lba-ct-content-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.lba-ct-content-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #3a3a35 0%, #1e1e1a 100%);
	min-height: 300px;
}

.lba-ct-shortcode-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 24px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	font-size: 14px;
}

.lba-ct-shortcode-placeholder code {
	font-size: 12px;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px 8px;
	border-radius: 4px;
	word-break: break-all;
}

/* ── Mobile inline content (hidden on desktop) ───────────── */
.lba-ct-mobile-content {
	display: none;
}

/* ── Keyboard focus ──────────────────────────────────────── */
.lba-ct-tab:focus-visible {
	outline: 2px solid #6b8f71;
	outline-offset: -2px;
}

/* ============================================================
   RESPONSIVE — Mobile: stacked accordion
   ============================================================ */
@media (max-width: 767px) {

	.lba-ct-wrapper {
		flex-direction: column;
	}

	.lba-ct-tabs-panel {
		width: 100% !important;
	}

	/* Hide desktop right panel on mobile */
	.lba-ct-content-panel {
		display: none !important;
	}

	/* Disable flex-grow on mobile – natural height only */
	.lba-ct-tab.lba-ct-active {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	/* Show mobile inline content under active tab */
	.lba-ct-tab.lba-ct-active .lba-ct-mobile-content {
		display: block;
		width: 100%;
		background-color: #2d2d2a;
		overflow: hidden;
	}

	.lba-ct-tab.lba-ct-active .lba-ct-mobile-content .lba-ct-content-image {
		width: 100%;
		height: auto;
		max-height: 300px;
		object-fit: cover;
		display: block;
	}

	.lba-ct-tab.lba-ct-active .lba-ct-mobile-content .lba-ct-content-placeholder {
		min-height: 200px;
	}

	.lba-ct-tab {
		padding-left: 20px;
	}
}

/* ============================================================
   Landing Bundle Addons — Remote Navigation
   ============================================================ */

.lba-remote-nav-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.lba-remote-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
	background-color: transparent;
	border: 1px solid currentColor;
}

/* Ensure icons fit nicely */
.lba-remote-nav-btn i {
	line-height: 1;
}

.lba-remote-nav-btn svg {
	display: block;
}


/* ============================================================
   Landing Bundle Addons — Swiper Container Overrides
   ============================================================ */

/* Main wrapper */
.lba-slide-anything-swiper {
	overflow: hidden !important;
	display: block !important;
	visibility: visible !important;
	/* Ensure it works well inside Elementor Flex */
	flex-grow: 1;
	min-width: 0;
}

/* Swiper Wrapper Fix */
.lba-slide-anything-swiper>.swiper-wrapper {
	display: flex !important;
	position: relative !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	width: 100% !important;
	height: 100% !important;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.lba-remote-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
	background-color: transparent;
	border: 1px solid currentColor;
}

/* Ensure icons fit nicely */
.lba-remote-nav-btn i {
	line-height: 1;
}

.lba-remote-nav-btn svg {
	display: block;
}


/* ============================================================
   Landing Bundle Addons — Swiper Container Overrides
   ============================================================ */

/* Main wrapper */
.lba-slide-anything-swiper {
	overflow: hidden !important;
	display: block !important;
	visibility: visible !important;
	/* Ensure it works well inside Elementor Flex */
	flex-grow: 1;
	min-width: 0;
}

/* Swiper Wrapper Fix */
.lba-slide-anything-swiper>.swiper-wrapper {
	display: flex !important;
	position: relative !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	width: 100% !important;
	height: 100% !important;
	box-sizing: content-box !important;
	align-items: stretch !important;
	transform: translate3d(0px, 0, 0);
}

/* Slide Items */
.lba-slide-anything-item.swiper-slide {
	flex-shrink: 0 !important;
	height: auto !important;
	display: flex !important;
	transition-property: transform !important;
}

/* Editor preview fix for empty wrapper */
.elementor-editor-active .lba-slide-anything-swiper>.swiper-wrapper {
	min-height: 50px;
}

/* Bleed effect */
.lba-slide-anything-bleed .lba-slide-anything-swiper {
	overflow: visible !important;
}

/* Hide global horizontal scrollbar if bleed is active on the page */
body:has(.lba-slide-anything-bleed) {
	overflow-x: hidden;
}

/* ============================================================
   Landing Bundle Addons — Remote Tabs
   ============================================================ */

/* Remote Tabs Content Wrapper */
.lba-remote-tabs-content-wrapper {
	position: relative;
	width: 100%;
}

.lba-rtc-item {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.lba-rtc-item.active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

.lba-rtc-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Content Transitions Variations ── */
.lba-rtc-transition-none .lba-rtc-item {
	transition: none !important;
}

.lba-rtc-transition-none .lba-rtc-item:not(.active) {
	display: none;
}

.lba-rtc-transition-none .lba-rtc-item.active {
	display: block;
}

.lba-rtc-transition-fade .lba-rtc-item:not(.active) {
	opacity: 0;
}

.lba-rtc-transition-fadeInUp .lba-rtc-item:not(.active) {
	opacity: 0;
	transform: translateY(20px);
}

.lba-rtc-transition-fadeInUp .lba-rtc-item.active {
	opacity: 1;
	transform: translateY(0);
}

.lba-rtc-transition-fadeInDown .lba-rtc-item:not(.active) {
	opacity: 0;
	transform: translateY(-20px);
}

.lba-rtc-transition-fadeInDown .lba-rtc-item.active {
	opacity: 1;
	transform: translateY(0);
}

.lba-rtc-transition-zoomIn .lba-rtc-item:not(.active) {
	opacity: 0;
	transform: scale(0.96);
}

.lba-rtc-transition-zoomIn .lba-rtc-item.active {
	opacity: 1;
	transform: scale(1);
}

/* ── Description Animation ── */
.lba-rtb-desc-toggle {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}

.lba-rtb-item.active .lba-rtb-desc-toggle {
	grid-template-rows: 1fr;
	opacity: 1;
}

.lba-rtb-desc-inner {
	overflow: hidden;
}

/* ── Remote Tabs Stroke ── */
.lba-rtb-item {
	position: relative;
}

.lba-rtb-stroke-wrap {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

/* Track: static faint background on active tab */
.lba-rtb-stroke-track {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.08);
	/* Default track color, will be covered by Elementor styles ideally, or keep neutral */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lba-rtb-item.active .lba-rtb-stroke-track {
	opacity: 1;
}

/* Left Position Stroke */
.lba-rtb-stroke-pos-left .lba-rtb-stroke-wrap {
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
}

.lba-rtb-stroke-pos-left .lba-rtb-tab-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%;
	background-color: #6FCF4C;
	will-change: height;
}

/* Bottom Position Stroke */
.lba-rtb-stroke-pos-bottom .lba-rtb-stroke-wrap {
	left: 0;
	bottom: 0;
	right: 0;
	height: 3px;
}

.lba-rtb-stroke-pos-bottom .lba-rtb-tab-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	background-color: #6FCF4C;
	will-change: width;
}

@keyframes lba-rtb-fill-down {
	from {
		height: 0%;
	}

	to {
		height: 100%;
	}
}

@keyframes lba-rtb-fill-right {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

/* ── Remote Tabs Horizontal & Grid Layout ── */
.lba-rtb-layout-horizontal .lba-remote-tabs-button-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.lba-rtb-layout-horizontal .lba-rtb-item {
	flex: 1;
}

/* Base Number Styles */
.lba-rtb-number {
	font-size: 15px;
	line-height: 1;
	font-weight: 500;
	margin-left: 10px;
}

/* Breakpoints for Grid */
@media (max-width: 1024px) {
	.lba-rtb-grid-bp-tablet.lba-rtb-grid-enabled-yes .lba-remote-tabs-button-wrapper {
		display: grid;
		grid-template-columns: repeat(var(--rtb-grid-cols, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.lba-rtb-grid-bp-mobile.lba-rtb-grid-enabled-yes .lba-remote-tabs-button-wrapper {
		display: grid;
		grid-template-columns: repeat(var(--rtb-grid-cols, 1), 1fr);
	}

	.lba-rtb-grid-bp-tablet.lba-rtb-grid-enabled-yes .lba-remote-tabs-button-wrapper {
		display: grid;
	}
}

/* ============================================================
   Landing Bundle Addons — Remote Tab Menu
   ============================================================ */

.lba-rtm-container {
	position: relative;
	display: inline-flex;
	align-items: center;
	background-color: #EAEAF0;
	border-radius: 50px;
	padding: 5px;
	overflow: hidden;
	/* Or visible if we want shadows to bleed, but typically hidden is fine unless shadow is needed */
}

/* The animated active indicator */
.lba-rtm-pill {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	background-color: #1D1D1F;
	border-radius: 50px;
	z-index: 1;
	pointer-events: none;
}

.lba-rtm-item {
	position: relative;
	z-index: 2;
	/* Needs to be above the pill */
	cursor: pointer;
	padding: 10px 20px;
	color: #333333;
	font-weight: 500;
	transition: color 0.3s ease;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

/* ============================================================
   Landing Bundle Addons — Remote Tabs Icon (macOS Dock)
   ============================================================ */
.lba-remote-tabs-icon-wrapper {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.lba-rti-item {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* default scale from JS or CSS */
	--dock-scale: 1;
	transform: scale(var(--dock-scale));
	transform-origin: bottom center;
	will-change: transform;
	/* fallback transition */
	transition: transform 0.1s ease-out;
	z-index: 1;
}

.lba-rti-item:hover {
	z-index: 2;
}

.lba-rti-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 20%;
	background-color: #333;
	color: #fff;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease, border-radius 0.3s ease;
}

.lba-rti-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* or cover depending on user control, set dynamically if needed */
	display: block;
}

.lba-rti-icon svg {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

.lba-rti-icon i {
	font-size: 24px;
}

/* Tooltip */
.lba-rti-tooltip {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%) scale(0.9);
	background-color: rgba(30, 30, 30, 0.85);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: #fff;
	padding: 5px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 10;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.lba-rti-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: rgba(30, 30, 30, 0.85) transparent transparent transparent;
}

/* Show tooltip on hover */
.lba-rti-item:hover .lba-rti-tooltip {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* Active Indicator */
.lba-rti-item::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.lba-rti-item.active::after {
	opacity: 1;
}

/* ============================================================
   Landing Bundle Addons — Marquee
   ============================================================ */

.lba-marquee-container {
	display: flex;
	overflow: hidden;
	user-select: none;
	width: 100%;
	--lba-marquee-gap: 20px;
	gap: var(--lba-marquee-gap);
	/* Default safe padding to prevent hover lift and shadows from clipping */
	padding-top: calc(var(--lba-marquee-lift, 0px) + 15px);
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
}

.lba-marquee-track {
	display: flex;
	align-items: center;
	gap: inherit;
	flex-shrink: 0;
	justify-content: flex-start;
	animation: lba-marquee-scroll var(--lba-marquee-speed, 20s) linear infinite;
}

.lba-marquee-container[data-direction="reverse"] .lba-marquee-track {
	animation-direction: reverse;
}

.lba-marquee-pause-hover:hover .lba-marquee-track {
	animation-play-state: paused;
}

@keyframes lba-marquee-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-100% - var(--lba-marquee-gap)));
	}
}

.lba-marquee-item {
	display: inline-block;
	text-decoration: none;
	background-color: #fff;
	padding: 20px 30px;
	border-radius: 10px;
	transition: all 0.3s ease;
	flex-shrink: 0;
	color: inherit;
}

.lba-marquee-item:hover {
	transform: translateY(calc(-1 * var(--lba-marquee-lift, 0px)));
}

.lba-marquee-item-inner {
	display: flex;
	align-items: center;
	gap: 15px;
}

.lba-marquee-image {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lba-marquee-image img {
	max-width: 50px;
	height: auto;
	display: block;
	object-fit: contain;
}

.lba-marquee-text {
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

/* Grayscale Others Feature */
.lba-marquee-grayscale-others:hover .lba-marquee-item {
	filter: grayscale(100%);
	opacity: 0.5;
}

.lba-marquee-grayscale-others .lba-marquee-item:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ============================================================
   Landing Bundle Addons — Swipe on Scroll
   ============================================================ */

.lba-sos-wrapper {
	/* Ensure the wrapper does not force children (like the sticky column) to stretch to its full height, which breaks position: sticky */
	align-items: flex-start !important;
}

/* The sticky container needs to be position sticky */
.lba-sos-sticky_col {
	position: sticky !important;
	position: -webkit-sticky !important;
	/* Safari support */
	align-self: flex-start;
	/* Crucial so flexbox doesn't stretch it to parent height */
	height: max-content;
	min-height: 100px;
	/* Top offset should be handled by Elmentor inline CSS or settings, but default 0 */
	top: 0;
	z-index: 10;
	/* Prevent inner absolute items from overlapping other areas unnecessarily */
	overflow: hidden;
}

/* Children of sticky container are assumed to be the changing items */
.lba-sos-sticky_col>* {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.lba-sos-sticky_col>*.lba-sos-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
	/* Crucial for it to bubble height up to the sticky column */
	z-index: 2;
}

/* Transitions based on attribute */
.lba-sos-sticky_col[data-sos-animation="none"]>* {
	transition: none !important;
}

.lba-sos-sticky_col[data-sos-animation="none"]>*:not(.lba-sos-active) {
	display: none;
}

.lba-sos-sticky_col[data-sos-animation="none"]>*.lba-sos-active {
	display: block;
}

.lba-sos-sticky_col[data-sos-animation="fade-in-up"]>*:not(.lba-sos-active) {
	opacity: 0;
	transform: translateY(30px);
}

.lba-sos-sticky_col[data-sos-animation="fade-in-up"]>*.lba-sos-active {
	opacity: 1;
	transform: translateY(0);
}

.lba-sos-sticky_col[data-sos-animation="fade-in-down"]>*:not(.lba-sos-active) {
	opacity: 0;
	transform: translateY(-30px);
}

.lba-sos-sticky_col[data-sos-animation="fade-in-down"]>*.lba-sos-active {
	opacity: 1;
	transform: translateY(0);
}

.lba-sos-sticky_col[data-sos-animation="slide-up"]>*:not(.lba-sos-active) {
	opacity: 0;
	transform: translateY(100%);
}

.lba-sos-sticky_col[data-sos-animation="slide-up"]>*.lba-sos-active {
	opacity: 1;
	transform: translateY(0);
}

.lba-sos-sticky_col[data-sos-animation="slide-down"]>*:not(.lba-sos-active) {
	opacity: 0;
	transform: translateY(-100%);
}

.lba-sos-sticky_col[data-sos-animation="slide-down"]>.lba-sos-active {
	opacity: 1;
	transform: translateY(0);
}


/* ============================================================
   Landing Bundle Addons — Horizontal Scroll Widget
   ============================================================ */

/* ── Root shell ──────────────────────────────────────────────── */
.lba-hs-root {
	position: relative;
	width: 100%;
}

/* ── Scroll Wrapper (the actual overflow container) ──────────── */
.lba-hs-wrapper {
	position: relative;
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
}

/* Smooth scroll behaviour (opt-in) */
.lba-hs-smooth {
	scroll-behavior: smooth;
}

/* Hide native scrollbar (opt-in) */
.lba-hs-hide-scrollbar {
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE/Edge */
}

.lba-hs-hide-scrollbar::-webkit-scrollbar {
	display: none;
	/* Chrome / Safari */
}

/* ── Edge Fade Overlay ───────────────────────────────────────── */
.lba-hs-fade {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Pseudo-element fade (fallback for older mix-blend) */
.lba-hs-wrapper.lba-hs-fade::before,
.lba-hs-wrapper.lba-hs-fade::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.lba-hs-wrapper.lba-hs-fade::before {
	left: 0;
}

.lba-hs-wrapper.lba-hs-fade::after {
	right: 0;
}

/* ── Track (flex row of items) ───────────────────────────────── */
.lba-hs-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: max-content;
	min-width: 100%;
	gap: 24px;
	/* default: overridden by Elementor */
}

/* ── Individual Item Slot ────────────────────────────────────── */
.lba-hs-item {
	width: 400px;
	/* default: overridden by Elementor */
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

/* Any moved Elementor container should fill its slot */
.lba-hs-item>.e-con,
.lba-hs-item>.elementor-container,
.lba-hs-item>[class*="elementor-"] {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 100%;
}

/* ── Placeholder (shown in editor when container not yet linked) */
.lba-hs-item-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: rgba(74, 144, 217, 0.06);
	border: 1.5px dashed rgba(74, 144, 217, 0.35);
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	color: rgba(74, 144, 217, 0.8);
}

.lba-hs-item-inner.lba-hs-not-found {
	background: rgba(217, 74, 74, 0.06);
	border-color: rgba(217, 74, 74, 0.35);
	color: rgba(200, 60, 60, 0.8);
}

.lba-hs-placeholder-icon svg {
	width: 36px;
	height: 36px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	opacity: 0.5;
}

.lba-hs-placeholder-label {
	font-size: 12px;
	font-family: monospace;
	opacity: 0.7;
	word-break: break-all;
}

/* ── Navigation (below) ─────────────────────────────────────── */
.lba-hs-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;
}

/* ── Navigation (overlay on edges) ──────────────────────────── */
.lba-hs-overlay-prev,
.lba-hs-overlay-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.lba-hs-overlay-prev {
	left: 12px;
}

.lba-hs-overlay-next {
	right: 12px;
}

/* ── Shared Button Styles ─────────────────────────────────────  */
.lba-hs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #1a1a2e;
	border: 1px solid rgba(0, 0, 0, 0.12);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.lba-hs-btn:hover:not(:disabled) {
	background-color: #f0f0f0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lba-hs-btn:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.lba-hs-btn svg {
	width: 18px;
	height: 18px;
	display: block;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Overflow hidden override (page-scroll mode) ─────────────── */
.lba-hs-overflow-hidden {
	overflow: hidden !important;
}

/* ============================================================
   Horizontal Scroll – Page Scroll (sticky) Mode
   ============================================================ */

/* Outer tall div – provides the vertical scrolling budget.
   Height is set dynamically by JS.                               */
.lba-hs-outer {
	position: relative;
	width: 100%;
	/* height set by JS */
}

/* Sticky pin – stays fixed in the viewport while the user
   scrolls through the outer div's budget.                        */
.lba-hs-pin {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	/* Ensure it stacks above neighbouring sections while pinned */
	z-index: 1;
}

/* The widget root fills the pin completely in page-scroll mode   */
.lba-hs-pin>.lba-hs-root,
.lba-hs-pin .lba-hs-mode-page-scroll {
	width: 100%;
	height: 100%;
}

/* The wrapper also must fill the pin so items stretch to 100vh   */
.lba-hs-pin .lba-hs-wrapper {
	height: 100%;
	overflow: hidden !important;
}

/* Track: disable native overflow; JS applies translateX          */
.lba-hs-pin .lba-hs-track {
	height: 100%;
	will-change: transform;
	/* Smooth the JS-driven transform – comment out if you
	   want a raw 1:1 feel with zero easing.                      */
	transition: transform 0.05s linear;
}

/* Items fill the full sticky viewport height in page-scroll mode */
.lba-hs-pin .lba-hs-item {
	height: 100%;
}

/* Prevent body horizontal overflow while sticky is active        */
body:has(.lba-hs-outer) {
	overflow-x: hidden;
}

/* ============================================================
   Landing Bundle Addons - Expand Container
   ============================================================ */

/* Base: the container itself handles expansion via JS max-height.
   We force min-height to 0 so Elementor's own min-height doesn't
   interfere with the collapsed state.                            */
.lba-expand-container {
	position: relative;
	min-height: 0px !important;
	will-change: max-height;
	box-sizing: border-box;
}

/* Fade overlay: sits at the bottom of the container */
.lba-expand-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}

/* When expanded, the fade is hidden (JS also sets opacity 0) */
.lba-expand-expanded .lba-expand-fade {
	opacity: 0;
}

/* Cursor hint */
.lba-expand-collapsed {
	cursor: pointer;
}

.lba-expand-expanded {
	cursor: default;
}