/* public/assets/css/pagination.css
 *
 * Brand-colored pagination, used on shop.php and subcategory.php.
 *
 * Builds on Bootstrap 5's .pagination / .page-item / .page-link classes —
 * only adds:
 *   - burgundy brand colors for default + active + focus
 *   - top spacing + flex-wrap for narrow viewports
 *   - min-width so single-digit pages don't look skinny next to ten+
 *
 * Loaded once from views/layout/header.php so both consumers get the same
 * styling. Bump cache-busting ?v= when changing this file.
 */

:root {
  --tsc-pag-brand:        #7a0f0f;
  --tsc-pag-brand-hover:  #5e0a0a;
  --tsc-pag-border:       #dee2e6;
  --tsc-pag-bg:           #fff;
  --tsc-pag-bg-hover:     #f8f9fa;
  --tsc-pag-muted:        #adb5bd;
}

.tsc-pagination {
  margin-top: 2rem;
}

.tsc-pagination .pagination {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tsc-pagination .page-link {
  color: var(--tsc-pag-brand);
  background-color: var(--tsc-pag-bg);
  border-color: var(--tsc-pag-border);
  min-width: 2.5rem;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tsc-pagination .page-link:hover {
  color: var(--tsc-pag-brand-hover);
  background-color: var(--tsc-pag-bg-hover);
  border-color: var(--tsc-pag-muted);
}

.tsc-pagination .page-item.active .page-link {
  background-color: var(--tsc-pag-brand);
  border-color: var(--tsc-pag-brand);
  color: #fff;
}

.tsc-pagination .page-item.disabled .page-link {
  color: var(--tsc-pag-muted);
  background-color: var(--tsc-pag-bg);
  border-color: var(--tsc-pag-border);
}

.tsc-pagination .page-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(122, 15, 15, 0.25);
  z-index: 2;
  outline: none;
}