/*
==========================================================
FantasyFanzone Newsletter
Version: 4.0
==========================================================
*/


/*========================================================
SECTION
========================================================*/

.ffz-newsletter {
	position: relative;

	padding: var(--ffz-section-padding) 0;
}


/*========================================================
WRAPPER
========================================================*/

.ffz-newsletter__wrapper {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 28px;

	padding: 64px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.08);

	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			rgba(124, 58, 237, 0.18),
			rgba(21, 28, 50, 0.96)
		);

	box-shadow: var(--ffz-shadow-lg);

	text-align: center;
}

.ffz-newsletter__wrapper::before {
	content: "";

	position: absolute;

	top: -120px;
	right: -120px;

	width: 280px;
	height: 280px;

	border-radius: 50%;

	background:
		rgba(124, 58, 237, 0.18);

	filter: blur(80px);

	pointer-events: none;
}

.ffz-newsletter__wrapper::after {
	content: "";

	position: absolute;

	bottom: -160px;
	left: -120px;

	width: 260px;
	height: 260px;

	border-radius: 50%;

	background:
		rgba(59, 130, 246, 0.1);

	filter: blur(90px);

	pointer-events: none;
}


/*========================================================
SECTION TITLE
========================================================*/

.ffz-newsletter
	.ffz-section-title {
	position: relative;

	z-index: 2;

	width: 100%;

	max-width: 820px;
}


/*========================================================
FORM
========================================================*/

.ffz-newsletter__form {
	position: relative;

	z-index: 2;

	width: 100%;

	max-width: 720px;

	margin: 0 auto;
}


/*========================================================
FIELD
========================================================*/

.ffz-newsletter__field {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	gap: 12px;

	align-items: stretch;
}


/*========================================================
INPUT
========================================================*/

.ffz-newsletter__input {
	width: 100%;
	min-width: 0;
	height: var(--ffz-input-height);

	padding: 0 20px;

	border:
		1px solid var(--ffz-border);

	border-radius: var(--ffz-input-radius);

	outline: none;

	background:
		rgba(255, 255, 255, 0.06);

	color: var(--ffz-text, #ffffff);

	font: inherit;
	font-size: 15px;

	transition:
		border-color var(--ffz-transition-normal),
		background var(--ffz-transition-normal),
		box-shadow var(--ffz-transition-normal);
}

.ffz-newsletter__input::placeholder {
	color: var(--ffz-text-muted);
}

.ffz-newsletter__input:hover:not(:disabled) {
	border-color:
		rgba(255, 255, 255, 0.16);
}

.ffz-newsletter__input:focus {
	border-color: var(--ffz-primary);

	background:
		rgba(255, 255, 255, 0.08);

	box-shadow:
		0 0 0 4px
		rgba(124, 58, 237, 0.18);
}

.ffz-newsletter__input:disabled {
	cursor: not-allowed;

	opacity: 0.55;
}


/*========================================================
SUBMIT BUTTON
========================================================*/

.ffz-newsletter__submit {
	min-width: 150px;

	white-space: nowrap;
}

.ffz-newsletter__submit:disabled {
	cursor: not-allowed;

	opacity: 0.6;
}


/*========================================================
STATUS
========================================================*/

.ffz-newsletter__status {
	position: relative;

	z-index: 2;

	min-height: 24px;

	margin: 0;

	color: var(--ffz-text-muted);

	font-size: 13px;
	font-weight: 600;

	line-height: 1.6;

	text-align: center;
}

.ffz-newsletter__status:empty {
	min-height: 0;
}

.ffz-newsletter__status.is-error {
	color: #fca5a5;
}

.ffz-newsletter__status.is-success {
	color: var(--ffz-success, #22c55e);
}

.ffz-newsletter__status.is-loading {
	color: #93c5fd;
}


/*========================================================
BUSY STATE
========================================================*/

.ffz-newsletter__form[aria-busy="true"]
	.ffz-newsletter__submit {
	cursor: wait;

	opacity: 0.72;
}

.ffz-newsletter__form[aria-busy="true"]
	.ffz-newsletter__input {
	opacity: 0.78;
}


/*========================================================
PRIVACY
========================================================*/

.ffz-newsletter__privacy {
	position: relative;

	z-index: 2;

	max-width: 700px;

	margin: 0;

	color: var(--ffz-text-muted);

	font-size: 12px;

	line-height: 1.6;

	text-align: center;
}

.ffz-newsletter__privacy-link {
	margin-left: 4px;

	color: var(--ffz-primary);

	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--ffz-transition-normal);
}

.ffz-newsletter__privacy-link:hover {
	color: #ffffff;

	text-decoration: underline;
}


/*========================================================
DISABLED NEWSLETTER
========================================================*/

.ffz-newsletter[
	data-newsletter-enabled="false"
]
	.ffz-newsletter__wrapper {
	background:
		linear-gradient(
			135deg,
			rgba(124, 58, 237, 0.1),
			rgba(21, 28, 50, 0.96)
		);
}

.ffz-newsletter[
	data-newsletter-enabled="false"
]
	.ffz-newsletter__field {
	opacity: 0.8;
}


/*========================================================
LEGACY SUPPORT
========================================================*/

.ffz-newsletter__content {
	position: relative;

	z-index: 2;
}

.ffz-newsletter__eyebrow {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-bottom: 14px;

	color: var(--ffz-primary);

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}


/*========================================================
TABLET
========================================================*/

@media (max-width: 1024px) {

	.ffz-newsletter__wrapper {
		padding: 52px 40px;
	}
}


/*========================================================
MOBILE
========================================================*/

@media (max-width: 768px) {

	.ffz-newsletter__wrapper {
		gap: 24px;

		padding: 36px 24px;

		border-radius: 20px;
	}

	.ffz-newsletter__field {
		grid-template-columns: 1fr;

		gap: 12px;
	}

	.ffz-newsletter__submit {
		width: 100%;
		min-width: 0;
	}

	.ffz-newsletter__input {
		height: 54px;

		font-size: 14px;
	}
}


/*========================================================
SMALL MOBILE
========================================================*/

@media (max-width: 480px) {

	.ffz-newsletter__wrapper {
		padding: 30px 18px;

		border-radius: 18px;
	}

	.ffz-newsletter__field {
		gap: 10px;
	}

	.ffz-newsletter__input {
		padding: 0 16px;
	}

	.ffz-newsletter__status {
		font-size: 12px;
	}

	.ffz-newsletter__privacy {
		font-size: 11px;
	}
}


/*========================================================
REDUCED MOTION
========================================================*/

@media (prefers-reduced-motion: reduce) {

	.ffz-newsletter__input,
	.ffz-newsletter__privacy-link {
		transition: none;
	}
}