/**
 * RockGlobal promotion stepper.
 * Loaded after campaign styles so every active horizontal timeline shares one
 * marker, track and tracker layering model.
 */

:is(
	.rg-if-timeline,
	.rg-dr-timeline,
	.rg-tj-timeline,
	.rg-ca-timeline,
	.rg-offers-path__track,
	.rg-partner-path__track,
	.rg-rs-pathway ol,
	.rg-tgi-flow ol
) {
	--rg-stepper-inset: 12.5%;
	--rg-stepper-travel: 75%;
	--rg-stepper-progress: 0;
	--rg-stepper-node: #70e6ff;
	position: relative;
	isolation: isolate;
	padding-top: 80px;
}

.rg-if-timeline {
	--rg-stepper-inset: 16.6667%;
	--rg-stepper-travel: 66.6666%;
	--rg-stepper-progress: var(--rg-if-timeline-progress);
}

.rg-dr-timeline {
	--rg-stepper-inset: 16.6667%;
	--rg-stepper-travel: 66.6666%;
	--rg-stepper-progress: var(--dr-timeline-progress);
}

.rg-tj-timeline { --rg-stepper-progress: var(--tj-timeline-progress); }
.rg-ca-timeline { --rg-stepper-progress: var(--ca-timeline-progress); --rg-stepper-node: #54edbc; }
.rg-offers-path__track { --rg-stepper-progress: var(--rg-offers-progress); }
.rg-partner-path__track { --rg-stepper-progress: var(--rg-partner-progress); --rg-stepper-node: #55e4b5; }
.rg-rs-pathway ol { --rg-stepper-progress: var(--rs-timeline-progress); }
.rg-tgi-flow ol { --rg-stepper-inset: 10%; --rg-stepper-travel: 80%; --rg-stepper-progress: var(--ca-timeline-progress); --rg-stepper-node: #55e4b5; }

:is(
	.rg-if-timeline,
	.rg-dr-timeline,
	.rg-tj-timeline,
	.rg-ca-timeline,
	.rg-offers-path__track,
	.rg-partner-path__track,
	.rg-rs-pathway ol,
	.rg-tgi-flow ol
)::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 24px;
	left: var(--rg-stepper-inset);
	right: var(--rg-stepper-inset);
	width: auto;
	height: 2px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(90deg, rgba(112,230,255,.3), var(--rg-stepper-node), rgba(141,120,255,.68));
	box-shadow: 0 0 18px rgba(112,230,255,.18);
	opacity: .82;
	transform: none;
	pointer-events: none;
}

:is(
	.rg-if-timeline,
	.rg-dr-timeline,
	.rg-tj-timeline,
	.rg-ca-timeline,
	.rg-offers-path__track,
	.rg-partner-path__track,
	.rg-rs-pathway ol,
	.rg-tgi-flow ol
)::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 17px;
	left: calc(var(--rg-stepper-inset) + (var(--rg-stepper-travel) * var(--rg-stepper-progress)));
	width: 16px;
	height: 16px;
	border: 3px solid #07172e;
	border-radius: 50%;
	background: var(--rg-stepper-node);
	box-shadow: 0 0 0 7px rgba(112,230,255,.13), 0 0 30px color-mix(in srgb, var(--rg-stepper-node) 78%, transparent);
	transform: translate3d(-50%,0,0);
	transition: left 80ms linear, box-shadow 180ms ease;
	will-change: left, transform;
	pointer-events: none;
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-offers-path__track > li,
	.rg-partner-path__track > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
) {
	position: relative;
	z-index: 3;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-offers-path__track > li,
	.rg-partner-path__track > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
) > span:first-child {
	position: absolute;
	z-index: 4;
	top: -76px;
	left: 50%;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	margin: 0;
	border: 1px solid rgba(112,230,255,.24);
	border-radius: 50%;
	color: #dcecff;
	background: linear-gradient(145deg,rgba(18,47,84,.96),rgba(3,14,33,.97));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 6px rgba(112,230,255,.035), 0 10px 30px rgba(0,0,0,.28);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	text-align: center;
	transform: translate3d(-50%,0,0);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
).is-reached {
	border-color: rgba(84,237,188,.38);
	background-image: radial-gradient(circle at 50% 0,rgba(84,237,188,.16),transparent 66%);
	box-shadow: inset 0 0 0 1px rgba(84,237,188,.12),0 18px 44px rgba(0,0,0,.14);
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
).is-current {
	border-color: rgba(112,230,255,.68);
	background-image: radial-gradient(circle at 50% 0,rgba(112,230,255,.25),transparent 70%);
	box-shadow: inset 0 0 0 1px rgba(112,230,255,.28),0 0 34px rgba(84,237,188,.16);
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
).is-reached > span:first-child {
	color: #fff;
	border-color: rgba(84,237,188,.58);
	background: linear-gradient(145deg,rgba(17,72,79,.98),rgba(3,24,40,.98));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 0 6px rgba(84,237,188,.06),0 0 26px rgba(84,237,188,.22);
}

:is(
	.rg-if-timeline > li,
	.rg-dr-timeline > li,
	.rg-tj-timeline > li,
	.rg-ca-timeline > li,
	.rg-rs-pathway ol > li,
	.rg-tgi-flow ol > li
).is-current > span:first-child {
	border-color: var(--rg-stepper-node);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 0 0 7px rgba(112,230,255,.09),0 0 32px rgba(112,230,255,.42);
}

/* The loyalty pathway uses the same centred glass rail and panel geometry as the partner growth pathway. */
.rg-rs-pathway ol > li {
	display: grid;
	grid-template-columns: 1fr;
	place-content: center;
	place-items: center;
	gap: 5px;
	text-align: center;
}

.rg-rs-pathway ol > li > span:first-child { grid-row: auto; }
.rg-rs-pathway ol > li strong,
.rg-rs-pathway ol > li small { width: 100%; margin: 0; text-align: center; }

/* Interest-Free adopts the square, illuminated campaign-card treatment used by Deposit Rewards. */
.rg-if-timeline > li > div {
	border-radius: 0;
	transition: transform 200ms ease,border-color 200ms ease,background 200ms ease,box-shadow 200ms ease;
}

.rg-if-timeline > li.is-reached > div {
	border-color: rgba(84,237,188,.38);
	background: radial-gradient(circle at 50% 0,rgba(84,237,188,.14),transparent 62%),linear-gradient(155deg,rgba(12,35,69,.94),rgba(5,15,34,.98));
	box-shadow: inset 0 0 0 1px rgba(84,237,188,.1),0 18px 44px rgba(0,0,0,.16);
}

.rg-if-timeline > li.is-current > div {
	border-color: rgba(112,230,255,.72);
	background: radial-gradient(circle at 50% 0,rgba(112,230,255,.24),transparent 66%),linear-gradient(155deg,rgba(13,45,78,.97),rgba(5,16,38,.99));
	box-shadow: inset 0 0 0 1px rgba(112,230,255,.24),0 0 34px rgba(84,237,188,.16);
}

/* Flow timelines remain inset overlays inside their cinematic panels. */
.rg-tgi-flow ol { position: absolute; }

/* The five-state B2B rail sits inside an 80px glass track zone. */
@media (min-width: 1181px) {
	.rg-rs-pathway ol { position: absolute; }
	.rg-rs-pathway ol::before { opacity: 1; box-shadow: 0 0 22px rgba(112,230,255,.32); }
	:is(.rg-rs-pathway ol,.rg-tgi-flow ol)::before { top: 40px; }
	:is(.rg-rs-pathway ol,.rg-tgi-flow ol)::after { top: 33px; }
	:is(.rg-rs-pathway ol,.rg-tgi-flow ol) > li > span:first-child { top: -60px; }
}

@media (max-width: 1180px) {
	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	) {
		display: grid;
		grid-template-columns: 58px minmax(0,1fr);
		gap: 18px 0;
		padding: 0;
	}

	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	)::before {
		display: block;
		top: 20px;
		bottom: 20px;
		left: 20px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg,rgba(112,230,255,.3),var(--rg-stepper-node),rgba(141,120,255,.68));
	}

	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	)::after {
		display: block;
		top: calc(20px + ((100% - 40px) * var(--rg-stepper-progress)));
		left: 20px;
		transform: translate3d(-50%,-50%,0);
		transition: top 80ms linear, box-shadow 180ms ease;
		will-change: top, transform;
	}

	:is(
		.rg-if-timeline > li,
		.rg-dr-timeline > li,
		.rg-tj-timeline > li,
		.rg-ca-timeline > li,
		.rg-offers-path__track > li,
		.rg-partner-path__track > li,
		.rg-rs-pathway ol > li,
		.rg-tgi-flow ol > li
	) {
		grid-column: 2;
		width: 100%;
	}

	:is(
		.rg-if-timeline > li,
		.rg-dr-timeline > li,
		.rg-tj-timeline > li,
		.rg-ca-timeline > li,
		.rg-offers-path__track > li,
		.rg-partner-path__track > li,
		.rg-rs-pathway ol > li,
		.rg-tgi-flow ol > li
	) > span:first-child {
		top: 0;
		left: -58px;
		right: auto;
		transform: translate3d(0,0,0);
	}
}

@media (max-width: 640px) {
	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	) {
		grid-template-columns: 50px minmax(0,1fr);
	}

	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	)::before,
	:is(
		.rg-if-timeline,
		.rg-dr-timeline,
		.rg-tj-timeline,
		.rg-ca-timeline,
		.rg-offers-path__track,
		.rg-partner-path__track,
		.rg-rs-pathway ol,
		.rg-tgi-flow ol
	)::after { left: 18px; }

	:is(
		.rg-if-timeline > li,
		.rg-dr-timeline > li,
		.rg-tj-timeline > li,
		.rg-ca-timeline > li,
		.rg-offers-path__track > li,
		.rg-partner-path__track > li,
		.rg-rs-pathway ol > li,
		.rg-tgi-flow ol > li
	) > span:first-child {
		left: -50px;
		width: 38px;
		height: 38px;
	}
}