/**
 * SouthLine exit capture.
 *
 * A copy of the review result page modal, rule for rule, so the same offer
 * looks the same wherever a visitor meets it. Every value below was taken from
 * the .sl-modal, .sl-field__input, .sl-btn-ghost and .sl-guide__* rules in the
 * funnel's southline-page.css, with its custom properties resolved to the
 * literals they hold there:
 *
 *     --sl-surface  #16181a      --sl-fg      #fefefe
 *     --sl-text     #d1d1d1      --sl-accent  #00df9c
 *
 * Resolved rather than referenced because those properties are declared in the
 * funnel's critical CSS, which is only inlined on the funnel and result pages.
 * Out here nothing defines them, and a var() with no fallback would collapse to
 * nothing at all.
 *
 * "ClashDisplayLocal" is likewise a funnel-only face. It loads the very same
 * ClashDisplay-Semibold.woff2 that the child theme's fonts module already
 * self-hosts as "Clash Display", so pointing at that name renders identically
 * and fetches nothing new.
 *
 * ---------------------------------------------------------------------------
 * Why every selector is doubled
 *
 * On the result page this modal sits on a standalone template with Elementor
 * stripped out. Out here it lands in the middle of a live Elementor page, and
 * the kit stylesheet dresses bare elements:
 *
 *     .elementor-kit-10 h2                 44px, and its own colour
 *     .elementor-kit-10 button             14px, weight 500, UPPERCASE,
 *                                          35px radius, accent background
 *     input[type="email"]                  1px #666, 3px radius, width 100%
 *     input[type="email"]:focus            border-color #333
 *
 * Those are (0,1,1) and (0,2,1). A single class is (0,1,0) and loses every
 * time, which is exactly what went wrong the first time round. Doubling the
 * wrapper takes each rule to (0,3,0), and (0,4,0) with a pseudo-class, which
 * clears all of them without a single !important.
 */

/* --------------------------------------------------------------------------
 * Overlay
 * -------------------------------------------------------------------------- */

.slec.slec {
	position: fixed;
	inset: 0;
	/* The result page can sit at 220 because nothing else is on that template.
	   Here it has to clear the glass navbar and anything Elementor stacks. */
	z-index: 99000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(6, 8, 9, 0.72);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.slec.slec[hidden] {
	display: none;
}

.slec.slec.is-open {
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * Box
 * -------------------------------------------------------------------------- */

.slec.slec .slec__box {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: 30px 26px 26px;
	border: 0;
	border-radius: 20px;
	background: #16181a;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
	color: #fefefe;
	/* The funnel body sets InterVar; the site self-hosts the same face as
	   Inter. Set here rather than inherited, because out here the box would
	   otherwise pick up whatever the Elementor page is using. */
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	transform: translateY(10px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

	/* Not in the original, and it changes nothing at normal heights: it only
	   engages on a short viewport, where the alternative is a modal that runs
	   off the screen with its button unreachable. */
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.slec.slec.is-open .slec__box {
	transform: none;
}

.slec.slec .slec__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, 0.55);
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.slec.slec .slec__close:hover,
.slec.slec .slec__close:focus-visible {
	background: none;
	color: #fefefe;
}

/* --------------------------------------------------------------------------
 * Cover, heading, blurb
 * -------------------------------------------------------------------------- */

.slec.slec .slec__cover {
	max-width: 110px;
	margin: 0 0 16px;
}

.slec.slec .slec__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px;
	transform: rotate(-2deg);
	box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.9);
}

.slec.slec .slec__title {
	margin: 0 0 10px;
	padding: 0;
	font-family: "Clash Display", "ClashDisplayLocal", Georgia, serif;
	font-weight: 600;
	font-size: clamp(20px, 4.4vw, 25px);
	line-height: 1.22;
	letter-spacing: normal;
	text-transform: none;
	color: #fefefe;
	text-wrap: balance;
}

/* "free guide" picked out in the accent. Green marks what SouthLine gives
   away, and it is the one word in the heading worth reading first. */
.slec.slec .slec__accent {
	color: #00df9c;
}

/*
 * The original never needs this: its heading always sits below the cover
 * image, well clear of the close button. Only if the guide cover setting is
 * ever emptied does the heading rise into that corner, so the allowance is
 * made conditional rather than baked in, and the normal rendering stays
 * identical to the result page.
 */
.slec.slec .slec__box:not(:has(.slec__cover)) .slec__title {
	padding-right: 34px;
}

.slec.slec .slec__blurb {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.6;
	letter-spacing: normal;
	color: #d1d1d1;
}

/* --------------------------------------------------------------------------
 * Form
 * -------------------------------------------------------------------------- */

.slec.slec .slec__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.slec.slec .slec__form[hidden] {
	display: none;
}

.slec.slec .slec__input {
	flex: 1 1 220px;
	width: 100%;
	min-width: 0;
	min-height: 56px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	color: #fefefe;
	font-family: inherit;
	/* 16px minimum, so iOS does not zoom the viewport on focus. */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.slec.slec .slec__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.slec.slec .slec__input:focus {
	outline: none;
	border-color: #00df9c;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.slec.slec .slec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	min-height: 56px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fefefe;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.slec.slec .slec__btn:hover,
.slec.slec .slec__btn:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fefefe;
	box-shadow: none;
	transform: none;
}

.slec.slec .slec__btn[disabled],
.slec.slec .slec__btn:disabled {
	opacity: 0.5;
	background: rgba(255, 255, 255, 0.1);
	cursor: default;
}

.slec.slec .slec__note {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.5);
}

.slec.slec .slec__note.is-bad {
	color: #ffb4a8;
}

/* Honeypot, and the labels that exist only for screen readers. */
.slec.slec .slec__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.slec.slec,
	.slec.slec .slec__box,
	.slec.slec .slec__btn {
		transition: none;
	}
}