/* =======================================================================
 * Nextstage Banner Widget — self-contained styles
 * Replicates the SePay hero layout without requiring Bootstrap 5 / HS core.
 * All rules are scoped under .nextstage-banner.
 * ======================================================================= */

.nextstage-banner {
	--nsb-header-offset: 90px; /* approximate site header height to subtract */
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 2rem;
	padding-bottom: 2rem;
	box-sizing: border-box;
	min-height: calc(100vh - var(--nsb-header-offset));
	min-height: calc(100dvh - var(--nsb-header-offset));
	display: flex;
	align-items: center;
	justify-content: center;
}

.nextstage-banner .nsb-container { width: 100%; }
.nextstage-banner .nsb-row { width: 100%; }

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

/* ---------- Layout ---------- */
.nextstage-banner .nsb-container {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 1.5rem;
	position: relative;
	z-index: 2;
}

.nextstage-banner .nsb-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.75rem;
	align-items: center;
}

.nextstage-banner .nsb-col-left,
.nextstage-banner .nsb-col-right {
	padding: 0 0.75rem;
	width: 100%;
}

@media (min-width: 992px) {
	.nextstage-banner .nsb-col-left { width: 50%; }
}

/* ---------- Headline ---------- */
.nextstage-banner h1 {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: #1e2022;
}

.nextstage-banner .text-primary { color: #377dff; }

/* Yellow highlight underline behind typed phrase */
.nextstage-banner .text-highlight-warning {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(transparent 65%, rgba(255, 193, 7, 0.35) 65%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0 0.15em;
}

.nextstage-banner .typed-cursor {
	display: inline-block;
	margin-left: 2px;
	opacity: 1;
	font-weight: 400;
}

.nextstage-banner .typed-cursor--blink { animation: nsb-blink 0.7s infinite; }

@keyframes nsb-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ---------- Description ---------- */
.nextstage-banner .nextstage-banner__desc {
	color: #677788;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 1.5rem;
	max-width: 42rem;
}

/* ---------- CTAs ---------- */
.nextstage-banner .nsb-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.nextstage-banner .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 0.3125rem;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	font-family: inherit;
}

.nextstage-banner .btn-primary {
	background-color: #377dff;
	border-color: #377dff;
	color: #fff;
}

.nextstage-banner .btn-primary:hover {
	background-color: #1366ff;
	border-color: #1366ff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(55, 125, 255, 0.25);
}

.nextstage-banner .btn-link {
	background: transparent;
	border-color: transparent;
	color: #377dff;
	padding: 0.75rem 0.5rem;
}

.nextstage-banner .btn-link:hover { color: #1366ff; }

.nextstage-banner .btn i { margin-left: 0.35rem; font-size: 0.85em; }

/* ---------- Caption ---------- */
.nextstage-banner .text-cap {
	display: block;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03125rem;
	text-transform: uppercase;
	color: #8c98a4;
}

/* ---------- Partners grid ---------- */
.nextstage-banner .nextstage-banner__partners {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.5rem;
	text-align: center;
	align-items: center;
}

.nextstage-banner .nextstage-banner__partners .nsb-partner {
	padding: 0.75rem 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nextstage-banner .nextstage-banner__partners a {
	display: inline-block;
	line-height: 0;
}

.nextstage-banner .nextstage-banner__partners img {
	max-width: 100%;
	height: auto;
	max-height: 40px;
	width: auto;
	object-fit: contain;
	filter: grayscale(0.2);
	opacity: 0.9;
	transition: opacity 0.2s, filter 0.2s;
}

.nextstage-banner .nextstage-banner__partners a:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------- Right media (click-to-advance slider) ---------- */
.nextstage-banner .nsb-col-right {
	width: 100%;
	padding: 0 0.75rem;
}
@media (min-width: 992px) {
	.nextstage-banner .nsb-col-left  { width: 50%; }
	.nextstage-banner .nsb-col-right { width: 50%; }
}

/* Browser / monitor frame around the slider */
.nextstage-banner .nextstage-banner__mosaic {
	width: 100%;
	position: relative;
	padding: 34px 8px 8px;            /* top = browser bar height */
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.75rem;
	box-shadow: 0 1.5rem 3rem rgba(30, 32, 34, 0.12), 0 2px 6px rgba(30, 32, 34, 0.04);
	overflow: hidden;
}

/* Browser chrome bar */
.nextstage-banner .nextstage-banner__mosaic::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 34px;
	background: linear-gradient(to bottom, #f6f8fb, #eef1f6);
	border-bottom: 1px solid #e2e8f0;
	z-index: 1;
}

/* Traffic-light dots (macOS style) — left side */
.nextstage-banner .nextstage-banner__mosaic::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 14px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow:
		18px 0 0 #ffbd2e,
		36px 0 0 #28c940;
	z-index: 2;
}

/* iMac-style stand (neck + base) under the screen */
.nextstage-banner .nsb-col-right {
	position: relative;
	padding-bottom: 40px; /* room for neck + base */
}

/* Neck — narrow silver stem */
.nextstage-banner .nsb-col-right::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	width: 9%;
	max-width: 64px;
	height: 28px;
	background: linear-gradient(to right,
		#b5bcc8 0%,
		#e4e8ee 25%,
		#f2f4f7 50%,
		#e4e8ee 75%,
		#b5bcc8 100%);
	border-radius: 3px 3px 0 0;
	box-shadow: inset 0 -2px 4px rgba(30, 32, 34, 0.08);
	z-index: 0;
}

/* Base — wide rounded foot */
.nextstage-banner .nsb-col-right::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	width: 36%;
	max-width: 260px;
	height: 16px;
	background: linear-gradient(to bottom, #e4e8ee 0%, #c9d0dc 55%, #a8b0bd 100%);
	border-radius: 50% / 60%;
	box-shadow:
		0 6px 14px rgba(30, 32, 34, 0.18),
		inset 0 -2px 3px rgba(30, 32, 34, 0.1),
		inset 0 1px 1px rgba(255, 255, 255, 0.6);
	z-index: 0;
}

.nextstage-banner .nextstage-banner__mosaic .nsb-slider-track { border-radius: 0 0 0.5rem 0.5rem; overflow: hidden; background: #f6f7f9; }
.nextstage-banner .nextstage-banner__mosaic .nsb-slider-item img { display: block; }

.nextstage-banner .nsb-slider-track {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Screen has a fixed aspect so image always fills the "monitor" nicely */
.nextstage-banner .nsb-slider-track {
	aspect-ratio: 16 / 10;
	background: #0b1220;
}

.nextstage-banner .nsb-slider-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	cursor: pointer;
}
.nextstage-banner .nsb-slider-track.is-single .nsb-slider-item,
.nextstage-banner .nsb-slider-track .nsb-slider-item.is-active {
	opacity: 1;
	pointer-events: auto;
}

.nextstage-banner .nsb-slider-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dots */
.nextstage-banner .nsb-slider-dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.75rem;
}
.nextstage-banner .nsb-slider-dots button {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	border: 0;
	background: #cbd3e1;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.nextstage-banner .nsb-slider-dots button:hover { background: #93a3bf; }
.nextstage-banner .nsb-slider-dots button.is-active {
	background: #377eff;
	transform: scale(1.25);
}