/*
 * catalog.css — оформление каталога: строка поиска, таблица предложений,
 * карточка товара. Палитра взята из custom.css, чтобы каталог не выбивался
 * из остального сайта.
 */

:root {
    --scn-primary: #07575B;
    --scn-primary-dark: #04383b;
    --scn-accent: #007cbc;
    --scn-success: #146c43;
    --scn-line: #e0e0e0;
    --scn-bg-soft: #f5f7f8;
    --scn-text-muted: #7b7b7b;

    /* Типы складов. Цвета те же, что были в старой таблице, но приглушённые */
    --scn-stock-own: #dc3545;
    --scn-stock-order: #0dcaf0;
    --scn-stock-partner: #198754;
}

/* ── Строка поиска ─────────────────────────────────────────────── */

.search-hero {
    background: var(--scn-bg-soft);
    border-bottom: 1px solid var(--scn-line);
    padding: 1.75rem 0 1.5rem;
    margin-bottom: 1.5rem;
}

.search-hero__title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--scn-primary);
    margin-bottom: 0.9rem;
}

.search-form {
    display: flex;
    max-width: 620px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--scn-line);
    border-right: none;
    border-radius: 3px 0 0 3px;
    padding: 0.7rem 1rem;
    font-size: 1rem;
}

.search-form__input:focus {
    outline: none;
    border-color: var(--scn-primary);
}

.search-form__btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 0 3px 3px 0;
    background: var(--scn-primary);
    color: #fff;
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.search-form__btn:hover {
    background: var(--scn-primary-dark);
}

.search-hero__hint {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--scn-text-muted);
}

/* ── Панель пользователя ───────────────────────────────────────── */

.user-panel {
    background: #fff;
    border: 1px solid var(--scn-line);
    border-radius: 4px;
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
}

.user-panel__row {
    display: flex;
    gap: 0.6rem;
    padding: 0.18rem 0;
}

.user-panel__label {
    flex: 0 0 92px;
    color: var(--scn-text-muted);
}

.user-panel__value {
    flex: 1 1 auto;
    color: #222;
}

.stock-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--scn-line);
    font-size: 0.78rem;
    color: var(--scn-text-muted);
}

.stock-legend__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stock-legend__item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--scn-stock-order);
}

.stock-legend__item--own::before { background: var(--scn-stock-own); }
.stock-legend__item--partner::before { background: var(--scn-stock-partner); }

/* ── Заголовки блоков результатов ──────────────────────────────── */

.results-title {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 1.6rem 0 0.7rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--scn-primary);
}

.results-title__count {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--scn-text-muted);
}

.results-note {
    font-size: 0.8rem;
    color: var(--scn-text-muted);
    background: #fffaf0;
    border-left: 3px solid #e0a800;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.9rem;
}

.results-empty {
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--scn-text-muted);
    border: 1px dashed var(--scn-line);
    border-radius: 4px;
}

/* ── Таблица предложений ───────────────────────────────────────── */

.offers {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
    background: #fff;
}

.offers thead th {
    background: var(--scn-primary);
    color: #fff;
    font-weight: 400;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.offers tbody td {
    border-bottom: 1px solid var(--scn-line);
    padding: 0.6rem;
    vertical-align: middle;
}

.offers tbody tr:hover { background: #f8fbfb; }

/* Тип склада показан полосой слева, а не заливкой всей строки:
   так цветом не забивается текст */
.offers tbody tr { border-left: 3px solid transparent; }
.offers tbody tr.is-own { border-left-color: var(--scn-stock-own); }
.offers tbody tr.is-order { border-left-color: var(--scn-stock-order); }
.offers tbody tr.is-partner { border-left-color: var(--scn-stock-partner); }

.offers__brand {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--scn-primary);
    white-space: nowrap;
}

.offers__num {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}

.offers__name {
    color: #222;
    min-width: 220px;
}

.offers__name a,
.offers__num a { color: #222; text-decoration: none; }

.offers__name a:hover,
.offers__num a:hover { color: var(--scn-accent); text-decoration: underline; }

.offers__photo-flag {
    color: var(--scn-accent);
    margin-left: 0.35rem;
    font-size: 0.8rem;
}

/* Табличные цифры — колонка цен читается как столбик */
.offers__price {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.offers__price span { font-size: 0.8rem; font-weight: 400; color: var(--scn-text-muted); }

/* Колонка «Кол-во»: сверху остаток, снизу поле ввода с кнопкой заказа */
.offers__qty { white-space: nowrap; font-variant-numeric: tabular-nums; }

.offers__qty-value {
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

/* ── Иконки через CSS-маску: цвет берётся из currentColor ──────── */

.svg-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    vertical-align: -0.15em;
    -webkit-mask: var(--svg) no-repeat center / contain;
    mask: var(--svg) no-repeat center / contain;
}

.svg-icon--lg { width: 2em; height: 2em; }

/* mdi cart-plus — «добавить в корзину» */
.svg-cart-plus {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V6H16V4H13V1H11V4H8V6H11M7 18C5.9 18 5 18.9 5 20S5.9 22 7 22 9 21.1 9 20 8.1 18 7 18M17 18C15.9 18 15 18.9 15 20S15.9 22 17 22 19 21.1 19 20 18.1 18 17 18M7.2 14.8V14.7L8.1 13H15.5C16.3 13 16.9 12.6 17.2 12L21.1 4.9L19.4 4L15.5 11H8.5L4.3 2H1V4H3L6.6 11.6L5.2 14C5.1 14.3 5 14.6 5 15C5 16.1 5.9 17 7 17H19V15H7.4C7.3 15 7.2 14.9 7.2 14.8Z'/%3E%3C/svg%3E");
}

/* mdi image-outline — заглушка на месте отсутствующего фото */
.svg-image {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M19 19H5V5H19V19M13.96 12.29L11.21 15.83L9.25 13.47L6.5 17H17.5L13.96 12.29Z'/%3E%3C/svg%3E");
}

.offers__term { white-space: nowrap; }

.offers__term--stock {
    color: var(--scn-success);
    font-weight: 500;
}

.offers__updated {
    font-size: 0.78rem;
    color: var(--scn-text-muted);
    white-space: nowrap;
}

.offers__cond, .offers__addr {
    font-size: 0.8rem;
    color: var(--scn-text-muted);
}

/* Форма заказа: поле и кнопка примыкают друг к другу без зазора */
.buy-form {
    display: inline-flex;
    gap: 0;
    align-items: stretch;
}

.buy-form__qty {
    width: 52px;
    padding: 0.28rem 0.3rem;
    border: 1px solid var(--scn-line);
    border-right: none;
    border-radius: 3px 0 0 3px;
    font-size: 0.85rem;
    text-align: center;
}

.buy-form__qty:focus {
    outline: none;
    border-color: var(--scn-success);
}

.buy-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--scn-success);
    border-radius: 0 3px 3px 0;
    background: var(--scn-success);
    color: #fff;
    padding: 0.28rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.buy-form__btn:hover { background: #0f5132; border-color: #0f5132; }

/* ── Выбор бренда и детали ─────────────────────────────────────── */

.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.choice-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 190px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--scn-line);
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: #222;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.choice-card:hover {
    border-color: var(--scn-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #222;
}

.choice-card__brand {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--scn-primary);
}

.choice-card__num {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82rem;
}

.choice-card__name { font-size: 0.8rem; color: var(--scn-text-muted); }

/* ── Панель входа в шапке ──────────────────────────────────────── */

.login-panel {
    background: var(--scn-primary-dark);
    padding: 0.85rem 0;
}

.login-panel .form-control { min-width: 180px; }

.btn-accent {
    background: var(--scn-accent);
    color: #fff;
    border: none;
}

.btn-accent:hover { background: #00669b; color: #fff; }

.login-error { color: #ffb3b3; margin-right: 0.4rem; }

.nav-link--accent { font-weight: 500; }
.nav-link--muted { opacity: 0.75; }

.nav-cart { display: inline-flex; align-items: center; gap: 0.4rem; }

.cart-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 0.32rem;
    border-radius: 10px;
    background: var(--scn-accent);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.35;
}

.cart-badge--empty { background: rgba(255, 255, 255, 0.25); }

/* ── Карточка товара ───────────────────────────────────────────── */

.product-head { margin-bottom: 1.2rem; }

.product-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    font-size: 0.86rem;
    color: var(--scn-text-muted);
}

.product-meta strong { color: #222; font-weight: 500; }

.product-gallery {
    border: 1px solid var(--scn-line);
    border-radius: 4px;
    background: #fff;
    padding: 0.9rem;
}

.product-gallery__main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: var(--scn-bg-soft);
    border-radius: 3px;
    overflow: hidden;
}

.product-gallery__main img { max-width: 100%; max-height: 320px; object-fit: contain; }

.product-gallery__empty {
    color: var(--scn-text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

.product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.product-gallery__thumb {
    width: 62px;
    height: 62px;
    border: 1px solid var(--scn-line);
    border-radius: 3px;
    padding: 2px;
    background: #fff;
    cursor: pointer;
    object-fit: contain;
    transition: border-color 0.15s;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { border-color: var(--scn-primary); }

/* Сводка: лучшее предложение */
.product-summary {
    border: 1px solid var(--scn-line);
    border-radius: 4px;
    background: #fff;
    padding: 1.1rem 1.2rem;
}

.product-summary__label {
    font-size: 0.8rem;
    color: var(--scn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.product-summary__price {
    font-size: 2rem;
    font-weight: 500;
    color: var(--scn-primary);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.product-summary__price small { font-size: 1rem; color: var(--scn-text-muted); }

.product-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--scn-line);
    font-size: 0.88rem;
}

.product-summary__row:last-of-type { border-bottom: none; }

.product-summary__row span:first-child { color: var(--scn-text-muted); }

.badge-stock {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    background: #e6f4ec;
    color: var(--scn-success);
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-order {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    background: #e7f6fb;
    color: #0b6a86;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Цена: показывается одна, того уровня, что действует для клиента ── */

.price-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--scn-primary);
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 4px 0 0 var(--scn-primary);
}

.price-block__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--scn-text-muted);
}

.price-block__value {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.05;
    color: var(--scn-primary);
    font-variant-numeric: tabular-nums;
}

.price-block__value small { font-size: 1rem; color: var(--scn-text-muted); }

/* Верхняя граница разброса: подсказывает, что цена зависит от склада */
.price-block__range {
    font-size: 0.8rem;
    color: var(--scn-text-muted);
}

.price-note {
    font-size: 0.82rem;
    color: var(--scn-text-muted);
    margin-bottom: 0.9rem;
}

/* ── Догрузка цен от поставщиков ───────────────────────────────── */

/* Полоса состояния: видна, пока опрашиваются поставщики */
.refresh-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.75rem 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.83rem;
    color: var(--scn-text-muted);
    background: var(--scn-bg-soft);
    border-left: 3px solid var(--scn-primary);
    border-radius: 3px;
    transition: opacity 0.3s;
}

.refresh-bar.is-done { opacity: 0.6; }
.refresh-bar.is-done .refresh-bar__spinner { display: none; }

.refresh-bar__spinner {
    width: 13px;
    height: 13px;
    border: 2px solid var(--scn-line);
    border-top-color: var(--scn-primary);
    border-radius: 50%;
    animation: scn-spin 0.7s linear infinite;
    flex: none;
}

@keyframes scn-spin { to { transform: rotate(360deg); } }

/* Значок у цены, которую ещё уточняем у поставщика */
.offers__pending {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 0.35rem;
    vertical-align: 0.05em;
    border-radius: 50%;
    background: var(--scn-primary);
    opacity: 0.55;
    animation: scn-pulse 1.1s ease-in-out infinite;
    cursor: help;
}

/* Поставщик не ответил — значок перестаёт пульсировать и меняет цвет:
   цена из прошлой выгрузки, а не только что подтверждённая */
.offers__pending--stale {
    background: #b0824a;
    opacity: 0.75;
    animation: none;
}

@keyframes scn-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.85); }
    50%      { opacity: 0.7; transform: scale(1); }
}

/* Строка обновилась ответом поставщика */
.offers tbody tr.is-updated { animation: scn-flash 1.5s ease-out; }

/* Строка пришла от поставщика и на странице её не было */
.offers tbody tr.is-added { animation: scn-appear 1.5s ease-out; }

@keyframes scn-flash {
    0%   { background: rgba(25, 135, 84, 0.16); }
    100% { background: transparent; }
}

@keyframes scn-appear {
    0%   { background: rgba(25, 135, 84, 0.16); opacity: 0.4; }
    100% { background: transparent; opacity: 1; }
}

/* Тем, кто отключил анимации, мигание не показываем */
@media (prefers-reduced-motion: reduce) {
    .refresh-bar__spinner,
    .offers__pending,
    .offers tbody tr.is-updated,
    .offers tbody tr.is-added { animation: none; }
}

/* Каркас выдачи: раскрывается, когда поставщик прислал строки */
.offers-frame[hidden] { display: none; }

/* ── Вкладки карточки ──────────────────────────────────────────── */

.product-tabs { margin-top: 2rem; }

.product-tabs .nav-tabs { border-bottom: 2px solid var(--scn-primary); }

.product-tabs .nav-link {
    border: none;
    border-radius: 3px 3px 0 0;
    color: #333;
    font-size: 0.92rem;
    padding: 0.5rem 1rem;
}

.product-tabs .nav-link:hover { background: var(--scn-bg-soft); color: var(--scn-primary); }

.product-tabs .nav-link.active {
    background: var(--scn-primary);
    color: #fff;
}

.tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 0.3rem;
    margin-left: 0.25rem;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
    line-height: 1.35;
}

.product-tabs .nav-link.active .tab-count { background: rgba(255, 255, 255, 0.25); }

.product-tabs .tab-content {
    border: 1px solid var(--scn-line);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 1.1rem 1.2rem;
    background: #fff;
}

.tab-empty { color: var(--scn-text-muted); font-size: 0.87rem; margin-bottom: 0; }

/* ── Категории товара ──────────────────────────────────────────── */

.cat-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.cat-path__item {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--scn-line);
    border-radius: 3px;
    background: #fff;
}

.cat-path__item--last { border-color: var(--scn-primary); color: var(--scn-primary); }
.cat-path__sep { color: var(--scn-text-muted); }

.product-section { margin-top: 2rem; }

.product-section__title {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--scn-primary);
    padding-bottom: 0.45rem;
    margin-bottom: 0.9rem;
    border-bottom: 2px solid var(--scn-primary);
}

.spec-table { width: 100%; font-size: 0.88rem; }
.spec-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--scn-line); }
.spec-table td:first-child { color: var(--scn-text-muted); width: 42%; }
.spec-table td:last-child { font-weight: 500; }

/* Пояснение к параметру — отдельной строкой, мельче названия */
.spec-table__hint {
    display: block;
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--scn-text-muted);
    opacity: 0.75;
}

/* Незаполненное поле видно, но не спорит с данными */
.spec-table__row--empty td,
.spec-table__row--empty td:last-child {
    color: var(--scn-text-muted);
    font-weight: 400;
    opacity: 0.6;
}

/* Группа характеристик: заголовок и таблица под ним */
.spec-group { margin-bottom: 1.6rem; }

.spec-group__title {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--scn-text-muted);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--scn-line);
}

/* ── Адаптив: на узких экранах таблица становится карточками ───── */

@media (max-width: 991px) {
    .offers { font-size: 0.85rem; }
    .offers thead { display: none; }

    .offers tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem 0.7rem;
        border: 1px solid var(--scn-line);
        border-left-width: 3px;
        border-radius: 4px;
        margin-bottom: 0.7rem;
        padding: 0.7rem 0.85rem;
    }

    .offers tbody td {
        display: flex;
        justify-content: space-between;
        gap: 0.8rem;
        grid-column: 1 / -1;
        border: none;
        padding: 0.18rem 0;
    }

    /* Подпись поля берём из data-label, чтобы не дублировать разметку */
    .offers tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--scn-text-muted);
        font-size: 0.78rem;
    }

    .offers__price { text-align: left; }
    .offers__name { min-width: 0; }

    /* Остаток и форма заказа встают в одну строку справа от подписи */
    .offers__qty {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .offers__qty::before { margin-right: auto; }
    .offers__qty-value { margin: 0 0.5rem 0 0; }
}

@media (max-width: 575px) {
    .search-form { flex-wrap: wrap; }
    .search-form__input { border-right: 1px solid var(--scn-line); border-radius: 3px; }
    .search-form__btn { width: 100%; margin-top: 0.5rem; border-radius: 3px; }
    .product-summary__price { font-size: 1.6rem; }
}