/* ============================================================================
   Pager
   ----------------------------------------------------------------------------
   Styles nopCommerce's own pager markup (Nop.Web.Framework's Pager tag helper
   and Nop.Web's PagerAsync), so the catalog listing, the search results and the
   account pages all page the same way. Both render one <li> per item through
   the shared PageNumberWindow: previous, a fixed row of seven slots — always
   the first and the last page, the current one with a neighbour on each side
   and, where the row skips pages, a `.skipped-pages` gap — then next. The row
   is the same at every width and never drops a number; see "Narrow rows" for
   how it fits a phone.
   ========================================================================== */

.pager {
  --chevron-size: max(0.4375rem, 7px); /* 7: reads level with the digits beside it */
  --pager-link-size: var(--tap-target);

  container-type: inline-size;
}

.pager ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
}

.pager li {
  display: flex;
}

.pager .total-summary {
  display: none;
}

.pager a,
.pager .current-page span,
.pager .skipped-pages {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pager-link-size);
  min-height: var(--pager-link-size);
  padding-inline: var(--space-3xs);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.pager .current-page span {
  background-color: var(--color-action);
  font-weight: var(--font-weight-bold);
}

/* The gap holds a slot like a number but is not a link, so it stays muted and
   takes only its glyph's width: it needs no tap target. */
.pager .skipped-pages {
  min-width: 0;
  color: var(--color-muted);
}

/* ---- Step links -------------------------------------------------------------
   Previous/next read as chevrons rather than words; the first and the last page
   are numbers in the row, so there are no « / » links. Beside the numbered
   squares, two words of running text did not read as part of the same
   control, and their width changes with the locale — "Next"/"Наступна" — which
   reflowed the row. A chevron is the same width in every language, so the row
   keeps its shape and the links keep the numbers' square tap target.

   The word itself is still what the pager renders and still what a screen
   reader announces: `font-size: 0` takes it out of the visual line without
   taking it out of the accessibility tree (the same technique the dialog close
   button uses in components.css). It is therefore the localized Pager.* resource
   that names these links — nothing here hard-codes a direction word.

   The chevron mark itself is the shared one in components.css; only its size
   belongs to the pager. */
.pager .previous-page a,
.pager .next-page a {
  font-size: 0;
}

/* ---- Narrow rows -------------------------------------------------------------
   The widest row — both steps, six numbers and a gap — is eight 44px links,
   the gap and eight 4px spaces: 400px, more than a 390px phone has inside its
   gutters. Below that, the links shrink to 36px squares (336px in all), which
   still clear WCAG 2.5.8's 24px floor, so the row never wraps or drops the
   neighbours the visitor steps to. Container conditions cannot read custom
   properties, hence the literal. */
@container (max-width: 25rem) {
  .pager ul {
    --pager-link-size: var(--tap-target-narrow);
  }
}

@media (hover: hover) and (pointer: fine) {
  .pager a:hover {
    background-color: var(--color-brand-soft);
  }
}