/* Paginator Component Styles */

/* Пагинатор в стиле проекта */
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: #212529;
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-color: #212529;
  --bs-pagination-hover-bg: #f8f9fa;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: #212529;
  --bs-pagination-focus-bg: #f8f9fa;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
  --bs-pagination-active-color: #212529;
  --bs-pagination-active-bg: #ffc107;
  --bs-pagination-active-border-color: #ffc107;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #ffffff;
  --bs-pagination-disabled-border-color: #dee2e6;
}

.page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
  color: var(--bs-pagination-active-color);
  font-weight: 600;
}

.page-link {
  transition: all 0.2s ease;
}

.page-link:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-link:focus {
  box-shadow: var(--bs-pagination-focus-box-shadow);
}

/* Стили для disabled состояния */
.page-item.disabled .page-link {
  pointer-events: none;
  opacity: 0.5;
}

/* Адаптивность */
@media (max-width: 576px) {
  .pagination {
    font-size: 0.875rem;
  }

  .page-link {
    padding: 0.25rem 0.5rem;
  }

  /* Скрываем текст на мобильных, оставляем только иконки */
  .page-link i + * {
    display: none;
  }
}

/* Спиннер для кнопки "Загрузить еще" */
#load-more-spinner {
  display: none;
}

#load-more-spinner.htmx-request {
  display: inline-block;
}