/* CA Smart Staycation — clearer guest booking calendar day cells */

.booking-calendar-card {
  overflow: hidden;
}

.calendar-weekdays,
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

.calendar-weekdays {
  margin: 12px 0 8px !important;
}

.calendar-weekdays span {
  min-width: 0;
  text-align: center;
  color: var(--emerald-dark, #063b32);
  font-weight: 700;
}

.calendar-day {
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 76px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  align-self: stretch !important;
  padding: 9px 8px 7px !important;
  border: 1px solid var(--border, #ded7c5) !important;
  border-radius: 10px !important;
  background: #fffdf8 !important;
  color: var(--text-dark, #18332d) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 5px !important;
  text-align: left !important;
  overflow: hidden !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Selection must only change appearance, never the date-cell dimensions. */
.calendar-grid .calendar-day.checkin,
.calendar-grid .calendar-day.checkout,
.calendar-grid .calendar-day.selected,
.calendar-grid .calendar-day.selected-range {
  width: 100% !important;
  height: auto !important;
  min-height: 76px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: stretch !important;
  padding: 9px 8px 7px !important;
  border-radius: 10px !important;
  transform: none !important;
}

.calendar-day:not(.empty):not(.disabled):not(.booked):hover {
  border-color: var(--gold, #c9a44c) !important;
  box-shadow: 0 3px 10px rgba(6, 59, 50, .09) !important;
  transform: translateY(-1px);
}

.calendar-day.checkin:hover,
.calendar-day.checkout:hover,
.calendar-day.selected-range:hover {
  transform: none !important;
}

.calendar-day.empty {
  visibility: hidden !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

.calendar-day.disabled {
  background: #f7f5f0 !important;
  border-color: #ece6da !important;
  color: #aaa69e !important;
  cursor: not-allowed !important;
}

.calendar-day.booked {
  background: #f4eeee !important;
  border-color: #dfcbc7 !important;
  color: #9a5a53 !important;
  cursor: not-allowed !important;
}

.calendar-day.today {
  box-shadow: inset 0 0 0 2px rgba(201, 164, 76, .55) !important;
}

.calendar-day.selected-range {
  background: #edf8f4 !important;
  border-color: #a9d2c4 !important;
  color: var(--emerald-dark, #063b32) !important;
}

.calendar-day.checkin,
.calendar-day.checkout {
  background: var(--emerald, #0b5d4d) !important;
  border-color: var(--emerald-dark, #063b32) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(6, 59, 50, .16) !important;
}

/* Match Admin New Guest Booking: keep the rate visually centered inside the date cell. */
.calendar-day .calendar-nightly-rate {
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Larger nightly prices on non-mobile screens only. */
@media (min-width: 761px) {
  .calendar-day .calendar-nightly-rate {
    font-size: 12px !important;
  }
}

.calendar-day.checkin .calendar-nightly-rate,
.calendar-day.checkout .calendar-nightly-rate {
  color: var(--gold-light, #ead79c) !important;
}

.calendar-day .calendar-checkout-label,
.calendar-day .checkout-label {
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .calendar-weekdays,
  .calendar-grid {
    gap: 5px !important;
  }

  .calendar-day,
  .calendar-grid .calendar-day.checkin,
  .calendar-grid .calendar-day.checkout,
  .calendar-grid .calendar-day.selected,
  .calendar-grid .calendar-day.selected-range {
    min-height: 58px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px 5px 5px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    font-size: 11px !important;
  }

  .calendar-weekdays span {
    font-size: 10px !important;
  }

  .calendar-day .calendar-nightly-rate {
    top: 60% !important;
    font-size: 7px !important;
    letter-spacing: -.15px !important;
  }

  .calendar-day .calendar-checkout-label,
  .calendar-day .checkout-label {
    top: 60% !important;
    font-size: 7px !important;
  }
}

@media (max-width: 420px) {
  .calendar-weekdays,
  .calendar-grid {
    gap: 3px !important;
  }

  .calendar-day,
  .calendar-grid .calendar-day.checkin,
  .calendar-grid .calendar-day.checkout,
  .calendar-grid .calendar-day.selected,
  .calendar-grid .calendar-day.selected-range {
    min-height: 52px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 5px 4px 4px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  .calendar-weekdays span {
    font-size: 9px !important;
  }

  .calendar-day .calendar-nightly-rate {
    font-size: 6.5px !important;
  }
}