/* Layout */
#szurovideo {
    gap: 10px;
    justify-content: space-between;
}

.szurovideo {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.szurovideo select#musor-filter {
    line-height: 26px;
}

.szurovideo .searchnewform {
    flex-wrap: nowrap;
    flex: 1 1;
}

div#results-count {
    display: flex;
    align-items: center;
}

.video-filter-date-form  {
    display: flex;
    gap: 10px;
    flex: 0 1 calc(55% - 10px);
}
.datum-intervallum-filter {
    height: 44px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    appearance: none;
}

@media (max-width: 992px) {
    .szurovideo .searchnewform, .szurovideo, #szurovideo, .video-filter-date-form{
        flex-direction: column;
    }
    div#results-count{
        justify-content: center;
    }

}

/*
    Declare on wp-admin:
    --cvideofilter-primary
    --cvideofilter-btn-text
    --cvideofilter-primary-15
    --cvideofilter-dark-bg
    --cvideofilter-dark-text
    --cvideofilter-dark-accent-bg
    --cvideofilter-dark-accent-text
    --cvideofilter-dark-accent-50-bg
*/

/* Branding */
.searchnewform .datum-intervallum-filter,
.searchnewform #musor-filter {
    border: 1px solid var(--cvideofilter-primary, #f7323f);
}
#searchsubmit {
    background-color: var(--cvideofilter-primary, #f7323f);
    color: var(--cvideofilter-btn-text, white)
}
#searchsubmit:hover {
    background-color: var(--cvideofilter-primary-15, #f7323f25);
    border: 2px solid var(--cvideofilter-primary, #f7323f);
    color: var(--cvideofilter-primary, #f7323f) ;
}
.daterangepicker .calendar-table td.active:not(.off),
.daterangepicker .calendar-table td.active:not(.off):hover,
.daterangepicker .calendar-table td.available:hover {
    background-color: var(--cvideofilter-dark-accent-bg, #f7323f) !important;
    color: var(--cvideofilter-dark-accent-text, white);
}
.daterangepicker .calendar-table td.in-range {
    background-color: var(--cvideofilter-dark-accent-50-bg, #f7323f80);
}

/* Dark mode */
.dark-mode .searchnewform .datum-intervallum-filter,
.dark-mode .searchnewform #musor-filter {
    background: transparent;
}
.dark-mode .daterangepicker,
.dark-mode .daterangepicker .calendar-table{
    background: var(--cvideofilter-dark-bg, #071a28);
    color: var(--cvideofilter-dark-text, white);
}
.dark-mode .daterangepicker .calendar-table {
    border: none;
}
.dark-mode .daterangepicker .calendar-table td.off {
    background: var(--cvideofilter-dark-bg, #071a28);
}
.dark-mode .daterangepicker .calendar-table .prev span,
.dark-mode .daterangepicker .calendar-table .next span{
    border-color: var(--cvideofilter-dark-text, white);
}
.dark-mode .daterangepicker td.active:not(.off),
.dark-mode .daterangepicker td.active:not(.off):hover,
.dark-mode .daterangepicker td.available:hover,
.dark-mode .daterangepicker th.available:hover {
    background-color: var(--cvideofilter-dark-accent-bg, #f7323f) !important;
    color: var(--cvideofilter-dark-accent-text, white);
}
.dark-mode .daterangepicker td.in-range {
    color: var(--cvideofilter-dark-accent-text, white);
}