/**
 * BCF Delivery picker — переопределения XDSoft DateTimePicker.
 *
 * Делаем popup time-picker шире (как у canapeclub) с правильно центрированными
 * стрелками вверх/вниз и опциями времени.
 */

/* Скругление popup */
.xdsoft_datetimepicker {
    border-radius: 7px !important;
}

/* Расширяем колонку времени */
.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 158px !important;
    margin-left: 8px !important;
}

/* Контейнер с опциями — на всю ширину */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    width: 158px !important;
}

/* Опции времени — по центру */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time {
    text-align: center;
}

/* Выделение выбранной/текущей опции — в брендовом цвете */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time.xdsoft_today {
    background: var(--main_color) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time:hover {
    background: var(--main_color) !important;
    color: #fff !important;
}

/* Календарь дат: hover = main_color, активная/сегодняшняя выбранная = second_color */
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_calendar th:hover {
    background: var(--main_color) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    background: var(--second_color) !important;
    color: #fff !important;
    box-shadow: none !important;
}
/* Заглушённые/прошедшие даты — оставляем без выделения и без hover-эффекта */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month:hover {
    background: transparent !important;
    color: inherit !important;
    cursor: default;
}

/* Скроллбар внутри timepicker — тоже брендовый при hover/активном */
.xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller:hover,
.xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller.xdsoft_scroller_active {
    background: var(--main_color) !important;
}

/* Стрелки prev/next — на всю ширину колонки, юникод-символ по центру
   (стандартный sprite XDsoft слишком прижат к левому краю — заменяем). */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    width: 158px !important;
    height: 18px !important;
    margin-left: 0 !important;
    background: none !important;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    text-indent: 0 !important;          /* XDsoft по умолчанию text-indent:100% — текст уезжает */
    overflow: visible !important;
    opacity: 0.7 !important;
    cursor: pointer;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev::before { content: '▲'; }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next::before { content: '▼'; }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next:hover {
    opacity: 1 !important;
    color: var(--main_color, #000) !important;
}