.newsletter-form-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--spacing-1);
	padding: var(--spacing-4);


	@media screen and (max-width: 768px) {
		padding: var(--spacing-4) var(--spacing-3);
		gap: var(--spacing-2);

		#mc_embed_shell {
			width: 100%;
		}

		.breadcrumb-container {
			text-align: center;
		}
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--overlay));
		opacity: 1;
		pointer-events: none;
		z-index: 0;
	}

	.breadcrumb-container {
		width: 100%;
		z-index: 2;

		.breadcrumb-item {
			color: var(--main-unselected);
			text-transform: uppercase;
			font-size: var(--font-size-caption);

			&.last {
				color: var(--main-inverted-primary);
				font-weight: var(--font-weight-medium);
			}
		}
	}
}

#mc_embed_signup {
	width: 450px;
	background:rgba(255, 255, 255, 0.80);
	z-index: 2;
	position: relative;

	@media screen and (max-width: 768px) {
		width: 100%;
	}
	
	#mc-embedded-subscribe-form {
		margin: 0;
		padding: var(--spacing-3);

		.newsletter-form-title {
			margin: 0;
			text-align: center;
			font-size: var(--font-size-h2);
			font-weight: var(--font-weight-semiBold);
			text-transform: uppercase;
			line-height: normal;
		}

		.newsletter-form-subtitle {
			text-align: center;
			font-size: var(--font-size-text);
			font-weight: var(--font-weight-regular);
			margin-bottom: var(--spacing-3);
		}

		.mc-field-group {
			display: flex;
			flex-direction: column;
			margin-bottom: var(--spacing-2);

			label, .label {
				font-size: var(--font-size-text);
				font-weight: var(--font-weight-regular);
				margin-bottom: var(--spacing-1);
				text-transform: uppercase;
			}

			&.privacy-checkbox-container {
				flex-direction: row;
				align-items: center;
				gap: var(--spacing-1);
				margin-bottom: var(--spacing-2);

				label {
					margin-bottom: 0;
				}
			}
			
			input {
				height: 44px;
				border: 1px solid var(--main-stroke);
				padding: var(--spacing-2);
				font-size: var(--font-size-text);
			}

			input[type="date"],
			select {
				text-transform: uppercase;
				font-size: var(--font-size-text);
			}

			select {
				height: 44px;
				box-shadow: 0 0 0 1px var(--main-stroke);

				padding: 0 0 0 var(--spacing-2);
				border-right: var(--spacing-2) solid transparent;
			}

			.checkbox-list {
				display: flex;
				justify-content: flex-start;
				gap: var(--spacing-2);
				margin-inline-start: 0;
				width: 100%;

				li {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: var(--spacing-1);
				}

				label {
					margin-bottom: 0;
				}

				input[type="checkbox"] {
					width: 18px;
					height: 18px;
					accent-color: var(--main-primary);
				}
			}

		}

		#mce-success-response {
			background-color: transparent;
			color: green;
			font-size: var(--font-size-h4);
			font-weight: var(--font-weight-medium);
			margin-bottom: var(--spacing-2);
			text-align: center;
			text-transform: uppercase;
		}

		.mc-field-group:has(input.mce_inline_error) label, .mc-field-group:has(select.mce_inline_error) label {
			color: var(--secondary-dark);
		}

		div.mce_inline_error {
			background-color: transparent;
			color: var(--secondary-dark);
			padding: var(--spacing-1) 0;
			margin: 0;
		}

		input.subscribe-button {
			width: 100%;
			height: 44px;
			padding: 0;
			background-color: var(--main-primary);
			color: var(--main-inverted-primary);

			&[disabled] {
				background-color: var(--main-disabled);
				cursor: not-allowed !important;
			}
		}
	}
}