/* Jobs Portal Flatpickr overrides — modal-safe, mobile-friendly */
.flatpickr-calendar {
    z-index: 10050 !important;
    font-family: inherit;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    width: 307px;
    max-width: calc(100vw - 24px);
}

.flatpickr-calendar.open {
    display: inline-block;
}

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

.flatpickr-current-month {
    font-size: 110%;
    padding-top: 4px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.flatpickr-day.today {
    border-color: #f59e0b;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.flatpickr-day:hover {
    background: #eff6ff;
    border-color: #eff6ff;
}

.jp-datepicker-field {
    position: relative;
    display: block;
    width: 100%;
}

.jp-datepicker-field input.datepicker,
.jp-datepicker-field input[data-datepicker],
input.datepicker,
input[data-datepicker] {
    padding-right: 44px;
    cursor: pointer;
}

input.datepicker[readonly],
input[data-datepicker][readonly],
.jp-datepicker-field input.datepicker[readonly],
.jp-datepicker-field input[data-datepicker][readonly] {
    background-color: #fff;
    caret-color: transparent;
    cursor: pointer;
}

.jp-datepicker-field__icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0357e9;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.jp-datepicker-field__icon:hover,
.jp-datepicker-field__icon:focus {
    background: #eaf1ff;
    color: #0246c0;
    outline: none;
}

.jp-datepicker-field__icon i,
.jp-datepicker-field__icon svg {
    pointer-events: none;
    display: block;
}

@media (max-width: 480px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 24px);
    }
}