.mailjet-signup .mailjet-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Identical box height for the input and button: same padding/line-height/border-box on both,
   fully self-contained (no theme size tiers to reverse-engineer, no per-instance height lookup). */
.mailjet-signup .mailjet-signup__input,
.mailjet-signup .mailjet-signup__submit {
	box-sizing: border-box;
	padding: 13px 18px;
	line-height: 20px;
	font-size: 14px;
}

/* Border/radius are set as an inline style directly on the input (see the render template) so they
   always apply and are fully configurable via the element's own params — not tied to any theme
   setting at all. Only reset the browser's native control chrome here. */
.mailjet-signup input.mailjet-signup__input {
	-webkit-appearance: none;
	appearance: none;
}

/* Fully self-contained button: no theme class dependency, no native browser button chrome (border,
   shadow, outline, tap-highlight) — just the colors/border/radius set via CSS custom properties
   in the render template (background/border/radius here, plus a real :hover, since inline style
   alone can't express hover). */
.mailjet-signup button.mailjet-signup__submit {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	-webkit-tap-highlight-color: transparent;
	color: var(--mj-btn-color, #fff);
	background-color: var(--mj-btn-bg, #222);
	border-style: solid;
	border-width: var(--mj-btn-border-width, 0px);
	border-color: var(--mj-btn-border-color, #222);
	/* !important is required here: Salient applies its own `body[data-button-style*="..."] button`
	   rule (bare `button` selector, not class-scoped) with `border-radius: ... !important` for
	   several Button Style theme options (e.g. "slightly_rounded"). Only !important beats another
	   !important rule, regardless of selector specificity or inline styles. */
	border-radius: var(--mj-btn-border-radius, 4px) !important;
	transition: background-color 0.2s ease;
}

.mailjet-signup button.mailjet-signup__submit:hover {
	background-color: var(--mj-btn-bg-hover, #000);
	color: var(--mj-btn-color-hover, #fff);
}

/* Button below the input, both full width — a real vertical stack, not a horizontal row with a
   wider gap (which looked identical to "inline" except for gap size). */
.mailjet-signup--stacked .mailjet-signup__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mailjet-signup--stacked .mailjet-signup__input,
.mailjet-signup--stacked .mailjet-signup__submit {
	width: 100%;
}

/* Button width is content-based (not a guessed percentage), so it never overflows or overlaps
   the input regardless of button text length or size. Smaller gap than "stacked" to still read
   as one connected control, without fighting the input's own inline-styled border-radius. */
.mailjet-signup--inline .mailjet-signup__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

.mailjet-signup--inline .mailjet-signup__input {
	flex: 1 1 240px;
	min-width: 0;
}

.mailjet-signup--inline .mailjet-signup__submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Not flattening the touching corners here: the input's border-radius is set via inline style
   (always wins, per the element's own param), so an external CSS override couldn't take effect
   anyway — both keep their own full radius rather than fighting that inline style. */
@media only screen and (min-width: 1000px) {
	.mailjet-signup--inline .mailjet-signup__row {
		flex-wrap: nowrap;
	}
}

.mailjet-signup__turnstile {
	margin-top: 12px;
}

.mailjet-signup__consent {
	display: block;
	margin-top: 10px;
	font-size: 13px;
}

.mailjet-signup__message {
	margin-top: 10px;
}

.mailjet-signup__message--success {
	color: #2a7a2a;
}

.mailjet-signup__message--error {
	color: #c0392b;
}