/* ==========================================================================
   Date picker (flatpickr), recoloured to match the resort's palette instead
   of the library's default blue. Shared by the "Request Your Stay" form and
   the panel's calendar screen, which both load the library from cdnjs.
   ========================================================================== */

.flatpickr-calendar {
    box-shadow: 0 18px 40px rgba(5, 4, 3, 0.35);
    border-radius: 8px;
    font-family: var(--bb-font-sans);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    display: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays {
    color: var(--bb-ink-dark);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 700;
}

span.flatpickr-weekday {
    color: var(--bb-ink-soft);
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    border-color: var(--bb-ink-red);
    background: var(--bb-ink-red);
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    border-color: #7c1319;
    background: #7c1319;
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    border-color: var(--bb-gold-200);
    background: var(--bb-gold-200);
    box-shadow: -5px 0 0 var(--bb-gold-200), 5px 0 0 var(--bb-gold-200);
}

.flatpickr-day.today {
    border-color: var(--bb-gold-500);
}

.flatpickr-day.today:hover {
    border-color: var(--bb-gold-500);
    background: var(--bb-gold-500);
    color: #fff;
}

.flatpickr-day:hover {
    background: var(--bb-gold-100);
}