/*
 * Баннер и панель настроек файлов сайта — стили.
 *
 * ИМЕНА КЛАССОВ ВАЖНЫ: блокировщики (uBlock Origin и подобные) режут элементы
 * с «cookie» и «consent» в имени класса. Поэтому здесь .prefs-*, без этих
 * слов. Переименование нужно и в разметке, и здесь одновременно.
 *
 * Нативный CSS, без препроцессоров и сборки. Размеры — в пикселях, как в
 * макете (проект целиком свёрстан в px, rem не используется).
 *
 * МАКЕТЫ (Figma Miss Magnet COPY):
 *   баннер  1440: 628×193, отступы 32px слева и снизу
 *   баннер   375: 335×411, отступы 20px
 *   панель  1440: 628×388, поля 32, зазор 24
 *   панель   375: 335×372, поля 24, зазор 16
 *
 * Цвета макета совпадают с переменными темы сайта:
 *   #c8a394 → --color-primary, #f8f5f4 → --color-background-accent,
 *   #1c1c1c → --color-primary-black, #6d6d6d → --color-opacity-black-60,
 *   #9e9e9e → --color-opacity-black-40, #cecece → --color-opacity-black-20,
 *   #e8e8e8 → --color-opacity-black-10.
 */

/* ── Кнопки ────────────────────────────────────────────────────────────── */

.prefs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 41px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.prefs-btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-white);
}

.prefs-btn--primary:hover {
    background: var(--color-platinum-background);
}

.prefs-btn--soft {
    background: rgba(200, 163, 148, .2);
    color: var(--color-primary-black);
}

.prefs-btn--soft:hover {
    background: rgba(200, 163, 148, .3);
}

.prefs-btn--ghost {
    border-color: var(--color-opacity-black-20);
    color: var(--color-primary-black);
}

.prefs-btn--ghost:hover {
    border-color: var(--color-opacity-black-40);
}

/* ── Баннер ────────────────────────────────────────────────────────────── */

.js-prefs-bar {
    display: none;
    position: fixed;
    left: 32px;
    bottom: 32px;
    z-index: 60;
    box-sizing: border-box;
    width: 628px;
    max-width: calc(100vw - 64px);
    padding: 20px;
    border-radius: 12px;
    background: var(--color-background-accent);
    color: var(--color-opacity-black-60);
}

/* Показывается только из site-prefs.js — у посетителей с уже сохранённым
   выбором баннер не должен «мигать» при загрузке страницы. */
.js-prefs-bar.is-visible {
    display: block;
}

.js-prefs-bar__text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-opacity-black-60);
}

.js-prefs-bar__actions {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.js-prefs-bar__group {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: auto;
}

@media (max-width: 700px) {
    .js-prefs-bar {
        left: 20px;
        right: 20px;
        bottom: 20px;
        width: auto;
        max-width: none;
    }

    .js-prefs-bar__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .js-prefs-bar__group {
        flex-direction: column;
        gap: 8px;
        margin-right: 0;
    }

    .js-prefs-bar .prefs-btn {
        width: 100%;
    }
}

/* ── Панель настроек (модалка) ─────────────────────────────────────────── */

.hystmodal__window.modal-wrapper.site-prefs {
    width: 628px;
    max-width: 100%;
    border-radius: 12px;
    background: var(--color-background-accent);
}

.site-prefs__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
}

.site-prefs__title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-primary-black);
}

.site-prefs__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-prefs__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 57px;
    box-sizing: border-box;
    min-height: 67px;
    padding: 16px;
    border-radius: 16px;
    background: var(--color-primary-white);
}

.site-prefs__text {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.site-prefs__number {
    flex: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-opacity-black-40);
}

.site-prefs__names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-prefs__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-primary-black);
}

.site-prefs__note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-opacity-black-60);
}

/* В макете между заголовком и списком 16, между списком и кнопкой 24. */
.site-prefs__actions {
    display: flex;
    margin-top: 8px;
}

.site-prefs__actions .prefs-btn {
    min-width: 166px;
}

/* На десктопе ширина окна фиксирована (628px), подписи не переносятся — можно
   задать высоту строки ровно по макету (67px). На узких экранах строка растёт
   по содержимому, поэтому фиксируем высоту только на широких. */
@media (min-width: 861px) {
    .site-prefs__row {
        height: 67px;
    }
}

@media (max-width: 850px) {
    .hystmodal__window.modal-wrapper.site-prefs {
        width: calc(100% - 40px);
        border-radius: 12px;
    }
}

@media (max-width: 600px) {
    .site-prefs__panel {
        gap: 16px;
        padding: 24px;
    }

    .site-prefs__row {
        gap: 12px;
        min-height: 65px;
    }

    .site-prefs__name {
        font-size: 14px;
    }

    .site-prefs__actions {
        margin-top: 0;
    }

    .site-prefs__actions .prefs-btn {
        width: 100%;
    }
}

/* ── Переключатель категории ───────────────────────────────────────────── */

.prefs-switch {
    flex: none;
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.prefs-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.prefs-switch input:disabled {
    cursor: default;
}

.prefs-switch__track {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid var(--color-opacity-black-10);
    border-radius: 100px;
    background: var(--color-primary-white);
    transition: background-color .2s ease, border-color .2s ease;
}

.prefs-switch__track::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background: rgba(200, 163, 148, .6);
    transition: transform .2s ease, background-color .2s ease;
}

.prefs-switch input:checked + .prefs-switch__track {
    border-color: transparent;
    background: var(--color-primary);
}

.prefs-switch input:checked + .prefs-switch__track::after {
    transform: translateX(20px);
    background: var(--color-primary-white);
}

/* ── Заглушка карты ─────────────────────────────────────────────────────── */

/* Заглушка карты лежит в разметке рядом с iframe и видна по умолчанию: если
   site-prefs.js заблокирован, посетитель всё равно видит осмысленный блок
   вместо пустоты. Скрипт скрывает её, когда карта загрузилась. */
.js-prefs-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 464px;
    padding: 40px 24px;
    border-radius: 12px;
    background: var(--color-background-accent);
    text-align: center;
}

.js-prefs-map[hidden] {
    display: none;
}

/* iframe карты в разметке скрыт и показывается только когда функциональные
   сервисы разрешены: иначе над заглушкой зиял бы пустой блок в 464–520px. */
.js-prefs-map-frame[hidden] {
    display: none;
}

.js-prefs-map__text {
    margin: 0;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-opacity-black-60);
}

.js-prefs-map__link {
    color: var(--color-primary-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.js-prefs-map__settings {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-primary-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.js-prefs-map__settings:hover,
.js-prefs-map__link:hover {
    color: var(--color-opacity-black-60);
}

@media (max-width: 850px) {
    .js-prefs-map {
        min-height: 460px;
    }
}

/* ── Строка даты над вакансиями ─────────────────────────────────────────── */

/*
 * Выводит сниппет vacancies_status (шаблон «Вакансии», ресурс 348).
 * Текст прижат вправо: дата обновления относится ко всему списку под ней.
 */
.vacancies-updated {
    margin-top: 32px;
    text-align: right;
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-opacity-black-60);
}

/* Вариант «вакансий нет»: это единственный текст в блоке, поэтому
   читается как основной, а не как служебная подпись. */
.vacancies-updated--empty {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
    max-width: 720px;
}

@media (max-width: 500px) {
    .vacancies-updated {
        margin-top: 24px;
    }
}