@charset "UTF-8";

:root {
    /* Фирменные цвета */
    --colors__firm_violet: #340F54;
    --colors__firm_white: #ffffff;
    --colors__firm_gray: #818691;
    --colors__firm_red: #FA494C;
    --colors__firm_red_hover: #E33639;
    --colors__firm_green: #43A771;
    --colors__firm_text_dark: #1b1b21;
}

/***
 *    .######..######..##......######..######..#####..
 *    .##........##....##........##....##......##..##.
 *    .####......##....##........##....####....#####..
 *    .##........##....##........##....##......##..##.
 *    .##......######..######....##....######..##..##.
 *    ................................................
 * 
 *    Параметры фильтра
 */

.search_car__wrapper {
    color: #000;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .search_car__wrapper {
        margin: 0 5px;
    }
}

.search_car__block__settings {
    display: flex;
    column-gap: 40px;
}

/* .search_car__block__settings.settings_view__simple {
    flex-direction: column;
} */

.search_car__block__settings.settings_view__full {
    background-color: #fff;
    padding: 20px 50px;
    border-radius: 15px;
}

@media only screen and (max-width: 768px) {
    .search_car__block__settings {
        flex-direction: column;
    }

    .search_car__block__settings.settings_view__full {
        padding: 10px;
        border-radius: 15px;
    }
}

.search_car__block__settings__section__title label:has(input[type="checkbox"]) {
    margin-bottom: unset;
    font-size: 12px;
}

.search_car__block__settings__section__title label input[type="checkbox"] {
    margin-right: 5px;
}



/* 

Целиком секция с набором полей 

*/

.search_car__block__settings__section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* flex: 1 1 auto; */
}

.search_car__block__settings__section[data-section_name="buttons"] {}

/* .search_car__block__settings__section.settings_view__simple {
    flex-direction: column;
} */

.search_car__block__settings__section .horizontal_stack {
    flex-direction: row;
}

.horizontal_stack .select__field {
    width: 140px;
    flex-grow: 1;
}

.search_car__block__settings__section.central_section {
    flex-direction: column;
    /* max-width: 620px; */
    flex: 3 1 0;
}

@media only screen and (max-width: 768px) {

    .search_car__block__settings__section.central_section,
    .search_car__block__settings__section.right_section {
        margin-top: 25px;
        row-gap: 15px;
    }
}

.search_car__block__settings__section.left_section {
    flex-direction: column;
    /* max-width: 620px; */
    flex: 2 1 0;
}

.search_car__block__settings__section.right_section {
    flex-direction: column;
    /* max-width: 620px; */
    flex: 1 1 0;
}

.settings_view__simple {
    max-width: 880px;
}

.settings_view__simple .select__field {
    flex-grow: 1;
}

/* .settings_view__simple .search_car__block__settings__section:has(.select__field) {
    gap: 10px;
} */

/* .settings_view__simple .search_car__block__settings__button[data-button_name="show_result"],
.settings_view__simple .search_car__block__settings__button[data-button_name="clear_result"] {
    display: flex;
    flex-grow: 1;
} */

@media only screen and (min-width: 815px) {
    .settings_view__simple .search_car__block__settings__section [data-button_name="instruction"] {
        flex-grow: 1;

    }

    /* .settings_view__simple .search_car__block__settings__section a:has([data-button_name="instruction"]) {
        flex-grow: 1;
        display: flex;
    } */
}

/* .settings_view__simple .search_car__block__settings__section[data-section_name="buttons"] {
    flex: unset;
} */



.search_car__block__settings__section[data-section_name="release_from"] .select__field,
.search_car__block__settings__section[data-section_name="release_to"] .select__field {
    /* width: 230px; */
    flex-grow: 1;
    /* flex-shrink: 1; */
}

.search_car__block__settings__section[data-section_name="price_fields"] .select__field {
    flex-grow: 1;
    /* flex-shrink: 1; */
    /* width: 230px; */
}

/* .settings_view__simple .search_car__block__settings__section:has([data-section_name="specifications"]) {
    flex-direction: row-reverse;
} */

.search_car__block__settings__section[data-section_name="release_and_mileage"] {
    justify-content: space-between;
}

.settings_view__full .search_car__block__settings__section[data-section_name="release_and_mileage"] {
    flex-grow: 1;
}

[data-section_name="price_rows"] .select__field {
    flex-grow: 1;
}

@media only screen and (max-width: 815px) {
    .search_car__wrapper summary {
        background-color: #ffffff;
        border: 2px dashed var(--colors__firm_red);
        margin-bottom: 20px;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 815px) {
    .search_car__wrapper summary {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    /* .search_car__block__settings__section[data-section_name="buttons"] {
        width: 100%;
        margin-top: 25px;
        flex-direction: row;
        justify-content: space-between;
    } */
}

@media only screen and (max-width: 815px) {

    /* .search_car__block__settings__section {
        width: 100%;
    } */

    /* .search_car__block__settings__section[data-section_name="buttons"] {
        justify-content: space-between;
    } */

    /* .settings_view__full .search_car__block__settings__section[data-section_name="buttons"] {
        flex-direction: unset;
    } */

    a:has([data-button_name="instruction"]) {
        display: none;
    }

    /* .settings_view__full .search_car__block__settings__section:has(.select__field) {
        gap: 10px;
    } */

    /* Точечная настройка полей */

    /* .search_car__block__settings__section[data-section_name="specifications"],
    .search_car__block__settings__section[data-section_name="release"],
    .settings_view__simple .search_car__block__settings__section[data-section_name="price"],
    .search_car__block__settings__section[data-section_name="price_column"] {
        flex-direction: unset;
    } */
}

.search_car__block__settings__section__specifications {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 20px;
}

/* 

Заголовок секции настроек 

*/

.search_car__block__settings__section__title {
    font-size: 18px;
    font-weight: 400;
}

.settings_view__simple .search_car__block__settings__section__title {
    color: var(--colors__firm_text_dark);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.settings_view__full .search_car__block__settings__section__title {
    color: var(--colors__firm_text_dark);
    display: inline-flex;
    justify-content: space-between;
}

/* 

Целиком отдельное поле настроек фильтра 

*/

/* .settings_view__full .select__field[data-field_name="model"] {
    flex-basis: 250px;
    flex-grow: 1;
} */


.settings_view__full .search_car__block__settings__section[data-section_name^="release"] .select__field {
    flex-grow: 1;
}

@media only screen and (max-width: 815px) {

    /* Точечная настройка полей */

    /* .search_car__block__settings__section[data-section_name="specifications"] .search_car__block__settings__section__title,
    .search_car__block__settings__section[data-section_name="price_column"] .search_car__block__settings__section__title,
    .search_car__block__settings__section[data-section_name="release"] .search_car__block__settings__section__title {
        flex-basis: 100%;
    }

    .search_car__block__settings__section[data-section_name="specifications"] .select__field,
    .search_car__block__settings__section[data-section_name^="release"] .select__field,
    .search_car__block__settings__section[data-section_name="price"] .select__field {
        flex: 1 1 calc(50% - 10px);
    } */

}

/* 

Целиком элемент выбранного значения и input - поиска среди вариантов выпадающего списка

*/


.settings_view__full .select__field__variant_choosed {
    background-color: var(--colors__firm_white);
}

.select__field__variant__reset {
    position: absolute;
    right: 0;
    cursor: pointer;
    display: none;
    width: 25px;
    height: 100%;
    background-color: #fff;
}

.select__field__variants.in_focus .select__field__variant__reset {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 

Кнопки фильтра 

*/

[data-pseudobutton_name="result_count"] {
    height: 40px;
    width: 250px;
    color: #7d8d8d;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_car__block__settings__button {
    height: 40px;
    width: 250px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.search_car__block__settings__button>div {
    display: flex;
}

.search_car__block__settings__button[data-button_name="show_result"] {
    background-color: var(--colors__firm_red);
    color: #fff;
}

.settings_view__simple .search_car__block__settings__button[data-button_name="clear_result"] {
    background-color: #fff;
    color: var(--colors__firm_red);
    border: 2px solid var(--colors__firm_red);
}

.settings_view__full .search_car__block__settings__button[data-button_name="clear_result"] {
    color: #000;
    border: 2px solid #000;
}

.search_car__block__settings__button[data-button_name="instruction"] {
    background-color: var(--colors__firm_violet);
    color: #fff;
}

.settings_view__full .search_car__block__settings__button[data-button_name="subscribe_popup_call"] {
    color: #000;
    border: 2px solid var(--colors__firm_red);
}

.settings_view__full .search_car__block__settings__button[data-button_name="subscribe_popup_call"] .button__tip circle {
    stroke: #7D7D7D;
}

.settings_view__full .search_car__block__settings__button[data-button_name="subscribe_popup_call"] .button__tip path {
    fill: #7D7D7D;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    border: 2px solid #E0E0E0;
    border: unset;
    box-shadow: unset;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"]:hover {
    color: var(--colors__firm_red);
}


.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] .search_car__block__settings__button__share_icon {
    position: absolute;
    left: 35px;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] .search_car__block__settings__button__share_arrow {
    position: absolute;
    right: 20px;
    transition: all 0.2s;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"]:hover .search_car__block__settings__button__share_arrow {
    right: 10px;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] .search_car__block__settings__button__share_arrow svg {
    fill: #000;
}

.settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"]:hover .search_car__block__settings__button__share_arrow svg {
    fill: var(--colors__firm_red);
}

@media only screen and (max-width: 1200px) {
    [data-pseudobutton_name="result_count"] {
        order: 5;
        flex: 1;
    }
}

@media only screen and (max-width: 815px) {

    .search_car__block__settings__button,
    .settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] {
        font-size: 14px;
        font-weight: 400;
    }

    /* .search_car__block__settings__section[data-section_name="buttons"] .search_car__block__settings__button {
        flex: 0 0 calc(50% - 10px);
    } */

    .search_car__block__settings__button {
        width: 100%;
    }

    .settings_view__full a:has(.search_car__block__settings__button[data-button_name="instruction"]) {
        display: none;
    }

    /* .settings_view__full .search_car__block__settings__button[data-button_name="show_result"] {
        order: 2;
    }

    .settings_view__full .search_car__block__settings__button[data-button_name="subscribe_popup_call"] {
        order: 3;
    } */

    [data-pseudobutton_name="result_count"] {
        flex: 1;
        text-align: center;
        width: 100%;
        margin-top: 15px;
    }

    .settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] {
        /* order: 4; */
        border: 2px solid #000;
        margin-top: 15px;
    }

    .settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] .search_car__block__settings__button__share_icon {
        /* left: 10px; */
        display: none;

    }

    .settings_view__full .search_car__block__settings__button[data-button_name="share_popup_call"] .search_car__block__settings__button__share_arrow {
        /* right: 10px; */
        display: none;
    }

}


/***
 *    .##..##..######..######..##...##.
 *    .##..##....##....##......##...##.
 *    .##..##....##....####....##.#.##.
 *    ..####.....##....##......#######.
 *    ...##....######..######...##.##..
 *    .................................
 * 
 *    Настройки отображения результатов
 */


/* Блок настроек отображения результатов  */
.search_car__block__view_settings {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    gap: 50px;
    align-items: center;
}

@media only screen and (max-width: 815px) {
    .search_car__block__view_settings {
        margin-top: unset;
    }
}

/* Сортировка (селект) */
.search_car__block__view_settings .search_car__block__view_settings__sort {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.search_car__block__view_settings .search_car__block__view_settings__sort__label {
    color: #7D7D7D;
    font-size: 18px;
    font-weight: 500;
}

.search_car__block__view_settings .search_car__block__view_settings__sort__options .select__field {
    width: 180px;
}

@media only screen and (max-width: 815px) {
    .search_car__block__view_settings .search_car__block__view_settings__sort__options .select__field {
        width: 100%;
    }
}

.select__field[data-field_name="sort_by"] .select__field__variants.in_focus {
    max-height: unset;
}

/* Способ отображения карточек */

.search_car__block__view_settings .search_car__block__view_settings__view {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.search_car__block__view_settings .search_car__block__view_settings__view_variant {
    display: flex;
    align-items: center;
    color: #7d7d7d;
    cursor: pointer;
}

.search_car__block__view_settings .search_car__block__view_settings__view_variant.active {
    color: var(--colors__firm_violet);
}

/* Номер страницы */

.search_car__block__view_settings__pages_wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    overflow: hidden;
}

.search_car__block__view_settings__pages_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

/* .search_car__block__view_settings__pages_nav svg {} */
.search_car__block__view_settings__pages_nav rect {
    fill: var(--colors__firm_red);
    transition: fill 0.3s ease;
}

.search_car__block__view_settings__pages_nav path {
    fill: white
}

.search_car__block__view_settings__pages_nav:hover {
    opacity: 0.8;
}

.search_car__block__view_settings__pages_nav[data-direction="left"] {
    padding-left: 7px;
    transform: rotate(180deg);
}

.search_car__block__view_settings__pages_nav[data-direction="right"] {
    padding-left: 7px;
}

.search_car__block__view_settings__pages {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    overflow: hidden;
    scroll-behavior: smooth;
    justify-content: flex-start;
}

.search_car__block__view_settings__pages__page_num {
    height: 40px;
    flex: 1 0 40px;
    border: 1px solid var(--colors__firm_gray);
    color: #7d7d7d;
    background-color: var(--colors__firm_white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.search_car__block__view_settings__pages__page_num.active {
    color: var(--colors__firm_red);
    border: 2px solid var(--colors__firm_red);
    font-weight: 600;
    scroll-margin: auto;
}

.search_car__block__view_settings__pages__page_num:hover {
    font-weight: 600;
    background-color: #f8f8f8;
}

@media only screen and (max-width: 815px) {
    .search_car__block__view_settings {
        align-items: unset;
        flex-direction: column;
        gap: 30px;
        margin-top: 20px;
    }

    .search_car__block__view_settings .search_car__block__view_settings__view {
        display: none;
    }

    .search_car__block__view_settings .search_car__block__view_settings__sort {
        align-items: unset;
        flex-direction: column;
    }

    .search_car__block__view_settings__pages_wrapper {
        justify-content: center;
    }
}


/***
 *    .#####...######...####...##..##..##......######.
 *    .##..##..##......##......##..##..##........##...
 *    .#####...####.....####...##..##..##........##...
 *    .##..##..##..........##..##..##..##........##...
 *    .##..##..######...####....####...######....##...
 *    ................................................
 *
 *    Результат поиска
 */

/* .search_car__block__result {
    user-select: none;
} */