/* Pagination Container */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

/* Common Button Styles */
.pagination-btn,
.page-numbers button {
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease-in-out;
  font-size: 1rem;
}

/* Pagination Hover Effects */
.pagination-btn:hover,
.page-numbers button:hover {
  background-color: var(--primary-light);
}

/* Active Page Number */
.page-numbers .active {
  background-color: var(--primary-light);
  color: var(--white);
  font-weight: bold;
  border-color: var(--primary-dark);
}

/* Inactive Page Numbers */
.page-numbers button {
  background-color: var(--white);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-weight: normal;
}

/* Disabled "Previous" and "Next" Buttons */
.pagination-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Space between buttons */
.pagination-btn,
.page-numbers button {
  margin: 0 5px;
}

/* Style for page number container */
.page-numbers {
  display: flex;
  gap: 5px;
  justify-content: center;
}

/* Hover effect for pagination numbers */
.page-numbers button:hover {
  background-color: var(--primary-light);
  color: var(--white);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .pagination {
    gap: 5px;
    padding: 10px;
    justify-content: center;
  }

  .pagination-btn,
  .page-numbers button {
    padding: 8px 12px; /* Adjust padding for smaller screens */
    font-size: 0.9rem; /* Smaller font size for mobile */
  }

  /* Adjust the active button style on mobile */
  .page-numbers .active {
    font-size: 1rem; /* Keep the active button font size consistent */
  }
}

/* Smaller Screen Adjustments */
@media (max-width: 480px) {
  .pagination-btn,
  .page-numbers button {
    padding: 6px 10px; /* Smaller buttons on very small screens */
    font-size: 0.8rem; /* Even smaller font size for mobile */
  }

  .pagination {
    gap: 5px;
    padding: 5px;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center;
  }

  .pagination-btn,
  .page-numbers button {
    margin: 2px;
  }
}