div.wp-block-bbl-newsletter-signup {
	--block-padding: 1.75rem;
	--block-icon-size: 90px;
	--block-border-radius: 16px;
	--block-background-color: var(--wp--preset--color--theme-1);
	--wp--custom--color--error: var(--wp--preset--color--theme-4);
	container-type: inline-size;
	container-name: newsletter-signup;
	position: relative;	
	padding: 0;
	border-radius: var(--block-border-radius);
	background-color: var(--block-background-color);
	color: var(--wp--preset--color--white);
}
div.wp-block-bbl-newsletter-signup:not(.is-popup-mode ) {
	margin-top: calc(var(--block-icon-size) / 2 + var(--wp--style--block-gap));
}
.wp-block-bbl-newsletter-signup.is-popup-mode {
	--block-padding: var(--space-m);
	--block-padding-wide: 2rem;
	
}

.newsletter-signup__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: wrap;	
	border-radius: var(--block-border-radius);
	overflow: hidden;
}

.wp-block-bbl-newsletter-signup::before {
	display: block;
	content: "";
	width: var(--block-icon-size);
	height: var(--block-icon-size);
	position: absolute;
	top: calc(var(--block-icon-size) / 2 * -1);
	left: calc(50% - (var(--block-icon-size) / 2));
	/* left: var(--block-padding); */
	background-image: url(../../assets/images/icon-newsletter-signup.png);
	background-size: contain;
	z-index: 1;
}

.wp-block-bbl-newsletter-signup:is(.has-theme-1-background-color) .newsletter-signup__heading {
	color: var(--wp--preset--color--white);
}

/* content */
.newsletter-signup__heading {
	margin-bottom: 0.5rem;
	margin-block-start: 0;
	line-height: 1.05;
	color: var(--wp--preset--color--white);
}

.newsletter-signup__description {
	margin-bottom: 0;
	opacity: 0.8;
	line-height: 1.3;
}
.newsletter-signup__description > *:last-child {
	margin-bottom: 0;
}

.newsletter-signup__content {
	padding-inline: var(--block-padding);
	padding-block-start: calc(var(--block-icon-size) / 2 + 1rem);
	padding-block-end: var(--block-padding);
}

.newsletter-signup__content.has-image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
}

.newsletter-signup__content.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--block-background-color);
	opacity: 0.75;
	z-index: 0;
}

.newsletter-signup__content.has-image > * {
	position: relative;
	z-index: 1;
}


/* form */
.newsletter-signup__form {	
	padding-block: var(--block-padding);
	padding-inline: var(--block-padding);
	text-align: left;
	border-bottom-right-radius: var(--block-border-radius);
	border-bottom-left-radius: var(--block-border-radius);
	width: 100%;
}

.wp-block-bbl-newsletter-signup p:empty,
.wp-block-bbl-newsletter-signup p:has(> br:only-child) {
	display: none;
}

.newsletter-signup__form .wpforms-container {
	margin-bottom: 0;
}
.newsletter-signup__form .wpforms-container + p {
	display: none;
}
.newsletter-signup__form div.wpforms-container .wpforms-field {
    margin-bottom: 1.25rem;
}

.newsletter-signup__form .wpforms-field-gdpr-checkbox {
	border-top: 1px solid rgba(255,255,255, 0.2);
	padding-block-start: 0.75rem !important;
}
.newsletter-signup__form .wpforms-submit {
	background-color: var(--wp--custom--color--base-2) !important;
	/* color: var(--wp--preset--color--contrast) !important; */
	/* width: 100%; */
	    width: auto;
}
.newsletter-signup__form .wpforms-submit-container br {
	display: none;
}

.newsletter-signup__form .wpforms-container :is(input, select, textarea) {
	border-color: rgba(255,255,255, 0.5);
	color: var(--wp--preset--color--white) !important;
	background-color: rgba(0, 0, 0, 0.1);
}

.newsletter-signup__form .wpforms-container :is(input[type=checkbox]):checked {
	border-color: white;
	color: white;
}


.newsletter-signup__form .wpforms-container :is(input, select, textarea)::placeholder {
	color: rgba(255,255,255,0.65);
	opacity: 1;
}


/* sidebar/narrow usage */
@container newsletter-signup (max-width: 767px) {

	.newsletter-signup__content {
		text-align: center;
	}
	.newsletter-signup__heading {
		font-size: var(--wp--preset--font-size--large);
	}
	.newsletter-signup__description {
		font-size: var(--wp--preset--font-size--small);
	}
	
	.wpforms-container .wpforms-field.wpforms-field-checkbox {
		margin-block: 1.25rem;
	}
}

/* container queries (respond to the block's own width, not the viewport) */

@container newsletter-signup (min-width: 768px) {
	
	.wp-block-bbl-newsletter-signup::before {
		left: var(--block-padding);
	}

	.newsletter-signup__inner {		
		flex-direction: row;
		align-items: stretch;
		padding-block-start: 0;
	}	

	.newsletter-signup__content,
	.newsletter-signup__form {
		flex: 1 1 320px;
		padding-block-start: calc(var(--block-icon-size) / 2 + 1.5rem) ;
		padding-block-end: var(--block-padding);
	}	

	.newsletter-signup__content {
		flex-basis: 40%;
		text-align: left;
	}
	.newsletter-signup__content.has-image {
		border-radius: var(--block-border-radius) 0 0 var(--block-border-radius);
	}
	.newsletter-signup__form {
		flex-basis: 60%;
		border-top-right-radius: var(--block-border-radius);
		border-bottom-left-radius: 0;
	}

	.wp-block-bbl-newsletter-signup .wpforms-submit {
		width: auto;
	}
}


@container newsletter-signup (min-width: 992px) {
	.newsletter-signup__content {
		flex-basis: 35%;
	}
	.newsletter-signup__form {
		flex-basis: 65%;
	}

}

/* popup mode */
.newsletter-signup__button {
	margin-block-start: 1.25rem;
	cursor: pointer;
}

.is-popup-mode .newsletter-signup__content {
	width: 100%;
	border-radius: var(--block-border-radius);
}

.is-popup-mode .newsletter-signup__description *:first-child {
	margin-top: 0;
}
.is-popup-mode .newsletter-signup__description *:last-child {
	margin-bottom: 0;
}

@container newsletter-signup (min-width: 768px) {
	.wp-block-bbl-newsletter-signup.is-popup-mode::before {
		top: var(--block-padding-wide);
		left: var(--block-padding-wide);
	}
	.is-popup-mode .newsletter-signup__inner {
		--block-padding: var(--block-padding-wide);
	}
	.is-popup-mode .newsletter-signup__content {
		padding-block: var(--block-padding);
		padding-inline-start: calc(var(--block-padding) + var(--block-icon-size) + 1.5rem);
		min-height: calc(var(--block-icon-size) + var(--block-padding) * 2);
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: var(--block-padding);
		align-items: center;
		text-align: left;
	}
	.is-popup-mode .newsletter-signup__heading,
	.is-popup-mode .newsletter-signup__description {
		grid-column: 1;
	}
	.is-popup-mode .newsletter-signup__heading {
		margin-bottom: 0;
	}
	.is-popup-mode .newsletter-signup__actions {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-self: end;
	}
	.is-popup-mode .newsletter-signup__button {
		margin-block-start: 0;
	}
}

.newsletter-signup__dialog {
	
	--wp--custom--color--error: var(--wp--preset--color--theme-4);
	
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(90vw, 560px);
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: var(--block-border-radius, 16px);
	overflow: auto;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--theme-1);
}

/* non-modal dialog (so the hCaptcha challenge can sit above it): dim the page with a shadow */
.newsletter-signup__dialog {
	z-index: 100000;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}

.newsletter-signup__dialog .newsletter-signup__form {
	padding: var(--space-l-xl);
	border-radius: 0;
}
.newsletter-signup__dialog .wpforms-field-row .wpforms-field-row-block  {
	width: 50% !important;
}

.newsletter-signup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	z-index: 2;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.newsletter-signup__close {
	min-width: 44px;
	min-height: 44px;
}
.newsletter-signup__close:focus-visible,
.newsletter-signup__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--theme-1-dark);
}
.newsletter-signup__dialog {
	overscroll-behavior: contain;
}

button.newsletter-signup__button {
	background-color: var(--wp--custom--color--base-2);
	/* color: var(--wp--preset--color--white); */
}

/* the dialog is printed in the footer, outside the block wrapper, so it needs its own variables */
.newsletter-signup__dialog {
	--block-padding: 1.75rem;
	--block-border-radius: 16px;
}

.newsletter-signup__logo {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 0 var(--space-m, 1.5rem);
}