/* =================================================================== */
/* == NOVOS ESTILOS PARA O BANNER PRINCIPAL (HOME) - v4 COM DESTAQUE == */
/* =================================================================== */

/* --- ESTILOS GERAIS DO BANNER --- */
.main-search-holder {
    text-align: center;
}

/* --- TÍTULO E SUBTÍTULO --- */
.hero-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    /* O tamanho da fonte agora vai no elemento filho para melhor controle */
    color: #FFFFFF;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.75);
    margin-bottom: 15px;
    line-height: 1.4; /* Aumenta o espaço entre as linhas se o título quebrar */
}

.form-group{
    margin-bottom: 0px;
}

/* ESTILO PARA O DESTAQUE DO TÍTULO (NOVO!) */
.hero-highlight {
    display: inline-block; /* Essencial para aplicar padding e background */
    font-size: 55px; /* O tamanho da fonte vem para cá */
    font-weight: 700;
    line-height: 1.3;
    padding: 5px 20px; /* Espaçamento interno para criar o "box" */
   }

.main-search-holder .lead {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #f0f0f0;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    margin-bottom: 35px;
}

/* --- BARRA DE BUSCA (DESKTOP) --- */
.main-search-wrapper {
    max-width: 680px;
    margin: 0 auto;
}

.main-search-wrapper .inner {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 15px;
    padding: 8px; /* Mantém o padding interno da caixa */
    width: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #fff;
    /* Adicionado para garantir que os itens se ajustem e se espalhem corretamente */
    justify-content: space-between; /* Distribui o espaço entre os itens */
}

.main-search-wrapper .column-item.search-group {
    flex-grow: 1; /* Faz o campo de busca ocupar o máximo de espaço disponível */
    margin-right: 8px; /* Adiciona um pequeno espaçamento entre o input e o botão */
    width: 90%;
}

.main-search-wrapper .column-item.for-btn {
    flex-shrink: 0; /* Previne que o botão encolha */
    width: 10%;
}

#busqueda_principal.form-control {
    background: transparent;
    border: none;
    box-shadow: none !important;
    height: 50px;
    padding: 0 20px;
    font-size: 16px;
    color: #333;
    font-family: 'Quicksand', sans-serif;
    width: 100%; /* Garante que o input ocupe todo o espaço disponível dentro do seu container flex */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura total */
}

#busqueda_principal.form-control::placeholder {
    color: #888;
    font-weight: 400;
}

#btn-buscar-principal.btn {
     /* Deixa a largura do botão ser definida pelo seu conteúdo (ícone) */
    height: 50px;
    border-radius: 50%;
    background-color: #00A2DC;
    border: none;
    color: #fff;
    font-size: 0; /* Esconde o texto para mostrar apenas o ícone no desktop */
    padding: 0 20px; /* Adiciona padding para o botão ter uma área clicável decente */
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    /* Garante que o botão não seja espremido */
    white-space: nowrap; /* Previne que o conteúdo do botão quebre em várias linhas */
}

#btn-buscar-principal:hover {
    background-color: #0056b3;
}

#btn-buscar-principal:before {
    font-family: 'FontAwesome';
    content: "\f002";
    font-size: 20px;
    position: absolute; /* Permite centralizar o ícone com `top` e `left` */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o ícone perfeitamente */
    color: #fff; /* Garante que o ícone seja branco */
    display: block; /* Garante que o pseudo-elemento se comporte como um bloco para o centralizamento */
    width: 100%; /* Garante que o pseudo-elemento ocupe a largura para o centralizamento */
    text-align: center; /* Centraliza o ícone horizontalmente */
}

.main-search-holder .lead {
    /* Aumenta o peso da fonte. O valor padrão é 400 (normal). 
       500 ou 600 são boas opções para um visual mais forte. */
    font-weight: 500;

    /* Adiciona uma sombra sutil ao texto, fazendo-o "saltar" da imagem de fundo.
       Sintaxe: [deslocamento-horizontal] [deslocamento-vertical] [esfumaçamento] [cor] */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);

    /* Opcional: Aumenta levemente o espaçamento entre as letras para um visual mais refinado. */
    letter-spacing: 0.5px; 
}

.footer{
 background: #00A2DC;
 background: linear-gradient(90deg,rgba(0, 162, 220, 1) 0%, rgba(20, 119, 156, 1) 100%);
}

.navbar-bottom .navbar-nav > li {
    padding-left: 10px;
    padding-right: 10px;
}

.section-title h3{
font-family: 'Quicksand', sans-serif;
}

#container-destinos-pais .top-destination-image-bg {
        border-radius: 15px; /* <--- Bordas arredondadas */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden; /* Garante que a imagem de fundo respeite as bordas */
    }

/* =================================================================== */
/* == REGRAS PARA CELULAR                       == */
/* =================================================================== */
@media (max-width: 767px) {
    .hero-highlight {
        font-size: 32px; /* Diminui a fonte do destaque no mobile */
        padding: 5px 15px;
    }

    .main-search-holder .lead {
        font-size: 18px;
        padding: 0 15px;
    }

    .main-search-wrapper {
        padding: 0 15px;
    }

#container-destinos-pais > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px; /* <--- Espaçamento vertical entre os cards */
    }

#container-destinos-pais .top-destination-image-bg {
        border-radius: 15px; /* <--- Bordas arredondadas */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden; /* Garante que a imagem de fundo respeite as bordas */
    }
    
    .main-search-wrapper .inner {
        flex-direction: column; /* Coloca os itens em coluna no mobile */
        padding: 15px;
        /* Remover justify-content: space-between; se foi adicionado no desktop e não faz sentido aqui */
    }
    
    .main-search-wrapper .column-item.search-group {
        width: 100%; /* Faz o campo de busca ocupar 100% da largura no mobile */
        margin-right: 0; /* Remove o espaçamento à direita no mobile */
        margin-bottom: 10px; /* Adiciona espaçamento abaixo do input antes do botão */
    }

    .main-search-wrapper .column-item.for-btn {
        width: 100%; /* Faz o botão ocupar 100% da largura no mobile */
    }

    #busqueda_principal.form-control {
        text-align: center;
        height: 48px;
        padding: 0 15px; /* Ajusta o padding para telas menores */
    }
    
    #btn-buscar-principal.btn {
        width: 100%;
        margin-top: 0; /* Remove a margem superior já que o espaçamento será do item anterior */
        font-size: 16px;
        padding: 0 15px; /* Ajusta o padding para telas menores */
	border-radius: 50px;
    }
    
    #btn-buscar-principal:before {
       position: static; /* Remove o posicionamento absoluto para que o ícone se alinhe com o texto */
       transform: none; /* Remove a transformação para o alinhamento estático */
       margin-right: 10px; /* Adiciona espaçamento entre o ícone e o texto "Pesquisar" */
       color: #fff; /* Garante que o ícone seja branco */
       display: inline-block; /* Permite que o ícone e o texto fiquem na mesma linha */
    }

    #btn-buscar-principal:after {
        font-family: 'Quicksand', sans-serif;
        font-weight: 500;
        color: #fff; /* Garante que o texto seja branco */
    }
}


/* =================================================================== */
/* == CSS FINAL E ROBUSTO PARA OS CARDS DE DESTAQUE                 == */
/* =================================================================== */

#htmlDestacados .package-grid-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #EAEAEA;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.2s ease-in-out;
}

#htmlDestacados .package-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* --- MUDANÇA CRÍTICA: O contêiner de conteúdo agora é um flex container vertical --- */
#htmlDestacados .package-grid-item .content {
    padding: 15px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column; /* Organiza os filhos em coluna */
}

#htmlDestacados .package-grid-item a {
    color: #1098C4; /* Este é um azul padrão de links, muito comum em temas. */
}

#htmlDestacados .content h5 {
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    font-weight: 600;
    margin: 0;
    margin-bottom: 8px;
}

.destaque-location {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 12px;
}

.destaque-location .fa-map-marker {
    margin-right: 5px;
    color: #888;
}

/* --- MUDANÇA CRÍTICA: ESTILIZANDO O NOVO RODAPÉ DO CARD --- */
.card-footer {
    display: flex;
    justify-content: space-between; /* Coloca estrelas na esquerda e preço na direita */
    align-items: flex-end;      /* Alinha os itens pela base */
    margin-top: auto;             /* A MÁGICA: Empurra o rodapé para o fundo do card */
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

#htmlDestacados .raty-wrapper .star-rating-read-only {
    display: inline-block;
}

#htmlDestacados .raty-wrapper .star-rating-read-only img {
    width: 16px !important;
    height: 16px !important;
}

.price-and-fav {
    text-align: right;
}

.price-and-fav .btn {
    padding: 0;
    background: none;
    border: none;
    font-size: 18px;
    margin-bottom: 5px;
    color: #666;
}

.price-and-fav .price {
    font-size: 18px; 
    font-weight: 700;
    line-height: 1;
}

.price-and-fav .oldprice {
    font-size: 13px;
    text-decoration: line-through;
    line-height: 1;
}

/* O CSS antigo e problemático não é mais necessário */
#htmlDestacados .absolute-in-content { display: none; }