/* Universal pagination buttons (site-wide, excluding header/footer areas) */
/* Usage pattern:
   <nav class="pager" aria-label="...">
     <ul class="pager-list">
       <li><a class="pager-link" href="#">« Vorige</a></li>
       <li><span class="pager-info">Pagina 1 van 3</span></li>
       <li><a class="pager-link" href="#">Volgende »</a></li>
     </ul>
   </nav>
*/

.pager {
  display: flex;
  justify-content: center;
}

.pager-list {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 8px 0 0 0;
}

.pager-link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ece6f6;
  border-radius: 8px;
  background: #f6f3fb;
  color: #6d00c7;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pager-link:hover {
  background: #ece6f6;
}
.pager-link.disabled,
.pager-link[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.pager-info {
  display: inline-block;
  padding: 8px 0;
  color: #555;
}