/* Start:/bitrix/templates/E-gorc/css/job-listing.css?176423036438269*/
/* Шрифты из предыдущего кода */
@font-face {
    font-family: 'Chiffon TRIAL';
    src: url('/bitrix/templates/E-gorc/css/font/chiffon-trial-extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chiffon TRIAL';
    src: url('/bitrix/templates/E-gorc/css/font/chiffon-trial-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chiffon TRIAL';
    src: url('/bitrix/templates/E-gorc/css/font/chiffon-trial-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chiffon TRIAL';
    src: url('/bitrix/templates/E-gorc/css/font/chiffon-trial-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chiffon TRIAL';
    src: url('/bitrix/templates/E-gorc/css/font/chiffon-trial-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Общий фон всей страницы */
body {
    background-color: #F8FAFC;
    margin: 0;
    font-family: "Lexend Deca", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-direction: column;
}

/* Обёртка для header и hero */
.main-wrapper {
    width: 100%;
    height: 589px;
    background: url('/bitrix/templates/E-gorc/img/job-listing-bg.png') no-repeat center bottom;  
    background-size: cover; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    margin-top: -124px;
}


/* HERO SECTION */
.hero {
    width: 1440px;
    height: 465px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    overflow: visible; /* Позволяет .suggestions выходить за пределы без обрезки */
}

.hero-content {
    width: 570px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title {
    color: #061C3D;
    text-align: center;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-h3, 36px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--type-lineHeight-h2, 52px); /* 144.444% */
    letter-spacing: -0.72px;
}

.hero-subtitle {
    margin-top: 12px;
    color: var(--color-text-subtitle, #334155);
    text-align: center;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.hero-secondary {
    margin-top: 36px;
    position: relative; /* Контейнер для управления высотой */
}

.search-bar-container {
    position: relative; /* Фиксируем высоту контейнера */
    height: 64px; /* Фиксированная высота, равная высоте .search-input-wrapper + padding */
}

.search-bar {
    width: 704px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 32px 48px -16px #F1F5F9;
    position: relative;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    box-shadow: 0px 2px 4px 0px #F1F5F9;
    z-index: 1;
}

.input-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 10px 36px 10px 48px;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    font-size: 16px;
    font-weight: 300;
    color: #838E9E;
    background: #FFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 40px;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-radius: 12px;
    border: 1px solid #9C55D4;
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(156, 85, 212, 0.24);
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    height: 40px;
    padding: 10px 36px 10px 48px;
}

.search-icon-left {
    position: absolute;
    left: 12px;
    width: 24px;
    height: 24px;
    background: url('/bitrix/templates/E-gorc/img/Search.svg') no-repeat center;
    background-size: contain;
}

.search-icon-right {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    background: url('/bitrix/templates/E-gorc/img/X.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: none;
}

.search-input:not(:placeholder-shown) + .search-icon-right {
    display: block;
}

.input-container.loading .search-icon-right {
    width: 24px;
    height: 24px;
    background: url('/bitrix/templates/E-gorc/img/Spinner.svg') no-repeat center;
    background-size: contain;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.custom-select {
    width: 199px;
    height: 40px;
    position: relative;
}

.select-button {
    width: 100%;
    height: 100%;
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    font-weight: 300;
    color: #838E9E;
    box-sizing: border-box;
}

.select-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.custom-select.open .select-arrow {
    transform: rotate(180deg);
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: #FFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.select-options::-webkit-scrollbar {
    display: none;
}

.select-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.select-option:hover {
    background: var(--color-surface-secondary, #F1F5F9);
}

.select-option input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid #CDD2D8;
    background: var(--color-surface-page, #FFF);
    margin-right: 8px;
    position: relative;
    cursor: pointer;
}

.select-option input[type="checkbox"]:checked {
    background: #061C3D;
    border: none;
}

.select-option input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 14px;
    line-height: 1;
}

.select-option span {
    overflow: hidden;
    color: #061C3D;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    flex: 1;
}

.search-btn {
    padding: 10px 20px;
    border-radius: 12px;
    background: #061C3D;
    color: white;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.suggestions {
    background: #FFF;
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-radius: 16px; /* Восстановили оригинальный радиус */
    padding: 12px;
    max-height: 0; /* Начальная высота 0 */
    overflow-y: auto; /* Прокрутка при необходимости */
    scrollbar-width: thin; /* Для Firefox */
    scrollbar-color: #D0D5DD #F1F5F9; /* Для Firefox */
}

.suggestions::-webkit-scrollbar {
    width: 6px; /* Ширина скроллбара */
}
.suggestions::-webkit-scrollbar-track {
    background: #F1F5F9; /* Цвет трека */
    border-radius: 12px;
}
.suggestions::-webkit-scrollbar-thumb {
    background: #D0D5DD; /* Цвет ползунка */
    border-radius: 12px;
}
.suggestions::-webkit-scrollbar-thumb:hover {
    background: #B0B5BD; /* Цвет ползунка при наведении */
}

.search-bar.active .suggestions {
    display: block;
    max-height: 300px; /* Ограничиваем высоту */
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    background: #FFF;
    border-radius: 16px;
}

.suggestion-item:hover {
    background: #F5F5F9;
}

.suggestion-icon {
    width: 52px;
    height: 52px;
    margin-right: 12px;
}

.suggestion-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

.suggestion-text {
    color: #061C3D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.32px;
    margin-right: 6px;
}

.suggestion-text .match {
    font-weight: 500;
    background: rgba(156, 85, 212, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
}

.suggestion-text .tag {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    background: #F4E0F8;
    color: #6941C6;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.suggestion-meta {
    color: #999FAA;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 4px;
}

.suggestion-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    margin-left: auto;
}

/* Search Results */
.search-results {
    background: #FFF;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.search-results.hidden {
    display: none;
}

.selected-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.keyword-chip {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 50px;
    border: 1px solid #E6E8EC;
    background: #FFF;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    color: var(--color-text-subtitle, #334155);
}

.keyword-chip .remove-btn {
    margin-left: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #94A3B8;
}

.keyword-chip .remove-btn:hover {
    color: #061C3D;
}

.remove-all {
    border-radius: 50px;
    border: 0px solid var(--color-text-subtitle, #334155);
    background: #E3E7ED;
    padding: 4px 12px;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-text-subtitle, #334155);
    cursor: pointer;
    border: none;
}

.remove-all:hover {
    background: #D1D7E0;
}

.job-listings-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-result-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    background: #FFF;
}

.job-result-item:hover {
    background: #F2F4F8;
    border-radius: 12px;
}

.job-result-item .suggestion-icon {
    width: 52px;
    height: 52px;
    margin-right: 12px;
}

.job-result-item .suggestion-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

.job-result-item .suggestion-text {
    color: #061C3D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.32px;
    margin-right: 6px;
}

.job-result-item .suggestion-text .match {
    font-weight: 500;
    background: rgba(156, 85, 212, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
}

.job-result-item .suggestion-text .tag {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    border-radius: 16px;
    background: #F4E0F8;
    color: #6941C6;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.job-result-item .suggestion-meta {
    color: #999FAA;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 4px;
}

/* Контейнер для иконки и кнопки */
.suggestion-arrow-container {
    display: flex;
    align-items: center;
}

/* Стили для иконки по умолчанию */
.suggestion-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    display: block;
}

/* Скрываем иконку при наведении */
.job-result-item:hover .suggestion-arrow {
    display: none;
}

/* Стили для кнопки "Apply now" */
.apply-btn {
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    display: none;
}

/* Показываем кнопку при наведении вместо иконки */
.job-result-item:hover .apply-btn {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    border-radius: var(--size-elements-120, 12px);
    border: 1px solid #E6E8EC;
    background: #FFF;
    height: auto;
}

.results-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    font-size: 14px;
}

.results-count {
    color: #999FAA;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-left: 12px;
}

.show-all-btn {
    display: flex;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
    color: #061C3D;
    text-align: right;
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    background: #FFF;
    cursor: pointer;
    border: none;
}

/* Стили для элемента истории поиска */
.history-item {
    display: flex;
    padding: 6px 16px 6px 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: var(--size-elements-0, 0px);
    background: var(--color-surface-page, #FFF);
}

.history-item:hover {
    background: #F5F5F9; /* Лёгкий hover-эффект, как у suggestion-item */
    border-radius: 12px;
}

/* Иконка часов слева */
.history-icon {
    width: 16px;
    height: 16px;
    background: url('/bitrix/templates/E-gorc/img/subway_refresh-time.svg') no-repeat center; /* Замените на путь к вашей иконке часов */
    background-size: contain;
}

/* Текст истории поиска */
.history-text {
    color: #42526B;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    flex: 1; /* Чтобы текст занимал всё доступное пространство */
}

/* Иконка очистки справа */
.history-clear {
    width: 16px;
    height: 16px;
    background: url('/bitrix/templates/E-gorc/img/mdi_remove.svg') no-repeat center; /* Замените на путь к вашей иконке очистки */
    background-size: contain;
    cursor: pointer;
}

/* Контейнер для "No results found" */
.no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    text-align: center;
}

/* Иконка "No results" */
.no-results-icon {
    width: 110px;
    height: 120px;
    background: url('/bitrix/templates/E-gorc/img/emptySearchResult.svg') no-repeat center;
    background-size: contain;
    margin-bottom: 20px;
}

/* Основной текст */
.no-results-title {
    color: #101828;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 8px;
}

/* Дополнительный текст  */
.no-results-subtitle {
    width: 70%;
    color: #667085;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    white-space: pre-wrap; 
}

.popular-searches {
    text-align: center;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-body-1, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-body-1, 20px); /* 142.857% */
    margin: 12px 0 0 0;
}

.popular-searches .highlight {
    color: #94A3B8;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-body-1, 14px);
    font-style: normal;
    font-weight: 300;
    line-height: var(--type-lineHeight-body-1, 20px);
    background-color: transparent;
}

/* FILTERS SECTION */
.filters-section {
    width: 1440px;
    margin: 36px auto 0;
    background: #F8FAFC;
    display: flex;
    justify-content: center;
}

.filters-container {
    display: flex;
    gap: 24px;
    width: 100%;
}

/* Первый див: Фильтры */
.filters {
    width: 21%;
    padding-right: 12px; 
}

.filters-title {
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-sub-1, 20px);
    font-style: normal;
    font-weight: 500; /* Исправлено: font-weight: 500 вместо 5 */
    line-height: var(--type-lineHeight-sub-2, 24px); /* 120% */
    letter-spacing: -0.4px;
    margin-top: 24px; /* Значение по умолчанию для всех .filters-title */
}

.filters-title:first-child {
    margin-top: 0; 
}

.filter-group {
    margin-top: 16px;
}

.filter-group-title {
    overflow: hidden;
    color: var(--color-text-subtitle, #334155);
    text-overflow: ellipsis;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-sub-2, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-lineHeight-sub-2, 24px);
}

/* Поиск для Industry */
.filter-search {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--size-elements-120, 12px);
    border: 1px solid #E6E8EC;
    background: var(--color-surface-page, #FFF);
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход для эффекта */
}

/* Стили при фокусе */
.filter-search:focus-within {
    border: 1px solid #9C55D4;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(156, 85, 212, 0.24);
}

.filter-search-icon {
    width: 24px;
    height: 24px;
    background: url('/bitrix/templates/E-gorc/img/Search.svg') no-repeat center;
    background-size: contain;
}

.filter-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #787486;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.filter-search-input:focus {
    outline: none;
    color: #061C3D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.filter-search-input:focus + .filter-clear-icon {
    display: block;
}

.filter-search-input:not(:placeholder-shown) + .filter-clear-icon {
    display: block;
}

.filter-clear-icon {
    width: 16px;
    height: 16px;
    background: url('/bitrix/templates/E-gorc/img/X.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: none;
}

/* Список индустрий */
.filter-options {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    min-height: 24px; /* Фиксируем минимальную высоту */
}

.filter-option input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #061C3D;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    stroke: #061C3D;
    stroke-width: 2;
    stroke-linejoin: round;
}

.filter-option input[type="checkbox"]:checked {
    background: #061C3D;
    border: none;
}

.filter-option input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 16px;
    line-height: 1;
}

.filter-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475467;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 1; /* Растягиваем текст, но не задаём max-width: 0 */
    min-width: 0; /* Позволяем тексту сжиматься, если нужно */
}

.filter-option-count {
    color: #475467;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex-shrink: 0; /* Предотвращаем сжатие счётчика */
    margin-left: auto; /* Сдвигаем счётчик вправо */
}

/* Подсветка совпадений */
.highlight {
    border-radius: 4px;
    background: rgba(156, 85, 212, 0.15);
}

.filter-option.hidden {
    display: none;
}

/* Кнопка Show more */
.show-more-btn {
    margin-top: 16px;
    border: none;
    background: transparent;
    color: #414141;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    cursor: pointer;
}

/* Work Experience и Type of Employment используют те же стили, что и Industry */

/* Salary Range */
.salary-label {
    margin-top: 16px;
    color: #061C3D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.salary-range-wrapper {
    margin: 24px 0;
    position: relative;
    height: 20px; /* Увеличим высоту контейнера для ползунков */
    overflow: visible; /* Убеждаемся, что ползунки не обрезаются */
}

/* Стили для noUiSlider */
#salary-slider {
    height: 8px;
    border-radius: 4px;
    background: #E6E8EC; /* Серый фон для трека */
}

/* Трек (неактивная часть) */
#salary-slider .noUi-base {
    background: #E6E8EC;
    border-radius: 4px;
}

/* Активный диапазон (между ползунками) */
#salary-slider .noUi-connect {
    background: #8451E5; /* Фиолетовый активный диапазон */
    border-radius: 4px;
}

/* Ползунки */
#salary-slider .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    background: #FFF; /* Белый фон */
    border: 2px solid #8451E5; /* Фиолетовая обводка */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Лёгкая тень */
    cursor: pointer;
    top: -6px !important; /* Центрируем по вертикали */
    right: -10px !important; /* Компенсируем ширину */
}

/* Убираем стандартный псевдоэлемент (стрелку) */
#salary-slider .noUi-handle::before,
#salary-slider .noUi-handle::after {
    display: none;
}

.salary-inputs {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    position: relative;
}

.salary-input {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: var(--size-elements-120, 12px);
    border: 1px solid #E6E8EC;
    background: #FBFCFC;
}

.salary-input-field {
    border: none;
    background: transparent;
    color: #787486;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 100%;
}

.salary-input-field:focus {
    outline: none;
    color: #061C3D;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.reset-filter-btn {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border: none;
    background: transparent;
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    cursor: pointer;
}

.apply-filter-btn {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: var(--size-elements-120, 12px);
    background: #061C3D;
    border: none;
    color: var(--color-surface-page, #FFF);
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    cursor: pointer;
}


/* Стили для карточек в .results-list */
.results-list {
    flex: 1;
    width: 50%;
}

.job-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: var(--color-surface-page, #FFF);
    box-shadow: 0px 2px 4px 0px var(--grey-light-100, #F1F5F9);
    margin-bottom: 16px; /* Отступ между карточками */
}

.job-card .title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по верхнему краю */
    width: 100%;
}

.job-card .title-content {
    display: flex;
    align-items: flex-start;
    gap: 16px; /* Отступ между иконкой и текстом */
    width: 100%;
}

.job-card .icon-box {
    display: flex;
    width: 67px;
    height: 67px;
    justify-content: center;
    align-items: center;
    border-radius: 8.217px;
    border: 1.027px solid #E6E8EC;
}

.job-card .icon-box img {
    width: 41.875px;
    height: 41.875px;
}

.job-card .title-right-content {
    display: flex;
    flex-direction: column;
    flex: 1; /* Занимает оставшееся пространство */
    width: 100%;
}

.job-card .title-type-wrapper {
    display: flex;
    flex-direction: column; 
    gap: 5px; 
}

.job-card .title-tag-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Отступ между job-title и type-tag */
}

.job-card .job-title {
    color: #061C3D;
    font-family: Inter;
    font-size: var(--size-elements-180, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-lineHeight-sub-2, 24px); /* 133.333% */
    letter-spacing: -0.36px;
}

.job-card .type-tag {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: #EDF2FF;
}

.job-card .type-tag span {
    color: var(--color-text-information, #4772EA);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px; /* 121.429% */
}

.job-card .bookmark-icon {
    width: 18px;
    height: 18px;
    background: url('/bitrix/templates/E-gorc/img/mingcute_bookmark-line.svg') no-repeat center; /* Иконка по умолчанию */
    background-size: contain;
    cursor: pointer;
    transition: background-image 0.3s ease;
    margin-left: auto; /* Сдвигаем в конец title-tag-wrapper */
    display: none; /* Скрываем по умолчанию */
}

.job-card:hover .bookmark-icon {
    display: block; /* Показываем при наведении на job-card */
}

.job-card .bookmark-icon.filled {
    background: url('/bitrix/templates/E-gorc/img/mingcute_bookmark-fill.svg') no-repeat center; /* Иконка при нажатии */
    background-size: contain;
    display: block; /* Остаётся видимым, если активирован */
}

.job-card .company {
    color: #061C3D;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-label-1, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-label-2, 16px); /* 114.286% */
}

.job-card .meta-info {
    display: flex;
    align-items: center;
    gap: 12px; 
    margin-top: 5px; 
}

.job-card .location-container,
.job-card .date-container {
    display: flex;
    align-items: center;
    gap: 4px; /* Отступ между иконкой и текстом */
}

.job-card .date-container {
    margin-left: auto; /* Сдвигаем date вправо */
}

.job-card .meta-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
}

.job-card .location,
.job-card .date {
    color: #94A3B8;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-body-2, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-label-2, 16px); /* 133.333% */
}

.job-card .description {
    overflow: hidden;
    color: var(--color-text-subtitle, #334155);
    text-overflow: ellipsis;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-sub-2, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-sub-2, 24px); /* 150% */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничиваем двумя строками */
    -webkit-box-orient: vertical;
    max-height: calc(2 * 24px); /* Максимальная высота для двух строк */
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 40px;
}

.pagination-btn {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-family: "Lexend Deca";
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

.pagination-btn:disabled {
    color: #E6E8EC;
    cursor: not-allowed;
}


.pagination-numbers {
    display: flex;
    gap: 8px;
}


/* Стили для иконок */
.pagination-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Отступ для Prev (иконка слева) */
}

/* Отступ для иконки в кнопке Next (иконка справа) */
.next-btn .pagination-icon {
    margin-right: 0; /* Убираем margin-right */
    margin-left: 8px; /* Добавляем отступ слева от текста */
}

/* Стили для текста в кнопках */
.pagination-text {
    color: #061C3D;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px; /* 300% */
    text-transform: capitalize;
}

/* Стили для кнопок пагинации */
.pagination-btn {
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:disabled .pagination-icon,
.pagination-btn:disabled .pagination-text {
    opacity: 0.38; /* Для неактивных кнопок */
}

.pagination-btn:disabled {
    opacity: 0.38;
}

.pagination-btn:not(:disabled) {
    color: #061C3D;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px; /* 300% */
    text-transform: capitalize;
}

.pagination-btn:hover:not(:disabled) {
    color: #061C3D; /* Можно добавить дополнительный эффект, если нужно */
}

/* Стили для номеров страниц */
.page-number {
    display: flex;
    padding: 14px 18px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: #061C3D; /* Неактивные страницы */
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    cursor: pointer;
}

.page-number.active {
    background: #061C3D;
    color: var(--color-surface-page, #FFF); /* Активная страница */
    display: flex;
padding: 14px 18px;
}

.page-number:hover:not(.active) {
    background: #F1F5F9;
    display: flex;
padding: 14px 18px;
}

/* Стили для общего контейнера .top-jobs */
.top-jobs {
    width: 23%;
}

/* Стили для блока подписки .subscribe-section */
.subscribe-section {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #F1ECEC;
    background: #F2EBF7;
}

.subscribe-title {
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-sub-1, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-lineHeight-sub-1, 32px); /* 160% */
    letter-spacing: -0.4px;
    align-self: flex-start; /* Выравнивание текста слева */
}

.subscribe-subtitle {
    margin-top: 8px;
    color: #475467;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    align-self: flex-start; /* Выравнивание текста слева */
}

.subscribe-btn {
    display: flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--size-elements-120, 12px);
    background: #061C3D;
    border: none;
    cursor: pointer;
    color: var(--color-surface-page, #FFF);
    font-family: "Lexend Deca";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    margin-top: 19px;
}

/* Стили для текста "Top Jobs" */
.top-jobs-section-title {
    margin-top: 16px;
    color: #061C3D;
    font-family: "Lexend Deca";
    font-size: var(--type-fontSize-sub-1, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-lineHeight-sub-2, 24px); /* 120% */
    letter-spacing: -0.4px;
}

/* Стили для карточек Top Jobs */
.top-job-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Выравнивание слева, как на изображении */
    gap: 16px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: var(--color-surface-page, #FFF);
    box-shadow: 0px 2px 4px 0px var(--grey-light-100, #F1F5F9);
    margin-top: 16px; /* Отступ между карточками и заголовком */
    max-width: 100%; /* Ограничиваем ширину карточки */
}

.top-job-card .title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%; /* Убеждаемся, что row занимает всю ширину */
}

.top-job-card .icon-box {
    display: flex;
    width: 67px; /* Фиксированный размер иконки */
    height: 67px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #E6E8EC;
    flex-shrink: 0; /* Фиксируем размер иконки */
}

.top-job-card .icon-box img {
    width: 41.875px;
    height: 41.875px;
}

.top-job-card .title-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Отступ между job-title и company */
    max-width: calc(100% - 64px); /* Ограничиваем ширину, учитывая иконку и gap */
    overflow: hidden; /* Убеждаемся, что текст не выходит за пределы */
}

.top-job-card .job-title {
    overflow: hidden;
    color: #061C3D;
    text-overflow: ellipsis;
    white-space: nowrap; /* Ограничение одной строкой с троеточием */
    font-family: Inter;
    font-size: var(--size-elements-180, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-lineHeight-sub-2, 24px); /* 133.333% */
    letter-spacing: -0.36px;
}

.top-job-card .company {
    color: #4772EA; /* Цвет, как на изображении */
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-label-1, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-label-2, 16px); /* 114.286% */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Ограничение одной строкой с троеточием */
}

.top-job-card .location-container {
    display: flex;
    align-items: center;
    gap: 4px; 
}

.top-job-card .location {
    color: #94A3B8;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-body-2, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-label-2, 16px); /* 133.333% */
}

.top-job-card .meta-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
}

.top-job-card .description {
    overflow: hidden;
    color: var(--color-text-subtitle, #334155);
    text-overflow: ellipsis;
    font-family: var(--type-fontFamily-body, Inter);
    font-size: var(--type-fontSize-sub-2, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-lineHeight-sub-2, 24px); /* 150% */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ограничение двумя строками */
    -webkit-box-orient: vertical;
    max-height: calc(2 * 24px); /* Максимальная высота для двух строк */
}

.apply-button {
    align-self: flex-end;   /* ← ВОТ ЭТА СТРОЧКА! */
    margin-top: 16px;
    padding: 10px 20px;
    background: #061C3D;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-family: "Lexend Deca", sans-serif;
    font-size: 16px;
    font-weight: 500;
    border: none;
}

.apply-button:hover {
    background: #0a2d5c;
}
/* End */


/* Start:/bitrix/templates/E-gorc/css/job-alerts-popup.css?17642492616563*/
.job-alerts-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.job-alerts-popup-overlay[style*="flex"] {
    display: flex !important;
}

.job-alerts-popup-overlay.active {
    display: flex !important;
}

.job-alerts-popup {
    width: 609px;
    max-width: 94vw;
    padding: 80px 24px 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    border-radius: 24px;
    border: 1px solid #F1F5F9;
    background: #FFF;
    position: relative;
    box-shadow: 0px 2px 4px 0px #F1F5F9;
}

.popup-header {
    position: absolute;
    top: 32px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.popup-header h3,
.popup-close {
    pointer-events: auto;
}

.popup-header h3 {
    margin: 0;
    color: #172B4D;
    font-family: "Lexend Deca", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.popup-close {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #787486;
}

.popup-field {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.popup-field label {
    color: #334155;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    width: 180px;
    flex-shrink: 0;
    text-align: left;
}

.popup-field .hint,
.popup-field .optional {
    color: #787486;
    font-size: 14px;
    font-weight: 500;
}

.popup-field input,
.custom-select .select-button {
    flex: 1;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: #FFF;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.popup-field input:focus {
    outline: none;
    border-color: #8451E5;
}

.custom-select {
    position: relative;
    flex: 1;
}

.select-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    box-sizing: border-box;
}

.custom-select.open .select-button {
    border-color: #8451E5;
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select-button .arrow {
    transition: transform 0.3s;
}

.custom-select.open .select-button .arrow {
    transform: rotate(180deg);
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #8451E5;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-sizing: border-box;
    margin-top: -1px;
}

.custom-select.open .select-options {
    display: block;
}

.select-options label {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.2s;
}

.select-options label:hover {
    background: #F2EBF7;
}

.select-options input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin: 0 12px 0 0;
    padding: 0;
    flex: 0 0 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.75 3H5.25C4.00736 3 3 4.00736 3 5.25V18.75C3 19.9926 4.00736 21 5.25 21H18.75C19.9926 21 21 19.9926 21 18.75V5.25C21 4.00736 19.9926 3 18.75 3Z' stroke='%23061C3D' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    background-size: contain;
    cursor: pointer;
    border: none;
    outline: none;
}

.select-options input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.75 2.25H5.25C4.45462 2.25087 3.69206 2.56722 3.12964 3.12964C2.56722 3.69206 2.25087 4.45462 2.25 5.25V18.75C2.25087 19.5454 2.56722 20.3079 3.12964 20.8704C3.69206 21.4328 4.45462 21.7491 5.25 21.75H18.75C19.5454 21.7491 20.3079 21.4328 20.8704 20.8704C21.4328 20.3079 21.7491 19.5454 21.75 18.75V5.25C21.7491 4.45462 21.4328 3.69206 20.8704 3.12964C20.3079 2.56722 19.5454 2.25087 18.75 2.25ZM17.0742 8.73234L10.7742 16.2323C10.7051 16.3147 10.6191 16.3812 10.5221 16.4273C10.425 16.4735 10.3192 16.4983 10.2117 16.5H10.1991C10.0939 16.5 9.99 16.4778 9.89398 16.435C9.79797 16.3922 9.71202 16.3297 9.64172 16.2516L6.94172 13.2516C6.87315 13.1788 6.81981 13.0931 6.78483 12.9995C6.74986 12.9059 6.73395 12.8062 6.73805 12.7063C6.74215 12.6064 6.76617 12.5084 6.8087 12.4179C6.85124 12.3275 6.91142 12.2464 6.98572 12.1796C7.06002 12.1127 7.14694 12.0614 7.24136 12.0286C7.33579 11.9958 7.43581 11.9822 7.53556 11.9886C7.63531 11.995 7.73277 12.0213 7.82222 12.0659C7.91166 12.1106 7.99128 12.1726 8.05641 12.2484L10.1794 14.6072L15.9258 7.76766C16.0547 7.61863 16.237 7.52631 16.4335 7.51066C16.6299 7.49501 16.8246 7.55728 16.9754 7.68402C17.1263 7.81075 17.2212 7.99176 17.2397 8.18793C17.2582 8.3841 17.1988 8.57966 17.0742 8.73234Z' fill='%238451E5'/%3E%3C/svg%3E");
}

.confirm-btn {
    padding: 10px 20px;
    border-radius: 12px;
    background: #061C3D;
    color: white;
    font-family: "Lexend Deca", sans-serif;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.confirm-btn:hover {
    background: #040E1F;
}

.custom-select .select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #E6E8EC;
    background: #FFF;
}

.custom-select .select-button span {
    flex: 1;
    min-width: 0; /* ← ЭТО ВСЁ, ЧТО НУЖНО! */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #787486 !important;
    font-size: 16px;
    font-family: Inter, sans-serif;
}

.custom-select .select-button .arrow {
    flex-shrink: 0;
}

/* СКРЫТИЕ СКРОЛЛБАРА (НО ПРОКРУТКА РАБОТАЕТ) */
.custom-select .select-options {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-select .select-options::-webkit-scrollbar {
    display: none;
}
/* End */
/* /bitrix/templates/E-gorc/css/job-listing.css?176423036438269 */
/* /bitrix/templates/E-gorc/css/job-alerts-popup.css?17642492616563 */