/* Estiliza o botão flutuante do WhatsApp */
.whatsapp-float {
  position: fixed; /* Mantém o botão fixo na tela, mesmo ao rolar */
  bottom: 40px; /* Distância da borda inferior da tela (diminuir para mover mais para baixo, ex.: 30px) */
  right: 15px; /* Distância da borda direita da tela (diminuir para mover mais para a direita, ex.: 10px) */
  width: 50px; /* Largura do botão */
  height: 50px; /* Altura do botão */
  background-color: #25d366; /* Cor de fundo (verde do WhatsApp) */
  border-radius: 50%; /* Torna o botão circular */
  text-align: center; /* Centraliza o conteúdo (ícone) */
  box-shadow: 2px 2px 3px #999; /* Sombra para dar profundidade */
  z-index: 1000; /* Garante que o botão fique acima de outros elementos (aumente se necessário, ex.: 2000) */
  transition: all 0.3s ease-in-out; /* Animação suave para hover */
}

/* Estiliza o link dentro do botão */
.whatsapp-float a {
  display: flex; /* Usa flexbox para centralizar o ícone */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  width: 100%; /* Ocupa toda a largura do botão */
  height: 100%; /* Ocupa toda a altura do botão */
  text-decoration: none; /* Remove sublinhado do link */
}

/* Estiliza a imagem do WhatsApp */
.whatsapp-float img {
  width: 40px; /* Tamanho da imagem do ícone */
  height: 40px; /* Tamanho da imagem do ícone */
  margin: 10px auto; /* Centraliza a imagem e adiciona margem */
}

/* Efeito ao passar o mouse */
.whatsapp-float:hover {
  background-color: #128c7e; /* Cor mais escura ao passar o mouse */
  transform: scale(1.1); /* Aumenta ligeiramente o botão */
}

/* Responsividade para mobile (telas menores que 600px) */
@media only screen and (max-width: 600px) {
  .whatsapp-float {
    bottom: 30px; /* Distância da borda inferior no mobile (ajuste se necessário, ex.: 40px) */
    right: 20px; /* Distância da borda direita no mobile (ajuste se necessário, ex.: 40px) */
    width: 50px; /* Tamanho menor para o botão no mobile */
    height: 50px; /* Tamanho menor para o botão no mobile */
  }
  .whatsapp-float img {
    width: 30px; /* Tamanho menor para o ícone no mobile */
    height: 30px; /* Tamanho menor para o ícone no mobile */
    margin: 10px auto; /* Mantém a centralização */
  }
}

/* Estiliza o texto "Entrega Grátis" com a cor da logo */
.frete-gratis, .frete_gratis, .shipping-label, span.frete, div.frete {
  color: #3FB322; /* Verde da logo */
  font-weight: bold; /* Negrito */
  font-size: 16px; /* Tamanho da fonte (ajuste, ex.: 14px para menor) */
}

/* Estiliza a calculadora de frete com a cor da logo */
#formCalcularCep label {
  color: #3FB322; /* Verde da logo para "Calcule a Entrega" */
  font-weight: bold; /* Negrito */
}
.input-cep {
  border-color: #3FB322; /* Borda verde da logo para o campo de CEP */
  padding: 8px; /* Espaçamento interno */
}
.btn {
  color: #3FB322; /* Texto "OK" em verde da logo */
}

/* Estilo para variações disponíveis */
.atributo-item:not(.indisponivel) {
  background-color: inherit !important;
  color: #206333 !important; /* verde escuro igual ao aviso */
  border: 1px solid #c3e6cb !important;
  transition: background-color 0.3s ease;
}

/* Quando o cliente passa o mouse por cima */
.atributo-item:not(.indisponivel):hover {
  background-color: #d1eed9 !important; /* verde um pouco mais escuro */
}


/* Estilo para variação indisponível */
.atributo-item.indisponivel {
  position: relative;
  background-color: inherit !important;
  color: inherit !important;
  border: 1px solid #c3e6cb !important;
  transition: background-color 0.3s ease;
    
}

/* Quando o cliente passa o mouse por cima */
.atributo-item.indisponivel:hover {
  background-color: #f8d7da !important; /* vermelho um pouco mais escuro */
}

/* 🔴 Selo ESGOTADO centralizado sobre o dia */
.atributo-item.indisponivel::after {
  content: "ESGOTADO";
  position: absolute;
  top: 50%; /* centraliza verticalmente */
  left: 50%; /* centraliza horizontalmente */
  transform: translate(-50%, -50%) rotate(-25deg); /* central e inclinado */
  font-size: 12px;
  font-weight: 600;
  color: rgba(176, 42, 55, 0.45); /* tom leve */
  background-color: rgba(255, 255, 255, 0.55); /* fundo translúcido */
  padding: 1px 6px;
  border: 1px solid rgba(176, 42, 55, 0.4);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}


/* Remove o popover original da Loja Integrada */
a.with-popover[rel="popover"] + .popover {
  display: none !important;
}

/* Tooltip customizado */
a.with-popover[rel="popover"] {
  position: relative;
}

a.with-popover[rel="popover"]:hover::after {
  content: "Selecione um dia disponível";
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #e3f6e8;  /* verde claro suave */
  color: #1f3525;             /* verde escuro para contraste */
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 999;
  border: 1px solid #c3e6cb;
  font-weight: 500;
}