/* =========================

   CSS PARA PAGINAS INDIVIDUAIS DE PASSEIOS

   ========================= */

.progress-container {

    display: flex;

    flex-direction: column;

    align-items: last baseline;

    margin-bottom: 5px;

    /* Espaço entre barras */

  }

  .progress-label {

    margin-bottom: 5px;

    /* Espaço entre a legenda e a barra */

    font-size: small;

    text-align: center;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    color: gray;

  }

  .progress-labelNumber {

    margin-bottom: 5px;

    /* Espaço entre a legenda e a barra */

    font-size: large;

    text-align: center;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    color: #4caf50;

    margin: 10px;

  }

  .progress-bar {

    width: 320px;

    height: 10px;

    background-color: #e0e0e0;

    border-radius: 10px;

    overflow: hidden;

    position: relative;

  } 

  @keyframes loadProgress {

from {

  width: 0;

}

to {

  width: 50%;

  /* Ajuste conforme necessário */

}

}

.progress-fill {

height: 100%;

background-color: #4caf50;

width: 50%; /* Esse valor pode ser sobrescrito pelo JavaScript */

border-radius: 10px;

animation: loadProgress 2s ease-out;

}

.number-box {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 56px;

  height: 55px;

  background-color: #258fce;

  color: #f4ed18;

  font-weight: bold;

  border-radius: 100%; /* Bordas arredondadas */

  font-size: 24px;

  text-align: center;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.number-container {

  display: flex;

  justify-content: center; /* Centraliza horizontalmente */

  align-items: center; /* Centraliza verticalmente (se necessário) */

  padding-bottom: 10px;

  margin-top: 15px;

}

*, *::before, *::after {

  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;

}

/* ===== BLOQUEAR EFEITOS HOVER NOS BLOCOS ===== */

.shadow {

  transform: none !important;

  transition: none !important;

}

/* ===== BOTÕES ===== */

.btn-rounded {

  display: inline-block;

  padding: 10px 20px;

  font-size: 1rem;

  color: #103c6a;

  background-color: #FAE82C;

  text-decoration: none;

  border-radius: 50px;

}

.btn-rounded:hover,
.btn-rounded:active {
  background-color: #F3A71E;
  color: #103c6a;
}

/* Os sugeridos usam o mesmo acabamento dos cards da listagem de passeios.
   Esta página também carrega a regra antiga .shadow; aqui liberamos somente
   o hover destes cards. */
.related-tours #latest > li > article.tour-card.shadow {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.related-tours #latest > li > article.tour-card.shadow:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}