/* ============================================================
   filter.css — Filter / Search / Accordion / Modal rules
   Extracted from style.css (listing_2040)
   ============================================================ */

/* ----------------------------------------------------------
   Accordion
   ---------------------------------------------------------- */
.accordion {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: hidden;
  transition-property: max-height;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
}
.accordion.active-accordion > .accordion-header .accordion-icon {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.accordion.active-accordion > .accordion-trigger .accordion-icon {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.accordion > .accordion-trigger {
  cursor: pointer;
}
.accordion .accordion-icon {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
}
.accordion-icon {
  cursor: pointer;
}

/* ----------------------------------------------------------
   Custom Checkbox / Select Input
   ---------------------------------------------------------- */
.custom-checkbox-box,
.custom-select-input {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}
.custom-checkbox-box label,
.custom-select-input label {
  cursor: pointer;
}
.custom-checkbox-box input[type="checkbox"],
.custom-select-input input[type="checkbox"] {
  position: relative;
  height: 1.25rem;
  width: 1.25rem;
  min-width: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: .25rem;
  cursor: pointer;
}
.custom-checkbox-box input[type="checkbox"]:before,
.custom-select-input input[type="checkbox"]:before {
  background-image: url(../images/check.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  content: "";
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: absolute;
  inset: 0;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.custom-checkbox-box input[type="checkbox"]:checked::before,
.custom-checkbox-box input[type="checkbox"].all-selected::before,
.custom-select-input input[type="checkbox"]:checked::before,
.custom-select-input input[type="checkbox"].all-selected::before {
  border-color: var(--brand-primary, var(--primaryColor));
  content: var(--tw-content);
  background-color: var(--brand-primary, var(--primaryColor));
}
.custom-checkbox-box input[type="checkbox"].some-selected::before,
.custom-select-input input[type="checkbox"].some-selected::before {
  border-color: var(--brand-primary, var(--primaryColor));
  content: var(--tw-content);
  background-color: var(--brand-primary, var(--primaryColor));
}
.custom-checkbox-box input[type="checkbox"].some-selected:before,
.custom-select-input input[type="checkbox"].some-selected:before {
  background-image: url(../images/minus.svg);
}
.custom-checkbox-box *,
.custom-select-input * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Primary colour overrides (from filter.css base) */
.accordion-selected { border-color: var(--brand-primary, var(--primaryColor)) !important; }
.accordion-error { color: var(--brand-primary, var(--primaryColor)) !important; }
.custom-checkbox-box input[type="checkbox"].selected::before { border-color: var(--brand-primary, var(--primaryColor)); }
.custom-select-input input[type="checkbox"].selected::before { border-color: var(--brand-primary, var(--primaryColor)); }

/* ----------------------------------------------------------
   Custom Radio Box
   ---------------------------------------------------------- */
.custom-radio-box {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}
.custom-radio-box input[type="radio"] {
  position: relative;
  margin-top: 2px;
  height: 1.25rem;
  min-height: 20px;
  width: 1.25rem;
  min-width: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 9999px;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0;
  cursor: pointer;
}
.custom-radio-box input[type="radio"]:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: 18px;
  width: 18px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.custom-radio-box input[type="radio"]:after {
  content: "";
  transition: transform 0.2s ease-in-out;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: 10px;
  width: 10px;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  background-color: var(--brand-primary, var(--primaryColor));
}
.custom-radio-box input[type="radio"]:checked::before {
  border-color: var(--brand-primary, var(--primaryColor));
}
.custom-radio-box input[type="radio"]:checked:after {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ----------------------------------------------------------
   Filter Select
   ---------------------------------------------------------- */
.filter-select.active .head {
  border-color: var(--brand-primary, var(--primaryColor));
}
.filter-select.\!active .head {
  border-color: var(--brand-primary, var(--primaryColor));
}
.filter-select.active .filter-icon {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.filter-select.\!active .filter-icon {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.filter-select.active .body {
  visibility: visible;
  opacity: 1;
}
.filter-select.\!active .body {
  visibility: visible;
  opacity: 1;
}
.filter-select.active.filter-active-rounded-full .head {
  border-radius: 50px;
}
.filter-select.\!active.filter-active-rounded-full .head {
  border-radius: 50px;
}
.filter-select.filter-active-rounded-full .head {
  transition-property: border-radius;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
}
.filter-select .body {
  visibility: hidden;
  opacity: 0;
}

/* ----------------------------------------------------------
   Filter Button (mobile)
   ---------------------------------------------------------- */
.filter-button__mobile {
  position: relative;
}
.filter-button__mobile.active-filter {
  border-color: var(--brand-primary, var(--primaryColor)) !important;
}
.filter-button__mobile.active-filter .filter-active__count {
  display: flex;
}
.filter-button__mobile .filter-active__count {
  display: none;
}

/* ----------------------------------------------------------
   Filter (slide-in panel)
   ---------------------------------------------------------- */
.filter.active {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.filter.\!active {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ----------------------------------------------------------
   Modal (custom component)
   ---------------------------------------------------------- */
.modal .modal-dialog {
  background-color: transparent !important;
  opacity: 1 !important;
}
@media (min-width: 768px) {
  .modal .modal-dialog {
    margin: auto !important;
  }
}
.modal {
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: block;
  background-color: rgb(0 0 0 / .8);
  opacity: 0;
  transition-property: opacity, visibility;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-delay: 300ms;
  transition-duration: 500ms;
  overflow: unset;
}
.modal.active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal.\!active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal.active .modal-wrapper {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-delay: 300ms;
}
.modal.\!active .modal-wrapper {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition-delay: 300ms;
}
.modal-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
  height: calc(var(--vh, 1vh) * 100);
}
.modal-wrapper__inner {
  position: relative;
  height: 100%;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .modal-wrapper__inner {
    overflow: hidden;
  }
}
.modal .modal-close {
  cursor: pointer;
}
@media not all and (min-width: 768px) {
  .modal.bottom-sheet.active .modal-wrapper__inner {
    --tw-translate-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .modal.bottom-sheet.\!active .modal-wrapper__inner {
    --tw-translate-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .modal.bottom-sheet .modal-wrapper {
    opacity: 1;
  }
}
.modal.bottom-sheet .modal-wrapper__inner {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
}
@media not all and (min-width: 768px) {
  .modal.bottom-sheet .modal-wrapper__inner {
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
.modal.fade.show {
  opacity: 1;
  visibility: visible;
}
.modal {
  z-index: 501 !important;
}
.modal.dragging .bottom-sheet-content {
  transition: none;
}

/* ----------------------------------------------------------
   Modal Dialog (native <dialog> element)
   ---------------------------------------------------------- */
.modal-dialog {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  width: 100%;
  background-color: rgb(0 0 0 / .5);
  padding: 0;
  opacity: 0;
  transition-property: opacity, visibility;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 500ms;
  height: calc(var(--vh, 1vh) * 100);
}
.modal-dialog::backdrop {
  background-color: rgb(0 0 0 / .5);
}
@media (min-width: 768px) {
  .modal-dialog {
    display: flex;
    align-items: center;
  }
}
.modal-dialog[open] {
  visibility: visible;
  opacity: 1;
}
.modal-dialog[open] .modal-dialog-wrapper {
  pointer-events: auto;
}
.modal-dialog-wrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 42rem;
  flex-direction: column;
  justify-content: center;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  row-gap: 1.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
@media (min-width: 768px) {
  .modal-dialog-wrapper {
    height: auto;
    max-height: 80%;
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .modal-dialog-wrapper {
    max-width: 48rem;
  }
}
@media (prefers-color-scheme: dark) {
  .modal-dialog-wrapper {
    --tw-bg-opacity: 1;
    background-color: rgb(77 77 77 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
}
.modal-dialog .content {
  scrollbar-width: none;
}
.modal-dialog .\!content {
  scrollbar-width: none !important;
}
.modal-dialog .content {
  width: 100%;
  overflow: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-top: 3.5rem;
}
@media (min-width: 768px) {
  .modal-dialog .content {
    padding: 2rem;
  }
}
@media (min-width: 1024px) {
  .modal-dialog .content {
    padding: 3rem;
  }
}
.modal-dialog .\!content {
  width: 100%;
  overflow: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-top: 3.5rem;
}
@media (min-width: 768px) {
  .modal-dialog .\!content {
    padding: 2rem;
  }
}
@media (min-width: 1024px) {
  .modal-dialog .\!content {
    padding: 3rem;
  }
}
.modal-dialog h4 {
  margin-bottom: 3rem;
}
.modal-dialog-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  cursor: pointer;
}
.modal-dialog-close svg path {
  fill: currentColor;
}
.modal-dialog__fullscreen .modal-dialog-wrapper {
  height: 100%;
  max-height: none;
  max-width: none;
}
.modal-dialog__fullscreen .content {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: unset;
}
.modal-dialog__fullscreen .\!content {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: unset;
}

/* ----------------------------------------------------------
   Modal Backdrop (Bootstrap compat)
   ---------------------------------------------------------- */
.modal-backdrop {
  opacity: 0.1 !important;
}