/* ✅ Pagination Container */
.pagination-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
}
/* ✅ Default Pagination Button Style */
.pagination-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
  min-width: 40px;
}
/* ✅ Hover Effect */
.pagination-btn:hover {
  background-color: #0056b3;
}
/* ✅ Active Page Button */
.pagination-btn.active {
  background-color: #0056b3;
  font-weight: bold;
  cursor: default;
  color: #fff;
}
/* ✅ Disabled Buttons */
.pagination-btn:disabled {
  background-color: #d6d6d6;
  color: #7d7d7d;
  cursor: not-allowed;
}
/* ✅ First & Last Buttons */
.pagination-btn:first-child,
.pagination-btn:last-child {
  font-weight: bold;
}

/* ✅ Improve spacing on small screens */
@media (max-width: 600px) {
  .pagination-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .pagination-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}