:root {
    --font-principal: 'NeuethingSans', system-ui, -apple-system, 'Segoe UI', Roboto,
                      'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
                      'Segoe UI Symbol', 'Noto Color Emoji';
}

/* NeuethingSans local font family */
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_meduim.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NeuethingSans';
    src: url('../fonts/neuethingsans_black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
	font-family: var(--font-principal);
    color: #141a1e;
    background: #F9FAFD!important;
	margin: 0;
	padding: 0;
}

div,a{
-webkit-tap-highlight-color: transparent;
}

.swal2-container.swal2-shown {
    background-color: rgba(255,255,255,.9)!important;
    z-index: 9999!important;
}

.fundo{
	width: 100%;
}

.container{
    max-width: 450px;
    margin:0 auto;
}

/* Cores para ícones SVG dos seletores de pagamento */
:root {
  --gray-500: #6b7280; /* cinza médio */
  --blue-darker: #016fff; /* azul consistente com o tema */
}

/* Desktop: deixar um pouco mais largo */
@media (min-width: 992px){
    .container{ max-width: 640px; }
}

.container_boleto{
	max-width: 700px;
	margin:0 auto;
}

.checkout{
    background-color: #F9FAFD;
    padding:2px 20px 20px 20px;
    margin-top: -6px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.footer{
	font-family: var(--font-principal);
	font-size: 13px;
	color:#96a3ad;
	margin-top: 20px;
	text-align: center;
}


.compra_segura{
	font-family: var(--font-principal);
	font-size: 13px;
	color:#96a3ad;
	text-align: center;
}

.compra_segura i{
	margin-right: 5px;
}

button i {
	float: right;
	margin-right: 10px;
	margin-top: 3px;
}

button {
    font: 18px var(--font-principal);
    font-weight: 400;
    color: #fff;
    padding: 12px 40px;
    border: none;
    border-radius: 4px;
    background: #016fff;
    background: -moz-linear-gradient(left, #016fff 58%, #016fff 100%);
    background: -webkit-linear-gradient(left, #016fff 58%, #016fff 100%);
    background: linear-gradient(to right, #016fff 58%, #016fff 100%);
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 20px;
    z-index: 9999;
    outline: 0;
	height: 54px!important;
}

input {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;    
}

select {   
	cursor:pointer!important;
    background: transparent;
    outline: none;
    background: #ffffff;
    outline: none; 
}

input:focus {
	outline: 0!important;
}

input {
    border: 1px solid #dadfe3;
    padding: 6px 10px; /* menos padding interno */
    border-radius: 8px; /* cantos mais arredondados */
    width:100%;
    font-family: var(--font-principal);
    font-size: 14px; /* texto um pouco menor */
    font-weight: 300;
    color:#1d1d1d;
    margin-top: 3px; /* aproxima do label */
    height: 38px!important; /* altura mais baixa */
}

select {
    font-family: var(--font-principal);
    font-size: 14px;
    font-weight: 300;
    height: 38px !important; /* altura menor */
    border:none;
    border: 1px solid #dadfe3;
    color:#1d1d1d;
    background-color: #ffffff;
    border-radius: 8px; /* cantos mais arredondados */
    width: 100%;
    text-indent: 1px;
    text-overflow: '';
    padding: 6px 10px; /* menos padding interno */
    margin-top:3px;
}

select:focus {
    outline: 0;
}

label{
    display: block;
    font-family: var(--font-principal);
    font-size: 13px;
    color:#1d1d1d;
    text-transform: uppercase;
    margin-top: 10px;
}

/* Checkout: manter labels com capitalização normal */
.bootstrap-wrapper label{
    text-transform: none;
}

ul{
	padding-inline-start: 0px;
}
.header img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.header{
	color:#000000;
	font-size: 14px;
	font-weight: 400;
	padding-top: 15px;
}

.header b{
	font-weight: 400;
	font-size: 14px;
	text-transform: capitalize;
	color:#000000;
}

.pagamento-conteudo{
    color:#3f3f3f;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-principal);
    text-align: justify;
}

#info{
	display: none;
}

.terceiros label{
    font-family: var(--font-principal);
    font-size: 16px;
    color:#00528a;
}

.terceiros input[type=checkbox]{
    display:none; 
}
 
.terceiros .form-check-label {
    font-family: var(--font-principal);
    font-size: 14px;
    color: #3f3f3f;
    font-weight: 400;
}
.terceiros input[type="checkbox"] + label:before {
    border: 1px solid #dadfe3;
    content: "\00a0";
    display: inline-block;
    font-size: 16px;
    font-family: var(--font-principal);
    height: 20px;
    margin: 0 .25em 0 0;
    vertical-align: middle;
    width: 20px;
    font-weight: bold;
    color: #FFF!important;
    border-radius: 4px;
    cursor: pointer;
}
 
.terceiros input[type="checkbox"]:checked + label:before{
	border: 1px solid #016fff;
    background: #016fff;
    color: #FFF!important;
    content: "X";
    text-align: center;
}

.steps{
    position: relative;
    text-align: left;
    padding-bottom: 12px;
    margin-bottom: 10px;
    margin-top: 16px;
}

.steps::after{
    /* Removida barra cinza abaixo do cabeçalho de passos */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: transparent;
    display: none;
}

.steps ul{
    display: inline-flex;
    gap: 22px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: step;
    flex-wrap: wrap;
}

.step{
    display: inline-block;
}

.step a{
    color:#6b7280; /* inativo */
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-principal);
    display: inline-flex;
    align-items: center;
    border-bottom: 0;
    padding-bottom: 12px;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.step a::before{
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.step a:hover{
    color: #374151;
    text-decoration: none;
}

.step a:hover::before{
    border-color: #cbd5e1;
}

.step i{
	display: block;
	font-size: 28px;
}


.active a{
    color:#111827;
    border-bottom: 3px solid var(--cor-primaria, #016fff);
}

.active a::before{
    color: #fff;
    background: var(--cor-primaria, #016fff);
    border-color: var(--cor-primaria, #016fff);
}

.active a:active{
    text-decoration: none;
}

.step a[href^="javascript"]{
    color: #9ca3af;
    cursor: not-allowed;
}

.step a[href^="javascript"]::before{
    border-color: #e5e7eb;
    color: #9ca3af;
    background: #f9fafb;
}

@media (max-width: 576px){
    .steps{ text-align: center; }
    .steps ul{ justify-content: center; gap: 16px; }
}

.frete{
	display: block;
	font-family: var(--font-principal);
	font-size: 11px;
	color:#1d1d1d;
	margin-top: 10px;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 5px;
}


.campo-frete{
	border:1px solid #dfe0e1;
	border-radius: 5px;
	padding: 15px;
    color:#3f3f3f;
	font-size: 16px;
	font-weight: 300;
	font-family: var(--font-principal);
	display: inline-block;
	width: calc(100% - 30px);
}


.campo-frete span{
	font-size: 12px;
}

.campo-frete i {
	font-size: 16px;
	color: #016fff;
	margin-right: 5px;
}

.pagamento{
    display: flex;
    justify-content: center; /* centraliza os botões Cartão, Pix e Boleto */
    align-items: center;
    flex-wrap: nowrap; /* manter lado a lado */
    gap: 8px;
    text-align: left;
    width: 100%;
    margin-top: 20px; /* espaço superior solicitado */
    margin-bottom: 10px;
}

.cartao-campos select{
	width: 100%;
    margin-left: 0px;
}

.input_left{
	margin-left: 20px;
}

.botao{
    color: #3f3f3f; /* igual ao Cartão */
    font-size: 14px;
    font-weight: 500; /* font-medium */
    font-family: var(--font-principal);
    display: flex;
    align-items: center;
    justify-content: center; /* items-center + justify-center */
    gap: 8px; /* space-x-2 */
    cursor: pointer;
    text-align: center;
    border: 1px solid #e5e7eb; /* cinza mais claro para não selecionados */
    border-radius: 8px; /* rounded-md conforme solicitado */
    flex: 1 1 0; /* largura se divide igualmente entre 3 */
    min-width: 0;
    max-width: none;
    padding: 16px 16px; /* py-4 px-4 - mais altura */
    min-height: 44px; /* altura uniforme */
    margin: 0;
    background-color: #ffffff; /* cinza claro */
    transition: border-color .2s ease, color .2s ease, background-color .2s ease; /* transition-colors */
}

.botao:hover{
    border-color: #9ca3af; /* hover:border-gray-400 */
    background-color: #f9fafb; /* leve clareamento no hover */
}

.botao_ativo{
    background-color: #e5e7eb; /* cinza um pouco mais escuro para ativo */
    border: 1px solid var(--cor-primaria);
}

.botao i{
    display: none; /* substituído por SVG */
}

.botao svg{
    display: block;
    width: 20px;
    height: 20px; /* altura do ícone padronizada */
}

.botao span{
    display: inline-block;
    line-height: 1.2;
    white-space: nowrap; /* evita quebra de linha em 'Cartão de crédito' */
    font-weight: 500; /* font-medium */
}

/* Responsivo: duas colunas em telas pequenas, uma coluna em telas muito pequenas */
@media (max-width: 640px){
    .pagamento{
        flex-wrap: nowrap; /* manter todos na mesma linha no mobile */
        justify-content: center; /* manter centralizados também no mobile */
    }
    .botao{
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        padding: 16px 16px; /* mesmo padding do desktop */
        min-height: 40px;
        gap: 6px;
        font-size: 13px;
    }
    .botao svg{ width: 18px; height: 18px; }
    .botao span{
        white-space: nowrap; /* evitar quebra e manter em linha */
    }
}

@media (max-width: 400px){
    .botao{ flex: 1 1 0; }
}

.opcoes {
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.opcoes li {
    display: inline-block;
    margin: 0 8px;
}

.opcoes li a {
    display: inline-block;
    margin: 0 10px;
}

.opcoes li img {
    height: 50px;
}

.error {
	display: none;
	color:#da0202;
	font-size: 11px;
	font-weight: 500;
	font-family: var(--font-principal);
	margin-top:3px;
	text-align: right;
}


.boleto-campo {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px #EAEAEA solid;

}

.boleto-campo a{
	color: blue;
	text-decoration: none;
}
.boleto-campo a:hover {
	color: red;
	text-decoration: none;
}

.boleto-label {
	display: block;
	font-weight: 200;
	color: #000000;
	margin-bottom: 4px;
}
.boleto-titulo {
	font-weight: 600;
	font-size: 20px;
}

.boleto-info {
	display: block;
	margin-bottom: 4px;
}

.boleto-valor {
    color: #368628;
	font-size: 16px;
	font-weight: 400;
}

	.boleto-barras > div {
		max-width: 500px !important;
		margin: 0 auto;
		height: 35px !important;
	}

.icone-bar,
.icone-email,
.icone-data {
	padding-left: 45px;
	background-repeat: no-repeat;
	background-position: 0 5px;
	background-size: 20px;
}

.icone-bar {
	background-image: url(../assets/img/barcode.png);
}

.icone-email {
	background-image: url(../assets/img/email.png);
}

.icone-data {
	background-image: url(../assets/img/date.png);
}


.panel-body{
	margin-top:20px;
	padding: 20px;
	background-color: #ffffff;
}



/* CONFIRMAÇÃO CARTÂO */

.confirmacao_cartao{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	color:#ffffff;
	top: 0;
	left: 0;
	text-align: center;
}

.confirmacao_cartao .fal{
	font-size: 90px!important;
	display: block;
	margin-top: 100px;
}

.confirmacao_cartao .fa{
	font-size: 90px!important;
	display: block;
	margin-top: 100px;
}


.confirmacao_cartao h2{
    color:#ffffff;
	font-size: 28px;
	font-weight: 500;
	font-family: var(--font-principal);
	margin-top: 50px;
}


.confirmacao_cartao p{
	color:#ffffff;
	font-size: 14px;
	font-weight: 400;
	font-family: var(--font-principal);
	text-align: center;
}

.confirmacao_boleto_iframe{
	position: absolute;
	display: block;
	width: 100%;
	height: 100vh;
	color:#ffffff;
	top: 0;
	left: 0;
	text-align: center;
}

.confirmacao_boleto_iframe .fal{
	font-size: 40px!important;
	display: block;
	margin-top: 10px;
	color:#ffffff;
}

.confirmacao_boleto_iframe .fa{
	font-size: 40px!important;
	display: block;
	margin-top: 10px;
	color:#ffffff;
}


.confirmacao_boleto_iframe h2{
    color:#ffffff;
	font-size: 22px;
	font-weight: 500;
	font-family: var(--font-principal);
	margin-top: 10px;
}


.confirmacao_boleto_iframe p{
	color:#ffffff;
	font-size: 14px;
	font-weight: 400;
	font-family: var(--font-principal);
	text-align: center;
	line-height: 10px;
}



.confirmacao_cartao_iframe{
	position: absolute;
	display: block;
	width: 100%;
	height: 180px;
	color:#ffffff;
	top: 0;
	left: 0;
	text-align: center;
}

.confirmacao_cartao_iframe .fal{
	font-size: 40px!important;
	display: block;
	margin-top: 10px;
	color:#ffffff;
}

.confirmacao_cartao_iframe .fa{
	font-size: 40px!important;
	display: block;
	margin-top: 10px;
	color:#ffffff;
}


.confirmacao_cartao_iframe h2{
    color:#ffffff;
	font-size: 22px;
	font-weight: 500;
	font-family: var(--font-principal);
	margin-top: 10px;
}


.confirmacao_cartao_iframe p{
	color:#ffffff;
	font-size: 14px;
	font-weight: 400;
	font-family: var(--font-principal);
	text-align: center;
	line-height: 10px;
}


.botao_boleto{
	background-color: #ffffff;
	font-size: 18px;
	color: #000000;
	padding:8px;
	padding-left:12px;
	padding-right:12px;
	text-decoration: none;
	border-radius: 8px;
}


.aprovado{
	background-color: #1ebb54;

}

.pendente{
	background-color: #d98b1c;

}

.recusado{
	background-color: #d60707;
}

.processando{
	background-color: #3590db;
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9990;
}

/* Aplica a opacidade ao fundo sem afetar o conteúdo */
#preloader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.4; /* Apenas a opacidade no background */
    z-index: 9989; /* Mantém o fundo abaixo do conteúdo */
}

#preloader .content {
    position: relative;
    text-align: center;
    z-index: 9999;
    background-color: #ffffff;
    opacity: 1;
    border-radius: 10px;
    width: 90%;
    max-width: 290px;
    height: 290px;
    padding: 25px;
}

#preloader img {
    width: 120px;
    height: 120px;
    opacity: 1;
    z-index: 9999;
    position: relative;
}

#preloader .title {
    margin-top: 10px;
    font-size: 28px;
    color: #000;
    font-weight: 600;
    opacity: 1;
}

#preloader p {
    margin-top: 10px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    opacity: 1;
}

/* --------------------- */
#preloader_error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9990;
}

/* Aplica a opacidade ao fundo sem afetar o conteúdo */
#preloader_error::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.4; /* Apenas a opacidade no background */
    z-index: 9989; /* Mantém o fundo abaixo do conteúdo */
}

#preloader_error .content {
    position: relative;
    text-align: center;
    z-index: 9999;
    background-color: #ffffff;
    opacity: 1;
    border-radius: 10px;
    width: 90%;
    max-width: 290px;
    height: 290px;
    padding: 25px;
}

#preloader_error img {
    width: 120px;
    height: 120px;
    opacity: 1;
    z-index: 9999;
    position: relative;
}

#preloader_error .title {
    margin-top: 10px;
    font-size: 28px;
    color: #000;
    font-weight: 600;
    opacity: 1;
}

#preloader_error p {
    margin-top: 10px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    opacity: 1;
}


.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    z-index: 10000; /* Garantindo que o botão fique sempre no topo */
}

.close-btn:hover {
    color: #333; /* Muda a cor ao passar o mouse */
}


@media (max-width: 480px) {

	.boleto-barras > div {
		text-transform: scale(0.7);
		max-width: 300px !important;
		margin: 0 auto;
		height: 35px !important;
	}


	.boleto-campo {
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px #EAEAEA solid;
	}


	
}


.checkbox {
	display: block;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	font-size: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
  }

  .checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #eee;
  }

  .checkbox:hover input ~ .checkmark {
	background-color: #ccc;
	border-radius: 3px;
  }
  
  .checkbox input:checked ~ .checkmark {
	background-color: #19c221;
	border-radius: 3px;
  }
  
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
 
  .checkbox input:checked ~ .checkmark:after {
	display: block;
  }
  
  .checkbox .checkmark:after {
	left: 6px;
	top: 1px;
	width: 3px;
	height: 8px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }
  

  .seguro{
	background-color: #19c221;
	color: #ffffff;
	text-align: center;
	height: 30px;
	padding-top:8px;
	border:0;
	font-size: 18px;
  }

  .pix__modal {
	background: #f6f6f8;
	height: 100vh;
	left: 0;
	min-width: 320px;
	overflow: auto;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

.pix__wrapper {
	margin: auto;
	max-width: 873px;
	padding: 20px 20px 65px 20px;
}

.pix__container {
	display: inline-block;
	width: 100%;
}

.pix__titulo {
	color: #5d6f78;
	font-size: 20px;
	font-weight: normal;
	margin: 0;
	letter-spacing: 0.64px;
	line-height: 1.3;
	padding: 38px 0 28px 0;
}

.pix__lista {
	counter-reset: contador;
	list-style: none;
	padding-left: 0;
}

.pix__lista_item  {
	counter-increment: contador;
	margin-bottom: 24px;
	min-height: 27px;
	padding-left: 38px;
	position: relative;
}

.pix__lista_item::before {
	background: #5d6f78;
	border-radius: 100%;
	color: white;
	content: counter(contador);
	font-weight: bold;
	height: 23px;
	left: 0;
	line-height: 23px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 23px;
}

.pix__lista_item--texto {
	display: block;
	color: #5d6f78;
	font-size: 14px;
	letter-spacing: 0.45px;
	line-height: 1.3;
}

.pix__copiar-codigo { max-width: 585px; }

.pix__copiar-codigo--input {
    background-color: #ffffff;
    border: solid 1px #cccccc;
    border-radius: 8px; /* cantos mais arredondados */
    color: #000000;
    height: 43px;
    margin: 3px 0 0;
    padding: 12px 8px 12px 6px;
    width: 100%;
}

.pix__copiar-codigo--input:focus { outline-color: #4d92e3; }

.pix__copiar-codigo .pix__copiar-codigo--copy {
	background-color: #4d92e3;
	color:#ffffff;
    border-radius: 8px; /* uniformizar botões */
}

.pix__copiar-codigo .pix__copiar-codigo--qrcode {
	background-color: #4d92e3;
	color:#ffffff;
    border-radius: 8px; /* uniformizar botões */
}

.pix__qrcode-mobile {
	align-items: center;
	display: none;
	flex-direction: column;
	margin-bottom: 24px;
	padding-top: 3px;
}

.pix__qrcode-mobile--imagem {
	height: 256px;
	width: 256px;
}

.pix__qrcode--img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pix__qrcode-mobile--btn,
.pix__qrcode--btn {
	background: transparent;
	color: #4d92e3;
}
.pix__qrcode-mobile--btn:hover,
.pix__qrcode-mobile--btn:focus,
.pix__qrcode--btn:hover,
.pix__qrcode--btn:focus {
	color: #4d92e3;
	text-decoration: underline;
}

.pix__footer {
	background: #ededed;
	display: flex;
	flex-direction: column;
}

.pix__footer--texto {
	color: #4a4a4a;
	font-size: 12px;
	letter-spacing: 0.39px;
	line-height: 1.5;
}
.pix__footer--valor {
	align-items: flex-end;
	color: #59bb4f;
	display: flex;
	flex-direction: column;
}

.pix__footer--valor .--texto {
	font-size: 13px;
	line-height: 0.9;
}

.pix__footer--valor .--valor {
	font-size: 22px;
	line-height: 1.4;
}

.pix__fechar {
	display: flex;
	justify-content: center;
}

.pix__fechar .pix__fechar--btn {
	background: transparent;
	color: #4d92e3;
	font-size: 16px;
	text-decoration: underline;
	transition: all 0.3s linear;
}

.pix__fechar .pix__fechar--btn:hover { color: #59bb4f; }

@media (min-width: 768px) {
	.--show-codigo .pix__lista {
		padding-top: 0;
		width: 100%;
	}
	.--show-codigo .pix__lista_item:not(:last-child) { margin-bottom: 40px; }
	.--show-codigo .pix__lista_item { padding-top: 2px; }
	.--show-codigo .pix__lista_item::before { top: 0; }
	.--show-codigo .pix__qrcode,
	.--show-codigo .--mostrar-qrcodigo { display: none !important; }
	.--show-codigo .--mostrar-codigo { display: block !important; }

	.pix__main {
		align-items: flex-start;
		display: flex;
		justify-content: space-between;
	}

	.pix__lista {
		padding-top: 10px;
		width: 371px;
	}
	.pix__lista_item { margin-bottom: 20px; }
	.pix__lista_item::before { top: 3px; }

	.pix__qrcode-mobile--imagem {
		height: 198px;
		width: 198px;
	}

	.pix__footer {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.pix__footer--texto {
		margin-bottom: 0;
		width: 415px;
	}
}

@media (max-width: 767px) {
	.--show-qrcode .pix__qrcode-mobile { display: flex; }
	.--show-qrcode .--mostrar-qrcodigo { display: block !important; }
	.--show-qrcode .--mostrar-codigo { display: none !important; }

	.pix__titulo { padding: 0px 0 28px 0; }
	.pix__main {
		padding-left: 8px;
		padding-right: 8px;
	}
	.pix__lista_item:last-child { margin-bottom: 0; }
	.pix__copiar-codigo { padding-bottom: 7px; }
}

.padding{
	padding:25px;
}

.barraBoleto{
	background-color: #fff;
	position: fixed;
	width: 100%;
	min-height: 74px;
			  margin-top: 0px;
			  box-shadow: 0 0 30px black;
	padding: 0 15px 5px;
	z-index: 999;
  }
  .quase-seu{
	width: 100%;      
	margin: 18px 0 9px;
	display: inline-block;
	font-family: "Open Sans";
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.58px;
	color: #4d92e3;
  }
  .confira-seu-e-mail{
	width: 100%;
	margin: 0 15px 0 0;
	font-family: "Open Sans";
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.45px;
	color: #5d6f78;
  }
  .caso-nao-tenha-pago{
	width: 100%;
	margin: 5px 0 15px;
	font-family: "Open Sans";
	font-size: 14px;
	letter-spacing: 0.45px;
	text-decoration: underline;
	color: #4d92e3;
	cursor: pointer;
  }
  #iobrigado{

			  top: 74px;
	
	position: absolute;
  }
  .esq{
	float: left;
  }
  .vertical-center {
	height:100%; 
	text-align: center;  
  }

  .vertical-center:before {    /* create a full-height inline block pseudo=element */
	content: " ";
	display: inline-block;
	vertical-align: middle;    /* vertical alignment of the inline element */
	height: 100%;
  }

  .clicado{
	background: linear-gradient(to right, #1ebb54 58%, #1ebb54 100%)!important;
    border: 1px solid #1ebb54!important;
	color:#ffffff!important;
  }

  .input-frete {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }

  .entrega{
	font-size: 11px;
	color: #8c8c8c;
  }
  
  /* Hide the browser's default radio button */
  .input-frete input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom radio button */
  .input-frete .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .input-frete:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .input-frete input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .input-frete .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .input-frete input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .input-frete .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
  }
  
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
 
:target {
  scroll-margin-top: .8em;
}

.custom-card-orderbump .card-orderbump {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
}

.custom-card-orderbump .card-ghost {
    background-color: #fff; /* Fundo branco */
    border: 1px solid #dadfe3; /* Linha cinza claro em volta */
    border-radius: 8px; /* Radius mais visível */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden; /* garante canto inferior contínuo com a faixa */
}
.custom-card-orderbump .card-ghost.selected {
    border-color: #22c55e; /* Verde quando selecionado */
}

.custom-card-orderbump .row {
    display: flex;
    flex-wrap: nowrap;
    gap: .9rem; /* respiro entre imagem e conteúdo */
    padding: .6rem .85rem; /* menos espaçamento vertical */
}

.custom-card-orderbump .col-auto {
    max-width: 120px;
}

.custom-card-orderbump .col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* manter conteúdo no topo */
    gap: .15rem; /* aproxima título e preço */
}

.custom-card-orderbump img {
    border-radius: 0.25rem;
    max-width: 100%;
}

.custom-card-orderbump .h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .12rem; /* textos mais próximos */
    line-height: 1.15;
}

.custom-card-orderbump .card-text {
    font-size: 0.775rem;
    color: #6c757d;
}

.custom-card-orderbump .del {
    text-decoration: line-through;
    color: #6c757d;
    font-size: 0.875rem;
}

.custom-card-orderbump .fw-semibold {
    font-weight: 700; /* negrito */
    font-size: 1rem;
    color: #111;
    margin-top: .35rem; /* mais espaço acima do preço */
    line-height: 1.15;
}
.custom-card-orderbump .card-text {
    color: #4b5563; /* cinza médio para descrição */
    margin-top: .06rem;
    margin-bottom: .2rem; /* espaço reduzido entre descrição e preço */
}

/* Linha de seleção inferior com fundo verde claro */
.custom-card-orderbump .select-row {
    display: flex;
    align-items: center;
    gap: .75rem; /* distância maior do ícone para o texto */
    background-color: #eaf9ef; /* Verde bem claro */
    border-top: 1px solid #22c55e;
    padding: .75rem .95rem; /* altura da faixa aprimorada */
    margin-top: .4rem; /* espaço maior entre conteúdo e faixa */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.custom-card-orderbump .select-text {
    font-size: .92rem;
    color: #0a0a0a;
    font-weight: 700;
    line-height: 20px; /* igual ao tamanho do novo checkbox para alinhar verticalmente */
    letter-spacing: .2px;
    text-transform: none; /* não forçar caixa alta */
}

/* Evitar caixa alta herdada do elemento label no card do orderbump */
.custom-card-orderbump label.card-orderbump {
    text-transform: none;
}

/* Alinha título e preço lado a lado */
.custom-card-orderbump .title-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.custom-card-orderbump .title-price .fw-semibold {
    margin-top: 0;
}

.custom-card-orderbump .btn-xs {
    padding: 0.25rem 0.9rem;
    font-size: 0.75rem;
}

.custom-card-orderbump .form-check-input {
    width: 20px!important; /* tamanho otimizado */
    height: 20px!important; /* tamanho otimizado */
    appearance: none;
	background-color: #ffffff;
    border-radius: 4px; /* cantos levemente arredondados */
    cursor: pointer;
    position: relative;
	margin-bottom: 0;
    border: 1.5px solid #d1d5db; /* cinza claro padrão */
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    box-shadow: 0 1px 1px rgba(0,0,0,.05) inset; /* leve profundidade */
}

/* Ícone de check customizado, desenhado com bordas para um visual mais bonito */
.custom-card-orderbump .form-check-input::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 6px;
    border-left: 2.2px solid transparent;
    border-bottom: 2.2px solid transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%) rotate(-45deg) scale(.9);
    transition: border-color .15s ease, transform .15s ease;
}

.custom-card-orderbump .form-check-input:checked {
    background-color: #22c55e;
    border-color: #22c55e;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(34,197,94,.15) inset; /* destaque suave */
}

/* ==========================================
   Cards abaixo do botão "Próximo"
   (inseridos nas etapas 1 e 2 do checkout)
   ========================================== */
.next-cards {
    margin-top: 16px;
    margin-bottom: 16px; /* mesmo espaçamento abaixo dos cards */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.next-card {
    display: flex;
    align-items: center; /* centraliza verticalmente, como no exemplo */
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* cinza claro */
    border-radius: 10px; /* mais próximo do rounded-lg */
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
}
.next-card-badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px; /* impede encolhimento horizontal */
    aspect-ratio: 1 / 1; /* mantém formato circular */
    flex-shrink: 0; /* trava largura no flex container */
    border-radius: 50%;
    background: #334155; /* cinza escuro */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.next-card-badge.checked {
    background: #28a745; /* verde */
    color: #ffffff; /* ícone/numero branco */
}
.next-card-badge.checked i { color: #ffffff; }
.next-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a; /* quase preto */
    line-height: 1.2;
    margin: 0;
}
.next-card-desc {
    font-size: 14px;
    color: #6b7280; /* cinza médio, parecido com exemplo */
    margin-top: 2px;
}
@media (max-width: 576px) {
    .next-card { padding: 14px 16px; }
    .next-card-badge { width: 26px; height: 26px; font-size: 13px; }
    .next-card-title { font-size: 15px; }
    .next-card-desc { font-size: 13px; }
}

/* Ações à direita (ícone de editar) como no exemplo */
.next-card-actions {
    margin-left: auto; /* empurra para a direita */
    display: flex;
    align-items: center;
}
.next-card-actions i {
    color: #9CA3AF; /* text-gray-400 */
    transition: color .2s ease;
}
.next-card-actions i:hover {
    color: var(--cor-primaria);
}

/* ==========================================
   Card da etapa 1: "Dados"
   Envolve campos e botão da primeira etapa
   ========================================== */
.step-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px; /* igual ao espaçamento da lista de cards */
    margin-top: 14px;
}
/* Aproxima apenas o cartão da etapa de Pagamento */
#frmPagar .step-card { margin-top: 6px; }
@media (max-width: 576px) {
  #frmPagar .step-card { margin-top: 4px; }
}
/* Etapa 2 (Entrega): reduzir o espaçamento interno e externo do card */
#validaEndereco .step-card {
    padding-bottom: 12px;
    margin-bottom: 12px;
}
@media (max-width: 576px) {
  #validaEndereco .step-card {
    padding: 14px 16px;
    margin-bottom: 10px;
  }
}
.step-card-header {
    display: flex;
    align-items: center;
    gap: 12px; /* igual ao next-card */
    margin-bottom: 0; /* aproxima ainda mais o texto "Todos..." do título */
}
.step-card-badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px; /* impede encolhimento horizontal */
    aspect-ratio: 1 / 1; /* mantém formato circular */
    flex-shrink: 0; /* trava largura no flex container */
    border-radius: 50%;
    background: #334155;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.step-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}
.step-card-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: -2px 0 14px calc(28px + 12px); /* sobe um pouco mais e mantém alinhamento */
}
/* Espaçamento entre a descrição e os campos do formulário da etapa 1 */
.step-card .bootstrap-wrapper {
    margin-top: 10px;
}
@media (max-width: 576px) {
    .step-card { padding: 16px 16px; }
    .step-card-badge { width: 26px; height: 26px; min-width: 26px; font-size: 13px; }
    .step-card-title { font-size: 15px; }
    .step-card-desc { margin-left: calc(26px + 12px); }
}

/* ==========================================
   Rodapé seguro com logo da Vupim
   ========================================== */
.checkout-footer-legal {
    text-align: center;
    padding: 10px 16px; /* reduzir padding vertical */
    margin-top: 8px;    /* reduzir distância acima do bloco */
    color: #0f172a;
}
.checkout-footer-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px; /* reduzir espaço abaixo do título */
}
.checkout-footer-desc {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 10px; /* reduzir espaço abaixo da descrição */
}
.footer-vupim-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent; /* remover card roxo */
    margin: 4px auto 8px; /* reduzir margem acima/abaixo do logo */
}
.footer-vupim-logo { width: 68px; height: auto; display: block; }
.checkout-footer-provider {
    font-size: 14px;
    color: #374151;
    margin-bottom: 8px;
}
.checkout-footer-legal-phrase {
    font-size: 12px;
    color: #4b5563;
    margin: 6px 0 8px;
}
.checkout-footer-legal-phrase a { color: var(--cor-primaria); text-decoration: underline; }
.checkout-footer-links { display: inline-flex; align-items: center; gap: 12px; }
.checkout-footer-link { font-size: 14px; color: var(--cor-primaria); text-decoration: underline; }
.checkout-footer-sep { color: #9ca3af; }
.checkout-footer-privacy {
    font-size: 14px;
    color: var(--cor-primaria);
    text-decoration: underline;
}
@media (max-width: 576px) {
    .checkout-footer-title { font-size: 14px; }
    .checkout-footer-desc, .checkout-footer-provider, .checkout-footer-link, .checkout-footer-legal-phrase { font-size: 12px; }
}

.custom-card-orderbump .form-check-input:checked::after {
    border-left-color: #fff;
    border-bottom-color: #fff;
    transform: translate(-50%, -56%) rotate(-45deg) scale(1);
}
.custom-card-orderbump .form-check-input:hover {
    border-color: #9ca3af; /* cinza médio no hover quando não selecionado */
}

.custom-card-orderbump .text {
    margin-right: 10px;
}

button {
    width: 100%; /* Faz o botão ocupar toda a largura da coluna */
}

#btn_boleto,
#btn_pix{
    display: none;
}

/* Links legais abaixo do botão de compra */
.legal-links{
    font-size: 12px;
    color: #6b7280; /* gray-500 */
    margin-top: 8px;
    line-height: 1.5;
}
.legal-links a{
    color: var(--cor-primaria);
    text-decoration: underline;
}
.legal-links a:hover{
    filter: brightness(0.95);
}

/* Total (acima dos botões) com margens reduzidas */
.total-compra{
    float: right;
    margin: 6px 0; /* diminui top e bottom */
}

/* Reduz margens verticais dos botões de finalizar */
#btn_cartao,
#btn_pix,
#btn_boleto{
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%; /* w-full */
    background-color: var(--cor-primaria) !important; /* bg-primary */
    border-color: var(--cor-primaria) !important;
    color: #ffffff !important; /* text-white */
    font-weight: 700; /* font-bold */
    padding: 16px 16px; /* py-4 px-4 */
    border-radius: 10px; /* rounded-lg */
    font-size: 18px; /* text-lg */
    transition: background-color 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease; /* transition-colors duration-300 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
}

/* Quando não há orderbump, aumente o espaçamento acima do botão principal */
#btn_cartao.no-orderbump-btn{ margin-top: 16px; }
@media (max-width: 576px){
  #btn_cartao.no-orderbump-btn{ margin-top: 14px; }
}

/* Hover semelhante ao hover:bg-blue-600, respeitando cor primária */
#btn_cartao:hover,
#btn_pix:hover,
#btn_boleto:hover{
  filter: brightness(0.95);
}

/* Estilo unificado para botões padrão Bootstrap usados no checkout */
.btn.btn-success.btn-lg.btn-block,
.btn.btn-success.btn-block{
    width: 100%;
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: #ffffff !important;
    font-family: var(--font-principal);
    font-weight: 700;
    padding: 16px 16px;
    border-radius: 10px;
    font-size: 18px;
    transition: background-color 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn.btn-success.btn-lg.btn-block:hover,
.btn.btn-success.btn-block:hover{
    filter: brightness(0.95);
}