/* =================================================================== */
/* == 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; }

/* =================================================================== */
/* == MELHORIAS DE NAVEGAÇÃO (DESKTOP E MOBILE)                     == */
/* =================================================================== */

/* --- 1. INDICADOR DE DROPDOWN NO DESKTOP --- */
/* Estiliza a seta que indica um submenu */
.navbar-arrow .nav > li.dropdown > a .caret {
    margin-left: 5px;
    border-top-color: #FFFFFF !important; /* Garante que a seta seja branca */
    opacity: 0.8;
}

/* Esconde a seta padrão dentro de submenus para não poluir */
.navbar-arrow .nav > li.dropdown .dropdown-menu a .caret {
    display: none;
}


/* --- 2. MELHORIAS NO MENU MOBILE (SLICKNAV) --- */

/* Permite a rolagem vertical do menu quando ele for maior que a tela */
.slicknav_nav {
    max-height: 75vh; /* Limita a altura a 75% da altura da tela */
    overflow-y: auto; /* Adiciona uma barra de rolagem se necessário */
    overflow-x: hidden;
}

/* Garante que os submenus (Passeios, Transfers) apareçam no mobile */
.slicknav_nav .dropdown-submenu .dropdown-menu {
    display: block;      /* Garante que o submenu seja visível */
    position: static;    /* Remove o posicionamento absoluto que quebra o layout no mobile */
    background: none;    /* Remove o fundo branco do dropdown desktop */
    border: none;
    box-shadow: none;
    padding-left: 15px;  /* Adiciona um recuo para indicar hierarquia */
}

/* Estilo para os links dentro do submenu no mobile */
.slicknav_nav .dropdown-submenu .dropdown-menu > li > a {
    padding: 8px 10%;
    font-size: 13px;
    color: #ccc; /* Cor um pouco mais suave para os sub-itens */
}


.slicknav_nav .dropdown-submenu > a:after {
    display: none;
}

.slicknav_arrow{
color: white;
}


/* ================================================== */
/* === ESTILOS PARA O CARRINHO DE COMPRAS VISUAL ==== */
/* ================================================== */

/* Container para o ícone na navbar, para posicionar o badge */
.navbar-icon-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px; /* Ajuste o padding conforme necessário */
}

/* Ícone do carrinho */
.navbar-icon-link #cart-toggle-btn i {
    font-size: 20px;
     color: #555; /* Cor do ícone */
}

/* Badge (contador de itens) */
.navbar-icon-link #cart-item-count {
    position: absolute;
    top: 10px; /* Ajuste a posição vertical */
    right: 5px; /* Ajuste a posição horizontal */
    background-color: #f44336; /* Cor do badge */
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    line-height: 1;
}

/* Dropdown do carrinho */
#cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 340px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 1050;
    border-radius: 4px;
    color: #333;
}

/* Mensagem de carrinho vazio */
#cart-empty-message {
    padding: 50px 20px;
    text-align: center;
    color: #888;
}

/* Lista de itens no carrinho */
#cart-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 350px; /* Altura máxima antes de mostrar a barra de rolagem */
    overflow-y: auto;
}

#cart-items-list li {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

#cart-items-list li:last-child {
    border-bottom: none;
}

#cart-items-list img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
}

#cart-items-list .item-details {
    flex-grow: 1;
    overflow: hidden;
}

#cart-items-list .item-name {
    display: block;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona "..." se o nome for muito longo */
}

#cart-items-list .item-price {
    display: block;
    font-size: 14px;
    color: #007bff; /* Cor do preço */
    font-weight: bold;
}

#cart-items-list .remove-item-btn {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 22px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}
#cart-items-list .remove-item-btn:hover {
    color: #c0392b;
}


/* Rodapé do carrinho */
#cart-footer {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
}

#cart-footer .total-price {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}