/* NS Feature Showcase — Elementor widget styles (v2) */

.nsfs {
	--nsfs-accent: #0069ff;
	--nsfs-title: #9aa8b6;
	--nsfs-title-active: #1a2b3b;
	--nsfs-title-hover: #476582;
	--nsfs-desc: #476582;
	--nsfs-divider: #e3e9ef;
	--nsfs-anim-ms: 600ms;
	--nsfs-ease: cubic-bezier(0.22, 1, 0.36, 1);

	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: center;
}

.nsfs--image-left > .nsfs__panel {
	order: -1;
}

/* ---------- Step list ---------- */

.nsfs__list {
	display: flex;
	flex-direction: column;
}

.nsfs__item {
	position: relative;
	border-bottom: 1px solid var(--nsfs-divider);
	padding: 4px 0 20px;
}

/*
 * Hardened against theme styles: buttons and their hover states keep the
 * widget's own colors no matter what the active theme sets for
 * button:hover / a:hover etc.
 */
.nsfs .nsfs__head,
.nsfs .nsfs__head:hover,
.nsfs .nsfs__head:focus,
.nsfs .nsfs__head:active {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 0 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	text-align: left;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: normal;
	color: var(--nsfs-title) !important;
	-webkit-appearance: none;
	appearance: none;
}

.nsfs .nsfs__head:focus-visible {
	outline: 2px solid var(--nsfs-accent) !important;
	outline-offset: 4px;
	border-radius: 6px;
}

.nsfs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	font-size: 22px;
	color: var(--nsfs-title) !important;
	transition: color 0.3s ease;
}

.nsfs__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.nsfs .nsfs__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nsfs-title) !important;
	transition: color 0.3s ease;
}

/* Active step */
.nsfs .nsfs__item.is-active .nsfs__title,
.nsfs .nsfs__item.is-active .nsfs__icon,
.nsfs .nsfs__item.is-active .nsfs__head {
	color: var(--nsfs-title-active) !important;
}

/* Hover on inactive steps — subtle darken, exactly like the reference */
.nsfs .nsfs__item:not(.is-active) .nsfs__head:hover .nsfs__title,
.nsfs .nsfs__item:not(.is-active) .nsfs__head:hover .nsfs__icon {
	color: var(--nsfs-title-hover) !important;
}

/* Collapsible description */

.nsfs__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--nsfs-ease);
}

.nsfs__item.is-active .nsfs__body {
	grid-template-rows: 1fr;
}

.nsfs__body-inner {
	overflow: hidden;
}

/* Description aligns with the left edge (under the icon), like the reference */
.nsfs .nsfs__desc {
	margin: 12px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--nsfs-desc);
}

/* Progress line */

.nsfs__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	opacity: 0;
}

.nsfs__item.is-active .nsfs__progress {
	opacity: 1;
}

.nsfs__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--nsfs-accent);
}

.nsfs__progress-bar.is-running {
	width: 100%;
	transition-property: width;
	transition-timing-function: linear;
	/* duration set inline by JS */
}

.nsfs[data-autoplay="false"] .nsfs__item.is-active .nsfs__progress-bar {
	width: 100%;
}

/* ---------- Panel ---------- */

.nsfs__panel {
	position: relative;
	background: linear-gradient(135deg, #d938e2 0%, #0069ff 100%);
	border-radius: 24px;
	padding: 48px;
	min-height: 380px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	overflow: hidden;
}

/* Slides: frontend wrappers AND editor-injected containers stack in one cell */
.nsfs__panel > .nsfs__slide,
.nsfs__panel > .e-con {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--nsfs-anim-ms, 600ms) var(--nsfs-ease),
		transform var(--nsfs-anim-ms, 600ms) var(--nsfs-ease),
		filter var(--nsfs-anim-ms, 600ms) var(--nsfs-ease);
	will-change: opacity, transform;
}

.nsfs__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nsfs__slide > .e-con {
	width: 100%;
}

.nsfs__panel > .is-active {
	opacity: 1;
	transform: none !important;
	filter: none;
	pointer-events: auto;
	z-index: 1;
}

/* Transition variants (applied to the inactive/entering state) */
.nsfs--anim-fade-up .nsfs__panel > .nsfs__slide:not(.is-active),
.nsfs--anim-fade-up .nsfs__panel > .e-con:not(.is-active) {
	transform: translateY(28px);
}

.nsfs--anim-zoom .nsfs__panel > .nsfs__slide:not(.is-active),
.nsfs--anim-zoom .nsfs__panel > .e-con:not(.is-active) {
	transform: scale(0.92);
}

.nsfs--anim-blur .nsfs__panel > .nsfs__slide:not(.is-active),
.nsfs--anim-blur .nsfs__panel > .e-con:not(.is-active) {
	filter: blur(12px);
	transform: scale(0.985);
}

.nsfs--anim-slide .nsfs__panel > .nsfs__slide:not(.is-active),
.nsfs--anim-slide .nsfs__panel > .e-con:not(.is-active) {
	transform: translateX(48px);
}

/* Legacy image slides */
.nsfs__slide img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgba(20, 30, 55, 0.28);
}

/* Staggered reveal of elements inside the active step's container */
@keyframes nsfs-child-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active > .e-con > .elementor-element,
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active > .e-con > .e-con-inner > .elementor-element {
	animation: nsfs-child-in var(--nsfs-anim-ms, 600ms) var(--nsfs-ease) both;
}

body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(2) { animation-delay: 90ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(3) { animation-delay: 180ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(4) { animation-delay: 270ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(5) { animation-delay: 360ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(6) { animation-delay: 450ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(7) { animation-delay: 540ms; }
body:not(.elementor-editor-active) .nsfs--stagger .nsfs__panel > .is-active .elementor-element:nth-child(8) { animation-delay: 630ms; }

/* ---------- Elementor editor niceties ---------- */

/* Before the JS handler marks an active slide, keep everything visible so
   the editor never looks empty; once one is active, hide the others. */
body.elementor-editor-active .nsfs__panel > .e-con {
	opacity: 1;
	pointer-events: auto;
}

body.elementor-editor-active .nsfs__panel:has(> .is-active) > .e-con:not(.is-active) {
	opacity: 0;
	pointer-events: none;
}

/* ---------- Responsive: accordion mode like the reference ---------- */

@media (max-width: 1024px) {
	.nsfs {
		gap: 40px;
	}
}

/*
 * Accordion mode — the `nsfs--accordion` class is toggled by JS using the
 * site's actual Elementor mobile breakpoint. The list becomes
 * display:contents, so items and the panel share one flex column; JS assigns
 * order values (item i → i*2, panel → active*2+1) which slots the panel
 * DIRECTLY UNDER the active step without any DOM moves (editor-safe).
 */
.nsfs.nsfs--accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.nsfs.nsfs--accordion > .nsfs__list {
	display: contents;
}

.nsfs.nsfs--accordion > .nsfs__panel {
	width: 100%;
	margin: 16px 0 28px;
	padding: 24px;
	min-height: 0 !important;
	order: 1; /* JS refines this per active step */
}

.nsfs.nsfs--accordion .nsfs__item {
	padding-bottom: 18px;
}

.nsfs.nsfs--accordion .nsfs__title {
	font-size: 18px;
}

.nsfs.nsfs--accordion .nsfs__desc {
	font-size: 15px;
}

/* Soft entrance each time the panel re-slots under a new step */
.nsfs.nsfs--accordion > .nsfs__panel.is-pop {
	animation: nsfs-child-in 0.45s var(--nsfs-ease) both;
}

/* No-JS fallback: simple single column */
@media (max-width: 767px) {
	.nsfs:not(.nsfs--accordion) {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
	.nsfs__body,
	.nsfs__panel > .nsfs__slide,
	.nsfs__panel > .e-con,
	.nsfs .nsfs__title,
	.nsfs__icon {
		transition: none !important;
		animation: none !important;
	}

	.nsfs--stagger .nsfs__panel .elementor-element {
		animation: none !important;
	}
}