/**
 * Novixa Addons - Process Flow Diagram
 *
 * Every selector is scoped to .novixa-process-flow. Presets only set defaults
 * through --npf-* custom properties and plain declarations; the Elementor
 * controls override them with higher-specificity selectors.
 *
 * Layout (horizontal / vertical / alternating) is chosen per device. The
 * widget prints one class per device (--d-*, --t-*, --m-*) and the three
 * layout blocks below are repeated for each device inside non-overlapping
 * media queries (desktop >= 1025px, tablet 768-1024px, mobile <= 767px).
 */

/* ------------------------------------------------------------------ */
/* Root + custom properties                                            */
/* ------------------------------------------------------------------ */

.novixa-process-flow {
	--npf-gap: 32px;
	--npf-ct: 2px;
	--npf-cs: solid;
	--npf-cg: 10px;
	--npf-arrow: 9px;
	--npf-rd: 700ms;
	--npf-rs: 140ms;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.novixa-process-flow *,
.novixa-process-flow *::before,
.novixa-process-flow *::after {
	box-sizing: border-box;
}

.novixa-process-flow__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: var(--npf-gap);
}

.novixa-process-flow__step {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ */
/* Indicator                                                           */
/* ------------------------------------------------------------------ */

.novixa-process-flow__marker {
	position: relative;
	z-index: 2;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--npf-m);
	height: var(--npf-m);
	border-radius: 50%;
	background-color: var(--npf-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

.novixa-process-flow__marker-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.novixa-process-flow__number {
	display: block;
	font-size: calc(var(--npf-m) * .32);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.novixa-process-flow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--npf-m) * .4);
	line-height: 1;
}

.novixa-process-flow__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.novixa-process-flow__image {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

/* Higher specificity than ".elementor img { height:auto; max-width:100% }". */
.novixa-process-flow .novixa-process-flow__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Content                                                             */
/* ------------------------------------------------------------------ */

.novixa-process-flow__content {
	position: relative;
	min-width: 0;
	transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease, background-color .3s ease, border-color .3s ease;
}

.novixa-process-flow__title {
	margin: 0;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.novixa-process-flow__title a {
	color: inherit;
	text-decoration: none;
}

.novixa-process-flow__title a:hover,
.novixa-process-flow__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Stretched link: the whole step card is clickable through its title. */
.novixa-process-flow__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.novixa-process-flow__link:focus {
	outline: none;
}

.novixa-process-flow__link:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
	border-radius: 4px;
}

.novixa-process-flow__content:has(.novixa-process-flow__link:focus-visible) {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

.novixa-process-flow__content:has(.novixa-process-flow__link:focus-visible) .novixa-process-flow__link:focus-visible {
	outline: none;
}

.novixa-process-flow__desc {
	margin: 8px 0 0;
	font-size: .93rem;
	line-height: 1.6;
}

.novixa-process-flow__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.novixa-process-flow__empty {
	padding: 40px 20px;
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	color: #64748b;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Connectors + arrows                                                 */
/* ------------------------------------------------------------------ */

.novixa-process-flow__connector {
	--npf-line: var(--npf-cc, var(--npf-cc-d, #cbd5e1));
	position: absolute;
	z-index: 1;
	display: block;
	pointer-events: none;
	border: 0 solid var(--npf-line);
	transform-origin: var(--npf-origin, left center);
}

.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
	content: "";
	position: absolute;
	width: var(--npf-arrow);
	height: var(--npf-arrow);
	border-top: var(--npf-ct) solid var(--npf-line);
	border-right: var(--npf-ct) solid var(--npf-line);
}

.novixa-process-flow--no-indicator .novixa-process-flow__connector {
	display: none;
}

.novixa-process-flow--no-indicator .novixa-process-flow__step {
	grid-template-columns: minmax(0, 1fr) !important;
}

.novixa-process-flow--no-indicator .novixa-process-flow__content {
	grid-column: 1 !important;
}

/* ------------------------------------------------------------------ */
/* Layouts: horizontal / vertical / alternating, per device            */
/* ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.novixa-process-flow--d-horizontal .novixa-process-flow__list { flex-direction: row; gap: var(--npf-gap); }
	.novixa-process-flow--d-horizontal .novixa-process-flow__step {
		display: flex; flex: 1 1 0; flex-direction: column; align-items: var(--npf-ai, center);
		grid-template-columns: none; gap: 18px 0; text-align: var(--npf-ta, center); --npf-sx: -30px;
	}
	.novixa-process-flow--d-horizontal .novixa-process-flow__marker { grid-column: auto; grid-row: auto; }
	.novixa-process-flow--d-horizontal .novixa-process-flow__content { grid-column: auto; grid-row: auto; flex: 1 1 auto; width: 100%; text-align: var(--npf-ta, center); }
	.novixa-process-flow--d-horizontal .novixa-process-flow__connector {
		top: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		left: calc(var(--npf-p, .5) * (100% - var(--npf-m)) + var(--npf-m) + var(--npf-cg));
		right: auto; bottom: auto;
		width: max(0px, calc(100% + var(--npf-gap) - var(--npf-m) - 2 * var(--npf-cg)));
		height: 0;
		border-width: var(--npf-ct) 0 0 0; border-style: var(--npf-cs);
		--npf-origin: left center; --npf-draw-from: 0 1;
	}
	.novixa-process-flow--d-horizontal.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		top: 50%; right: calc(var(--npf-arrow) * .3); bottom: auto; left: auto;
		transform: translateY(-50%) rotate(45deg);
	}

	.novixa-process-flow--d-vertical .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--d-vertical .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: var(--npf-m) minmax(0, 1fr); gap: 0 20px; text-align: var(--npf-ta, left); --npf-sx: -40px;
	}
	.novixa-process-flow--d-vertical .novixa-process-flow__marker { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--d-vertical .novixa-process-flow__content { grid-column: 2; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--d-vertical .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--d-vertical.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

	.novixa-process-flow--d-alternating .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--d-alternating .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: minmax(0, 1fr) var(--npf-m) minmax(0, 1fr); gap: 0 24px; --npf-sx: -40px;
	}
	.novixa-process-flow--d-alternating .novixa-process-flow__step:nth-child(even) { --npf-sx: 40px; }
	.novixa-process-flow--d-alternating .novixa-process-flow__marker { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--d-alternating .novixa-process-flow__step:nth-child(odd) .novixa-process-flow__content { grid-column: 1; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, right); }
	.novixa-process-flow--d-alternating .novixa-process-flow__step:nth-child(even) .novixa-process-flow__content { grid-column: 3; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--d-alternating .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(50% - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--d-alternating.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

}

@media (min-width: 768px) and (max-width: 1024px) {
	.novixa-process-flow--t-horizontal .novixa-process-flow__list { flex-direction: row; gap: var(--npf-gap); }
	.novixa-process-flow--t-horizontal .novixa-process-flow__step {
		display: flex; flex: 1 1 0; flex-direction: column; align-items: var(--npf-ai, center);
		grid-template-columns: none; gap: 18px 0; text-align: var(--npf-ta, center); --npf-sx: -30px;
	}
	.novixa-process-flow--t-horizontal .novixa-process-flow__marker { grid-column: auto; grid-row: auto; }
	.novixa-process-flow--t-horizontal .novixa-process-flow__content { grid-column: auto; grid-row: auto; flex: 1 1 auto; width: 100%; text-align: var(--npf-ta, center); }
	.novixa-process-flow--t-horizontal .novixa-process-flow__connector {
		top: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		left: calc(var(--npf-p, .5) * (100% - var(--npf-m)) + var(--npf-m) + var(--npf-cg));
		right: auto; bottom: auto;
		width: max(0px, calc(100% + var(--npf-gap) - var(--npf-m) - 2 * var(--npf-cg)));
		height: 0;
		border-width: var(--npf-ct) 0 0 0; border-style: var(--npf-cs);
		--npf-origin: left center; --npf-draw-from: 0 1;
	}
	.novixa-process-flow--t-horizontal.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		top: 50%; right: calc(var(--npf-arrow) * .3); bottom: auto; left: auto;
		transform: translateY(-50%) rotate(45deg);
	}

	.novixa-process-flow--t-vertical .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--t-vertical .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: var(--npf-m) minmax(0, 1fr); gap: 0 20px; text-align: var(--npf-ta, left); --npf-sx: -40px;
	}
	.novixa-process-flow--t-vertical .novixa-process-flow__marker { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--t-vertical .novixa-process-flow__content { grid-column: 2; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--t-vertical .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--t-vertical.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

	.novixa-process-flow--t-alternating .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--t-alternating .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: minmax(0, 1fr) var(--npf-m) minmax(0, 1fr); gap: 0 24px; --npf-sx: -40px;
	}
	.novixa-process-flow--t-alternating .novixa-process-flow__step:nth-child(even) { --npf-sx: 40px; }
	.novixa-process-flow--t-alternating .novixa-process-flow__marker { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--t-alternating .novixa-process-flow__step:nth-child(odd) .novixa-process-flow__content { grid-column: 1; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, right); }
	.novixa-process-flow--t-alternating .novixa-process-flow__step:nth-child(even) .novixa-process-flow__content { grid-column: 3; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--t-alternating .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(50% - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--t-alternating.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

}

@media (max-width: 767px) {
	.novixa-process-flow--m-horizontal .novixa-process-flow__list { flex-direction: row; gap: var(--npf-gap); }
	.novixa-process-flow--m-horizontal .novixa-process-flow__step {
		display: flex; flex: 1 1 0; flex-direction: column; align-items: var(--npf-ai, center);
		grid-template-columns: none; gap: 18px 0; text-align: var(--npf-ta, center); --npf-sx: -30px;
	}
	.novixa-process-flow--m-horizontal .novixa-process-flow__marker { grid-column: auto; grid-row: auto; }
	.novixa-process-flow--m-horizontal .novixa-process-flow__content { grid-column: auto; grid-row: auto; flex: 1 1 auto; width: 100%; text-align: var(--npf-ta, center); }
	.novixa-process-flow--m-horizontal .novixa-process-flow__connector {
		top: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		left: calc(var(--npf-p, .5) * (100% - var(--npf-m)) + var(--npf-m) + var(--npf-cg));
		right: auto; bottom: auto;
		width: max(0px, calc(100% + var(--npf-gap) - var(--npf-m) - 2 * var(--npf-cg)));
		height: 0;
		border-width: var(--npf-ct) 0 0 0; border-style: var(--npf-cs);
		--npf-origin: left center; --npf-draw-from: 0 1;
	}
	.novixa-process-flow--m-horizontal.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		top: 50%; right: calc(var(--npf-arrow) * .3); bottom: auto; left: auto;
		transform: translateY(-50%) rotate(45deg);
	}

	.novixa-process-flow--m-vertical .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--m-vertical .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: var(--npf-m) minmax(0, 1fr); gap: 0 20px; text-align: var(--npf-ta, left); --npf-sx: -40px;
	}
	.novixa-process-flow--m-vertical .novixa-process-flow__marker { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--m-vertical .novixa-process-flow__content { grid-column: 2; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--m-vertical .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(var(--npf-m) / 2 - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--m-vertical.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

	.novixa-process-flow--m-alternating .novixa-process-flow__list { flex-direction: column; --npf-vgap: calc(var(--npf-gap) + 20px); gap: var(--npf-vgap); }
	.novixa-process-flow--m-alternating .novixa-process-flow__step {
		display: grid; flex: none; flex-direction: row; align-items: start;
		grid-template-columns: minmax(0, 1fr) var(--npf-m) minmax(0, 1fr); gap: 0 24px; --npf-sx: -40px;
	}
	.novixa-process-flow--m-alternating .novixa-process-flow__step:nth-child(even) { --npf-sx: 40px; }
	.novixa-process-flow--m-alternating .novixa-process-flow__marker { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; }
	.novixa-process-flow--m-alternating .novixa-process-flow__step:nth-child(odd) .novixa-process-flow__content { grid-column: 1; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, right); }
	.novixa-process-flow--m-alternating .novixa-process-flow__step:nth-child(even) .novixa-process-flow__content { grid-column: 3; grid-row: 1; flex: none; width: auto; text-align: var(--npf-ta, left); }
	.novixa-process-flow--m-alternating .novixa-process-flow__connector {
		top: calc(var(--npf-m) + var(--npf-cg));
		left: calc(50% - var(--npf-ct) / 2);
		right: auto; bottom: auto;
		width: 0;
		height: max(0px, calc(100% + var(--npf-vgap) - var(--npf-m) - 2 * var(--npf-cg)));
		border-width: 0 0 0 var(--npf-ct); border-style: var(--npf-cs);
		--npf-origin: center top; --npf-draw-from: 1 0;
	}
	.novixa-process-flow--m-alternating.novixa-process-flow--has-arrows .novixa-process-flow__connector::after {
		bottom: calc(var(--npf-arrow) * .3); left: 50%; top: auto; right: auto;
		transform: translateX(-50%) rotate(135deg);
	}

}

/* ------------------------------------------------------------------ */
/* Preset 1 - Modern Process                                           */
/* ------------------------------------------------------------------ */

.novixa-process-flow--modern {
	--npf-accent: #6366f1;
	--npf-m: 60px;
	--npf-cc-d: #c7d2fe;
}

/* Tints follow each step's accent colour (older browsers keep the indigo fallback). */
.novixa-process-flow--modern .novixa-process-flow__step {
	--npf-cc-d: color-mix(in srgb, var(--npf-accent) 28%, #fff);
}

.novixa-process-flow--modern .novixa-process-flow__marker {
	box-shadow: 0 0 0 6px rgba(99, 102, 241, .16), 0 10px 22px -8px rgba(99, 102, 241, .65);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--npf-accent) 18%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--npf-accent) 65%, transparent);
}

.novixa-process-flow--modern .novixa-process-flow__content {
	padding: 20px 22px;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 0 14px 32px -22px rgba(15, 23, 42, .4);
}

.novixa-process-flow--modern .novixa-process-flow__title { color: #0f172a; }
.novixa-process-flow--modern .novixa-process-flow__desc { color: #475569; }

/* ------------------------------------------------------------------ */
/* Preset 2 - Numbered Steps                                           */
/* ------------------------------------------------------------------ */

.novixa-process-flow--numbered {
	--npf-accent: #0f172a;
	--npf-m: 68px;
	--npf-cs: dashed;
	--npf-cc-d: #94a3b8;
}

.novixa-process-flow--numbered .novixa-process-flow__marker {
	border-radius: 18px;
}

.novixa-process-flow--numbered .novixa-process-flow__number {
	font-size: calc(var(--npf-m) * .36);
	font-weight: 800;
	letter-spacing: .02em;
}

.novixa-process-flow--numbered .novixa-process-flow__content {
	padding: 0;
	background-color: transparent;
}

.novixa-process-flow--numbered .novixa-process-flow__title { color: #0f172a; font-size: 1.25rem; }
.novixa-process-flow--numbered .novixa-process-flow__desc { color: #64748b; }

/* ------------------------------------------------------------------ */
/* Preset 3 - Creative Flow                                            */
/* ------------------------------------------------------------------ */

.novixa-process-flow--creative {
	--npf-m: 60px;
	--npf-cs: dotted;
	--npf-ct: 3px;
	--npf-arrow: 10px;
}

.novixa-process-flow--creative .novixa-process-flow__step { --npf-accent: #f43f5e; --npf-cc-d: var(--npf-accent); }
.novixa-process-flow--creative .novixa-process-flow__step:nth-child(5n+2) { --npf-accent: #f59e0b; }
.novixa-process-flow--creative .novixa-process-flow__step:nth-child(5n+3) { --npf-accent: #10b981; }
.novixa-process-flow--creative .novixa-process-flow__step:nth-child(5n+4) { --npf-accent: #3b82f6; }
.novixa-process-flow--creative .novixa-process-flow__step:nth-child(5n+5) { --npf-accent: #8b5cf6; }

/* Diamond indicator; its content is rotated back so it stays upright. */
.novixa-process-flow--creative .novixa-process-flow__marker {
	border-radius: 14px;
	transform: rotate(45deg) scale(.74);
	box-shadow: 0 12px 24px -10px var(--npf-accent);
}

.novixa-process-flow--creative .novixa-process-flow__marker-inner {
	transform: rotate(-45deg);
}

.novixa-process-flow--creative .novixa-process-flow__image img {
	border-radius: 50%;
}

.novixa-process-flow--creative .novixa-process-flow__image {
	width: 78%;
	height: 78%;
	border-radius: 50%;
}

.novixa-process-flow--creative .novixa-process-flow__number {
	font-size: calc(var(--npf-m) * .42);
	font-weight: 800;
}

.novixa-process-flow--creative .novixa-process-flow__content {
	padding: 20px 22px;
	border: 2px solid #0f172a;
	border-radius: 18px;
	background-color: #fff;
	box-shadow: 6px 6px 0 var(--npf-accent);
}

.novixa-process-flow--creative .novixa-process-flow__title { color: #0f172a; }
.novixa-process-flow--creative .novixa-process-flow__desc { color: #475569; }

/* ------------------------------------------------------------------ */
/* Hover effects                                                       */
/* ------------------------------------------------------------------ */

@media (hover: hover) {
	.novixa-process-flow--hover-lift .novixa-process-flow__step:hover .novixa-process-flow__content,
	.novixa-process-flow--hover-lift .novixa-process-flow__step:focus-within .novixa-process-flow__content {
		transform: translateY(-6px);
	}

	.novixa-process-flow--hover-marker .novixa-process-flow__step:hover .novixa-process-flow__marker,
	.novixa-process-flow--hover-marker .novixa-process-flow__step:focus-within .novixa-process-flow__marker {
		transform: scale(1.1);
	}

	.novixa-process-flow--creative.novixa-process-flow--hover-marker .novixa-process-flow__step:hover .novixa-process-flow__marker,
	.novixa-process-flow--creative.novixa-process-flow--hover-marker .novixa-process-flow__step:focus-within .novixa-process-flow__marker {
		transform: rotate(45deg) scale(.84);
	}
}

/* ------------------------------------------------------------------ */
/* Reveal on scroll (only active once the script has run)              */
/* ------------------------------------------------------------------ */

.novixa-process-flow--js.novixa-process-flow--reveal .novixa-process-flow__step {
	transition: opacity var(--npf-rd) ease, translate var(--npf-rd) cubic-bezier(.22, .8, .24, 1), scale var(--npf-rd) cubic-bezier(.22, .8, .24, 1);
	transition-delay: calc(var(--npf-i, 0) * var(--npf-rs));
}

.novixa-process-flow--js.novixa-process-flow--reveal .novixa-process-flow__step:not(.is-in) {
	opacity: 0;
}

.novixa-process-flow--js.novixa-process-flow--fx-fade-up .novixa-process-flow__step:not(.is-in) { translate: 0 30px; }
.novixa-process-flow--js.novixa-process-flow--fx-zoom .novixa-process-flow__step:not(.is-in) { scale: .85; }
.novixa-process-flow--js.novixa-process-flow--fx-slide .novixa-process-flow__step:not(.is-in) { translate: var(--npf-sx, -40px) 0; }

/* Connecting lines draw themselves after their step has appeared. */
.novixa-process-flow--js.novixa-process-flow--draw .novixa-process-flow__connector {
	transition: scale calc(var(--npf-rd) * 1.1) ease calc(var(--npf-i, 0) * var(--npf-rs) + var(--npf-rd) * .45);
}

.novixa-process-flow--js.novixa-process-flow--draw .novixa-process-flow__step:not(.is-in) .novixa-process-flow__connector {
	scale: var(--npf-draw-from, 0 1);
}

/* ------------------------------------------------------------------ */
/* Small screens + reduced motion                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.novixa-process-flow--modern { --npf-m: 52px; }
	.novixa-process-flow--numbered { --npf-m: 56px; }
	.novixa-process-flow--creative { --npf-m: 52px; }
	.novixa-process-flow--modern .novixa-process-flow__content,
	.novixa-process-flow--creative .novixa-process-flow__content { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.novixa-process-flow,
	.novixa-process-flow *,
	.novixa-process-flow *::before,
	.novixa-process-flow *::after {
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}

	.novixa-process-flow--js.novixa-process-flow--reveal .novixa-process-flow__step:not(.is-in) {
		opacity: 1;
		translate: none;
		scale: none;
	}

	.novixa-process-flow--js.novixa-process-flow--draw .novixa-process-flow__step:not(.is-in) .novixa-process-flow__connector {
		scale: none;
	}
}