/* Category & Catalog Pagination Module — Nirvana Mono Design System
   Eliminates all default blue styling. Replaces with clean anthracite,
   refined gray borders, and crisp tactile page buttons.
   Supports both native <div class="pager"> and Laravel/Bootstrap <ul class="pagination">. */

.pager,
.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.pagination > li,
.pagination .page-item {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pager a,
.pager span,
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--gray-300, #d4d4d4) !important;
  border-radius: var(--radius, 4px) !important;
  background: var(--white, #ffffff) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-700, #4a4a4a) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  float: none !important;
  line-height: 1 !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease !important;
}

/* Active State — Solid Anthracite with Crisp White Text */
.pager a.active,
.pager span.active,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.pagination .page-item.active .page-link {
  background: var(--anthracite, #2c2c2c) !important;
  border-color: var(--anthracite, #2c2c2c) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Hover State — Inactive Items Turn to Anthracite on Hover */
.pager a:hover,
.pagination > li:not(.active):not(.disabled) > a:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--anthracite, #2c2c2c) !important;
  border-color: var(--anthracite, #2c2c2c) !important;
  color: #ffffff !important;
}

/* Disabled State — Light Muted Tone */
.pager span.disabled,
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > span:hover,
.pagination > .disabled > a:hover,
.pagination .page-item.disabled .page-link {
  background: var(--gray-50, #f7f7f7) !important;
  border-color: var(--line, #e8e8e8) !important;
  color: #b8b8b8 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/* Focus State — No Blue Glow */
.pagination .page-link:focus,
.pagination > li > a:focus,
.pager a:focus {
  outline: none !important;
  border-color: var(--anthracite, #2c2c2c) !important;
  box-shadow: 0 0 0 2px rgba(44, 44, 44, .18) !important;
}

@media (max-width: 560px) {
  .pager,
  .pagination {
    margin-left: 0 !important;
    width: 100% !important;
    gap: 4px !important;
  }
  .pager a,
  .pager span,
  .pagination .page-link {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 7px !important;
  }
}