/* Pagination Styling */
ul.pagination {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}

ul.pagination li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

ul.pagination li a,
ul.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0 0.75em;
  background-color: var(--ju87-btn-color, #116103);
  color: var(--ju87-btn-text-color, #c1c1c1);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

ul.pagination li a:hover {
  background-color: var(--ju87-btn-hover-color, #004C87);
  color: var(--ju87-text-hover-color, #004C87);
  transform: translateY(-2px);
}

ul.pagination li a:active {
  transform: translateY(0);
}

ul.pagination li .page {
  background-color: var(--ju87-btn-color, #116103);
  color: var(--ju87-btn-text-color, #c1c1c1);
  border-radius: 4px;
}

ul.pagination li .page.active {
  background-color: #000000;
  color: var(--ju87-btn-color, #116103);
  cursor: default;
  font-weight: 700;
}

ul.pagination li .page.active:hover {
  background-color: #000000;
  color: var(--ju87-btn-color, #116103);
  transform: none;
}

/* Pagination prev/next buttons */
ul.pagination li.bt_prev_pag,
ul.pagination li.bt_next_pag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

ul.pagination li.bt_prev_pag a,
ul.pagination li.bt_next_pag a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0;
  background-color: var(--ju87-btn-color, #116103);
  color: var(--ju87-btn-text-color, #c1c1c1);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: FontAwesome;
}

ul.pagination li.bt_prev_pag a:hover,
ul.pagination li.bt_next_pag a:hover {
  background-color: var(--ju87-btn-hover-color, #004C87);
  color: var(--ju87-text-hover-color, #004C87);
  transform: translateY(-2px);
}

ul.pagination li.bt_prev_pag a:active,
ul.pagination li.bt_next_pag a:active {
  transform: translateY(0);
}

/* Ellipsis styling */
ul.pagination li:has(> :not(a)):not(:has(> a)) {
  padding: 0 0.25em;
  color: var(--ju87-btn-color, #116103);
  font-weight: 600;
}

/* Responsive */
@media screen and (max-width: 736px) {
  ul.pagination {
    gap: 0.25em;
  }
  
  ul.pagination li a,
  ul.pagination li span,
  ul.pagination li .page {
    min-width: 2em;
    height: 2em;
    padding: 0 0.5em;
    font-size: 0.85em;
  }
}

@media screen and (max-width: 480px) {
  ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
    display: none;
  }
  
  ul.pagination {
    gap: 0.25em;
  }
  
  ul.pagination li a,
  ul.pagination li span,
  ul.pagination li .page {
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.4em;
    font-size: 0.8em;
  }
}