@charset "UTF-8";

.checkout_Geral{ width: 100%; padding: 15px; display: flex; flex-wrap: wrap; max-width: 1280px; margin: 10px auto; justify-content: center; align-items: flex-start;  }

.checkout_BlocoIdentificacao,  .checkout_BlocoPagamento, .checkout_BlocoResumo{ width: 100%; display: flex; flex-wrap: wrap; }



.checkout_Identificacao, .checkout_Endereco, .checkout_Pagamento, .checkout_Resumo, .checkout_Seguranca, .checkout_Frete{ width: 100%; border-radius: 8px; background-color: #fff; padding: 20px; margin: 0 0 20px 0;
    box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.10); -webkit-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.10); -moz-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.10); }

.checkout_Titulo{ font-size: 18px; font-weight: bold; color: #333; width: 100%; margin-bottom: 5px;   }
.checkout_Titulo span{ background-color: #000; color: #fff;  border-radius: 5px; margin-right: 10px; width: 25px; height: 25px; display: inline-block; text-align: center;  }

.checkout_SubTitulo{ font-size: 14px; color: #333; line-height: 20px; width: 100%; margin-bottom: 20px; }

.checkout_subTituloDestaque{ font-size: 15px; color: #333; font-weight: 400; background-color: #dedede; margin-bottom: 20px;  padding: 3px 15px; border-radius: 5px;  }
.form_ckechout{ width: 100%; height: 45px; border-radius: 5px; border: 1px solid #dedede; margin-bottom: 10px; padding: 5px 30px; line-height: 45px; }
.form_ckechout:focus{ border: 1px solid #333; }
.form_labelcheckout{ font-size: 12px; color: #333; line-height: 20px; margin-bottom: 5px; font-weight: 400;  }

.form_btnCheckout{ background-color: #3fc583; text-align: center; width: 100%; border-radius: 5px; font-size: 16px; font-weight: 700; height: 50px; color: #fff;   }
.form_btnCheckout:hover{ opacity: 0.7;}
.form_ckechout::placeholder{ color: #dedede; }

.form_ckechout2{ width: 49%; }
.form_ckechout30{ width: 29%; }
.form_ckechout70{ width: 69%; }
.marginRight2{ margin-right: 2%; }

.ckeckout_btnAdicionarCup, .ckeckout_btnRemoverCup{ font-size: 14px; color: #333; font-weight: 700; width: 28%; background-color: #fff;  }
.ckeckout_btnAdicionarCup:hover, .ckeckout_btnRemoverCup:hover{ opacity: 0.7;}

.checkout_ResumoValores{ display: flex; width: 100%; background-color: #ECECEC; border-radius: 5px; padding: 20px 15px; flex-wrap: wrap; }
.checkout_ResumoTit{ width: 40%; text-align: left; line-height: 30px; font-size: 12px; font-weight: 400; color: #333; }
.checkout_ResumoVal{ width: 60%; text-align: right; line-height: 30px; font-size: 12px; font-weight: 400; color: #333; }
.checkout_ResumoValTot{ width: 60%; text-align: right; line-height: 30px; font-size: 20px; font-weight: 700; color: #069B36; }
.checkout_ResumoTitTot{ color: #069B36; font-size: 14px;  }
.checkout_ResumoValTotSub{ width: 60%; text-align: right; line-height: 20px; font-size: 13px; font-weight: 300; color: #333; }

.checkout_Produtos{ width: 100%; display: flex; flex-wrap: wrap; height: auto; justify-content: center; margin: 15px 0;  }
.checkout_Prod{ width: 100%; display: flex; flex-wrap: wrap; height: auto; margin-bottom: 25px; border-bottom: 1px dotted #dedede;  }
.checkout_Prod:last-child{ border-bottom: none; }
.checkout_ProdFoto{ display: flex; width: 25%; align-items: flex-start; }
.checkout_ProdFoto img{ width: 100%; height: auto; border-radius: 8px;   }
.checkout_ProdDados{ display: flex; flex-wrap: wrap;  width: 65%; padding-left: 15px; }
.checkout_ProdExc{ display: flex; align-items: flex-start; justify-content: center; width: 10%; font-size: 20px; color: #666; cursor: pointer;}
.checkout_ProdExc:hover{ opacity: 0.7;}

.checkout_ProdNome{ display: flex; flex-wrap: wrap; width: 100%;   }
.checkout_ProdNomeTit{ width: 100%; color: #333; font-weight: 700; font-size: 12px; margin-bottom: 2px;  }
.checkout_ProdNomeSub{ width: 100%; color: #666; font-weight: 400; font-size: 12px; }

.checkout_ProdControls{ width: 80%; display: flex; flex-wrap: wrap; position: relative; margin: 15px 0 20px;  }
.checkout_ProdForm{ width: 100%; border-radius: 7px; background-color: #F2F2F2; color: #333; text-align: center; line-height: 35px; }

.checkout_ProdControlsMenos, .checkout_ProdControlsMais{ width: 40px; height: 35px; display: flex; justify-content: center; align-items: center; font-size: 28px; font-weight: 400; position: absolute; color: #999; cursor: pointer;  }
.checkout_ProdControlsMenos:hover, .checkout_ProdControlsMais:hover{ color: #333; }
.checkout_ProdControlsMais{ right: 0; }

.checkout_Seg{ width: 100%; display: flex; flex-wrap: wrap; border-bottom: 1px dotted #dedede; margin: 10px auto; align-items: center;   }
.checkout_Seg:last-child{ border-bottom: none; }
.checkout_SegImg{ width: 30%; display: flex; justify-content: center;  }
.checkout_SegImg img{ width: 60%; height: auto;  }
.checkout_SegDados{ width: 70%; }
.checkout_Seguranca{display:flex; justify-content: space-around; flex-wrap: wrap; }

.checkout_PagamentoTipo{ display: flex; flex-wrap: wrap; width: 100%; border-radius: 7px; border: 1px solid #dedede; padding: 10px 15px; margin-bottom: 20px; cursor: pointer; overflow: hidden; max-height: 55px; transition: max-height 0.4s ease, padding 0.3s ease;  }
.checkout_PagamentoTitulo{ display: flex; width: 100%; font-size: 14px; font-weight: 700; color: #333; align-items: center; justify-content: flex-start; position: relative; }
.checkout_PagamentoTitulo img{ width: 25px; height: auto; margin-right: 15px;  }
.ckeckout_Tag{ background-color: #3fc583; color: #fff; border-radius: 5px; font-size: 10px; padding: 3px 5px; position: absolute; right: 0; font-weight: 400; top: 22px;  }
.ckeckout_TagDesconto{ background-color: #E39100; color: #fff; border-radius: 5px; font-size: 10px; padding: 3px 5px; position: absolute ; right: 127px;  font-weight: 400; top: 22px; }
.ckeckout_TagCinza{ background-color: #999 !important;}

.checkout_PagamentoTipoAtivo{ max-height: 1000px !important; }

.checkout_PagamentoTipo:hover{  border-color: #333; background-color: #F7F7F7; }
.checkout_PagamentoDados{ display: flex; flex-wrap: wrap;  width: 100%; margin: 20px auto; }
.checkout_PagamentoTexto{ font-size: 14px; font-weight: 400; width: 100%; margin-bottom: 10px;  }
.checkout_PagamentoTot{ font-size: 16px; font-weight: 400;  width: 100%; color: #069B36; text-align: center; width: 100%;  }

/*.jp-card, .jp-card-container{ width: 100% !important; min-width: 200px !important; }*/

.checout_avisos{ color: #8E0305; font-weight: 400; text-align: center; line-height: 25px; padding: 0 15px;}
.checkout_Bandeiras{ display: flex; width: 95%; margin: 0 auto 5px;justify-content: space-evenly;  }
.checkout_Bandeiras img{ width: 35px;  border: 1px solid #f3f3f3;  opacity: 0.3;
  filter: grayscale(100%);
  transition: all 0.2s ease;   }

.checkout_Bandeiras img.ativoBandeira {
  opacity: 1;
  filter: grayscale(0);
}

.statusRetorno_Erro {color: #AF0205; font-weight: 700; text-align: center; margin: 10px auto; font-size: 13px;  }
.statusRetorno_Certp {color: #3fc583; font-weight: 700; text-align: center; margin: 10px auto; font-size: 13px;  }

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.loading-overlay .loading-content img {
  height: 40px;
}

.checkout_logadoNome{ color: #111; font-weight: 700; font-size: 16px;}
.checkout_logadoEmail{ color: #333; font-weight: 400; font-size: 12px;}

#logado, #endereco_selecionado{ display: none; width: 100%; height: auto; padding-right: 100px; }
.logado_Bloco{ display: flex; flex-wrap: wrap;  width: 100%; height: auto; background-color:#8bc34a3b; padding: 8px 15px; border-radius: 5px; position: relative; border: 1px solid #8bc34a66;}
.logado_Bloco i{ position: absolute; font-size: 70px; right: 20px; color: #c2d9ab; }
#checkout_SubTitIdentificaLogado{ display: none; }

.btn-secundario, .btn-fechar, .btn-novoEndereco{ position: absolute; right: 15px; bottom: 10px;  font-size: 12px; padding: 3px 6px; background-color: #fff; border-radius: 5px; }
.btn-secundario:hover, .btn-fechar:hover, .btn-novoEndereco:hover{ background-color: #ccc;  }

.btn-fechar{  background-color: #E2E2E2; }
.btn-novoEndereco { right: 70px; background-color: #A97305; color: #fff;  }
.btn-novoEndereco:hover {  background-color: #F8AF1A;   }

.btnSelecionarEndereco{ background-color: #A97305; color: #fff; font-size: 12px; padding: 3px 6px;  border-radius: 5px; }
.btnSelecionarEndereco:hover {  background-color: #F8AF1A;   }

.tituloSelecioneEndereco{ font-size: 20px; font-weight: bold; border-bottom: 1px solid #ccc; width: 100%; text-align: center; margin-bottom: 15px; padding-bottom: 5px;  }

#form-cadastro{ max-height: 1px; overflow: hidden; transition: 0.5s; height: auto; }
.form-cadastroAtivo{ max-height: 1000px !important; overflow: hidden ; transition: 0.5s!important;}
.btnExpandeCadastro{ cursor: pointer; }
.btnExpandeCadastro:hover{ opacity: 0.7; }

.btnCancelarCadastroEndereco{ text-align: center; cursor: pointer; display: none; margin-top: 5px; background-color: #DCD9D9; }
.btnCancelarCadastroEndereco:hover{ opacity: 0.7; }

.modal-checkout {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
}

.modal-content {
  background: #fff;
  max-width: 500px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
}


/* Base do skeleton */
.skeleton {
  background-color: #e0e0e0; /* cinza claro */
  border-radius: 4px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Efeito de "passagem" */
.skeleton::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: loading 1.5s infinite;
}

.checkout_GeralVazio{ width: 100%; padding: 5%; display: flex; justify-content: center; align-items: center; height: 100%; flex-wrap: wrap;}
.tituloVazio{ font-size: 36px; font-weight: 600; color: #333; text-align: center; width: 100%; }
.subtituloVazio{ font-size: 24px; font-weight: 300; color: #666; text-align: center; width: 100%; }

@keyframes loading {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}

.loading-item {
  position: relative;
  overflow: hidden;
}

.loading-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 1s infinite;
}

@keyframes shimmer {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}

/* Tipos de skeleton */
.skeleton-text {
  width: 100%;
  height: 16px;
  margin: 6px 0;
}

.skeleton-title {
  width: 60%;
  height: 24px;
  margin: 12px 0;
}

.skeleton-img {
  width: 100%;
  height: 200px;
  margin-bottom: 12px;
}

.jp-card-container{ width: 100% !important; margin: 0px !important;         transform: scale(1) !important; }
	.jp-card{  min-width: 220px !important; box-shadow:  none !important; }
.jp-card.jp-card-identified .jp-card-back .jp-card-logo, .jp-card.jp-card-identified .jp-card-front .jp-card-logo{  box-shadow:  none !important; }

@media (min-width: 375px) {
	
}


@media (min-width: 425px) {

}
@media (min-width: 768px) {
		.checkout_PagamentoTipo{  max-height: 45px;  }
.ckeckout_Tag, .ckeckout_TagDesconto{  top:0px;  }
}
/*MEDIA SCREEN PARA DESKTOP*/

@media only screen and (min-width: 992px) {
    .checkout_BlocoIdentificacao,  .checkout_BlocoPagamento, .checkout_BlocoResumo{ width: 33.3%; padding: 0 15px;   }
	

		.checkout_PagamentoTipo{  max-height: 50px;  }
.ckeckout_Tag, .ckeckout_TagDesconto{  top:22px;  }
	
    
}

/*MEDIA SCREEN PARA DESKTOP*/

@media only screen and (min-width: 1100px) {
	

}

/*MEDIA SCREEN PARA DESKTOP*/

@media only screen and (min-width: 1280px) {
.checkout_PagamentoTipo{  max-height: 45px;  }
.ckeckout_Tag, .ckeckout_TagDesconto{  top:0px;  }
}

@media only screen and (min-width: 1440px) {

}