/* Pagination Styles - Shared across all English pages */

/* Main pagination boxes styling */
.pagingWrap > div:first-child a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  margin: 0 2px !important;
  border: 1px solid #BEBEBE !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  min-width: 40px !important;
  min-height: 38px !important;
  line-height: 1 !important;
  transition: all 0.2s ease;
}

/* Hover state */
.pagingWrap > div:first-child a:hover {
  border-color: #7949FF !important;
  color: #7949FF !important;
  background-color: #E9E1FF !important;
}

/* Active/Current page state */
.pagingWrap > div:first-child a.jp-current,
.pagingWrap > div:first-child a.num.jp-current {
  border-color: #7949FF !important;
  color: #7949FF !important;
  background-color: #E9E1FF !important;
}

/* Disabled state for buttons */
.pagingWrap > div:first-child a.disabled,
.pagingWrap > div:first-child a.jp-first.disabled,
.pagingWrap > div:first-child a.jp-last.disabled,
.pagingWrap > div:first-child a.jp-previous.disabled,
.pagingWrap > div:first-child a.jp-next.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Arrow buttons (First, Previous, Next, Last) - wider than number boxes */
.pagingWrap > div:first-child a.jp-first,
.pagingWrap > div:first-child a.jp-previous,
.pagingWrap > div:first-child a.jp-next,
.pagingWrap > div:first-child a.jp-last {
  min-width: auto !important;
  padding: 8px 16px !important;
}

/* Number boxes - larger font size */
.pagingWrap > div:first-child a.num {
  min-width: 40px !important;
  font-size: 16px !important;
}

/* Override external CSS for Previous/Next arrow buttons */
#content .pagingWrap a.jp-previous,
#content .pagingWrap a.jp-next {
  background-color: #fff !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* First and Last buttons - hide text content */
#content .pagingWrap a.jp-first,
#content .pagingWrap a.jp-last {
  text-indent: -9999px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* First button: |< (vertical line + left arrow) */
#content .pagingWrap a.jp-first::before {
  /* Vertical line */
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(2px) !important;
  -webkit-transform: translateY(-50%) translateX(2px) !important;
  width: 2px !important;
  height: 16px !important;
  background-color: #000000 !important;
}

/* Last button: >| (right arrow + vertical line) */
#content .pagingWrap a.jp-last::before {
  /* Right arrow */
  content: '' !important;
  border: solid #000000 !important;
  border-width: 0 2px 2px 0 !important;
  display: inline-block !important;
  padding: 3px !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-2px) rotate(-45deg) !important;
  -webkit-transform: translateY(-50%) translateX(-2px) rotate(-45deg) !important;
}

#content .pagingWrap a.jp-first::after {
  /* Left arrow */
  content: '' !important;
  border: solid #000000 !important;
  border-width: 0 2px 2px 0 !important;
  display: inline-block !important;
  padding: 3px !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(2px) rotate(135deg) !important;
  -webkit-transform: translateY(-50%) translateX(2px) rotate(135deg) !important;
}

#content .pagingWrap a.jp-last::after {
  /* Vertical line */
  content: '' !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-2px) !important;
  -webkit-transform: translateY(-50%) translateX(-2px) !important;
  width: 2px !important;
  height: 16px !important;
  background-color: #000000 !important;
}

/* Hover/active states - purple color */
#content .pagingWrap a.jp-first:hover::before,
#content .pagingWrap a.jp-first:hover::after,
#content .pagingWrap a.jp-last:hover::before,
#content .pagingWrap a.jp-last:hover::after,
#content .pagingWrap a.jp-first.jp-current::before,
#content .pagingWrap a.jp-first.jp-current::after,
#content .pagingWrap a.jp-last.jp-current::before,
#content .pagingWrap a.jp-last.jp-current::after {
  border-color: #7949FF !important;
  background-color: #7949FF !important;
}

/* SVG icons for desktop - hide pseudo-elements and show SVG images */
@media screen and (min-width: 769px) {
  /* Remove text-indent to allow SVG to display */
  #content .pagingWrap a.jp-first,
  #content .pagingWrap a.jp-last {
    text-indent: 0 !important;
  }

  /* Hide CSS pseudo-elements on desktop */
  #content .pagingWrap a.jp-first::before,
  #content .pagingWrap a.jp-first::after,
  #content .pagingWrap a.jp-last::before,
  #content .pagingWrap a.jp-last::after {
    display: none !important;
  }

  /* Style SVG icons */
  .pagination-icon {
    width: 12px;
    height: auto;
    display: block;
  }
}

/* Mobile-specific adjustment */
@media (max-width: 768px) {
  #content .pagingWrap a.jp-first::after,
  #content .pagingWrap a.jp-last::before {
    padding: 2.5px !important;
  }

  /* Also adjust line height for mobile */
  #content .pagingWrap a.jp-first::before,
  #content .pagingWrap a.jp-last::after {
    height: 14px !important;
  }
}

/* CSS arrows (created with ::before pseudo-elements) */
#content .pagingWrap a.jp-previous::before,
#content .pagingWrap a.jp-next::before {
  border: solid #000000 !important;
  border-width: 0 2px 2px 0 !important;
  display: inline-block !important;
  padding: 3px !important;
}

/* Left arrow rotation */
#content .pagingWrap a.jp-previous::before {
  transform: rotate(135deg) !important;
  -webkit-transform: rotate(135deg) !important;
}

/* Right arrow rotation */
#content .pagingWrap a.jp-next::before {
  transform: rotate(-45deg) !important;
  -webkit-transform: rotate(-45deg) !important;
}

/* Arrow hover/active states - purple color */
#content .pagingWrap a.jp-previous:hover::before,
#content .pagingWrap a.jp-next:hover::before,
#content .pagingWrap a.jp-previous.jp-current::before,
#content .pagingWrap a.jp-next.jp-current::before {
  border-color: #7949FF !important;
}