.search-bar {
display: flex;
align-items: center;
gap: 15px;
max-width: 80%;
margin: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
position: relative; /* Para posicionar el menú de opciones sobre el contenedor */
}

.date-picker, .guest-input {
cursor: pointer;
padding: 5px;
border-radius: 5px;
background-color: #fff;
position: relative;
}

.guest-input {
flex: 2; /* Aumenta el ancho del campo de huéspedes */
min-width: 200px; /* Asegura un ancho mínimo adecuado */
}

.guest-options {
display: none;
position: absolute;
left: 0;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-10px); /* Inicia desplazado hacia arriba */
}

.guest-options.show {
display: block;
opacity: 1;
transform: translateY(0); /* Se mueve a su posición final */
}

.counter {
display: flex;
align-items: center;
gap: 5px;
}

.counter button {
width: 30px;
height: 30px;
font-size: 16px;
cursor: pointer;
}

.counter input {
width: 40px;
text-align: center;
border: none;
background-color: #f9f9f9;
}

.btn-reservar {
padding: 10px 50px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.btn-reservar:hover {
background-color: #AB3A34; /* Color del botón al pasar el mouse */
}

/* Estilos para pantallas de tablets y móviles */
@media (max-width: 768px) {
.search-bar {
flex-direction: column; /* Cambia la dirección del flex a columna en pantallas pequeñas */
gap: 10px; /* Ajusta el espacio entre los elementos */
}

.date-picker, .guest-input {
width: 100%; /* Hace que los campos ocupen todo el ancho disponible */
box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

.guest-selector {
width: 100%;
position: relative;
}

.guest-options {
position: static; /* Cambia la posición para que se ajuste verticalmente */
margin-top: 5px; /* Ajusta el margen para separarlo del campo de entrada */
transform: translateY(0); /* Asegura que el menú esté en la posición correcta */
}
}

/* Estilos para móviles */
@media (max-width: 600px) {
.search-bar {
gap: 5px; /* Ajusta el espacio entre los elementos en pantallas muy pequeñas */
}
}

// Inicializar el selector de rango de fechas
flatpickr(«#date-range», {
mode: «range»,
dateFormat: «d-m-Y»,
minDate: «today»
});

function toggleGuestOptions(event) {
var options = document.getElementById(«guest-options»);
var isOptionsVisible = options.classList.contains(«show»);
if (isOptionsVisible) {
options.classList.remove(«show»);
} else {
options.classList.add(«show»);
}
event.stopPropagation();
}

function updateCounter(type, change) {
var input = document.getElementById(type);
var currentValue = parseInt(input.value);
var newValue = currentValue + change;

if (newValue >= 0) { // Evita que el valor sea negativo
input.value = newValue;
updateGuests();
}
}

function updateGuests() {
var adults = document.getElementById(«adults»).value;
var children = document.getElementById(«children»).value;
var guestInput = document.getElementById(«guests»);
guestInput.value = adults + » adulto(s), » + children + » niño(s)»;
}

// Cierra el menú de opciones si se hace clic fuera de él
document.addEventListener(«click», function(event) {
var options = document.getElementById(«guest-options»);
if (!options.contains(event.target) && !document.querySelector(«.guest-input»).contains(event.target)) {
options.classList.remove(«show»);
}
});

// Redireccionar a la página de reservas con los parámetros seleccionados
function redirectToReservations() {
var dateRange = document.getElementById(«date-range»).value;
var adults = document.getElementById(«adults»).value;
var children = document.getElementById(«children»).value;

// Construye la URL con los parámetros seleccionados
var url = «/reservas?dateRange=» + encodeURIComponent(dateRange) +
«&adults=» + encodeURIComponent(adults) +
«&children=» + encodeURIComponent(children);

// Redirigir a la página de reservas
window.location.href = url;
}