/* ══ Exit-Intent Popup ══ */

/* ── Overlay (page dim + blur) ── */
.nml-eip__overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(11, 16, 31, 0.56);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9200;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nml-eip__overlay--visible {
	opacity: 1;
}

/* ── Dialog wrapper ── */
/* This element owns the popup's scroll, so it must stay hit-testable: with
   pointer-events:none a touch that lands on its padding falls through to the
   page behind, which then scrolls instead of the popup. Clicking the empty area
   still closes the popup — handled in script.js (e.target === dialog), not by
   letting the click through to the overlay underneath. */
.nml-eip__dialog {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9201;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 40px 24px;
}

.nml-eip__dialog--open {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Card (two columns on desktop) ── */
.nml-eip__card {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	width: 100%;
	max-width: 900px;
	margin: auto;
	background: var(--color-bg, #FFFFFF);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(11, 16, 31, 0.28);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.nml-eip__dialog--open .nml-eip__card {
	opacity: 1;
	transform: none;
}

/* ── Close button ── */
.nml-eip__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 10px;
	color: var(--color-text-white, #FFFFFF);
	cursor: pointer;
	transition: background 0.2s ease;
}

.nml-eip__close:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* ── LEFT column ── */
.nml-eip__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px;
}

.nml-eip__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--color-accent-border, rgba(255, 65, 113, 0.5));
	border-radius: 999px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--color-text-accent, #FF4171);
}

.nml-eip__badge-icon {
	font-size: 15px;
	line-height: 1;
}

.nml-eip__heading {
	margin: 20px 0 0;
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	color: var(--color-text-primary, #0B101F);
}

.nml-eip__heading span {
	color: var(--color-accent, #FF4171);
}

.nml-eip__desc {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--color-text-secondary, #303D60);
}

.nml-eip__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nml-eip__list-item {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--color-text-secondary, #303D60);
}

.nml-eip__list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-accent, #FF4171);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
}

.nml-eip__cta {
	margin-top: 28px;
	width: 100%;
	height: 52px;
	font-size: 17px;
}

/* ── RIGHT column — blue gradient banner with grain ── */
.nml-eip__banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	min-height: 100%;
	background:
		radial-gradient(120% 100% at 80% 0%, #2C4C9A 0%, #17306F 45%, #0C1B47 100%);
	overflow: hidden;
}

/* Subtle film grain over the gradient (self-contained SVG noise). */
.nml-eip__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 140px 140px;
}

.nml-eip__banner-img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	height: auto;
}

.nml-eip__banner-img--mobile {
	display: none;
}

/* ══ Mobile — stacked, banner on top ══ */
@media (max-width: 768px) {
	.nml-eip__dialog {
		padding: 16px;
	}

	.nml-eip__card {
		grid-template-columns: 1fr;
		max-width: 420px;
		border-radius: 16px;
	}

	/* Banner first (top), then content — matches the mobile Figma. */
	.nml-eip__banner {
		order: -1;
		min-height: 0;
		padding: 28px 24px;
	}

	.nml-eip__banner-img--desktop {
		display: none;
	}

	.nml-eip__banner-img--mobile {
		display: block;
	}

	.nml-eip__content {
		padding: 24px;
	}

	.nml-eip__heading {
		font-size: 24px;
		line-height: 30px;
		margin-top: 16px;
	}

	.nml-eip__desc,
	.nml-eip__list-item {
		font-size: 15px;
		line-height: 22px;
	}

	.nml-eip__cta {
		margin-top: 22px;
	}

	/* Close sits over the banner; keep it readable on the dark gradient. */
	.nml-eip__close {
		color: var(--color-text-white, #FFFFFF);
	}
}

/* Reduced-motion: no transform animation. */
@media (prefers-reduced-motion: reduce) {
	.nml-eip__card,
	.nml-eip__overlay {
		transition: none;
	}
	.nml-eip__card {
		transform: none;
	}
}