/* ===== Existing pagination styles (mobile-first) ===== */
.pagination_section,
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 16px; /* Mobile font size */
}

/* Default links */
.pagination_section a,
.pagination a,
.pagination .page-link {
  color: black;
  padding: 3px 6px;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 4px;
  margin: 0 5px;
  background-color: white;
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.pagination a:hover,
.pagination_section a:hover:not(.active),
.pagination .page-link:hover {
  color: white;
  background-color: #031F3B; /* Dark hover color */
  border-color: #031F3B;
}

/* Keep equal spacing for all page numbers */
.pagination .page-item .page-link {
  margin: 0 5px !important;
}

/* Active page */
.pagination .page-item.active .page-link,
.pagination .active,
.pagination_section a:nth-child(5) {
  background-color: #0d3b66 !important; /* Main dark theme */
  border-color: #0d3b66 !important;
  color: white !important;
  margin: 0 5px !important; 
  border-radius: 4px;
}

/* Disabled links */
.pagination a.disabled,
.pagination .page-item.disabled .page-link {
  color: #aaa;
  pointer-events: none;
  opacity: 0.6;
  background-color: #f5f5f5;
}


  /* Prevent MCQ option text from overflowing in mobile */
div.border.rounded {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Optional: improve mobile readability */
@media (max-width: 576px) {
  div.border.rounded {
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0.4rem 0.5rem;
  }
}
/* ===== Desktop-specific overrides ===== */
@media (min-width: 992px) {
  .pagination_section,
  .pagination {
    font-size: 20px; /* Larger font for desktop */
  }

  .pagination_section a,
  .pagination a,
  .pagination .page-link {
    padding: 6px 12px; /* Slightly bigger clickable area */
  }
}