/* Lemora Process Stepper — RTL first, mobile first friendly */

.lps {
	--lps-primary: #8581BE;
	--lps-accent: #5BAA8C;
	--lps-dark: #171719;
	--lps-gray: #77777F;
	--lps-line: #E9E9E6;
	--lps-radius: 32px;
	--lps-count: 4;
	--lps-fill: 12.5%;
	position: relative;
	width: 100%;
	color: var(--lps-dark);
	font-family: inherit;
}

.lps *,
.lps *::before,
.lps *::after {
	box-sizing: border-box;
}

/* Button resets (protect against theme button styles) */
.lps button.lps__step,
.lps button.lps__dot,
.lps button.lps__btn {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
}

.lps button:focus-visible,
.lps a:focus-visible {
	outline: 2px solid var(--lps-primary);
	outline-offset: 3px;
}

/* ---------- Track ---------- */
.lps .lps__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--lps-count), minmax(0, 1fr));
}

.lps .lps__line {
	position: absolute;
	top: 27px;
	inset-inline: 0;
	height: 2px;
	background: var(--lps-line);
	border-radius: 2px;
	overflow: hidden;
}

.lps .lps__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--lps-fill);
	background: var(--lps-primary);
	opacity: .35;
	transition: width .45s ease;
}

.lps button.lps__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lps-gray);
	text-align: center;
}

.lps .lps__node {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--lps-line);
	color: var(--lps-gray);
	transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.lps .lps__node svg,
.lps .lps__node .lps__custom-icon {
	width: 24px;
	height: 24px;
	font-size: 22px;
	line-height: 1;
}

.lps .lps__step:hover .lps__node {
	border-color: var(--lps-primary);
	color: var(--lps-primary);
}

.lps .lps__step.is-done .lps__node {
	color: var(--lps-primary);
}

.lps .lps__step.is-active .lps__node {
	background: var(--lps-primary);
	border-color: transparent;
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 12px 26px -10px rgba(133, 129, 190, .7);
}

.lps .lps__num {
	font-size: 13px;
	color: var(--lps-gray);
}

.lps .lps__step.is-active .lps__num {
	color: var(--lps-primary);
	font-weight: 600;
}

.lps .lps__label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--lps-gray);
	padding-inline: 8px;
}

.lps .lps__step.is-active .lps__label {
	color: var(--lps-dark);
}

/* ---------- Card ---------- */
.lps .lps__card {
	margin-top: 32px;
	padding: clamp(20px, 3.5vw, 40px);
	background: #fff;
	border: 1px solid var(--lps-line);
	border-radius: var(--lps-radius);
	box-shadow: 0 24px 60px -36px rgba(23, 23, 25, .22);
}

.lps .lps__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
}

.lps .lps__panel[hidden] {
	display: none;
}

.lps .lps__panel:not([hidden]) {
	animation: lps-in .35s ease;
}

@keyframes lps-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.lps .lps__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lps-primary);
	background: #F3F2F9;
	border: 1px solid #E4E2F1;
	background: color-mix(in srgb, var(--lps-primary) 9%, #fff);
	border-color: color-mix(in srgb, var(--lps-primary) 20%, #fff);
}

.lps .lps__title {
	margin: 14px 0 10px;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.45;
	color: var(--lps-dark);
}

.lps .lps__desc {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 2;
	color: var(--lps-gray);
}

.lps .lps__features {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lps .lps__features li {
	flex: 1 1 200px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 18px;
	background: #fff;
	border: 1px solid var(--lps-line);
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--lps-gray);
}

.lps .lps__check {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--lps-accent);
}

.lps .lps__tile {
	display: grid;
	place-items: center;
	width: clamp(150px, 17vw, 200px);
	aspect-ratio: 1;
	border-radius: 36px;
	color: var(--lps-primary);
	background: #F4F4FA;
	background: linear-gradient(135deg, color-mix(in srgb, var(--lps-primary) 12%, #fff), color-mix(in srgb, var(--lps-accent) 8%, #fff));
}

.lps .lps__tile svg,
.lps .lps__tile .lps__custom-icon {
	width: 64px;
	height: 64px;
	font-size: 56px;
	line-height: 1;
}

/* ---------- Footer ---------- */
.lps .lps__footer {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 6px;
	padding-top: 24px;
	border-top: 1px dashed #DEDEDA;
}

.lps .lps__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lps button.lps__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #D9D8E0;
	transition: width .3s ease, background-color .3s ease;
}

.lps button.lps__dot::before {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

.lps button.lps__dot.is-active {
	width: 32px;
	background: var(--lps-primary);
}

.lps .lps__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}

.lps .lps__btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.lps .lps__btn--next {
	background: var(--lps-dark);
	color: #fff;
}

.lps .lps__btn--next:hover,
.lps .lps__btn--next:focus {
	background: var(--lps-primary);
	color: #fff;
}

.lps .lps__btn--prev {
	background: #fff;
	border-color: var(--lps-line);
	color: var(--lps-dark);
}

.lps .lps__btn--prev:hover {
	border-color: var(--lps-primary);
	color: var(--lps-primary);
}

.lps .lps__btn--prev:disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

.lps .lps__btn--ghost {
	min-width: 48px;
	padding: 0;
	visibility: hidden;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.lps .lps__line { top: 21px; }

	.lps .lps__node {
		width: 44px;
		height: 44px;
		margin-bottom: 0;
	}

	.lps .lps__node svg,
	.lps .lps__node .lps__custom-icon {
		width: 20px;
		height: 20px;
		font-size: 18px;
	}

	.lps .lps__num,
	.lps .lps__label { display: none; }

	.lps .lps__card { margin-top: 24px; }

	.lps .lps__panel { grid-template-columns: minmax(0, 1fr); }

	.lps .lps__tile {
		order: -1;
		width: 88px;
		border-radius: 26px;
	}

	.lps .lps__tile svg,
	.lps .lps__tile .lps__custom-icon {
		width: 38px;
		height: 38px;
		font-size: 34px;
	}

	.lps .lps__features li { flex-basis: 100%; }

	.lps .lps__btn {
		height: 44px;
		padding: 0 18px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.lps .lps__btn--prev .lps__btn-text { display: none; }

	.lps .lps__btn--prev {
		width: 44px;
		padding: 0;
	}

	.lps .lps__footer { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.lps *,
	.lps *::before,
	.lps *::after {
		animation: none !important;
		transition: none !important;
	}
}