.card {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Título principal del hotel */
.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #004085;
}

/* Información del hotel */
.card-body p {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

/* Contenedor de las imágenes */
.card-body .row {
    margin-top: 0.5rem;
}

/* Imágenes de hotel */
.card-body img {
    object-fit: cover;
    border-radius: 6px;
    width: 100%;
    height: auto;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Texto pequeño para email/horarios */
.card-body small,
.card-body .text-muted {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Responsive: columnas alineadas */
@media (max-width: 768px) {
    .card-body .row {
        flex-wrap: wrap;
    }

    .card-body img {
        width: 100% !important;
        max-height: 150px;
    }
}


.carousel-item img {
 
    opacity: .9 !important;
}


#suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border-radius: 0 0 6px 6px;
}






/* CONTENEDOR GENERAL */
.traveler-dropdown {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #fff;
  padding: 1rem;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ENCABEZADO HABITACIÓN */
.traveler-dropdown strong {
  font-size: 1rem;
  font-weight: 600;
  color: #2d2d2d;
}

/* BOTÓN REMOVE */
.traveler-dropdown a.text-danger {
  font-size: 0.875rem;
}

/* CONTENEDOR DE ADULTOS Y NIÑOS */
.room-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* CADA BLOQUE: adultos o niños */
.room-controls .guest-block {
  flex: 1 1 140px;
  min-width: 120px;
}

/* TÍTULOS DE BLOQUE */
.room-controls .fw-semibold {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* BOTONES + y − */
.room-controls .btn-outline-secondary {
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* INPUT DE CANTIDAD */
.room-controls .count-display {
  width: 32px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
}

/* SELECTOR DE EDADES */
.childrenAges select {
  min-width: 100px;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 6px;
}

/* BOTÓN ADD ROOM */
.traveler-dropdown .btn-link {
  font-weight: 600;
  color: #0071eb;
  text-decoration: none;
}

.traveler-dropdown .btn-link:hover {
  text-decoration: underline;
}

/* BOTONES DONE / CANCEL */
.traveler-dropdown .btn-primary {
  background-color: #0071eb;
  border-color: #0071eb;
  border-radius: 999px;
  padding: 6px 18px;
}

.traveler-dropdown .btn-primary:hover {
  background-color: #005bb5;
}

/* SCROLL PERSONALIZADO */
.traveler-dropdown::-webkit-scrollbar {
  width: 6px;
}

.traveler-dropdown::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/*RESPONSIVE FIX PARA MOVIL */
@media (max-width: 576px) {
  .room-controls {
    flex-direction: row;
    gap: 1rem;
  }

  .room-controls .guest-block {
    flex: 1 1 45%;
  }

  .traveler-dropdown {
    max-height: 80vh;
    padding: 1rem 0.75rem;
  }
}


@media (max-width: 576px) {
  .room-controls {
    flex-direction: row !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    padding: 0 12px !important; 
    gap: 1rem !important;
  }

  .room-controls .guest-block {
    flex: 1 1 calc(50% - 1rem) !important; 
    min-width: 140px !important;
  }
}




.input-toggle{
  border: 1px solid #ffffff00 !important;
}

#roomsContainer{
    border-radius: 15px;
    border: 1px solid #cccccc00;
}


.room-controls .guest-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.guest-block .fw-semibold {
  margin-bottom: 0.5rem; 
  font-size: 1rem;
}

.guest-block .count-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boton-seleccion {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem;
  color: #495057;
  transition: background-color 0.2s;
}

.boton-seleccion:hover {
  background-color: #e2e6ea;
}


.custom-age-select-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  width: 100%;  /* ← este cambio es crucial */
}

.custom-age-select-wrapper-item {
  width: 100%;
}

.custom-age-select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.custom-flex-container {
    flex-wrap: wrap !important;
    gap: 12px;
    flex-direction: row !important;
    margin-top: 24px;
}


.font-mia{
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

.encabezado-container-selector{
    margin-top: -1px !important;
}

.contenedor-boton-done{
    margin-top: 1px !important;
}

.text-add-rooms{
    color: #0071eb;
}


/* Fade-in suave para nuevas habitaciones */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.3s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación opcional para error */
#childrenAgeError {
  transition: opacity 0.3s ease;
}





@keyframes waveBlur {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.card-blur-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
        50deg,
        rgba(255, 255, 255, 0.9) 25%,
        rgb(255, 255, 255) 50%,
        rgb(255, 255, 255) 75%
    );
    background-size: 400% 100%;
    animation: waveBlur 1.8s ease-in-out infinite;
    backdrop-filter: blur(100px);
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
    border-radius: inherit;
}
.card-blur-overlay.hidden {
    opacity: 0;
    animation: none;
}


.btn-primary:hover {
    color: #000;
    background-color: #07a4ff !important;
    border: none !important;
    padding: .410rem .75rem !important;
}


.star-filled {
    color: gold;
    font-size: 16px;
}

.star-empty {
    color: #ddd; 
    font-size: 16px;
}




/* Contenedor general */
.hotel-filters-wrapper {
    display: none; 
    position: absolute;
    top: 146px;
    left: 0;
    margin-left: 12px;
    
    background-color: #f8f9fa00;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
    padding: 1px 1px; 
    z-index: 1000;
    flex-direction: column;
    width: 100%; 
    overflow-x: hidden !important;   
    
    max-width: 280px;  
    width: 14%;        
    overflow: hidden;
}


@media (min-width: 1901px) {
    .hotel-filters-wrapper {
        width: 14%;
        max-width: 280px;
    }
}

/* Para pantallas entre 1366px y 1900px */
@media (min-width: 1366px) and (max-width: 1900px) {
    .hotel-filters-wrapper {
        width: 12%;
        max-width: 260px;
    }
}

/* Para pantallas <= 1366px */
@media (max-width: 1366px) {
    .hotel-filters-wrapper {
        width: 20%;
        
    }
}
/* Mostrar cuando hay hoteles */
.hotel-filters-wrapper.show {
    display: block;
    overflow-x: hidden;  
    overflow-y: auto; 
}


.hotel-filters-wrapper.show {
    display: block; 
    overflow-x: hidden; 
    overflow-y: auto; 
}

.hotel-filters {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: auto;
    padding: 10px;
}

.hotel-filters-wrapper::-webkit-scrollbar {
    display: none;
}

.pill-categoria {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}


.hotel-filters-wrapper {
    -ms-overflow-style: none;  
    scrollbar-width: none;     
}

/* --- CATEGORÍAS EN 3 COLUMNAS --- */
.categoria-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem;
    padding: 0.5rem;
    width: 35%;
}

.categoria-group .nav-item {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
.categoria-group .nav-item {
    display: block !important;
    justify-content: left !important;
}
}

/* --- PRECIO SIGUE EN COLUMNA --- */
.precio-group {
    display: flex;
    
    gap: 0.5rem;
  
}

/* Pills generales */
.nav-pills .nav-link {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 0.2rem 1rem;
    font-size: .9rem;
    color: #444;
    white-space: normal;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:focus,
.nav-pills .nav-link:active {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd;
    font-weight: 600;
}

.nav-pills .nav-link:hover {
    background-color: #0b5ed7;
    color: #fff;
    border-color: #0b5ed7;
}


/* --- REGIMEN EN COLUMNA --- */
.regimen-group .accommodation-group{
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.accommodation-group .regimen-group .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.regimen-group .form-check-input .accommodation-group {
    accent-color: #0d6efd; 
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.regimen-group .form-check-label .accommodation-group {
    cursor: pointer;
    color: #1f6eff;
}

.btn-clear-filters {
    background-color: #007bff;   
    color: #fff;                
    border: none;
    padding: 0.2rem 1.5rem;
    border-radius: 50px;     
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn-clear-filters:hover {
    background-color: #0056b3;   
    color: #fff;
}

.mi-texto-font{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



@media (max-width: 768px) {
    .hotel-filters-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
        border-radius: 0;
        
        display: none; 
        overflow-y: auto; 
        z-index: 2000;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        }
    }


    .hotel-filters-wrapper.active {
        display: block;
    }

    .hotel-filters .nav-item {
        font-size: 1rem;
        padding: 0.5rem 0;
    }

    /* Botón Clear centrado */
    #clear-filters {
        width: 100%;
    }


@media (max-width: 767px) {
    .nav {
        font-size: 1rem;
    }
}


@media (max-width: 768px) {
    .categoria-group {
        grid-template-columns: repeat(4, 1fr); 
        width: 100% !important;
    }
}



.btn-close-filters {
    background: #007bff00;
    color: #007bff;
    border: none;
    font-size: 1.3rem;
    display: none;
    position: absolute;
    top: 0px;
    right: 15px;
    z-index: 2100;
    transition: background-color 0.3s ease;
}

.btn-close-filters i {
    margin-right: 5px;
}

.btn-close-filters:hover {
    background-color: #0056b3;
}

@media (max-width: 768px) {
    .btn-close-filters {
        display: block;
    }
}



.form-check-input:checked {
    background-color: #007bff !important;
    border-color: #007bff !important;
}
.form-check-input[type="checkbox"] {
    border-radius: 5.25em !important;
}

.form-check-input:focus {
    border-color: #007bff !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(23, 74, 184, 0.25) !important;

}



.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px 0;
}

.amenity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-align: center;
}

.amenity-btn i {
    font-size: 20px;
    margin-bottom: 5px;
    color: #0d6efd;
}

.amenity-btn:hover {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.amenity-btn:hover i {
    color: #fff;
}

.amenity-btn.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.amenity-btn.active i {
    color: #fff;
}




  #map-hotel-card {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    z-index: 20; display: none;
    background:#fff; border-radius:16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
  }
  #map-hotel-card .mhc-body{ padding:14px 16px; }
  #map-hotel-card .mhc-img{
    width: 280px; height: 170px; object-fit: cover;
  }
  @media (max-width: 720px){
    #map-hotel-card .mhc-img{ width:100%; height: 180px; }
  }
 


 /* PREVIEW (tarjeta pequeña) */
#results-map-preview .H_copyright, 
#results-map-preview .H_logo {
  right: auto !important;
  left: 6px !important;
  bottom: 6px !important;
  transform: scale(0.78);          /* más pequeño */
  transform-origin: bottom left;
  opacity: .75;                    /* más sutil */
  background: rgba(255,255,255,.8);
  padding: 2px 6px;
  border-radius: 8px;
}
#results-map-preview .H_copyright a { 
  color: #6b7280 !important; 
  text-decoration: none !important; 
}

/* MAPA FULLSCREEN (modal) */
#results-map .H_copyright, 
#results-map .H_logo {
  right: auto !important;
  left: 14px !important;
  bottom: 14px !important;
  transform: scale(0.9);
  transform-origin: bottom left;
  opacity: .8;
  background: rgba(255,255,255,.9);
  padding: 3px 8px;
  border-radius: 10px;
}
#results-map .H_copyright a { 
  color: #4b5563 !important; 
}



#resultsMapModal .modal-dialog,
#resultsMapModal .modal-content,
#resultsMapModal .modal-body,
#results-map {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: relative;
}




/* Toolbar contenedor */
.map-toolbar {
  position: absolute;
  top: 5px;
  left: 12px;
  z-index: 1002;
  pointer-events: none;
}

/* Asegura clicks sobre los controles del toolbar */
.map-toolbar .search-box,
.map-toolbar .nearby-toolbar,
#nearbyHotelsList {
  pointer-events: auto;
  touch-action: manipulation; /* evita gestos/zoom del navegador */
}

/* (opcional) Sube un poco el stacking si algo los tapa */
#mapToolbar { z-index: 2147483000; }


.map-toolbar .search-box {
  position: relative;  /* clave: para anclar las sugerencias */
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.97);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 360px;
  max-width: 86vw;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  pointer-events: auto;  
}



.map-toolbar .search-box i{ color:#6b7280; font-size:16px; }
.map-toolbar .search-box .search-input{
  flex:1 1 auto; border:none; outline:none; background:transparent;
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:8px 4px;                  /* espacio para placeholder */
}
.map-toolbar .search-box .clear-btn{
  pointer-events:auto; border:none; background:transparent; cursor:pointer;
  font-size:18px; line-height:1; color:#6b7280; padding:2px 6px;
}
.map-toolbar .search-box .clear-btn:hover{ color:#111827; }

/* Lista de sugerencias */
.map-toolbar .suggest {
  position: absolute;          /* sale del flujo justo bajo el input */
  top: calc(100% + 4px);
  left: 0;
  right: 0;                    /* mismo ancho que la caja */
  z-index: 99999;              /* por encima del canvas del mapa */
  pointer-events: auto;        /* asegura que reciba el click */
  display: none;   
  background-color: #fff;   
  cursor: pointer;
}
.map-toolbar .suggest.show { display: block; }
.map-toolbar .suggest.show{ display:block; }
.map-toolbar .suggest li{
  padding:10px 12px; cursor:pointer;
  font:12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.map-toolbar .suggest li:hover{ background:#f3f4f6; }

@media (max-width:480px){
  .map-toolbar{ top:10px; left:10px; }
  .map-toolbar .search-box{ min-width:74vw; padding:12px; }
}


/* Sobre el contenedor del mapa */
#results-map,
#results-map-preview {
  cursor: grab;   /* mano abierta por defecto */
}




/* La cabecera siempre por encima del canvas del mapa y cualquier overlay */
#resultsMapModal .modal-header{
  position: sticky;
  top: 0;
  z-index: 1060;
  background: #fff;
  touch-action: manipulation;   /* evita gestos/zoom del navegador en la cabecera */
}

/* Mejora el área táctil de la X y evita gestos */
#resultsMapModal .btn-close{
  width: 44px;
  height: 44px;
  padding: 10px;
  z-index: 1061;               /* por encima de todo lo del mapa */
  touch-action: manipulation;
}

/* El contenedor del mapa NO debe superar a la cabecera */
#results-map{ position: relative; z-index: 1; }

/* Si usas tu overlay de carga dentro del mapa, mantenlo debajo del header */
#results-map .map-loading-overlay{ z-index: 1055 !important; }




/* SOLO móvil: botón fijo por delante de todo */
@media (pointer: coarse) {
  .map-close-fixed{
    position: fixed;
    top: 10px; right: 10px;
    width: 48px; height: 48px;
    border: 0; border-radius: 999px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    display: none; /* la mostramos al abrir */
    align-items: center; justify-content: center;
    z-index: 2147483647; /* por encima del mapa y overlays */
    touch-action: manipulation;
  }
  .map-close-fixed:active { transform: scale(.96); }
}

.H_copyright{

  display: none !important;
}



.map-toolbar .nearby-toolbar{
  background: rgba(255,255,255,.97);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.nearby-toolbar .nearby-label{ font-size:12px; color:#6b7280; margin-right:4px; }
.nearby-toolbar .chip{
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.nearby-toolbar .chip:hover{ background:#f3f4f6; }
.nearby-toolbar .chip-clear{ border-color:#ef4444; color:#ef4444; }
#nearbyHotelsList{
  position: absolute;       /* anclado a la search-box */
  top: calc(100% + 56px);   /* debajo de input + barra nearby */
  left: 0; right: 0;
  background: rgba(255,255,255,.97);   /* blanco semitransparente */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-height: 280px; overflow-y: auto; display: none; z-index: 99999;
}
#nearbyHotelsList.show{ display:block; }
#nearbyHotelsList .item{ padding:10px 12px; font-size:12px; cursor:pointer; }
#nearbyHotelsList .item:hover{ background:#f3f4f6; }







/* Layout vertical del toolbar: input arriba, nearby debajo */
#mapToolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* contenedor de referencia para las listas absolutas */
  position: absolute; /* ya lo tienes así, esto reafirma el contexto */
}

/* Sugerencias y lista nearby ancladas al #mapToolbar usando una variable */
#mapToolbar .suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--suggest-top, calc(100% + 4px)); /* se recalcula por JS */
  z-index: 99999;
}

/* Asegurar stacking del buscador sobre el canvas del mapa */
#mapToolbar .search-box { z-index: 100000; }

/* Desktop: Nearby visible siempre debajo del input */
@media (min-width: 769px) {
  #mapToolbar .nearby-toolbar { display: flex !important; }
}

/* Móvil: Nearby colapsable con toggle */
/* Wrapper + toggle */
.nearby-wrapper{ width:100%; max-width:100vw; }
.nearby-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  background:rgba(255,255,255,.97);
  border:1px solid #e5e7eb; border-radius:12px;
  padding:10px 14px;
  font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.nearby-toggle .caret{
  display:inline-block; width:0; height:0; margin-left:8px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid #6b7280; transition:transform .2s;
}
.nearby-wrapper.open .nearby-toggle .caret{ transform:rotate(180deg); }

/* Panel de chips (reutiliza tu .nearby-toolbar) */
.nearby-toolbar{
  margin-top:8px;
  background:rgba(255,255,255,.97);
  border:1px solid #e5e7eb; border-radius:12px;
  padding:8px 10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}

/* Desktop: siempre abierto */
@media (min-width: 769px){
  #nearbyFilters{ display:flex !important; }
  #nearbyWrapper .nearby-toggle{ display:none; } /* ocultar botón en desktop */
}

/* Móvil: colapsado por defecto, chips en carrusel horizontal si abres */
@media (max-width: 768px){
  #nearbyFilters{ display:none; }
  .nearby-wrapper.open #nearbyFilters{
    display:flex;
    overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nearby-toolbar .chip{ flex:0 0 auto; }
}



:root { --vh: 1vh; }



#resultsMapModal .modal-dialog,
#resultsMapModal .modal-content,
#resultsMapModal .modal-body,
#results-map {
  width: 100vw !important;
  height: calc(var(--vh, 1vh) * 100) !important;   /* ← usa la variable */
  max-width: 100vw !important;
  max-height: calc(var(--vh, 1vh) * 100) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Asegura que el modal-body pueda controlar el overflow si hay elementos encima */
#resultsMapModal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* el mapa gestiona su propio scroll/panning */
}

#results-map {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;  /* ocupa todo el alto disponible dentro del modal-body */
}






/* ==== Filtros dentro del mapa (overlay) ==== */
#resultsMapModal .hotel-filters-wrapper.in-map {
  position: absolute;
 
  
  z-index: 1003;
  display: none;                 /* visible con .open */
 
  max-width: 86vw;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.12);
  padding-bottom: 10px;
}

/* Dentro del modal manda .open (aunque otras clases pongan display:block) */
#resultsMapModal .hotel-filters-wrapper.in-map:not(.open) { display: none !important; }
#resultsMapModal .hotel-filters-wrapper.in-map.open { display: block !important; }

/* No tiene sentido “View in a map” dentro del mapa */
#resultsMapModal .hotel-filters-wrapper.in-map #view-in-map-card { display: none !important; }
/* Oculta botón de cerrar del panel móvil si lo tuvieras */
#resultsMapModal .hotel-filters-wrapper.in-map .btn-close-filters { display: none !important; }

@media (max-width: 768px) {
  #resultsMapModal .hotel-filters-wrapper.in-map {
    width: calc(100vw - 28px);
   
    right: 14px;
    max-height: calc(100vh - 140px);
  }
}



label {
    font-size: 14px !important;
}



/* Desktop (como ya lo tenías) */
#hotel-filters-container.in-map{
  position: absolute;
  top: 72px;
  right: 12px;
  width: min(360px, 92vw);
  max-height: calc(100% - 110px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 1400;
  display: none;            /* oculto por defecto */
}
#hotel-filters-container.in-map.open{ display:block; }

/* Móvil: ancho completo con márgenes y pegado bajo la toolbar */
@media (max-width: 768px){
  #hotel-filters-container.in-map{
    
    right: 12px;
    width: auto;
    /* top dinámico desde JS (ver abajo). Fallback: 88px */
    top: var(--filters-top, 88px);
    /* respetar barra inferior / notches */
    max-height: calc(100% - var(--filters-top, 88px) - 12px - env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  /* Oculta el filtro de nombre dentro del mapa */
  #hotel-filters-container.in-map .hotel-name-title,
  #hotel-filters-container.in-map .hotel-name-wrapper{
    display: none !important;
  }
}


  #hotel-filters-container.in-map #hotel-name-filter,
  #hotel-filters-container.in-map .hotel-name-wrapper,
  #hotel-filters-container.in-map .hotel-name-title {
    display: none !important;
  }



/* ===========================
   Budget / Price range styles
   =========================== */

/* Contenedor */
#price-range-widget{
  --blue: #1a73e8;            /* azul de referencia */
  --track-bg: #e9edf5;        /* fondo claro de la pista */
  --bar: #e6e9ef;             /* barras del histograma */
  --label: #6b7280;           /* gris de textos secundarios */
}

/* Encabezado y label a la derecha */
#price-range-widget .fw-semibold{ font-weight: 600 !important; }
#price-range-label{ color: var(--label) !important; }

/* Histograma */
.price-hist-wrapper{
  position: relative !important; /* para anclar el histograma */
  height: 58px !important;              /* alto visual del histograma */
  margin-bottom: 6px !important;
}
.price-hist{
  position: absolute !important;
  inset: 0 0 10px 0 !important;          /* deja 10px abajo para la pista del slider */
  display: grid !important;
  grid-template-columns: repeat(30, 1fr) !important; /* 30 bins (coincide con el JS) */
  align-items: end !important;
  gap: 4px !important;
  pointer-events: none !important;       /* que no intercepte el drag del slider */
}
.price-hist .bar{
  width: 100% !important;
  background: var(--bar) !important;
  border-radius: 2px !important;
}

/* Slider */
.price-slider{
  position: relative !important;
  z-index: 2 !important;                 /* por encima del histograma */
  height: 11px !important;
}

/* noUiSlider – reset & base */
.price-slider .noUi-target{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.price-slider .noUi-horizontal{
  height: 5px !important;               /* grosor de la pista */
}
.price-slider .noUi-connects{
  border-radius: 999px !important;
  background: var(--track-bg) !important;/* tramo “no seleccionado” */
}
.price-slider .noUi-connect{
  background: var(--blue) !important;    /* tramo seleccionado */
}

/* Manillas circulares */
.price-slider .noUi-handle{
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  background: var(--blue) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18) !important;
  top: -5px !important;                  /* centra la manilla respecto a la pista de 10px */
  right: -9px !important;                /* corrige el “offset” nativo */
}
.price-slider .noUi-handle:before,
.price-slider .noUi-handle:after{
  display: none !important;             /* quita las rayitas || de noUi */
}
.price-slider .noUi-touch-area{ cursor: grab !important; }

/* Estados de interacción y accesibilidad */
.price-slider .noUi-handle:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--blue) 30%, white) !important;
  outline-offset: 2px !important;
}
.price-slider .noUi-handle:active{
  transform: scale(1.04) !important;
}

/* Etiquetas inferiores $min / $max+ */
#price-range-widget .small.text-muted{
  color: var(--label) !important;
}

/* “Clear price” */
#price-clear{
  color: #22a23a !important;             /* verde como tu captura */
  text-decoration: none !important;
}
#price-clear:hover{ text-decoration: underline !important; }

/* Responsive: manillas un poco más grandes en táctil */
@media (pointer: coarse){
  .price-slider .noUi-handle{
    width: 22px !important; height: 22px !important; top: -6px !important; right: -11px !important;
  }
}




/* Precios en la card del mapa grande */
#map-hotel-card .price-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;          /* separación vertical pequeña */
}

#map-hotel-card .price-total{
  font-weight:800;
  font-size:1.25rem;   /* ≈ fs-5 de Bootstrap pero más marcado */
  line-height:1.1;
  color:#0b63f6;       /* azul agradable para destacar el total */
}

#map-hotel-card .price-total .price-label1{
  margin-left:.35rem;
  font-weight:700;
  font-size:.9rem;
  color:#0f172a;
  opacity:.75;
}

#map-hotel-card .price-nightly{
  font-weight:600;
  font-size:.95rem;
  color:#475569;       /* gris medio para secundario */
  line-height:1.15;
}



/* El cuerpo debe ser contenedor de posicionamiento */
#map-hotel-card .mhc-body{
  position: relative;
}

/* Botón cerrar fijo en el ángulo superior derecho del card */
#map-hotel-card .mhc-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#map-hotel-card{
  position:absolute;
  bottom:14px;
  z-index:1000;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.20);
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  pointer-events:auto;
}

/* Desktop / tablets anchas: centrado y con ancho máximo */
@media (min-width: 992px){
  #map-hotel-card{
    left:50%;
    transform:translateX(-50%);
    width:min(92vw, 960px);   /* <- ajusta 960 a tu gusto: 820–980 suele verse bien */
  }
  #map-hotel-card .mhc-img{
    width:280px;              /* imagen a la izquierda */
    height:180px;
    object-fit:cover;
    border-radius:12px 0 0 12px;
  }
  #map-hotel-card .mhc-body{ padding:16px 18px; }
  #map-hotel-card .mhc-close{ top:10px; right:10px; }
}

/* Móvil: a lo ancho, pegado a los bordes con márgenes */
@media (max-width: 991.98px){
  #map-hotel-card{
    left:8px; right:8px;
    bottom:8px;
    width:auto;               /* ocupa (100% - 16px) */
    transform:none;
    border-radius:16px;
  }
  #map-hotel-card .mhc-img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:16px 16px 0 0;
  }
  #map-hotel-card .mhc-body{ padding:14px; }
}

/* (por si no los tenías ya) estilos de precios */
#map-hotel-card .price-stack{ display:flex; flex-direction:column; gap:.25rem; }
#map-hotel-card .price-total{ font-weight:800; font-size:1.25rem; color:#0b63f6; line-height:1.1; }
#map-hotel-card .price-total .price-label1{ margin-left:.35rem; font-weight:700; font-size:.9rem; color:#0f172a; opacity:.75; }
#map-hotel-card .price-nightly{ font-weight:600; font-size:.95rem; color:#475569; line-height:1.15; }

/* botón de cierre en la esquina del card */
#map-hotel-card .mhc-body{ position:relative; }
#map-hotel-card .mhc-close{
  position:absolute;
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; line-height:1;
  z-index:5;
}




@media (max-width: 768px){
  body.autofire-active #suggestions-container,
  body.autofire-active #autocomplete-results{
    display: none !important;
  }
}