/* ============================================================
   Estilo compartido del calendario mobiscroll (popup de fechas).
   Se usa en /reservar/booking, home, ubicaciones, ubicacion y hotsale
   para que el datepicker se vea igual en todos lados.
   Antes vivía inline solo en reservar-booking.htm.
   Requiere que la instancia mobiscroll tenga cssClass:'wander-cal-popup'
   (ver layoutScripts.js) para el header verde.
   ============================================================ */

/* Popup del calendario: tamano natural de 2 meses, sin forzar ancho —
   asi mobiscroll no rellena el espacio extra asomando un 3er mes. */
.wander-cal-popup .mbsc-popup-body {
  max-width: 95vw;
}
/* Fondo atenuado detras del popup. Sin esto el overlay queda transparente y
   el navbar/banner oscuros del sitio se ven al mismo nivel que el header
   oscuro del popup, dando la impresion de que el titulo queda oculto. */
.wander-cal-popup .mbsc-popup-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}
/* Popup centrado (default de mobiscroll). No forzamos offset: el titulo ya se
   lee bien con la altura fija del header, y centrado el popup entra completo
   con sus botones Aceptar/Cancelar (un offset lo empujaba fuera de pantalla). */
/* Sin tope de altura: con el encabezado + leyendas el contenido superaba el
   max-height del popup y los botones Cancelar/Aceptar quedaban recortados por
   debajo del area blanca. Dejamos que el popup crezca a su contenido. */
.wander-cal-popup .mbsc-popup {
  max-height: none !important;
}
/* Titulo del popup (headerText): fondo verde brand con texto blanco.
   flex-shrink:0 + min-height: el header es un item flex del popup-body; sin
   esto se comprimia y recortaba el texto del titulo por arriba. */
.wander-cal-popup .mbsc-popup-header {
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 14px 16px 12px !important;
  background: #222919 !important;
  border-bottom: 0 !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  box-sizing: content-box !important;
  height: auto !important;
}
/* Eliminar scroll interno de mobiscroll. Incluye .mbsc-popup-content: es el
   contenedor al que mobiscroll pone overflow-y:auto y, al desbordar por unos
   pocos px, mostraba una barra vertical fea dentro del popup. */
.wander-cal-popup .mbsc-popup-content,
.wander-cal-popup .mbsc-calendar-body,
.wander-cal-popup .mbsc-calendar-scroll-wrapper,
.wander-cal-popup .mbsc-calendar-body-inner {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
@media (min-width: 992px) {
  .wander-cal-popup .mbsc-popup-header {
    font-size: 18px !important;
    padding: 16px 20px 14px !important;
  }
}
/* El theme (style.min.css) oculta el segmentado en paginas .Reservar con
   ".Reservar .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented{display:none!important}"
   (por eso booking, que es .Reservar, no mostraba el encabezado y home si).
   En los popups del calendario SI lo queremos: selector mas especifico para ganar. */
.wander-cal-popup.mbsc-popup-wrapper .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented {
  display: flex !important;
}
/* En paginas .Reservar (booking) el theme pinta las pestañas Check-in/Check-out
   como pildoras verdes. Dentro del popup las queremos planas (con subrayado en
   la activa), igual que en home. Neutralizamos ese estilo y restauramos la
   linea inferior del boton seleccionado. */
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item {
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item.mbsc-segmented-item-selected {
  background-color: transparent !important;
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item .mbsc-segmented-button.mbsc-selected {
  border-bottom: 2px solid #222919 !important;
}
/* Igualar la maqueta del segmentado a home: en .Reservar sale full-width y con
   los botones en flex-row (label y valor en una linea, centrado). Home lo tiene
   a 18.5em, botones en bloque (label arriba, valor abajo) y alineado a la izq. */
.wander-cal-popup.mbsc-popup-wrapper .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented {
  width: 18.5em !important;
  margin-bottom: 0 !important; /* el theme mete 10px; se quita para pegar el control al calendario */
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item .mbsc-segmented-button {
  display: block !important;
  text-align: left !important;
  padding: 0.857em 1.143em !important;
}
/* Colores del texto como en home (en .Reservar salian blancos, invisibles
   sobre el fondo transparente): etiqueta verde, valor/placeholder gris. */
.wander-cal-popup.mbsc-popup-wrapper .mbsc-range-control-label {
  color: #818c70 !important;
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-range-control-value {
  color: rgba(48, 48, 48, 0.4) !important;
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-range-value-nonempty .mbsc-range-control-value {
  color: #303030 !important;
}
/* La pestaña ACTIVA (seleccionada) en .Reservar dejaba el valor en blanco
   (invisible). Lo forzamos al mismo gris/oscuro de home. */
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item-selected .mbsc-range-control-value {
  color: rgba(48, 48, 48, 0.4) !important;
}
.wander-cal-popup.mbsc-popup-wrapper .mbsc-segmented-item-selected.mbsc-range-value-nonempty .mbsc-range-control-value {
  color: #303030 !important;
}
/* Leyendas al pie del calendario. El theme solo las pone en body.Inicio
   (.mbsc-calendar-picker-main:after); las replicamos en los popups para que
   tambien salgan en booking/ubicaciones. Es el mismo pseudo-elemento, asi que
   en home no se duplica (gana la regla mas especifica, mismo contenido). */
.wander-cal-popup .mbsc-calendar-picker-main:after {
  content: "* Precios sin IVA. \a** Se muestra el costo de la cabaña más ecónomica por día. ";
  margin: 10px 0 0;
  padding: 0 10px 10px;
  box-sizing: border-box;
  font-size: 0.75rem;
  white-space: pre;
  width: 100%;
  display: block;
}
/* Contenedor del calendario */
.wander-cal-popup .mbsc-calendar {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
/* Título del mes */
.mbsc-calendar-month-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-align: center !important;
}
/* Encabezado días de la semana */
.mbsc-calendar-week-day {
  font-size: 12px !important;
  color: #999 !important;
  font-weight: 400 !important;
  text-transform: capitalize;
}
/* Celdas del calendario */
.mbsc-calendar-cell {
  height: 55px !important;
  vertical-align: top !important;
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
}
.mbsc-calendar-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border-radius: 4px !important;
}
/* Número del día */
.mbsc-calendar-day-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
}
/* Label del precio debajo del día */
.mbsc-calendar-label {
  background: transparent !important;
  border: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
.mbsc-calendar-label-text {
  font-size: 10px !important;
  color: #888 !important;
  font-weight: 400 !important;
  text-align: center !important;
  line-height: 1 !important;
}
/* Día seleccionado (inicio/fin del rango) */
.mbsc-range-day .mbsc-calendar-cell-inner {
  background-color: #4a7c6f !important;
  border-radius: 4px !important;
}
.mbsc-range-day .mbsc-calendar-day-text {
  color: #fff !important;
  font-weight: 600 !important;
}
.mbsc-range-day .mbsc-calendar-label-text {
  color: #fff !important;
}
/* Rango entre fechas */
.mbsc-range-hover .mbsc-calendar-cell-inner,
.mbsc-ltr .mbsc-range-day-start ~ .mbsc-range-day-end .mbsc-calendar-cell-inner {
  background-color: #e8f0ed !important;
}
/* Día de hoy */
.mbsc-calendar-today .mbsc-calendar-day-text {
  color: #4a7c6f !important;
  font-weight: 600 !important;
}
/* Días inválidos/bloqueados */
.mbsc-disabled .mbsc-calendar-day-text,
.mbsc-disabled .mbsc-calendar-label-text {
  color: #ccc !important;
}
/* Quitar bordes y sombras extra */
.mbsc-calendar-slide {
  padding: 0 8px !important;
}
/* Separador entre semanas */
.mbsc-calendar-row {
  border-bottom: none !important;
}
@media (max-width: 768px) {
  /* Contenedor principal del calendario */
  .mbsc-calendar-body {
    overflow-y: auto !important;
    max-height: calc(100vh - 150px) !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Evitar que se corte el último mes */
  .mbsc-calendar-body-inner {
    overflow: visible !important;
    height: auto !important;
  }
  .mbsc-calendar-scroll-wrapper {
    overflow: visible !important;
    height: auto !important;
  }
  .mbsc-calendar-slide {
    overflow: visible !important;
    height: auto !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }
  /* Asegurar que las filas no se corten */
  .mbsc-calendar-row {
    overflow: visible !important;
  }
  /* El popup fullscreen use todo el alto */
  .mbsc-popup-body {
    max-height: 100vh !important;
    overflow-y: auto !important;
  }
  .mbsc-popup-wrapper-full {
    height: 100% !important;
  }
  .mbsc-calendar-wrapper {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }
  .mbsc-calendar {
    height: auto !important;
    overflow: visible !important;
  }
}