/* De pagineringsbalk boven en onder de lijst. */

/* Op :root, niet op de twee containers. Stond dat wel zo, dan resolveren de
   variabelen niet voor widgets die buiten die containers hangen, en dan valt
   `color: var(--gk-accent) !important` weg als ongeldige waarde — waarna de
   oude stijl gewoon weer wint. Precies wat er de eerste keer gebeurde. */

/* ---- de rij --------------------------------------------------------- */
.pagination_pages ul.gk-pag {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  /* !important: de bron zet hier `space-around` neer en trekt de rij dan over
     de volle breedte uit elkaar. */
  justify-content: center !important;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination_pages ul.gk-pag li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  float: none !important;
  list-style: none;
}

/* ---- de cijfers ----------------------------------------------------- */
/* Geen vlak, geen rand, geen radius — alleen het cijfer. De !importants zijn
   er omdat de bron met specifiekere regels een hokje van 24 px met een randje
   neerzet en de kleur op #999 (2,85:1) zet. */
.gk-pag .gk-nr > a {
  /* !important op de maten: de bron zet hier een hokje van 24 px neer met een
     eigen breedte, en die regel is specifieker. */
  width: 40px !important;
  /* 36 en niet 44: de rij is anders 8 px hoger dan de knoppen erin, en die
     lucht komt er boven en onder bij — bij de filterbalk zag je dat als een gat
     tussen de inleiding en de knoppen. */
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--gk-inkt, #1c1c1c) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none !important;
}

.gk-pag .gk-nr > a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--gk-accent, #4e7ca5);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.gk-pag .gk-nr > a:focus-visible {
  outline: 2px solid var(--gk-accent, #4e7ca5);
  outline-offset: -2px;
}

/* De pagina waar je staat: alleen vetter. Meer doet bol er niet aan. */
.gk-pag .gk-nr > a[aria-current] {
  /* !important: de bron zet het gewicht van de cijfers vast, en zonder dit
     blijft de huidige pagina precies zo dun als de rest. */
  font-weight: 600 !important;
  cursor: default;
  text-decoration: none !important;
}

.gk-pag .gk-punt {
  width: 35px;
  height: 36px;
  justify-content: center;
  color: var(--gk-inkt, #1c1c1c);
  font-size: 14px;
  line-height: 1;
}

/* ---- vorige en volgende --------------------------------------------- */
.gk-pag .gk-stap > a {
  width: var(--gk-knop-hoog, 29px) !important;
  height: var(--gk-knop-hoog, 29px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  border: 1px solid var(--gk-accent, #4e7ca5) !important;
  border-radius: var(--gk-knop-rond, 8px) !important;
  color: var(--gk-accent, #4e7ca5) !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.gk-pag .gk-stap > a:hover {
  background: var(--gk-accent-vlak, #f0f6fb) !important;
}
.gk-pag .gk-stap > a:focus-visible {
  outline: 2px solid var(--gk-accent, #4e7ca5);
  outline-offset: 2px;
}
.gk-pag .gk-stap > a i { font-size: 11px; }

/* ---- breed of smal --------------------------------------------------- */
/* 640 px is het omslagpunt dat bol zelf aanhoudt (Tailwind `sm:`). */
/* Met dezelfde voorvoegsels als de regel hierboven: `.pagination_pages
   ul.gk-pag` is specifieker dan `.gk-pag.gk-smal`, en dan wint `display: flex`
   ook al staat er !important bij allebei. */
.pagination_pages ul.gk-pag.gk-smal { display: none !important; }

@media (max-width: 639px) {
  .pagination_pages ul.gk-pag.gk-breed { display: none !important; }
  .pagination_pages ul.gk-pag.gk-smal { display: flex !important; }
  /* Op een telefoon staan de cijfers dichter op elkaar; bol gebruikt daar
     w-8 (32 px) in plaats van w-10. */
  .gk-pag .gk-nr > a { width: 32px !important; }
  .gk-pag .gk-punt { width: 28px; }
}

/* ---- de teller ------------------------------------------------------- */
/* !important, want de bron zet `#pagination_bottom` op `display: grid` en zet
   de teller daarmee naast de cijfers in plaats van erboven. */
#pagination_bottom {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 0 8px;
}

.pagination_bottom_counter {
  float: none !important;
  margin: 0 !important;
  text-align: center;
}
.pagination_bottom_counter label {
  font-size: 13px;
  color: var(--gk-zacht, #6b7378);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.pagination_bottom_counter label b {
  color: var(--gk-inkt, #1c1c1c);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .gk-pag .gk-stap > a { transition: none; }
}