/** * Rebs Mocks — Form styles for /mock-contact/ (page-id-90452). * * Scope: TODO está prefijado por `body.page-mock-contact` para evitar leakage * a /contact/ (page 46) y /work-with-me/ (page 90444) que NO se tocan. * * QA iteration 3 (2026-05-27) — Cani polish feedback: * - .forminator-row margin-bottom 30→0 (gap excesivo en col derecha * estrecha del Kubio 2-col). * - .forminator-textarea min-height 140→115. * - Select2 single+multi height +8px / padding-top +4px → label * flotante deja de pisarse con placeholder/valor. * * QA iteration 2 (2026-05-27): * * Causa raíz descubierta por audit DOM Playwright: * 1. El container select2 de Forminator NO usa `.select2-container--default` * (clase estándar select2). Forminator monta su propio container con * clases `select2 select2-container forminator-select` y el control * queda en `select.forminator-select2 + .forminator-select .selection * span[role="combobox"]`. Por eso el override anterior NO matcheaba — * selector inválido → chips quedaron en gris #888 del per-form CSS. * * 2. El label flotante lo posiciona `forminator-parity.css` con * `position:absolute; top:0` a specificity 0,5,3 (sin ID). Ganamos * con `body` prefix (sigue 0,5,4) + selector chained idéntico al de * Forminator para forzar match real. * * Estrategia: * - Override chips con MISMO selector base que Forminator core usa * (`+ .forminator-select .selection span[role="combobox"]`) + body * prefix → specificity 0,5,5 vs core 0,4,4. Ganamos limpio. * - Reservamos padding-top en el control para que el label flotante * no se monte sobre los chips. * - Bajamos el label dentro del padding-top reservado (top: 8px). * * Scope: form.forminator-ui[data-design="material"] inside /mock-contact/ * only (enqueued conditionally by rebs-mocks.php). Single selects de * /work-with-me/ NO se tocan (usan modo single, otro DOM). */ /* ========================================================================= 1) CONTROL — padding-top reservado para el label, wrap chips ========================================================================= */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple { min-height: 56px !important; height: auto !important; border: 1px solid var(--rebs-border-color, rgba(84, 89, 122, 0.4)) !important; border-radius: 0 !important; /* Top padding reserva espacio al label flotante encima de los chips. */ padding: 32px 12px 10px 12px !important; background: transparent !important; box-sizing: border-box !important; } /* Inner UL — flex wrap para que los chips no overflow. */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple .select2-selection__rendered { padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; width: 100% !important; list-style: none !important; } /* ========================================================================= 2) CHIPS — brand mint con texto dark ========================================================================= */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple .select2-selection__choice { background: var(--rebs-mint, #0cdfc6) !important; background-color: var(--rebs-mint, #0cdfc6) !important; color: var(--rebs-text, #262e38) !important; border: none !important; border-radius: 4px !important; padding: 4px 10px !important; margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center !important; max-width: 100% !important; } /* El display interno hereda color del chip (Forminator a veces fuerza white). */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple .select2-selection__choice .select2-selection__choice__display { color: var(--rebs-text, #262e38) !important; background: transparent !important; } /* Remove (X) — dark sobre mint. */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple .select2-selection__choice__remove { color: var(--rebs-text, #262e38) !important; margin-right: 6px !important; font-weight: 700 !important; border: none !important; background: transparent !important; } /* Input inline de búsqueda — match Rebs body. */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple .select2-search--inline .select2-search__field { font-family: var(--rebs-body-family, "Poppins", sans-serif) !important; font-size: 14px !important; margin: 0 !important; padding: 0 !important; min-height: 24px !important; } /* ========================================================================= 3) LABEL — bajamos al padding-top reservado del control Forminator-parity.css pone `top: 0` con specificity 0,5,3. Body prefix nos da 0,5,4 — gana. ========================================================================= */ body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-field-select .forminator-field .forminator-label { position: absolute !important; top: 8px !important; left: 14px !important; font-size: 12px !important; line-height: 1.2 !important; color: var(--rebs-text-muted, #54597a) !important; background: transparent !important; pointer-events: none !important; max-width: calc(100% - 28px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================= 4) ROW GAP — collapse el margin-bottom 30px que Forminator mete en @media (min-width: 783px). Col derecha del Kubio 2-col es estrecha y 30px entre rows queda excesivo. ========================================================================= */ body.page-mock-contact .forminator-ui.forminator-custom-form[data-grid="open"] .forminator-row:not(:last-child), body.page-mock-contact .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-row:not(:last-child) { margin-bottom: 0 !important; } /* ========================================================================= 5) TEXTAREAS — bajar min-height ~25px (140 → 115). Cubrimos var custom + property por si el theme aplica una u otra. ========================================================================= */ body.page-mock-contact .forminator-ui .forminator-textarea, body.page-mock-contact form.forminator-ui textarea.forminator-textarea { height: 115px !important; min-height: 115px !important; --forminator-textarea-min-height: 115px !important; resize: vertical; } /* ========================================================================= 6) SELECT2 SINGLE — espacio claro entre label flotante y placeholder/valor. Igualamos el patrón de inputs text: padding-top reservado para el label. ========================================================================= */ body.page-mock-contact form.forminator-ui[data-design="material"] .select2-container--default .select2-selection--single, body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] .select2-container .select2-selection.select2-selection--single, body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single { height: 78px !important; min-height: 78px !important; padding: 32px 12px 10px 12px !important; } body.page-mock-contact form.forminator-ui[data-design="material"] .select2-container--default .select2-selection--single .select2-selection__rendered, body.page-mock-contact form.forminator-ui.forminator-custom-form[data-design="material"] .forminator-select .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 1.4 !important; } /* ========================================================================= 7) SELECT2 MULTI — match height single + más padding-top para que los chips (cuando existen) no toquen el label flotante. Esto refina (1) arriba: subimos min-height 56→64 y padding-top 28→32. ========================================================================= */ body.page-mock-contact form.forminator-ui[data-design="material"] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--multiple, body.page-mock-contact form.forminator-ui[data-design="material"] .forminator-select + .forminator-select span[role="combobox"].select2-selection--multiple { min-height: 78px !important; padding-top: 32px !important; padding-bottom: 10px !important; } /* ========================================================================= 8) SELECT LABELS — top -2px estable sin transition (Cani feedback 2026-05-27). Aplica SOLO a labels de fields con