/* ═══════════════════════════════════════════════════════════════
   AAPS Ajax Filter Styles — v2.2
   Designed to complement Elementor 1440px design without override.
   ═══════════════════════════════════════════════════════════════ */

/* ── Loading Overlay ──────────────────────────────────────────── */
.aaps-loading-overlay {
  position        : absolute;
  inset           : 0;
  z-index         : 100;
  display         : none;
  align-items     : center;
  justify-content : center;
  background      : rgba(255,255,255,0.65);
  backdrop-filter : blur(2px);
  border-radius   : 4px;
  pointer-events  : all;
  transition      : opacity 0.2s ease;
}

.aaps-spinner {
  width         : 36px;
  height        : 36px;
  border        : 4px solid rgba(31,120,209,0.2);
  border-top    : 4px solid #1F78D1;
  border-radius : 50%;
  animation     : aaps-spin 0.8s linear infinite;
}
@keyframes aaps-spin { to { transform: rotate(360deg); } }

/* ── Dynamic pill row ─────────────────────────────────────────── */
.Frame1000005038 {
  display     : flex !important;
  flex-wrap   : wrap !important;
  gap         : 8px !important;
  width       : 100% !important;
  padding     : 8px 0 4px !important;
  overflow    : visible !important;
  box-sizing  : border-box !important;
}

/* ── Hide old Elementor placeholder buttons once pills are active ─
   JS sets display:none inline; this is the CSS fallback.          */
.aaps-types-options  [data-aaps-open] .elementor-widget-button,
.aaps-gender-options [data-aaps-open] .elementor-widget-button {
  display : none !important;
}

/* ── Individual pill button ───────────────────────────────────── */
.aaps-facet-btn {
  display         : inline-flex !important;
  align-items     : center !important;
  justify-content : flex-start !important;
  gap             : 8px !important;
  padding         : 8px 12px !important;
  border          : 1px solid #D5D7DA !important;
  border-radius   : 8px !important;
  background-color: #FFFFFF !important;
  cursor          : pointer !important;
  user-select     : none !important;
  transition      : border-color 0.15s ease, background 0.15s ease !important;
  box-sizing      : border-box !important;
  width           : auto !important;
  height          : auto !important;
  text-decoration : none !important;
}

.aaps-facet-btn:hover {
  border-color    : #A3A9B6 !important;
  background-color: #F8F9FA !important;
}

/* Active: border goes blue, bg stays white */
.aaps-facet-btn.aaps-active {
  border-color    : #1F78D1 !important;
  background-color: #FFFFFF !important;
}

/* ── Radio circle wrapper ─────────────────────────────────────── */
.aaps-facet-btn .Input {
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
  width           : 16px !important;
  height          : 16px !important;
  flex-shrink     : 0 !important;
}

.aaps-facet-btn .CheckboxBase {
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
  width           : 16px !important;
  height          : 16px !important;
  border-radius   : 50% !important;
}

/* Active filled circle */
.aaps-facet-btn.aaps-active .CheckboxBase {
  background-color: #1F78D1 !important;
  width           : 16px !important;
  height          : 16px !important;
  border-radius   : 50% !important;
  position        : relative !important;
}

/* Inner white dot */
.aaps-facet-btn.aaps-active .CheckboxBase .Check {
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
  width           : 6px !important;
  height          : 6px !important;
  background-color: #FFFFFF !important;
  border-radius   : 50% !important;
}

.aaps-facet-btn.aaps-active .CheckboxBase .Check svg {
  display: none !important;
}

/* ── Pill label ───────────────────────────────────────────────── */
.aaps-facet-btn .Text {
  font-family : 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size   : 14px !important;
  line-height : 20px !important;
  color       : #414651 !important;
  font-weight : 500 !important;
  white-space : nowrap !important;
}
.aaps-facet-btn .Text.font-bold   { font-weight: 700 !important; }
.aaps-facet-btn .Text.font-normal { font-weight: 500 !important; }

/* ── Facet Collapse / Expand ──────────────────────────────────── */
/* The options rows carry an Elementor min-height/fixed height; min-height beats
   max-height, so we must zero min-height/height/padding/margin too — otherwise
   the section visually stays open even with max-height:0. */
.aaps-facet-collapsed {
  overflow   : hidden !important;
  max-height : 0 !important;
  min-height : 0 !important;
  height     : 0 !important;
  opacity    : 0 !important;
  margin-top : 0 !important;
  margin-bottom : 0 !important;
  padding-top : 0 !important;
  padding-bottom : 0 !important;
  border-width : 0 !important;
  transition : max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease !important;
}

/* ── Age Slider ───────────────────────────────────────────────── */
/* Make the .elementor-widget-container that wraps <input> + <span>
   a horizontal flex row. JS also sets this inline but CSS backs it up. */
.aaps-age-options .elementor-widget-html .elementor-widget-container {
  display         : flex !important;
  flex-direction  : row !important;
  flex-wrap       : nowrap !important;
  align-items     : center !important;
  gap             : 12px !important;
  width           : 100% !important;
}

/* Hide the static "Year" heading widget below the slider */
.aaps-age-options [data-aaps-open] .elementor-widget-heading {
  display : none !important;
}

.yearRangeSlider {
  -webkit-appearance : none;
  appearance         : none;
  flex               : 1 !important;
  height             : 8px !important;
  border-radius      : 100px !important;
  outline            : none;
  cursor             : pointer;
  margin             : 0 !important;
  width              : auto !important;
  min-width          : 190px !important;
  background: linear-gradient(
    to right,
    #1F78D1 0%,
    #1F78D1 var(--fill-pct, 100%),
    #EAECF0 var(--fill-pct, 100%),
    #EAECF0 100%
  ) !important;
}

.yearRangeSlider::-webkit-slider-thumb {
  -webkit-appearance : none;
  appearance         : none;
  width              : 20px !important;
  height             : 20px !important;
  border-radius      : 50% !important;
  background         : #FFFFFF !important;
  border             : 2px solid #1F78D1 !important;
  box-shadow         : 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06) !important;
  cursor             : grab;
  transition         : transform 0.1s ease;
}
.yearRangeSlider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.yearRangeSlider::-moz-range-thumb {
  width              : 20px !important;
  height             : 20px !important;
  border-radius      : 50% !important;
  background         : #FFFFFF !important;
  border             : 2px solid #1F78D1 !important;
  box-shadow         : 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06) !important;
  cursor             : grab;
}

.yearCounter {
  flex-shrink : 0 !important;
  font-family : 'Inter', -apple-system, sans-serif !important;
  font-size   : 14px !important;
  white-space : nowrap !important;
  display     : inline-flex !important;
  align-items : center !important;
  gap         : 4px !important;
  min-width   : auto !important;
  text-align  : right !important;
  justify-content: flex-end !important;
}

.yearCounter .year-val {
  font-weight : 600 !important;
  color       : #1D2939 !important;
}

.yearCounter .year-unit {
  font-weight : 400 !important;
  color       : #475467 !important;
}

/* ── No Results / Error ───────────────────────────────────────── */
.aaps-no-results {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 100% !important;
  min-height      : 200px;
  background      : #f8f9fa;
  border-radius   : 4px;
}
.aaps-error { width: 100% !important; }

/* ── Carousel widget positioning ──────────────────────────────── */
.elementor-widget-loop-carousel {
  position : relative !important;
}

/* ── "All" pill weight ────────────────────────────────────────── */
.aaps-facet-btn[data-all="true"] { font-weight: 600; }

/* ── Wishlist Buttons ─────────────────────────────────────────── */
#aapsWishlist, .aaps-wishlist-btn {
  background-color: transparent !important;
  border          : none !important;
  padding         : 0 !important;
  box-shadow      : none !important;
  cursor          : pointer !important;
  display         : inline-flex !important;
  align-items     : center !important;
  justify-content : center !important;
  transition      : transform 0.2s ease !important;
  width           : auto !important;
  height          : auto !important;
}
#aapsWishlist:hover,  .aaps-wishlist-btn:hover  { transform: scale(1.08) !important; }
#aapsWishlist:active, .aaps-wishlist-btn:active { transform: scale(0.95) !important; }

/* ── Wishlist page (carousel inside .aaps-wishlist-grid) ──────── */
.aaps-wishlist-grid .swiper-wrapper {
  align-items : stretch !important;
}
.aaps-wishlist-grid .aaps-no-results {
  display         : flex !important;
  align-items     : center !important;
  justify-content : center !important;
}

/* ── Hide scrollbar buttons (up/down arrows) and style scrollbar ── */
.aaps-types-options *::-webkit-scrollbar-button,
.aaps-gender-options *::-webkit-scrollbar-button,
.aaps-age-options *::-webkit-scrollbar-button {
  display: none !important;
}

.aaps-types-options *::-webkit-scrollbar,
.aaps-gender-options *::-webkit-scrollbar,
.aaps-age-options *::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.aaps-types-options *::-webkit-scrollbar-track,
.aaps-gender-options *::-webkit-scrollbar-track,
.aaps-age-options *::-webkit-scrollbar-track {
  background: transparent !important;
}

.aaps-types-options *::-webkit-scrollbar-thumb,
.aaps-gender-options *::-webkit-scrollbar-thumb,
.aaps-age-options *::-webkit-scrollbar-thumb {
  background: #D5D7DA !important;
  border-radius: 100px !important;
}

.aaps-types-options *::-webkit-scrollbar-thumb:hover,
.aaps-gender-options *::-webkit-scrollbar-thumb:hover,
.aaps-age-options *::-webkit-scrollbar-thumb:hover {
  background: #A4A7AE !important;
}

/* Firefox scrollbar style */
.aaps-types-options *,
.aaps-gender-options *,
.aaps-age-options * {
  scrollbar-width: thin !important;
  scrollbar-color: #D5D7DA transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   "Showing {Category} X / Y" message
   The element itself is a styled Elementor heading (.aaps-showing);
   we only emphasise the dynamic numbers here.
   ═══════════════════════════════════════════════════════════════ */
.aaps-showing { white-space: nowrap; }
/* Only the CURRENT number is emphasised (bold, dark). The separator and the
   TOTAL inherit the heading's own weight/colour so "/ 10" reads like the label. */
.aaps-showing .aaps-showing-current {
  font-weight: 700 !important;
  color: #1D2939 !important;
}
.aaps-showing .aaps-showing-total {
  font-weight: inherit !important;
  color: inherit !important;
}

/* Make the "Showing …" heading identical on every page (cats, dogs, wishlist).
   Only the wishlist heading had been assigned Elementor's global typography
   (83cfd19) + heading color (d2350d8); the cats/dogs heading was left on the
   smaller default. Re-apply the same global tokens to ALL .aaps-showing headings
   so they render the same. (References the same site-wide Elementor variables,
   so it always tracks the design.) */
.aaps-showing .elementor-heading-title {
  font-family:    var( --e-global-typography-83cfd19-font-family ), Sans-serif !important;
  font-size:      var( --e-global-typography-83cfd19-font-size ) !important;
  font-weight:    var( --e-global-typography-83cfd19-font-weight ) !important;
  line-height:    var( --e-global-typography-83cfd19-line-height ) !important;
  letter-spacing: var( --e-global-typography-83cfd19-letter-spacing ) !important;
  color:          var( --e-global-color-d2350d8 ) !important;
}

/* On filter pages (cats / dogs / adoption-hub) the "Showing …" heading ships
   ABOVE the results grid. The wishlist page instead shows the count BELOW the
   results, right-aligned by the pagination. Mirror that here: the results column
   is an Elementor flex-column container and the heading + loop grid are direct
   children, so flex `order` drops the heading beneath the grid. (Scoped to
   .aaps-filter-instance, so the wishlist's own layout is untouched.) */
.aaps-filter-instance .aaps-showing {
  order: 99 !important;
  align-self: flex-end !important;
  margin-top: 8px !important;
}
.aaps-filter-instance .aaps-showing .elementor-heading-title {
  text-align: right !important;
}

/* ═══════════════════════════════════════════════════════════════
   SET 2 — grid layout variant (scoped to .aaps-grid-layout)
   Wired only on the grid page so Set 1 (carousel) is untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Gender: Male / Female fill the full width of the sidebar (two equal columns).
   Switch to `grid-template-columns: 1fr;` if you want them stacked instead. */
.aaps-grid-layout .aaps-gender-options .Frame1000005038 {
  display               : grid !important;
  grid-template-columns : 1fr 1fr !important;
  gap                   : 8px !important;
}
.aaps-grid-layout .aaps-gender-options .Frame1000005038 .aaps-facet-btn {
  width           : 100% !important;
  justify-content : flex-start !important;
}

/* Checked types get a distinct filled UI (vs the white pill of Set 1) */
.aaps-grid-layout .aaps-types-options .aaps-facet-btn.aaps-active {
  background-color : #EFF6FF !important;
  border-color     : #1F78D1 !important;
}
.aaps-grid-layout .aaps-types-options .aaps-facet-btn.aaps-active .Text {
  color : #1F78D1 !important;
}

/* Safety: our rendered cards carry a leftover `swiper-slide` class; inside a
   CSS-grid loop container that class must not force a flex width. */
.elementor-widget-loop-grid .elementor-loop-container .swiper-slide {
  width      : auto !important;
  min-width  : 0 !important;
  flex-shrink: 1 !important;
  margin     : 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile filter popup (≤1024px). Desktop is untouched — these
   elements are injected by JS and hidden by default.
   ═══════════════════════════════════════════════════════════════ */
.aaps-mobile-bar,
.aaps-filter-backdrop { display: none; }
.aaps-panel-header,
.aaps-panel-apply { display: none; }
html.aaps-modal-lock { overflow: hidden; }

@media (max-width: 1024px) {
  /* Stack the mobile "Filters" bar on top, then the results below. The filter
     sidebar itself is hidden (shown as the popup). NEVER clamp the instance height
     here — it must grow to fit the carousel/grid, or the carousel spills out of
     its section. */
  .aaps-filter-instance {
    display: flex !important;
    flex-direction: column !important;
    /* NEVER wrap: on a column flexbox, flex-wrap:wrap breaks children into
       multiple side-by-side columns (the mobile bar lands in col 1 and the
       carousel wraps into col 2, shoving it off-screen). Elementor's kit sets
       --flex-wrap-mobile:wrap, so we must force nowrap here. */
    flex-wrap: nowrap !important;
  }

  /* The desktop filter sidebar is hidden on mobile, but Elementor keeps the
     results column at its desktop width (~2/3), leaving an empty gap beside the
     carousel. Stack the inner wrapper and force its containers full-width so the
     pet card spans the whole screen. Covers Home (boxed: .e-con-inner > .e-con)
     and Cats (flat: instance > .e-con). */
  .aaps-filter-instance > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .aaps-filter-instance > .e-con-inner > .e-con,
  .aaps-filter-instance > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Normalise the carousel mobile "offset" for EVERY filter carousel. Elementor
     stores the offset as `--swiper-offset-size` and renders it as padding on the
     .swiper viewport; Swiper then sizes each slide to (clientWidth − offset). The
     Cats carousel sets 51.22px on mobile (→ 1 card + small peek), but a Dogs
     carousel duplicated without its own mobile value inherits the DESKTOP 270px,
     which squishes cards to ~104px (showing 3+). Forcing the var here makes all
     filter carousels show exactly 1 card + peek on mobile, regardless of the
     per-widget DB setting (which is lost on Elementor re-save). */
  .aaps-filter-instance .elementor-widget-loop-carousel {
    --swiper-offset-size: 51.22px !important;
    --swiper-slides-to-display: 1 !important;
  }

  /* Reproduce Elementor's mobile carousel "offset" (peek of the next card).
     reinitSwiper() runs Swiper with slidesPerView:'auto' and sets --aaps-slide-peek
     to (offset + spacing); the slide then fills the width minus that, so exactly
     the offset amount of the next card peeks in. Only active on carousels whose
     Elementor settings define a mobile offset (JS adds .aaps-peek). */
  .aaps-filter-instance .elementor-widget-loop-carousel.aaps-peek .swiper-slide {
    width: calc(100% - var(--aaps-slide-peek, 0px)) !important;
    box-sizing: border-box !important;
  }

  .aaps-mobile-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* MUST be auto, not 100%: on a column flexbox flex-basis is the MAIN
       (vertical) axis, so flex:0 0 100% would make the bar fill the entire
       instance height and shove the carousel off-screen. */
    flex: 0 0 auto;
    margin-bottom: 56px;
  }
  .aaps-mobile-title {
    flex: 1 1 auto; min-width: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px; font-weight: 400; color: #475467; line-height: 1.45;
  }
  /* Neutral, clean button — forced with !important + extra specificity because an
     Elementor/kit button rule was leaking the site accent (pink) onto it. */
  .aaps-filter-instance .aaps-mobile-bar .aaps-mobile-filter-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px 16px !important; border: 1px solid #D5D7DA !important; border-radius: 8px !important;
    background: #fff !important; color: #414651 !important; cursor: pointer; line-height: 1 !important;
    font-family: 'Inter', -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important; white-space: nowrap !important;
    margin-right: 16px;
  }
  .aaps-filter-instance .aaps-mobile-bar .aaps-mobile-filter-btn span { color: #414651 !important; }
  .aaps-filter-instance .aaps-mobile-bar .aaps-mobile-filter-btn svg { display: block; }
  .aaps-filter-instance .aaps-mobile-bar .aaps-mobile-filter-btn svg path { stroke: #414651 !important; }
  .aaps-filter-instance .aaps-mobile-bar .aaps-mobile-filter-btn:hover {
    background: #F8F9FA !important; border-color: #A3A9B6 !important;
  }

  /* Inline filter sidebar is hidden on mobile until the popup opens */
  .aaps-filter-instance .aaps-filter-panel { display: none !important; }

  /* Transparent click-catcher behind the popup. Figma shows NO dimming — the
     carousel/promo stay fully visible; this layer only catches outside taps to
     close the popup (JS binds .aaps-filter-backdrop click -> close). */
  .aaps-filter-backdrop {
    position: fixed; inset: 0; background: transparent;
    z-index: 99998; display: none;
  }
  .aaps-filter-instance.aaps-filter-open .aaps-filter-backdrop { display: block; }

  /* When opened, the filter is a DROPDOWN PANEL anchored just below the Filters
     bar, overlaying the carousel (per Figma) — not a bottom sheet. It is
     absolutely positioned inside the instance (which is position:relative) and
     sized to its content. */
  .aaps-filter-instance.aaps-filter-open .aaps-filter-panel {
    display: flex !important; flex-direction: column !important;
    position: absolute !important;
    top: 60px !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: calc(100dvh - 80px); overflow-y: auto; overflow-x: hidden;
    background: #fff; z-index: 99999;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    padding: 16px 20px 0 !important;
    box-shadow: 0 12px 32px rgba(16,24,40,0.16);
    animation: aaps-drop 0.2s ease;
  }
  @keyframes aaps-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* Header row: "Filters" on the left, "Clear all" pinned top-right. The ×
     close is hidden (close by tapping outside / Filters / Esc) to match Figma. */
  .aaps-filter-open .aaps-filter-panel .aaps-panel-header {
    display: flex; align-items: center;
    padding-bottom: 14px; margin-bottom: 0; border-bottom: 1px solid #EAECF0;
  }
  .aaps-panel-title { font-family: 'Inter', -apple-system, sans-serif; font-size: 20px; font-weight: 700; color: #181D27; }
  .aaps-filter-open .aaps-filter-panel .aaps-panel-close { display: none !important; }

  /* "Clear all" (Elementor button) pinned to the top-right, aligned with the
     "Filters" title, with a reset icon — per Figma. The container that held it
     (+ the hidden duplicate "Filters" heading) is collapsed to zero. */
  .aaps-filter-open .aaps-filter-panel .aaps-panel-head {
    min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    /* static so the absolutely-positioned Clear all anchors to the PANEL (which
       is positioned) and lands in the header row, not this container. Elementor
       containers are position:relative by default, which is what mis-anchored it. */
    position: static !important;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-clear-all {
    position: absolute !important; top: 16px !important; right: 20px !important;
    margin: 0 !important; z-index: 3;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-clear-all .elementor-button {
    padding: 0 !important; background: transparent !important; min-height: 0 !important;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-clear-all .elementor-button-text {
    display: inline-flex !important; align-items: center; gap: 6px;
    color: #535862 !important; font-size: 14px !important; font-weight: 500 !important;
  }
  /* .aaps-filter-open .aaps-filter-panel .aaps-clear-all .elementor-button-text::before {
    content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") no-repeat center / contain;
  } */

  /* Facet options use their natural WRAPPING bordered-pill layout (All, Bonded
     Pairs, Kittens… wrap across rows; Male/Female sit side-by-side) — NOT a
     full-width vertical stack. */
  .aaps-filter-open .aaps-filter-panel .Frame1000005038 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .aaps-filter-open .aaps-filter-panel .Frame1000005038 .aaps-facet-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  /* CTA buttons (Find Your Best Match / Get Started) are full-bleed and stacked
     at the bottom of the panel, edge-to-edge (offset the panel's side+bottom
     padding) per Figma. */
  .aaps-filter-open .aaps-filter-panel .aaps-panel-cta {
    margin: 16px -20px 0 !important; width: auto !important;
    /* display:flex covers `e-con-full` CTA containers (no .e-con-inner); for
       boxed containers the inner below does the stacking. */
    display: flex !important; flex-direction: column !important; gap: 0 !important;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-panel-cta > .e-con-inner {
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    max-width: none !important; width: 100% !important; padding: 0 !important;
  }
  .aaps-filter-open .aaps-filter-panel .elementor-widget-button:not(.aaps-clear-all) {
    width: 100% !important;
  }
  .aaps-filter-open .aaps-filter-panel .elementor-widget-button:not(.aaps-clear-all) .elementor-button {
    width: 100% !important; border-radius: 0 !important;
  }

  /* Section header rows ("Types"/"Gender"/"Age" + collapse chevron). On mobile
     these containers default to column, dropping the chevron under the title;
     force them back to a single row with the chevron pinned right (per Figma). */
  .aaps-filter-open .aaps-filter-panel .aaps-facet-head {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important;
    width: 100% !important; gap: 8px !important;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-facet-head > .elementor-widget-heading {
    flex: 1 1 auto !important; width: auto !important;
  }
  .aaps-filter-open .aaps-filter-panel .aaps-facet-head > .elementor-widget-button {
    flex: 0 0 auto !important; width: auto !important;
  }
  /* Section titles */
  .aaps-filter-open .aaps-filter-panel .aaps-facet-title .elementor-heading-title {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 17px !important; font-weight: 700 !important; color: #181D27 !important;
  }

  /* Inside the popup the options rows (.aaps-facet-body) must show ALL pills at
     natural height — override the grid-sidebar scroll clamp (which otherwise hides
     rows). The Types options row carries a fixed max-height + overflow scroll from
     the Elementor design; clear it (and the gender/age rows) so every pill is
     visible without an inner scrollbar. Class-based so it covers every instance
     (home cats/dogs, cats page, adoption-hub cats/dogs). */
  .aaps-filter-open .aaps-filter-panel [data-aaps-open]:not(.aaps-facet-collapsed),
  .aaps-filter-open .aaps-filter-panel .aaps-facet-body {
    overflow: visible !important; max-height: none !important; height: auto !important;
  }
}

/* Enforce vertical scrolling on options rows when open, and proper clipping when collapsed */
.aaps-types-options [data-aaps-open]:not(.aaps-facet-collapsed),
.aaps-gender-options [data-aaps-open]:not(.aaps-facet-collapsed),
.aaps-age-options [data-aaps-open]:not(.aaps-facet-collapsed) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── Client-side grid pagination (loop-grids with Elementor Posts Per Page +
   pagination configured, e.g. adoption hub). The filter renders ALL matches in
   one response; aaps-filter.js hides the cards beyond the current page and
   drives the widget's own prev/next nav (rebuilt as <button>s carrying the
   designer's 48px SVG arrows — strip native button chrome so only they show). */
.aaps-page-hidden {
  display: none !important;
}
nav.elementor-pagination button.page-numbers {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}
nav.elementor-pagination button.page-numbers:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Bottom pager row (per Figma): arrows bottom-LEFT, "Showing X / Y"
   bottom-RIGHT, on one row BELOW the "Find Your Best Match" banner. JS appends
   it after the banner and moves the nav + .aaps-showing heading in — outside
   the loop-grid widget, so Elementor's widget-scoped pagination rules (the
   160px pagination_spacing_top gap, the 8px arrow gap) no longer reach the nav;
   the row restores the arrow gap itself. margin-left:auto (not space-between)
   keeps "Showing" pinned right even while the nav is hidden on one-page results. */
.aaps-pager-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  gap: 16px;
}
.aaps-pager-row nav.elementor-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aaps-pager-row .aaps-showing {
  margin-left: auto;
  align-self: center !important;
  margin-top: 0 !important;
}

/* ── Pet card meta line: "Breed • Gender" on one line ───────────────────────
   Template 1607. The meta row (7c1030e — 17781f5 is the hidden/legacy variant)
   holds three heading widgets in a flex row: the blue breed/type label
   (first child), a "•" separator, and the gender label.

   Two problems out of the box: (1) the row is `nowrap` on desktop, so a long
   breed can't push the gender onto the next line — it stays squashed beside it;
   (2) Elementor's container-widget system forces each heading to width:0%/100%,
   collapsing the gender box so "Male" breaks mid-word as "Mal e".

   Fix: let the row wrap, size each heading to its own content, keep the
   separator + gender on one unbroken line, and let ONLY the breed label wrap.
   Result — short breeds (e.g. "DMH • Female") sit on one line; long breeds
   ("Staffordshire Bull Terrier x Labrador Retriever") take the full width and
   the "• Male" cleanly drops beneath. Scoped to the meta row, so it applies to
   both the AJAX filter cards and the native loop-item / related-pets cards. */
/* Row wraps (so "• Male" can drop below a long breed instead of squashing).
   Set on the element AND its .e-con-inner to cover full + boxed containers. */
.elementor-element-7c1030e,
.elementor-element-7c1030e > .e-con-inner,
.elementor-element-17781f5,
.elementor-element-17781f5 > .e-con-inner {
  flex-wrap : wrap !important;
  row-gap   : 2px !important;
}
/* Each heading widget sizes to its own content (kills the width:0%/100%
   collapse). Descendant combinator → works whether or not an .e-con-inner
   wrapper sits between the container and the headings. */
.elementor-element-7c1030e .elementor-widget-heading,
.elementor-element-17781f5 .elementor-widget-heading {
  width    : auto !important;
  max-width: 100% !important;
  flex     : 0 0 auto !important;
}
/* Separator + gender never break mid-word ("Mal e") */
.elementor-element-7c1030e .elementor-widget-heading .elementor-heading-title,
.elementor-element-17781f5 .elementor-widget-heading .elementor-heading-title {
  white-space: nowrap !important;
}
/* …but the breed/type label (first heading) is allowed to wrap */
.elementor-element-7c1030e .elementor-widget-heading:first-child .elementor-heading-title,
.elementor-element-17781f5 .elementor-widget-heading:first-child .elementor-heading-title {
  white-space: normal !important;
}

/* ═══════════════════════════════════════════════════════════════
   Fast Facts popup
   A floating card anchored above (or below) a pet card's "Fast Facts"
   button, with a pointer aimed at it. Appended to <body> (fixed) so it
   escapes the carousel/card overflow clipping. JS: aaps-filter.js → FastFacts.
   ═══════════════════════════════════════════════════════════════ */
.aaps-ff-pop {
  position        : fixed;
  z-index         : 100000;
  left            : 0;
  top             : 0;
  width           : 340px;
  max-width       : calc(100vw - 24px);
  box-sizing      : border-box;
  padding         : 30px 32px;
  background      : #fff;
  border-radius   : 30px;
  box-shadow      : 0 14px 44px rgba(0, 40, 56, 0.18), 0 2px 8px rgba(0, 40, 56, 0.08);
  color           : #414651;
  font-family     : "ABC Diatype Plus Variable Unlicensed Trial", "Helvetica Neue", Arial, sans-serif;
  opacity         : 0;
  transform       : translateY(6px) scale(0.98);
  transform-origin: bottom center;
  transition      : opacity .14s ease, transform .14s ease;
  pointer-events  : none;
  will-change     : transform, opacity;
}
.aaps-ff-pop.aaps-ff-open {
  opacity        : 1;
  transform      : translateY(0) scale(1);
  pointer-events : auto;
}
.aaps-ff-pop.aaps-ff-below { transform-origin: top center; }

/* Info rows: "Label • Value", left-aligned. */
.aaps-ff-rows {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}
.aaps-ff-row {
  display        : flex;
  align-items    : baseline;
  gap            : 8px;
  font-size      : 18px;
  line-height    : 28px;
  font-weight    : 500;
  letter-spacing : 0;
  color          : #414651;
}
.aaps-ff-label { white-space: nowrap; }
.aaps-ff-sep   { color: #414651; flex: 0 0 auto; }
.aaps-ff-val   { word-break: break-word; }
.aaps-ff-empty { color: #6B7A82; }

/* Pointer aimed at the Fast Facts button (a clean triangle, no shadow seam).
   `left` is set per-open by JS so it tracks the button centre. */
.aaps-ff-arrow {
  position     : absolute;
  width        : 0;
  height       : 0;
  bottom       : -10px;                       /* popup is ABOVE the button → point down */
  margin-left  : -9px;
  border-left  : 9px solid transparent;
  border-right : 9px solid transparent;
  border-top   : 10px solid #fff;
}
.aaps-ff-pop.aaps-ff-below .aaps-ff-arrow {    /* popup is BELOW the button → point up */
  bottom      : auto;
  top         : -10px;
  border-top  : none;
  border-bottom: 10px solid #fff;
}

@media (max-width: 767px) {
  /* Keep the Figma type scale; trim padding/radius a touch so the card still
     fits comfortably on small screens (long values wrap via word-break). */
  .aaps-ff-pop  { padding: 26px 24px; border-radius: 24px; }
  .aaps-ff-rows { gap: 10px; }
}