/* Global form styling, gravity , woocommerce */
.form-control, .form-select,
.gform_wrapper .gfield :is(input:not([type=checkbox], [type=radio], [type=range]), textarea, select),
body.woocommerce-page :is(input:not([type=checkbox], [type=radio], [type=range]), textarea, select) { --p: 0 2.3rem; --br: .8rem; --border: 2px solid var(--clr-grey-light); --focus-border: 2px solid var(--clr-primary-light); font-family: var(--font-primary); min-height: 5.4rem; border: var(--border); border-radius: var(--br); transition: border-color var(--ts-15) ease; padding: var(--p); }

.form-control:focus, .form-select:focus,
.gform_wrapper .gfield :is(input:not([type=checkbox], [type=radio], [type=range]), textarea, select):focus,
body.woocommerce-page :is(input:not([type=checkbox], [type=radio], [type=range]), textarea, select):focus { border: var(--focus-border); outline: none; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.gform_wrapper.gravity-theme .gfield textarea, textarea { padding-block: 1.4rem; }

/* Gravity Form : heading */
.gform_wrapper .gform_required_legend { display: none; }

/* Gravity Form : body */
.gform_wrapper.gravity-theme .gform_fields { --gap: 2rem; grid-column-gap: var(--gap); grid-row-gap: var(--gap); }
.gform_wrapper.gravity-theme .gfield_label { display: block; margin: 0; }
.gform_wrapper .ginput_container_textarea { display: flex; } 
.gform_ajax_spinner { width: 3rem; margin-left: 2rem; }

/* Gravity Form : footer */
.gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer { margin: 0; padding-bottom: 0; }
.gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_footer input, .gform_wrapper.gravity-theme .gform_page_footer button, .gform_wrapper.gravity-theme .gform_page_footer input { margin: 0; }

/* Gravity Form : Errors */
.gform_wrapper.gravity-theme .gfield_description { display: none; }
.gform_wrapper.gravity-theme .gform_validation_errors { background-color: #c02b0a; padding: 1.6rem 2rem; } 
.gform_wrapper.gravity-theme .gform_validation_errors h2 { color: #fff; }
.gform_confirmation_message { background-color: #549A1E; padding: 1.6rem 2rem; border-radius: 0.8rem; color: #fff; }

/* Select2 */
.select2-container { --p: 1.1rem 1.6rem; --br: .8rem; --hover-clr: #fff; --hover-bg: rgba(0,0,0,.5); --highlighted-color: #fff; --highlighted-bg: var(--clr-primary); }
.select2-container .select2-selection--single { border: 2px solid var(--clr-primary-light); border-radius: var(--br); margin: 0; }
.select2-container .select2-selection--single { height: auto; padding: var(--p); }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; font-size: 1.6rem; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--open .select2-dropdown { border: 2px solid var(--clr-primary-light); overflow: hidden;}
.select2-container--open .select2-dropdown--top { border-radius: var(--br) var(--br) 0 0; }
.select2-container--open .select2-dropdown--below { border-radius: 0 0 var(--br) var(--br); }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 2px solid var(--clr-primary-light); }
.select2-container--open .select2-dropdown--below .select2-search__field, .select2-container--open .select2-dropdown--above .select2-search__field { border-color: var(--clr-border); border-radius: var(--br); font-size: 1.4rem; height: auto; padding: 0 0.8rem; min-height: 4rem; }
.select2-container .select2-results__option { font-size: 1.6rem; }
.select2-container .select2-results__option[data-selected=true] { background-color: var(--hover-bg); color: var(--hover-clr); }
.select2-container .select2-results__option.select2-results__option--highlighted { background-color: var(--highlighted-bg); color: var(--highlighted-color); }

/* Form label */
.form-label { margin-bottom: 0.8rem; font-weight: 600; width: 100%; }

/* Form switch */
.form-switch { padding-left: 2.5em; }
.form-switch .form-check-input { width: 2em; margin-left: -2.5em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2em; transition: background-position var(--ts-15) ease; }
.form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

/* Form check */
.form-check-input, .gfield_radio input, .gfield_checkbox input, .woocommerce-form__label input, .woocommerce-shipping-methods input { width: 1.15em; height: 1.15em; margin-top: 0.15em!important; vertical-align: top; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid var(--clr-primary); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.form-check-input[type=checkbox], .gfield_radio input, .gfield_checkbox input, .woocommerce-form__label [type="checkbox"] { border-radius: 0.35em; }
.form-check-input[type=radio], .gfield_radio input, .woocommerce-shipping-methods input[type=radio] { border-radius: 50%; }
.form-check-input:checked, .gfield_radio input:checked, .gfield_checkbox input:checked, .woocommerce-form__label input:checked, .woocommerce-shipping-methods input:checked { --check-bg-clr: var(--clr-primary); --check-border-color: var(--clr-primary); background-color: var(--check-bg-clr); border-color: var(--check-border-color); }
.form-check-input:checked[type=radio], .gfield_radio input:checked, .woocommerce-shipping-methods input:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:checked[type=checkbox], .gfield_checkbox input:checked, .woocommerce-form__label [type=checkbox]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label { cursor: default; opacity: .5; }

/* Form control */
.form-control { display: block; width: 100%; padding: var(--p); font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
.form-control:focus { color: #212529; background-color: #fff; border-color: #000; outline: 0; }

/* Form select */
.form-select { --p: .9rem 2.3rem; display: block; width: 100%; padding: var(--p); font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; }
.gform_submission_error .gform-icon { display: none!important; }

input[type=range] { --bg-clr: #ccc; pointer-events: none; -webkit-appearance: none; appearance: none; width: 100%; }
input[type=range]::-webkit-slider-container { border-radius: 0; height: .8rem; background: var(--bg-clr); background-image: linear-gradient(90deg,var(--bg-clr) var(--minPercent),var(--clr-primary) var(--minPercent),var(--clr-primary) var(--maxPercent),var(--bg-clr) var(--maxPercent)); }
input[type=range]::-webkit-slider-thumb { z-index: 5; position: relative; pointer-events: all; -webkit-appearance: none; appearance: none; width: 2.3rem; height: 2.3rem; background: #020B18; cursor: pointer; border-radius: .4rem; }
input[type=range]::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 1.4rem; height: 1.4rem; background: #fff; border: .6rem solid var(--clr-primary); cursor: pointer; border-radius: 50%;  }

/*** ---------- Filters ---------- ***/
.wf-filter-group { margin-top: 3.2rem; 
    .wf-filter-group__body { display: flex; flex-direction: column; gap: 1rem;
        .wf-filter-item-collapse {display: flex; flex-direction: column; gap: 1rem; }
        > ul { list-style: none; margin: 0; padding: 0; 
            > li a { text-decoration: none; }
        }
    }
    .input-controller { cursor: pointer; user-select: none; display: flex; align-items: center; column-gap: .8rem; font-size: 1.6rem; line-height: 1.2; text-wrap: balance;
        > input[type='checkbox'] { cursor: pointer; min-width: 1.4rem; min-height: 1.4rem; appearance: none; border: 1px solid var(--clr-primary-80); border-radius: .2rem; background-color: transparent; transition: background-color .2s ease, border-color .2s ease;
            &:checked { background-color: var(--clr-primary); border-color: var(--clr-primary); 
                &::after { content: "✔"; color: white; font-size: 1rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
            }
        }
    }
    > label { cursor: pointer; user-select: none; font-size: 1.8rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; border-bottom: 1px solid var(--clr-primary-light); padding-bottom: .6rem;
        i { font-size: 1.4rem; }
    }
    &.wf-filter-group--collapsable .wf-filter-group__body { height: 0px; overflow: hidden; transition: height 0.25s ease-in; 
    }
    
    > [type="checkbox"] { opacity: 0; position: absolute; left: -9999rem; display: none; 
        &:checked + label + .wf-filter-group__body { height: auto; height: calc-size(max-content, size); }
    }

    &.wf-filter-group--categories:not(:has(.wf-filter-group--brands)) { border-top: none; padding-top: 0; margin-top: 0; }


    .range-slider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        input { grid-column: span 2; }
        .range-slider__max { text-align: right; }
    }
}  

.range-slider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
    .range-slider__input { grid-column: span 2; display: grid; grid-template-areas: "rangeInputs"; }
   .range-slider__min, .range-slider__max { display: flex; flex-direction: column; position: relative; border: 1px solid var(--clr-grey-light); border-radius: 0.4rem; min-height: 5.4rem;
        > input {font-size: 2rem; font-weight: 500; position: absolute; bottom: 0.4rem; left: 0.8rem; background: transparent; height: fit-content; line-height: 0; min-height: unset !important; padding: 0 !important; border: none !important;}
        small { position: absolute; top: 0.8rem; left: 0.8rem; font-size: 1.1rem; color: var(--clr-dark-50); }
    }
}
.range-slider .range-slider__input input { padding: 0; grid-area: rangeInputs; width: 100%; margin: 1rem 0; }


.wf-filter-item-collapse { height: 0px; overflow: hidden; transition: height 0.25s ease-in; }
.wf-filter-item-collapse.is-active { height: auto; height: calc-size(max-content, size); }
.wf-filter-item-collapse-toggle  { font-size: 1.4rem; font-weight: 600; cursor: pointer; display: flex!important; align-items: center; column-gap: .5rem; padding-top: .25rem; }
.wf-filter-item-collapse-toggle i { font-size: 1.4rem; }
.wf-filter-item-collapse-toggle .less { display: none; }
.wf-filter-item-collapse-toggle.is-active .more { display: none; }
.wf-filter-item-collapse-toggle.is-active .less { display: inline-block; }
.wf-filter-item-collapse-toggle.is-active i { transform: rotate(180deg); }