/* ===============================
   Pagination — Bootstrap 5 + DLE
================================ */
.pagination-primary-soft {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-pagination-border-color: transparent;

  --bs-pagination-hover-color: var(--bs-white);
  --bs-pagination-hover-bg: var(--bs-primary);

  --bs-pagination-active-color: var(--bs-white);
  --bs-pagination-active-bg: var(--bs-primary);

  padding: 4px;
  border-radius: 0.325rem;
}

.pagination-primary-soft .page-item {
  margin: 4px;
}

.pagination-primary-soft .page-link {
  border-radius: 0.325rem;
}

/* ===== DLE pagination ===== */

.pagination-primary-soft {
  /* Size */
  --pg-padding-y: 0.325rem;
  --pg-padding-x: 0.65rem;
  --pg-font-size: 0.9rem;
  --pg-radius: 0.25rem;

  /* Colors */
  --pg-color: var(--bs-primary);
  --pg-bg: rgba(var(--bs-primary-rgb), 0.1);

  --pg-hover-color: #fff;
  --pg-hover-bg: var(--bs-primary);

  --pg-active-color: #fff;
  --pg-active-bg: var(--bs-primary);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 0.25rem;
}

/* =====================================================
   Base elements (a, span) — DLE pages
===================================================== */

.pagination-primary-soft a,
.pagination-primary-soft span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: var(--pg-padding-y) var(--pg-padding-x);
  font-size: var(--pg-font-size);
  line-height: 1;
  font-weight: 400;
  color: var(--pg-color);
  text-decoration: none;
  background-color: var(--pg-bg);
  border: 1px solid transparent;
  border-radius: var(--pg-radius);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* =====================================================
   Hover
===================================================== */

.pagination-primary-soft a:hover {
  color: var(--pg-hover-color);
  background-color: var(--pg-hover-bg);
}

/* =====================================================
   Active (mouse press)
===================================================== */

.pagination-primary-soft a:active {
  color: var(--pg-active-color);
  background-color: var(--pg-active-bg);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* =====================================================
   Current page (DLE)
===================================================== */

.pagination-primary-soft span,
.pagination-primary-soft span.current {
  color: var(--pg-active-color);
  background-color: var(--pg-active-bg);
  cursor: default;
}

/* =====================================================
   Disabled prev / next (DLE)
===================================================== */

.pagination-primary-soft span.nav_ext {
    border: transparent;
    border-radius: 0.325rem !important;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
  
}

/* =====================================================
   SVG arrows (prev / next)
===================================================== */

.pagination-primary-soft svg {
  width: 1em;
  height: 1em;

  display: block;
  flex-shrink: 0;

  fill: currentColor;
}

/* =====================================================
   Focus (accessibility)
===================================================== */

.pagination-primary-soft a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width: 576px) {
  .pagination-primary-soft a,
  .pagination-primary-soft span {
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }
}