/* Input field */
.datepicker-js {
    background-color: var(--color-white) !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 300 !important;
    border-radius: 0.75rem !important;

    &::placeholder {
        color: var(--color-gray-dark) !important;
    }
}

/* Optional: Style the calendar popup to look more like BS5 */
.air-datepicker {
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: 0.75rem !important;
    z-index: 1060 !important;
}

/* Style the selected date and range */
.air-datepicker-cell.-selected-, 
.air-datepicker-cell.-selected-.-current-,
.air-datepicker-cell.-in-range-.-selected-,
.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.air-datepicker-cell.-in-range- {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}