/* ============================================================================
   Booking calendar UX enhancement (additive; loaded after booking.css).
   - Animated "auto-fill" pop so the whole range visibly flows in.
   - Hover preview after the arrival date is picked, so guests understand
     they only tap check-in + check-out (not every night).
   - Guided hint styling for the "X nights selected" line.
   ========================================================================== */

@keyframes saros-day-pop {
  0%   { transform: scale(0.55); opacity: 0.25; }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Transform/opacity only — does NOT fight the !important background and the
   box-shadow connectors that draw the continuous range pill. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
  animation: saros-day-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tentative range preview while the user is still choosing the 2nd date. */
.flatpickr-day.is-preview:not(.disabled) {
  background: rgba(0, 35, 71, 0.16) !important;
  color: #00234a !important;
  border-radius: 0 !important;
  transition: background-color 0.15s ease;
}

.flatpickr-day.is-preview-end:not(.disabled):not(.selected):not(.startRange):not(.endRange) {
  background: rgba(0, 35, 71, 0.34) !important;
  color: #00234a !important;
  border-radius: 0 9999px 9999px 0 !important;
}

/* Guided microcopy under the month title. */
#stay-nights.stay-nights--hint {
  color: #735c00;
  font-weight: 500;
  animation: saros-hint-fade 0.3s ease;
}

@keyframes saros-hint-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}