/* Restyles the Flatpickr calendar (used by the homepage floating bar and
   the /book page date fields) to match the site's terracotta palette
   instead of Flatpickr's default blue. Colors match :root in style.css. */

.flatpickr-calendar {
    font-family: var(--font-body, 'Helvetica Neue', sans-serif);
    box-shadow: 0 10px 30px rgba(27, 8, 10, 0.18);
    border-radius: 10px;
    padding: 10px 12px 12px;
    width: 328px !important;
}

.flatpickr-days,
.dayContainer {
    width: 304px !important;
    min-width: 304px !important;
    max-width: 304px !important;
}

.flatpickr-day {
    height: 41px;
    line-height: 41px;
    margin: 1px 0;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--orange, #b7624a);
    border-color: var(--orange, #b7624a);
    color: #fff;
}

/* The nights between check-in and check-out, once both are picked. */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--cream, #efede7);
    border-color: var(--cream, #efede7);
    box-shadow: -5px 0 0 var(--cream, #efede7), 5px 0 0 var(--cream, #efede7);
}

.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.endRange {
    box-shadow: none;
}

.flatpickr-day.today {
    border-color: var(--orange, #b7624a);
}

.flatpickr-day:hover {
    background: var(--cream, #efede7);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #d3c9c9;
    text-decoration: line-through;
    cursor: not-allowed;
}

.flatpickr-day.flatpickr-disabled.selected,
.flatpickr-day.flatpickr-disabled.startRange,
.flatpickr-day.flatpickr-disabled.endRange {
    color: #fff;
    text-decoration: none;
    cursor: default;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    color: var(--ink, #1b080a);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--orange, #b7624a);
}