/* ===========================================================================
 * МОДУЛЬ PRICELIST v3.1.1  —  стили таблицы прайс-листа (С. Малюгин)
 * ===========================================================================
 * Это полностью кастомный файл модуля. Темы Prostore/OpenCart его не содержат.
 * Изменения здесь правят только внешний вид прайс-листа в оптовом магазине,
 * на остальные страницы магазина не влияют.
 *
 * Состав:
 *   - дизайн-токены (переменные)
 *   - обёртка таблицы (mobile/desktop)
 *   - таблица: шапка, тело, sticky thead, выделение активной строки
 *   - подсветка активного уровня цены (десктоп)
 *   - блок «корзина» (stepper + buy)
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * [Pricelist] Глобальные дизайн-токены модуля.
 * --------------------------------------------------------------------------- */
:root {
    --pl-border-color:       #cfd6e4;   /* цвет всех бордеров таблицы */
    --pl-header-bg:          #2f3a53;   /* тёмный фон шапки */
    --pl-header-color:       #ffffff;   /* белый текст шапки */
    --pl-header-accent:      #337AB7;   /* акцентная синяя линия под шапкой */
    --pl-row-stripe:         #fafbfd;   /* зебра — чётные строки */
    --pl-row-hover:          #eef3fa;   /* фон строки под курсором */
    --pl-row-active-bg:      #e6f7e6;   /* фон строки добавленной в корзину */
    --pl-row-active-accent:  #1f7a1f;   /* левая зелёная полоса у активной строки */
    --pl-active-color:       #c0392b;   /* красный — текст активной цены в каждой строке */
    --pl-text:               #2b3245;
    --pl-cart-primary:       #337AB7;   /* кнопка «в корзину» — синий */
    --pl-cart-hover:         #285a8c;
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Обёртка таблицы.
 *   - Mobile: горизонтальный скролл (sticky внутри overflow-x не работает,
 *     это намеренно — на телефоне ширина 860px не помещается).
 *   - Desktop: overflow visible, чтобы sticky thead прилипал к вьюпорту.
 * --------------------------------------------------------------------------- */
.pricelist-wrap {
    width: 100%;
    margin-bottom: 20px;
}
.pricelist-wrap--mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pricelist-wrap--desktop {
    overflow: visible;
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Сама таблица — fixed layout, чтобы колонки не сжимались.
 * border-collapse: separate необходим для корректного sticky thead с бордерами
 * (с border-collapse: collapse бордеры sticky-ячеек скроллятся вместе с телом).
 * --------------------------------------------------------------------------- */
.pricelist-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    color: var(--pl-text);
    table-layout: fixed;
}

/* Минимальная ширина — чтобы колонки не сжимались */
.pricelist--mobile  { min-width: 860px;  }
.pricelist--desktop { min-width: 1180px; }


/* ---------------------------------------------------------------------------
 * [Pricelist] ШАПКА таблицы — контрастный тёмный блок с акцентной линией.
 * --------------------------------------------------------------------------- */
.pricelist-thead .pricelist-item {
    background: var(--pl-header-bg);
    color: var(--pl-header-color);
    border: 1px solid var(--pl-header-bg);
    border-bottom: 3px solid var(--pl-header-accent);
    padding: 12px 8px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* [Pricelist] Активный столбец в шапке НЕ выделяем фоном — иначе на пересечении
   с активной строкой («товар в корзине») получается «крест» из двух подсветок.
   Подсветку оставляем только на самом значении цены в теле таблицы. */

/* [Pricelist] Фиксация шапки таблицы временно отключена — будет дорабатываться
   отдельно. Эксперименты (CSS sticky + JS-клон) сохранены в соседней папке
   pricelist_fix_header_error/ для дальнейшей диагностики. */


/* ---------------------------------------------------------------------------
 * [Pricelist] ТЕЛО таблицы — базовые стили ячейки.
 * Внимание про специфичность:
 *   `.pricelist-table tbody .pricelist-item` имеет специфичность (0,2,1) —
 *   из-за `tbody` (тип-селектор) она ВЫШЕ чем `.pricelist-table-row-select
 *   > .pricelist-item` (0,2,0). Поэтому селекторы зебры/hover/active ниже
 *   тоже идут с префиксом `.pricelist-table tbody`, чтобы выиграть в каскаде.
 * --------------------------------------------------------------------------- */
.pricelist-table tbody .pricelist-item {
    border: 1px solid var(--pl-border-color);
    padding: 8px;
    vertical-align: middle;
    font-size: 14px;
    background: #fff;
    transition: background 0.15s;
}

/* [Pricelist] Зебра — фон чётных строк */
.pricelist-table tbody .pricelist-table-row:nth-child(even) > .pricelist-item {
    background: var(--pl-row-stripe);
}

/* [Pricelist] Hover — лёгкая подсветка при наведении */
.pricelist-table tbody .pricelist-table-row:hover > .pricelist-item {
    background: var(--pl-row-hover);
}

/* [Pricelist] Строка добавлена в корзину — зелёный фон поверх зебры и hover.
   Все три варианта (просто, even, hover) — чтобы фон не «терялся»
   ни на чётных строках, ни при наведении курсора. */
.pricelist-table tbody .pricelist-table-row-select > .pricelist-item,
.pricelist-table tbody .pricelist-table-row-select:nth-child(even) > .pricelist-item,
.pricelist-table tbody .pricelist-table-row-select:hover > .pricelist-item {
    background: var(--pl-row-active-bg);
}

/* [Pricelist] Левый акцентный бордер активной строки.
   Используем inset box-shadow, а не border-left: реальный border сместил бы
   контент внутри table-layout: fixed и сломал бы ширины колонок. */
.pricelist-table tbody .pricelist-table-row-select > .pricelist-item:first-child {
    box-shadow: inset 4px 0 0 var(--pl-row-active-accent);
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Колонка «Наименование» — растягивается, длинные имена ломаются.
 * --------------------------------------------------------------------------- */
.pricelist-item.name {
    text-align: left;
    padding-left: 14px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.3;
}
.pricelist-table tbody .pricelist-item.name a {
    color: #1d4f8f;
    cursor: pointer;
    text-decoration: none;
}
.pricelist-table tbody .pricelist-item.name a:hover { text-decoration: underline; }


/* ---------------------------------------------------------------------------
 * [Pricelist] Колонка «Фото» — превью с zoom по клику на чекбокс.
 * --------------------------------------------------------------------------- */
.pricelist-item.img {
    padding: 4px;
}
.pricelist-zoom-container {
    display: inline-block;
    line-height: 0;
}
.pricelist-zoom-container input[type=checkbox] { display: none; }
.pricelist-zoom-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    transition: transform 0.25s ease;
    cursor: zoom-in;
}
/* z-index: 50 — чтобы увеличенное фото перекрывало sticky thead (z-index: 5) */
.pricelist-zoom-container input[type=checkbox]:checked ~ img {
    transform: scale(4);
    position: relative;
    z-index: 50;
    cursor: zoom-out;
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Подсветка активного уровня цены в теле (десктоп).
 * Активный уровень = тот, по которому реально считается цена при текущей
 * сумме корзины. Контроллер ставит class="is-active" на нужную ячейку.
 *
 * Подсветку фоном НЕ ставим (см. комментарий выше про «крест» из подсветок).
 * Выделяем только сам текст значения — красным и жирным.
 * --------------------------------------------------------------------------- */
.pricelist-table tbody .pricelist-item.price-col.is-active {
    color: var(--pl-active-color);
    font-weight: 700;
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Ширины колонок — МОБИЛЬНАЯ версия.
 * --------------------------------------------------------------------------- */
.pricelist--mobile .pricelist-item.sku       { width: 84px;  }
.pricelist--mobile .pricelist-item.img       { width: 90px;  }
.pricelist--mobile .pricelist-item.name      { width: 240px; }
.pricelist--mobile .pricelist-item.wholesale { width: 90px;  font-weight: 600; }
.pricelist--mobile .pricelist-item.quantity  { width: 60px;  }
.pricelist--mobile .pricelist-item.total     { width: 90px;  font-weight: 600; }
.pricelist--mobile .pricelist-item.cart,
.pricelist--mobile .pricelist-item.quantity-buy { width: 180px; }


/* ---------------------------------------------------------------------------
 * [Pricelist] Ширины колонок — ДЕСКТОПНАЯ версия.
 * --------------------------------------------------------------------------- */
.pricelist--desktop .pricelist-item.sku       { width: 92px;  }
.pricelist--desktop .pricelist-item.img       { width: 92px;  }
.pricelist--desktop .pricelist-item.name      { width: 260px; }
.pricelist--desktop .pricelist-item.price-col { width: 64px;  font-weight: 500; }
.pricelist--desktop .pricelist-item.quantity  { width: 60px;  }
.pricelist--desktop .pricelist-item.cart,
.pricelist--desktop .pricelist-item.quantity-buy { width: 184px; }


/* ---------------------------------------------------------------------------
 * [Pricelist] Блок «корзина» — единый аккуратный stepper (− [число] + 🛒).
 * Стандартный stepper темы Prostore не используем, чтобы не зависеть от темы.
 * --------------------------------------------------------------------------- */
.quantity-inner {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    background: #fff;
    border: 1px solid var(--pl-border-color);
    border-radius: 6px;
    overflow: hidden;
    font-family: inherit;
    line-height: 1;
    vertical-align: middle;
}
.quantity-inner button,
.quantity-inner input {
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--pl-text);
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}
.quantity-inner .bt-minus,
.quantity-inner .bt-plus {
    width: 30px;
    font-size: 0;
    transition: background 0.15s;
}
.quantity-inner .bt-minus:hover,
.quantity-inner .bt-plus:hover {
    background: #f1f3f7;
}
.quantity-inner .quantity-buy {
    width: 44px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1f2536;
    border-left: 1px solid var(--pl-border-color);
    border-right: 1px solid var(--pl-border-color);
    appearance: textfield;
    -moz-appearance: textfield;
}
/* Убираем стандартные стрелочки number-инпута во вебките/мозиле */
.quantity-inner .quantity-buy::-webkit-inner-spin-button,
.quantity-inner .quantity-buy::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-inner .bt-buy {
    width: 52px;
    background: var(--pl-cart-primary);
    color: #fff;
    transition: background 0.15s;
}
.quantity-inner .bt-buy:hover {
    background: var(--pl-cart-hover);
}
/* SVG-иконки внутри stepper-а — рисуем «штрихами» через currentColor */
.quantity-inner svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.quantity-inner .bt-minus svg,
.quantity-inner .bt-plus svg {
    width: 14px;
    height: 14px;
}
.quantity-inner .bt-buy svg {
    width: 18px;
    height: 18px;
}


/* ---------------------------------------------------------------------------
 * [Pricelist] Ячейка с блоком корзины — центрирование, без переноса строки.
 * --------------------------------------------------------------------------- */
.pricelist-item.quantity-buy {
    white-space: nowrap;
    padding: 6px;
}