/* Basic Pagination Styles (unchanged from before) */
.pagination {
  display: flex;
  justify-content: center; /* This centers the pagination ul itself */
  margin-top: 20px;
}

.pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  /* Key change here: Distribute items to opposite ends */
  justify-content: space-between; /* This will push the first item to the start and the last item to the end */
  align-items: center;
  width: 100%; /* Ensure the ul takes up the full width of its container to allow space-between to work */
  /*max-width: 800px;*/ /* Optional: Constrain max width for better readability on very wide screens */
  /* Remove 'gap' if you want them truly opposite, or keep a small gap if there are other items in between */
  /* If you ONLY have Previous and Next, `gap` won't apply between them anyway due to space-between */
  /* If you also have page numbers, `gap` would still apply between them */
}

.pagination li {
  /* No change needed here, as it just makes list items inline */
  display: inline-block;
}

/* New CSS to create the separation */
.pagination-separator-left {
  margin-inline-end: auto; /* This will push this item and subsequent items to the right */
}

/* New CSS to create the separation */
.pagination-separator-right {
  margin-inline-start: auto; /* This will push this item and subsequent items to the right */
}

/* Link styles (unchanged) */
.pagination-link {
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--clr-btn-text);
  background-color: var(--clr-btn-bg);
  border: var(--btn-border);
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  min-width: 40px; /* Set a minimum width for the links */
  text-align: center; /* Center the content (like the arrow) horizontally */
}

.pagination-link:hover,
.pagination-link:focus {
  background-color: #6941ab;
}

.pagination-link[aria-current=page] {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  cursor: default;
}

.pagination-link[aria-current=page]:hover,
.pagination-link[aria-current=page]:focus {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  outline: none;
}

/* Ellipsis styling (unchanged) */
.pagination-ellipsis {
  display: block;
  padding: 8px 12px;
  color: #6c757d;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: default;
}

/* Focus outline for accessibility (unchanged) */
.pagination-link:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

/* Styles for disabled "Previous" / "Next" links (unchanged) */
.pagination-link.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}