/* ============================ */
/* 📱 BASE APP */
/* ============================ */

body{
  margin: 0;
  padding: 0;
  background: #ededed;
  font-family: Arial, sans-serif;
  padding-bottom: 100px;
}

.etapa{
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.etapa.ativa{
  display: flex;
}

/* ============================ */
/* 📱 HEADER */
/* ============================ */

.checkout-header{
    background: linear-gradient(
    to bottom,
    #4A90E2,
    #3A7BD5
  );
  display: flex;
  align-items: center;
  padding: 4px 14px;
  font-weight: bold;
  font-size: 16px;
  gap: 6px;
}
.checkout-header .header-title{
    color:#fff;
}
.checkout-header .header-left{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
    color:#fff;
    padding:10px;
}

.checkout-header .header-left svg{
  display: block;
}

/* ============================ */
/* 📱 Footer */
/* ============================ */
.checkout-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #fff;
  border-top: 1px solid #ddd;

  z-index: 999;
}

/* ============================ */
/* 📦 LISTA */
/* ============================ */

.checkout-container{
  padding: 10px;
  padding-bottom: 50px;
  background: #ededed;
}

/* item */
.produto-item{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  background: #fff;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  align-items: center;
}

/* imagem */
.produto-img img{
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

/* info */
.produto-info{
  flex: 1;
}

.produto-nome{
  font-size: 14px;
  margin-bottom: 6px;
}

/* ============================ */
/* 🔢 QUANTIDADE */
/* ============================ */

.produto-qtd{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.produto-qtd button{
  width: 28px;
  height: 28px;
  border: none;
  background: #eee;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.produto-qtd span{
  min-width: 20px;
  text-align: center;
  font-size: 14px;
}

/* ============================ */
/* 📦 DIREITA */
/* ============================ */

.produto-right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
}

.produto-remove{
  font-size: 16px;
  cursor: pointer;
}

/* ============================ */
/* 💰 PREÇOS */
/* ============================ */

.produto-preco{
  text-align: right;
}

.preco-antigo{
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.preco-off{
  font-size: 11px;
  color: #00a650;
  font-weight: bold;
}

.preco-atual{
  font-size: 14px;
  font-weight: bold;
}

/* ============================ */
/* ➕ ADD MORE */
/* ============================ */

.add-more{
  background: #fff;
  text-align: center;
  padding: 14px;
  font-weight: bold;
  margin-top: 8px;
}

.add-more a{
    text-decoration: none;
  color: #FF6600;
}

/* ============================ */
/* 💰 RESUMO FIXO */
/* ============================ */

.checkout-resumo{
  padding: 12px;
}

/* linhas */
.linha{
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}

/* economia */
.desconto{
  color: #00a650;
  font-size: 13px;
}

/* total */
.total{
  font-size: 16px;
  font-weight: bold;
}

/* frete */
.frete{
  color: green;
  font-size: 13px;
  margin-bottom: 6px;
}

/* cupom */
.cupom{
  color: #3483fa;
  font-size: 13px;
  margin-bottom: 10px;
}

/* botão */
.bottom-action{
    
  padding: 10px 12px;

  border-top: 1px solid #ddd; /* 🔥 linha igual progresso */
}
.btn-continuar{
  width: 100%;
  background: #4A90E2;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
}

/* ============================ */
/* 💰 PREÇO ESTILO ML */
/* ============================ */

.produto-preco{
  text-align: right;
}

.preco-topo{
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.preco-linha-topo{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.preco-antigo{
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  opacity: 0.8;
}

.preco-off{
  font-size: 12px;
  color: #00a650;
  font-weight: bold;
  white-space: nowrap;
}

.preco-atual{
  font-size: 16px;
  font-weight: bold;
}

/* ============================ */
/* CUPOM
/* ============================ */
.cupom-wrapper{
  margin-bottom: 10px;
}

.cupom-box{
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  gap: 6px;
}

.cupom-box.ativo{
  max-height: 60px;
  margin-top: 6px;
}

.cupom-box input{
  flex: 1;
  padding: 10px;
  border: 1px solid #4A90E2;
  border-radius: 6px;
}


.cupom-box button{
  background: #4A90E2;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: bold;
}

/* ============================ */
/* 🎟️ INPUT CUPOM STATUS */
/* ============================ */

#cupomInput{
  transition: all 0.25s ease;
}

/* ✅ sucesso */
#cupomInput.sucesso{
  border: 1px solid #00a650;
  background: #f0fff4;
}

/* ❌ erro */
#cupomInput.erro{
  border: 1px solid #ff3b30;
  background: #fff5f5;
}

/* ============================ */
/* 🎟️  ETIQUETA ETAPA 4
/* ============================ */
.etiqueta-box{
  background:#fff;
  border:1px solid #000;
  padding:15px;
  font-size:14px;
}

.barcode{
  margin-top:7px;
  height:50px;
  background: repeating-linear-gradient(
    90deg,
    #000,
    #000 2px,
    #fff 2px,
    #fff 4px
  );
}

/* ============================ */
/* 🎟️  BARRA DE PROGRESSO
/* ============================ */
.checkout-progress{
  background: #fff;
  padding: 10px 14px;
  border-bottom: 1px solid #ddd;
}

.progress-text{
  font-size: 13px;
  margin-bottom: 6px;
}

.progress-bar{
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill{
  height: 100%;
  width: 0%;
  background: #4A90E2;
  transition: width 0.3s ease;
}

/* ============================ */
/* 👤 RESUMO TOPO
/* ============================ */

.resumo-topo {
  margin-bottom: 15px;
}

.resumo-topo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 15px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.resumo-topo-box strong {
  font-size: 16px;
}

/* ============================ */
/* 👤 ETAPAS 2, 3, 4, 5 */
/* ============================ */

#etapa-2 .checkout-container, #etapa-3 .checkout-container, #etapa-4 .checkout-container, #etapa-5 .checkout-container{
  padding: 12px;
}


/* ============================ */
/* 🏷️ TÍTULO */
/* ============================ */

#etapa-2 h2, #etapa-3 h2, #etapa-4 h2, #etapa-5 h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}


/* ============================ */
/* 🧾 FORMULÁRIO */
/* ============================ */

.form-checkout{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.form-checkout input{
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
}


/* ============================ */
/* ✨ FOCO INPUT */
/* ============================ */

.form-checkout input:focus{
  outline: none;
  border-color: #4A90E2;
}


/* ============================ */
/* 📦 BOX EXPLICAÇÃO */
/* ============================ */

.box-explicacao{
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #eee;
}


/* ============================ */
/* 🧠 TEXTO EXPLICAÇÃO */
/* ============================ */

.titulo-explicacao{
  font-weight: bold;
  margin-bottom: 6px;
}

.box-explicacao p{
  font-size: 14px;
  margin: 6px 0;
  line-height: 1.4;
}

/* ============================ */
/* 📦 OPÇÃO RETIRADA */
/* ============================ */

.opcao-retirada{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 6px;
}

.opcao-retirada input{
  width: 16px;
  height: 16px;
}

/* ============================ */
/* 📦 CEP COM BOTÃO */
/* ============================ */

.cep-wrapper{
  display: flex;
  gap: 8px;
}

.cep-wrapper input{
  flex: 1;
}

.cep-wrapper button{
  background: #4A90E2;
  color: #fff;
  border: none;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.cep-wrapper button:disabled{
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}
/* ============================ */
/* 💬 MENSAGEM CEP */
/* ============================ */

.msg-cep{
  font-size: 12px;
  color: #666;
  margin-top: -6px;
  margin-bottom: 6px;
}

/* ============================ */
/* 🔒 INPUT DESABILITADO */
/* ============================ */

.form-checkout input:disabled{
  background: #f5f5f5;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
}

/* ============================ */
/* 🏠 CAMPO VIZINHO */
/* ============================ */

#inputVizinho{
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
}

.msg-vizinho{
  display:none;
  font-size:12px;
  color:#e74c3c;
  margin-top:-6px;
}
/* ============================ */
/* ✅ CAMPO AUTO PREENCHIDO */
/* ============================ */

.input-auto{
  border-color: #4CAF50 !important; /* verde suave */
  background: #f6fff6;              /* leve destaque */
}

/* ============================ */
/* 📦 ETIQUETA CORREIOS AJUSTADA */
/* ============================ */

.etiqueta-correios{
  background:#fff;
  border:1px solid #000;
  padding:12px;
  font-size:13px;
}


/* ============================ */
/* 📦 BLOCO DESTINO */
/* ============================ */

.bloco-destino{
  border:1px solid #000;
  padding:8px;
}

/* ============================ */
/* 👥 VIZINHO */
/* ============================ */

.linha-vizinho{
  background:#000;
  color:#fff;
  padding:4px;
  margin-bottom:6px;
}

/* ============================ */
/* 📌 HEADER DESTINATÁRIO */
/* ============================ */

.header-dest{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.titulo{
  background:#000;
  color:#fff;
  padding:4px;
}

/* 🔥 LOGO CORREIOS */
.header-dest img{
  max-width:100px;
  height:auto;
}

/* Complemento */
#dest-comp, #dest-rua, #dest-bairro {
  margin-top:3px;
}
/* ============================ */
/* 📍 CIDADE */
/* ============================ */

.linha-cidade{
  margin-top:3px;
}

.linha-cidade span:first-child{
  margin-right:35px;
}

/* ============================ */
/* 🔻 FINAL (BARCODE + OBS) */
/* ============================ */

.linha-final{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/* 🔥 BARCODE MELHORADO */
.barcode{
  width:55%;
  height:50px;
  background:
    repeating-linear-gradient(
      90deg,
      #000 0px,
      #000 1px,
      #fff 1px,
      #fff 2px,
      #000 2px,
      #000 3px,
      #fff 3px,
      #fff 5px
    );
}
/* 🔥 OBSERVAÇÃO AJUSTADA */
.obs{
  width:45%;
  font-size:12px;
  text-align:center;
}

/* ============================ */
/* 📤 REMETENTE */
/* ============================ */

.remetente{
  margin-top:7px;
}
/* ============================ */
/* 🏠 VIZINHO CORRETO */
/* ============================ */

.vizinho-container{
  margin-bottom:6px;
}

.vizinho-titulo{
  background:#000;
  color:#fff;
  padding:4px;
  font-weight:bold;
}

.vizinho-texto{
  padding:4px;
  background:#fff; /* 🔥 fundo branco agora */
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
}

/* box explicação etapa 4 */
#etapa-4 .box-explicacao{
    margin-top: 10px;
}
/* CARRINHO VAZIO */
#carrinho-vazio{
    margin: 7px;
    background: #fff;
    display:none;
    text-align:center;
    padding:20px;
    color:#555;
}

/* ============================ */
/* 💳 PAGAMENTO MP STYLE */
/* ============================ */

.pagamento-wrapper{
  display:flex;
  flex-direction:column;
  gap:16px;
  background: #ededed;
  font-family: 'Montserrat', sans-serif;
}

/* título */
.pagamento-titulo{
  font-size:18px;
  font-weight:600;
}

/* garantia */
.box-garantia-icontxt{
  padding:7px;
  border: none;
  background: #00a650;
  color: #fff;
  font-size: 11px;
  display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    gap:4px;
    border-radius: 10px 10px 0px 0px;
}
.box-garantia-desc{
    padding: 5px 10px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
}

.subtitulos-etapa5 strong{
    font-size:15px;
}
.subtitulos-etapa5 p{
    font-size:13px;
}
/* lista */
.pagamento-lista{
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  border:1px solid #eee;
  
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
}

/* item */
.pagamento-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}

.pagamento-item:last-child{
  border-bottom:none;
}

.pagamento-item:active{
  background:#f5f5f5;
  transform: scale(0.98);
}

/* esquerda */
.left{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ============================ */
/* 🔘 ÍCONES ESTILO MP */
/* ============================ */

.icon-svg{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.07);

  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-svg svg{
  width:24px;
  height:24px;
}

/* textos */
.texts{
  display:flex;
  flex-direction:column;
}

.texts strong{
    font-size: 15px;
    color: rgba(0, 0, 0, .9);
    line-height: 20px;
}

.texts span{
    font-size: 13px;
    line-height: 18px;
    margin-top: 3px;
    color: rgba(0, 0, 0, .55);
}

/* seta */
.arrow{
  font-size:20px;
  color:#999;
}

/* footer */
.pagamento-footer{
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    line-height: 15px;
    color: rgba(0, 0, 0, .55);
}

/* PAGAR COM MERCADO PAGO */
.box-mp{
  background:#fff;
  border-radius:6px;
  padding:16px;
  margin-bottom:10px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  cursor:pointer;
  border:1px solid #eee;
  
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
}

.box-mp:active{
  background:#f5f5f5;
}

.mp-left{
  display:flex;
  gap:10px;
  align-items:center;
}

.mp-logo{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#ffe600;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* PIX PAGAMENTO*/
/* 🔔 ALERTA TOPO */
.pix-alerta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:16px;
  border-radius:6px;
  margin-bottom:15px;
  font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.pix-alerta-icon{
  min-width:36px;
  min-height:36px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid #00a650;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#00a650;
  font-weight:bold;
}


/* 📦 CARD PIX */

.pix-box{
  background:#fff;
  padding:20px;
  border-radius:6px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.pix-valor{
  font-size:16px;
  margin-bottom:10px;
}
/* ⏳ VALIDADE */
.pix-validade{
  font-size:13px;
  color:#666;
  margin-top:10px;
}

/* DIVISOR */
.pix-divisor{
  border:none;
  border-top:1px solid #eee;
  margin:15px 0;
}
.pix-qr{
  width:200px;
  margin:15px auto;
  display:block;
}

.pix-label{
  margin-top:10px;
  font-size:14px;
  color:#666;
}

/* 📋 INPUT */
#pix-copia{
  width:100%;
  height:80px;
  margin:10px 0;
  padding:10px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:12px;
  resize:none;
}

/* 🔵 BOTÃO */
.pix-btn{
  width:100%;
  background:#009ee3;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s;
}

.pix-btn:hover{
  background:#007eb5;
}

/* ============================ */
/* 🔄 LOADER BOTÃO */
/* ============================ */
.loader{
  width:16px;
  height:16px;
  border:2px solid #fff;
  border-top:2px solid transparent;
  border-radius:50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar{
  to{ transform: rotate(360deg); }
}

/* ============================ */
/* 🧾 BOLETO MODERNO */
/* ============================ */

/* ALERTA */
.boleto-alerta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding:16px;
  border-radius:10px;
  margin-bottom:15px;
  font-size:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.boleto-alerta-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid #00a650;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#00a650;
  font-weight:bold;
}

/* CARD */
.boleto-box{
  background:#fff;
  padding:18px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  margin-bottom:15px;
}

/* CENTRALIZADO */
.boleto-box-center{
  text-align:center;
}

/* LABEL */
.boleto-label{
  font-size:14px;
  color:#555;
  margin-bottom:8px;
}

/* LINHA DIGITÁVEL (🔥 PRINCIPAL) */
.boleto-linha{
  width:100%;
  background:#f5f5f5;
  border:1px solid #ddd;
  border-radius:8px;
  padding:12px;

  font-size:14px;
  font-family:monospace;
  letter-spacing:1px;

  white-space:nowrap;
  overflow-x:auto;

  margin-bottom:10px;
  color:#333;
}

/* BOTÃO PRINCIPAL */
.boleto-btn{
  width:100%;
  background:#000;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s;
  margin-top:8px;
  text-decoration: none;
}

.btn-boleto-box {
    text-align: center;
    padding: 10px;
    margin-top: 10px;
}

.boleto-btn:hover{
  background:#007eb5;
}

/* BOTÃO SECUNDÁRIO */
.boleto-btn-secundario{
    background: #009ee3;
    color: #fff;
    margin-top: 10px;
}

.boleto-btn-secundario:hover{
  background:#ddd;
}

/* WHATSAPP */
.boleto-whatsapp{
  background:#25d366;
}

.boleto-whatsapp:hover{
  background:#1ebe5d;
}

/* TEXTO */
.boleto-info{
  font-size:13px;
  color:#666;
  margin-top:8px;
}

/* DIVISOR */
.boleto-divisor{
  height:1px;
  background:#eee;
  margin:15px 0;
}

/* ============================ */
/* 🔥 LOADING GLOBAL */
/* ============================ */

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

.loader-box{
  background:#fff;
  padding:20px 30px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.spinner{
  width:40px;
  height:40px;
  border:4px solid #ddd;
  border-top:4px solid #009ee3;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 10px;
}

@keyframes spin{
  100%{ transform:rotate(360deg); }
}

/* PAGAMENTO ANALISE */
.pagamento-analise{
  margin: 10px;
}

.analise-box{
  background: #fff8e1;
  border: 1px solid #ffe082;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #8a6d3b;
  text-align: center;
}