.pagination-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  gap: 12px;

  /* NEW: keep centered pagination but reserve space for .page_info on the left */
  justify-content: center;
  position: relative;

  /* Minimal change: reserve left space for absolute .page_info to avoid overlap.
     Adjust this value if your .page_info is wider. */
  padding-left: 220px;
  box-sizing: border-box;
}

/* Left align page info (kept absolute but vertically centered) */
.pagination-wrapper .page_info {
  position: absolute;
  left: 12px;                    /* small offset from the left edge */
  top: 50%;
  transform: translateY(-50%);   /* vertical centering relative to wrapper */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;              /* prevents extreme width; tweak as needed */
}

/* Use the existing digg styles but convert float-based layout to inline-flex */
.digg_pagination {
  background: white;
  cursor: default;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

/* Make links inline-block so transform works reliably */
.digg_pagination a,
.digg_pagination span,
.digg_pagination em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  box-sizing: border-box;
  border: 1px solid transparent;
}

/* Normal link look */
.digg_pagination a {
  color: #105cb6;
  border-color: #9aafe5;
  background: #ffffff;
}

/* Hover / focus effect: slightly grow (bada) and lift */
.digg_pagination a:hover,
.digg_pagination a:focus {
  transform: translateY(-3px) scale(1.12); /* grow a bit and lift */
  box-shadow: 0 6px 14px rgba(16, 92, 182, 0.12);
  color: #000033;
  z-index: 20; /* bumped so hover appears above .page_info if close */
  border-color: rgba(16,92,182,0.85);
}

/* Current page style */
.digg_pagination .current {
  font-weight: 600;
  background: #2e6ab1;
  color: #fff;
  border: 1px solid #2e6ab1;
  transform: none; /* keep current steady */
}

/* Disabled (prev/next when not available) */
.digg_pagination .disabled {
  color: #999999;
  border: 1px solid #ddd;
  background: #f8f8f8;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Ellipsis (usually generated as span or em) */
.digg_pagination span,
.digg_pagination em {
  background: transparent;
  color: #666;
  min-width: auto;
  padding: 0 8px;
}

/* keep pagination-links aligned left and page-info right */
.pagination-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* page info styling (duplicate safe-keep) */
.pagination-wrapper .page_info {
  margin-right: 0;
  font-weight: 600;
  white-space: nowrap;
}

/* small screens - allow wrapping and remove left padding to avoid clipping */
@media (max-width: 720px) {
  .pagination-wrapper {
    padding-left: 16px; /* disable big left reserve on small screens */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .pagination-wrapper .page_info {
    position: static;      /* flow normally above pagination */
    transform: none;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-self: start;
  }

  .pagination-links {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .digg_pagination {
    width: 100%;
    padding: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .digg_pagination a,
  .digg_pagination span,
  .digg_pagination em {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* very small screens: tighten page_info width further */
@media (max-width: 420px) {
  .pagination-wrapper .page_info {
    max-width: 60%;
    font-size: 13px;
  }
}

/* accessibility & polish */
.digg_pagination a:focus {
  box-shadow: 0 0 0 3px rgba(46, 106, 177, 0.15);
  transform: translateY(-2px) scale(1.06);
  z-index: 30;
}

.digg_pagination,
.pagination-links {
  transition: all 120ms ease;
}