/**
 * F4-L2 (#90) — fidelity round (spec-addendum-90-v2-fidelidad.md's follow-up,
 * `brief-l2-fidelidad.md`). Self-sufficient styling for BOTH forms this issue
 * owns: the footer band's form (`.serena-footer__news-form`, always rendered
 * by the theme — `wp-content/themes/bridge-child/inc/serena-footer.php`) and
 * the native popup (`.swbn-popup`, `includes/popup.php`).
 *
 * "Self-sufficient" is the acceptance bar, not a figure of speech: every rule
 * below must hold with `elementor` and `elementor-pro` BOTH deactivated, so
 * nothing here reads `custom-frontend.min.css` (Elementor core's own column
 * grid, `.elementor-col-XX{width:XX%}`) or any other Elementor-shipped sheet.
 * The child theme's `serena-footer.css` already reproduces the instance-level
 * declarations `post-6512.css` carried (Rubik inputs, Nunito/orange button,
 * box-sizing reset) scoped to `.serena-footer__news-form` — that file is
 * unconditional (the newsletter band renders on every route regardless of
 * this flag) and is NOT touched here (out of scope: the only file this round
 * may change outside `swbn_forms` is `capture.mjs`'s `NOISE_CHROME`). What it
 * does NOT reproduce — because it was never its job — is the Elementor-core
 * column percentages, so this file supplies those, plus everything the
 * popup needs end to end (nothing else styles the popup at all).
 *
 * Values are computed-style targets pulled from `spec-fidelidad-l2.json`
 * (production, `getComputedStyle`, 2026-09-27), not guessed.
 */

/* ---- box model reset, scoped (never global — see serena-footer.css's own
   note on why a global `.elementor-field-group` rule would be a landmine) */
.swbn-form,
.swbn-form *,
.swbn-form *::before,
.swbn-form *::after,
.swbn-popup,
.swbn-popup *,
.swbn-popup *::before,
.swbn-popup *::after {
	box-sizing: border-box;
}

/* ================= shared form styling (footer + popup) ================= */

/*
 * Two more Elementor-CORE generics (custom-frontend.min.css), not tied to
 * document 6512/8033 and therefore not covered by the child theme's own
 * `serena-footer.css` reproduction — found by actually deactivating
 * `elementor`/`elementor-pro` and looking, not by assuming the column-width
 * percentages were the only core dependency left (brief-l2-fidelidad.md,
 * criterion 2):
 *
 * - `.elementor-screen-only` is Elementor's own visually-hidden utility.
 *   Every field's real `<label>` carries it (render.php uses Elementor's
 *   placeholder-only convention) — without this rule those labels render as
 *   plain visible text stacked above every field the moment Elementor is
 *   gone, which is not a subtle metrics gap, it changes what a visitor sees.
 * - `.elementor-form-fields-wrapper{display:flex;flex-wrap:wrap}` is what
 *   makes the footer's 40/40/20 column widths sit in one row instead of
 *   stacking; Elementor core supplies it generically today, so cutting
 *   Elementor left our own percentage widths with no flex context to size
 *   against.
 */
.swbn-form .elementor-screen-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.swbn-form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
}

.swbn-form .elementor-field-group .elementor-field {
	display: block;
	width: 100%;
	height: 47px;
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 21px;
	color: #000;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 0;
	padding: 6px 16px;
}
.swbn-form .elementor-field-group .elementor-field::placeholder {
	color: #000;
	/* No `font:` shorthand here: it resets font-weight to 400, and production's
	   placeholder is Rubik 300 at opacity .6 (measured with getComputedStyle(
	   input, '::placeholder'), #90 acotada). */
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
	opacity: 0.6;
}
.swbn-form input[type="checkbox"].elementor-field {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 3px 3px 3px 4px;
	padding: 0;
	border: 0;
	line-height: normal; /* the shared .elementor-field rule below sets 21px for
	                        text inputs; spec-fidelidad-l2.json's own "checkbox"
	                        key measures "normal" on both forms — verified,
	                        not guessed. */
}
.swbn-form .elementor-field-subgroup label {
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #212121;
}
/* line-height genuinely differs between the two forms here (measured):
   22.5px in the popup, 26px in the footer band. */
.swbn-popup .elementor-field-subgroup label {
	line-height: 22.5px;
}
.serena-footer__news-form .elementor-field-subgroup label {
	line-height: 26px;
}

.swbn-form button.elementor-button {
	display: block;
	width: 100%;
	height: 47px;
	font-family: "Nunito", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	background-color: #ff9472;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}
/* ---- the message after a submit (#90 visual final) ----
   Same box, colour, icon and type as Elementor Pro 4.0.1's
   `elementor-message elementor-message-success elementor-message-svg` /
   `elementor-message-danger`, measured with getComputedStyle on Elementor
   itself (local, response simulated), in the footer and the popup at 1440
   and 390: Open Sans 16px/16px, margin 10px 0, #212121 on success, #d9534f
   on error; its ::before is inline-block, vertical-align middle, 5px gap.
   Nothing here needs Elementor: the success tick is the same data-URI SVG
   Elementor's widget-form.min.css draws (the `e_font_icon_svg` experiment is
   on, in production too). The error glyph is what Elementor asks for —
   U+E87F (`eicon-close`) — in a font family that is never loaded: neither
   production nor local ever loads the `eicons` font on these pages, so what
   a visitor sees in production is the browser's missing-glyph box, and
   this reproduces exactly that without referencing Elementor's font. */
.swbn-form .swbn-form__message {
	display: block;
	margin: 10px 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	color: #212121;
}
.swbn-form .swbn-form__message[hidden] {
	display: none;
}
.swbn-form .swbn-form__message::before {
	display: inline-block;
	font-family: swbn-forms-no-icon-font;
	font-style: normal;
	font-weight: 400;
	margin-inline-end: 5px;
	vertical-align: middle;
}
.swbn-form .swbn-form__message--success::before {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMSIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE0IDExIj48cGF0aCBmaWxsPSIjMDA4YTIwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljc1IDguMTUgMS42IDUgLjU1IDYuMDVsNC4yIDQuMiA5LTlMMTIuNy4yeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
	background-position: 50%;
	background-repeat: no-repeat;
}
.swbn-form .swbn-form__message--error {
	color: #d9534f;
}
.swbn-form .swbn-form__message--error::before {
	content: "\e87f";
}

.swbn-form button.elementor-button:hover,
.swbn-form button.elementor-button:focus {
	background-color: #ffbc02;
	color: #fff;
}
/* Elementor core's own generic button CSS (custom-frontend.min.css) turns
   this wrapper into a flex box so the label centres inside the button
   independent of `text-align` — self-sufficiency round: measured a real
   `button_text` width/height regression (getComputedStyle → "auto") once
   Elementor was deactivated, because nothing else in this file supplied it. */
.swbn-form .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* ---- footer: column widths (self-sufficient replacement for the
   Elementor-core `.elementor-col-40/20{width:...}` percentage rule) ---- */
.serena-footer__news-form .elementor-field-group-news_name,
.serena-footer__news-form .elementor-field-group-email_subscribe,
.serena-footer__news-form .elementor-field-type-submit {
	width: 100%;
}
@media (min-width: 768px) {
	.serena-footer__news-form .elementor-field-group-news_name,
	.serena-footer__news-form .elementor-field-group-email_subscribe {
		width: 40%;
	}
	.serena-footer__news-form .elementor-field-type-submit {
		width: 20%;
	}
}

/* ---- popup: single-column form at every width (config.php's own
   field_cols already say 100 everywhere for both documents) ---- */
.swbn-popup .elementor-field-group,
.swbn-popup .elementor-field-type-submit {
	width: 100%;
}
/* Elementor core's form grid, popup only (the footer's own sheet already
   carries its equivalent): every field group has 10px side padding and an
   8px bottom margin, and the wrapper pulls back with margin 0 -10px -8px.
   Measured in production: wrapper 380 wide for 360 of inputs, 215 tall at
   1440. */
.swbn-popup .elementor-form-fields-wrapper {
	margin: 0 -10px -8px;
}
.swbn-popup .elementor-field-group {
	padding: 0 10px;
	margin-bottom: 8px;
}
.swbn-popup button.elementor-button {
	height: 40px;
	padding: 0 24px;
}

/* ================================ popup shell ============================ */

.swbn-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .8); /* production: #elementor-popup-modal-8033 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.4s ease;
}
.swbn-popup.is-open {
	opacity: 1;
	visibility: visible;
}
/* The backdrop click target: fills the popup root, under the dialog (the
   dialog is later in the DOM and position:relative, so it paints above). */
.swbn-popup__overlay {
	position: absolute;
	inset: 0;
}
.swbn-popup__close-icon {
	display: block;
	width: 15px;
	height: 15px;
	overflow: hidden;
	fill: #1f2124; /* production's svg.e-font-icon-svg fill, measured */
}
.swbn-popup__dialog {
	position: relative;
	background: #fff;
	width: 800px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	overflow: auto;
	box-sizing: content-box; /* matches spec-fidelidad-l2.json's "root" key at
	                            every breakpoint; has no visual effect since
	                            this element carries no padding/border of its
	                            own, but it is what production measures. */
}
.swbn-popup__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	width: 15px;
	height: 15px;
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 15px;
	text-align: start; /* the UA stylesheet centers <button> text by default */
	color: #212121;
	cursor: pointer;
	/* Production's × is focused on open too (Elementor a11y) and measured
	   `outline: none` on it (getComputedStyle, focus-visible true); the UA's
	   orange ring is the local-only box on the ×. */
	outline: none;
}
.swbn-popup__row {
	display: flex;
	flex-direction: row;
	min-height: 520px;
	line-height: 24px;
}
.swbn-popup__image {
	width: 45%;
	min-height: 520px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.swbn-popup__content {
	width: 55%;
	min-width: 0; /* flex items default to min-width:auto; without this the
	                 content column refuses to shrink below its longest
	                 unbroken run and forces the row (and the title) past the
	                 dialog's own edge — the #320 overflow bug (brief-l2-
	                 fidelidad.md point 1). */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 40px;
}
.swbn-popup__divider {
	display: block;
	padding: 5px 0; /* the Elementor divider widget's own block padding */
}
/* the form widget's own 20px bottom margin (production: 20px below the
   fields, before the column's padding). */
.swbn-popup .swbn-form {
	margin: 0 0 20px;
}
/* Production: the Elementor divider's `.elementor-divider-separator` is a
   200x15 flex box (margin-right computes to the remaining width) that holds
   the text, with the rule as its ::before growing to fill what the text
   leaves. */
.swbn-popup__divider-line {
	display: flex;
	align-items: center;
	width: 200px;
	height: 15px;
	margin: 0 auto 0 0;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	color: #212121;
}
.swbn-popup__divider-line::before {
	content: "";
	display: block;
	flex-grow: 1;
	border-top: 1px solid #afafaf;
}
.swbn-popup__divider-text {
	margin: 0 0 0 10px;
	font-family: "Nunito", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 15px;
	text-align: left;
	color: #b11972;
}
.swbn-popup__title {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2em;
	color: #ff7d53;
}
.swbn-popup__lead {
	margin: 16px 0;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	color: #212121;
}

/* Elementor's `.dialog-message` equivalent (see popup.php). Below 1025px it
   generates no box at all, so the mobile/tablet layout is exactly the one the
   dialog itself already lays out. */
.swbn-popup__scroll {
	display: contents;
}

@media (min-width: 1025px) {
	/* Production (#90 visual final, getComputedStyle + rect at 1440): the
	   dialog (`.dialog-widget-content`) is 800x540 with overflow visible; the
	   `.dialog-message` inside it is ALSO 800x540, overflow:auto, and holds
	   the 588-tall content, so everything past 540 is clipped (scrollable),
	   the close button outside it stays put. */
	.swbn-popup__dialog {
		height: 540px;
		overflow: visible;
		/* Production's popup text is rasterised with grayscale antialiasing
		   (its dialog is composited); ours was drawn with subpixel (LCD)
		   antialiasing, which is the whole of the 4.3 % text-column
		   difference left in the 1440 pairs once the geometry matched
		   (every text rect is identical to the thousandth of a px). A
		   compositing hint gives the same rasterisation: measured, the
		   dialog diff against production drops from 2.34 % to 0.16 %. Kept
		   to this breakpoint: at 390/320 (DPR 2) there is no LCD text and
		   the pairs already match. */
		will-change: transform;
	}
	.swbn-popup__scroll {
		display: block;
		height: 100%;
		overflow: auto;
	}
	/* The image column (`.elementor-element-523340e7`) stretches to the row's
	   full 588 px — not to the dialog's 540 — and paints
	   uploads/2024/09/newsletter-01.webp (395x478, no srcset: it is a CSS
	   background) with cover + 50% 50% over those 360x588; the 540..588
	   strip is what the scroll box clips. Sizing it to 540 was the ~9 %
	   zoom-out and ~24 px shift the #90 pair review found. */
	.swbn-popup__image {
		align-self: stretch;
		min-height: 0;
	}
}
@media (max-width: 1024px) {
	.swbn-popup__row {
		min-height: 550px;
	}
	.swbn-popup__title {
		font-size: 23px;
	}
}
@media (max-width: 767px) {
	/* Production sizes the dialog to the VISUAL viewport (Elementor's dialogs
	   read it), not the layout viewport: on the home page the carousel widens
	   the layout viewport to 340 at a 320 device, and production's popup stays
	   320x640 centred. swbn-forms.js writes those two custom properties; the
	   100% fallbacks are the no-JS / no-visualViewport case. */
	.swbn-popup__dialog {
		width: var(--swbn-vw, 100%);
		max-width: none;
		height: var(--swbn-vh, 100%);
		max-height: none;
		overflow: auto;
	}
	.swbn-popup__row {
		flex-direction: column;
		min-height: calc(var(--swbn-vh, 100vh) * 0.88);
		justify-content: flex-start;
	}
	.swbn-popup__image {
		width: 100%;
		min-height: calc(var(--swbn-vh, 100vh) * 0.3);
	}
	.swbn-popup__content {
		width: 100%;
		min-height: calc(var(--swbn-vh, 100vh) * 0.55);
		padding: 20px;
		justify-content: flex-start;
	}
	.swbn-popup__title {
		font-size: 21px;
	}
}

/* ============================ Turnstile (#91) ============================
   The widget's container is a flex item of the fields wrapper, folded to
   0 px (no width, height, margin, padding, border, and no flex basis, so it
   takes no room in the row) until Cloudflare asks for an interaction:
   swbn-forms.js adds `--open` (plus Elementor's own `elementor-column
   elementor-col-100`, the full-width row the approved mock-up used) in
   `before-interactive-callback` and takes both away in
   `after-interactive-callback`. An invisible widget therefore adds 0 px to
   the form. Approved placement (mq91/turnstile-91.html): popup, every width:
   between the checkbox and «Enviar»; footer mobile: between the email and
   «Enviar»; footer desktop: below the checkbox, left-aligned with the
   fields, so «Enviar» does not move. */
.swbn-form .elementor-field-group.swbn-turnstile:not(.swbn-turnstile--open) {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
@media (min-width: 1025px) {
	.swbn-form[data-swbn-form="footer"] .elementor-field-group.swbn-turnstile {
		order: 9;
	}
}