/*
 * Точечные добавки каталога вакансий поверх дизайн-системы стажировок
 * (static/css/internship.css, переиспользуется как есть через классы
 * .internship-*). Здесь — только то, чего нет у стажировок: ползунок
 * зарплаты и бейдж "Вы откликнулись".
 */

.internship-filter-block__label span {
    color: var(--internship-blue-dark);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Ползунок зарплаты ---------- */

.internship-filters input[type="range"].rangeSalary {
    --value: 0%;
    width: 100%;
    margin-top: 6px;
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--internship-blue) 0%, var(--internship-blue) var(--value), var(--internship-gray-soft) var(--value), var(--internship-gray-soft) 100%);
    cursor: pointer;
}

.internship-filters input[type="range"].rangeSalary::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--internship-blue);
    cursor: pointer;
    transition: transform var(--internship-transition);
}

.internship-filters input[type="range"].rangeSalary::-webkit-slider-thumb:hover {
    transform: scale(1.08);
}

.internship-filters input[type="range"].rangeSalary::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--internship-blue);
    cursor: pointer;
}

.internship-filters input[type="range"].rangeSalary::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--internship-gray-soft);
}

.internship-filters input[type="range"].rangeSalary::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--internship-blue);
}

.internship-filters input[type="range"].rangeSalary:focus-visible {
    outline: 3px solid var(--internship-blue-soft);
    outline-offset: 4px;
}

/* ---------- Кнопки "Найти" / "Сбросить" под фильтрами ---------- */

.vacancy-filters__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--internship-border);
}

/* ---------- Город: автокомплит (выпадающий список не должен уходить за карточку фильтров) ---------- */

.vacancy-catalog-page .autocomplete {
    position: relative;
}

.vacancy-catalog-page .suggestions {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid var(--internship-border);
    border-radius: var(--internship-radius-sm);
    box-shadow: 0 12px 24px rgba(12, 12, 13, .08);
}

.vacancy-catalog-page .suggestions:empty {
    display: none;
}

.vacancy-catalog-page .suggestions:not(:empty) {
    display: block;
}

.vacancy-catalog-page .suggestions li {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color var(--internship-transition);
}

.vacancy-catalog-page .suggestions li:hover {
    background-color: var(--internship-blue-pale);
}

/* ---------- Карточка вакансии: дата публикации + статус отклика ---------- */

.vacancy-card__bottom-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.vacancy-card__date {
    color: var(--internship-gray);
}

.vacancy-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--internship-radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.vacancy-card__badge--applied {
    background-color: var(--internship-success-soft);
    color: var(--internship-success-text);
}