/* jQuery UI Datepicker Fix */

/* Main datepicker container */
.ui-datepicker {
    width: 17em;
    padding: 0;
    border: 1px solid #aaa;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
}

/* Header styling */
.ui-datepicker .ui-datepicker-header {
    background: #e9e9e9;
    border: 1px solid #d3d3d3;
    border-bottom: none;
    color: #333;
    font-weight: bold;
}

/* Month/year display */
.ui-datepicker .ui-datepicker-title {
    font-weight: bold;
    color: #333;
}

/* Navigation arrows */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: #e9e9e9;
    cursor: pointer;
}

/* Replace jQuery UI icons with Font Awesome */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    text-decoration: none !important;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    text-decoration: none !important;
    border: none;
    background: #dadada;
    top: 2px;
}

/* Hide the default span content */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

/* Create new icon with pseudo-element */
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-prev:before {
    content: '\f053';
}

.ui-datepicker .ui-datepicker-next:before {
    content: '\f054';
}

/* Day cells */
.ui-datepicker td {
    padding: 0;
} 

.ui-datepicker td a {
    text-align: center;
    border: 1px solid transparent;
    background: #f6f6f6;
}

/* Day cell hover and active states */
.ui-datepicker td a.ui-state-default:hover {
    background: #dadada;
    border: 1px solid #999;
}

.ui-datepicker td a.ui-state-active {
    background: #dadada;
    border: 1px solid #aaa;
    color: #212121;
}

/* Today's date */
.ui-datepicker td a.ui-state-highlight {
    background: #e4f1fb;
    border: 1px solid #7096ab;
    color: #363636;
}

/* Day names (Mon, Tue, etc.) */
.ui-datepicker th {
    background: #f6f6f6;
    border-bottom: 1px solid #d3d3d3;
    color: #555;
    font-size: 0.9em;
}

/* Fix month/year dropdown widths */
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year {
    width: 45%;
}