/* Aligns the custom pager to the right */
.qintess-custom-pager {
  float: right;
}

/* Centers items within the pagination component */
.qintess-custom-pager .pagination {
  align-items: center;
}

/* Page link styles: removes background, changes color, removes border, adjusts font size, and padding */
.qintess-custom-pager .page-item .page-link {
  background-color: transparent;
  color: #222222;
  border: none;
  font-size: 28px;
  padding: 0 8px;
}

/* Styles for active page links: bold text and color change */
.qintess-custom-pager .page-item.is-active .page-link,
.qintess-custom-pager .page-item.active .page-link {
  font-weight: 700;
  color: #6800FF;
}

/* Margin adjustments for previous and next buttons */
.qintess-custom-pager .pager__item--previous {
  margin-right: 8px;
}

.qintess-custom-pager .pager__item--next {
  margin-left: 8px;
}

/* Default icon settings: shows desktop icon, hides mobile icon */
.qintess-custom-pager .page-item .arrow-icon-mobile {
  display: none;
}

.qintess-custom-pager .page-item .arrow-icon-desktop {
  display: inline-block;
}

/* Sets a consistent size for the previous and next button icons */
.qintess-custom-pager .pager__item--previous img,
.qintess-custom-pager .pager__item--next img {
  height: 40px;
  width: 40px;
}

/* Smooth transition for icon rotation and opacity */
.qintess-custom-pager .arrow-icon {
  transition: transform 0s ease, opacity 0s ease;
}

/* Style for the enabled "Previous" button - rotates icon to point left */
.qintess-custom-pager .pager__item--previous:not(.disabled) .arrow-icon {
  transform: rotate(180deg); /* Rotate left when enabled */
}

/* Style for the disabled "Next" button - keeps default rotation */
.qintess-custom-pager .pager__item--next.disabled .arrow-icon {
  transform: rotate(180deg); /* No change in rotation */
}

/* General style for disabled buttons */
.qintess-custom-pager .page-item.disabled a {
  pointer-events: none; /* Disables clicking */
  cursor: not-allowed;  /* Shows a "not-allowed" cursor */
  text-decoration: none; /* Removes underline */
}

/* Mobile styles for screens 520px or smaller */
@media screen and (max-width: 520px) {
  /* Icon display adjustments for mobile */
  .qintess-custom-pager .page-item .arrow-icon-desktop {
    display: none;
  }
  .qintess-custom-pager .page-item .arrow-icon-mobile {
    display: inline-block;
  }

  /* Icon size adjustments for smaller screens */
  .qintess-custom-pager .pager__item--previous img,
  .qintess-custom-pager .pager__item--next img {
    height: 24px;
    width: 24px;
  }

  /* Page link adjustments for mobile: smaller font and padding */
  .qintess-custom-pager .page-item .page-link {
    font-size: 12px;
    padding: 0 5px;
  }

  /* Active page link color adjustment for mobile */
  .qintess-custom-pager .page-item.is-active .page-link,
  .qintess-custom-pager .page-item.active .page-link {
    color: #E92651;
  }

  /* Margin adjustments for previous and next buttons on mobile */
  .qintess-custom-pager .pager__item--previous {
    margin-right: 5px;
  }

  .qintess-custom-pager .pager__item--next {
    margin-left: 5px;
  }
}