.fpsl {
	--fpsl-green: var(--wp--preset--color--primary, #0b6b3f);
	--fpsl-mint: var(--wp--preset--color--experience-mint, #e0f0eb);
	--fpsl-card: var(--wp--preset--color--experience-card, #f5faf8);
	--fpsl-text: var(--wp--preset--color--bodytext, #2e3337);
	margin-top: 16px;
}

.fpsl__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid var(--fpsl-green);
	border-radius: 999px;
	background: transparent;
	color: var(--fpsl-green);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.fpsl__trigger:hover,
.fpsl__trigger:focus-visible {
	background: var(--fpsl-green);
	color: #fff;
}

html.fpsl-lock { overflow: hidden; }

.fpsl__dialog {
	--fpsl-green: var(--wp--preset--color--primary, #0b6b3f);
	--fpsl-mint: var(--wp--preset--color--experience-mint, #e0f0eb);
	--fpsl-card: var(--wp--preset--color--experience-card, #f5faf8);
	--fpsl-text: var(--wp--preset--color--bodytext, #2e3337);
	width: min(860px, calc(100vw - 32px));
	max-width: none;
	height: min(92vh, 1100px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	color: var(--fpsl-text);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.fpsl__dialog[open] {
	display: flex;
	flex-direction: column;
}
.fpsl__dialog::backdrop { background: rgba(1, 40, 63, 0.65); }

.fpsl__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	background: var(--fpsl-card);
	border-bottom: 1px solid var(--wp--preset--color--experience-line, #ccdad5);
}
.fpsl__close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--fpsl-green);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.fpsl__count { color: var(--fpsl-green); font-weight: 600; }

.fpsl__scroll {
	flex: 1;
	overflow-y: auto;
	padding: 24px 32px 32px;
	overscroll-behavior: contain;
}

.fpsl__head {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 24px;
}
.fpsl__img {
	flex: 0 0 auto;
	width: auto;
	max-width: 220px;
	height: 150px;
	object-fit: contain;
}
.fpsl__title {
	margin: 0 0 8px;
	color: var(--fpsl-green);
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.1;
}
.fpsl__subtitle { margin: 0; font-size: 20px; line-height: 1.4; }

.fpsl-sec {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 20px;
	align-items: start;
	margin: 0 0 20px;
}
.fpsl-sec__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--fpsl-mint, #e0f0eb);
	color: var(--fpsl-green, #0b6b3f);
	font-size: 30px;
}
.fpsl-sec__heading {
	margin: 0 0 8px;
	color: var(--fpsl-green, #0b6b3f);
	font-size: 22px;
	line-height: 1.2;
}
.fpsl-sec__body > :last-child { margin-bottom: 0; }
.fpsl-sec__body p { margin: 0 0 10px; }
.fpsl-sec__body ul { margin: 0 0 10px; padding-left: 1.2em; }
.fpsl-sec__body li { margin-bottom: 4px; }

.fpsl-sec--highlight {
	padding: 20px;
	border-radius: 12px;
	background: var(--fpsl-card, #f5faf8);
	border: 1px solid var(--wp--preset--color--experience-line, #ccdad5);
}
.fpsl-sec--note {
	grid-template-columns: 56px 1fr;
	gap: 14px;
	align-items: center;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--fpsl-card, #f5faf8);
	border: 1px solid var(--wp--preset--color--experience-line, #ccdad5);
	font-size: 0.95em;
}
.fpsl-sec--note .fpsl-sec__icon {
	width: 48px;
	height: 48px;
	font-size: 22px;
	background: none;
}

.fpsl__foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	background: var(--fpsl-card);
	border-top: 1px solid var(--wp--preset--color--experience-line, #ccdad5);
}
.fpsl__nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 2px solid var(--fpsl-green);
	border-radius: 999px;
	background: #fff;
	color: var(--fpsl-green);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.fpsl__next { background: var(--fpsl-green); color: #fff; justify-self: end; }
.fpsl__prev { justify-self: start; }
.fpsl__nav[hidden] { display: none; }
.fpsl__dots { display: flex; gap: 12px; }
.fpsl__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9cfcc;
	cursor: pointer;
}
.fpsl__dot.is-active { background: var(--fpsl-green); }

.fpsl__trigger:focus-visible,
.fpsl__close:focus-visible,
.fpsl__nav:focus-visible,
.fpsl__dot:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.fpsl__dialog {
		width: 100vw;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}
	.fpsl__scroll { padding: 16px; }
	.fpsl__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.fpsl__img { height: 110px; }
	.fpsl-sec { grid-template-columns: 52px 1fr; gap: 14px; }
	.fpsl-sec__icon { width: 52px; height: 52px; font-size: 22px; }
	/* Icon-only nav; the buttons keep their aria-label with the step name. */
	.fpsl__nav span { display: none; }
	.fpsl__nav { width: 48px; height: 48px; padding: 0; justify-content: center; }
}

/* The theme styles buttons and headings globally; these keep the lightbox consistent. */
.fpsl .fpsl__dialog .fpsl__title,
.fpsl .fpsl__dialog .fpsl-sec__heading { color: var(--fpsl-green); }
.fpsl .fpsl__dialog .fpsl__close { background: none; border: 0; color: var(--fpsl-green); }
.fpsl .fpsl__dialog .fpsl__nav { background: #fff; color: var(--fpsl-green); border: 2px solid var(--fpsl-green); }
.fpsl .fpsl__dialog .fpsl__next { background: var(--fpsl-green); color: #fff; }
.fpsl .fpsl__dialog .fpsl__nav:hover { background: var(--fpsl-mint); }
.fpsl .fpsl__dialog .fpsl__next:hover { background: var(--fpsl-green); filter: brightness(1.15); }
.fpsl .fpsl__dialog .fpsl__dot { background: #c9cfcc; border: 0; min-width: 12px; }
.fpsl .fpsl__dialog .fpsl__dot.is-active { background: var(--fpsl-green); }