/* ==========================================================================
   rdp-datepicker.css (core)
   --------------------------------------------------------------------------
   Structural / layout CSS for the RangeDatePicker. Pairs with
   rdp-datepicker-theme.css which provides the visual layer (colors,
   typography, shadows, motion). The core file intentionally uses the
   bare minimum of styling so the picker can be re-themed without
   touching layout.

   Every class is prefixed with `.rdp-` to avoid collisions.
   ========================================================================== */

.rdp {
  position: relative;
  /* display: inline-block; */
  display: block;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}
.rdp *,
.rdp *::before,
.rdp *::after { box-sizing: border-box; }

/* ----- Trigger ---------------------------------------------------------- */
.rdp-trigger {
  display: flex;
  align-items: center;
  gap: var(--rdp-space-2, 8px);
  /* min-width: var(--rdp-trigger-min-width, 240px); */
  padding: 0 var(--rdp-space-3, 12px);
  height: var(--rdp-trigger-height, 40px);
  cursor: pointer;
  outline: none;
}

.vrp-search-bar.vrp-home-search-bar .vrp-search-bar-group.vrp-search-bar-group--date-range .rdp-trigger {
	height: 30px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
}

.vrp-header-filter-desktop .vrp-search-bar-group.vrp-search-bar-group--date-range .rdp-trigger {
	height: 30px !important;
	border-radius: 8px !important;
}

.vrp-booking-form .vrp-form-group .rdp-trigger {
	border-radius: 8px !important;
}

.vrp-search-bar.vrp-home-search-bar .vrp-search-bar-group.vrp-search-bar-group--date-range .rdp-trigger-text {
	color: #000 !important;
}

.rdp-trigger-text { flex: 1 1 auto; }
.rdp-trigger-icon { flex: 0 0 auto; }

/* ----- Popover container ------------------------------------------------ */
.rdp-popover {
  position: absolute;
  z-index: 1000;
  padding: var(--rdp-space-2, 8px);
  display: none;
  /* `width: max-content` is the initial value; the JS sets an explicit
     pixel width on open so the legend/footer wrap to the months width
     and the popover never grows wider than the months. */
  width: max-content;
  max-width: calc(100vw - 16px);
  /* Hidden by default — the JS adds `.has-overflow-y` only when the
     content actually exceeds the available vertical space. */
  overflow: hidden;
  /* JS sets max-height at runtime based on the viewport. */
  /* Smooth scrolling on all input types: the browser uses the GPU
     compositor for `scroll-behavior: smooth` wheel deltas, and
     `overscroll-behavior: contain` prevents scroll chaining to the
     page beneath the popover (which is the main cause of the
     "jerky" feel — every wheel tick was also scrolling the body). */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* `touch-action: pan-y` tells the browser this element is a vertical
     scroll container. The browser can then optimize touch handling
     (no need to wait to see if the user is going to tap or scroll)
     and avoids the 300ms tap-delay that some browsers apply to
     nested scrollable areas. */
  touch-action: pan-y;
}
.rdp-popover.has-overflow-y {
  overflow-y: auto;
  /* A thin, modern scrollbar that doesn't steal visual space. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.rdp-popover.has-overflow-y::-webkit-scrollbar { width: 8px; }
.rdp-popover.has-overflow-y::-webkit-scrollbar-track { background: transparent; }
.rdp-popover.has-overflow-y::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.rdp-popover.has-overflow-y::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  background-clip: content-box;
  border: 2px solid transparent;
}
.rdp-popover.is-open { display: block; }
/* Below the trigger, aligned to the trigger's left edge (default). */
.rdp-popover.placement-below-left { top: calc(100% + 8px); left: 0; right: auto; bottom: auto; }
/* Below the trigger, aligned to the trigger's right edge. */
.rdp-popover.placement-below-right { top: calc(100% + 8px); right: 0; left: auto; bottom: auto; }
/* Above the trigger, aligned to the trigger's left edge. */
.rdp-popover.placement-above-left { bottom: calc(100% + 8px); left: 0; right: auto; top: auto; }
/* Above the trigger, aligned to the trigger's right edge. */
.rdp-popover.placement-above-right { bottom: calc(100% + 8px); right: 0; left: auto; top: auto; }
/* Legacy classes (kept for backwards-compatibility). */
.rdp-popover.placement-below { top: calc(100% + 8px); left: 0; right: auto; bottom: auto; }
.rdp-popover.placement-above { bottom: calc(100% + 8px); left: 0; right: auto; top: auto; }

/* ----- Months container ------------------------------------------------ */
.rdp-months {
  display: flex;
  flex-direction: row;
  gap: var(--rdp-space-3, 12px);
  /* `width: max-content` makes the container size to its natural
     content width (sum of months + gaps), not the popover's
     client-width (which is reduced by any vertical scrollbar). This
     keeps the layout stable regardless of overflow. No `max-width:
     100%` is applied so the months can be their true natural width
     even when a vertical scrollbar is present. */
  width: max-content;
  min-width: 0;
}
.rdp-months.is-single {
  flex-direction: column;
  gap: 0;
  width: auto;
  max-width: var(--rdp-month-width, 210px);
}

/* ----- Single month ---------------------------------------------------- */
.rdp-month {
  flex: 0 0 auto;
  /* Fixed width = 7 day cells + 6 gaps. Sized from --rdp-day-size and
     --rdp-days-gap so the layout is data-driven and themable. */
  width: calc(var(--rdp-day-size, 38px) * 7 + var(--rdp-days-gap, 0px) * 6);
  max-width: 100%;
  box-sizing: border-box;
}
.rdp-month.is-single { width: 100%; }

/* ----- Month header ---------------------------------------------------- */
.rdp-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px;
}
.rdp-month-title {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rdp-nav-btn {
  flex: 0 0 auto;
  width: var(--rdp-nav-btn-size, 32px);
  height: var(--rdp-nav-btn-size, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ----- Weekday header -------------------------------------------------- */
.rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 2px;
}
.rdp-weekday {
  text-align: center;
  height: 20px;
  line-height: 20px;
}

/* ----- Day grid -------------------------------------------------------- */
.rdp-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}
.rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* `touch-action: pan-y` is critical for smooth scroll on the
     popover. Without it, the browser doesn't know this element
     lives inside a vertical scroll container and waits to
     disambiguate tap vs scroll on every touch — which causes the
     jerky, delayed scrolling users report. `pan-y` tells the
     browser "vertical pan is always allowed, horizontal pan
     isn't" so it can start scrolling immediately. */
  touch-action: pan-y;
}
.rdp-day:disabled { cursor: not-allowed; }

/* Nav buttons and legend items also need pan-y so the popover
   scrolls when the user wheels over them rather than swallowing
   the gesture. */
.rdp-nav-btn { touch-action: pan-y; }
.rdp-legend-item { touch-action: pan-y; }

/* ----- Footer ----------------------------------------------------------- */
.rdp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rdp-space-2, 8px);
  flex-wrap: wrap;
  margin-top: var(--rdp-space-2, 8px);
  padding-top: var(--rdp-space-2, 8px);
  /* Match the months' natural width so the popover is uniformly sized. */
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
.rdp-summary { flex: 1 1 auto; min-width: 0; }
.rdp-buttons {
  display: flex;
  gap: var(--rdp-space-2, 8px);
  flex-wrap: wrap;
}
.rdp-btn {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: var(--rdp-space-1, 4px) var(--rdp-space-3, 12px);
}
.rdp-btn:disabled { cursor: not-allowed; }

/* ----- Tooltip ---------------------------------------------------------- */
.rdp-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

/* ----- Legend ----------------------------------------------------------- */
.rdp-legend {
  display: flex;
  gap: var(--rdp-space-3, 12px);
  flex-wrap: wrap;
  padding: 0 0 var(--rdp-space-2, 8px);
  /* Match the months' natural width so the popover is uniformly sized. */
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
.rdp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-space-1, 4px);
}
.rdp-legend-swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-block;
}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 480px) {
  .rdp { display: block; width: 100%; }
  .rdp-trigger { width: 100%; }
  /* On small screens the popover becomes a single full-width column.
     `width: auto` and `max-width: 100%` stop the popover from driving
     its own size based on the (stretched) day grid. */
  .rdp-popover { width: auto; max-width: calc(100vw - 16px); }
  .rdp-months { flex-direction: column; max-width: var(--rdp-month-width, 210px); }
  .rdp-month { width: 100%; max-width: var(--rdp-month-width, 210px); }
  .rdp-footer { flex-direction: column; align-items: stretch; }
  .rdp-buttons { justify-content: center; }
  .rdp-btn { flex: 1 1 auto; }
}
@media (min-width: 481px) and (max-width: 720px) {
  .rdp-day { font-size: 12px; }
}