/* ============================================================
   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;
}

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

.flatpickr-calendar.mdpd-drp-calendar {
  /* 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);
  padding: 0.85rem 0.9rem 0.6rem;
  /* El !important NO es decorativo: flatpickr calcula el ancho en JS y lo
     escribe INLINE, tanto acá como en .flatpickr-days:
         var n = (dayContainer.offsetWidth + 1) * showMonths;
         daysContainer.style.width = n + "px";
         calendarContainer.style.width = n + "px";
     Ese cálculo asume padding 0 en el calendario. Como acá sí hay padding y
     flatpickr usa box-sizing:border-box, esos ~29px se comen del ancho útil
     y al último mes se le corta la última columna de días. Un `width:auto`
     sin !important no alcanza: pierde contra el estilo inline.
     Con auto + !important el ancho lo define el contenido real, así que el
     cálculo de flatpickr deja de importar y el padding puede cambiar sin
     volver a romper nada. */
  width: auto !important;
}

/* Ver arriba: también lo escribe flatpickr inline. Sin esto queda clavado en
   el ancho calculado y recorta (tiene overflow:hidden nativo). */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-days {
  width: auto !important;
}

/* OJO: .dayContainer conserva a propósito su ancho fijo nativo. Los
   .flatpickr-day se dimensionan en PORCENTAJE contra él (14.2857% = 1/7), así
   que si se lo pasa a auto la cuenta se vuelve circular y la grilla se rompe.
   El ancho flexible va sólo en los contenedores de arriba.
   (Los dos meses viven dentro de un único .flatpickr-rContainer, no uno por
   mes: separarlos con gap en .flatpickr-innerContainer no hace nada.) */

/* 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 (fijo, sin JS).
   - Los siguientes se miden por JS (positionStackedMonthTitles en
     mdpd-date-range-picker.js) porque la altura de cada grilla varía
     según tenga 5 o 6 semanas.
   - 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: absolute;
    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);
  }
}