.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).
   font-size: inherit (not a fixed px) so both track the theme's own paragraph size — Nectarblocks'
   "Body" typography role can be a fluid clamp() value (doc 03 §IV / doc 08 §3 in the Nectarblocks
   KB), which a fixed px can never match at every viewport width; a plain WPBakery/Salient row
   inherits the same way. line-height is unitless for the same reason — it has to scale with
   whatever font-size ends up being inherited, not stay pinned to a size tuned for 14px text. */
.mailjet-signup .mailjet-signup__input,
.mailjet-signup .mailjet-signup__submit {
	box-sizing: border-box;
	padding: 13px 18px;
	line-height: 1.4;
	font-size: inherit;
	font-family: inherit;
}

/* 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). :not([hidden]) matters here:
   the JS sets row.hidden = true on success, and an unconditional `display: flex` would override
   the browser's built-in `[hidden] { display: none }` — author CSS always beats the UA stylesheet
   regardless of specificity, so the row (button included) would stay visibly stuck otherwise. */
.mailjet-signup--stacked .mailjet-signup__row:not([hidden]) {
	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:not([hidden]) {
	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;
}

/* flex, not block: the default browser checkbox is ~13px and easy to miss/mis-tap next to the
   consent text. align-items: center matches the checkbox to the (typically short, one-line)
   consent text; if a site's consent text regularly wraps to multiple lines, flex-start (aligning
   the box to the first line instead of the whole block's middle) may read better instead. */
.mailjet-signup__consent:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	cursor: pointer;
}

/* appearance: none + a hand-drawn box/checkmark, rather than the native control: browsers mostly
   ignore author border-width/border-color on a native checkbox, which is exactly why it never
   matched the text input's own (inline-styled, per-instance-configurable) border. The border
   itself is set inline in the render function from the same input_border_width/color the email
   input uses (see includes/render-signup-form.php), so the two always match; only the corner
   radius and checked-state color are fixed here rather than tied to the input's own radius —
   a pill-shaped input's radius would look broken shrunk onto a 20px checkbox. */
.mailjet-signup__consent input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 3px;
	background-color: #fff;
	position: relative;
	cursor: pointer;
}

.mailjet-signup__consent input[type="checkbox"]:checked {
	background-color: var(--mj-btn-bg, #222);
	border-color: var(--mj-btn-bg, #222);
}

.mailjet-signup__consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--mj-btn-color, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

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

/* Stacked has the input/button centered as a block, so the message reads oddly pinned to the
   left edge under them — center it to match. Inline keeps the button snug against the input's
   right edge, so left-aligned (the default) already lines the message up with the input. */
.mailjet-signup--stacked .mailjet-signup__message {
	text-align: center;
}

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

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