/** * BIT Elementor Form Responsive — CSS estrutural mínimo * * Escopo: .elementor-widget-form.bit-form-responsive * * Filosofia: CSS faz APENAS layout estrutural (grid 3 colunas em mobile, * esconder reCAPTCHA). Cores, bordas, backgrounds, paddings, fonts: * tudo controlado pelos settings nativos do widget Elementor (responsivos * por device via switcher do editor). * * Author: Daniel Cambría / Bureau de Tecnologia Ltda. * Version: 1.4.2 */ /* Esconder reCAPTCHA badge globalmente (não-visual, mantém o reCAPTCHA ativo). * O Google injeta .grecaptcha-badge em position:fixed no , fora de * qualquer widget — por isso o seletor DEVE ser global (não escopado ao form). */ .grecaptcha-badge { visibility: hidden !important; } /* ========================================================================== MOBILE (≤767px) — layout 2 colunas grid: linha 1: nome | email linha 2: região | setor linha 3: ENVIAR (largura total) ========================================================================== */ @media (max-width: 767px) { .elementor-widget-form.bit-form-responsive .elementor-form-fields-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; } /* reCAPTCHA invisível não ocupa coluna do grid */ .elementor-widget-form.bit-form-responsive .elementor-field-type-recaptcha_v3, .elementor-widget-form.bit-form-responsive .elementor-field-type-recaptcha_v3 .elementor-field { display: none; } /* Submit ocupa a linha inteira (3ª linha, após os 4 campos em 2x2) */ .elementor-widget-form.bit-form-responsive .elementor-field-type-submit { grid-column: 1 / -1; } /* Bordas arredondadas em mobile herdam o estilo do desktop (pill 28px) — NÃO forçamos border-radius: 0 (removido em v1.4.1 a pedido). */ /* Altura uniforme dos 3 elementos (input/select/button) no grid mobile. Inputs nativos têm padding interno que varia por tipo (10px input, 10px 20px 10px 16px select). Forçamos box-sizing + height para alinhamento visual perfeito. */ .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-field:not(.elementor-select-wrapper), .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-select-wrapper, .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-select-wrapper select, .elementor-widget-form.bit-form-responsive .elementor-button[type="submit"] { height: 42px !important; box-sizing: border-box !important; } } /* ========================================================================== Editor Elementor — espelha o layout mobile quando user escolhe viewport mobile. (Elementor simula via data-attr, não dispara @media do browser real.) ========================================================================== */ body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-form-fields-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; } body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-type-recaptcha_v3, body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-type-recaptcha_v3 .elementor-field { display: none; } body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-type-submit { grid-column: 1 / -1; } body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-field:not(.elementor-select-wrapper), body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-select-wrapper, body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-field-group .elementor-select-wrapper select, body[data-elementor-device-mode="mobile"] .elementor-widget-form.bit-form-responsive .elementor-button[type="submit"] { height: 42px !important; box-sizing: border-box !important; }