/* ─────────────────────────────────────────────────────────────────────────────
   Pagination under the puppy grid, the gentle snap onto it, and the "More
   puppies on the next page" reminder bar. Behaviour lives in
   /js/pagination-ux.js; the markup comes from renderPagination() on each page.

   One set: #pagination, directly under the last card, in one subtle card.
   (Before v485 a second copy, #paginationBottom, sat at the very bottom of
   the page; it has been removed from every page. Its selectors below are
   left in place and simply match nothing.)

   This file also lays out everything else below the cards; see "Below the
   cards" at the end.

   Layout, centred under the last card:
     ← Previous   Next →        one row, never stacked, even at 320px
         1  2  3  …  55          page numbers, current page filled
          Page 1 of 55           small brown line
   ───────────────────────────────────────────────────────────────────────────── */

#pagination.pagination,
#paginationBottom.pagination {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 14px;
  padding-top: 8px;
}

:is(#pagination, #paginationBottom) .pg-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}
:is(#pagination, #paginationBottom) .pg-nav .pg-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
  min-height: 48px;
  padding: 11px 10px;
  border: 2px solid var(--gold, #C9893A);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s;
}
/* Dark brown on gold (5.1:1) and dark gold on cream, for WCAG AA contrast;
   white on this gold was 2.9:1. */
:is(#pagination, #paginationBottom) .pg-nav .pg-next {
  background: var(--gold, #C9893A);
  color: #3A2010;
  box-shadow: 0 4px 14px rgba(201,137,58,.35);
}
:is(#pagination, #paginationBottom) .pg-nav .pg-prev {
  background: transparent;
  color: #8f5c1f;
}
:is(#pagination, #paginationBottom) .pg-nav .pg-next:hover:not(:disabled) {
  background: #E8B86A; border-color: var(--gold, #C9893A); color: #3A2010;
}
:is(#pagination, #paginationBottom) .pg-nav .pg-prev:hover:not(:disabled) {
  background: rgba(201,137,58,.1); border-color: var(--gold, #C9893A); color: #8f5c1f;
}
:is(#pagination, #paginationBottom) .pg-nav .pg-btn:disabled {
  opacity: 1;
  background: #ECE6DE;
  border-color: #D9D1C7;
  color: #A69C91;
  box-shadow: none;
  cursor: not-allowed;
}

:is(#pagination, #paginationBottom) .pg-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
:is(#pagination, #paginationBottom) .pg-nums .pg-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
}
:is(#pagination, #paginationBottom) .pg-nums .pg-btn.cur {
  background: var(--gold, #C9893A);
  border-color: var(--gold, #C9893A);
  color: #3A2010;
}
:is(#pagination, #paginationBottom) .pg-ellipsis { padding: 0 2px; color: var(--brown-mid, #7B4A22); }

:is(#pagination, #paginationBottom) .pg-count {
  margin: -4px 0 0;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown-mid, #7B4A22);
}

@media (max-width: 360px) {
  :is(#pagination, #paginationBottom) .pg-nav { gap: 8px; }
  :is(#pagination, #paginationBottom) .pg-nav .pg-btn { font-size: 0.92rem; padding: 10px 6px; }
}


/* ── The box around the set ──
   A cream card with a light gold edge (v485: 1px instead of the 2px ring). Only drawn
   once a set has buttons in it: with a single page of puppies the containers
   stay empty and nothing shows. Both are hidden by the loading screen
   (body.initial-listings-loading .pagination), so the box never appears or
   resizes while the page is still settling. */
:is(#pagination, #paginationBottom).pagination:not(:empty) {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 440px;
  margin: 4px auto 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(201,137,58,.45);
  border-radius: 16px;
  background: #FFF8EC;
  box-shadow: 0 2px 10px rgba(58,32,16,.06);
}
#paginationBottom.pagination:not(:empty) { margin: 28px auto 22px; }
#paginationBottom.pagination:empty { display: none; }

/* ── Gentle snap ──
   Native CSS scroll snapping only, and the pagination block is the one snap
   point on the page, so nothing else is pulled. Proximity means a fast flick
   that ends near the buttons settles with them centred, while a continued swipe
   carries straight on past. The page-level rule is switched on by a class that
   /js/pagination-ux.js sets only once the puppies have loaded, no popup is open
   and the block is out of view, so turning it on never pulls the page by
   itself. Nothing ever blocks or cancels scrolling. */
html.bp-pg-snap {
  scroll-snap-type: y proximity;
  scroll-padding-top: 68px;
}
html.bp-pg-snap #pagination.pagination {
  scroll-snap-align: center;
}

/* ── Reminder bar ──
   Slides up from the bottom once the visitor has scrolled past the pagination
   without using it. It sits above the chat launcher and the Your Puppies button
   (both about 76px up from the bottom edge) and rides up with them when the
   cookie bar sets --bp-launcher-offset, so it never covers any of the three. */
.bp-pg-remind {
  position: fixed;
  left: 50%;
  /* v485: lifted above the cookie bar with transform rather than bottom, so
     the bar appearing never counts as a layout shift. */
  bottom: 88px;
  z-index: 580;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 4px 4px 4px 6px;
  border: 1.5px solid #C9893A;
  border-radius: 999px;
  background: #3A2010;
  box-shadow: 0 8px 24px rgba(35,18,8,.35);
  font-family: 'Nunito', sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(24px - var(--bp-launcher-offset, 0px)));
  transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .bp-pg-remind { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
.bp-pg-remind.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, calc(0px - var(--bp-launcher-offset, 0px)));
  transition: opacity .25s ease, transform .3s ease, visibility 0s;
}
.bp-pg-remind-go {
  padding: 8px 10px 8px 12px;
  border: 0;
  background: none;
  color: #FAF7F0;
  font: 800 14px/1.2 'Nunito', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bp-pg-remind-go span { color: #E8B86A; }
.bp-pg-remind-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #E8B86A;
  font: 700 18px/1 'Nunito', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bp-pg-remind-x:hover { background: rgba(255,255,255,.18); }
body.initial-listings-loading .bp-pg-remind { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bp-pg-remind, .bp-pg-remind.show { transition: none; }
}


/* ── Below the cards (v485) ──
   Top to bottom, on every puppy grid page:
     1. #pagination                  (the one pager, above)
     2. [data-reviews-carousel]      "What Families Are Saying" (/reviews-carousel.js)
     3. .bp-delivery-video           "Watch a Best Puppies delivery day" facade,
        or section.breed-videos      on breed pages (/breed-videos.js)
     4. .bp-search-more              the one SEARCH PUPPIES box (/js/search-more.js)
     5. .bp-popular-line             "Popular breeds:" text links
   then the page's own write-up (breed and location pages) and the footer.
   Every section sits on the page background with no box of its own beyond
   its one card, and the same gap (--bp-below-gap) separates each of them.
   All of them are siblings that come after #pagination, which is what the
   "#pagination ~" selectors key off; the reviews carousel is lifted under the
   loading video while the page loads, and these rules then let it be. */
:root { --bp-below-gap: 24px; }
@media (min-width: 768px) { :root { --bp-below-gap: 32px; } }

#pagination ~ [data-reviews-carousel] {
  display: block;
  margin: var(--bp-below-gap) auto 0;
}
/* Room held for the carousel before /reviews-carousel.js builds it, so the
   video and everything under it never jump down. Matches the built height
   (about 500px on a 390px phone, 476px from 640px up). */
#pagination ~ [data-reviews-carousel]:empty { min-height: 500px; }
@media (min-width: 640px) { #pagination ~ [data-reviews-carousel]:empty { min-height: 476px; } }

/* The video facade holds its own 9:16 box (/css/delivery-day-video.css). */
#pagination ~ .bp-delivery-video {
  margin: var(--bp-below-gap) auto 0;
  padding: 0 16px;
}
#pagination ~ section.breed-videos {
  margin-top: var(--bp-below-gap);
  padding-top: 0;
  padding-bottom: 0;
}

#pagination ~ .bp-search-more {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 440px;
  margin: var(--bp-below-gap) auto 0;
  padding: 14px 16px;
  border: 1px solid rgba(58,32,16,.10);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(58,32,16,.06);
}

.bp-popular-line {
  box-sizing: border-box;
  max-width: 720px;
  margin: var(--bp-below-gap) auto;
  padding: 0 16px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.7;
  color: #7a5c45;
}
.bp-popular-line .bp-popular-label { font-weight: 800; }
.bp-popular-line a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(122,92,69,.35);
  text-underline-offset: 2px;
  white-space: nowrap;
}
.bp-popular-line a:hover { color: #3A2010; text-decoration-color: currentColor; }
body.initial-listings-loading .bp-popular-line { display: none !important; }

/* ── Cookie banner ──
   While the slim cookie bar shows, the page's inline cookie script sets
   --bp-launcher-offset to the bar's height on <html>. The page gets the same
   room at the bottom, so the bar never sits over the pager or anything else
   once the visitor scrolls to the end, and a scroll that brings the pager into
   view keeps it clear of the bar. */
body { padding-bottom: var(--bp-launcher-offset, 0px); }
html { scroll-padding-bottom: var(--bp-launcher-offset, 0px); }