/**
 * Rebs — Forminator UI Parity (SCRUM-230)
 * ============================================================
 * Brings Forminator forms into visual parity with the rest of
 * the site (WC checkout, my-account, Quiosco) after the Sprint-2
 * design-tokens refactor (2026-05-26).
 *
 * Pages affected: `/work-with-me/`, `/contact/`.
 *
 * Specificity strategy
 * --------------------
 * Forminator's base material stylesheet scopes its rules with
 *   `.forminator-ui.forminator-custom-form[data-design="material"] .forminator-input`
 * → specificity (0,3,1). A naive `.forminator-design--material .forminator-input`
 * chain (0,2,0) loses every rule on cascade.
 *
 * Every selector in this file therefore prefixes with
 *   `form.forminator-ui.forminator-custom-form[data-design="material"]`
 * → specificity (0,4,1), which beats the base ruleset on specificity
 * and (source order also wins as backup, since this file loads at
 * priority 101 after `forminator-ui.min.css`).
 *
 * Scope: every rule lives under that prefix so it cannot leak into
 * WC checkout (`.wc-block-checkout__form`), Amelia (`.el-input__inner`),
 * or other forms.
 *
 * `!important` policy
 *   - With (0,4,1) we beat the base ruleset on specificity, so the
 *     bulk of this file is `!important`-free.
 *   - Surgical `!important` is required on:
 *       a) Focus state (border/box-shadow/outline) on inputs+textarea
 *       b) Floating label active state (transform/font-size/color)
 *       c) Select2 widget (height/borders/padding/colors)
 *       d) Group label typography (font-family/size/weight/color)
 *     Reason: Forminator emits per-form CSS at
 *       /uploads/forminator/<id>/css/style-<id>.css
 *     scoped by `#forminator-module-<form-id>` → specificity (1,3,1)
 *     or higher. The form ID is runtime-generated so we cannot
 *     hardcode it at static CSS write time. Confirmed in prod
 *     (SCRUM-230 follow-up, 2026-05-27).
 * ----------------------------------------------------------------- */


/* ============================================================
 * 1. Form wrapper — max-width + center
 * Constrain the form to 720px so it doesn't bleed full-width on
 * desktop, where it currently looks gigantic and visually unbalanced.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================
 * 2. Grid — 2-col on desktop for paired fields
 * Forminator emits `.forminator-row` wrappers around `.forminator-col`
 * children. We use that to pair fields without extra wrappers.
 *
 * NOTE (SCRUM-230 F-002): on `/work-with-me/` Cani must edit the
 * form in wp-admin to put First Name + Org Name in the SAME row
 * (currently they're in separate rows, so CSS alone can't pair them).
 * This grid CSS is ready for when that config change lands.
 *
 * Spacing: 24px gutter horizontally + 24px between rows. Mobile-first
 * single column.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-row {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 0;
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-col {
	width: 100%;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-row {
		flex-direction: row;
		gap: 24px;
	}

	form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-row .forminator-col {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Solo-col rows (cuando Forminator emite `forminator-col-12` alone)
	   se quedan full-width — el flex:1 ya lo cubre. */
}


/* ============================================================
 * 3. Input + textarea boxes — full border (WC parity)
 *
 * Forminator material design ships `border-bottom: 1px` only with
 * the rest transparent (Google Material look). We want the same
 * geometry as WC checkout inputs: 4 sides, 0 radius, brand border.
 *
 * Padding asymmetric on Y axis: 28px top (room for floating label),
 * 10px bottom. 16px horizontal matches WC checkout.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-input,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea {
	background-color: var(--rebs-surface);
	color: var(--rebs-text);
	border: 1px solid var(--rebs-border-color);
	/* border-radius: 0 already enforced at line 1289 of rebs-site-styles.css */
	padding: 28px 16px 10px;
	font-family: var(--rebs-body-family);
	font-size: 1rem;
	line-height: 1.5;
	width: 100%;
	transition:
		border-color var(--rebs-transition),
		box-shadow var(--rebs-transition);
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea {
	min-height: 140px;
	resize: vertical;
}

/* Wrap (the parent of the input) — Forminator uses it as positioning
   context for the floating label. Make sure it doesn't add its own
   border. */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-input--wrap,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea--wrap {
	position: relative;
	border: 0;
	background: transparent;
	padding: 0;
}


/* ============================================================
 * 4. Floating label — repositioned for full-border box
 *
 * Forminator's default `.forminator-floating--input` floats the label
 * via `transform: translateY(30px)` (idle) → `translateY(0)` (active),
 * keeping font-size constant. That works for underline-only inputs;
 * it doesn't for boxed inputs because the label sits OUTSIDE the box.
 *
 * Strategy: shrink + reposition on active state so the label sits
 * INSIDE the box at the top, matching Material outlined inputs and
 * WC's own checkout fields. !important on transform because
 * Forminator's JS adds inline `style="transform: ..."` on focus/blur
 * that overrides our CSS.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field .forminator-label {
	position: absolute;
	top: 0;
	left: 16px;
	margin: 0;
	padding: 0;
	font-family: var(--rebs-body-family);
	font-size: 1rem;
	font-weight: 400;
	color: var(--rebs-body-color);
	line-height: 1.5;
	background: transparent;
	pointer-events: none;
	transform: translateY(18px);
	transform-origin: top left;
	transition:
		transform var(--rebs-transition),
		font-size var(--rebs-transition),
		color var(--rebs-transition);
	z-index: 1;
}

/* Active state — Forminator JS toggles two classes on the parent
   `.forminator-field`:
     - `.forminator-is_active`  → on focus (input has focus, may or may not have value)
     - `.forminator-is_filled`  → on blur if the input has a value
   Note: the label is a SIBLING of `.forminator-input--wrap`, not a
   child, so `:focus-within > .forminator-label` doesn't apply. We
   match the wrap's ancestor `.forminator-field:focus-within` instead
   (CSS-only fallback in case JS class is delayed).
   !important on transform because Forminator's base material CSS
   ships its own `transform: translateY(...)` rule with same
   specificity that wins on source order before our enhancement classes
   exist on the DOM. */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field.forminator-is_active > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field.forminator-is_filled > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field:focus-within > .forminator-label {
	/* !important: per-form CSS dinámico de Forminator usa ID con specificity 1,3,1 */
	transform: translateY(6px) !important;
	font-size: 0.75rem !important; /* 12px */
	color: var(--rebs-body-color) !important;
}

/* Focused (not just filled) → teal accent on label */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field.forminator-is_active > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field:focus-within > .forminator-label {
	/* !important: per-form CSS dinámico de Forminator usa ID con specificity 1,3,1 */
	color: var(--rebs-teal) !important;
}

/* Required asterisk — teal instead of WC default red.
   Already brand-aligned with the rest of the site (no rojo agresivo). */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-required {
	color: var(--rebs-teal);
}


/* ============================================================
 * 5. Focus state — visible (WCAG 2.4.7)
 *
 * Default Forminator focus is invisible on boxed inputs. Add brand
 * teal border + soft halo. Matches the pattern used by WC inputs
 * (rebs-site-styles.css line 793).
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-input:focus,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea:focus {
	/* !important: per-form CSS dinámico de Forminator usa ID con specificity 1,3,1 */
	outline: 2px solid transparent !important; /* a11y for forced-colors mode */
	border-color: var(--rebs-teal) !important;
	box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.1) !important;
}


/* ============================================================
 * 6. Select (Select2 widget)
 *
 * Forminator hides the native `<select>` and renders a Select2 widget
 * as a SIBLING of the original `<select>`, INSIDE the `.forminator-field`
 * (not portal-mounted — verified on /work-with-me/ runtime DOM).
 *
 * The wrap span has classes `select2 select2-container forminator-select`
 * — note: NOT `.select2-container--default` (that's the v4 default theme
 * class but Forminator's Select2 build doesn't apply it). So we anchor
 * on `.forminator-select` for the container, and `.select2-selection--single`
 * for the visible box.
 *
 * Specificity: with `form.forminator-ui.forminator-custom-form[data-design=...]`
 * (0,4,1) prefix + `.select2-selection--single` we beat Forminator's base
 * `.select2-container--default ...` (also 0,3,1) cleanly.
 *
 * Height calibrated to match the boxed inputs (28+10+~16 line ≈ 56px).
 * ============================================================ */
/* Specificity war (same as group label, section 7): Forminator's
   per-form CSS scopes Select2 with
   `.forminator-ui#forminator-module-<id>.forminator-design--material
   .forminator-select2 + .forminator-select .selection
   .select2-selection--single[role="combobox"]` — that's (1,6,0). We
   can't predict the form ID at static CSS write time, so we use
   `!important` surgically. */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single {
	height: 56px !important;
	background-color: var(--rebs-surface) !important;
	border: 1px solid var(--rebs-border-color) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	transition:
		border-color var(--rebs-transition),
		box-shadow var(--rebs-transition);
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single .select2-selection__rendered {
	color: var(--rebs-text) !important;
	font-family: var(--rebs-body-family);
	font-size: 1rem;
	line-height: 1.5 !important;
	padding: 28px 36px 10px 16px !important; /* extra right padding for arrow */
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	right: 12px !important;
	height: 24px !important;
	width: 24px !important;
	transform: translateY(-50%) !important;
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection__placeholder {
	color: var(--rebs-body-color);
}

/* Focus / open states — Select2 toggles `.select2-container--focus` and
   `.select2-container--open` on the wrap. */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select.select2-container--focus .select2-selection--single,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select.select2-container--open .select2-selection--single {
	border-color: var(--rebs-teal) !important;
	box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.1);
	outline: 2px solid transparent;
}

/* Dropdown panel — portal-mounted to <body>, so we scope by the
   `.select2-container--open` class plus the select2 prefix (cannot
   anchor on .forminator-* since the panel lives outside). Specificity
   stays modest (0,2,0) which is fine — Select2 default panel is
   weakly styled. */
body .select2-container .select2-dropdown {
	border-color: var(--rebs-border-color);
	border-radius: 0;
}

body .select2-container .select2-results__option--highlighted[aria-selected],
body .select2-container .select2-results__option--highlighted[data-selected] {
	background-color: var(--rebs-teal);
	color: var(--rebs-surface);
}


/* ============================================================
 * 7. Checkbox group
 *
 * Forminator renders:
 *   <div role="group" class="forminator-field">
 *     <span class="forminator-label">Group label</span>
 *     <label class="forminator-checkbox">
 *       <span class="forminator-checkbox-box"></span>
 *       <input type="checkbox" ...>
 *       <span class="forminator-checkbox-label">Option text</span>
 *     </label>
 *     ...
 *   </div>
 *
 * Group label upgrades to 20px Mulish 600 (section-label token) so
 * it reads as a section heading, matching the WC checkout summary
 * pattern set in Sprint 2.
 * ============================================================ */
/* Specificity war: Forminator's per-form auto-generated CSS
   (`/uploads/forminator/<form-id>_<hash>/css/style-<form-id>.css`)
   scopes label rules with `#forminator-module-<id>.forminator-design--material
   .forminator-label:not([class*="forminator-floating-"])` — specificity
   (1,2,0). The group label (`<span class="forminator-label">` with NO
   `forminator-floating-` class) matches that selector and inherits
   12px Poppins 700 from it.
   We can't predict the form ID at static CSS write time, so we use
   `!important` surgically on the typography props that lose to the
   per-form ID-scoped rules. Layout props (display, position) win on
   normal specificity. */
form.forminator-ui.forminator-custom-form[data-design="material"] [role="group"].forminator-field > span.forminator-label {
	display: block;
	position: static;
	transform: none;
	font-family: var(--rebs-heading-family) !important;
	font-size: var(--rebs-font-section-label) !important;
	font-weight: var(--rebs-section-label-weight) !important;
	color: var(--rebs-heading-color) !important;
	margin-bottom: 12px;
	pointer-events: auto;
}

/* Individual checkbox row */
form.forminator-ui.forminator-custom-form[data-design="material"] label.forminator-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	cursor: pointer;
	font-family: var(--rebs-body-family);
	font-size: 1rem;
	font-weight: 400;
	color: var(--rebs-text);
	line-height: 1.5;
}

/* The visible box */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-checkbox-box {
	width: 20px;
	height: 20px;
	border: 2px solid var(--rebs-border-color-strong);
	/* border-radius: 0 enforced at line 1380 of rebs-site-styles.css */
	background-color: var(--rebs-surface);
	flex-shrink: 0;
	transition:
		background-color var(--rebs-transition),
		border-color var(--rebs-transition);
}

/* Checked state — checkbox input is sibling of the box. Forminator
   applies a class to the box when the underlying input is checked.
   Cover both DOM patterns (some versions add `.forminator-is-checked`
   on the label, some toggle the input only). */
form.forminator-ui.forminator-custom-form[data-design="material"] label.forminator-checkbox input[type="checkbox"]:checked + .forminator-checkbox-box,
form.forminator-ui.forminator-custom-form[data-design="material"] label.forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-checkbox.forminator-is-checked .forminator-checkbox-box {
	background-color: var(--rebs-mint);
	border-color: var(--rebs-mint);
}

/* Focus ring on the underlying input (a11y) */
form.forminator-ui.forminator-custom-form[data-design="material"] label.forminator-checkbox input[type="checkbox"]:focus-visible + .forminator-checkbox-box,
form.forminator-ui.forminator-custom-form[data-design="material"] label.forminator-checkbox input[type="checkbox"]:focus-visible ~ .forminator-checkbox-box {
	outline: 2px solid var(--rebs-teal);
	outline-offset: 2px;
}


/* ============================================================
 * 8. Field spacing — let fields breathe
 *
 * Forminator default leaves ~10px between fields. Bump to 24px so
 * the form feels less cramped and aligns with the 24px row gap.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field {
	margin-bottom: 0; /* col already adds 24px */
	position: relative;
}


/* ============================================================
 * 9. Error message styling — keep red but use brand red intensity
 *
 * Forminator emits `.forminator-error-message` below fields. Style
 * it small + red, not the chunky default.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-error-message {
	font-size: 0.875rem;
	color: #c0392b;
	margin-top: 6px;
	font-family: var(--rebs-body-family);
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field.forminator-has_error .forminator-input,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field.forminator-has_error .forminator-textarea {
	border-color: #c0392b;
}


/* ============================================================
 * 10. Textarea label — patrón consistent con inputs text
 * ============================================================
 *
 * Causa raíz (Rebs feedback follow-up 2026-05-27, post 0907a2e):
 *   El intento previo (`translateY(-8px)` + bg blanco + padding) levantaba la
 *   label "Message" para que tape el border-top del textarea (patrón Material
 *   outlined). Visualmente no respira: la label queda pegada al border, sin
 *   margen claro entre baseline de la label y la línea del textarea. Cruza la
 *   línea en lugar de quedar limpia arriba.
 *
 *   El input "Email Address" (section 4) NO tiene este problema porque la
 *   label vive DENTRO del input (translateY(6px)) y el padding-top: 28px del
 *   input (section 3, línea 113) garantiza espacio claro entre label flotante
 *   y el texto tipeado.
 *
 *   El textarea hereda el mismo `padding: 28px 16px 10px` (section 3, línea
 *   113 aplica a `.forminator-input, .forminator-textarea`), así que la
 *   geometría YA SOPORTA el patrón inside-the-box. Solo había que dejar de
 *   pelearle al active state.
 *
 * Fix (Option B — consistent con inputs text):
 *   - text-align: left explícito (override del per-form CSS que setea right).
 *   - Active/filled/focus-within → label hereda el `translateY(6px)` +
 *     `font-size: 0.75rem` + color teal de la sección 4 (no se sobreescribe).
 *     Label queda DENTRO del textarea, arriba, con 22px de aire al texto
 *     tipeado (padding-top 28px - label baseline ≈ 22px). Mismo aspecto que
 *     inputs "Name" / "Email Address".
 *   - Sin background blanco ni padding horizontal: la label está dentro del
 *     box, no cruza ningún border, no necesita "tapar" nada.
 *
 * Scope: SOLO `.forminator-field-textarea` (text-align left).
 * !important: solo para text-align porque per-form CSS dinámico
 * (#forminator-module-<id>) tiene specificity 1,3,0 que gana a (0,4,1).
 *
 * Anti-regresión:
 *   - input name/email/text/select → intactos (no matchean `.forminator-field-textarea`).
 *   - inputs heredan el active state de sección 4 (línea 188-202) sin cambios.
 *   - error state textarea → intacto (color rojo border via sección 9).
 *   - mobile → intacto (no media query).
 *   - /work-with-me/ tiene el mismo Forminator material design → mismo fix aplica.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea > .forminator-field > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea .forminator-field > .forminator-label {
	text-align: left !important;
}


/* ============================================================
 * 10.05 Textarea label — geometría explícita en IDLE
 * ============================================================
 *
 * Causa raíz (follow-up Rebs polish 2026-05-27):
 *   En idle (sin focus, sin valor), el label "Message" hereda el
 *   `translateY(18px)` de sección 4 (línea 167). En un input single-line
 *   eso lo deja visualmente centrado, pero en el textarea — cuyo wrap
 *   del label tiene su propia geometría (ver nota sección 10.1) — el
 *   label queda pegado al border-top, sin aire. Necesita bajar ~14px
 *   para empezar más adentro del textarea y respirar.
 *
 * Fix:
 *   translateY(32px) solo en idle (sin .forminator-is_active /
 *   .forminator-is_filled / :focus-within). En active/filled la
 *   sección 10.1 (siguiente) sigue ganando con translateY(40px).
 *
 * Scope: SOLO `.forminator-field-textarea` en idle. Inputs name/email
 * intactos (no matchean `.forminator-field-textarea`). Active/filled
 * intacto (overridden por 10.1).
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea .forminator-field:not(.forminator-is_active):not(.forminator-is_filled):not(:focus-within) > .forminator-label.forminator-floating--textarea {
	transform: translateY(32px) !important;
}


/* ============================================================
 * 10.1 Textarea label — geometría explícita en active/filled
 * ============================================================
 *
 * Causa raíz (follow-up Rebs 2026-05-27, post 60d9610):
 *   Sección 10 confiaba en que el label del textarea heredara el
 *   `translateY(6px)` de sección 4 (línea 192) y quedara DENTRO del
 *   textarea matcheando al input "Email Address". Medición real del
 *   tester en /contact/ post-deploy:
 *     - Email focus     → labelTop = +18px DENTRO del input. ✅
 *     - Message focus   → labelTop = -17px FUERA, arriba del border-top. ❌
 *
 *   Delta ≈ 35px entre input y textarea con el MISMO transform. Causa:
 *   el wrapper del label en `.forminator-field-textarea` tiene su propia
 *   geometría (padding-top propio del wrap del textarea ≈ 29px, distinta
 *   al wrap del input que es inline). Heredar el mismo transform no
 *   alcanza — el origen Y del label absolute-positioned es distinto.
 *
 * Fix:
 *   Override del transform para el label del textarea en
 *   active/filled/focus-within con un translateY explícito que matchea
 *   visualmente la posición del label del input (+18px desde el top del
 *   textarea). Cálculo: si translateY(6px) deja al label en -17px, y
 *   queremos +18px, sumamos 35px → translateY(41px), redondeado a 40px.
 *
 *   También se anula cualquier `padding-top` que el wrap del label
 *   pueda estar inyectando, para que el cálculo sea predecible.
 *
 * Scope: SOLO `.forminator-field-textarea` (input/select/checkbox intactos).
 *
 * Tuning empírico (si tester reporta desfase tras este fix):
 *   - Label muy alto    → bajar a 36-38px.
 *   - Label muy bajo    → subir a 42-44px (se pisaría con el texto tipeado;
 *                         ajustar también padding-top del textarea abajo).
 *
 * Anti-regresión:
 *   - inputs (Name, Email Address) NO matchean `.forminator-field-textarea`.
 *   - select label NO matchea.
 *   - error state textarea → border via sección 9, intacto.
 *   - mobile → mismo padding-top del textarea, mismo delta esperado.
 * ============================================================ */
/* NOTA selector (fix follow-up 2026-05-27):
   `.forminator-is_active` / `.forminator-is_filled` se agregan al
   `.forminator-field` interno en runtime (Forminator JS), NO al
   `.forminator-field-textarea` (col padre, server-side). El selector
   previo `.forminator-field-textarea.forminator-is_active` pedía AMBAS
   clases en el MISMO elemento → nunca matcheaba → translateY(40px)
   nunca aplicaba → label quedaba en translateY(18px) de sección 4
   (fuera del textarea, arriba del border-top).
   Fix: descendiente `.forminator-field-textarea .forminator-field.forminator-is_active`. */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea .forminator-field.forminator-is_active > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea .forminator-field.forminator-is_filled > .forminator-label,
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-textarea .forminator-field:focus-within > .forminator-label {
	/* !important: per-form CSS dinámico de Forminator usa ID con specificity 1,3,1.
	   Sección 4 (línea 192) ya marca el transform con !important para el caso general;
	   acá lo sobrescribimos solo para el textarea. */
	transform: translateY(40px) !important;
	padding-top: 0 !important;
}

/* Padding-top del textarea: sección 3 (línea 113) setea 28px para inputs+textarea.
   Para el textarea necesitamos más aire porque la label en active queda en
   translateY(40px) (vs translateY(6px) del input). Subimos a 48px para garantizar
   gap visible label↔texto tipeado (~8px de separación). */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-textarea {
	padding-top: 48px !important;
}


/* ============================================================
 * 11. Select2 — extra padding-top para evitar overlap label/valor
 * ============================================================
 *
 * Causa raíz (Rebs feedback 2026-05-27, /work-with-me/ Select2 widget):
 *   La sección 6 setea height 56px del .select2-selection--single y el
 *   rendered text con `padding: 28px 36px 10px 16px`. Pero la label
 *   absolute-positioned (sección 4) flota en translateY(18px) → se
 *   superpone con el placeholder/valor seleccionado del Select2,
 *   especialmente cuando el valor es texto largo de un option.
 *
 * Fix:
 *   - Subir height a 64px (era 56px) → +8px de aire.
 *   - Subir padding-top del rendered text a 32px (era 28px) → el texto
 *     del valor baja 4px más y no se pisa con la label en translate(18px).
 *   - Padding-bottom 12px para mantener centrado vertical.
 *   - Recalibrar arrow del select para centrar vertical con el nuevo height
 *     (top: 50% + transform translateY(-50%) ya estaban → OK con cualquier height).
 *
 * Scope: SOLO `.forminator-select .select2-selection--single`. No afecta
 * name/email/text/textarea inputs ni el dropdown panel.
 *
 * !important: mismo policy que sección 6 (Select2 widget Forminator emite
 * per-form CSS scoped por #forminator-module-<id> con specificity 1,6,0).
 *
 * Anti-regresión:
 *   - placeholder vacio → sigue legible (padding-top 32px > altura label
 *     en 18px translate → no overlap).
 *   - focus state → border teal + halo via sección 6, intacto (no toca
 *     border/box-shadow acá).
 *   - dropdown panel → portal-mounted al <body>, no afectado por height
 *     del wrapper.
 *
 * Si el overlap persiste tras este fix, subir height a 72px + padding-top 36.
 * ============================================================ */
form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single {
	height: 64px !important;
}

form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single .select2-selection__rendered {
	padding-top: 32px !important;
	padding-bottom: 12px !important;
	line-height: 1.4 !important;
}