/**
 * Archive overrides — стабильные правила вне Vite build.
 *
 * Подключается через wp_enqueue_style (handle: bike-archive-overrides) с
 * dependency на 'bike-main' — то есть ПОСЛЕ main.css в каскаде.
 *
 * Здесь только:
 *  - loader для infinite scroll (эталон tires)
 *  - hide пагинации на эталоне (заменена infinite scroll'ом)
 *
 * Sidebar = обычный элемент в потоке (никакого sticky / fixed JS).
 *
 * @package 4Bike
 */

/* ==========================================================================
   Alpine.js fallback — пока скрипт не инициализирован, скрываем элементы
   с x-cloak. Без этого popover'ы фильтров видны на старте (FOUC).
   ========================================================================== */
[x-cloak] { display: none !important; }

/* ==========================================================================
   Loader для infinite scroll (используется на эталоне tires; невидим без .is-active)
   ========================================================================== */
.bike-archive-loader {
  display: none;
  text-align: center;
  padding: 24px 0;
  color: #6c6d72;
  font-size: 14px;
}
.bike-archive-loader.is-active {
  display: block;
}
.bike-archive-loader::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #d4d6da;
  border-top-color: #E22A1C;
  border-radius: 50%;
  vertical-align: middle;
  animation: bike-archive-spin 0.7s linear infinite;
}
@keyframes bike-archive-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Каталог: на ЭТАЛОННЫХ страницах (категории + магазин) UI-пагинация УДАЛЯЕТСЯ из
   DOM в archive-product.php (remove_action woocommerce_pagination) — её заменяет
   infinite scroll. Поэтому CSS-скрытие больше не нужно и было ВРЕДНЫМ: глобальный
   `nav.woocommerce-pagination{display:none}` прятал пагинацию и на НЕ-эталонных
   архивах (атрибуты pa_*, поиск), где скролла нет → товары со 2-й страницы были
   недостижимы (R1 2026-07-10). Правило снято — на не-эталонных архивах пагинация видна.
   ========================================================================== */

/* ==========================================================================
   Cross-filter: значения фильтров с count=0 (несовместимые с другими
   активными фильтрами) показываются бледными и не кликабельны.
   pointer-events:none ставим на input — лейбл ловит hover для native tooltip.
   ========================================================================== */
.bike-hfilters__item.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
}
.bike-hfilters__item.is-unavailable input {
  pointer-events: none;
}
.bike-hfilters__item.is-unavailable .bike-hfilters__item-count {
  text-decoration: line-through;
}

/* ==========================================================================
   Прайс-пресеты в popover «Цена» — 3 быстрые кнопки над input'ами.
   Динамически рассчитаны по max_p из БД, округлены к красивым числам.
   ========================================================================== */
.bike-hfilters__price-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bike-hfilters__price-preset {
  flex: 1 1 auto;
  padding: 6px 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bike-hfilters__price-preset:hover {
  background: #fff;
  border-color: #E22A1C;
  color: #E22A1C;
}
.bike-hfilters__price-preset.is-active {
  background: #E22A1C;
  border-color: #E22A1C;
  color: #fff;
}

/* ==========================================================================
   Empty state — товаров не найдено. Recovery actions + связанные категории.
   ========================================================================== */
.bike-empty-state {
  padding: 48px 24px;
  text-align: center;
  background: #fafafa;
  border-radius: 12px;
  margin: 24px 0;
}
.bike-empty-state__icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: #9ca3af;
}
.bike-empty-state__title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px;
}
.bike-empty-state__desc {
  font-size: 15px;
  color: #6b7280;
  margin: 0 auto 24px;
  max-width: 520px;
}
.bike-empty-state__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.bike-empty-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bike-empty-state__btn--primary {
  background: #E22A1C;
  color: #fff;
}
.bike-empty-state__btn--primary:hover {
  background: #c41f12;
}
.bike-empty-state__btn--secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.bike-empty-state__btn--secondary:hover {
  border-color: #6b7280;
}
.bike-empty-state__siblings {
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.bike-empty-state__siblings-title {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bike-empty-state__siblings-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.bike-empty-state__sibling {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.bike-empty-state__sibling:hover {
  border-color: #E22A1C;
  color: #E22A1C;
}
.bike-empty-state__sibling-count {
  color: #9ca3af;
  font-size: 12px;
}

/* ==========================================================================
   Эталон /rezina/tires/: Rail + Inner sidebar pattern.
   .bike-archive-sidebar — rail (всегда в grid layout, не выходит из flow).
   .bike-archive-sidebar-inner — двигаемая часть (position absolute/fixed).
   3 состояния: is-absolute / is-fixed-top / is-fixed-bottom.
   JS управляет classes + CSS variables (--bike-sidebar-*).
   ========================================================================== */
@media (min-width: 1024px) {
  /* Эталонный липкий сайдбар (rail+inner, цепляется к низу) — на ВСЕХ категориях.
     JS (inline в archive-product.php) теперь тоже запускается везде ($bike_is_etalon). */
  .bike-archive-layout {
    align-items: stretch;
  }

  .bike-archive-sidebar {
    position: relative !important;
    align-self: stretch;
    display: block;
    min-height: var(--bike-sidebar-inner-height, 0px);
    width: 100%;
    max-height: none !important;
    overflow: visible !important;
    top: auto !important;
  }

  .bike-archive-sidebar-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .bike-archive-sidebar-inner.is-absolute {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--bike-sidebar-abs-top, 0px);
  }

  .bike-archive-sidebar-inner.is-fixed-top {
    position: fixed;
    top: var(--bike-sidebar-top-gap, 96px);
    left: var(--bike-sidebar-left, 0px);
    width: var(--bike-sidebar-width, 280px);
    z-index: 30;
  }

  .bike-archive-sidebar-inner.is-fixed-bottom {
    position: fixed;
    bottom: var(--bike-sidebar-bottom-gap, 20px);
    left: var(--bike-sidebar-left, 0px);
    width: var(--bike-sidebar-width, 280px);
    z-index: 30;
  }
}