/*
 * Pet list filters: dropdown row, active-filter chips, updating state.
 *
 * Used by the Flow and Modern Contemporary pet list layouts. Colors, fonts and
 * corner shape come only from the theme config variables
 * (custom_design/templates/websitetheme_template.html), so every tenant's
 * filters match its own buttons. See docs/pet-list-filters.md.
 *
 * Mobile first: base rules target phones, then `min-width` queries widen.
 */

/* ---------------------------------------------------------------- panel -- */

.pet-filters .accordion-body {
   padding: 8px 0 0;
}

/* Desktop: no box -- an open row of dropdowns lined up with the pet cards'
   edges (the grid's `px-2` + row gutter puts them 8px in), closed by a thin
   divider, with room before the first row of pets. The spacing sits on
   `.pet-filters__grid` because the accordion body's `px-0 pt-0` utilities are
   `!important`. */
@media (min-width: 768px) {
   .pet-filters {
      margin-bottom: 24px;
   }

   .pet-filters .filter-accodian-item {
      background: transparent;
   }
}

/* Phones: two compact columns, so many filters take few rows; `auto-fit`
   lets a lone filter span the row. Wider: a wrapping row of same-width
   dropdowns, left-aligned, so three filters do not stretch across the page. */
.pet-filters__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 10px;
   padding: 10px 0 14px;
}

/* Phones: line the filters up with the pet cards' edges (8px in, like the
   grid's `px-2`, instead of the container's 12px), let an odd last dropdown
   span the row rather than leave a half-empty one, and soften the theme's
   full-strength divider under the panel to the same tint desktop uses. */
@media (max-width: 767.98px) {
   .pet-filters.container {
      padding-left: 8px;
      padding-right: 8px;
   }

   .pet-filters__grid > .pet-filters__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
   }

   .pet-filters.filter-accodian .filter-accodian-item {
      border-bottom-color: var(--primary-color-12-opacity);
   }
}

@media (min-width: 768px) {
   .pet-filters__grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 8px;
      padding: 8px 0 20px;
      border-bottom: 1px solid var(--primary-color-12-opacity);
   }

   .pet-filters__grid > .pet-filters__item {
      flex: 0 1 240px;
   }
}

.pet-filters__item {
   min-width: 0;
}

/* Mobile toggle: a full-width button with the active-filter count. */
.pet-filters .filter-accodian-item.accordion-item:first-of-type .accordion-button.pet-filters__toggle {
   min-height: 48px;
   padding: 10px 16px !important;
   font-family: var(--button-font, var(--general-font));
   font-size: 16px;
   font-weight: 600;
   color: var(--global-primary-color);
   background: var(--primary-color-0-04-opacity);
   border: 1px solid var(--primary-color-04-opacity);
   border-radius: var(--border-radius);
}

.pet-filters__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 22px;
   height: 22px;
   margin-left: 8px;
   padding: 0 7px;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
   background: var(--global-primary-color);
   border-radius: 999px;
}

.pet-filters__count:empty {
   display: none;
}

/* ------------------------------------------------------------ dropdowns -- */

.pet-filters .bootstrap-select > .dropdown-toggle {
   display: flex;
   align-items: center;
   min-height: 44px;
   padding: 10px 14px;
   font-family: var(--general-font);
   font-size: 15px;
   background: #fff;
   border: 1px solid var(--primary-color-04-opacity);
   border-radius: var(--border-radius);
   box-shadow: none;
   transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pet-filters .bootstrap-select > .dropdown-toggle:hover {
   border-color: var(--global-primary-color);
}

/* The placeholder ("Select Breed") in the theme's body text color, not the
   washed-out primary at 60% the site stylesheet gives filter dropdowns. */
.pet-filters .bootstrap-select .filter-option-inner-inner {
   color: var(--global-body-color, #212529);
   opacity: 0.7;
}

/* The caret: the theme's own select chevron (`--select-dropdown-icon-primary`,
   drawn in the primary color) in place of Bootstrap's black triangle; it
   flips while the menu is open. */
.pet-filters .bootstrap-select > .dropdown-toggle::after {
   flex-shrink: 0;
   width: 14px;
   height: 14px;
   margin-left: 8px;
   border: 0;
   background: var(--select-dropdown-icon-primary) center / 14px no-repeat;
   transition: transform 0.2s ease;
}

.pet-filters .bootstrap-select > .dropdown-toggle.show::after {
   transform: rotate(180deg);
}

.pet-filters .bootstrap-select > .dropdown-toggle:focus-visible,
.pet-filters .bootstrap-select > .dropdown-toggle.show {
   border-color: var(--global-primary-color);
   box-shadow: 0 0 0 3px var(--primary-color-02-opacity) !important;
   outline: 0 !important;
}

/* A dropdown with a selection reads as "on". */
.pet-filters .pet-filter-has-value .bootstrap-select > .dropdown-toggle {
   background: var(--primary-color-0-04-opacity);
   border-color: var(--global-primary-color);
}

.pet-filters .pet-filter-has-value .filter-option-inner-inner {
   font-weight: 600;
   color: var(--global-primary-color);
   opacity: 1;
}

/* The menu is exactly as wide as its button, and grows past it only when an
   option needs the room ("Cavalier King Charles Spaniel" in a half-width
   phone dropdown), capped at the screen. So Sex or Location menus line up
   with their buttons, and a full-width dropdown gets a full-width menu.
   bootstrap-select writes a min-width inline, hence `!important`; Popper keeps
   a grown menu on-screen. */
.pet-filters .bootstrap-select > .dropdown-menu {
   width: max-content;
   min-width: 100% !important;
   max-width: calc(100vw - 32px);
}

.pet-filters .bootstrap-select > .dropdown-menu.show {
   margin-top: 6px;
   padding: 6px;
   border: 1px solid var(--primary-color-12-opacity);
   border-radius: min(var(--border-radius), 12px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* The option list inside the menu is itself a `.dropdown-menu`; only the outer
   one is the card. */
.pet-filters .bootstrap-select .dropdown-menu .inner.show {
   margin: 0;
   padding: 0;
   border: 0;
   box-shadow: none;
}

.pet-filters .dropdown-menu .dropdown-item {
   display: flex;
   align-items: center;
   min-height: 40px;
   padding: 8px 12px;
   border-radius: min(var(--border-radius), 8px);
   white-space: normal;
}

.pet-filters .dropdown-menu .dropdown-item:hover,
.pet-filters .dropdown-menu .dropdown-item:focus,
.pet-filters .dropdown-menu .dropdown-item.active,
.pet-filters .dropdown-menu .dropdown-item:active {
   color: inherit;
   background: var(--primary-color-0-04-opacity);
}

.pet-filters .dropdown-menu .selected > .dropdown-item,
.pet-filters .dropdown-menu .dropdown-item.selected {
   color: inherit;
   background: transparent;
}

/* Each option gets a checkbox on the left drawn like the site's theme
   checkbox (`theme-checkbox` in website-main-flow-v1.css: primary border,
   4px corners, `--checkbox-arrow-primary-color` tick), so what is picked is
   obvious at a glance. bootstrap-select's own right-hand tick is hidden. */
.pet-filters .dropdown-menu .dropdown-item::before {
   content: "";
   flex: 0 0 18px;
   width: 18px;
   height: 18px;
   margin-right: 10px;
   background: #fff center / contain no-repeat;
   border: 1px solid var(--primary-color-04-opacity);
   border-radius: 4px;
   transition: border-color 0.15s ease;
}

.pet-filters .dropdown-menu .dropdown-item:hover::before {
   border-color: var(--global-primary-color);
}

.pet-filters .dropdown-menu .selected > .dropdown-item::before,
.pet-filters .dropdown-menu .dropdown-item.selected::before {
   border-color: var(--global-primary-color);
   background-image: var(--checkbox-arrow-primary-color);
}

.pet-filters .dropdown-menu .dropdown-item .check-mark {
   display: none !important;
}

.pet-filters .bootstrap-select .dropdown-menu .dropdown-item span.text {
   margin-right: 0;
}

.pet-filters .bs-searchbox {
   padding: 4px 4px 8px;
}

.pet-filters .bs-searchbox .form-control {
   min-height: 40px;
   font-family: var(--general-font);
   border-color: var(--primary-color-04-opacity);
   border-radius: min(var(--border-radius), 8px);
}

.pet-filters .bs-searchbox .form-control:focus {
   border-color: var(--global-primary-color);
   box-shadow: 0 0 0 3px var(--primary-color-02-opacity);
}

/* ------------------------------------------------------ active filters -- */

.pet-active-filters-slot {
   padding: 0 8px;
   font-family: var(--general-font);
}

/* Phones: one row that scrolls sideways, so many filters never push the pets
   down. Wider: the chips wrap. */
.pet-active-filters {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 8px 0 12px;
   padding: 0 0 4px;
   list-style: none;
   overflow-x: auto;
   scrollbar-width: none;
}

.pet-active-filters::-webkit-scrollbar {
   display: none;
}

.pet-active-filters > li {
   flex: 0 0 auto;
}

/* "Clear all" is the row's last item, so on a long sideways-scrolling row it
   would be off-screen. Pin it to the right edge instead: the chips slide under
   it behind a short fade, and it is always one tap away. */
@media (max-width: 767.98px) {
   .pet-active-filters > li:last-child {
      position: sticky;
      right: 0;
      z-index: 1;
      margin-left: auto;
      padding-left: 8px;
      background: var(--global-background-color, #fff);
   }

   .pet-active-filters > li:last-child::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 100%;
      width: 24px;
      background: linear-gradient(to right, transparent, var(--global-background-color, #fff));
      pointer-events: none;
   }
}

@media (min-width: 768px) {
   .pet-active-filters {
      flex-wrap: wrap;
      margin: -8px 0 24px;
      overflow: visible;
   }
}

.pet-active-filters__chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   max-width: 240px;
   min-height: 32px;
   padding: 4px 12px;
   font-size: 14px;
   color: var(--global-primary-color);
   background: var(--primary-color-01-opacity);
   border-radius: 999px;
   text-decoration: none;
   transition: background-color 0.15s ease;
}

.pet-active-filters__chip:hover,
.pet-active-filters__chip:focus-visible {
   color: var(--global-primary-color);
   background: var(--primary-color-02-opacity);
}

.pet-active-filters__chip-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.pet-active-filters__chip svg {
   flex-shrink: 0;
}

.pet-active-filters__clear {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 4px;
   font-size: 14px;
   font-weight: 600;
   color: var(--global-primary-color);
   white-space: nowrap;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.pet-active-filters__empty {
   margin: 4px 0 8px;
   font-size: 14px;
}

/* ------------------------------------------------------ updating state -- */

.pet-list-container {
   transition: opacity 0.2s ease;
}

.pet-list-is-updating .pet-list-container {
   opacity: 0.5;
   pointer-events: none;
}

/* A slim line in the theme's primary color sweeps along the divider under
   the filters while results load. */
.pet-filters {
   position: relative;
}

.pet-list-is-updating .pet-filters::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 3px;
   border-radius: 3px;
   background: linear-gradient(90deg, transparent, var(--global-primary-color), transparent);
   background-size: 40% 100%;
   background-repeat: no-repeat;
   animation: pet-filters-progress 1s ease-in-out infinite;
}

@media (min-width: 768px) {
   .pet-list-is-updating .pet-filters::after {
      left: 8px;
      right: 8px;
   }
}

@keyframes pet-filters-progress {
   from { background-position: -40% 0; }
   to { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
   .pet-list-container,
   .pet-filters .bootstrap-select > .dropdown-toggle,
   .pet-filters .bootstrap-select > .dropdown-toggle::after,
   .pet-filters .dropdown-menu .dropdown-item::before,
   .pet-active-filters__chip {
      transition: none;
   }

   .pet-list-is-updating .pet-filters::after {
      animation: none;
      background: var(--primary-color-04-opacity);
   }
}