/* ============================================================
   MdpdDateRangePicker — combo check-in/check-out (estilo Booking)
   Prefijo .mdpd-drp-*. Portable: no depende de WordPress.
   Toda la marca se controla por custom properties --mdpd-drp-*.
   ============================================================ */

.mdpd-drp {
  --mdpd-drp-h: 3.25rem;
  --mdpd-drp-radius: 0.5rem;
  --mdpd-drp-bg: #ffffff;
  --mdpd-drp-border: #cab080;
  --mdpd-drp-border-focus: #d0ab69;
  --mdpd-drp-text: #222222;
  --mdpd-drp-muted: #8a8a8a;
  --mdpd-drp-accent: #d0ab69;
  --mdpd-drp-accent-hover: #bc8c37;
  /* Flechas prev/next del calendario: llevan el color del botón de
     búsqueda (no el accent de días seleccionados — son navegación,
     no parte de la selección), por default el mismo tono. */
  --mdpd-drp-nav-bg: #d0ab69;
  --mdpd-drp-nav-bg-hover: #bc8c37;
  --mdpd-drp-nav-text: #ffffff;
  --mdpd-drp-nav-text-hover: #ffffff;
  /* Color del rango (tramo entre check-in/check-out) partido en tono +
     alpha en vez de un solo color con transparencia: se recombina con
     color-mix() contra blanco en el punto de uso, así el resultado
     final siempre es opaco. Necesario porque el fondo se "empalma"
     entre celdas adyacentes con box-shadow superpuesto — con
     transparencia real esa superposición se ve como una mezcla de
     color en vez de una unión pareja. */
  --mdpd-drp-range-hue: #f3ead7;
  --mdpd-drp-range-alpha: 100%;
  --mdpd-drp-range-text: #222222;
  position: relative;
  font: inherit;
  width: 100%;
}

.mdpd-drp-anchor {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  left: 0;
  bottom: 0;
}

.mdpd-drp-trigger {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: var(--mdpd-drp-h) !important;
  background: var(--mdpd-drp-bg) !important;
  border: 1px solid var(--mdpd-drp-border) !important;
  border-radius: var(--mdpd-drp-radius) !important;
  cursor: pointer !important;
  font: inherit !important;
  color: var(--mdpd-drp-text) !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.mdpd-drp-trigger:hover,
.mdpd-drp.mdpd-drp-open .mdpd-drp-trigger {
  border-color: var(--mdpd-drp-border-focus) !important;
}

.mdpd-drp.mdpd-drp-open .mdpd-drp-trigger {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdpd-drp-accent) 22%, transparent) !important;
}

/* flex-basis auto (NO 0): con basis 0 los dos segmentos se reparten mitad
   y mitad exacta sin mirar el contenido, y como "CHECK-OUT / Check Out" es
   más largo que "CHECK-IN / Check In", a uno le sobraba lugar y al otro se
   le cortaba el texto. Con auto cada uno parte de lo que necesita y el
   sobrante se reparte parejo, así se adapta solo a cualquier texto
   (los labels son traducibles y los placeholders se editan en el panel).
   min-width: 0 deja que igual puedan encogerse con ellipsis si no entra. */
.mdpd-drp-seg {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  padding: 0 0.9rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  position: relative !important;
}

/* Solo el segmento de check-in tiene el ícono de calendario, así que solo
   él reserva el espacio a la izquierda (antes lo reservaban los dos y el
   de check-out quedaba con un hueco vacío que le comía ancho al texto). */
.mdpd-drp-seg:first-child {
  padding-left: 2.35rem !important;
}

.mdpd-drp-seg:first-child::before {
  content: "" !important;
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  background-color: var(--mdpd-drp-border-focus) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.mdpd-drp-seg-label {
  display: block !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mdpd-drp-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

.mdpd-drp-seg-value {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--mdpd-drp-muted) !important;
  margin: 0 !important;
}

.mdpd-drp-has-checkin .mdpd-drp-seg[data-drp-seg="checkin"] .mdpd-drp-seg-value,
.mdpd-drp-has-checkout .mdpd-drp-seg[data-drp-seg="checkout"] .mdpd-drp-seg-value {
  color: var(--mdpd-drp-text) !important;
}

/* flex: 0 0 1px — sin esto es un flex item más y se encoge junto con los
   segmentos cuando falta lugar, hasta desaparecer. */
.mdpd-drp-divider {
  flex: 0 0 1px !important;
  width: 1px !important;
  align-self: center !important;
  height: 60% !important;
  background: var(--mdpd-drp-border) !important;
}

/**
 * Wrapper de pantalla completa que aloja al calendario (mdpd-date-range-picker.js,
 * `appendTo`). El calendario abre como un popup propio, centrado en la
 * PANTALLA (no en el input ni en el scroll) — ver el comentario largo en el
 * JS para el porqué. Mismo patrón visual que un backdrop de diálogo
 * cualquiera, pero autocontenido: este componente es portable (no sabe de
 * WordPress ni del resto del theme) y no depende de ningún otro sistema de
 * modales, así que trae su propio backdrop/scroll-lock/botón de cerrar.
 */
.mdpd-drp-modal {
  align-items: center;
  background: #00000073;
  display: none;
  inset: 0;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  position: fixed;
  z-index: 999999;
}

.mdpd-drp-modal.mdpd-drp-modal--open {
  display: flex;
}

.mdpd-drp-modal__close {
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 0.2em 0.6em #00000040 !important;
  color: #222 !important;
  cursor: pointer;
  font-size: 1.5rem;
  height: 2.25rem;
  line-height: 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.25rem;
  z-index: 1;
}

/* Body bloqueado mientras el calendario está abierto (mdpd-date-range-picker.js). */
body.mdpd-drp-body-locked {
  overflow: hidden;
}

/* ---- Popup del calendario (vive en <body>, fuera de .mdpd-drp) ---- */

.flatpickr-calendar.mdpd-drp-calendar {
  /* `static:true` (el JS ya no calcula top/left) + esto: queda como un
     hijo flex normal de .mdpd-drp-modal, y el `align-items:center` de ahí
     lo centra en la pantalla en vez de en el scroll o el input. */
  position: static !important;
  /* Color de rango, ya resuelto a un color SÓLIDO (mezclado con blanco
     según su propio alpha) — ver comentario en --mdpd-drp-range-hue
     más arriba. Se define una sola vez acá para no repetir el
     color-mix() en cada regla que lo usa. */
  --mdpd-drp-range-solid: color-mix(in srgb, var(--mdpd-drp-range-hue) var(--mdpd-drp-range-alpha), white);
  font: inherit;
  font-size: 0.9rem;
  border-radius: 0.65rem;
  box-shadow: 0 16px 40px rgba(20, 15, 5, 0.18), 0 2px 8px rgba(20, 15, 5, 0.08);
  width: auto;
  padding: 0.85rem 0.9rem 0.6rem;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-innerContainer {
  gap: 1.35rem;
}

/* IMPRESCINDIBLE: las flechas prev/next son position:absolute y en el CSS
   nativo .flatpickr-months es static, así que su contenedor de referencia
   termina siendo .flatpickr-calendar ENTERA — un top:50% ahí las manda al
   medio vertical de todo el panel. Con position:relative acá, el 50% se
   resuelve contra la franja del header (34px), que es lo que queremos. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months {
  position: relative;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-month {
  position: relative;
  margin-bottom: 0.15rem;
}

/* Rango: día seleccionado (extremos). Fondo = color de marca, texto
   se mantiene oscuro igual que los días no iluminados (a pedido). */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.selected,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.startRange,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.endRange,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.endRange:hover {
  background: var(--mdpd-drp-accent) !important;
  border-color: transparent !important;
  color: var(--mdpd-drp-range-text) !important;
}

/* Rango: días intermedios iluminados de FONDO (sin borde) conectando in/out.
   --mdpd-drp-range-solid ya es un color opaco (color-mix contra blanco),
   nunca transparente: el "puente" de box-shadow entre celdas adyacentes
   superpone estas mismas declaraciones, y con transparencia real esa
   superposición se ve como una mezcla en vez de una unión pareja. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.inRange,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.nextMonthDay.inRange {
  background: var(--mdpd-drp-range-solid) !important;
  border-color: transparent !important;
  color: var(--mdpd-drp-range-text) !important;
  box-shadow: -6px 0 0 var(--mdpd-drp-range-solid), 6px 0 0 var(--mdpd-drp-range-solid) !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day:hover,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day:focus {
  background: var(--mdpd-drp-range-solid) !important;
  border-color: transparent !important;
  color: var(--mdpd-drp-range-text) !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.today {
  border-color: var(--mdpd-drp-accent) !important;
}

/* Flechas prev/next como chips con fondo (color del botón "Buscar"),
   no solo un ícono de color — un trazo fino sin fondo se veía
   imperceptible.

   El top:50% de acá SOLO funciona porque .flatpickr-months tiene
   position:relative (ver arriba). Sin eso el 50% se mide contra
   .flatpickr-calendar entera y las flechas caen al medio del panel.

   El CSS de Flatpickr apunta directo al <svg> (y a <path> con
   fill:inherit), no solo al <span> que lo contiene — hay que repetir
   el selector hasta el svg o su regla nativa (fill rojo en hover) gana
   igual, sin competir con nuestro !important porque nunca estábamos
   apuntando al mismo elemento. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  margin: 0 0.15rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--mdpd-drp-nav-bg) !important;
  transition: background-color 0.15s ease !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
  fill: var(--mdpd-drp-nav-text) !important;
  color: var(--mdpd-drp-nav-text) !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--mdpd-drp-nav-bg-hover) !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--mdpd-drp-nav-text-hover) !important;
  color: var(--mdpd-drp-nav-text-hover) !important;
}

.flatpickr-calendar.mdpd-drp-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-current-month .cur-year {
  font-weight: 700 !important;
}

/* Flatpickr le pone a .flatpickr-current-month un padding-top fijo
   (7.48px) pensado para centrar el texto en SU tipografía/tamaño de
   base — con la nuestra queda desalineado con las flechas prev/next
   (que sí están centradas dentro de su propia caja de 34px). Lo
   sacamos y centramos con line-height en vez de padding, así no
   depende de un número mágico ajustado para otro font-size. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-current-month {
  padding: 0 !important;
  line-height: 34px !important;
}

/* ----------------------------------------------------------------
   Mobile: los dos meses apilados, cada uno con su propio título
   arriba de su grilla.

   No se mueve NINGÚN nodo de Flatpickr entre contenedores: Flatpickr
   vacía y reconstruye .flatpickr-days por completo en cada cambio de
   mes (confirmado en su código fuente), así que mover un título ahí
   adentro lo borraría al primer click en "mes siguiente". En cambio,
   los títulos (.flatpickr-month, que Flatpickr nunca destruye, solo
   les actualiza el texto) se posicionan con position:absolute justo
   arriba de su .dayContainer correspondiente:
   - El título del 1er mes es siempre top:0.
   - El del 2do va a una posición fija (más abajo, en .rangeMode), gracias
     al alto de grilla también fijo del .dayContainer (12.5rem,
     independiente de que el mes tenga 5 o 6 semanas) — nada de JS
     midiendo ni escribiendo top por inline style: eso fue justo el
     problema (un style="top:XXXpx" en runtime le ganaba a esta regla).
   - Cada .dayContainer (salvo el primero) reserva ese espacio con
     padding-top para que el título no tape los números.
   ---------------------------------------------------------------- */
@media (max-width: 639px) {
  .flatpickr-calendar.mdpd-drp-calendar {
    --mdpd-drp-month-title-h: 2.35rem;
    width: min(94vw, 320px) !important;
    padding: 0.75rem 0.75rem 0.5rem;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-rContainer {
    position: relative;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-month {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-month:first-child {
    top: 0;
  }

  /* Acá .flatpickr-months tiene alto 0 (todos sus hijos son absolute), así
     que el top:50% del layout desktop daría 0. Se anclan a mano al centro
     del título del PRIMER mes, que es el que queda arriba de todo. */
  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-prev-month,
  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months .flatpickr-next-month {
    top: calc(var(--mdpd-drp-month-title-h) / 2) !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdays {
    margin-top: var(--mdpd-drp-month-title-h);
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdaycontainer ~ .flatpickr-weekdaycontainer {
    display: none !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdaycontainer:first-child {
    flex: 1 1 100% !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-days {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .dayContainer {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .dayContainer + .dayContainer {
    box-shadow: none !important;
    margin-top: 0.5rem;
    padding-top: calc(0.5rem + var(--mdpd-drp-month-title-h));
    border-top: 1px solid var(--mdpd-drp-border, #e6e6e6);
  }

  /* Alto fijo de grilla (independiente de que el mes tenga 5 o 6 semanas):
     el título del segundo mes va a una posición fija acá abajo, sin medir
     nada por JS (mdpd-date-range-picker.js no le toca el `top` a esto). */
  .flatpickr-calendar.mdpd-drp-calendar .dayContainer {
    min-height: 12.5rem !important;
    justify-content: flex-start !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-months :nth-child(2 of .flatpickr-month) {
    top: 17.5rem !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-day {
    height: 2rem !important;
    line-height: 2rem !important;
    max-width: unset !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar.rangeMode {
    max-width: 90vw !important;
    left: 5vw !important;
  }
}

/* Desktop: los dos meses lado a lado (el layout nativo de Flatpickr, sin
   apilar — eso es solo mobile, arriba). Acotado a esta franja a propósito:
   el jefe de proyecto probó estas reglas sin scoping y rompían el layout
   apilado de mobile, que ya anda bien sin ellas. Selector + `!important`
   iguales a los de arriba para ganarle sin dudas al CSS propio de
   Flatpickr (`.flatpickr-days`/`.flatpickr-weekdaycontainer` ya traen su
   propio width/overflow). */
@media (min-width: 640px) {
  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-days {
    position: relative !important;
    overflow: visible !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer {
    width: 50% !important;
  }

  .flatpickr-calendar.mdpd-drp-calendar .flatpickr-rContainer {
    width: 100% !important;
  }
}