/*!
 * Cleafs Optimize — pagination-global.css (v1.8.0 migration from replacer-flaticon-emoji.css)
 * Universal sitewide pagination styling:
 *   - .pagination .page-numbers (theme markup: <div class="pagination">)
 *   - ul.page-numbers > li (alternative markup, e.g. WooCommerce default)
 *   - prev/next chevrons rendered via ::after (no cwsicon dependency)
 *   - mobile size adjustments ≤767px
 *
 * Used on: blog/, blog/kategoria/, blog/tag/, archive, search results,
 *          WooCommerce shop/category, search results pages.
 *
 * Loaded sitewide via custom_css.files (named conditional file, universal scope).
 */

.pagination {
  display: block;
  text-align: center;
  margin: 45px 0 30px;
  padding: 0;
  clear: both;
}
.pagination .page-links {
  display: inline-block;
  font-size: 0;  /* eliminate inline-block whitespace */
  line-height: 0;
}

/* Base for all items — current span + a links */
.pagination .page-numbers,
.pagination a.page-numbers {
  display: inline-block;
  vertical-align: top;
  width: 45px;
  height: 45px;
  line-height: 45px;
  margin: 0 1px 1px 0;
  padding: 0;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.25s, color 0.25s;
  background-color: transparent;
  color: #333;
}

/* Active "1" — niebieski tło białą cyfrą */
.pagination .page-numbers.current,
.pagination span.page-numbers.current {
  background-color: #1f5abc;
  color: #ffffff;
  font-weight: 900;
}

/* Hover na linku (nie current) */
.pagination a.page-numbers:hover {
  background-color: rgba(64, 166, 255, 0.18);
  color: #132a5f;
}

/* Strzałki next/prev — niebieski znak ">" / "<" przez CSS pseudo zamiast cwsicon glyph */
.pagination a.page-numbers.next,
.pagination a.page-numbers.prev,
.pagination a.next.page-numbers,
.pagination a.prev.page-numbers {
  color: rgba(64, 166, 255, 0.62);
  position: relative;
  font-size: 0;  /* hide native <i> if cwsicon not loaded */
}
.pagination a.next.page-numbers::after,
.pagination a.page-numbers.next::after {
  content: "\203A";
  font-size: 24px;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  line-height: 45px;
  vertical-align: top;
  color: inherit;
}
.pagination a.prev.page-numbers::after,
.pagination a.page-numbers.prev::after {
  content: "\2039";
  font-size: 24px;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  line-height: 45px;
  vertical-align: top;
  color: inherit;
}
.pagination a.next.page-numbers > i,
.pagination a.prev.page-numbers > i {
  display: none;  /* hide cwsicon <i> — replaced by ::after */
}
.pagination a.next.page-numbers:hover,
.pagination a.prev.page-numbers:hover {
  background-color: rgba(64, 166, 255, 0.18);
  color: #1f5abc;
}

/* "..." dots */
.pagination .page-numbers.dots {
  background-color: transparent;
  color: #999;
  cursor: default;
}

/* Mobile: nieco mniejsze guziki */
@media (max-width: 767px) {
  .pagination {
    margin: 30px 0 20px;
  }
  .pagination .page-numbers,
  .pagination a.page-numbers {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
  .pagination a.next.page-numbers::after,
  .pagination a.page-numbers.next::after,
  .pagination a.prev.page-numbers::after,
  .pagination a.page-numbers.prev::after {
    line-height: 40px;
    font-size: 22px;
  }
}

/* === ALT MARKUP: <ul class="page-numbers"><li> (np. WooCommerce default) === */
ul.page-numbers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 45px 0 30px;
  padding: 0;
  text-align: center;
}
ul.page-numbers > li {
  list-style: none;
  margin: 0 1px 1px 0;
  padding: 0;
  background: transparent;
  display: inline-block;
}
ul.page-numbers > li::before { display: none; }
ul.page-numbers > li > .page-numbers,
ul.page-numbers > li > a.page-numbers {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  background-color: transparent;
  color: #333;
  transition: background-color 0.25s, color 0.25s;
}
ul.page-numbers > li > .page-numbers.current {
  background-color: #1f5abc;
  color: #ffffff;
  font-weight: 900;
}
ul.page-numbers > li > a.page-numbers:hover {
  background-color: rgba(64, 166, 255, 0.18);
  color: #132a5f;
}
@media (max-width: 767px) {
  ul.page-numbers {
    margin: 30px 0 20px;
  }
  ul.page-numbers > li > .page-numbers,
  ul.page-numbers > li > a.page-numbers {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
}