/* ==========================================================================
   Hotel Selector - Selector desplegable de hoteles para la máscara de reservas
   Depende de: neobookings.css (estilos base de .form-control)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Contenedor principal
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   Display: el "input" clicable que muestra el hotel seleccionado o el placeholder
   Hereda estilos base de .form-control (neobookings.css)
   -------------------------------------------------------------------------- */

.hotel-selector__display {
    cursor: pointer;
    /* Espacio a la derecha para el chevron */
    padding-right: 36px;
    /* Evitar que el texto se desborde sobre el icono */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Posición relativa necesaria para el pseudo-elemento del chevron */
    position: relative;
    user-select: none;
}

/* Chevron mediante border-trick (CSS puro) */
.hotel-selector__display::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--neo-neutral, #62615C);
    border-bottom: 2px solid var(--neo-neutral, #62615C);
    pointer-events: none;
    transition: transform 0.2s ease;
}

/* Chevron apuntando hacia arriba cuando el dropdown está abierto */
.hotel-selector--open .hotel-selector__display::after {
    transform: translateY(-25%) rotate(225deg);
}


/* --------------------------------------------------------------------------
   Estado: bloqueado (subsitio de un hotel concreto)
   Sin flecha, sin cursor pointer
   -------------------------------------------------------------------------- */

.hotel-selector--locked .hotel-selector__display {
    cursor: default;
    padding-right: 16px; /* Vuelve al padding normal, sin chevron */
}

.hotel-selector--locked .hotel-selector__display::after {
    display: none;
}


/* --------------------------------------------------------------------------
   Estado: hotel seleccionado (sitio principal, tras elegir un hotel)
   El texto del display refleja el nombre del hotel
   -------------------------------------------------------------------------- */

.hotel-selector--selected .hotel-selector__display {
    color: var(--neo-dark, #1E1810);
}


/* --------------------------------------------------------------------------
   Dropdown: panel desplegable con la lista de hoteles
   -------------------------------------------------------------------------- */

.hotel-selector__dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    /* Animación de apertura sutil hacia arriba */
    animation: neo-dropdown-in-up 0.15s ease;
}

/* Clase de Bootstrap que oculta el panel; JS la elimina al abrir */
.hotel-selector__dropdown.d-none {
    display: none !important;
}

@keyframes neo-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación cuando el dropdown abre hacia arriba */
@keyframes neo-dropdown-in-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar personalizada para navegadores WebKit */
.hotel-selector__dropdown::-webkit-scrollbar {
    width: 4px;
}

.hotel-selector__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.hotel-selector__dropdown::-webkit-scrollbar-thumb {
    background: var(--neo-neutral, #62615C);
    border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Lista de hoteles
   -------------------------------------------------------------------------- */

.hotel-selector__list {
    list-style: none;
    margin: 0;
    padding: 6px 0; /* Pequeño margen vertical para dar aire al panel */
}


/* --------------------------------------------------------------------------
   Ítem de hotel
   -------------------------------------------------------------------------- */

.hotel-selector__item {
    padding: 12px 20px;
    font-size: 14px;
    color: var(--neo-dark, #1E1810);
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.hotel-selector__item:hover {
    background: var(--neo-bg, #F8F7F3);
}

/* Ítem activo: el hotel actualmente seleccionado */
.hotel-selector__item--active {
    background: var(--neo-bg, #F8F7F3);
    font-weight: 600;
    color: var(--neo-primary, #3e5250);
}


/* ==========================================================================
   RESPONSIVE
   Desktop pequeño y Tablet/Móvil: ≤ 992px
   ========================================================================== */

@media (max-width: 992px) {

    /* El dropdown ocupa el ancho completo del campo (ya lo hace por defecto,
       pero forzamos min-width para evitar desbordamientos en layouts flex) */
    .hotel-selector__dropdown {
        min-width: 100%;
        left: 0;
        right: 0;
    }

    /* Áreas de toque más generosas en móvil */
    .hotel-selector__item {
        padding: 14px 20px;
    }
}


/* ==========================================================================
   RESPONSIVE
   Desktop grande: > 1920px
   ========================================================================== */

@media (min-width: 1921px) {

    /* En pantallas muy grandes el dropdown puede mostrar más ítems sin scroll */
    .hotel-selector__dropdown {
        max-height: 400px;
    }

    .hotel-selector__item {
        font-size: 15px;
    }
}