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

/* ----- Extracted from critical.css ----- */

.filter-select {
  position:relative;
}

.filter-select .head {
  height:100%;
  white-space:nowrap;
  display:flex;
  cursor:pointer;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  border-radius:.375rem;
  border:1px solid #e5e7eb;
  background-color:#fff;
  padding-left:14px;
  padding-right:14px;
  padding-top:.875rem;
  padding-bottom:.875rem;
  transition:color 0.5s,background-color 0.5s,border 0.5s;
}

.modal {
  visibility:hidden;
  inset:0;
  opacity:0;
}

.popover-body,
.filter-select .body {
  visibility:hidden;
  position:absolute;
  opacity:0;
}

.relative,
.filter-select {
  position:relative;
}


/* ----- Extracted from style.css ----- */

.filter.active::before {
  opacity:1;
}

.filter.active .filter-inner {
  --tw-translate-x: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));
}

@media (min-width:1024px) {
  .filter.active .filter-inner {
    --tw-translate-x:0.75rem;
    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 {
  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 .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 .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-dialog {
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:1000;
  margin:0;
  width:100%;
  height: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 .content {
  scrollbar-width:none;
  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 .content {
  width:100%;
  height:100%;
  padding:0;
  overflow:unset;
}

.modal-dialog {
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:1000;
  margin:0;
  width:100%;
  height: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 .content {
  scrollbar-width:none;
  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 .content {
  width:100%;
  height:100%;
  padding:0;
  overflow:unset;
}

.custom-checkbox-box,
.custom-select-input {
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.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;
  cursor:pointer;
  -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;
}

.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;
}

.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;
}

.custom-radio-box {
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.custom-radio-box input[type="radio"] {
  position:relative;
  margin-top:2px;
  height:1.25rem;
  min-height:20px;
  width:1.25rem;
  min-width:20px;
  cursor:pointer;
  -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;
}

.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));
}

.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,
.accordion.active>.accordion-header .accordion-icon {
  transform:rotateX(180deg);
}

.accordion>.accordion-header .accordion-trigger {
  cursor:pointer;
}

.accordion>.accordion-trigger {
  cursor:pointer;
}

.accordion .accordion-icon {
  font-size:1.5rem;
  line-height:2rem;
  transition-property:transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:500ms;
}

.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 .body {
  visibility:visible;
  opacity:1;
}

.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;
}

.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;
}