/* =================================
   ROOT CONTAINER
================================= */

.neos-newsletter{
	--newsletter-max-width		: 560px;
	--newsletter-shell-padding	: 16px;
	--newsletter-panel-padding	: 20px;
	--newsletter-gap				: 16px;
	--newsletter-radius			: 18px;
	--newsletter-card-bg			: #f2f0e5;
	--newsletter-card-text		: #0d2a33;
	--newsletter-accent			: var(--brand-light, #f6a13a);
	--newsletter-panel-bg		: rgba(7, 26, 40, 0.78);

	background-color				: var(--neos-bg-color, var(--brand-dark));
	background-image				: var(--neos-bg-image);
	background-size				: cover;
	background-position			: center;
	color								: var(--neos-text-color, var(--light));
	padding							: 0;
	position							: relative;
	overflow							: hidden;
	border-radius: var(--border-border-radius);
}
.home .neos-newsletter {
	background-image				: none;
}

.neos-newsletter--transparent {
	background						: transparent;
}

.neos-newsletter--transparent .newsletter-layout-shell,
.neos-newsletter--transparent .newsletter-stage,
.neos-newsletter--transparent .newsletter-card {
	background						: transparent;
	box-shadow						: none;
}
/* =================================
   MASTER LAYOUT
================================= */

.neos-newsletter .newsletter-layout-shell{
	display						: flex;
	flex-direction				: column;
	gap							: var(--newsletter-gap);
	padding						: var(--newsletter-shell-padding);
	max-width					: 1200px;
	margin						: 0 auto;
	min-height					: 100%;
}
.neos-newsletter .newsletter-main-column{
	order							: 2;
	width							: 100%;
}

.neos-newsletter .newsletter-stage{
	width							: 100%;
	max-width					: var(--newsletter-max-width);
	margin						: 0 auto;
}

.neos-newsletter .newsletter-form{
	width							: 100%;
	position						: relative;
}


/* =================================
   MEDIA COLUMNS
================================= */

/*
.neos-newsletter .newsletter-media-column{
	display						: grid;
	grid-template-columns	: repeat(2, minmax(0, 1fr));
	gap							: 10px;
	order							: 2;
}
*/

.neos-newsletter .newsletter-media-column{
	display						: grid;
	grid-template-columns	: repeat(3, minmax(0, 1fr));
	gap							: 10px;
}

.neos-newsletter .newsletter-media-column-before{
	order							: 1;
}

.neos-newsletter .newsletter-media-column-after{
	order							: 3;
}

.neos-newsletter .newsletter-media-item{
	overflow						: hidden;
	border-radius				: 12px;
	aspect-ratio				: 1 / 1;
}

.neos-newsletter .newsletter-media-item img{
	display						: block;
	width							: 100%;
	height						: 100%;
	object-fit					: cover;
}


/* =================================
   STEP SYSTEM
================================= */

.neos-newsletter .newsletter-step{
	display						: none;
}

.neos-newsletter.step-1 .newsletter-step[data-step="1"],
.neos-newsletter.step-2 .newsletter-step[data-step="2"],
.neos-newsletter.step-3 .newsletter-step[data-step="3"],
.neos-newsletter.step-4 .newsletter-step[data-step="4"],
.neos-newsletter.step-5 .newsletter-step[data-step="5"]{
	display						: block;
}

.neos-newsletter .newsletter-step-inner{
	display						: flex;
	flex-direction				: column;
	align-items					: stretch;
	gap							: 14px;
	padding						: var(--newsletter-panel-padding);
	text-align					: center;
}

.neos-newsletter .newsletter-step-inner-form,
.neos-newsletter .newsletter-step-inner-success,
.neos-newsletter .newsletter-step-inner-share{
	align-items					: center;
}

.neos-newsletter .newsletter-step-inner-interests{
	align-items					: stretch;
}


/* =================================
   HEADINGS / COPY
================================= */

.neos-newsletter .newsletter-step-logo-wrap{
	display						: flex;
	justify-content				: center;
}

.neos-newsletter .newsletter-logo{
	max-width					: 120px;
	height						: auto;
}


.neos-newsletter .newsletter-step-title,
.neos-newsletter .newsletter-success-title,
.neos-newsletter .newsletter-share-title{
	font-family					: var(--font-accent);
	color							: var(--wp--preset--color--cream);
	margin						: 0;
	font-size					: clamp(34px, 7vw, 58px);
}

.neos-newsletter .newsletter-headline{
	font-size					: clamp(34px, 7vw, 58px);
	max-width					: 12ch;
	color							: var(--wp--preset--color--cream);
	margin						: 0;
}

.neos-newsletter .newsletter-step-title,
.neos-newsletter .newsletter-success-title,
.neos-newsletter .newsletter-share-title{
/*	font-size					: clamp(28px, 6vw, 48px);*/
}

.neos-newsletter .newsletter-subtitle,
.neos-newsletter .newsletter-success-body,
.neos-newsletter .newsletter-share-body{
	margin						: 0;
	font-family					: var(--font-hero);
	font-size					: var(--wp--preset--font-size--body-m, 16px);
	line-height					: 1.4;
	opacity						: 0.95;
	max-width					: 44ch;
}
.neos-newsletter .newsletter-subtitle{
	color							: var(--brand-light);
	font-weight					: 600;
	padding-bottom				: 20px;
}

.neos-newsletter .newsletter-step-2-title{
	text-align					: center;
}


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

.neos-newsletter .newsletter-card{
	width							: 100%;
	background					: var(--newsletter-card-bg);
	color							: var(--newsletter-card-text);
	border						: 3px solid var(--newsletter-accent);
	border-radius				: var(--newsletter-radius);
	padding						: 18px;
	display						: flex;
	flex-direction				: column;
	gap							: 14px;
	text-align					: left;
	box-sizing					: border-box;
}

.neos-newsletter .newsletter-card-step1,
.neos-newsletter .newsletter-card-step2-fields{
	max-width					: 520px;
	margin						: 0 auto;
}


/* =================================
   FIELDS
================================= */

.neos-newsletter .newsletter-field{
	display						: flex;
	flex-direction				: column;
	gap							: 6px;
}

.neos-newsletter .newsletter-label-text{
	font-family					: var(--font-ui);
	font-size					: 0.95rem;
	font-weight					: 700;
	color						: var(--newsletter-card-text);
}

.neos-newsletter .newsletter-field input{
	width						: 100%;
	padding						: 10px 0;
	border						: 0;
	border-bottom				: 1px solid rgba(13, 42, 51, 0.25);
	border-radius				: 0;
	background					: transparent;
	color						: var(--newsletter-card-text);
	box-shadow					: none;
	box-sizing					: border-box;
}

.neos-newsletter .newsletter-field input::placeholder{
	color						: rgba(13, 42, 51, 0.55);
}

.neos-newsletter .newsletter-field input:focus{
	outline						: none;
	border-bottom-color			: var(--newsletter-accent);
}

.neos-newsletter .newsletter-field.has-error input,
.neos-newsletter .newsletter-field input[aria-invalid="true"]{
	border-bottom-color			: #c0392b;
}

.neos-newsletter .newsletter-field-error{
	font-size					: 12px;
	line-height					: 1.35;
	color						: #c0392b;
}


/* =================================
   CONSENT
================================= */

.neos-newsletter .newsletter-consent > span{
	display						: flex;
	align-items					: flex-start;
	gap							: 10px;
	width							: 100%;
	max-width					: 520px;
	text-align					: left;
	font-family					: var(--font-ui);
	font-size					: 0.92rem;
	color							: var(--newsletter-card-text);
	padding						: 14px 0;
	box-sizing					: border-box;
}

.neos-newsletter .newsletter-consent input{
	margin-top					: 3px;
	flex						: 0 0 auto;
}

.newsletter-step-1-actions {
	display: grid;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* margin-top: 20px; */
}

.newsletter-step-1-mandatory {
	margin: 0;
	font-size: 14px;
	order: 2;
	width: 100%;
}

.newsletter-step-1-button {
	margin-left: auto;
}
/* =================================
   BUTTONS
================================= */

.neos-newsletter .newsletter-step-1-button,
.neos-newsletter .newsletter-step-2-button,
.neos-newsletter .newsletter-success-next-button,
.neos-newsletter .newsletter-share-button{
	/*display						: inline-flex;
	align-items					: center;
	justify-content			: center;
	min-height					: 48px;
	padding						: 0 20px;
	border						: 0;
	border-radius				: 10px;
	background					: var(--newsletter-accent);
	color							: #0a2029;
	font-family					: var(--font-ui);
	font-weight					: 800;
	text-transform				: uppercase;
	cursor						: pointer;
	align-self					: center;*/
}

.neos-newsletter .newsletter-step-1-button:hover,
.neos-newsletter .newsletter-step-2-button:hover,
.neos-newsletter .newsletter-success-next-button:hover,
.neos-newsletter .newsletter-share-button:hover{
	filter						: brightness(1.05);
}

.neos-newsletter .newsletter-step-1-button:focus,
.neos-newsletter .newsletter-step-2-button:focus,
.neos-newsletter .newsletter-success-next-button:focus,
.neos-newsletter .newsletter-share-button:focus{
	outline						: 2px solid var(--newsletter-accent);
	outline-offset				: 2px;
}


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

.neos-newsletter .newsletter-form-notice{
	margin-bottom				: 12px;
	padding						: 10px 12px;
	border-radius				: 10px;
	font-family					: var(--font-ui);
	font-size					: 0.92rem;
}

.neos-newsletter .newsletter-form-notice.is-error{
	background					: rgba(192, 57, 43, 0.16);
	color						: #fff;
}

.neos-newsletter .newsletter-form-notice.is-success{
	background					: rgba(46, 204, 113, 0.16);
	color						: #fff;
}

.neos-newsletter .newsletter-form-notice.is-info{
	background					: rgba(246, 161, 58, 0.18);
	color						: #fff;
}


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

.neos-newsletter .newsletter-promotions{
	display						: flex;
	flex-direction				: column;
	gap							: 14px;
}

.neos-newsletter .newsletter-promo-group{
	display						: flex;
	flex-direction				: column;
	gap							: 10px;
}

.neos-newsletter .newsletter-promo-group-title{
	margin						: 0;
	font-family					: var(--font-ui);
	font-size					: 1rem;
	font-weight					: 700;
	text-align					: left;
	color						: var(--neos-text-color, var(--light));
}

.neos-newsletter .newsletter-promo-group-items{
	display						: flex;
	flex-direction				: column;
	gap							: 12px;
}


/* =================================
   PROMOTION CARD BASE
================================= */

.neos-newsletter .newsletter-promo-card{
	display						: flex;
	align-items					: center;
	gap							: 14px;
	padding						: 14px;
	border						: 2px solid rgba(255,255,255,0.85);
	border-radius				: 14px;
	background					: rgba(0, 35, 45, 0.94);
	cursor						: pointer;
	transition					: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.neos-newsletter .newsletter-promo-card:hover{
	transform					: translateY(-3px);
}

.neos-newsletter .newsletter-promo-card.newsletter-selected,
.neos-newsletter .newsletter-promo-card.is-selected{
	border-color				: var(--newsletter-accent);
	box-shadow					: 0 10px 30px rgba(0,0,0,.25);
}

.neos-newsletter .newsletter-promo-card-image{
	width						: 72px;
	height						: 72px;
	flex						: 0 0 72px;
	border-radius				: 10px;
	overflow					: hidden;
}

.neos-newsletter .newsletter-promo-card-image img{
	width						: 100%;
	height						: 100%;
	object-fit					: cover;
}

.neos-newsletter .newsletter-promo-card-content{
	display						: flex;
	flex-direction				: column;
	gap							: 6px;
	text-align					: left;
}

.neos-newsletter .newsletter-promo-title{
	font-family					: var(--font-ui);
	font-size					: 1rem;
	font-weight					: 700;
	color						: var(--light);
}

.neos-newsletter .newsletter-promo-excerpt,
.neos-newsletter .newsletter-promo-schedule{
	margin						: 0;
	font-size					: 0.85rem;
	line-height					: 1.35;
	color						: rgba(255,255,255,0.88);
}


/* =================================
   PROMOTION STYLE: TILES
================================= */

.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-group-items{
	display						: grid;
	grid-template-columns		: repeat(2, minmax(0, 1fr));
	gap							: 12px;
}

.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-card{
	flex-direction				: column;
	align-items					: stretch;
	padding						: 0;
	overflow					: hidden;
	min-height					: 180px;
}

.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-card-image{
	width						: 100%;
	height						: auto;
	flex						: 0 0 auto;
	border-radius				: 0;
	aspect-ratio				: 1 / 1;
}

.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-card-content{
	padding						: 12px;
}


/* =================================
   PROMOTION STYLE: COMPACT
================================= */

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card{
	min-height					: 52px;
	padding						: 10px 12px;
	gap							: 10px;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card-image{
	display						: none;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-title{
	font-size					: 0.95rem;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-excerpt{
	display						: none;
}

.neos-newsletter .newsletter-promo-card-heading{
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
}

.neos-newsletter .newsletter-promo-card-icon{
	display: none;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}

.neos-newsletter .newsletter-promo-card-icon img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card{
	min-height: 52px;
	padding: 10px 12px;
	gap: 10px;
	justify-content: center;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card-content{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card-heading{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-card-icon{
	display: block;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-title{
	font-size: 0.95rem;
}

.neos-newsletter .newsletter-promotions.style-compact .newsletter-promo-excerpt{
	display: none;
}

.neos-newsletter .newsletter-promotions.style-cards .newsletter-promo-card-icon,
.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-card-icon{
	display: none;
}

/* =================================
   SUCCESS / SHARE
================================= */

.neos-newsletter .newsletter-share-actions{
	display						: flex;
	justify-content				: center;
}

.neos-newsletter .newsletter-social-links{
	display						: flex;
	justify-content				: center;
	gap							: 18px;
}

.neos-newsletter .newsletter-social-link{
	display						: inline-flex;
	align-items					: center;
	justify-content				: center;
	width						: 42px;
	height						: 42px;
	border-radius				: 50%;
	text-decoration				: none;
	background					: rgba(255,255,255,0.08);
	color						: #fff;
	font-weight					: 800;
}


/* =================================
   MOBILE LAYOUT MODIFIERS
================================= */

.neos-newsletter.layout-carousel .newsletter-media-column{
	display						: flex;
	overflow-x					: auto;
	gap							: 10px;
	scroll-snap-type			: x mandatory;
	padding-bottom				: 4px;
}

.neos-newsletter.layout-carousel .newsletter-media-item{
	flex						: 0 0 65%;
	scroll-snap-align			: start;
}

.neos-newsletter.layout-grid .newsletter-media-column,
.neos-newsletter.layout-stacked .newsletter-media-column{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.newsletter-step-1-actions {
	display						: flex;
	flex-direction				: row;
	gap							: 20px;
}
.newsletter-step-1-actions .newsletter-step-1-button {
	width							: 120px;
}
.newsletter-step-1-actions .newsletter-step-1-mandatory {
	width							: calc( 100% - 140px );
}
.neos-newsletter .newsletter-card {
	padding						: 30px;
}
.neos-newsletter .newsletter-promo-card {
	border						: 2px solid var(--grey-light);
	border-radius				: 40px;
}
.neos-newsletter .newsletter-promo-title {
	color							: var(--grey-light);
	font-size					: 20px;
	font-family					: var(--font-hero);
	font-weight					: 600;
	text-align					: center;
	min-width					: 100%;
}
.neos-newsletter .newsletter-subtitle {
	margin						: 0 auto;
}
.neos-newsletter .newsletter-promo-card-content {
	display						: block;
	width							: 100%;
}
.neos-newsletter .newsletter-step-title {
	line-height					: 1;
}
.neos-newsletter .newsletter-card {
	margin-bottom				: 20px;
}
.newsletter-step-inner-share {
	min-height					: 0 !important;
	padding-top					: 0 !important;
}
.newsletter-share-body {
	display						: none;
}
/* =================================
   DESKTOP: IMAGE | FORM | IMAGE
================================= */

.newsletter-venue-selector {
	padding-bottom:20px;
	border-bottom: 1px solid rgba(13, 42, 51, 0.25);
}
.newsletter-venue-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

.newsletter-venue-option {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.newsletter-venue-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.newsletter-venue-selector-body {
	font-size: var(--paragraph-font-size) !important;
	font-family: var(--font-hero) !important;
	font-weight: 600 !important;
}

.newsletter-venue-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	background-image: url("../../assets/images/circle.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.newsletter-venue-checkbox:checked ~ .newsletter-venue-icon {
	background-image: url("../../assets/images/circle-check.svg");
}

.newsletter-venue-option:focus-within .newsletter-venue-icon {
	outline-offset: 3px;
	border-radius: 999px;
}
.newsletter-checkbox-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.newsletter-consent {
	display:block !important;
	overflow:hidden !important;
	position:relative;
}
.newsletter-checkbox-icon {
	width: 1.25rem !important;
	float:left;
	margin-right:8px;
	height: 1.25rem;
	display: inline-block !important;
	background-image: url("../../assets/images/square.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 auto;
}
.neos-newsletter .newsletter-consent .newsletter-checkbox-label{
	display:inline-block !important;
	width:calc(100% - 60px) !important;
	padding-top:0 !important;
}
.newsletter-checkbox-input:checked ~ .newsletter-checkbox-icon {
	background-image: url("../../assets/images/square-check.svg");
}
.newsletter-venue-selector.has-error .newsletter-venue-error {
	display: block;
}
@media (min-width: 900px){

	.neos-newsletter .newsletter-layout-shell{
		grid-template-columns		: auto 60% auto;
		display						: grid;
		align-items					: stretch;
		gap							: 20px;
		padding						: 18px;
		min-height					: 760px;
	}

	.neos-newsletter .newsletter-media-column{
		display						: flex;
		order						: initial;
		flex-flow					: wrap;
	}

	.neos-newsletter .newsletter-main-column{
		display						: flex;
		align-items					: center;
		justify-content				: center;
		order						: initial;
	}

	.neos-newsletter .newsletter-stage{
		width						: 100%;
		max-width					: 100%;
	}

	.neos-newsletter .newsletter-step-inner{
		min-height					: 620px;
		justify-content				: center;
		padding						: 28px;
	}

	.neos-newsletter .newsletter-promotions.style-tiles .newsletter-promo-group-items{
		grid-template-columns		: 1fr;
	}

	.neos-newsletter.layout-carousel .newsletter-media-column{
		display						: grid;
		overflow					: visible;
		scroll-snap-type			: none;
	}

	.neos-newsletter.layout-carousel .newsletter-media-item{
		flex						: initial;
	}

	.neos-newsletter .newsletter-form-column{
		display: flex;
		justify-content: center;
	}

	.neos-newsletter .newsletter-form-inner{
		width: 100%;
		max-width: 520px; /* controls form width */
	}
}


/* =================================
   STEP TRANSITIONS
================================= */

.neos-newsletter .newsletter-step{
	opacity						: 0;
	transform					: translateY(24px);
	transition					: opacity .45s ease, transform .45s cubic-bezier(.16,.84,.44,1);
	pointer-events				: none;
}

.neos-newsletter.step-1 .newsletter-step[data-step="1"],
.neos-newsletter.step-2 .newsletter-step[data-step="2"],
.neos-newsletter.step-3 .newsletter-step[data-step="3"],
.neos-newsletter.step-4 .newsletter-step[data-step="4"],
.neos-newsletter.step-5 .newsletter-step[data-step="5"]{
	opacity						: 1;
	transform					: translateY(0);
	pointer-events				: auto;
}


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

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

	.neos-newsletter .newsletter-step,
	.neos-newsletter .newsletter-promo-card{
		transition				: none;
		transform				: none;
		opacity					: 1;
	}

}