.tp-banner-container {
    position: relative !important;
    width: 100%;
    /* No necesitamos overflow hidden ni visible aquí, solo que sea relative */
}

/* El Slider real (imágenes) se queda al fondo */
#slider-header {
    z-index: 1 !important;
}

/* --- EL NUEVO CONTENEDOR FLOTANTE (Overlay) --- */
.buscador-desktop-overlay {
    position: absolute !important;
    /* Centrado perfecto */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Z-INDEX ALTO: Flota por encima del slider */
    z-index: 100 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Flexbox para alinear el logo y los inputs */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* El contenedor inmediato de los inputs */
.buscador-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    /* Permitir que los menús desplegables se salgan del contenedor */
    overflow: visible !important;
}

/* Fila de inputs y botón */
.separado {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.65rem !important; 
    flex-wrap: wrap !important;
}

/* =========================================================
   2. ESTILOS DE LOS DROPDOWNS Y MENÚS
   ========================================================= */

/* Menú general (Bootstrap dropdown) */
.dropdown-menu {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-top: 5px;
    /* Z-Index SUPERIOR a todo lo demás */
    z-index: 99999 !important;
}

/* Estilos específicos para el menú de Categorías (Checkboxes) */
.checkbox-menu {
    max-height: 300px !important; /* Altura máxima */
    overflow-y: auto !important; 
    padding: 10px 0;
}

    .checkbox-menu li {
        padding: 0 15px;
    }

    .checkbox-menu label {
        cursor: pointer;
        display: block;
        width: 100%;
        font-weight: normal;
        margin: 5px 0;
    }

/* =========================================================
   3. ESTILOS VISUALES (Inputs, Botones, Textos)
   ========================================================= */


.customInput {
    width: 225px !important; 
    height: 60px !important; 
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    font-size: 15px !important; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    position: relative !important;
    background: #ffffffd1 !important;
    line-height: 60px !important; 
    display: flex !important;
    align-items: center !important;
    color: #000 !important;
}

/* Contenedor relativo para el input */
.input-wrapper {
    position: relative !important;
    display: inline-block !important;
    width: 225px !important; 
}

    /* -- Placeholders Animados (Localidad y Categoría) -- */
    .input-wrapper:not(.guests-wrapper) .input-placeholder {
        position: absolute !important;
        top: 50% !important;
        left: 15px !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: #3c3b3b !important;
        pointer-events: none !important;
        transition: 0.3s ease-in-out !important;
    }

    .input-wrapper:not(.guests-wrapper) .customInput:focus + .input-placeholder,
    .input-wrapper:not(.guests-wrapper) .customInput:not(:placeholder-shown) + .input-placeholder {
        top: 8px !important;
        font-size: 12px !important;
        color: #E67E22 !important;
    }

/* -- Input de Personas (Placeholder fijo) -- */
.guests-wrapper {
    position: relative !important;
}

.guestsInput {
    text-align: right !important;
    padding-left: 90px !important;
}

.guests-wrapper .input-placeholder {
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #3c3b3b !important;
    pointer-events: none !important;
}

/* Botón Buscar */
.customButton {
    width: 110px !important; 
    height: 60px !important; 
    background-color: #e67e22b8 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    font-size: 16px !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .customButton:hover {
        background-color: #d46918 !important;
    }

.advanced-btn {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Fondo semitransparente o el color de tu marca */
    border: 1px solid #fff !important; /* O el borde que use tu input */
    color: #fff !important;
    width: 60px !important; /* Ajustar según la altura de tus inputs */
    height: 60px !important; /* Ajustar según la altura de tus inputs (igual que customInput) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border-radius: 4px !important; /* O el border-radius que usen tus inputs */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

    .advanced-btn:hover {
        background-color: #fff !important;
        color: #333 !important; /* Color de texto oscuro al hacer hover */
    }

@media (max-width: 768px) {

    /* 1. CENTRADO VERTICAL DEL CONTENEDOR PADRE */
    .buscador-mobile {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 320px !important;
    }

    .buscador-container {
        padding-top: 0 !important;
        height: auto !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. GRILLA CON MÁS AIRE */
    .separado {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Reseteamos anchos fijos */
    .customInput,
    .input-wrapper,
    .customButton {
        max-width: none !important;
    }

    /* Ajustes visuales de inputs */
    .customInput {
        width: 100% !important;
        font-size: 15px !important;
        padding: 0 10px !important;
        height: 60px !important;
        padding-top: 15px !important;
    }

    .customButton {
        height: 60px !important;
        font-size: 15px !important;
        padding: 0 !important;
        font-weight: bold !important;
    }

    /* --- FILA 1: LOCALIDAD (100%) --- */
    .separado > .input-wrapper:first-child {
        width: 100% !important;
    }

    /* --- FILA 2: CATEGORÍA | PERSONAS | BOTÓN --- */
    /* 1. Categoría */
    .categories-wrapper {
        width: calc(35% - 7px) !important;
    }

    /* 2. Personas  */
    .guests-wrapper {
        width: calc(30% - 7px) !important;
    }

    /* 3. Botón  */
    .customButton {
        width: calc(35% - 6px) !important;
    }

    /* --- AJUSTES FINOS DE TEXTOS --- */

    /* Placeholders Centrados */
    .input-wrapper .input-placeholder {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        left: 10px !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: 0.3s ease-in-out !important;
        pointer-events: none !important;
    }

    .guestsInput {
        text-align: left !important;
        padding-left: 10px !important;
    }

    /* --- EFECTO FLOTANTE */

    .input-wrapper .customInput:focus + .input-placeholder,
    .input-wrapper .customInput:not(:placeholder-shown) + .input-placeholder {
        display: block !important; 
        top: 8px !important; 
        font-size: 12px !important; 
        color: #E67E22 !important; 
        transform: none !important; 
    }

    .filter-icon-inside {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        height: 60px !important; /* Altura total del input */
        width: 50px !important; /* Área clickeable */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #555 !important;
        font-size: 20px !important;
        z-index: 20 !important;
        text-decoration: none !important;
        background: transparent !important;
    }

        .filter-icon-inside:active {
            color: #E67E22 !important;
            transform: scale(0.95);
        }

    /* Padding extra al input de localidad para no pisar el icono */
    #localidadInputMobile {
        padding-right: 50px !important;
    }
}

.buscador-mobile {
    background: none !important;
    padding: 25px 15px;
    position: relative;
    min-height: 250px;
}

.mobile-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mobile-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

    .mobile-bg-slide.active {
        opacity: 1;
    }