/* Cache hash: 06b434575a7bfe04778ce3a00a6d14fb */

/* 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,<svg width="80" height="80" viewBox="0 0 193 193" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M143.749 141.252C140.491 141.259 137.264 140.621 134.253 139.375C131.243 138.128 128.509 136.298 126.21 133.99L100.879 108.659C99.982 107.807 98.7923 107.332 97.5555 107.332C96.3186 107.332 95.129 107.807 94.2323 108.659L68.8045 134.087C66.5059 136.396 63.7724 138.227 60.7619 139.473C57.7515 140.72 54.5239 141.357 51.2656 141.348H46.2718L78.358 173.435C88.3699 183.446 104.618 183.446 114.63 173.435L146.801 141.252H143.749ZM51.2656 51.6516C57.9 51.6516 64.1243 54.233 68.8045 58.9132L94.2323 84.341C94.6692 84.7787 95.1882 85.1259 95.7594 85.3628C96.3307 85.5997 96.9431 85.7216 97.5615 85.7216C98.18 85.7216 98.7923 85.5997 99.3636 85.3628C99.9349 85.1259 100.454 84.7787 100.891 84.341L126.222 59.0097C128.519 56.702 131.251 54.872 134.259 53.6257C137.267 52.3793 140.493 51.7412 143.749 51.7481H146.801L114.63 19.5774C109.819 14.7696 103.296 12.0689 96.494 12.0689C89.6924 12.0689 83.1691 14.7696 78.358 19.5774L46.2718 51.6637L51.2656 51.6516Z" fill="%2330BEAF"/><path d="M173.423 78.358L153.978 58.9132C153.541 59.0925 153.075 59.1867 152.603 59.1907H143.761C139.189 59.1907 134.714 61.0483 131.493 64.281L106.162 89.6123C105.036 90.7447 103.696 91.6434 102.221 92.2566C100.746 92.8698 99.1649 93.1855 97.5675 93.1855C95.9702 93.1855 94.3886 92.8698 92.9137 92.2566C91.4387 91.6434 90.0995 90.7447 88.973 89.6123L63.5453 64.1725C60.2829 60.9236 55.8698 59.0941 51.2656 59.0821H40.4094C39.9593 59.0785 39.5137 58.9927 39.0946 58.8288L19.5774 78.358C9.56557 88.3699 9.56557 104.618 19.5774 114.642L39.0946 134.159C39.5091 133.992 39.9506 133.902 40.3973 133.894H51.2656C55.8494 133.894 60.3125 132.048 63.5453 128.815L88.9609 103.376C91.28 101.168 94.3594 99.9361 97.5615 99.9361C100.764 99.9361 103.843 101.168 106.162 103.376L131.493 128.707C134.714 131.94 139.189 133.785 143.761 133.785H152.603C153.085 133.785 153.556 133.906 153.978 134.075L173.423 114.63C183.434 104.618 183.434 88.3699 173.423 78.358Z" fill="%2330BEAF"/></svg>') !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;
    }
    
    /* ========================================
       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;
    }
    
    /* Remove espaços extras que podem estar vindo do &nbsp; */
    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: 10px 16px 10px 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; 
            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;
        }
    }
    
    /* 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;
    }


    /* 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 */
    }


  /* ==========================================================================
     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;
    }
    
    /* 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
     ======================================== -->

<style>
/* ========================================
   ADICIONAR TÍTULO AO SELETOR DE PARCELAS
   ======================================== */

/* 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;
    }
}


        /* ========================================
           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;
        }
        
        
        .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;
        }
        
        /* Área do Título ('Oferta Única') - Desktop */
        .wcf-bump-order-wrap .wcf-bump-order-offer {
            width: 100% !important;
            margin: 0 0 8px 0 !important;
            padding: 0 !important;
            order: 1 !important;            /* Título Primeiro */
            text-align: left !important;
        }
        
        .wcf-bump-order-wrap .wcf-bump-order-bump-highlight {
            font-weight: 600 !important;
            color: #343a40 !important;
            display: block !important;
            line-height: 1.3 !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;
            padding: 0 !important;
            font-size: 15px !important;
            line-height: 1.6 !important;
            color: #6c757d !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 <br> extras */
        .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
           ======================================== */
        
        .wcf-bump-order-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            margin-bottom: 10px !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;
        }
        
        /* 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;
            }
        }
        

    /* ========================================
       ESTILOS PRINCIPAIS DAS ABAS
       ======================================== */
    
    /* Container principal das abas */
    .payment-tabs-container {
        display: flex;
        background: #f7f7f7;
        border-radius: 8px;
        overflow: hidden;
        padding: 4px;
        position: relative;
        z-index: 10;
    }
    
    @media (min-width: 1024px) {
        .payment-tabs-container {
            margin-bottom: 17.5px;
        }
    }
    
     @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 4px 0 12px !important;
       
    }
}
    p.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated {
    DISPLAY: NONE ! IMPORTANT;
}
    /* Estilo individual das abas */
    .payment-tab {
        flex: 1;
        padding: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.2s ease;
        font-weight: 600;
        font-size: 16px;
        color: #333;
        border-radius: 6px;
        margin: 0 3px;
    }
    

    /* Estado hover das abas */
    .payment-tab:hover {
        background: rgba(42, 187, 172, 0.08);
    }
    h3#payment_options_heading:before {
    display: none !important;
}

    /* Estado ativo das abas */
    .payment-tab.active {
        background: white;
        color: #2abbac;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    /* Ícones SVG nas abas */
    .payment-tab svg {
        height: 20px;
        width: 20px;
        transition: all 0.2s ease;
        vertical-align: middle;
        fill: currentColor;
    }
    
    /* Imagens nas abas */
    .payment-tab img {
        height: 20px;
        transition: all 0.2s ease;
        vertical-align: middle;
        filter: brightness(0);
    }
    
    /* Estado ativo para imagens */
    .payment-tab.active img {
        filter: invert(67%) sepia(29%) saturate(1064%) hue-rotate(133deg) brightness(88%) contrast(89%);
    }
    
    /* Estado ativo para SVG */
    .payment-tab.active svg {
        color: #2abbac;
        fill: #2abbac;
    }
    
    /* Ícone do cartão quando não está ativo */
    .payment-tab-card svg {
        color: #000000;
        fill: #000000;
    }
    
    /* Ícone do cartão quando ativo */
    .payment-tab-card.active svg {
        color: #2abbac;
        fill: #2abbac;
    }
    
    /* Ícone do PIX quando não está ativo */
    .payment-tab-pix svg {
        color: #000000;
        fill: #000000;
    }
    
    /* Ícone do PIX quando ativo */
    .payment-tab-pix.active svg {
        color: #2abbac;
        fill: #2abbac;
    }
    
    /* ========================================
       WRAPPER DE CONTEÚDO
       ======================================== */
    
    /* Wrapper para conteúdo com altura condicionada */
    .payment-content-wrapper {
        position: relative;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
    }
    
    /* Altura mínima para PIX */
    .pix-mode .payment-content-wrapper {
        min-height: 225px;
    }
    
    /* Altura mínima para cartão */
    .card-mode .payment-content-wrapper {
        min-height: 272px;
    }
    
    /* ========================================
       EFEITO DE CARREGAMENTO (SKELETON) - MELHORADO
       ======================================== */
    
    /* Container de carregamento */
    .payment-content-loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 5;
        backdrop-filter: blur(2px);
    }
    
    /* Item do skeleton base */
    .payment-skeleton-item {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 4px;
        margin-bottom: 12px;
    }
    
    /* Animação shimmer melhorada */
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    
    /* Container do skeleton */
    .payment-skeleton-container {
        width: 100%;
        max-width: 100%;
    }
    
    /* ========================================
       SKELETON PARA CARTÃO - REFLETINDO LAYOUT REAL
       ======================================== */
    
    /* Container principal do cartão */
    .payment-skeleton-card {
        width: 100%;
        padding: 20px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Label do número do cartão */
    .payment-skeleton-card .payment-skeleton-label-card-number {
        height: 18px;
        width: 140px;
        margin-bottom: 8px;
        border-radius: 3px;
    }
    
    /* Campo número do cartão */
    .payment-skeleton-card .payment-skeleton-card-number {
        height: 52px;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    
    /* Label do nome do titular */
    .payment-skeleton-card .payment-skeleton-label-cardholder {
        height: 18px;
        width: 280px;
        margin-bottom: 8px;
        border-radius: 3px;
    }
    
    /* Campo nome do titular */
    .payment-skeleton-card .payment-skeleton-cardholder {
        height: 52px;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    
    /* Container para vencimento e CVV */
    .payment-skeleton-card .payment-skeleton-row {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    /* Coluna esquerda - vencimento */
    .payment-skeleton-card .payment-skeleton-col-left {
        flex: 1;
    }
    
    /* Coluna direita - CVV */
    .payment-skeleton-card .payment-skeleton-col-right {
        flex: 1;
    }
    
    /* Label do vencimento */
    .payment-skeleton-card .payment-skeleton-label-expiry {
        height: 18px;
        width: 80px;
        margin-bottom: 8px;
        border-radius: 3px;
    }
    
    /* Campo vencimento */
    .payment-skeleton-card .payment-skeleton-expiry {
        height: 52px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    
    /* Label do CVV */
    .payment-skeleton-card .payment-skeleton-label-cvv {
        height: 18px;
        width: 40px;
        margin-bottom: 8px;
        border-radius: 3px;
    }
    
    /* Campo CVV */
    .payment-skeleton-card .payment-skeleton-cvv {
        height: 52px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    
    /* ========================================
       SKELETON PARA PIX - ADAPTÁVEL AO CONTEÚDO REAL
       ======================================== */
    
    /* Container principal do PIX */
    .payment-skeleton-pix {
        width: 100%;
        text-align: center;
        padding: 20px;
    }
    
    /* QR Code placeholder */
    .payment-skeleton-pix .payment-skeleton-qr {
        height: 120px;
        width: 120px;
        border-radius: 12px;
        margin: 0 auto 24px;
        border: 2px solid #e0e0e0;
        position: relative;
    }
    
    .payment-skeleton-pix .payment-skeleton-qr::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: #f0f0f0;
        border-radius: 8px;
    }
    
    /* Título do PIX */
    .payment-skeleton-pix .payment-skeleton-pix-title {
        height: 28px;
        width: 70%;
        margin: 0 auto 16px;
        border-radius: 6px;
    }
    
    /* Subtítulo do PIX */
    .payment-skeleton-pix .payment-skeleton-pix-subtitle {
        height: 20px;
        width: 90%;
        margin: 0 auto 20px;
        border-radius: 4px;
    }
    
    /* Instruções do PIX */
    .payment-skeleton-pix .payment-skeleton-instructions {
        height: 16px;
        width: 85%;
        margin: 0 auto 8px;
        border-radius: 3px;
    }
    
    .payment-skeleton-pix .payment-skeleton-instructions-small {
        height: 14px;
        width: 75%;
        margin: 0 auto;
        border-radius: 3px;
    }
    
    /* ========================================
       COMPATIBILIDADE COM WOOCOMMERCE
       ======================================== */
    
    /* Reset dos métodos de pagamento */
    .wc_payment_methods {
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    
    /* Ocultar apenas os labels dos radio buttons */
    .wc_payment_methods > li > label {
        display: none !important;
    }
    
    /* Manter outros labels visíveis */
    .wc_payment_methods .payment_box label,
    .wc_payment_methods .mp-input-label {
        display: block !important;
    }
    
    /* Esconder radio buttons */
    .wc_payment_methods input[type="radio"] {
        position: absolute;
        opacity: 0;
    }
    
    /* Estilo da payment box */
    .payment_box {
        margin-top: 0 !important;
        padding: 16px 0 !important;
        border: none !important;
        background: transparent !important;
    }
    
    /* ========================================
       LAYOUT DOS CAMPOS DE CARTÃO
       ======================================== */
    
    /* Preservar layout original dos inputs de cartão */
    .mp-checkout-custom-dual-column-row {
        display: flex !important;
        gap: 16px !important;
    }
    
    .mp-checkout-custom-card-column {
        flex: 1 !important;
    }
    
    div#mp-checkout-custom-installments-card andes-dropdown#\#mp-checkout-custom-installments button.andes-dropdown__trigger {
    padding: 0px !important;
}
    
    /* Garantir que o label CVV esteja visível */
    .mp-input-label[data-cy="input-label"] {
        display: block !important;
    }
    
    /* Estilos específicos do Mercado Pago */
    .mp-checkout-custom-card-form {
        gap: 8px !important;
    }
    
    @media (max-width: 600px) {
        .mp-checkout-custom-card-form {
            gap: 0px !important;
        }
        
        .mp-checkout-custom-dual-column-row {
            display: flex !important;
            flex-direction: row !important;
            gap: 28px !important;
            width: 100% !important;
        }
        
        .mp-checkout-custom-card-column {
            flex: 1 !important;
            width: 50% !important;
            min-width: 0 !important;
        }
    }
    
    /* ========================================
       CORREÇÕES ESPECÍFICAS
       ======================================== */
    
    /* Evitar duplicação visual do PIX */
    .mp-pix-template-container:not(:first-of-type) {
        display: none !important;
    }
    
    /* Ocultar label específico do Mercado Pago */
    li.wc_payment_method.payment_method_woo-mercado-pago-custom label {
        display: none !important;
    }
    
    /* Prevenir duplicações do PIX de forma mais agressiva */
    .payment_method_woo-mercado-pago-pix .payment_box > div:not(:first-child) {
        display: none !important;
    }
    
    .payment_method_woo-mercado-pago-pix .payment_box > div:first-child {
        display: block !important;
    }
    
    /* Remover duplicações específicas do PIX */
    .payment_method_woo-mercado-pago-pix .payment_box div:contains("Pague de forma segura e instantânea"):not(:first) {
        display: none !important;
    }
    
    .payment_method_woo-mercado-pago-pix .payment_box div:contains("Ao confirmar a compra"):not(:first) {
        display: none !important;
    }
    
    /* Responsividade para tablets */
    @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: 0px 24px 0 24px !important;
            min-height: 225px !important;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .secure-payment-notice span {
            text-align: left !important;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .secure-payment-notice {
            flex-direction: initial  !important;
            gap: 8px !important;
        }
    }
    
    /* Labels do checkout moderno - APENAS MÉTODOS DE PAGAMENTO */
    .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #payment .wc_payment_methods > li > label {
        font-weight: 500;
        display: inline-block;
        width: calc(100% - 10%);
        color: var(--wcf-payment-section-label-color);
        font-size: 15px;
        display: none !important;
    }
    
    /* Altura mínima para métodos de pagamento */
    .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:not( .woocommerce-info ) {
        min-height: 0px !important; 
    }
    
    /* Remover borda do último item */
    .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #payment ul.payment_methods > li:last-child {
        border-top: none !important;
    }

    .payment-skeleton-container,
    .payment-skeleton-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Mobile - largura 314px */
    @media (max-width: 768px) {
        .payment-skeleton-container,
        .payment-skeleton-card {
            max-width: 100%;
        }
    }


    /* 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;
}

/* ========================================
   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
 ======================================== */