.immomakler-propstack-newsletter {
	box-sizing: border-box;
	max-width: 560px;
}

.immomakler-propstack-newsletter *,
.immomakler-propstack-newsletter *::before,
.immomakler-propstack-newsletter *::after {
	box-sizing: inherit;
}

.immomakler-propstack-newsletter .form-group {
	margin-bottom: 0.75em;
}

.immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row {
	margin-bottom: 0.75em;
}

@media (min-width: 480px) {
	.immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row {
		display: flex;
		gap: 0.75em;
	}

	.immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row .form-group {
		flex: 1;
		margin-bottom: 0;
	}
}

.immomakler-propstack-newsletter .form-control {
	display: block;
	width: 100%;
}

.immomakler-propstack-newsletter .checkbox {
	margin-bottom: 0.5em;
}

.immomakler-propstack-newsletter .checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
	font-size: 0.9em;
	line-height: 1.45;
}

.immomakler-propstack-newsletter .checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.2em;
	width: 1em;
	height: 1em;
	cursor: pointer;
}

.immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit {
	margin-top: 1em;
}

/*
 * Zero-specificity fallback appearance for the submit button.
 *
 * On the live frontend the active theme styles `.btn` / `button`, so the button
 * inherits the site design. But some page-builder editor canvases (Divi 4/5,
 * Bricks, WPBakery, Oxygen) don't load the theme's frontend button CSS, leaving
 * an unstyled native button in the editor. Wrapping the rule in `:where()` makes
 * it specificity 0,0,0: it provides a reasonable default ONLY when nothing else
 * targets the button, and is overridden by ANY theme/builder rule (incl. a bare
 * `button {}` at 0,0,1). This way we never dictate the button's look on the
 * frontend or in editors that already style it (e.g. Elementor, Gutenberg) — we
 * just fill the void in the bare editor canvases.
 */
:where(.immomakler-propstack-newsletter .btn) {
	display: inline-block;
	padding: 0.65em 1.5em;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #2c3e50;
	color: #fff;
	font-size: 1em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

:where(.immomakler-propstack-newsletter .btn:hover) {
	background-color: #1f2d3a;
}

.immomakler-propstack-newsletter .btn:disabled,
.immomakler-propstack-newsletter .btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.immomakler-propstack-newsletter .immomakler-propstack-newsletter-message {
	margin-top: 0.75em;
	padding: 0.75em 1em;
	border-radius: 3px;
	font-size: 0.9em;
	line-height: 1.5;
}

.immomakler-propstack-newsletter .alert-success {
	color: #1a5c2a;
	background-color: #d4edda;
	border: 1px solid #b8dfc5;
}

.immomakler-propstack-newsletter .alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border: 1px solid #f1c0c4;
}