/* Cache hash: 21655340f0958ab7742f6666ad0b0b7b */ /* Estilo para o badge de processamento */ #transaction-status-message { all: initial !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; background-color: #f0f7ff !important; border-radius: 20px !important; padding: 6px 12px !important; margin: 10px 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; width: auto !important; } /* Container interno */ #transaction-status-message > div { display: flex !important; align-items: center !important; width: auto !important; padding: 0 !important; margin: 0 !important; } /* Esconder a imagem original */ #transaction-status-message img { display: none !important; } /* Remover completamente o texto original */ #transaction-status-message p { display: none !important; } /* Criar um novo container para o conteúdo */ #transaction-status-message > div::after { content: "" !important; display: flex !important; align-items: center !important; gap: 8px !important; } /* Ícone de carregamento animado */ #transaction-status-message > div::before { content: "" !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; border: 2px solid #e6e6e6 !important; border-top-color: #4285F4 !important; animation: spinner 1s infinite linear !important; margin-right: 8px !important; flex-shrink: 0 !important; } /* Texto "Processando" */ #transaction-status-message > div::after { content: "Processando" !important; font-size: 14px !important; color: #4285F4 !important; font-weight: 500 !important; } /* Animação do spinner */ @keyframes spinner { to { transform: rotate(360deg); } } /* Estilo para o botão de copiar código PIX */ .woocommerce-order .mp-details-pix-button { width: 100% !important; max-width: 350px !important; padding: 12px 20px !important; background-color: #32CD32 !important; color: white !important; border: none !important; border-radius: 4px !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; } /* Efeito de onda ao clicar no botão */ .woocommerce-order .mp-details-pix-button::after { content: "" !important; display: block !important; position: absolute !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; pointer-events: none !important; background-image: radial-gradient(circle, #fff 10%, transparent 10.01%) !important; background-repeat: no-repeat !important; background-position: 50% !important; transform: scale(10, 10) !important; opacity: 0 !important; transition: transform 0.5s, opacity 1s !important; } .woocommerce-order .mp-details-pix-button:active::after { transform: scale(0, 0) !important; opacity: 0.3 !important; transition: 0s !important; } /* Overlay de feedback */ .pix-copy-feedback { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: rgba(0, 0, 0, 0.2) !important; z-index: 9999 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s !important; } /* Container do feedback */ .pix-copy-feedback-container { background-color: white !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; transform: scale(0.9) !important; transition: transform 0.3s !important; max-width: 90% !important; width: 300px !important; } /* Ícone de check corrigido */ .check-icon-container { width: 60px !important; height: 60px !important; background-color: #f8f8f8 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 15px !important; } .check-icon { color: #32CD32 !important; font-size: 30px !important; animation: check-fade-in 0.3s ease !important; } @keyframes check-fade-in { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } /* Texto do feedback */ .pix-copy-feedback-text { font-size: 16px !important; color: #333 !important; margin: 0 !important; text-align: center !important; } /* Mostrar o feedback */ .pix-copy-feedback.show { opacity: 1 !important; visibility: visible !important; } .pix-copy-feedback.show .pix-copy-feedback-container { transform: scale(1) !important; } /* ========================================================================== RESET E CONFIGURAÇÕES GERAIS ========================================================================== */ /* Reset básico para métodos de pagamento */ ul.wc_payment_methods.payment_methods.methods { border-radius: 8px !important; } /* Container principal do checkout */ .wcf-embed-checkout-form .woocommerce-checkout #payment { border-radius: 8px !important; background-color: #fff; padding: 23px 24px 24px 24px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-top: 20px; } @media (max-width: 600px) { /* Container principal do checkout */ .wcf-embed-checkout-form .woocommerce-checkout #payment { padding: 19px 16px 8px 16px; } } @media (max-width: 600px) { .elementor-364 .elementor-element.elementor-element-5e14546 .black-friday-banner { border-radius: 4px !important; } } .mp-checkout-pix-container { padding: 10px 14px !important; } @media (max-width: 600px) { .mp-checkout-pix-container { padding: 0px 0px !important; } } @media (max-width: 600px) { div#cell-error-message { margin-left: -75px !important; } } @media (max-width: 600px) { div#cpf-error-message { margin-left: -175px !important; } } .elementor-765 .elementor-element.elementor-element-ca1b9cc { box-shadow: none !important; } @media (max-width: 600px) { .elementor-364 .elementor-element.elementor-element-5e14546 .black-friday-banner { background-color: #dc2626; padding: 13px 25px 13px 25px !important; } } /* ------------------------------------------ WooCommerce Checkout - Loader Minimalista ------------------------------------------ */ /* Overlay do WooCommerce (blockUI) no checkout */ body.woocommerce-checkout .blockUI.blockOverlay, body.page-template-cartflows-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.65) !important; /* translúcido, não esconde totalmente */ backdrop-filter: blur(2px); z-index: 99999 !important; } /* Esconde o spinner padrão do WooCommerce */ body.woocommerce-checkout .blockUI.blockOverlay::before, body.page-template-cartflows-checkout .blockUI.blockOverlay::before { display: none !important; } /* Novo spinner minimalista (anel giratório) */ body.woocommerce-checkout .blockUI.blockOverlay::after, body.page-template-cartflows-checkout .blockUI.blockOverlay::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 9999px; border: 4px solid #29b46c; /* anel claro */ border-top-color: #f5f5f5; /* cor do destaque do anel (mude aqui para sua cor de marca) */ box-shadow: 0 1px 6px rgba(0,0,0,.06); animation: wc-spin 0.8s linear infinite, wc-pulse 1.6s ease-in-out infinite alternate; } /* Animações do spinner */ @keyframes wc-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes wc-pulse { from { opacity: .85; } to { opacity: 1; } } /* Compatibilidade: WooCommerce Blocks (Checkout em blocos) */ .wc-block-components-spinner, .wc-block-components-spinner__content { position: relative; } .wc-block-components-spinner svg { display: none !important; /* esconde spinner padrão em SVG dos blocos */ } .wc-block-components-spinner::after, .wc-block-components-spinner__content::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 9999px; border: 2.5px solid #e5e7eb; border-top-color: #111827; animation: wc-spin 0.8s linear infinite, wc-pulse 1.6s ease-in-out infinite alternate; } .wcf-customer-info-main-wrapper { background: #fff; padding-top: 10px !important; padding-right: 17px !important; padding-left: 17px !important; padding-bottom: 40px!important; border-radius: 10px !important; } .cart-subtotal, th.product-total, th.product-name { display: none; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table { box-shadow: none !important; } #order_review_heading { background: #00E4A0 !important; margin: 0px !important; padding-left: 20px !important; padding-top: 10px !important; padding-bottom: 10px !important; border-top-left-radius: .5rem; border-top-right-radius: .5rem; } .product-quantity{ display: none !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods { border: 1px solid #DEDEDE !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box { border: 1px solid #DEDEDE !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not( .woocommerce-info ) { border: 0px solid #414249 !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-order-review-toggle { background-color: #00E4A0 !important; color: #fff !important; border-top-left-radius: .5rem; border-top-right-radius: .5rem; } @media only screen and (max-width: 520px) { /* Configuracao OrderBump _ Celular*/ .wcf-bump-order-wrap.wcf-after-payment.wcf-ob-column-100 .wcf-bump-order-offer-content-left { max-width: 70% !important; padding: 0px !important; align-items: center; } .wcf-bump-order-style-2 .wcf-bump-order-offer-content-left img { border-radius: 15px !important; } .wcf-bump-order-wrap { padding: 0px !important; } .wcf-bump-order-wrap .wcf-bump-order-offer-content-left img { padding-top: 10px !important; } .wcf-content-container,.wcf-bump-order-offer-content-left.wcf-bump-order-image { margin: auto !important; } .wcf-bump-order-style-2 .wcf-bump-order-offer, .wcf-bump-order-desc, .wcf-bump-order-field-wrap { text-align: center; } } .andes-dropdown__trigger { align-items: center !important; background-color: var(--andes-white) !important; border: none !important; border-radius: var(--andes-radius-06) !important; box-shadow: 0 0 0 1px var(--andes-gray-250) !important; color: var(--andes-gray-900) !important; cursor: pointer !important; display: flex !important; font-size: var(--andes-font-size-16) !important; font-weight: 400 !important; /* Texto à esquerda e seta à direita, sem espaço sobrando */ justify-content: space-between !important; line-height: 20px !important; margin: 0 !important; min-height: var(--andes-spacing-48) !important; outline: none !important; padding: 0 !important; text-align: left !important; transition: box-shadow .2s, color .2s !important; width: 100% !important; } /* Zera qualquer espaçamento do texto selecionado/placeholder */ .andes-dropdown__trigger .andes-dropdown__selected-text { margin-left: 0 !important; padding-left: 13px !important; flex: 1 1 auto !important; min-width: 0 !important; font-size: 14px !important; } @media (min-width: 1366px) { .andes-dropdown__trigger .andes-dropdown__selected-text { font-size: 16px !important; } } /* Garante a seta alinhada à direita */ .andes-dropdown__trigger .andes-dropdown__arrow { margin-left: auto !important; } /* ========================================================================== CAMPOS DE ENTRADA - CORES E VISIBILIDADE ========================================================================== */ /* Cores dos campos de entrada */ input#billing_first_name, input#billing_cpf_cnpj, input#billing_cellphone, input#billing_email { color: black; } /* ========================================================================== MENSAGENS DE ERRO - OCULTAÇÃO ========================================================================== */ /* Oculta erros de campos obrigatórios */ span.wcf-field-required-error { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; /* Preserva a funcionalidade, mas oculta visualmente */ } /* Oculta div de documento do Mercado Pago */ div#mp-doc-div { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; /* Preserva a funcionalidade, mas oculta visualmente */ } /* ========================================================================== CONTAINERS E WRAPPERS ========================================================================== */ /* Container de informações do cliente */ .wcf-customer-info-main-wrapper { border: 1px solid #73737338 !important; background: #fff; padding-top: 2px !important; padding-bottom: 11px !important; } @media (max-width: 600px) { .wcf-customer-info-main-wrapper { padding-top: 0px !important; padding-bottom: 6px !important; } } /* Titulo espaçamento*/ .woocommerce-billing-fields h3#billing_fields_heading { margin-top: -8px !important; } @media (max-width: 600px) { .woocommerce-billing-fields h3#billing_fields_heading { margin-top: -10px !important; } } /* Container customizado do Mercado Pago */ .mp-checkout-custom-container { padding: 0px !important; } /* Container de parcelas */ div#mp-checkout-custom-installments { padding: 0px !important; } /* ========================================================================== MÉTODOS DE PAGAMENTO - ESTILOS GERAIS ========================================================================== */ /* Borda dos métodos de pagamento */ .elementor-364 .elementor-element.elementor-element-2faaddc4 .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods { border: 1px solid #bdbdbd5c !important; } /* Remove borda da caixa de pagamento */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box { border: none !important; } /* Padding dos métodos de pagamento */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not( .woocommerce-info ) { padding: 14px 16px 0 16px !important; } /* ========================================================================== MÉTODO PIX - ESTILOS CUSTOMIZADOS ========================================================================== */ /* Reset básico para o container LI do PIX */ li.wc_payment_method.payment_method_woo-mercado-pago-pix { background: none !important; border: none !important; padding: 0 !important; margin: 0 0 20px 0 !important; list-style: none !important; } /* Esconde o radio button original do PIX */ li.payment_method_woo-mercado-pago-pix input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; } /* Estilo do label (botão de seleção PIX) */ li.payment_method_woo-mercado-pago-pix label { display: flex !important; align-items: center !important; width: 100% !important; padding: 14px 22px !important; border: 1px solid #dee2e6 !important; border-radius: 8px !important; cursor: pointer; background-color: #ffffff !important; font-weight: 500 !important; font-size: 1rem !important; color: #495057 !important; transition: all 0.2s ease-in-out !important; box-sizing: border-box !important; margin-bottom: 15px !important; } /* Ícone dentro do label do PIX */ li.payment_method_woo-mercado-pago-pix label img { width: 22px !important; height: 22px !important; margin-right: 12px !important; flex-shrink: 0; } /* Label do PIX quando selecionado */ li.payment_method_woo-mercado-pago-pix input[type="radio"]:checked + label { border-color: #3BAE7E !important; border-style: solid !important; background-color: #e8f5e99e !important; } /* Caixa de detalhes do pagamento PIX */ .payment_box.payment_method_woo-mercado-pago-pix { padding: 35px 25px !important; background-color: #f8f9fa !important; border: 1px solid #e9ecef !important; border-radius: 8px !important; margin-top: 0 !important; text-align: center !important; clear: both !important; position: relative; } /* Container interno do PIX */ .payment_box.payment_method_woo-mercado-pago-pix .mp-pix-template-container { border: none !important; padding: 0 !important; background-color: transparent !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* SVG principal do PIX */ .payment_box.payment_method_woo-mercado-pago-pix .mp-pix-template-image { content: url('data:image/svg+xml;utf8,') !important; width: 65px !important; height: 65px !important; display: block !important; margin: 0 auto 25px auto !important; padding: 0 !important; background: none !important; border: none !important; } /* Título principal na caixa PIX */ .payment_box.payment_method_woo-mercado-pago-pix .mp-pix-template-title { font-weight: 600 !important; color: #343a40 !important; margin: 0 0 0px 0 !important; line-height: 1.4 !important; } /* Subtítulo/descrição na caixa PIX */ .payment_box.payment_method_woo-mercado-pago-pix .mp-pix-template-subtitle { font-size: 1em !important; color: #495057 !important; line-height: 1.6 !important; margin: 0 auto !important; max-width: 90% !important; } /* Oculta termos e condições do PIX */ .payment_box.payment_method_woo-mercado-pago-pix .mp-checkout-pix-terms-and-conditions { display: none !important; } /* ========================================================================== MÉTODO CUSTOM - ESTILOS ========================================================================== */ /* Label do método custom quando selecionado */ li.payment_method_woo-mercado-pago-custom input[type="radio"]:checked + label { border-color: #3BAE7E !important; border-style: solid !important; background-color: #e8f5e99e !important; } /* ========================================================================== ELEMENTOS DO MERCADO PAGO - VISIBILIDADE ========================================================================== */ /* Garante que inputs do Mercado Pago permaneçam visíveis */ .mp-input-table-container, .mp-input-table-list, .mp-input-table-bank-interest-container { clip-path: none !important; clip: auto !important; } /* ========================================================================== AVISO DE PAGAMENTO SEGURO ========================================================================== */ /* Estilo do aviso de pagamento seguro */ .secure-payment-notice { display: flex; align-items: center; color: #3BAE7E; font-size: 0.9em; margin-top: 15px; gap: 8px; } /* Ícone do aviso de pagamento seguro */ .secure-payment-notice svg { width: 16px; height: 16px; flex-shrink: 0; } /* Texto do aviso de pagamento seguro */ .secure-payment-notice span { line-height: 1.4; } /* ========================================================================== TABELA DE PEDIDO ========================================================================== */ /* Estilo da tabela de revisão do pedido */ table.shop_table.woocommerce-checkout-review-order-table { background-color: #f1f9f196 !important; border-radius: 6px !important; } /* ========================================================================== TÍTULOS E CABEÇALHOS ========================================================================== */ /* Margens dos títulos do checkout */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout h3, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout #ship-to-different-address, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout #order_review_heading { margin: 22px 0 0px !important; } /* ========================================================================== RESPONSIVIDADE - DESKTOP (768px+) ========================================================================== */ @media only screen and (min-width: 768px) { /* Padding dos métodos de pagamento */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not( .woocommerce-info ) { padding: 0px 24px 0 24px !important; } /* Padding das linhas do cartão custom */ .mp-checkout-custom-card-form .mp-checkout-custom-card-row { padding-bottom: 14px !important; } /* Oculta div de documento do Mercado Pago */ div#mp-doc-div { margin-top: -22px; position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; visibility: hidden !important; } /* Oculta informação do código de segurança */ p#mp-security-code-info { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; } /* Container PIX */ .mp-pix-template-container { padding-bottom: 16px !important; padding-top: 0px !important; } } /* ========================================================================== RESPONSIVIDADE - TABLET (max-width: 768px) ========================================================================== */ @media only screen and (max-width: 768px) { /* Padding do checkout no mobile */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce { padding: 0 0px !important; } } /* ========================================================================== RESPONSIVIDADE - MOBILE (max-width: 600px) ========================================================================== */ @media (max-width: 600px) { /* Padding da seção de pagamento */ #payment { padding: 0px; } /* Padding do container custom */ .mp-checkout-custom-container { padding: 0px !important; } /* Padding dos métodos de pagamento */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not( .woocommerce-info ) { padding: 15px 16px 0 16px !important; } } /* ========================================================================== ACORDEÃO - MOBILE ========================================================================== */ @media (max-width: 768px) { /* Remove borda inferior do acordeão ativo */ .accordion-wrapper.active .accordion-header { border-bottom-color: transparent !important; } /* Padding do cabeçalho do acordeão */ .accordion-header { padding: 0px !important; } } /* ========================================================================== ELEMENTOR - SOBRESCRITAS ESPECÍFICAS ========================================================================== */ /* Remove borda dos métodos de pagamento no Elementor */ .elementor-364 .elementor-element.elementor-element-2faaddc4 .wcf-embed-checkout-form .woocommerce-checkout #payment ul.payment_methods { border: none !important; } /* ======================================== RESET E CONFIGURAÇÕES GERAIS ======================================== */ /* Reset de estilos do CartFlows */ .wcf-collapsed-order-review-section { display: none !important; } /* ======================================== ACCORDION WRAPPER PRINCIPAL ======================================== */ .accordion-wrapper { background: white; border-radius: 0px 0px 8px 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; padding: 11px 24px 11px 24px; display: block !important; width: 100% !important; box-sizing: border-box; } /* ======================================== HEADER DO ACCORDION ======================================== */ .accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 8px 0; width: 100%; transition: border-color 0.3s ease; } .accordion-wrapper.active .accordion-header { border-bottom-color: #e0e0e0; } .header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; } .header-left { display: flex; align-items: center; gap: 8px !important; } @media (max-width: 600px) { .header-left { gap: 2px !important; } } @media (max-width: 600px) { svg.chevron-icon { margin-left: 0px !important; } } .header-right { display: flex; align-items: center; gap: 0px; } /* Badge de cupom no header (desktop) */ .header-right .coupon-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: #eafaf5; border: 1px solid rgba(42, 187, 172, 0.22); color: #0f5132; font-size: 11px; font-weight: 600; margin-right: 8px; white-space: nowrap; } .header-right .coupon-badge .coupon-amount { color: #0f5132; font-weight: 600; margin-left: 4px; } /* Textos do header */ .header-left span { color: black; font-weight: 600; } @media (min-width: 1366px) { span.total-amount { margin-right: 0px !important; } } .header-right span.total-amount { color: black; font-weight: 600; margin-right: 8px; } /* ======================================== ÍCONES DO ACCORDION ======================================== */ .cart-icon { stroke: currentColor; } .chevron-icon { transition: transform 0.3s ease; margin-left: 12px; } .accordion-wrapper.active .chevron-icon { transform: rotate(180deg); } /* ======================================== CONTEÚDO DO ACCORDION ======================================== */ .accordion-content { display: none; padding-top: 16px; width: 100%; overflow: hidden; } .accordion-wrapper.active .accordion-content { display: block !important; } /* ======================================== ESTILOS DA TABELA ======================================== */ .shop_table { width: 100%; border-collapse: collapse; margin-top: 10px; } table.shop_table.woocommerce-checkout-review-order-table.cartflows_table { background: #f9fafb; border-radius: 8px; } .cartflows_table thead { background-color: #f8f9fa; } .cartflows_table th, .cartflows_table td { padding: 12px; text-align: left; } a.wcf-remove-coupon { color: #ff2e2e !important; font-size: 13px !important; } /* Mobile: padding lateral de 16px no resumo do pedido */ @media (max-width: 600px) { .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .accordion-content > table.shop_table.woocommerce-checkout-review-order-table, .accordion-wrapper.mobile-only .accordion-content > table.shop_table.woocommerce-checkout-review-order-table { box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; } } /* ======================================== PRODUTOS E IMAGENS ======================================== */ .wcf-product-image { display: flex; align-items: center; gap: 12px; } .wcf-product-thumbnail { flex-shrink: 0; } .wcf-product-thumbnail img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; } .wcf-product-name { margin-left: 0; padding-left: 0; } td.product-name { white-space: normal; } /* Checkout (mobile): reduzir espaços no resumo do pedido */ @media (max-width: 600px) { .accordion-content .shop_table.woocommerce-checkout-review-order-table { margin: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; } .accordion-content .shop_table.woocommerce-checkout-review-order-table td, .accordion-content .shop_table.woocommerce-checkout-review-order-table th { padding: 12px 0px !important; line-height: 1.25 !important; } .accordion-content .cart_item .wcf-product-image { margin: 0 !important; gap: 8px !important; } .accordion-content .wcf-product-name { font-size: 14px !important; } /* Manter '-' e valor na mesma linha */ .accordion-content .cart-discount td { white-space: nowrap !important; } .accordion-content .cart-discount td .woocommerce-Price-amount { display: inline !important; } /* Quebrar o link Remover para a linha de baixo */ .accordion-content .cart-discount td .wcf-remove-coupon { display: block !important; margin-top: 2px !important; white-space: normal !important; } .accordion-content tfoot th, .accordion-content tfoot td { padding-top: 16px !important; padding-bottom: 16px !important; } .accordion-content .shop_table.woocommerce-checkout-review-order-table .order-total th, .accordion-content .shop_table.woocommerce-checkout-review-order-table .order-total td { padding-top: 16px !important; padding-bottom: 24px !important; line-height: 1.1 !important; } .accordion-content .shop_table.woocommerce-checkout-review-order-table .order-total td strong { margin: 0 !important; line-height: 1.1 !important; display: inline-block !important; } .accordion-content .shop_table.woocommerce-checkout-review-order-table .order-total td .amount { line-height: 1.1 !important; } } .accordion-content .cart-discount th, .accordion-content .cart-discount td { padding-top: 16px !important; padding-bottom: 16px !important; } @media (max-width: 768px) { .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table { padding: 16px 0 0 0 !important; } .wcf-embed-checkout-form .woocommerce .wcf-product-image .wcf-product-thumbnail { margin-right: 8px !important; } } @media (max-width: 600px) { .accordion-content .cart_item .wcf-product-image { margin: 0 !important; gap: 0px !important; } } /* Remove espaços extras que podem estar vindo do   */ td.product-name .wcf-product-image + strong.product-quantity { margin-left: 10px; } /* ======================================== RESPONSIVIDADE ======================================== */ /* Mobile (até 768px) */ @media (max-width: 768px) { .accordion-wrapper.mobile-only { display: block !important; margin-bottom: 16px !important; border-radius: 8px 8px 0px 0px !important; margin: 0 !important; border: 1px solid #73737338 !important; border-bottom: none !important; /* Padrão quando NÃO há cupom */ padding: 19px 16px 19px 16px !important; } /* Quando existir cupom aplicado no mobile */ .accordion-wrapper.mobile-only.has-coupon { padding: 16px 16px 16px 16px !important; } /* Ajustar o container de informações do cliente para conectar com o acordeon */ .wcf-customer-info-main-wrapper { border-radius: 0px 0px 8px 8px !important; margin-top: 0 !important; } .wcf-embed-checkout-form table.shop_table thead tr th:nth-child(2), .wcf-embed-checkout-form table.shop_table tbody tr td:nth-child(2), .wcf-embed-checkout-form table.shop_table tfoot tr td:nth-child(2) { padding-left: 30px !important; } .wcf-product-image { gap: 0px !important; } .wcf-product-thumbnail img { width: 48px !important; height: 48px !important; } table.shop_table.woocommerce-checkout-review-order-table.cartflows_table { background: #f9fafb; border-radius: 4px !important; } h3#billing_fields_heading { margin-top: -0.1px !important; } /* Garantir visibilidade do wrapper */ #order_review, .woocommerce-checkout-review-order-table { display: block !important; width: 100% !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table { padding: 15px 0 0 0 !important; border-radius: 8px !important; } /* Container de cupom no header (mobile) */ .accordion-header .header-content { flex-wrap: wrap; align-items: flex-start; } .accordion-header .header-left { order: 2; } .accordion-header .header-right { order: 3; } .mobile-coupon-container { order: 1; width: 100%; display: none !important; text-align: initial; margin: 2px 0 12px 0; } .mobile-coupon-container .coupon-badge { display: flex; align-items: baseline; justify-content: space-between; width: 100%; gap: 8px; /* simplifica visual no mobile */ padding: 0; background: transparent; border: 0; color: #10b981; font-size: 13px; font-weight: 400; white-space: nowrap; } .mobile-coupon-container .coupon-amount { color: #10b981; font-weight: 500; margin-left: 0; } /* Toast de cupom (mobile) */ .coupon-toast { position: fixed; top: 12px; right: 12px; z-index: 9999; background: #10b981; color: #ffffff; padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); display: none; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; transform: translateX(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; } .coupon-toast .label { opacity: 0.95; font-weight: 500; } .coupon-toast .amount { font-weight: 700; } .coupon-toast.show { display: flex; transform: translateX(0); opacity: 1; } } /* Desktop (769px e acima) */ @media (min-width: 769px) { .accordion-wrapper.mobile-only { display: none !important; } .shop_table:not(.order_details) { display: table !important; } .wcf-product-name { margin-left: -28px !important; } table.shop_table.woocommerce-checkout-review-order-table { padding-right: 20px !important; padding-left: 20px !important; } } /* ======================================== COMPATIBILIDADE COM WOOCOMMERCE ======================================== */ /* Ajustes para o container principal */ form.checkout { width: 100% !important; max-width: 100% !important; } /* Estilos específicos do Mercado Pago */ li.payment_method_woo-mercado-pago-pix label { color: #000000 !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box { border-top: none !important; } /* Estilos do PIX */ pix-template, .mp-pix-template-container, .mp-pix-template-title, .mp-pix-template-subtitle { font-family: "Inter", sans-serif !important; } p.mp-pix-template-title { font-weight: 600 !important; } /* ======================================== BOTÃO DE FINALIZAR COMPRA ======================================== */ #place_order { display: flex !important; align-items: center !important; justify-content: center !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 15px !important; gap: 8px !important; padding: 16px 24px !important; width: 100% !important; border-radius: 8px !important; } /* ======================================== CAMPOS DE FORMULÁRIO ======================================== */ #billing_email { transition: all 0.3s ease; } #billing_email:focus { outline: none; border-color: #2abbac; box-shadow: 0 0 0 2px rgba(42, 187, 172, 0.2); } /* ======================================== CAMPO DE TELEFONE COM BANDEIRA ======================================== */ .phone-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .promo-icon { border: none !important; } .promo-icon::before { width: 0px !important; height: 0px !important; border: none !important; } .promo-icon::after { width: 0px !important; } .flag-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; pointer-events: none; z-index: 1; } .flag-prefix img { width: 18px; height: auto; vertical-align: middle; display: inline-block; } .flag-prefix span { color: #666; font-size: 14px; } #billing_cellphone { width: 100%; border-radius: 4px; line-height: 1.5; box-sizing: border-box; padding-left: 65px !important; padding-top: 10px; padding-bottom: 10px; height: 52px; vertical-align: middle; } #billing_cellphone:focus { outline: none; border-color: #666; } #billing_cellphone::placeholder { color: #999; } /* ======================================== NOTIFICAÇÃO DE PAGAMENTO SEGURO ======================================== */ .secure-payment-notice { display: flex !important; align-items: center !important; gap: 4px !important; padding: 16px 0 !important; width: 100% !important; justify-content: flex-start !important; } .secure-payment-notice svg { width: 16px !important; height: 16px !important; color: #3BAE7E !important; flex-shrink: 0 !important; } @media (max-width: 600px) { .secure-payment-notice span { font-size: 13px !important; } } @media (min-width: 1024px) { .secure-payment-notice span { font-size: 14px !important; } } .secure-payment-notice span { line-height: 1.4 !important; text-align: left !important; } /* Ocultar termos do Mercado Pago */ .mp-checkout-custom-terms-and-conditions, .mp-checkout-pix-terms-and-conditions { display: none !important; } /* Responsividade da notificação */ @media (max-width: 480px) { .secure-payment-notice { gap: 0px !important; } } /* ======================================== MÉTODOS DE PAGAMENTO PERSONALIZADOS ======================================== */ /* Reset e container principal */ .wc_payment_methods { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 20px !important; list-style: none !important; } /* Título da seção de pagamento */ #payment_options_heading { display: flex; align-items: center; } #payment_options_heading::before { content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M1 4a1 1 0 011-1h16a1 1 0 011 1v8a1 1 0 01-1 1H2a1 1 0 01-1-1V4zm12 4a3 3 0 11-6 0 3 3 0 016 0zM4 9a1 1 0 100-2 1 1 0 000 2zm13-1a1 1 0 11-2 0 1 1 0 012 0zM1.75 14.5a.75.75 0 000 1.5c4.417 0 8.693.603 12.749 1.73 1.111.309 2.251-.512 2.251-1.696v-.784a.75.75 0 00-1.5 0v.784a.272.272 0 01-.35.25A49.043 49.043 0 001.75 14.5z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Container dos botões */ .payment-buttons-container { display: flex !important; gap: 16px !important; width: 100% !important; } /* Cada botão de pagamento */ .wc_payment_method { flex: 1 !important; list-style: none !important; position: relative !important; } /* Labels dos botões */ .wc_payment_method > label { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 16px !important; background: white !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; cursor: pointer !important; width: 100% !important; font-weight: 500 !important; } /* Ícones dos botões */ .wc_payment_method > label img { height: 24px !important; width: auto !important; margin-left: 8px !important; } /* Estilo específico para o ícone do Pix */ .wc_payment_method.payment_method_woo-mercado-pago-pix > label img { content: url('https://pay.desyne.pro/wp-content/uploads/2025/01/pix.svg') !important; height: 24px !important; width: 24px !important; } /* Estilo específico para o ícone do Cartão */ .wc_payment_method.payment_method_woo-mercado-pago-custom > label img { content: url('https://pay.desyne.pro/wp-content/uploads/2025/01/fff.svg') !important; height: 24px !important; width: 24px !important; } /* Radio buttons */ .wc_payment_method > input[type="radio"] { display: none !important; } /* Estado ativo */ .wc_payment_method > input[type="radio"]:checked + label { background: #f9fafb !important; } /* Ajuste específico para o ícone do Pix quando selecionado */ .wc_payment_method.payment_method_woo-mercado-pago-pix > input[type="radio"]:checked + label img { filter: brightness(0) !important; } /* Remove o filtro de inversão para o ícone do cartão */ .wc_payment_method.payment_method_woo-mercado-pago-custom > input[type="radio"]:checked + label img { filter: none !important; } /* Container do conteúdo */ .payment_box { display: none !important; width: 100% !important; padding: 24px !important; background: white !important; border: 1px solid #E5E7EB !important; border-radius: 8px !important; margin-top: 16px !important; } /* Mostrar conteúdo quando selecionado */ .wc_payment_method > input[type="radio"]:checked ~ .payment_box { display: block !important; } /* Força largura total em elementos do conteúdo */ .payment_box, .mp-checkout-container, .mp-checkout-custom-container, .mp-checkout-pix-container, .mp-checkout-custom-card-form, .mp-checkout-custom-card-row, .mp-checkout-custom-available-payments, .mp-checkout-custom-card-column, .mp-input-select-input, .mp-checkout-custom-issuers-container, .mp-checkout-custom-installments-container, #mp-custom-checkout-form-container, .mp-checkout-custom-available-payments-content, .mp-checkout-custom-card-form, .mp-checkout-custom-installments, .mp-checkout-pix-container, .mp-checkout-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* ======================================== CAMPOS DE FORMULÁRIO ======================================== */ #billing_first_name_field { width: 100%; } .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr; } #billing_first_name_field { order: 0; } #billing_email_field { order: 1; } /* Ocultar elementos desnecessários */ h3#customer_information_heading, h3#order_review_heading, .woocommerce-terms-and-conditions-wrapper, .wcf-collapsed-order-review-section.order-review-summary-position-top, .mp-checkout-custom-available-payments, p.mp-checkout-custom-card-form-title, .mp-input-label b[style*="color: red"], abbr.required { display: none !important; } /* ======================================== BOTÃO DE FINALIZAR COMPRA ======================================== */ #place_order { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: "Inter", system-ui, -apple-system, sans-serif !important; line-height: 1.5 !important; border-radius: 8px !important; background-color: #00a650 !important; border: none !important; color: white !important; gap: 8px !important; width: 100% !important; cursor: pointer !important; transition: background-color 0.2s ease !important; box-shadow: none !important; } #place_order:hover { background: #009147 !important; } /* Remover ícones e conteúdo desnecessário */ #place_order::before, #place_order::after { display: none !important; content: none !important; } #place_order svg, #place_order img, #place_order i { display: none !important; } #place_order * { display: inline !important; margin: 0 !important; padding: 0 !important; } /* ======================================== SEÇÃO DE PAGAMENTO ======================================== */ #payment { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-top: 20px; } /* ======================================== ELEMENTOS DO MERCADO PAGO ======================================== */ img.mp-pix-template-image { width: 60% !important; } div#mp-checkout-custom-installments { margin-top: 0px !important; } /* ======================================== RESPONSIVIDADE ======================================== */ /* Mobile (até 768px) */ @media (max-width: 768px) { /* Container de informações do cliente - agora conecta com o acordeon acima */ .wcf-customer-info-main-wrapper { border-radius: 8px 8px 8px 8px !important; border-bottom: 2px solid #d6d7db82 !important; padding-right: 16px; margin-top: 0 !important; } /* Acordeon mobile - agora fica acima do formulário */ .accordion-wrapper.mobile-only { margin-top: 0 !important; margin-bottom: 24px !important; width: 100% !important; border-radius: 0px 0px 8px 8px !important; padding: 16px; border: 1px solid #73737338 !important; border-bottom: none !important; } #payment { box-shadow: none !important; } } /* Tablet (até 1024px) */ @media (max-width: 1024px) { .wcf-customer-info-main-wrapper { padding-right: 16px !important; padding-left: 9px !important; } .wcf-embed-checkout-form .woocommerce-checkout .col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper { margin-right: 9px !important; } } /* ======================================== COMPATIBILIDADE COM CARTFLOWS ======================================== */ .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:last-child { border-bottom: 0; border-top: 1px solid #d6d7db8a !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box { border-bottom: 0px solid #DEDEDE !important; padding: 0px !important; border-left: 0px solid #DEDEDE !important; border-right: 0px solid #DEDEDE !important; } .wcf-embed-checkout-form .woocommerce-checkout .wcf-order-wrap .col2-set, .wcf-embed-checkout-form #order_review { padding: 0px !important; } .wcf-embed-checkout-form table.shop_table { border: none !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table { border: none !important; border-collapse: initial !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment button { padding: 20px 5px !important; } /* Layout flexível para campos */ .wcf-embed-checkout-form .woocommerce-checkout .col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper, .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper { margin: 0; -js-display: flex; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } /* ======================================== ELEMENTOS ADICIONAIS ======================================== */ ul.wc_payment_methods.payment_methods.methods { gap: 10px !important; } @media (max-width: 600px) { ul.wc_payment_methods.payment_methods.methods { gap: 24px !important; } } .custom-privacy-position { display: block; margin-top: 15px; font-size: 0.875rem; color: #555; } /* Feedback inline para o campo Nome completo */ #fullname-error-message { color: #d32f2f; font-size: 13px; margin-top: 4px; display: none; } /* Garantir que o loader tenha a maior prioridade visual */ #checkout-loader-overlay { z-index: 999999 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; } /* Melhorar a aparência em dispositivos móveis */ @media (max-width: 768px) { .checkout-loader-container { padding: 30px 20px !important; margin: 0 15px !important; } .checkout-loader-text { font-size: 16px !important; } .checkout-loader-subtext { font-size: 13px !important; } } /* Animação suave para o progresso */ .checkout-loader-progress-bar { transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Efeito de pulsação no spinner */ .checkout-loader-spinner { animation: checkout-spin 1s linear infinite, checkout-pulse 2s ease-in-out infinite alternate !important; } @keyframes checkout-pulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } /* Garantir que elementos do checkout fiquem ocultos durante o carregamento APENAS com overlay ativo */ body.checkout-overlay-active.checkout-loading .woocommerce-checkout>*:not(#checkout-loader-overlay), body.checkout-overlay-active.checkout-loading .wcf-embed-checkout-form>*:not(#checkout-loader-overlay), body.checkout-overlay-active.checkout-loading .site-content>*:not(#checkout-loader-overlay) { visibility: hidden !important; } /* Mostrar elementos quando carregado - SEM animação de subida (escopado ao overlay ativo) */ body.checkout-overlay-active.checkout-loaded .woocommerce-checkout>*, body.checkout-overlay-active.checkout-loaded .wcf-embed-checkout-form>*, body.checkout-overlay-active.checkout-loaded .site-content>* { visibility: visible !important; opacity: 1 !important; /* Removido: animation e keyframes para evitar animação de subida */ } /* Heading de pagamento com link do cupom à direita */ .wcf-payment-option-heading.coupon-heading { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 12px !important; flex-wrap: nowrap !important; width: 100% !important; } /* Evitar CLS: esconder toggle nativo do CartFlows/Woo desde o primeiro paint */ .cartflows-container .woocommerce-form-coupon-toggle, .cartflows-container #wcf_optimized_wcf_custom_coupon_field, .cartflows-container a#wcf_optimized_wcf_custom_coupon_field { display: none !important; visibility: hidden !important; } .wcf-payment-option-heading.coupon-heading h3 { margin: 0 !important; } .coupon-toggle-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #6b7280 !important; /* slate-500 */ font-size: 13px !important; font-weight: 400 !important; cursor: pointer !important; text-decoration: none !important; } .coupon-toggle-link { margin-left: auto !important; white-space: nowrap !important; } .coupon-toggle-link:hover { color: #374151 !important; } .coupon-toggle-link .icon { display: inline-flex; align-items: center; } .coupon-toggle-link .icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; } .coupon-toggle-link:focus { outline: 2px solid #cbd5e1; outline-offset: 2px; border-radius: 4px; } /* Container colapsável */ #coupon-collapsible { display: none !important; } /* Evitar CLS: esconder markup original visível do campo de cupom (fora do modal) */ .shop_table.woocommerce-checkout-review-order-table tr.coupon-field, .wcf-embed-checkout-form .wcf-custom-coupon-field { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Estilo minimalista/compacto do campo de cupom */ #coupon-collapsible .wcf-custom-coupon-field, #coupon-collapsible form.checkout_coupon, #coupon-collapsible .woocommerce-form-coupon, .coupon-modal-body .wcf-custom-coupon-field, .coupon-modal-body form.checkout_coupon, .coupon-modal-body .woocommerce-form-coupon { display: flex !important; align-items: stretch; gap: 10px; margin: 8px 0 16px 0; } #coupon-collapsible input#coupon_code, #coupon-collapsible .wcf-coupon-code-input, .coupon-modal-body input#coupon_code, .coupon-modal-body .wcf-coupon-code-input { flex: 1 1 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; height: 42px; padding: 0 12px; font-size: 14px; } #coupon-collapsible .wcf-submit-coupon, #coupon-collapsible button[name="apply_coupon"], .coupon-modal-body .wcf-submit-coupon, .coupon-modal-body button[name="apply_coupon"] { height: 42px; padding: 0 14px; border-radius: 8px; background: #10b981; color: #fff; border: none; font-weight: 600; white-space: nowrap; } /* Garantir visibilidade mesmo se plugins esconderem o form */ #coupon-collapsible form.checkout_coupon, #coupon-collapsible .woocommerce-form-coupon, #coupon-collapsible .wcf-custom-coupon-field { display: flex !important; } /* Ocultar toggles/links dentro do modal para evitar texto repetido */ .coupon-modal-body .woocommerce-form-coupon-toggle, .coupon-modal-body #wcf_optimized_wcf_custom_coupon_field, .coupon-modal-body a#wcf_optimized_wcf_custom_coupon_field { display: none !important; } @media (max-width: 768px) { .coupon-toggle-link { font-size: 13px; } #coupon-collapsible .wcf-custom-coupon-field, #coupon-collapsible form.checkout_coupon, #coupon-collapsible .woocommerce-form-coupon, .coupon-modal-body .wcf-custom-coupon-field, .coupon-modal-body form.checkout_coupon, .coupon-modal-body .woocommerce-form-coupon { gap: 8px; } } /* Modal minimalista */ .coupon-modal-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.35); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 99999; } .coupon-modal-overlay.show { display: flex; } .coupon-modal { background: #ffffff; width: min(92vw, 420px); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.14); padding: 28px; transform: translateY(8px) scale(0.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; } .coupon-modal-overlay.show .coupon-modal { transform: translateY(0) scale(1); opacity: 1; } .coupon-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .coupon-modal-title { font-size: 24px; font-weight: 700; color: #111827; } .coupon-modal-close { background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: #9ca3af; } .coupon-modal-close:hover { color: #6b7280; } /* Layout vertical e elementos maiores dentro do modal */ .coupon-modal-body .wcf-custom-coupon-field, .coupon-modal-body form.checkout_coupon, .coupon-modal-body .woocommerce-form-coupon { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin: 12px 0 0 0 !important; } .coupon-modal-body .wcf-custom-coupon-field .wcf-coupon-col-1, .coupon-modal-body .wcf-custom-coupon-field .wcf-coupon-col-2 { width: 100% !important; } /* Input com ícone e foco evidente */ .coupon-modal-body input#coupon_code, .coupon-modal-body .wcf-coupon-code-input { height: 56px !important; padding: 0 14px 0 56px !important; border-radius: 14px !important; border: 1px solid #e5e7eb !important; width: 100% !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='3' ry='3'/%3E%3Cpath d='M9 9v6M15 9v6'/%3E%3C/svg%3E") no-repeat 18px center !important; background-size: 24px 24px !important; font-size: 18px !important; transition: box-shadow .2s ease, border-color .2s ease !important; } .coupon-modal-body input#coupon_code::placeholder, .coupon-modal-body .wcf-coupon-code-input::placeholder { color: #9ca3af !important; } .coupon-modal-body input#coupon_code:focus, .coupon-modal-body .wcf-coupon-code-input:focus { outline: none !important; border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.25) !important; } /* Botão grande e cheio */ .coupon-modal-body .wcf-submit-coupon, .coupon-modal-body button[name="apply_coupon"] { height: 60px !important; width: 100% !important; border-radius: 18px !important; background: linear-gradient(135deg, #10b981 0%, #16a34a 100%) !important; color: #fff !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: 0.2px !important; } /* Mensagem de sucesso */ .coupon-feedback { display: none; color: #10b981; text-align: center; font-size: 20px; font-weight: 600; margin: 4px 0 4px; } .coupon-feedback.show { display: block; animation: couponFade .2s ease-in both; } @keyframes couponFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== CSS - Estilos para organização dos campos ========================================================================== */ /* Força layout vertical nos campos de billing */ .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper { display: block !important; } /* Reseta propriedades de layout que podem interferir */ .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper > p.form-row { order: initial !important; position: static !important; float: none !important; margin-top: initial !important; } /* Oculta erros de campos obrigatórios */ span.wcf-field-required-error { display: none; } /* Remove asteriscos vermelhos dos campos obrigatórios */ .woocommerce-billing-fields .required, .woocommerce-billing-fields label .required { display: none !important; } /* Alternativa mais específica para garantir que funcione */ .woocommerce-billing-fields__field-wrapper .required, .woocommerce-billing-fields__field-wrapper label .required, .form-row .required, .form-row label .required { display: none !important; } /* Se quiser remover apenas quando em foco, use: */ .woocommerce-billing-fields__field-wrapper input:focus + label .required, .woocommerce-billing-fields__field-wrapper input:focus ~ label .required, .form-row input:focus + label .required, .form-row input:focus ~ label .required { display: none !important; } /* Para remover completamente os asteriscos (sempre) */ .required_field .required, label.required_field .required { display: none !important; } /* ======================================== CORREÇÃO DE OVERLAY NOS CAMPOS MP ======================================== */ /* Garantir que os containers dos campos tenham z-index adequado */ .mp-checkout-custom-card-input, .mp-checkout-custom-security-code-input, #form-checkout__cardNumber-container, #form-checkout__expirationDate-container, #form-checkout__securityCode-container { position: relative !important; z-index: 10 !important; pointer-events: auto !important; } div#fullname-error-message { text-align: -webkit-left !important; } div#cell-error-message { text-align: -webkit-left !important; margin-left: 0 !important; } div#cpf-error-message { text-align: -webkit-left !important; margin-left: 0 !important; } @media (min-width: 768px) and (max-width: 1024px) { .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: right; padding: 20px 5px !important; } } /* Mercado Pago – gap visual de 20px entre as duas colunas no mobile (sem usar gap) */ @media (max-width: 768px) { /* Adiciona 10px de padding em cada coluna para totalizar 20px entre elas */ .mp-checkout-custom-dual-column-row .mp-checkout-custom-card-column:first-child, .mp-checkout-custom-card-row .mp-checkout-custom-card-column:first-child { padding-right: 10px !important; } .mp-checkout-custom-dual-column-row .mp-checkout-custom-card-column:last-child, .mp-checkout-custom-card-row .mp-checkout-custom-card-column:last-child { padding-left: 10px !important; } } /* Remover qualquer overlay que possa estar interferindo */ .mp-checkout-custom-card-input::before, .mp-checkout-custom-card-input::after, .mp-checkout-custom-security-code-input::before, .mp-checkout-custom-security-code-input::after { display: none !important; pointer-events: none !important; } /* ======================================== CORREÇÃO: TÍTULO DO SELETOR DE PARCELAS ======================================== */ /* ======================================== ADICIONAR TÍTULO AO SELETOR DE PARCELAS ======================================== */ /* Forçar o seletor de parcelas a ficar SEMPRE visível */ #mp-checkout-custom-installments-card, #mp-checkout-custom-installments-container, .mp-checkout-custom-installments-display-none { display: block !important; visibility: visible !important; opacity: 1 !important; } /* O componente andes-dropdown que representa o seletor de parcelas */ andes-dropdown#\#mp-checkout-custom-installments { display: block !important; } /* Ocultar o label original do andes-dropdown */ .andes-dropdown__label { display: none !important; } @media (max-width: 600px) { .payment-content-wrapper .payment_box.payment_method_woo-mercado-pago-custom { margin-top: 16px !important; } } @media (max-width: 600px) { .secure-payment-notice { /* padding: 0px !important; */ padding-bottom: 8px !important; padding-top: 8px !important; } } /* Adicionar título personalizado antes do container de parcelas */ #mp-checkout-custom-installments-container::before { content: "Parcelas" !important; display: block !important; font-size: 14px !important; margin-left: 7px; font-weight: 400 !important; color: #191919 !important; margin-bottom: 8px !important; line-height: 1.2 !important; } /* Garantir que o container tenha posicionamento correto */ #mp-checkout-custom-installments-container { position: relative !important; } /* Ajustar espaçamento do dropdown para compensar o título */ .andes-dropdown { margin-top: 0 !important; } .mp-checkout-custom-installments-display-none { margin-top: 0px !important; } /* ======================================== CORREÇÕES PARA MOBILE ======================================== */ @media (max-width: 768px) { #mp-checkout-custom-installments-container::before { font-size: 13px !important; margin-bottom: 6px !important; } } /* Garantir que os iframes tenham z-index correto */ .mp-checkout-custom-card-input iframe, .mp-checkout-custom-security-code-input iframe { position: relative !important; z-index: 15 !important; pointer-events: auto !important; } /* Corrigir problemas de pointer-events nos labels */ .mp-input-label { pointer-events: none !important; user-select: none !important; } /* Garantir que os containers principais não tenham overlays */ .mp-checkout-container, .mp-checkout-custom-container, #mp-custom-checkout-form-container, .mp-checkout-custom-card-form { position: relative !important; z-index: 1 !important; } /* Remover qualquer elemento que possa estar sobrepondo */ .mp-checkout-custom-card-row { position: relative !important; z-index: 5 !important; } /* Corrigir problemas específicos do campo de nome do titular */ .mp-card-holder-name { position: relative !important; z-index: 10 !important; pointer-events: auto !important; } /* Ajustar tamanho do placeholder do nome do titular */ .mp-card-holder-name::placeholder, #form-checkout__cardholderName::placeholder { font-size: 16px !important; color: #737373 !important; } .mp-card-holder-name::-webkit-input-placeholder, #form-checkout__cardholderName::-webkit-input-placeholder { font-size: 16px !important; color: #737373 !important; } .mp-card-holder-name::-moz-placeholder, #form-checkout__cardholderName::-moz-placeholder { font-size: 16px !important; color: #737373 !important; } .mp-card-holder-name:-ms-input-placeholder, #form-checkout__cardholderName:-ms-input-placeholder { font-size: 16px !important; color: #737373 !important; } .mp-card-holder-name::-ms-input-placeholder, #form-checkout__cardholderName::-ms-input-placeholder { font-size: 16px !important; color: #737373 !important; } /* Garantir que os helpers não interfiram */ .mp-helper { pointer-events: none !important; z-index: 1 !important; } /* Corrigir problemas de focus nos campos */ .mp-checkout-custom-card-input:focus-within, .mp-checkout-custom-security-code-input:focus-within { z-index: 20 !important; } /* Remover qualquer pseudo-elemento que possa estar causando overlay */ .mp-checkout-custom-card-input *::before, .mp-checkout-custom-card-input *::after, .mp-checkout-custom-security-code-input *::before, .mp-checkout-custom-security-code-input *::after { pointer-events: none !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment button { padding: 0px 5px !important; } @media (min-width: 1366px) { .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: right; padding: 20px 5px !important; } } /* Texto digitado mais baixo; placeholder central quando vazio */ .woocommerce-billing-fields__field-wrapper input.input-text:not(:placeholder-shown), .wcf-embed-checkout-form .woocommerce-billing-fields__field-wrapper input.input-text:not(:placeholder-shown) { padding-top: 17px !important; padding-bottom: 0px !important; line-height: 1.4 !important; } /* Estado com placeholder visível (campo vazio) */ .woocommerce-billing-fields__field-wrapper input.input-text:placeholder-shown, .wcf-embed-checkout-form .woocommerce-billing-fields__field-wrapper input.input-text:placeholder-shown { padding-top: 10px !important; padding-bottom: 10px !important; line-height: 1.4 !important; } /* Ajuste fino por campo (exceto celular) */ #billing_first_name:placeholder-shown, #billing_email:placeholder-shown, #billing_cpf_cnpj:placeholder-shown { padding-top: 11px !important; padding-bottom: 10px !important; } #billing_first_name:not(:placeholder-shown), #billing_email:not(:placeholder-shown), #billing_cpf_cnpj:not(:placeholder-shown) { padding-top: 17px !important; padding-bottom: 0px !important; } /* Celular — comportamentos explícitos via classe para máxima compatibilidade */ #billing_cellphone:not(.has-value) { padding-top: 11px !important; padding-bottom: 10px !important; } #billing_cellphone.has-value { padding-top: 17px !important; padding-bottom: 0px !important; } /* Bandeira desce junto quando há texto */ .phone-input-wrapper.has-value .flag-prefix { transform: translateY(calc(-50% + 8px)) !important; } @media (max-width: 768px) { .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: right; padding: 20px 5px !important; } } @media (max-width: 768px) { ul.wc_payment_methods.payment_methods.methods .payment_box.payment_method_woo-mercado-pago-custom { /* padding-top: 0px !important; */ margin-top: -8px !important; } } @media (max-width: 768px) { .secure-payment-notice { padding-top: 2px !important; padding-bottom: 0px !important; } } @media (min-width: 1366px) { .secure-payment-notice { padding-top: 2px !important; padding-bottom: 14px !important; } } /* Garantir que os campos de documento também funcionem */ .mp-input-document { position: relative !important; z-index: 10 !important; } .mp-document, .mp-document-select { position: relative !important; z-index: 15 !important; pointer-events: auto !important; } /* Corrigir problemas de select de parcelas */ .mp-input-select-input { position: relative !important; z-index: 10 !important; } .mp-input-select-select { position: relative !important; z-index: 15 !important; pointer-events: auto !important; } /* ======================================== CORREÇÕES ESPECÍFICAS PARA MOBILE ======================================== */ @media (max-width: 768px) { /* Aumentar z-index no mobile para evitar problemas */ .mp-checkout-custom-card-input, .mp-checkout-custom-security-code-input { z-index: 25 !important; } .mp-checkout-custom-card-input iframe, .mp-checkout-custom-security-code-input iframe { z-index: 30 !important; } /* Garantir que campos de texto funcionem no mobile */ .mp-card-holder-name, .mp-document, .mp-document-select { z-index: 25 !important; } } /* ======================================== CORREÇÕES PARA PROBLEMAS DE TOUCH ======================================== */ /* Melhorar resposta ao toque nos campos */ .mp-checkout-custom-card-input, .mp-checkout-custom-security-code-input, .mp-card-holder-name, .mp-document, .mp-document-select { -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } /* Garantir que os iframes respondam ao toque */ .mp-checkout-custom-card-input iframe, .mp-checkout-custom-security-code-input iframe { -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } .mp-checkout-custom-installments-display-none { margin-top: 0px !important; } /* ======================================== CORREÇÕES PARA PROBLEMAS DE FOCUS ======================================== */ /* Melhorar visibilidade do focus */ .mp-checkout-custom-card-input:focus-within, .mp-checkout-custom-security-code-input:focus-within { outline: 2px solid #2abbac !important; outline-offset: 2px !important; } /* Garantir que campos de texto tenham focus visível */ .mp-card-holder-name:focus, .mp-document:focus, .mp-document-select:focus { outline: 2px solid #2abbac !important; outline-offset: 2px !important; } /* ======================================== CORREÇÕES PARA PROBLEMAS DE LAYER ======================================== */ /* Garantir que não haja elementos invisíveis sobrepondo */ .mp-checkout-custom-card-row > * { position: relative !important; } /* Remover qualquer elemento com position absolute que possa estar interferindo */ .mp-checkout-custom-card-row [style*="position: absolute"] { pointer-events: none !important; z-index: -1 !important; } /* Garantir que apenas elementos necessários tenham pointer-events */ .mp-checkout-custom-card-row * { pointer-events: auto !important; } .mp-checkout-custom-card-row .mp-input-label, .mp-checkout-custom-card-row .mp-helper { pointer-events: none !important; } .mp-checkout-custom-card-input input, .mp-checkout-custom-card-input iframe, .mp-checkout-custom-security-code-input input, .mp-checkout-custom-security-code-input iframe { animation: none !important; transition: none !important; } .mp-installments-placeholder { width: 100% !important; } .mp-installments-placeholder .andes-dropdown__trigger { opacity: 1 !important; cursor: pointer !important; } /* Garantir que o placeholder receba os cliques (evitar overlays) */ .mp-installments-placeholder, .mp-installments-placeholder * { pointer-events: auto !important; } /* Posicionamento para o popover */ .mp-installments-placeholder .andes-dropdown__wrapper { position: relative !important; } .mp-installments-popover { position: absolute !important; left: 0 !important; bottom: calc(100% + 8px) !important; background: #111827 !important; /* cinza quase preto */ color: #ffffff !important; padding: 10px 12px !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; font-size: 13px !important; line-height: 1.3 !important; z-index: 9999 !important; max-width: 320px !important; width: max-content !important; pointer-events: none !important; opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .mp-installments-popover.show { opacity: 1; transform: translateY(0); } .mp-installments-popover::after { content: ''; position: absolute; top: 100%; left: 16px; border-width: 6px; border-style: solid; border-color: #111827 transparent transparent transparent; } /* Ocultar mensagem de erro vermelha enquanto placeholder estiver ativo */ #mp-checkout-custom-installments-container.mp-has-placeholder .mp-helper, #mp-checkout-custom-installments-container.mp-has-placeholder .mp-helper-message.error { display: none !important; } .mp-installments-info { margin-top: 6px !important; font-size: 13px !important; line-height: 1.3 !important; color: #6b7280 !important; } .mp-installments-info b { color: #111827 !important; font-weight: 600 !important; } /* Garante que o placeholder herde largura total do container */ #mp-checkout-custom-installments, #mp-checkout-custom-installments-container, #mp-checkout-custom-installments-card { width: 100% !important; } /* Evita colapso do container antes das opções reais */ #mp-checkout-custom-installments-container { min-height: 48px; } .mp-checkout-custom-card-form { gap: 0 !important; } .mp-checkout-custom-dual-column-row { gap: 0 !important; } .mp-checkout-custom-card-row { gap: 0 !important; } .mp-checkout-custom-card-column { gap: 0 !important; } /* ======================================== SEÇÃO 1: ESTILOS GERAIS DO ORDER BUMP ======================================== */ /* Reset de estilos básicos */ .wcf-bump-order-style-1 .wcf-bump-order-offer-content-left img { padding: 0 !important; } .wcf-bump-order-wrap .wcf-bump-order-field-wrap label { display: flex !important; align-items: center !important; cursor: pointer !important; font-weight: 500 !important; font-size: 1em !important; color: #495057 !important; } .wcf-bump-order-header { padding: 0px !important; } /* ======================================== CORREÇÃO: ORDER BUMP SOBRE SELETOR DE PARCELAS ======================================== */ /* Garantir que o container de parcelas tenha z-index maior que o order bump */ #mp-checkout-custom-installments-card { position: relative !important; z-index: 50 !important; } /* Garantir que o dropdown de parcelas tenha z-index adequado */ #mp-checkout-custom-installments-container { position: relative !important; z-index: 55 !important; } /* Garantir que o dropdown andes tenha z-index correto */ .andes-dropdown { position: relative !important; z-index: 60 !important; } /* Garantir que o menu do dropdown tenha z-index maior */ .andes-dropdown__menu { position: relative !important; z-index: 65 !important; } /* Reduzir z-index do order bump para ficar abaixo dos campos de pagamento */ .wcf-bump-order-wrap { position: relative !important; z-index: 10 !important; } /* Garantir que o container do order bump não interfira */ .wcf-bump-order-grid-wrap { position: relative !important; z-index: 10 !important; } /* Garantir que o conteúdo do order bump não tenha z-index alto */ .wcf-bump-order-content { position: relative !important; z-index: 10 !important; } /* Corrigir z-index dos campos de entrada do Mercado Pago */ .mp-checkout-custom-card-input, .mp-checkout-custom-security-code-input, .mp-input-select-input { position: relative !important; z-index: 40 !important; } /* Garantir que os iframes tenham z-index correto */ .mp-checkout-custom-card-input iframe, .mp-checkout-custom-security-code-input iframe { position: relative !important; z-index: 45 !important; } /* Corrigir z-index dos selects */ .mp-input-select-select { position: relative !important; z-index: 45 !important; } /* Garantir que o container de parcelas não seja afetado pelo order bump */ .mp-checkout-custom-installments-display-none { position: relative !important; z-index: 50 !important; } /* Corrigir z-index do container de emissores */ #mp-checkout-custom-issuers-container { position: relative !important; z-index: 50 !important; } /* Garantir que os helpers não interfiram */ .mp-helper { position: relative !important; z-index: 5 !important; } /* ======================================== CORREÇÕES ESPECÍFICAS PARA MOBILE ======================================== */ @media (max-width: 768px) { /* Aumentar z-index no mobile para garantir funcionamento */ #mp-checkout-custom-installments-card { z-index: 60 !important; } #mp-checkout-custom-installments-container { z-index: 65 !important; } .andes-dropdown { z-index: 70 !important; } .andes-dropdown__menu { z-index: 75 !important; } /* Manter order bump com z-index baixo no mobile */ .wcf-bump-order-wrap { z-index: 15 !important; } } /* ======================================== CORREÇÕES PARA PROBLEMAS DE FOCUS ======================================== */ /* Garantir que campos com focus tenham z-index adequado */ .mp-checkout-custom-card-input:focus-within, .mp-checkout-custom-security-code-input:focus-within, .andes-dropdown:focus-within { z-index: 80 !important; } /* Garantir que o dropdown aberto tenha z-index máximo */ .andes-dropdown[aria-expanded="true"] { z-index: 85 !important; } .andes-dropdown[aria-expanded="true"] .andes-dropdown__menu { z-index: 90 !important; } /* ======================================== SEÇÃO 2: CONTAINER PRINCIPAL DO ORDER BUMP ======================================== */ /* Container dos Detalhes da Oferta (Card Branco) - Desktop */ .wcf-bump-order-wrap .wcf-content-container { display: flex !important; flex-direction: row !important; /* Lado a lado no Desktop */ align-items: flex-start !important; gap: 20px !important; /* Espaço entre imagem e texto */ background-color: #ffffff !important; border-radius: 8px !important; padding: 25px !important; /* Padding Desktop */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important; width: 100% !important; box-sizing: border-box !important; cursor: pointer !important; /* Indica que o card é clicável */ } .wcf-bump-order-grid-wrap { margin: 0px !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .place-order { padding: 0px 0 0 !important; } /* ======================================== SEÇÃO 3: COLUNA ESQUERDA (IMAGEM) ======================================== */ /* Container da imagem - Desktop */ .wcf-bump-order-wrap .wcf-bump-order-offer-content-left.wcf-bump-order-image { flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* Imagem - Desktop */ .wcf-bump-order-wrap .wcf-image { display: block !important; max-width: 100%; /* Garante não estourar container */ height: auto; /* Mantem proporção */ border-radius: 6px; /* Arredondamento padrão */ } /* ======================================== SEÇÃO 4: COLUNA DIREITA (TEXTO) ======================================== */ /* Container do texto - Desktop */ .wcf-bump-order-wrap .wcf-bump-order-offer-content-right { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; /* Empilha Título -> Preço -> Descrição */ margin: 0 !important; padding: 0 !important; } /* Remover visual do bloco de título interno (não mostrado mais) */ .wcf-bump-order-wrap .wcf-bump-order-offer { display:none !important; } .wcf-bump-order-wrap .wcf-bump-order-bump-highlight { display:none !important; } /* ======================================== SEÇÃO 5: DESCRIÇÃO E PREÇO ======================================== */ /* Container da Descrição - Desktop */ .wcf-bump-order-wrap .wcf-bump-order-desc { order: 2 !important; /* Descrição (com preço) vem depois */ width: 100% !important; margin: 0 !important; /* zera margem geral */ padding: 0 !important; line-height: 1.6 !important; color: #6c757d !important; text-align: left !important; display: block !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce .wcf-create-account-section [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce .woocommerce-shipping-fields [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box.payment_method_stripe [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce input[type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review input[type="checkbox"]:checked::before { color: #495057 !important; } @media only screen and (min-width: 1366px) { .wcf-bump-order-wrap .wcf-bump-order-desc { font-size: 15px !important; } } @media only screen and (max-width: 640px) { .wcf-bump-order-wrap .wcf-bump-order-desc { font-size: 13px !important; } } @media only screen and (max-width: 480px) { .wcf-bump-order-wrap.wcf-after-payment.wcf-ob-column-100 .wcf-bump-order-offer-content-left { order: 1 !important; } } /* Checkout: forçar foco vermelho no campo de e-mail */ #billing_email:focus, #billing_email:focus-visible, .woocommerce form .form-row input#billing_email.input-text:focus { outline: none !important; border-color: #e11e00 !important; border-width: 1px !important; box-shadow: none !important; } /* Checkout: padronizar foco de TODOS os campos para 1px vermelho, sem halo */ .cartflows-container .wcf-embed-checkout-form .woocommerce form .form-row input.input-text:focus, .cartflows-container .wcf-embed-checkout-form .woocommerce form .form-row input[type="text"]:focus, .cartflows-container .wcf-embed-checkout-form .woocommerce form .form-row input[type="email"]:focus, .cartflows-container .wcf-embed-checkout-form .woocommerce form .form-row input[type="tel"]:focus, .cartflows-container .wcf-embed-checkout-form .woocommerce form .form-row textarea:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row input.input-text:focus, .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row input.input-text:focus { outline: none !important; border-color: #e11e00 !important; border-width: 1px !important; box-shadow: none !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce .wcf-create-account-section [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce .woocommerce-shipping-fields [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment div.payment_box.payment_method_stripe [type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce input[type="checkbox"]:checked::before, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review input[type="checkbox"]:checked::before { margin: -8px -7px !important; } @media only screen and (max-width: 480px) { .wcf-embed-checkout-form .woocommerce #payment .wcf-bump-order-wrap input[type="checkbox"] { margin: 0 8px 0 0 !important; } } @media only screen and (min-width: 1280px) { .wcf-embed-checkout-form .woocommerce #payment .wcf-bump-order-wrap input[type="checkbox"] { margin: 0 !important; } } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment input[type="checkbox"], .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment input[type="radio"] { padding: 9px !important; } /* Remover qualquer margem/padding interno do primeiro filho (p/ evitar espaço extra) */ .wcf-bump-order-wrap .wcf-bump-order-desc > *:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Parágrafo DENTRO da Descrição - Desktop */ .wcf-bump-order-wrap .wcf-bump-order-desc p { margin: 0 !important; padding: 0 !important; } /* Span do Preço DENTRO do Parágrafo - Desktop */ .wcf-bump-order-wrap .wcf-bump-order-desc p span.wcf-normal-price { display: block !important; /* Preço na linha de cima */ color: #212529 !important; line-height: 1.2 !important; margin-bottom: 12px !important; /* Espaço abaixo */ } /* Ocultar
extras e quebras iniciais na descrição */ .wcf-bump-order-wrap .wcf-bump-order-desc br, .wcf-bump-order-wrap .wcf-bump-order-desc > br, .wcf-bump-order-wrap .wcf-bump-order-desc p br { display: none !important; } .wcf-bump-order-wrap .wcf-bump-order-desc p span.wcf-normal-price + br, .wcf-bump-order-wrap .wcf-bump-order-desc p span.wcf-normal-price + .nbsp { display: none !important; } /* ======================================== SEÇÃO 6: MEDIA QUERIES - RESPONSIVIDADE ======================================== */ /* Ajustes para telas MUITO pequenas (abaixo de 480px) */ @media (max-width: 480px) { .wcf-bump-order-wrap .wcf-content-container { padding: 15px !important; gap: 12px !important; } .wcf-bump-order-wrap .wcf-image { width: 60px !important; } .wcf-bump-order-wrap .wcf-bump-order-bump-highlight { font-size: 15px !important; } .wcf-bump-order-wrap .wcf-bump-order-desc p span.wcf-normal-price { font-size: 1.4em !important; } .wcf-bump-order-wrap .wcf-bump-order-desc p { font-size: 0.85em !important; } .wcf-bump-order-field-wrap { padding: 4px !important; } .wcf-bump-order-wrap .wcf-bump-order-desc p span.wcf-normal-price { font-size: 14px !important; } span.woocommerce-Price-amount.amount { font-size: 15px !important; } } /* Ajustes para telas médias (abaixo de 600px) */ @media (max-width: 600px) { .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not(.woocommerce-info) { padding: 0px 16px 0 16px !important; margin: 0px !important; } } /* Ajustes para telas médias (768px e acima) */ @media only screen and (min-width: 768px) { .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not(.woocommerce-info) { padding: 16px 24px 0 24px !important; margin: 0px !important; } } /* Ajustes para telas pequenas (abaixo de 768px) */ @media only screen and (max-width: 768px) { .mp-checkout-custom-card-form .mp-checkout-custom-card-row { padding-bottom: 16px !important; } div#mp-card-holder-div { padding-bottom: 16px !important; } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment label { padding: 12px !important; } span.wcf-normal-price { text-align: left !important; } .wcf-bump-order-desc { text-align: left !important; } } /* ======================================== SEÇÃO 7: ESTILOS DE PAGAMENTO ======================================== */ /* Método de pagamento selecionado */ .wc_payment_method > input[type="radio"]:checked + label { background: #f9fafb !important; border-color: #3BAE7E !important; border-style: solid !important; background-color: #e8f5e99e !important; } /* Ajuste específico para PIX */ li.wc_payment_method.payment_method_woo-mercado-pago-pix { margin: 0px !important; } /* ======================================== SEÇÃO 8: AVISO DE PAGAMENTO SEGURO ======================================== */ /* CSS para o aviso de pagamento seguro */ .secure-payment-notice { display: flex; align-items: center; color: #2ecc71; margin: 0px 0; font-size: 14px; line-height: 1.4; } .secure-payment-notice svg { margin-right: 8px; flex-shrink: 0; } .secure-payment-notice span { color: #2ecc71; } /* Versão mobile - ícone acima do texto centralizado */ @media only screen and (max-width: 767px) { .secure-payment-notice { flex-direction: column !important; text-align: center !important; justify-content: center !important; } .secure-payment-notice svg { margin-right: 0 !important; margin-bottom: 8px !important; } .secure-payment-notice span { text-align: center !important; width: 100% !important; } } /* ======================================== SEÇÃO 9: CSS DE SUPORTE PARA JAVASCRIPT ======================================== */ @media only screen and (min-width: 1366px) { .wcf-bump-order-field-wrap { padding-top: 16px !important; padding-bottom: 16px !important; } } .wcf-bump-order-header { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; margin-bottom: 10px !important; } /* Badge "Oferta" usando texto em destaque do CartFlows */ .wcf-bump-order-field-wrap label { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; } .wcf-bump-offer-badge { display: inline-flex !important; background: #eefaf2 !important; color: #1e7e34 !important; border: 1px solid #a7e0bf !important; border-radius: 999px !important; padding: 3px 10px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; white-space: nowrap !important; } @media only screen and (max-width: 767px) { .wcf-bump-order-field-wrap label { gap: 0 !important; padding-right: 0 !important; justify-content: flex-start !important; } .wcf-bump-order-field-wrap label .wcf-bump-offer-badge { position: static !important; margin-left: 6px !important; } } .wcf-bump-order-field-wrap.ob-selected { background: #f0fdf4 !important; } .wcf-bump-order-wrap.ob-selected { border: 1px solid #10b981 !important; } .wcf-bump-order-header .wcf-bump-order-offer { display: block !important; margin: 0 !important; } .wcf-bump-order-header .wcf-normal-price { display: block !important; margin: 0 !important; font-weight: bold !important; } @media only screen and (min-width: 1366px) { .wcf-bump-order-wrap.wcf-after-payment.wcf-ob-column-100 .wcf-bump-order-offer-content-left { max-width: 18.2% !important; } } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment button:not( .js-woopayments-copy-test-number ) { padding: 0 !important; } /* Preço comparativo (regular riscado + atual em destaque) */ .ob-price-compare { display: inline-flex !important; align-items: baseline !important; gap: 8px !important; } .ob-price-compare .ob-regular { color: #6c757d !important; text-decoration: line-through !important; font-weight: 500 !important; opacity: .85 !important; } .ob-price-compare .ob-current { color: #198754 !important; font-weight: 800 !important; } /* Ajustes para mobile */ @media only screen and (max-width: 767px) { .wcf-bump-order-header { padding: 0 0px !important; } } /* ======================================== ESTILOS PARA PREVENIR DUPLICAÇÃO CVV ======================================== */ /* GARANTIR QUE TODOS OS LABELS SEJAM VISÍVEIS POR PADRÃO */ .mp-input-label[data-cy="input-label"] { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } /* Garantir que o container do CVV tenha posição relativa */ .mp-checkout-custom-card-column { position: relative !important; } /* ======================================== CORREÇÕES ESPECÍFICAS PARA DESKTOP ======================================== */ /* Tratar elemento input-label no desktop */ input-label { display: block !important; position: relative !important; } /* Garantir que labels dentro de input-label sejam visíveis */ input-label .mp-input-label[data-cy="input-label"] { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } /* Ocultar apenas duplicações de CVV dentro de input-label */ input-label .mp-input-label[data-cy="input-label"]:not(:first-of-type) { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* CSS específico para desktop - forçar ocultação de duplicações */ @media (min-width: 769px) { input-label .mp-input-label[data-cy="input-label"]:nth-child(n+2) { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Garantir que apenas o primeiro label CVV seja visível no desktop */ input-label .mp-input-label[data-cy="input-label"]:first-child { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } } /* ======================================== CORREÇÕES ESPECÍFICAS PARA ORDER BUMP ======================================== */ /* Quando o order bump é alterado, garantir que apenas um label CVV seja visível */ .wcf-bump-order-wrap ~ .mp-checkout-custom-card-column .mp-input-label[data-cy="input-label"]:not(:first-of-type) { display: none !important; } /* ======================================== RESPONSIVIDADE ======================================== */ @media (max-width: 768px) { .mp-input-label[data-cy="input-label"]:not(:first-of-type) { display: none !important; } } /* ======================================== SEÇÃO 12: "VER MAIS" NA DESCRIÇÃO DO ORDER BUMP ======================================== */ .wcf-bump-order-wrap .ob-readmore { margin-top: 8px !important; background: transparent !important; border: 0 !important; color: #00a650 !important; font-weight: 400 !important; font-size: 13px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; padding: 0 !important; margin-left: 0 !important; align-self: flex-start !important; text-align: left !important; } .wcf-bump-order-wrap .ob-readmore:focus { outline: none !important; } .wcf-bump-order-wrap .ob-readmore .ob-more { display: inline; } .wcf-bump-order-wrap .ob-readmore .ob-less { display: none; } .wcf-bump-order-wrap .ob-readmore.active .ob-more { display: none; } .wcf-bump-order-wrap .ob-readmore.active .ob-less { display: inline; } .wcf-bump-order-wrap .ob-readmore .ob-chevron { display: inline-block !important; border: solid currentColor !important; border-width: 0 1px 1px 0 !important; padding: 2px !important; transform: rotate(45deg) !important; transition: transform .2s ease !important; } @media only screen and (min-width: 1366px) { .wcf-bump-order-wrap .ob-readmore .ob-chevron { padding: 3px !important; } } .wcf-bump-order-wrap .ob-readmore.active .ob-chevron { transform: rotate(-135deg) !important; } .wcf-bump-order-wrap .ob-clamp { display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } @media (max-width: 480px) { .wcf-bump-order-wrap .ob-clamp { line-clamp: 3 !important; -webkit-line-clamp: 3 !important; } } @media (min-width: 481px) and (max-width: 767px) { .wcf-bump-order-wrap .ob-clamp { line-clamp: 4 !important; -webkit-line-clamp: 4 !important; } } @media (min-width: 768px) { .wcf-bump-order-wrap .ob-clamp { line-clamp: 3 !important; -webkit-line-clamp: 3 !important; } } /* Center the PayPal box content */ .payment_box.payment_method_ppcp-gateway { text-align: center !important; } .payment_box.payment_method_ppcp-gateway p.paypal-box-text { margin: 0 !important; color: #374151 !important; /* slate-700 */ line-height: 1.5 !important; font-size: 14px !important; } /* Label (tab) enhancements: show PayPal logo */ li.wc_payment_method.payment_method_ppcp-gateway > label { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } li.wc_payment_method.payment_method_ppcp-gateway > label img.paypal-logo { height: 18px !important; width: auto !important; margin-inline-start: 2px !important; display: inline-block !important; vertical-align: middle !important; } /* Botão Gerar QR Code - Mobile */ .btn-gerar-qr-pix { display: none; width: 100%; max-width: 350px; padding: 12px 20px; background: white; color: #32CD32; border: 1px solid #32CD32; border-radius: 4px; font-size: 15px; font-weight: 400; cursor: pointer; margin: 20px auto; text-align: center; transition: all 0.3s ease; position: relative; } .btn-gerar-qr-pix::before { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2332CD32' viewBox='0 0 24 24'%3E%3Cpath d='M3 11h8V3H3v8zm2-6h4v4H5V5zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM18 13h-2v2h2v-2zM20 15h-2v2h2v-2zM22 13v2h-2v-2h2zM13 15h2v-2h-2v2zM15 17h-2v2h2v-2zM17 19h2v-2h-2v2zM19 17v2h-2v-2h2zM13 19h2v2h-2v-2z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-right: 10px; vertical-align: middle; } .btn-gerar-qr-pix:hover { background: #f8fff8; border-color: #28a745; color: #28a745; transform: translateY(-1px); } .btn-gerar-qr-pix.loading { background: white; border-color: #6c757d; color: #6c757d; cursor: not-allowed; } .btn-gerar-qr-pix.loading::before { content: ""; width: 20px; height: 20px; border: 2px solid rgba(108, 117, 125, 0.3); border-top: 2px solid #6c757d; border-radius: 50%; animation: spin 1s linear infinite; background-image: none; margin-right: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Estado "Gerado" */ .btn-gerar-qr-pix.gerado { background: white; border-color: #28a745; color: #28a745; } .btn-gerar-qr-pix.gerado::before { content: ""; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-right: 10px; animation: none; border: none; border-radius: 0; } /* Animação QR Code */ @keyframes fadeInQR { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @media (max-width: 768px) { p.mp-details-pix-qr-title { display: none !important; } } input#mp-qr-code { order: 2; } .qr-mostrado { animation: fadeInQR 0.5s ease-out; } /* MOBILE APENAS */ @media (max-width: 768px) { .btn-gerar-qr-pix { display: block !important; } /* OCULTAR QR CODE NO MOBILE (mas permitir mostrar quando ativo) */ .mp-details-pix-qr-img:not(.qr-ativo) { display: none !important; } img[data-cy="qrcode-pix"]:not(.qr-ativo) { display: none !important; } /* Quando QR estiver ativo, forçar mostrar */ .mp-details-pix-qr-img.qr-ativo, img[data-cy="qrcode-pix"].qr-ativo { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; z-index: auto !important; } } /* Quando QR for mostrado */ .qr-code-ativo { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; left: auto !important; width: auto !important; height: auto !important; overflow: visible !important; } /* Ocultar texto original */ .mp-details-pix-qr-description { font-size: 0 !important; } /* Novo texto */ .mp-details-pix-qr-description::before { content: "Ou copie o código PIX abaixo:" !important; font-size: 15px !important; display: block !important; text-align: center !important; } /* Container do popup */ #wc-error-popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; display: none; } /* Overlay */ .wc-popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.15s ease; } #wc-error-popup-container.wc-popup-show .wc-popup-overlay { opacity: 1; } #wc-error-popup-container.wc-popup-show .wc-popup-content { transform: scale(1); opacity: 1; } /* Conteúdo do popup */ .wc-popup-content { background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 380px; width: 100%; transform: scale(0.95); opacity: 0; transition: all 0.15s ease; } /* Header */ .wc-popup-header { padding: 20px 20px 16px 20px; display: flex; align-items: center; gap: 12px; position: relative; } .wc-popup-icon { width: 36px; height: 36px; background: #ef4444; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .wc-popup-title { font-size: 16px; font-weight: 600; color: #374151; flex: 1; } .wc-popup-close { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border: none; background: none; cursor: pointer; color: #9ca3af; padding: 0; display: flex; align-items: center; justify-content: center; } .wc-popup-close:hover { color: #6b7280; } /* Body */ .wc-popup-body { padding: 0 20px 0px 20px; } .wc-popup-error-item { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 14px; color: #b91c1c; font-size: 14px; line-height: 1.4; margin-bottom: 16px; } /* Footer */ .wc-popup-footer { padding: 0 20px 20px 20px; display: flex; justify-content: center; } .wc-popup-btn { background: #3b82f6; color: white; border: none; padding: 16px 20px; width: 100%; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s ease; } .wc-popup-btn:hover { background: #2563eb; } /* Responsivo */ @media (max-width: 480px) { .wc-popup-overlay { padding: 16px; } .wc-popup-content { max-width: 100%; } } /* Ocultar erros originais */ .woocommerce-error[data-popup-processed="true"] { display: none !important; } /* Demonstração */ .demo-container { max-width: 600px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .demo-btn { background: #3b82f6; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; margin: 20px 0; } .demo-btn:hover { background: #2563eb; } /* ======================================== CONFIGURAÇÕES CENTRALIZADAS - PIX CSS ======================================== EDITE AS CONFIGURAÇÕES ABAIXO PARA PERSONALIZAR O ESTILO ======================================== */ /* CORES PRINCIPAIS */ :root { /* Cor primária do botão e elementos principais */ --pix-primary-color: #32CD32; --pix-primary-hover: #28a745; /* Cores de texto */ --pix-text-primary: #333333; --pix-text-secondary: #666666; /* Cores de fundo */ --pix-bg-primary: #ffffff; --pix-bg-secondary: #f9f9f9; --pix-bg-tertiary: #f8f9fa; /* Cores de borda */ --pix-border-color: #e6e6e6; } /* DIMENSÕES E ESPAÇAMENTOS */ :root { /* Container principal */ --pix-container-max-width: 500px; --pix-container-border-radius: 16px; --pix-container-padding: 16px 20px; /* QR Code */ --pix-qr-size: 200px; --pix-qr-padding: 15px; --pix-qr-border-radius: 12px; /* Input e botão */ --pix-input-padding: 12px 15px; --pix-button-padding: 14px 20px; --pix-border-radius: 8px; /* Espaçamentos */ --pix-margin-small: 8px; --pix-margin-medium: 15px; --pix-margin-large: 25px; --pix-margin-xl: 30px; } /* TIPOGRAFIA */ :root { /* Família de fonte */ --pix-font-family: 'Poppins', sans-serif; /* Tamanhos de fonte */ --pix-font-size-small: 14px; --pix-font-size-base: 16px; --pix-font-size-large: 22px; --pix-font-size-xl: 28px; /* Pesos de fonte */ --pix-font-weight-normal: 400; --pix-font-weight-medium: 500; --pix-font-weight-semibold: 600; --pix-font-weight-bold: 700; } /* RESPONSIVIDADE */ :root { /* Breakpoints */ --pix-breakpoint-mobile: 480px; --pix-breakpoint-tablet: 768px; /* Tamanhos responsivos */ --pix-qr-size-mobile: 180px; --pix-qr-size-tablet: 200px; } p.woocommerce-notice.woocommerce-notice--error.woocommerce-thankyou-order-failed { text-align: center !important; padding-top: 16px !important; } p.woocommerce-notice.woocommerce-notice--error.woocommerce-thankyou-order-failed-actions { display:none !important; } /* ======================================== FIM DAS CONFIGURAÇÕES CENTRALIZADAS ======================================== */ /* Estilo Moderno e Minimalista para Página de Pagamento PIX */ @media (min-width: 768px) { img.mp-pix-template-image { width: 36% !important; } } .mp-pix-template-image { padding-bottom:24px !important; } .elementor-366 .elementor-element.elementor-element-3336ff90 { padding-top: 8px; padding-bottom: 8px; } /* Container principal */ .mp-details-pix { margin: 0 auto !important; } /* Descrição qrcode*/ p.mp-details-pix-qr-description { font-size: 14px; } /* Layout da seção PIX */ .mp-row-checkout-pix { display: flex !important; flex-direction: column !important; align-items: center !important; padding: var(--pix-container-padding) !important; } /* Esconder elementos desnecessários */ .mp-col-md-4, .mp-details-pix-qr-subtitle, .mp-details-pix-qr-description { display: none !important; } /* Ajustar coluna do QR code para ocupar toda largura e centralizar */ .mp-col-md-8 { width: 100% !important; padding: 0 !important; background-color: transparent !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } h3#billing_fields_heading { padding-bottom: 12px; margin-left: 9px !important; } @media (max-width: 768px) { h3#billing_fields_heading { margin-top: -0.1px !important; display: flex !important; } } /* Título principal */ .mp-details-title { font-size: var(--pix-font-size-large) !important; font-weight: var(--pix-font-weight-semibold) !important; color: var(--pix-text-primary) !important; text-align: center !important; margin-bottom: var(--pix-margin-large) !important; } /* Valor a pagar */ .mp-details-pix-amount { margin-bottom: var(--pix-margin-xl) !important; text-align: center !important; width: 100% !important; } .mp-details-pix-qr { font-size: var(--pix-font-size-base) !important; color: var(--pix-text-secondary) !important; display: block !important; margin-bottom: var(--pix-margin-small) !important; text-align: center !important; } .mp-details-pix-qr-value { font-size: var(--pix-font-size-xl) !important; font-weight: var(--pix-font-weight-bold) !important; color: var(--pix-text-primary) !important; text-align: center !important; } /* Título do QR code */ .mp-details-pix-qr-title { font-size: 16px; margin-bottom: 8px !important; text-align: center !important; width: 100% !important; } .mp-details-pix-button:hover { background-color: var(--pix-primary-hover) !important; } /* QR Code - Centralização corrigida */ .mp-details-pix-qr-img { width: var(--pix-qr-size) !important; height: var(--pix-qr-size) !important; padding: var(--pix-qr-padding) !important; background-color: var(--pix-bg-primary) !important; border: 1px solid var(--pix-border-color) !important; border-radius: var(--pix-qr-border-radius) !important; margin: 0 auto var(--pix-margin-xl) !important; display: block !important; } /* Container do código PIX */ .mp-details-pix-container { width: 100% !important; max-width: 350px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Container do input e botão */ .mp-row-checkout-pix-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } /* CORRIGIDO*/ /* Input do código PIX */ #mp-qr-code { width: 100% !important; padding: var(--pix-input-padding) !important; border: 1px solid var(--pix-border-color) !important; border-radius: var(--pix-border-radius) !important; font-size: var(--pix-font-size-small) !important; color: var(--pix-text-secondary) !important; background-color: var(--pix-bg-secondary) !important; margin-bottom: var(--pix-margin-medium) !important; text-align: center !important; } /* Botão de copiar */ .mp-details-pix-button { width: 100% !important; padding: var(--pix-button-padding) !important; background-color: var(--pix-primary-color) !important; color: white !important; border: none !important; border-radius: var(--pix-border-radius) !important; font-size: var(--pix-font-size-base) !important; font-weight: var(--pix-font-weight-medium) !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Adicionar ícone de cópia ao botão */ .mp-details-pix-button::before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; margin-right: 8px !important; } /* Tempo restante */ .mp-row-checkout-pix::after { content: "Tempo restante: 30 minutos" !important; display: block !important; margin-top: 0px !important; font-size: var(--pix-font-size-small) !important; color: var(--pix-text-secondary) !important; text-align: center !important; width: 100% !important; } /* Melhorias para a tabela de detalhes do pedido (imagem 2) */ .woocommerce-order-overview { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; background-color: #f8f9fa !important; padding: 15px !important; margin: 0 0 30px 0 !important; border: none !important; } .woocommerce-order-overview li { flex: 1 1 45% !important; margin: 5px 0 !important; padding: 8px !important; border: none !important; font-size: 14px !important; color: #666666 !important; display: flex !important; flex-direction: column !important; } .woocommerce-order-overview li strong { font-size: 16px !important; color: #333333 !important; font-weight: 600 !important; margin-top: 4px !important; } /* Melhorias para a área de status do pagamento (imagem 3) */ #transaction-status-message { background-color: #f8f9fa !important; padding: 10px !important; margin: 10px auto !important; max-width: 400px !important; } /* CORRIGIDO*/ #transaction-status-message div { display: flex !important; align-items: center !important; justify-content: center !important; } #transaction-status-message img { width: 24px !important; height: 24px !important; margin-right: 10px !important; } #transaction-status-message p { margin: 0 !important; color: #666666 !important; font-size: 15px !important; font-weight: 500 !important; } @media (max-width: 480px) { .mp-row-checkout-pix { padding: 0px !important; } } /* Responsividade para dispositivos móveis */ @media (max-width: 480px) { .mp-details-pix { padding: 0px !important; } .mp-row-checkout-pix { padding: 25px 15px !important; } @media (max-width: 767.98px) { .mp-pix-right { margin-bottom: 0px !important; } } .mp-details-pix-qr-value { font-size: 24px !important; } .mp-details-pix-qr-img { width: 180px !important; height: 180px !important; } .woocommerce-order-overview li { flex: 1 1 100% !important; } } /* Estilo específico para centralizar o código PIX abaixo do QR code */ .mp-details-pix-container p, .mp-pix-image-qr-code p, #mp-qr-code, .mp-details-pix-qr-code p { text-align: center !important; width: 100% !important; display: block !important; margin: 0 auto 15px !important; } /* Ajuste para o input que contém o código */ #mp-qr-code { width: 100% !important; max-width: 350px !important; padding: 12px 15px !important; border: 1px solid #e6e6e6 !important; border-radius: 8px !important; font-size: 14px !important; color: #666666 !important; background-color: #f9f9f9 !important; margin: 0 auto 15px !important; text-align: center !important; display: block !important; } .mp-details-pix { display: flex !important; justify-content: center !important; text-align: center !important; } .mp-col-md-8.mp-text-center.mp-pix-right { border: none !important; } ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details { display: none !important; } p.mp-details-title { display: none !important; } /* CORRIGIDO*/ /* Container principal do PIX */ .mp-details-pix { display: flex; justify-content: center; text-align: center; width: 100%; max-width: 1100px; margin: 0 auto; padding: 10px; } /* Linha de checkout do PIX */ .mp-row-checkout-pix { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0; } /* Colunas */ .mp-col-md-4, .mp-col-md-8 { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 550px; margin: 0 auto; padding: 5px; } /* Container do código PIX */ .mp-details-pix-container { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; margin: 0; padding: 5px 0; } /* Linha do container de checkout PIX */ .mp-row-checkout-pix-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin: 5px auto; } /* Input do código PIX */ #mp-qr-code { width: 100%; max-width: 400px; text-align: center; margin: 5px auto; padding: 8px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #f8f8f8; font-size: 13px; color: #333; } /* Botão de copiar código */ .mp-details-pix-button { width: 100%; max-width: 400px; margin: 5px auto; padding: 8px; background-color: #32CD32; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 13px; display: block; } /* Imagem do QR code */ .mp-details-pix-qr-img { display: block; margin: 5px auto; max-width: 200px; } /* CORRIGIDO*/ /* Textos e títulos */ .mp-details-pix-title, .mp-details-pix-qr-title, .mp-details-pix-qr-subtitle, .mp-details-pix-qr-description, .mp-details-pix-amount, .mp-details-pix p { text-align: center; width: 100%; margin: 5px auto; padding: 0; } /* Lista de passos */ .mp-steps-congrats { padding-left: 0; margin: 5px 0; } .mp-details-list { margin-bottom: 5px; padding: 0; } .mp-details-pix-number-p { margin: 0 0 2px 0; } .mp-details-list-description { margin: 0; font-size: 13px; } /* Valor a pagar */ .mp-details-pix-amount { margin: 5px 0; } .mp-details-pix-qr, .mp-details-pix-qr-value { margin: 0; padding: 0; } /* Responsividade para dispositivos móveis */ @media (max-width: 768px) { .mp-row-checkout-pix { flex-direction: column-reverse; } .mp-col-md-4, .mp-col-md-8 { width: 100%; max-width: 100%; padding: 5px; } #mp-qr-code, .mp-details-pix-button { max-width: 100%; } .mp-details-pix-img { max-width: 80px; } } .mp-row-checkout-pix-container { padding: 0px !important; } .mp-details-pix-amount { margin-bottom: 10px !important; } /* CORRIGIDO*/ /* Para garantir que qualquer sombra nos contêineres seja removida */ .mp-details-pix { box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; background-color: transparent !important; } .elementor-element.elementor-element-6a543efd.elementor-widget.elementor-widget-image { display: none !important; } /* Estilo para aumentar o tamanho do QR code e torná-lo responsivo */ .woocommerce-order .mp-details-pix-qr-img { width: 280px !important; height: 280px !important; max-width: 90% !important; padding: 15px !important; background-color: #ffffff !important; border: 1px solid #e6e6e6 !important; border-radius: 12px !important; margin: 0 auto 16px !important; display: block !important; transition: transform 0.3s ease !important; } /* Efeito de hover para o QR code */ .woocommerce-order .mp-details-pix-qr-img:hover { transform: scale(1.05) !important; } /* Responsividade para diferentes tamanhos de tela */ @media (min-width: 768px) { .woocommerce-order .mp-details-pix-qr-img { width: 250px !important; height: 250px !important; } } @media (min-width: 768px) { .mp-details-pix-qr-value { font-size: 28px !important; } } /* Para telas menores */ @media (max-width: 480px) { .woocommerce-order .mp-details-pix-qr-img { width: 180px !important; height: 180px !important; } /* Ajustes para melhor visualização em telas pequenas */ .woocommerce-order .mp-details-pix { padding: 10px 5px !important; } .woocommerce-order .mp-row-checkout-pix { padding: 15px 10px !important; } } /* Para telas muito pequenas */ @media (max-width: 320px) { .woocommerce-order .mp-details-pix-qr-img { width: 220px !important; height: 220px !important; padding: 10px !important; } } /* Melhorar a centralização do QR code */ .woocommerce-order .mp-col-md-8.mp-text-center.mp-pix-right { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* Ajustar o container principal para melhor responsividade */ .woocommerce-order .mp-details-pix { width: 100% !important; max-width: 600px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; } @media only screen and (max-width: 768px) { .header-right { display: flex !important; gap: 0px !important; } } .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout h3, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout #ship-to-different-address, .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout #order_review_heading { margin: 22px 0 0px !important; } /* ======================================== CORREÇÕES PARA ELEMENTOR MOBILE ======================================== */ /* Centralização geral para Elementor em mobile */ @media (max-width: 768px) { /* Container principal do Elementor */ .elementor-container { justify-content: center !important; align-items: center !important; text-align: center !important; } @media (max-width: 768px) { /* Título do QR code */ .mp-details-pix-qr-title { font-size: 14px !important; } } /* Colunas do Elementor */ .elementor-column { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* Widgets do Elementor */ .elementor-widget { text-align: center !important; } /* Seções do Elementor */ .elementor-section { text-align: center !important; } /* Container específico do PIX */ .elementor-366 .elementor-element.elementor-element-3336ff90 { padding: 0px 15px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Forçar centralização de todos os elementos dentro do container PIX */ .elementor-366 .elementor-element.elementor-element-3336ff90 * { text-align: center !important; } /* Centralizar imagens do Elementor */ .elementor-widget-image { text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; } .elementor-widget-image img { margin: 0 auto !important; display: block !important; } /* Centralizar textos do Elementor */ .elementor-widget-text { text-align: center !important; } .elementor-widget-text p, .elementor-widget-text h1, .elementor-widget-text h2, .elementor-widget-text h3, .elementor-widget-text h4, .elementor-widget-text h5, .elementor-widget-text h6 { text-align: center !important; } } /* Correções específicas para telas muito pequenas */ @media (max-width: 480px) { .elementor-366 .elementor-element.elementor-element-3336ff90 { padding: 15px 10px !important; } /* Container do Elementor com largura total */ .elementor-container { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; } } /* ======================================== FIM DAS CORREÇÕES PARA ELEMENTOR MOBILE ======================================== */