/* Cruzeiro */
.image-hover-cruzeiro {
  height: 360px;
  overflow: hidden;
  position: relative;
}

.image-hover-cruzeiro img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
}

/* Ícone centralizado */
.image-hover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

/* Estilo para o contêiner da imagem central */
.image-center-custom {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.image-center-custom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estilo para o contêiner de imagem com efeito de sobreposição */
.image-hover {
  width: 100%;
  height: 237px;
  overflow: hidden;
  position: relative;
}

.image-hover img {
  width: 100%;
  height: 237px;
  object-fit: cover;
  display: block;
}

/* Estilo para o contêiner de classificações */
.classificacoes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.classificacao-item {
  display: flex;
  align-items: center;
}

/* Estilo para ícones */
.hicon-120 {
  font-size: 1.5rem;
}

/* Adicione responsividade se necessário */
@media (max-width: 576px) {
  .classificacoes-container {
    justify-content: center;
  }

  .classificacao-item {
    margin: 5px;
  }
}

/* Estilos personalizados para botões */
.btn-custom {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0a3e59;
  --bs-btn-border-color: #0a3e59;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #11499e;
  --bs-btn-hover-border-color: #11499e;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #11499e;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0a3e59;
  --bs-btn-disabled-border-color: #2f5f93;
}

/* Estilos personalizados para texto */
.text-custon {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

/* WhatsApp */
.app-fab {
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.app-fab--left {
  left: 0;
}

.app-fab--right {
  right: 0;
}

.app-fab__container {
  display: flex;
  padding: 10px;
}

.app-fab__container--vertical {
  flex-direction: column;
}

.app-fab__container--horizontal {
  flex-direction: row;
}

.app-fab__item {
  width: 50px;
  margin: 5px;
  cursor: pointer;
}

.app-fab__item .link {
  display: block;
}

.app-fab__item .img {
  max-width: 100%;
}

/* Passeios */
/* Estilos personalizados para o datepicker */
.datepicker {
  font-size: 14px;
  border-radius: 0.375rem;
  box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.1);
}

.datepicker-dropdown {
  border-radius: 0.375rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.datepicker-days .table-condensed th {
  font-weight: bold;
}

.datepicker-days td.active,
.datepicker-days td.active:hover {
  background-color: #2f5f93;
  color: #fff;
  border-radius: 0.375rem;
}

.datepicker-days td:hover {
  background-color: #e8cbb5;
}

.datepicker-days td.disabled {
  color: #bd8c4d;
}

.datepicker-switch,
.prev,
.next {
  color: #2f5f93;
}

/* Ensure the image container has fixed dimensions */
.image-container {
  width: 100%;
  height: 395px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

/* NAV LUA DE MEL*/

.lua-item {
  position: relative;
  font-size: 1.25rem;
  font-weight: 492;
  padding: 1.7rem 0;
  margin-right: -0.5rem;
}

.lua-link {
  padding: 10px 15px;
  /* Ajuste o padding conforme necessário */
  background-color: var(--bs-primary);
  /* Cor de fundo padrão */
  border-radius: 5px;
  /* Borda arredondada */
  transition: background-color 0.3s ease;
  /* Efeito de transição */
  color: white;
  /* Cor do texto padrão */
  text-decoration: none;
  /* Remove sublinhado */
}

.lua-item.active .lua-link {
  background-color: var(--bs-primary);
  /* Cor de fundo quando ativo */
  color: white;
  /* Cor do texto quando ativo */
}

.lua-link:hover {
  background-color: var(--bs-secondary);
  /* Cor de fundo ao passar o mouse */
  color: white;
  /* Cor do texto ao passar o mouse */
}

/* Estilo para o Card */

.card-dash {
  /* Espaçamento interno do cartão (vertical e horizontal) */
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;

  /* Adicionando a borda e sombra para um visual mais agradável */
  border: 1px solid #ddd;
  /* Borda cinza clara */
  border-radius: 10px;
  /* Bordas arredondadas */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Sombra suave */

  /* Adicionando um fundo sutil */
  background-color: #fff;
  /* Fundo branco */
}

/* Estilo do cabeçalho do card */
.card-dash .card-header {
  background-color: #f7f7f7;
  /* Fundo suave para o cabeçalho */
  font-weight: bold;
  /* Título em negrito */
  color: #333;
  /* Cor escura para o texto */
  border-bottom: 1px solid #ddd;
  /* Borda sutil abaixo do cabeçalho */
  padding: 0.75rem 1rem;
  /* Ajuste de espaçamento */
}

.card-dash .card-body {
  min-height: 150px;
  /* Ajuste conforme necessário */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  /* Uso das variáveis de espaçamento */
  color: #555;
  /* Cor do texto */
}

/* Estilo do corpo do card */
/* .card-dash .card-body {
   /*   padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); /* Uso das variáveis de espaçamento */
/*   color: #555; /* Cor do texto */
/* }*/

/* Estilo do footer do card */
.card-dash .card-footer {
  background-color: #f7f7f7;
  /* Fundo suave para o rodapé */
  font-size: 0.875rem;
  /* Texto menor */
  color: #888;
  /* Cor de texto mais suave */
  border-top: 1px solid #ddd;
  /* Borda sutil acima do rodapé */
  padding: 0.75rem 1rem;
}

/* Caso o card seja destacado ou com algum estado especial */
.card-dash.highlight {
  border-color: #007bff;
  /* Borda azul para destaque */
  background-color: #eaf3ff;
  /* Fundo levemente azul */
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  /* Sombra azul para destaque */
}

.card-dash .card-title {
  font-size: 1.25rem;
  color: #333;
  /* Cor do título */
}

/* Responsividade - para telas menores */
@media (max-width: 576px) {
  .card-dash {
    border-radius: 8px;
    /* Bordas menos arredondadas em telas pequenas */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Sombra mais suave em telas pequenas */
  }
}

/* Lembrete Risco */
/* Estilo para o checkbox */
.status-toggle {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  /* Borda inicial */
  background-color: #fff;
  /* Cor de fundo inicial */
  transition: all 0.3s ease;
  /* Transição suave */
}

/* Quando o checkbox estiver selecionado (checked), altere a cor */
.status-toggle:checked {
  background-color: red;
  /* Cor de fundo vermelha */
  border-color: red;
  /* Borda vermelha */
}

/* Estilo para o texto (não riscado inicialmente) */
.status-text {
  transition: color 0.3s ease;
  /* Transição suave para a cor do texto */
  color: black;
  /* Cor do texto normal */
}

/* Quando o checkbox estiver selecionado, altere a cor do texto */
.status-toggle:checked+.status-text {
  color: red;
  /* Cor do texto vermelha */
}

/* Estilo já existente para a classe .completed (risco no texto) */
.completed {
  text-decoration: line-through;
  text-decoration-color: currentcolor;
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
}

hr.divider {
  width: 100%;
  height: 1px;
  background-color: transparent;
  background-image: linear-gradient(90deg,
      rgba(206, 211, 246, 0) 0,
      #bbb 38%,
      #bbb 64%,
      rgba(206, 211, 246, 0) 99%);
  opacity: 0.4;
  border: none;
  margin: 0;
}


/* Estilos para o container de neve */
.snow-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Para não interferir com outros elementos da página */
  z-index: 9999;
  /* Coloca acima de outros conteúdos */
  overflow: hidden;
  /* Evita que a neve saia da tela */
}

/* Estilos para os flocos de neve */
.snowflake {
  position: absolute;
  top: -10px;
  /* Inicia fora da tela */
  color: #fff;
  font-size: 20px;
  opacity: 0.8;
  animation: fall linear infinite;
}

/* Animação dos flocos de neve */
@keyframes fall {
  to {
    transform: translateY(100vh);
    /* Faz a neve cair até a parte inferior da tela */
  }
}