/* КАЛЕНДАРЬ */
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover {
    border: 1px solid var(--color-calendar) !important;
    background: var(--color-calendar) !important;
    color: #2d5a4c !important;
}
/* Перекрашиваем "Сегодня" (вместо желтого) */
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
    background: #f0d0a4 !important;
    color: #2d5a4c !important; /* Темный текст для читаемости на светлом фоне */
}
/* Убираем желтый фон при наведении на сегодняшнее число */
.ui-datepicker .ui-state-highlight.ui-state-hover {
    background: #f0d0a4 !important;
}
/* Подсветка диапазона */
.ui-datepicker-calendar td.ui-datepicker-range-highlight a {
    background: #e8f5e9 !important; /* Светло-зеленый фон диапазона */
    border-color: #c8e6c9 !important;
    color: var(--color-banner) !important;
}
/* Подсветка диапазона ПРИ НАВЕДЕНИИ (динамическая) */
.ui-datepicker-calendar td.ui-datepicker-hover-range a {
    background: #e8f5e9 !important; /* Тот же светло-зеленый, что и для выбранного */
    border-color: #c8e6c9 !important;
    color: var(--color-banner) !important;
}
/* Когда просто водим мышкой по одной дате */
.ui-datepicker-calendar td.ui-datepicker-hover-range:not(.ui-datepicker-range-highlight) a {
    background: #d0f0d0 !important; /* Чуть сочнее зеленого */
    border: 1px solid #2d5a4c !important;
}
/* Вторая выбранная дата (и первая) — делаем темными */
.ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: var(--color-calendar) !important;
    color: #2d5a4c !important;
    border: 1px solid var(--color-calendar) !important;
    font-weight: bold;
}
/* Точка под курсором при выборе диапазона — делаем такой же темной */
.ui-datepicker-calendar td.ui-datepicker-hover-end a {
    background: var(--color-calendar) !important; 
    color: #2d5a4c !important;
    border: 1px solid var(--color-calendar) !important;
}
/* Подсветка диапазона (между датами) — остается светлой */
.ui-datepicker-calendar td.ui-datepicker-hover-range a {
    background: #e8f5e9 !important;
    color: var(--color-banner) !important;
}
/* Опционально: делаем крайнюю точку (под курсором) чуть ярче */
.ui-datepicker-calendar td.ui-datepicker-hover-range.last-hover a {
    background: #d0f0d0 !important;
}
/* Кнопка Очистить */
.ui-datepicker-clear {
    float: left !important;
    background: var(--color-btn) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.4em 1em !important;
    opacity: 1 !important;
    cursor: pointer;
}
.ui-datepicker-clear:hover { background: var(--color-hover) !important; }
/* Прячем стандартную кнопку Close, она путает */
.ui-datepicker-close { display: none !important; }
/* Выносим в корень и гарантируем видимость */
body > #ui-datepicker-div,
#ui-datepicker-div {
    position: absolute !important;
    z-index: 9999999 !important; /* Выше модалки Magnific Popup (99999) */
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    display: none;
}
/* Фикс для Magnific Popup подложки */
.mfp-wrap {
    z-index: 99999 !important;
}
/* Увеличиваем место для выбора месяца и года */
.ui-datepicker-header select {
    display: inline-block;
    height: auto;
    padding: 2px 5px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
/* Конкретно для года, чтобы не обрезался 2026 */
.ui-datepicker-year {
    width: 75px !important; 
}
.ui-datepicker-month {
    width: 85px !important;
}
/* Центрируем заголовки */
.ui-datepicker-title {
    margin: 0 2.3em !important;
    line-height: 1.8em !important;
    display: flex;
    justify-content: center;
}
/* Базовый стиль для кнопок навигации */
.ui-datepicker-prev, .ui-datepicker-next {
    top: 5px !important;
    cursor: pointer;
    background: none !important;
    border: none !important;
}
/* Убираем стандартные иконки-картинки */
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none !important;
}
/* Рисуем свои стрелки через :after */
.ui-datepicker-prev:after, .ui-datepicker-next:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #2d5a4c;
    border-bottom: 2px solid #2d5a4c;
    position: absolute;
    top: 50%;
    left: 50%;
}
.ui-datepicker-prev:after {
    transform: translate(-30%, -50%) rotate(45deg);
}
.ui-datepicker-next:after {
    transform: translate(-70%, -50%) rotate(-135deg);
}
/* Эффект при наведении на стрелки */
.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
    background: #f0f0f0 !important;
    border-radius: 50%;
    top: 5px !important;
}
.ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left !important;
    background: #f8f8f8 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    opacity: 1 !important;
    font-weight: normal !important;
    padding: 0.4em 1em !important;
}
.ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    background: #eee !important;
}