/* Строка полей + кнопка ------------------------------------------ */
.cs-body {
    display: flex;
    align-items: stretch;
    gap: 16px;
}
.cs-fields {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 22px;
    /* синяя рамка-градиент, как в .search-form-inner на сайте */
    background-image: linear-gradient(#fff, #fff), linear-gradient(#1DADED, #007AC6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.cs-cell {
    position: relative;
    display: flex;
    flex: 1 1 0;
    box-sizing: border-box;
    min-width: 0;
    min-height: calc(var(--fd-height) + 8px);   /* 8px — свои паддинги; ряд не прыгает */
    padding: 4px;
}
/* до инициализации JS нативный <select multiple> — это список на 6-8 строк,
   он бы растянул ряд. Выносим его из потока средствами CSS (см. также
   select.fd-cloak в filter-dropdown.css — то же для произвольной разметки) */
.cs-cell > select {
    position: absolute;
    box-sizing: border-box;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.cs-cell + .cs-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: #E3ECF3;
}
.cs-cell > .fd { flex: 1 1 auto; min-width: 0; }
.cs-cell > .fd.open { z-index: 20; }

.cs-submit {
    flex: 0 0 auto;
    min-width: 210px;
    padding: 0 28px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(#1DADED, #007AC6);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(0, 122, 198, .3);
    transition: box-shadow .2s, filter .2s;
}
.cs-submit:hover { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(0, 122, 198, .4); }
.cs-submit:active { box-shadow: 0 2px 8px rgba(0, 122, 198, .4); }
.cs-submit.loading { pointer-events: none; opacity: .6; }

/* Подгонка внешнего вида FilterDropdown под макет ------------------ */
.cs {
    --fd-accent: #1DADED;
    --fd-accent-dark: #007AC6;
    --fd-color: #0064A2;
    --fd-border: #D8E8F3;
    --fd-muted: #9AA7B1;
    --fd-row-active: #5A97DE;
    --fd-band: #E7EAED;
    --fd-height: 56px;
    --fd-radius: 18px;
    --fd-line: 22px;
    --fd-chip-h: 24px;
}
/* поле ячейки: по умолчанию без рамки, рамка — только у заполненного/открытого */
.cs-cell .fd-field {
    border-color: transparent;
    border-radius: var(--fd-radius);
    box-shadow: none;
    padding: 4px 28px 4px 14px;
    font-size: 16px;
}
.cs-cell .fd-placeholder { font-size: 16px; }
/* Рамка — признак ЗАПОЛНЕННОГО поля. Само раскрытие списка рамку не рисует
   (на макете у открытого пустого поля обводки нет), свечения тоже нет.
   Чередование специфичностей: .filled.open (0-5-0) старше .open (0-4-0),
   поэтому заполненное поле не теряет рамку, когда список открыт. */
.cs-cell .fd.open .fd-field {
    border-color: transparent;
    box-shadow: none;
}
.cs-cell .fd.filled .fd-field,
.cs-cell .fd.filled.open .fd-field {
    border-color: var(--fd-accent);
    box-shadow: none;
}
/* на hover рамка НЕ появляется: незанятое поле — часть общего контейнера */
.cs-cell .fd-field:hover { border-color: transparent; box-shadow: none; }
/* При фокусе и открытом списке никакой синей обводки и свечения: ни кольца,
   ни рамки заполненного поля (рамка возвращается, когда фокус ушёл) */
.cs-cell .fd .fd-field:focus,
.cs-cell .fd .fd-field:focus-visible,
.cs-cell .fd:focus-within .fd-field,
.cs-cell .fd.filled:focus-within .fd-field,
.cs-cell .fd.filled.open .fd-field {
    outline: 0;
    border-color: transparent;
    box-shadow: none;
}
/* галочка «⌄» — тёмная тонкая, как в макете */
.cs-cell .fd-caret {
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right-color: #2E3A44;
    border-bottom-color: #2E3A44;
}
.cs-cell .fd.open .fd-caret { margin-top: -2px; }
/* чипы в узкой ячейке складываются столбиком сами (как на макете);
   ширину на .fd-chips вешать нельзя — пустой контейнер вытеснит
   плейсхолдер на вторую строку и текст уйдёт вверх */
.cs-cell .fd-chip { max-width: 100% !important; }   /* Код SiteForge: !important, иначе inline max-width из chipMaxWidth (170px) шире узкой ячейки и чип налезает на галочку «⌄» */
/* ряд растянулся (в другом поле чипы в 2 строки) — поле обязано
   заполнить всю высоту ячейки, иначе его текст прилипнет к верху */
.cs-cell > .fd { display: flex; }
/* Код SiteForge: поле не шире своей ячейки (раньше росло по ширине чипа и выезжало за край фильтра): базис 0 + min-width 0, чип обрезается многоточием */
.cs-cell > .fd > .fd-field { flex: 1 1 0; min-width: 0; max-width: 100%; }
.cs-cell .fd-chips { min-width: 0; }
/* панель: шрифт и подвал календаря по макету */
.cs-cell .fd-panel { font-size: 15px; }
.cs-cell .fd-cal-foot { display: none; }
.cs-cell .fd-cal-prev.off { display: none; }   /* на макете «<» нет у первой границы */
.cs-cell .fd-custom-label { text-align: left; padding-left: 8px; }
.cs-cell .fd-option { min-height: 32px; }
.cs-cell .fd-search-input { font-size: 15px; }

/* Адаптив ---------------------------------------------------------- */
        @media (max-width: 991.98px) {
    .cs-body { flex-direction: column; }
    .cs-fields { flex-wrap: wrap; }
    .cs-cell { flex: 1 1 45%; }
    .cs-cell + .cs-cell::before { display: none; }
    .cs-submit { min-width: 0; width: 100%; padding: 14px; }
}
@media (max-width: 575.98px) {
                            .cs-cell { flex: 1 1 100%; }
}
    
/* Блок в карточке сайта: ряд полей не должен тянуться на всю ширину контейнера */
.cs .cs-body { margin-bottom: 0; }
.cs .cs-fields { box-shadow: 0 0 0 0 transparent; }

/* Рамки у полей нет вообще: ни у заполненного, ни при фокусе, ни при открытом списке */
.cs-cell .fd .fd-field,
.cs-cell .fd.filled .fd-field,
.cs-cell .fd.open .fd-field,
.cs-cell .fd.filled.open .fd-field,
.cs-cell .fd .fd-field:hover,
.cs-cell .fd .fd-field:focus,
.cs-cell .fd .fd-field:focus-visible {
    border-color: transparent;
    box-shadow: none;
    outline: 0;
}

/* Класс теплохода: в списке вместо цифр звёздочки (3, 3+, 4, 4+, 5, 5+), как было раньше */
.fd-stars .fd-option .fd-label {
    display: flex;
    align-items: center;
    font-size: 0;
}
.fd-stars .fd-option .fd-label::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: 22px;
    background: url(/img/stars-ico.svg) 0 center repeat-x;
    background-size: 22px 22px;
}
.fd-stars .fd-option[data-value="1"] .fd-label::before,
.fd-stars .fd-option[data-value="2"] .fd-label::before { width: calc(22px * 3); }
.fd-stars .fd-option[data-value="3"] .fd-label::before,
.fd-stars .fd-option[data-value="4"] .fd-label::before { width: calc(22px * 4); }
.fd-stars .fd-option[data-value="5"] .fd-label::before,
.fd-stars .fd-option[data-value="6"] .fd-label::before { width: calc(22px * 5); }
.fd-stars .fd-option[data-value="2"] .fd-label::after,
.fd-stars .fd-option[data-value="4"] .fd-label::after,
.fd-stars .fd-option[data-value="6"] .fd-label::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 13px;
    height: 22px;
    margin-left: 4px;
    background: url(/img/plus-ico.svg) center center no-repeat;
}

/* Пустой контейнер чипов не должен занимать строку: у длинной подписи
   («Продолжительность») он переносился вниз, и текст сдвигался вверх */
.cs-cell .fd-chips:empty { display: none; }
.cs-cell .fd-field { row-gap: 0; }

/* Слайдер цены: ручка 18px центрируется на краю дорожки (по умолчанию noUiSlider
   рассчитан на 34px и выносит правую ручку за поле), по краям отступ в полручки */
.cs #steps-slider {
    width: auto;
    margin: 15px 9px;
}
.cs #steps-slider .noUi-handle {
    right: -9px;
}
.cs-cell .fd-date-input { font-size: 14px; }