#nyxos-popup[hidden],
#nyxos-popup [hidden] {
	display: none !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) {
	--nyxos-popup-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:is(#nyxos-popup, .nyxos-popup__preview)[data-font-family="inter"] {
	--nyxos-popup-font: Inter, system-ui, sans-serif;
}

:is(#nyxos-popup, .nyxos-popup__preview)[data-font-family="serif"] {
	--nyxos-popup-font: Georgia, serif;
}

:is(#nyxos-popup, .nyxos-popup__preview)[data-font-family="mono"] {
	--nyxos-popup-font: "Courier New", monospace;
}

/* Use the same panel limits and content insets in Studio and on the site. */
:is(.nyxos-popup__panel, .nyxos-popup__preview) {
	--nyxos-popup-width: 520px;
	--nyxos-popup-mobile-width: 340px;
	--nyxos-popup-mobile-padding: 35px min(27px, 8%) 28px;
}

.nyxos-popup__panel--image-side,
.nyxos-popup__preview:where([data-image-layout="side"]:not(.no-image)) {
	--nyxos-popup-width: 670px;
}

.nyxos-popup__preview.mobile-preview {
	--nyxos-popup-width: var(--nyxos-popup-mobile-width);
	--nyxos-popup-content-padding: var(--nyxos-popup-mobile-padding);
	--nyxos-popup-title-size: 28px;
}

.nyxos-popup {
	--nyxos-popup-radius: 18px;
	--nyxos-popup-panel-height: min(720px, calc(100vh - 40px));
	font-family: var(--nyxos-popup-font);
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 20px;
}

.nyxos-popup__scrim {
	position: absolute;
	inset: 0;
	background: var(--nyxos-popup-overlay, #111827);
	opacity: var(--nyxos-popup-opacity, .62);
}

/* Blur the page first, then paint the separate tint layer at its own opacity. */
.nyxos-popup--blur {
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.nyxos-popup__panel {
	position: relative;
	width: min(100%, var(--nyxos-popup-width));
	max-height: var(--nyxos-popup-panel-height);
	overflow: auto;
	background: var(--nyxos-popup-bg, #fff);
	border-radius: var(--nyxos-popup-radius);
	box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
	color: #172033;
}

/* Shared with the live and full-size previews in Popup Studio. */
.nyxos-popup__media-layout {
	display: flex;
	flex-direction: column;
}

.nyxos-popup__media-layout[data-mobile-image-position="bottom"] {
	--nyxos-popup-image-order: 1;
}

.nyxos-popup__media-layout[data-mobile-image-format="vertical"] {
	--nyxos-popup-crop-ratio: 4 / 5;
}

.nyxos-popup__media-layout > .nyxos-popup__image {
	display: block;
	box-sizing: border-box;
	flex: none;
	align-self: center;
	order: var(--nyxos-popup-image-order, -1);
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(380px, 48vh);
	margin: 0;
	object-fit: contain;
}

.nyxos-popup__media-layout[data-image-fit="cover"] > .nyxos-popup__image {
	width: 100%;
	aspect-ratio: var(--nyxos-popup-crop-ratio, 16 / 9);
	object-fit: cover;
	object-position: center;
}

@media (min-width: 601px) {
	.nyxos-popup__media-layout:not(.mobile-preview) {
		--nyxos-popup-image-order: -1;
		--nyxos-popup-crop-ratio: 16 / 9;
	}

	.nyxos-popup__media-layout:not(.mobile-preview):is([data-image-layout="bottom"], [data-image-layout="side"][data-image-side="right"]) {
		--nyxos-popup-image-order: 1;
	}

	.nyxos-popup__media-layout[data-image-layout="side"]:not(.mobile-preview) {
		flex-direction: row;
	}

	.nyxos-popup__media-layout[data-image-layout="side"]:not(.mobile-preview) > .nyxos-popup__image {
		max-width: 40%;
		max-height: var(--nyxos-popup-panel-height, min(500px, calc(100vh - 120px)));
	}

	.nyxos-popup__media-layout[data-image-layout="side"][data-image-fit="cover"]:not(.mobile-preview) > .nyxos-popup__image {
		align-self: stretch;
		width: 40%;
		aspect-ratio: auto;
	}

	.nyxos-popup__media-layout[data-image-layout="side"]:not(.mobile-preview) > :is(.nyxos-popup__content, .nyxos-popup__custom, .popup-content) {
		flex: 1 1 0%;
		align-self: flex-start;
		min-width: 0;
		margin-block: auto;
	}
}

.nyxos-popup__content,
.nyxos-popup__custom {
	padding: var(--nyxos-popup-content-padding, 35px min(35px, 6%) 31px);
	overflow-wrap: anywhere;
}

/* Keep the preset text consistent with Studio when the theme styles headings and paragraphs. */
:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__content > :is(.nyxos-popup__kicker, .nyxos-popup__title, .nyxos-popup__description) {
	padding: 0 !important;
	text-align: start !important;
	text-transform: none !important;
	text-shadow: none !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__content > .nyxos-popup__kicker {
	margin: 0 !important;
	color: var(--nyxos-popup-accent, #2563eb) !important;
	font: 800 9px/1.45 var(--nyxos-popup-font) !important;
	letter-spacing: .15em !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__content > .nyxos-popup__title {
	max-width: 315px !important;
	margin: 0 !important;
	color: #1c2a2d !important;
	font: 680 var(--nyxos-popup-title-size, 32px)/1.04 var(--nyxos-popup-font) !important;
	letter-spacing: -.055em !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__kicker:not([hidden]) + .nyxos-popup__title {
	margin-top: 12px !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__content > .nyxos-popup__description {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 11px 0 0 !important;
	color: #526071 !important;
	font: 400 14px/1.55 var(--nyxos-popup-font) !important;
	letter-spacing: normal !important;
}

.nyxos-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(148, 163, 184, .16);
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

:is(#nyxos-popup, .nyxos-popup__preview) :is(.nyxos-popup__content, .nyxos-popup__custom) .nyxos-popup__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: var(--nyxos-popup-button-radius, 5px) !important;
	background: var(--nyxos-popup-accent, #2563eb) !important;
	color: var(--nyxos-popup-button-color, #fff) !important;
	-webkit-text-fill-color: currentColor !important;
	font: var(--nyxos-popup-button-weight, 700) var(--nyxos-popup-button-size, 16px)/1.3 var(--nyxos-popup-font) !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: normal !important;
	cursor: pointer;
}

:is(#nyxos-popup, .nyxos-popup__preview) :is(.nyxos-popup__content, .nyxos-popup__custom) a.nyxos-popup__button {
	margin-top: 12px !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) :is(.nyxos-popup__content, .nyxos-popup__custom) .nyxos-popup__button[hidden] {
	display: none !important;
}

:is(#nyxos-popup, .nyxos-popup__preview) .nyxos-popup__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.nyxos-popup__form {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.nyxos-popup__form label {
	display: grid;
	gap: 5px;
	font-size: .875rem;
	font-weight: 600;
}

.nyxos-popup__form .nyxos-popup__consent {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start;
	gap: 8px;
	font-weight: 400;
	line-height: 1.45;
}

.nyxos-popup__form .nyxos-popup__consent input {
	width: 16px;
	height: 16px;
	min-height: 16px;
	max-height: 16px;
	padding: 0;
	margin: 2px 0 0;
}

.nyxos-popup__consent a {
	color: var(--nyxos-popup-accent, #2563eb);
}

.nyxos-popup__consent-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: -4px 0 0 26px;
	font-size: .875rem;
}

.nyxos-popup__consent-links a {
	color: var(--nyxos-popup-accent, #2563eb);
}

.nyxos-popup__form input {
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font: inherit;
}

.nyxos-popup__form-status {
	margin: 0;
	font-size: .875rem;
}

.nyxos-popup__form-status:empty {
	display: none;
}

#nyxos-popup .nyxos-popup__form button:disabled {
	cursor: wait;
	opacity: .65;
}

.nyxos-popup__success {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 12px;
	border: 1px solid #c2e2d9;
	border-radius: 8px;
	color: #1b5d50;
	background: #f0faf7;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.nyxos-popup__success-icon {
	display: grid;
	flex: 0 0 22px;
	height: 22px;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: #247765;
}

.nyxos-popup__success-message {
	white-space: pre-line;
}

#nyxos-popup .nyxos-popup__success-link {
	color: inherit;
	text-decoration: underline;
}

html.nyxos-popup-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	:is(.nyxos-popup__panel, .nyxos-popup__preview) {
		--nyxos-popup-width: var(--nyxos-popup-mobile-width);
		--nyxos-popup-content-padding: var(--nyxos-popup-mobile-padding);
		--nyxos-popup-title-size: 28px;
	}

	.nyxos-popup {
		--nyxos-popup-panel-height: calc(100vh - 24px);
		padding: 12px;
	}
}