/* ========================================================================== Carrinho e checkout em blocos (WooCommerce Blocks) Estes blocos são renderizados pelo React do WooCommerce e trazem a própria folha de estilo, pensada para tema claro: campos com fundo branco e rótulos sem cor definida. Como o tema define texto quase branco no , o rótulo herdava essa cor e sumia sobre o fundo branco — o campo parecia vazio. Aqui o conjunto é trazido para o visual escuro do site. O `!important` é necessário porque a folha dos blocos carrega depois e usa seletores longos. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Títulos e textos de apoio -------------------------------------------------------------------------- */ .wc-block-checkout, .wc-block-cart { color: var(--text); } .wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-cart__main-title, .wp-block-woocommerce-cart .wc-block-cart__totals-title { color: var(--text) !important; font-family: var(--font) !important; letter-spacing: -.01em; } .wc-block-components-checkout-step__description, .wc-block-components-checkout-step__heading-content { color: var(--muted) !important; } .wc-block-components-checkout-step { border-color: var(--border-soft) !important; } /* -------------------------------------------------------------------------- 2. Campos de formulário -------------------------------------------------------------------------- */ /* Rede de segurança: o checkout em blocos é montado por JavaScript e pode trazer campos com classes não previstas aqui. Esta regra ampla garante que nenhum campo fique com fundo branco e rótulo claro por cima. Não atinge caixas de seleção nem o iframe do gateway. */ .wc-block-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .wc-block-checkout select, .wc-block-checkout textarea, .wc-block-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .wc-block-cart select, .wc-block-cart textarea, .wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .wp-block-woocommerce-checkout select, .wp-block-woocommerce-checkout textarea { background-color: rgba(255, 255, 255, .05) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text) !important; font-family: var(--font) !important; } .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="tel"], .wc-block-components-text-input input[type="number"], .wc-block-components-text-input input[type="password"], .wc-block-components-textarea, .wc-block-components-combobox-control input.components-combobox-control__input, .wc-block-components-select .wc-block-components-select__container, .wc-block-components-select select, .wc-block-components-address-form input, .wc-block-components-address-form select, .wc-block-components-form input[type="text"], .wc-block-components-form input[type="email"], .wc-block-components-form input[type="tel"] { background-color: rgba(255, 255, 255, .05) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text) !important; font-family: var(--font) !important; box-shadow: none !important; } /* O rótulo flutuante fica dentro do campo: sem cor legível, o campo parece vazio e o cliente não sabe o que preencher. */ .wc-block-components-text-input label, .wc-block-components-combobox-control label, .wc-block-components-select__label, .wc-block-components-address-form label, .wc-block-components-textarea + label, .wc-block-components-checkout-step .wc-block-components-text-input label { color: var(--muted) !important; font-family: var(--font) !important; } /* Rótulo recolhido (campo preenchido ou em foco). */ .wc-block-components-text-input.is-active label, .wc-block-components-combobox-control.is-active label { color: var(--purple-bright) !important; } .wc-block-components-text-input input:focus, .wc-block-components-combobox-control input:focus, .wc-block-components-select select:focus, .wc-block-components-textarea:focus { border-color: var(--purple) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, .18) !important; } .wc-block-components-text-input input::placeholder, .wc-block-components-textarea::placeholder { color: var(--muted-dim) !important; } /* Atenção ao nome: o campo de país/estado usa `wc-blocks-components-select` (com "blockS"), diferente do `wc-block-components-*` dos demais campos. O WooCommerce crava `color:#2b2d2f` nesse (país, estado) é desenhada pelo sistema. Sem cor própria na