/**
 * Стили отметки "Мне подошло" в разделе /personal/.
 * Классы уже расставлены в разметке/JS:
 *   - li.personal-picked   — на карточке товара (li#back_...), когда товар за кем-то закреплён
 *   - a.add-personal.active — на кнопке того покупателя, за кем закреплён товар
 *   - a.add-personal.is-loading — на кнопке, пока идёт ajax-запрос
 * Подключить после общих стилей каталога, чтобы правила ниже перекрывали базовые.
 */

/* Подсветка карточки товара, закреплённого за покупателем.
   Видимый "белый бокс" карточки — это не сам li, а .hover-bl-pos внутри него,
   у которого в основном файле стилей уже есть background:#fff с специфичностью
   (0,3,1): .products.products-table li .hover-bl-pos (и :hover-вариант).
   Наш класс лежит на li выше по дереву, поэтому просто background на li ничего
   не даёт — его перекрывает именно то правило. Бьём в ту же .hover-bl-pos,
   но с специфичностью на класс выше (добавляем .personal-picked), без !important. */
li.personal-picked {
    background-color: #eaf9ee; /* светло-зелёный, на случай если где-то нет .hover-bl-pos */
    transition: background-color .2s ease;
}

.products.products-table li.personal-picked .hover-bl-pos,
.products.products-table li.personal-picked:hover .hover-bl-pos {
    background: #eaf9ee;
    border-color: #8fd6a6;
    transition: background .2s ease, border-color .2s ease;
}

/* Кнопка покупателя по умолчанию — активна и кликабельна */
.add-personal {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .15s ease, box-shadow .15s ease;
}

/* Пока карточка занята — все кнопки, кроме отмеченной, гасим и делаем некликабельными */
li.personal-picked .add-personal:not(.active) {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}

/* Кнопка того, за кем закреплён товар — выделяем явно */
.add-personal.active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
    font-weight: 600;
}

/* Пока ждём ответ сервера — не даём кликать повторно */
.add-personal.is-loading {
    opacity: .6;
    pointer-events: none;
    cursor: wait;
}

/**
 * Блок "Мне подошло" в каталоге (category.tpl.html), сразу под фильтром.
 * .personal-fit-buyer-select — селект покупателя-эталона (показывается,
 *   только если у клиента больше одного покупателя: сам + родственники);
 * .personal-fit-btn — переключатель режима подбора (ссылка &fits=1/0);
 * .personal-fit-btn.active — режим подбора включён (не кликабельна сама,
 *   рядом стоит .personal-fit-reset для возврата к полному списку).
 */
.personal-fit-bl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 16px;
}

.personal-fit-bl .personal-fit-buyer-select {
    padding: 4px 8px;
}

.personal-fit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #1eb145;
    color: #1eb145;
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

a.personal-fit-btn:hover {
    background: #eaf9ee;
}

.personal-fit-btn.active {
    background: #1eb145;
    color: #fff;
    cursor: default;
}

.personal-fit-reset {
    color: #999;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}

/* Показывается вместо кнопки, когда у выбранного (в селекторе) покупателя
   нет отметок в этой категории — сам селектор при этом остаётся видимым,
   можно сразу переключиться на другого покупателя. */
.personal-fit-unavailable {
    color: #999;
    font-size: 13px;
}

.personal-fit-debug-toggle {
    color: #0e7ee3;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}

.personal-fit-debug-subcategory {
    margin: 14px 0;
    padding: 10px 12px;
    border: 1px solid #e0d3ea;
    border-radius: 4px;
    background: #fff;
}

.personal-fit-debug-subcategory h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

/**
 * Отладочная панель подбора "Мне подошло" (только под IP-ограничением
 * в category.php, category.tpl.html — блок .personal-fit-debug).
 */
.personal-fit-debug {
    margin: 10px 0 24px;
    padding: 14px 16px;
    border: 1px dashed #cc00ff;
    border-radius: 6px;
    background: #fbf5ff;
    font-size: 13px;
}

.personal-fit-debug h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.personal-fit-debug-scroll {
    overflow-x: auto;
    margin: 8px 0 14px;
}

.personal-fit-debug-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    background: #fff;
}

.personal-fit-debug-table caption {
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
}

.personal-fit-debug-table th,
.personal-fit-debug-table td {
    border: 1px solid #e0d3ea;
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
}

.personal-fit-debug-table th {
    background: #f1e6fa;
    font-weight: 600;
}

.personal-fit-debug-table td:nth-child(2) {
    text-align: left;
}

.personal-fit-debug-candidates td:first-child,
.personal-fit-debug-candidates td:nth-child(2) {
    text-align: left;
}

.personal-fit-debug-table .ph-sub {
    display: block;
    font-weight: 400;
    color: #777;
    font-size: 11px;
}

.personal-fit-debug-table td.ph-match {
    background: #d7f5df;
    font-weight: 600;
}

.personal-fit-debug pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: 1px solid #e0d3ea;
    padding: 10px;
    font-size: 12px;
}