/*
 * Emporium theme for NopStation Ajax Filter
 * Path: Themes/Emporium/Content/AjaxFilters.css (loaded only when storefront theme is Emporium)
 * Colors aligned with Themes/Emporium/Content/css/theme.custom-1.css (NopTemplates RNR skin):
 *   FILTERS button / slider range / chevrons / loader → #0aa13f
 */

:root {
  --ajaxfilter-green: var(--rnr-color-quick-order, #0aa13f);
  --ajaxfilter-green-dark: var(--rnr-color-quick-order-hover, #065923);
  --ajaxfilter-accent: var(--ajaxfilter-green);
  --ajaxfilter-accent-dark: var(--ajaxfilter-green-dark);
  --ajaxfilter-brand: var(--ajaxfilter-green);
  --ajaxfilter-header-bg: #f6f6f6;
  --ajaxfilter-title-color: #444444;
  --ajaxfilter-muted: #8c8c8c;
}

/* Hide page size when Ajax Filter is active (NopTemplates storefront UX) */
body.nopstation-ajaxfilter-enabled .product-selectors .product-page-size {
  display: none !important;
}

/*
 * Mobile/tablet (≤1024): hide view mode (Emporium already hides it; do not force it on),
 * and put FILTERS + Sort By on one row when space allows (theme used 50%/50% for sort + page size).
 * Very narrow phones still stack so the select stays usable.
 */
@media all and (max-width: 1024px) {
  body.nopstation-ajaxfilter-enabled .product-selectors .product-viewmode {
    display: none !important;
  }

  body.nopstation-ajaxfilter-enabled .product-selectors {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    text-align: left;
  }

  body.nopstation-ajaxfilter-enabled .product-selectors > div.filters-button-wrapper,
  body.nopstation-ajaxfilter-enabled .product-selectors .product-sorting {
    float: none !important;
    display: block !important;
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0;
  }

  body.nopstation-ajaxfilter-enabled .product-selectors > div.filters-button-wrapper .filters-button {
    width: 100% !important;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
  }

  body.nopstation-ajaxfilter-enabled .product-selectors .product-sorting > span {
    display: none; /* label clutters the shared row; select is self-explanatory */
  }

  body.nopstation-ajaxfilter-enabled .product-selectors .product-sorting select,
  body.nopstation-ajaxfilter-enabled .product-selectors .product-sorting .jDropDown {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}

@media all and (max-width: 380px) {
  body.nopstation-ajaxfilter-enabled .product-selectors > div.filters-button-wrapper,
  body.nopstation-ajaxfilter-enabled .product-selectors .product-sorting {
    flex: 1 1 100%;
  }
}

/* Filter cards → Emporium block look (gray header + chevron); no card borders */
.nop-ajax-filters .filter-section,
.nop-ajax-filters .manufacturer-section .filter-section,
.nop-ajax-filters .ProductRating-section,
.nop-ajax-filters [id$="-filter-section"] > .filter-section,
.nop-ajax-filters .manufacturer-section,
.nop-ajax-filters .ProductRating-section .filter-section,
body.nopstation-ajaxfilter-enabled .nop-ajax-filters .filter-section {
  display: block;
  position: relative;
  margin: 0 0 2px; /* tight stack — avoids “double line” gap between cards */
  padding: 0;
  background: #fff;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
  text-align: left;
}

/* Avoid nested wrappers drawing a second outline above the first header */
.nop-ajax-filters [id$="-filter-section"] {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.nop-ajax-filters .filter-section > .title,
.nop-ajax-filters .filter-section .title {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nop-ajax-filters .ajaxfilter-title {
  position: relative;
  display: block;
  margin: 0;
  padding: 14px 48px 14px 50px !important;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.3;
  color: var(--ajaxfilter-title-color) !important;
  background-color: var(--ajaxfilter-header-bg) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none !important;
  box-shadow: none !important;
}

/*
 * Chevron: views hardcode class "collapsed" even when open, so do NOT key off .collapsed.
 * Bootstrap toggles aria-expanded on the trigger — match Emporium .title.open behavior.
 * closed → point right (-90deg); open → point down (0deg)
 */
.nop-ajax-filters .ajaxfilter-title:before {
  content: "\77";
  font-family: "emporium-icons";
  display: inline-block;
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 10px;
  color: var(--ajaxfilter-brand);
  text-transform: none;
  transition: transform .4s ease;
  speak: none;
}

.nop-ajax-filters .ajaxfilter-title[aria-expanded="true"]:before {
  transform: translateY(-50%) rotate(0deg);
}

.nop-ajax-filters .ajaxfilter-title.collapsed[aria-expanded="true"]:before {
  transform: translateY(-50%) rotate(0deg);
}

.nop-ajax-filters .ajaxfilter-title.collapsed[aria-expanded="false"]:before,
.nop-ajax-filters .ajaxfilter-title[aria-expanded="false"]:before {
  transform: translateY(-50%) rotate(-90deg);
}

.nop-ajax-filters .ajaxfilter-title i.fa-angle-down,
.nop-ajax-filters .ajaxfilter-title .rotate-icon {
  display: none !important;
}

.nop-ajax-filters .ajaxfilter-title i.fa-undo {
  display: inline-block !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  float: none !important;
  font-size: 12px;
  color: var(--ajaxfilter-muted);
  line-height: 1;
  background: none !important;
}

.nop-ajax-filters .ajaxfilter-title i.fa-undo:hover {
  color: var(--ajaxfilter-brand);
}

/* Panel body */
.nop-ajax-filters .filter-section .listbox,
.nop-ajax-filters .filter-section .collapse,
.nop-ajax-filters .filter-section .collapsing {
  padding: 14px 18px !important;
  background: #fff;
  border: none !important;
  box-shadow: none !important;
}

.nop-ajax-filters .filter-section .ajaxfilter-section {
  padding: 0;
}

.nop-ajax-filters .filter-section .listbox.ui-accordion-content-active::before,
.nop-ajax-filters .filter-section .listbox.ui-accordion-content-active::after,
.nop-ajax-filters #PriceyNavigation::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

/* Price range — NopTemplates layout */
.nop-ajax-filters .ajaxfilter-price-range-section {
  margin-bottom: 10px;
  overflow: hidden;
  font-size: 14px;
  color: var(--ajaxfilter-muted);
  display: block;
}

.nop-ajax-filters .ajaxfilter-price-range-section .price-min {
  float: left;
}

.nop-ajax-filters .ajaxfilter-price-range-section .price-max {
  float: right;
}

.nop-ajax-filters .ajaxfilter-price-range-section .price-range-min,
.nop-ajax-filters .ajaxfilter-price-range-section .price-range-max {
  font-size: 14px;
  color: var(--ajaxfilter-muted);
}

.nop-ajax-filters #slider-range {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 3px;
  margin: 18px 10px 12px !important;
  padding: 0 !important;
  border: none !important;
  background: #c5c5c5 !important; /* single track — no border-bottom double line */
  border-radius: 0 !important;
  box-shadow: none !important;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.nop-ajax-filters #slider-range.ui-widget-content,
.nop-ajax-filters #slider-range.ui-slider {
  border: none !important;
  background: #c5c5c5 !important;
}

.nop-ajax-filters #slider-range .ui-slider-range {
  position: absolute;
  height: 3px !important;
  top: 0 !important;
  bottom: auto !important;
  margin: 0;
  background: var(--ajaxfilter-green) !important;
  border: none !important;
}

.nop-ajax-filters #slider-range .ui-slider-handle {
  position: absolute;
  top: 50% !important;
  width: 19px !important;
  height: 19px !important;
  margin-left: -8px;
  margin-top: -9.5px;
  background: #fff !important;
  border: 1px solid var(--ajaxfilter-green) !important;
  border-radius: 50% !important;
  cursor: pointer;
  outline: none;
  box-shadow: none !important;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.nop-ajax-filters #slider-range .ui-slider-handle:focus,
.nop-ajax-filters #slider-range .ui-slider-handle:hover {
  border-color: var(--ajaxfilter-green-dark) !important;
  background: #fff !important;
}

.nop-ajax-filters .ajaxfilter-price-section {
  margin-top: 15px;
}

.nop-ajax-filters .ajaxfilter-price-range {
  display: block;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ajaxfilter-muted);
}

.nop-ajax-filters #price-current-min,
.nop-ajax-filters #price-current-max {
  width: auto !important;
  max-width: 45%;
  height: auto !important;
  min-height: 0;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  color: var(--ajaxfilter-muted);
  text-align: left;
}

.nop-ajax-filters #price-current-max {
  float: right;
  text-align: right;
}

/* Checkbox / option list typography */
.nop-ajax-filters .ajaxfilter-section label,
.nop-ajax-filters .ajaxfilter-section label i {
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  color: #909090;
}

.nop-ajax-filters .ajaxfilter-section li {
  margin: 0 0 2px;
  padding: 0 28px 0 0;
  min-height: 0;
}

.nop-ajax-filters .ajaxfilter-section label {
  padding: 9px 0;
  gap: 0;
}

.nop-ajax-filters .group-dropdown {
  width: 100%;
  max-width: 100%;
}

/* Result count / clear — quieter Emporium tone */
.nop-ajax-filters .filter-result-count {
  font-size: 14px;
  color: var(--ajaxfilter-muted);
}

.nop-ajax-filters .clear-filter-all,
.nop-ajax-filters .clear-filter,
.nop-ajax-filters .showControl {
  color: var(--ajaxfilter-brand) !important;
}

.nop-ajax-filters .filters-button,
body.nopstation-ajaxfilter-enabled .filters-button {
  background-color: var(--ajaxfilter-green) !important;
}

body.nopstation-ajaxfilter-enabled .filters-button:hover {
  background-color: var(--ajaxfilter-green-dark) !important;
}

/*
 * Products busy loader (Emporium only)
 * Uses real .ajaxfilter-busy-ring spans (see ajaxfilter.manager.js) — not :before/:after —
 * because Emporium styles.css applies font-family + box-sizing:border-box to all *:before/:after,
 * which breaks the SevenSpikes/theme expanding-circle technique on empty pseudos.
 * Color matches theme.custom-1.css (#0aa13f).
 *
 * Placement:
 *  - Filter / first page / pager replace → overlay on products, rings fixed in viewport center
 *  - Infinite scroll append → loader bar at bottom of product list (where next items appear)
 */
@keyframes ajaxfilter-emporium-loader {
  0% {
    border-width: 3px;
    opacity: 1;
    width: 0;
    height: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    border-width: 3px;
    opacity: 0;
    width: 50px;
    height: 50px;
  }
}

/* Page/filter busy: dim the products panel */
body.nopstation-ajaxfilter-enabled .ajax-products .productPanelAjaxBusy,
body.nopstation-ajaxfilter-enabled .ajax-products .ajaxfilter-products-busy,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-host .productPanelAjaxBusy,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-host .ajaxfilter-products-busy {
  display: none;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  pointer-events: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  overflow: visible !important;
}

body.nopstation-ajaxfilter-enabled .ajax-products .productPanelAjaxBusy.is-visible,
body.nopstation-ajaxfilter-enabled .ajax-products .ajaxfilter-products-busy.is-visible,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-host .productPanelAjaxBusy.is-visible,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-host .ajaxfilter-products-busy.is-visible {
  display: block !important;
}

/* Disable broken pseudo rings */
body.nopstation-ajaxfilter-enabled .productPanelAjaxBusy:before,
body.nopstation-ajaxfilter-enabled .productPanelAjaxBusy:after,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-busy:before,
body.nopstation-ajaxfilter-enabled .ajaxfilter-products-busy:after,
body.nopstation-ajaxfilter-enabled .infinite-scroll-loader:before,
body.nopstation-ajaxfilter-enabled .infinite-scroll-loader:after {
  content: none !important;
  display: none !important;
  animation: none !important;
  border: none !important;
}

/* Shared ring look */
body.nopstation-ajaxfilter-enabled .ajaxfilter-busy-ring {
  display: block;
  /* width/height/border-width must NOT use !important — keyframes animate them */
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  border-style: solid;
  border-color: #0aa13f;
  border-width: 0;
  border-radius: 50%;
  background: transparent;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: ajaxfilter-emporium-loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite;
  -moz-animation: ajaxfilter-emporium-loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite;
  animation: ajaxfilter-emporium-loader 1.6s cubic-bezier(0, 0, 0.09, 0.99) infinite;
  pointer-events: none;
}

body.nopstation-ajaxfilter-enabled .ajaxfilter-busy-ring--late {
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
  animation-delay: .8s;
}

/* Page/filter: rings fixed in the middle of the screen (always visible while scrolling) */
body.nopstation-ajaxfilter-enabled .ajaxfilter-busy--page.is-visible .ajaxfilter-busy-ring,
body.nopstation-ajaxfilter-enabled .productPanelAjaxBusy.is-visible .ajaxfilter-busy-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1040;
}

/* Infinite / append: compact loader at the bottom of the product list */
body.nopstation-ajaxfilter-enabled .infinite-scroll-loader,
body.nopstation-ajaxfilter-enabled .ajaxfilter-infinite-loader {
  display: none;
  position: relative;
  clear: both;
  width: 100%;
  height: 72px;
  margin: 12px 0 24px;
  padding: 0;
  background: transparent;
  z-index: 5;
  overflow: visible;
}

body.nopstation-ajaxfilter-enabled .infinite-scroll-loader.is-visible,
body.nopstation-ajaxfilter-enabled .ajaxfilter-infinite-loader.is-visible {
  display: block !important;
}

body.nopstation-ajaxfilter-enabled .infinite-scroll-loader .ajaxfilter-busy-ring,
body.nopstation-ajaxfilter-enabled .ajaxfilter-infinite-loader .ajaxfilter-busy-ring,
body.nopstation-ajaxfilter-enabled .ajaxfilter-busy--append .ajaxfilter-busy-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
}

/* Mobile drawer refinements (≤1024 — Emporium breakpoint) */
@media all and (max-width: 1024px) {
  body.nopstation-ajaxfilter-enabled .filters-button {
    background-color: var(--ajaxfilter-green);
  }

  .nop-ajax-filters .filter-section {
    margin: 0 0 2px;
    border: none;
    border-radius: 0;
  }

  .nop-ajax-filters .filtersPanel {
    padding: 0 0 24px;
  }

  .nop-ajax-filters .filter-section .listbox,
  .nop-ajax-filters .filter-section .collapse,
  .nop-ajax-filters .filter-section .collapsing {
    padding: 25px 30px 23px !important;
  }

  .nop-ajax-filters .close-side-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 15px 0 20px;
    background: var(--ajaxfilter-brand);
    color: #fff;
  }

  .nop-ajax-filters .close-side-menu-text {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .nop-ajax-filters .close-side-menu-btn {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    font-size: 0;
  }

  .nop-ajax-filters .close-side-menu-btn:before {
    content: "\7a";
    font-family: "emporium-icons";
    font-size: 18px;
    color: #fff;
    opacity: .85;
  }

  /* Larger touch targets for price handles in the mobile drawer */
  .nop-ajax-filters #slider-range {
    height: 4px;
    margin: 22px 12px 16px !important;
    touch-action: none;
  }

  .nop-ajax-filters #slider-range .ui-slider-handle {
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px;
    margin-top: -14px;
    touch-action: none;
  }

  .nop-ajax-filters .ajaxfilter-price-range-section,
  .nop-ajax-filters .collaspe-price .ajaxfilter-section {
    touch-action: pan-y;
  }

  .nop-ajax-filters .collaspe-price #slider-range,
  .nop-ajax-filters .collaspe-price #slider-range * {
    touch-action: none;
  }
}

@media all and (min-width: 1025px) {
  .nop-ajax-filters .close-side-menu {
    display: none !important;
  }
}