<script>

/* PagamentoCartaoCredito */

const elementoPagamentoCartaoCredito = document.getElementById('heading1');

const elementoParagrafoCartaoCredito = document.createElement("p");

elementoParagrafoCartaoCredito.textContent = "APROVAÇÃO IMEDIATA";

elementoParagrafoCartaoCredito.style = "margin: 0; background-color: #08c308; font-size: 9px; padding-

block: 2px; text-align: center"

const anchor = elementoPagamentoCartaoCredito.firstElementChild.firstElementChild

anchor.append(elementoParagrafoCartaoCredito);

anchor.style = "display: flex; gap: 10px; align-items: center; justify-content: space-between"

elementoParagrafoCartaoCredito.classList.add("aprovacao-pagamento");

/* PagamentoPix */

const elementoPagamentoPix = document.getElementById('headingPix');

const elementoParagrafoPix = document.createElement("p");

elementoParagrafoPix.textContent = "APROVAÇÃO IMEDIATA";

elementoParagrafoPix.style = "margin: 0; background-color: #08c308; font-size: 9px; padding-block: 2px;

margin-left: auto; text-align: center"
const anchorPix = elementoPagamentoPix.firstElementChild.firstElementChild

anchorPix.style = "display: flex; gap: 10px; align-items: center"

anchorPix.append(elementoParagrafoPix);

elementoParagrafoPix.classList.add("aprovacao-pagamento");

/* PagamentoBoleto */

const elementoPagamentoBoleto = document.getElementById('headingTwo');

const elementoParagrafoBoleto = document.createElement("p");

elementoParagrafoBoleto.textContent = "APROVAÇÃO EM 3 DIAS";

elementoParagrafoBoleto.style = "margin: 0; background-color: #A3A3A3; font-size: 9px; padding-block:

2px; text-align: center"

const anchorBoleto = elementoPagamentoBoleto.firstElementChild.firstElementChild

anchorBoleto.append(elementoParagrafoBoleto);

anchorBoleto.style = "display: flex; gap: 10px; align-items: center; justify-content: space-between"

elementoParagrafoBoleto.classList.add("aprovacao-pagamento");

elementoParagrafoBoleto.classList.add("aprovacao-pagamento--boleto");

</script>
<style>

:root {

/* Cores dos icones*/

--cor-primaria-vision: #00aeff;

/* Arredondamento das seções */

--arredondamentos: 10px;

/* Cores da Barra Degradê*/

--color_barra1:#000;

--color_barra2:#6696b5;

--color_barra3:#6696b5;

--color_barra4:#00aeff;

/* Cor Pagamento seguro */

--pagseguro: #00aeff;

/* Cor dos números dos passos */

--numeros: #fff;

/*ORERBUMP*/

--fundovctemumaoferta: #f2fbff;

--corvctemumaoferta: #000;

--bordavctemumaoferta: #2587ff;
--borda-order: #00aeff;

--fundo-order:#c8f1ff3b;

--preco-order:#000;

/*TAG de Aprovação*/

--apro-imediata: #31BEB0;

--apro-tresdias: #A3A3A3;

--fontedastags: #fff;

/*RESUMO*/

--cor-total-resumo:#33bb33;

--cor-subtotal-resumo: #000;

p.aprovacao-pagamento {

display: block;

width: fit-content;

top: 5px;

background: var(--apro-imediata);

color:var(--fontedastags);

border-radius: 5px;

padding: 0 8px;

font-weight: bolder;

margin-bottom: 8px;
}

p.aprovacao-pagamento--boleto{

background: var(--apro-tresdias);

input:invalid {

border: none!important;

.cust-info {

padding-bottom: 0;

#cartx-section-checkout_personal_information:focus-within, #cartx-section-
checkout_shipping_information:focus-within, #cartx-section-checkout_payment_method:focus-within {

border: 2px solid var(--cor-primaria-vision);

#cartx-section-checkout_personal_information, #cartx-section-checkout_shipping_information, #cartx-

section-checkout_payment_method {

padding: 20px;

border: 1px solid #00000017;

border-radius: var(--arredondamentos);

margin-bottom: 35px;

box-shadow: rgba(50, 50, 93, 0.10) 0px 0px 7px 0px;

.cust-info.pessonal_method-g legend::before, .cust-info.section-address legend::before, .payment-info

legend::before {

display: inline-block;

content: "1";

background-color: var(--cor-primaria-vision);

border-radius: 50%;

min-width: 20px!important;

max-width: 20px!important;

min-height: 20px!important;

max-height: 20px!important;

font-weight: 800;

text-align: center;

color: white;

line-height: 1.3;

margin-right: 7px;

font-size: 16px

.cust-info.section-address legend::before {

content: "2";

.payment-info legend::before {

content: "3";

.fake_counter_p{text-align:center;}

.prdcts_list .prdct-thumb{margin-left:5px;}
.error_input {

border: 0!important;

div.prices_row.total-price.show-summery, .check-out-right {

background-color: #f4f6f8!important;

.fixd_total {

font-weight: 700!important;

color: var(--cor-total-resumo) !important;

.detail_summery {

font-weight: 800!important;

.panel-group#accordion {

border: 0;

.panel-body.customclass, .text-container.pix_data, .text-container.boleto_data {

border: 0;

padding: 30px 15px!important;

background-color: #f3f3f3;

}
#heading1, #headingPix, #headingTwo {

padding-inline: 0;

.announcement-bar {

position: relative;

@-webkit-keyframes rgbAnimation {

0% { background-position: 0% 50%;}

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%;}

.fake_counter_p {

padding: 20px;

padding-top: 0;

.checkout-header-section .mobile-logo .logo, .checkout-header-section .desktop_ch_logo {

display: flex;

justify-content: space-between;

.order-bump-container {
 display: flex;

flex-direction: column;

justify-items: center;

.order-bump-container::before {

content: "🎉 VOCÊ TEM 1 OFERTA!";

border: 1px solid var(--bordavctemumaoferta);

background-color: var(--fundovctemumaoferta);

border-radius: var(--arredondamentos);

width: fit-content;

font-weight: 700;

color: var(--corvctemumaoferta);

font-size: 14px;

padding: 5px 15px;

margin-inline: auto;

margin-block: 10px 20px;

animation-duration: 5s;

animation-iteration-count: infinite;

animation-name: shakeMe;

animation-timing-function: linear;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

transform: translateZ(0);

.card-header, .card-body {
 border-radius: 0!important;

background:transparent!important;

.order-bump-card {

background-color: var(--fundo-order) !important;

border-radius: var(--arredondamentos) !important;

margin: 0!important;

border: 3px dashed var(--borda-order);

.form-row.mt-2.pt-2{

background-color: transparent !important;

div:has( > div[id^="all-bump"]) {

flex-basis: 250px;

justify-content: center;

div[id^="all-bump"] {

font-size: 16px!important;

color: rgb(0 183 73);

div[id^="all-bump"] > span::before {

content: var(--bump-price);
 font-size: 13px;

color: #ad3c3c;

font-weight: 400;

text-decoration: line-through;

display: block;

.form-group.col {

display: flex;

flex-direction: column;

.form-group.col > label {

align-self: center;

.form-group.col .selectric {

display: flex;

justify-content: center;

width: 90%;

align-items: baseline;

margin-inline: auto;

.order-bump-card .img-block img {

border: 2px solid #add5ad;

border-radius: var(--arredondamentos);
}

.form-group.col .selectric span[class="label"] {

top: 50%!important;

.description-div {

text-align: center;

font-weight: 500;

.order-bump-card .img-block {

margin-bottom: 20px;

div[id^="order-bump-blocker"] {

background-color: white!important;

opacity: 0.7!important;

.form-group.col .selectric-items{

left: calc(50% - 45%)!important;

.product-price-mobile {

color: #33bb33!important;

}
.discount_per {

font-size: 12px!important;

.payment-methods-holder {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 20px;

gap: 10px;

font-size: 11px;

color: #666666;

.-payment-list {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 5px;

.check-out-form{margin-top: 25px !important;}

@keyframes shakeMe

{18%,2%{transform:translate3d(-5px,0,0)}16%,4%{transform:translate3d(5px,0,0)}10%,14%,6%
{transform:translate3d(-5px,0,0)}12%,8%{transform:translate3d(5px,0,0)}18.1%{transform:translateZ(0)}}
.order-bump-card {

background-image: none !important;

.selectric-wrapper .selectric .button {

color: transparent !important;

.bump-product .selectric {

background-color: #ffffff !important;

.form-row.mt-2.pt-2.fixed-variants {

background: transparent !important;

.form-row.mt-2.pt-2.fixed-variants {

max-width: 65% !important;

.panel-body.customclass {

background: transparent !important;

div#all-bump-56128-price {

color: var(--preco-order) !important;

}

.terms-text-payment {

display: none !important;

.col-6.price-value.checkoutSubTotal.text-right.bolderFont {

color: var(--cor-subtotal-resumo) !important;

</style>