/* KeyFlight theme for flatpickr (loaded after flatpickr.min.css).
   Brand colours from DESIGN.md, Inter for days, Poppins for the month name,
   two months side by side on desktop, a soft range between the two dates. */

/* With two months shown, flatpickr marks the neighbouring months' days
   .hidden and expects visibility:hidden; bootstrap's .hidden turns that into
   display:none and the day grid loses its offset. */
.flatpickr-day.hidden {
    display: inline-block !important;
    visibility: hidden;
}
.flatpickr-calendar {
    /* flatpickr sets the width inline for the day grid; content-box keeps the
       padding from eating the last column */
    box-sizing: content-box;
    padding: 16px 16px 12px;
    border: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(20, 20, 20, .18), 0 0 0 1px #E6E7F5;
    font-family: "Inter", Roboto, sans-serif;
}

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

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 #E6E7F5;
}

.flatpickr-months {
    margin-bottom: 8px;
}

.flatpickr-months .flatpickr-month {
    height: 40px;
    color: #141414;
}

.flatpickr-current-month {
    padding-top: 6px;
    font-family: "Poppins", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #141414;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper {
    font-weight: 600;
}

.flatpickr-current-month .cur-month:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background: transparent;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #141414;
    fill: #141414;
    transition: background-color .15s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #F8F8F8;
    color: #4450F2;
    fill: #4450F2;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 12px;
    height: 12px;
}

.flatpickr-weekdays {
    height: 32px;
}

span.flatpickr-weekday {
    font-size: 12px;
    font-weight: 500;
    color: #9299A2;
}

.flatpickr-day {
    height: 40px;
    line-height: 40px;
    max-width: 40px;
    margin: 1px 0;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #141414;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #F8F8F8;
    border: none;
    color: #141414;
}

.flatpickr-day.today {
    box-shadow: inset 0 0 0 1px #4450F2;
    color: #4450F2;
}

.flatpickr-day.today:hover {
    background: #F8F8F8;
    color: #4450F2;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.today,
.flatpickr-day.startRange.today,
.flatpickr-day.endRange.today {
    background: #4450F2;
    border: none;
    color: #fff;
    box-shadow: none;
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: #EEF0FF;
    border: none;
    box-shadow: -5px 0 0 #EEF0FF, 5px 0 0 #EEF0FF;
    color: #141414;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 #4450F2;
}

.flatpickr-day.startRange:not(.endRange) {
    border-radius: 10px 0 0 10px;
}

.flatpickr-day.endRange:not(.startRange) {
    border-radius: 0 10px 10px 0;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #C9CCD3;
}

@media (max-width: 767px) {
    .flatpickr-calendar {
        padding: 12px 8px 8px;
    }
}

/* Footer with the one-way action, added by generatorForm.js */
.fp-footer {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #E6E7F5;
}

.fp-footer__oneway {
    height: 40px;
    padding: 0 20px;
    border: 1px solid #D4D4D4;
    border-radius: 10px;
    background: #fff;
    color: #141414;
    font-family: "Inter", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.fp-footer__oneway:hover {
    border-color: #4450F2;
    color: #4450F2;
}