/* =============================================================================
   Tour list pagination
   -----------------------------------------------------------------------------
   COPIED FROM:  public/assets/css/style.css, lines 24227-24305
   ORIGINAL PAGE: the template's shop page (shop.html), the only page in the whole
                  template that has a numbered pager. Its markup is at
                  shop.html lines 2284-2309.

   WHY IT WAS COPIED:
   The template's tour list page (tour-package.html) has NO pager. It uses a
   "Load More" button that needs JavaScript and a second request. This project
   uses Laravel's real paginator instead, so the tour list needs pager styling
   that the template never wrote for it. Every pager rule in style.css is scoped
   to `.home1-shop-page`, and the tour list page's wrapper is
   `.home1-tour-package-page`, so none of them reached it. The result was page
   numbers rendered as bare bullet points.

   WHAT WAS CHANGED WHILE COPYING:
   ONLY the wrapper class name, in every selector:
       .home1-shop-page   ->   .home1-tour-package-page
   Nothing else. No property was added, removed, reordered or "improved".
   Values, units, media query breakpoints and CSS variables are exactly as the
   template wrote them.

   KNOWN ODDITY, LEFT AS THE TEMPLATE DREW IT: the Prev/Next circles are 88px
   across while the page-number circles are 36px. That is the template's own
   proportion, kept on purpose. It was reviewed against a screenshot and accepted.

   ONE RULE IS NOT A COPY. It is clearly marked at the bottom of this file.
   ============================================================================= */

/* ---- exact copy of style.css:24227-24305, wrapper class renamed ---- */

.home1-tour-package-page .pagination-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .home1-tour-package-page .pagination-area {
    gap: 10px;
  }
}
.home1-tour-package-page .pagination-area .paginations {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
.home1-tour-package-page .pagination-area .paginations .page-item a {
  color: var(--text-color);
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borders-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}
@media (max-width: 576px) {
  .home1-tour-package-page .pagination-area .paginations .page-item a {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
.home1-tour-package-page .pagination-area .paginations .page-item a:hover {
  background-color: var(--primary-color1);
  color: var(--white-color);
}
.home1-tour-package-page .pagination-area .paginations .page-item.active a {
  background-color: var(--primary-color1);
  color: var(--white-color);
}
.home1-tour-package-page .pagination-area .paginations-button a {
  min-width: 88px;
  max-width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--borders-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--title-color);
  font-family: var(--font-poppins);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: 0.7s;
}
@media (max-width: 576px) {
  .home1-tour-package-page .pagination-area .paginations-button a {
    min-width: 65px;
    max-width: 65px;
    height: 65px;
    font-size: 14px;
  }
}
.home1-tour-package-page .pagination-area .paginations-button a:hover {
  color: var(--white-color);
  box-shadow: inset 0 0 0 10em var(--primary-color1);
}

/* ---- END OF COPY. Everything above this line is the template's own CSS. ---- */

/* =============================================================================
   NOT A COPY - one rule added by this project.

   The template has no "off" look for Prev and Next, because its demo pager
   never reached a first or last page - every link was href="#". A real pager
   does. Without this rule, Prev on page 1 would look exactly like a working
   button and do nothing on click: working rule 10, "looking right is not
   working". So the off state is drawn: faded, no hover, not clickable.

   The same rule covers the "..." gap that appears once the catalogue grows past
   a handful of pages. The gap is written as an <a> with no href so it inherits
   the copied circle styling above, then this rule switches it off.
   ============================================================================= */
.home1-tour-package-page .pagination-area .paginations .page-item.disabled a,
.home1-tour-package-page .pagination-area .paginations-button.disabled a {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   NOT A COPY - second rule added by this project.

   The template drew Prev and Next as 88px circles for the shop page, which is
   full width. This tour list has a sidebar taking a third of the width, so the
   two big circles sat at the far edges with the small 36px page numbers floating
   alone in the middle - the row read as three separate things instead of one
   control. Shrunk to match the page numbers so the pager reads as one row.

   max-width had to go, not just shrink: the template pins it at 88px, and the
   words Prev and Next need about 50px, so a hard ceiling of 36px would squeeze
   them onto two lines. Floor of 36, no ceiling, height 36 - the button becomes a
   rounded pill that grows to fit its word.

   The 36px floor left no breathing room: "Prev" is 35px of text inside a 37px
   button, so the button read as a tight ring hugging the word rather than a
   deliberate pill. 14px of side padding gives it room. The floor stays at 36 so
   the shape still matches the page-number circles when the word is short.

   Only the three size properties are overridden. The border, colour, font,
   radius, hover and transition all still come from the copied rule above, so the
   buttons keep the template's look exactly - they are just smaller. The phone
   rule (max-width 576px, 65px circles) is ALSO overridden by this rule, because
   it carries no media query and sits later in the file. That was NOT planned - it
   was noticed in testing, not designed. It happens to work: on a 390px phone the
   page numbers are 30px, so 36px Prev/Next sits correctly beside them. Reviewed
   against a screenshot and kept. Do not assume it was intended.
   ----------------------------------------------------------------------------- */
.home1-tour-package-page .pagination-area .paginations-button a {
  min-width: 36px;
  max-width: none;
  height: 36px;
  padding: 0 14px;
}