/*comum de todos*/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/*loading de submits*/

/*em home/ */

/* Estilos para padronizar o tamanho da imagem */
.card-img-top.img-thumbnail-fixed {
    width: 100%;
    height: 200px; /* Altura fixa para todas as imagens dos cards */
    object-fit: cover; /* Garante que a imagem preencha a área, cortando se necessário */
    object-position: center; /* Centraliza a imagem no corte */
    transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave para o zoom */
}

/* Contêiner para o efeito de zoom */
.img-zoom-container {
    width: 100%;
    height: 200px; /* A mesma altura da imagem, crucial para 'esconder' o zoom que excede */
    overflow: hidden; /* **O ponto chave!** Esconde qualquer parte da imagem que saia do contêiner */
}

/* Efeito de zoom ao passar o mouse */
.img-zoom-container:hover .img-thumbnail-fixed {
    transform: scale(1.1); /* Aumenta a imagem em 10% (ajuste conforme desejar) */
}


.loading {
  cursor: not-allowed;
  opacity: 0.7;
}

.loading::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid #fff;
  border-radius: 50%;
  border-top-color: #eee;
  animation: spin 1s infinite linear;
  vertical-align: middle;
  margin-left: 0.5em;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/*Linha destaque que passa por um texto*/
.linha-destaque {
  display: flex;
  align-items: center;
  text-align: center;
  flex: 1;
}

.linha-destaque::before,
.linha-destaque::after {
  content: '';
  border-bottom: 1px solid;
  margin: 0 0.5rem;
}

.linha-destaque::before {
  flex: 0.3;
}

.linha-destaque::after {
  flex: 1.7;
}

/*carrossel com miniaturas - index. hoteis e hotel*/
   /* Estilos gerais da galeria */
    .gallery-main-image {
        max-height: 400px; /* Define uma altura máxima para a imagem principal */
        object-fit: contain; /* Garante que a imagem seja contida sem cortar */
        width: 100%;
        border-radius: 8px;
    }

    /* Wrapper para as miniaturas, permite posicionamento dos botões */
    .miniaturas-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        overflow: hidden;
        width: 100%;
        height: 130px; /* Altura fixa para o container das miniaturas */
    }

    /* Container das miniaturas, para rolagem horizontal */
    #miniaturas {
        scroll-behavior: smooth;
        height: 100%; /* Ocupa a altura total do wrapper */
        width: 100%;
        display: flex;
        align-items: center; /* Centraliza as miniaturas verticalmente */
        overflow-x: auto; /* Permite rolagem horizontal */
        overflow-y: hidden; /* Esconde a barra de rolagem vertical, se houver */
        scrollbar-width: none; /* Esconde a barra de rolagem para Firefox */
        -ms-overflow-style: none; /* Esconde a barra de rolagem para IE/Edge */
        padding: 0 50px; /* Espaço para os botões de navegação */
    }

    /* Estilo para cada miniatura */
    .thumb {
        flex-shrink: 0; /* Impede que as miniaturas encolham */
        height: 100px;
        width: 150px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.3s ease, border 0.2s ease; /* Adiciona transição para o hover */
        margin-right: 0.75rem;
        border: 2px solid transparent; /* Borda transparente para o estado normal */
    }

    .thumb:hover, .thumb.active {
        transform: translateY(-3px); /* Efeito de elevação no hover */
        border-color: #007bff; /* Borda azul no hover/ativo */
    }

    /* Botões de controle do carrossel de miniaturas */
    .carousel-control-btn {
        background: transparent;
        border: none;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        height: 100%; /* Ocupa a altura total do wrapper */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        width: 40px;
        padding: 0;
        outline: none;
        opacity: 0.9;
        transition: opacity 0.2s ease, background 0.2s ease;
    }

    .carousel-control-btn.left {
        left: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 100%);
    }

    .carousel-control-btn.right {
        right: 0;
        background: linear-gradient(270deg, rgba(0,0,0,0.4) 0%, transparent 100%);
    }

    .carousel-control-btn:hover {
        opacity: 1;
        color: #add8e6; /* Cor azul claro no hover */
        background-color: rgba(0,0,0,0.1); /* Um leve background no hover */
    }

    /* Responsividade para mobile */
    @media (max-width: 768px) {
        .carousel-control-btn {
            width: 30px; /* Botões mais estreitos */
        }

        #miniaturas {
            padding: 0 30px; /* Menos padding */
        }

        .thumb {
            width: 120px; /* Miniaturas menores */
            height: 80px;
        }

        .gallery-main-image {
            max-height: 300px;
        }
    }

    /* Ícones de comodidades */
    .amenity-icon-wrapper {
        width: 40px;
        height: 40px;
        background-color: #e9ecef; /* Um cinza claro para o fundo do ícone */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .amenity-icon-wrapper i {
        color: #343a40; /* Cor escura para o ícone */
    }

    .info-icon-wrapper {
        display: inline-flex; /* Para alinhar o ícone com o texto */
        align-items: center;
        gap: 5px; /* Espaço entre o ícone e o texto */
    }

    .info-icon-wrapper i {
        color: #007bff; /* Cor azul para o ícone de mapa */
    }