:root {
    --input-mh: 4.8rem;
    --input-br: .4rem;
}

form {
    label { display: block; margin: 0 0 .5rem 0; 
        * { font: inherit; color: inherit; text-decoration: none; }
    }
}

input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type="file"], textarea { --p: 0 1.6rem; --br: var(--input-br); --fs: 16px; --border: 1px solid var(--clr-border); --bg-clr: #FFFF; --focus-border: 1px solid var(--clr-primary); font-family: var(--font-primary); font-size: var(--fs) !important; display: block; width: 100%; min-height: var(--input-mh) !important; background-color: var(--bg-clr); border: var(--border); border-radius: var(--br); padding: var(--p); transition: border-color var(--ts-15) ease;
    &:focus { border: var(--focus-border); outline: none; }
}
textarea { --p: 1rem 1.6rem; overflow: auto; vertical-align: top; width: 100%; resize: vertical; min-height: 10rem; }

select { --p: .9rem; --br: var(--input-br); --border: 1px solid var(--clr-border); cursor: pointer; outline: none; display: block; width: 100%; min-height: var(--input-mh); padding: var(--p); font-family: var(--font-primary); color: var(--clr-text); background-color: #fff; background-clip: padding-box; border: var(--border); border-radius: var(--br); 
    &[hidden] { display: none; }
}

input[type=checkbox], input[type=radio] { --size: 2.4rem; --br: .4rem; --border: 1px solid var(--clr-border); --bg-clr: #FFFF; --src: 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"); min-width: var(--size); width: var(--size); height: var(--size); vertical-align: top; background-color: var(--bg-clr); background-image: var(--src); background-repeat: no-repeat; background-position: center; background-size: 0%; border: var(--border); border-radius: var(--br); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: background-color var(--ts-15) ease, border-color var(--ts-15) ease, background-size var(--ts-15) ease;
    &:checked { --check-bg-clr: var(--clr-primary); --check-border-color: var(--check-bg-clr); background-color: var(--check-bg-clr); border-color: var(--check-border-color); background-size: 100%; }
}
input[type=radio] { --br: 50%; }

.gfield_error input { border-color: var(--clr-danger); }

input[type=range] { --bg-clr: #ccc; pointer-events: none; -webkit-appearance: none; appearance: none; width: 100%;
    &::-webkit-slider-container { border-radius: 2rem; height: .6rem; 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)); }
    &::-webkit-slider-thumb { z-index: 5; position: relative; pointer-events: all; -webkit-appearance: none; appearance: none; width: 2.1rem; height: 2.1rem; background: #fff; border: .6rem solid var(--clr-primary); cursor: pointer; border-radius: 50%; }
    &::-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%;  }
}
.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"; padding-block: .8rem;
        input { grid-area: rangeInputs; width: 100%; }
    }
    .range-slider__max { text-align: right; }
}
fieldset { border: 1px solid var(--clr-border); border-radius: var(--input-br); padding: 2rem; }

.gfield_radio {
    margin-top: .8rem; display: flex; flex-direction: column; gap: 0.8rem;
    .gchoice {
        display: flex; align-items: center; gap: .8rem;
        label {margin-bottom: 0; line-height: 1;}
    }
}

/* Select2 */
.select2-container { --p: 0 1.6rem; --br: var(--input-br); --hover-clr: #fff; --hover-bg: rgba(0,0,0,.5); --highlighted-color: #fff; --highlighted-bg: var(--clr-primary);
    .select2-selection--single { display: flex; align-items: center; border-color: var(--clr-border); border-radius: var(--br); margin: 0; min-height: var(--input-mh); height: auto; padding: var(--p);
        .select2-selection__rendered { padding-left: 0; font-size: 1.4rem; }
        .select2-selection__arrow { height: 100%; }    
    }
}
.select2-container--open .select2-dropdown { border-color: var(--clr-border); 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--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: 3.5rem; }
.select2-container--default .select2-search--dropdown { padding: .8rem; }  
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--clr-border); }
.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 switch */
.form-switch { padding-left: 2.5em;
    .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; 
        &: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"); }
    }
}

/*** ---------- Gravity Form ---------- ***/
/* Even an empty inline .gform-icon makes the browser download GF's icon font. */
.gform-icon, .admin-hidden-markup { display: none !important; }

.gform_validation_errors, .gform_confirmation_message { --fs-val: clamp(1.4rem, 1.5vw, 1.6rem); --fw: 600; --clr: #FFFF; --bg-clr: var(--clr-success); --p: clamp(.8rem, 1vw, 1.2rem) clamp(1.2rem, 1.6vw, 2rem); color: var(--clr); background-color: var(--bg-clr); font-size: var(--fs-val); font-weight: var(--fw); padding: var(--p); border-radius: 0.4rem; outline: none; margin-bottom: 1.2rem;
    * { font-size: var(--fs-val); line-height: 1.3; font-weight: var(--fw); }
} 
.gform_validation_errors { --bg-clr: var(--clr-danger); }

.gform_confirmation_message { --bg-clr: var(--clr-success); --clr: #fff;
    hr { margin: 1em 0; border: none; border-top: 1px solid rgba(255,255,255,.4); }
    .btn.btn--link-white i { color: #fff; }
}

.gform_wrapper.gravity-theme { container: gform / inline-size; display: block!important; width: 100%;
    .gform_validation_container { display: none !important; left: -999rem; position: absolute !important; }  


    .gform_required_legend, .gfield_validation_message, .gfield_description { display: none; }

    .gform_body .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.4rem;
        .gfield { grid-column: span 12; 
            .gfield_label { --fs-label: 1.6rem; margin: 0; display: flex; font-size: var(--fs-label); font-weight: 600; column-gap: .6rem; color: var(--clr-contrast, var(--clr-text));
                .gfield_required { display: none; }
                .gfield_optional { font-weight: 500; font-size: 0.8em; opacity: .4; line-height: calc(var(--fs-label) + .6em); }
            }
            .ginput_container_consent{ position: relative;
                .gform-field-label::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer; }
            }
            .ginput_container_fileupload { 
                --br: var(--input-br); 
                --bg-clr: #FFFF; 
                --hover-clr: #FFFF;
                --hover-bg-clr: var(--clr-primary);
                --border: 1px solid var(--clr-border); 
                --hover-border: 1px solid transparent;
                --placeholder-clr: rgb(var(--clr-dark-rgb), .4); 
                --inline-padding: clamp(1rem, 2vw, 2.4rem); 
                --input-mh: 4.8rem; 
                position: relative;

                .gfield_description.gform_fileupload_rules { font-size: 1.4rem; color: rgb(var(--clr-dark-rgb), .4); text-align: start; margin: 0; margin-top: .8rem; padding: 0; line-height: 1; }
                input[type="file"] { width: 100%; text-align: start !important; font-family: var(--font-primary) !important; font-size: 1.4rem !important; font-weight: 400 !important; padding-left: 0 !important; line-height: var(--input-mh); cursor: pointer; color: var(--placeholder-clr) !important; border: var(--border); background-color: var(--bg-clr) !important; border-radius: var(--br) !important;
                    &::file-selector-button{ float: left; font-size: 1.6rem; background-color: var(--bg-clr) !important; border: none !important; font-weight: 700; height: var(--input-mh) !important; border-right: var(--border) !important; color: var(--clr-heading) !important; padding: 0 var(--inline-padding) !important; margin-right: var(--inline-padding); cursor: pointer; transition: background-color var(--ts-duration) var(--ts-function), color var(--ts-duration) var(--ts-function), border-right var(--ts-duration) var(--ts-function); }
                    &:hover {  
                        &::file-selector-button{ background-color: var(--hover-bg-clr) !important; color: var(--hover-clr) !important; border-right: var(--hover-border) !important; }
                    }
                }          
                @supports (-webkit-hyphens:none) {
                    input[type="file"] { display: flex !important; align-items: center !important; padding-left: 0 !important; 
                        &::file-selector-button{ border-right: var(--border) !important; padding-right: var(--inline-padding) !important; }
                    }
                }
                /* &:has(.gform_drop_area){
                    .gfield_description{ font-size: 1.2rem; color: rgb(255, 255, 255, .4); }
                    .gform_drop_area{ --border: 1px solid var(--clr-border); --br: 0; border: var(--border); border-radius: var(--br); }
                    .ginput_preview_list{ display: flex; flex-direction: column; gap: .4rem; margin-top: 1.2rem;
                        .ginput_preview{ margin: 0; padding: .8rem 1.2rem; border: 1px solid var(--clr-border); display: flex; align-items: center; border-radius: .2rem;
                            .gfield_fileupload_filename{ --line-clamp: 1; font-size: 1.4rem; margin-right: auto; padding-right: 1rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: var(--line-clamp); -webkit-box-orient: vertical; overflow: hidden;}
                            .gfield_fileupload_progress_complete{ display: none; }
                            .gfield_fileupload_filesize{ font-size: 1.2rem; opacity: .4; line-height: 1.2; white-space: nowrap; }
                            .gform_delete_file { color: var(--clr-danger); display: inline-grid; place-items: center;
                                .dashicons{ font-size: 1.4rem; height: fit-content; line-height: 1; }
                            }
                        }
                    }
                } */
            }

            &.gfield--type-consent {
                .ginput_container { cursor: pointer; display: flex; align-items: center; column-gap: .8rem;
                    .gform-field-label { margin: 0; font-size: 1.4rem; line-height: 1.4; }
                }
            }
        }
    }

    .gf_progressbar_wrapper { display: flex; justify-content: end; align-items: center; color: var(--progressbar-text-clr, var(--clr-primary-60)); font-size: 2rem; line-height: 1.2; gap: 2.4rem; font-family: var(--font-secondary); font-weight: 600;
        .gf_progressbar_title { margin: 0; order: 1; }
        .gf_progressbar { width: 10rem; height: .2rem; background-color: #fff; border-radius: .2rem; 
            .gf_progressbar_percentage { background-color: var(--progressbar-bg-clr, var(--clr-primary)); height: 100%; text-indent: -999rem; overflow: hidden; }
        }
    }

    .gform_footer { padding: 2rem 0 0 0; margin: 0; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
        p.form-privacy-notice { font-size: clamp(1.2rem, 1.2vw, 1.4rem); line-height: 1.5; opacity: .4; max-width: 32rem; 
            a { text-decoration: underline; text-underline-offset: 2px; }
        }
    }
    
    [id^="gform_ajax_spinner"] { --size: 2rem; --border-color: var(--clr-primary); display: inline-block; width: var(--size); height: var(--size); border-radius: 50%; border: 2px solid var(--border-color); border-top: 2px solid transparent; animation: rotate 1s linear infinite; margin-left: 1rem; }
}

@container gform (min-width: 40rem) { 
    .gform_wrapper { 
        .gform_body .gform_fields .gfield {
            &.gfield--width-half { grid-column: span 6; }
            &.gfield--width-third { grid-column: span 4; }
            &.gfield--width-two-thirds { grid-column: span 8; }
            &.gfield--width-quarter { grid-column: span 3; }
            &.gfield--width-three-quarters { grid-column: span 9; }
        }
    }
}

/* Form styles */

.wpb-form {
    &.wpb-form--light {
        input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type="file"], textarea { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.5); color: #fff; }
        input[type=checkbox], input[type=radio] { --border: 1px solid rgba(255, 255, 255, 0.5); --bg-clr: rgba(255, 255, 255, 0.05); } 
        .gfield--type-choice .gform-field-label { color: #FFFF; }
    }
}


#wux-filter-results { transition: opacity var(--ts-duration) ease, filter var(--ts-duration) ease; 
    &.--loading { opacity: .5; pointer-events: none; }
}

/* Custom select */
.wpb-select-dropdown{ --border: 1px solid var(--clr-border); --border-focus: 1px solid rgb(var(--clr-primary-rgb), .6); --bg-clr: #fff; --clr: var(--clr-heading); --clr-hover-bg: var(--clr-light, #f5f5f5); --fs: 1.4rem; --br: .4rem; position: relative; width: 100%; min-width: clamp(18rem, 20vw, 24rem); max-width: 48rem;
    .wpb-select-dropdown__selected{ display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; padding: 0 1.8rem; min-height: 4.8rem; border: var(--border); border-radius: var(--br); background: var(--bg-clr); color: var(--clr); cursor: pointer; transition: border-color var(--ts-25) ease;
        span{ font-family: var(--font-primary); font-size: var(--fs); font-weight: 400; text-wrap: nowrap; }
        &:hover, &:focus-visible{ border: var(--border-focus); outline: none; }
        i{ font-size: 1.2rem; transition: transform var(--ts-25) ease; }
    }
    .wpb-select-dropdown__options{ position: absolute; top: calc(100% + .4rem); left: 0; right: 0; margin: 0; padding: .4rem 0; list-style: none; background: var(--bg-clr); border: var(--border); border-radius: var(--br); box-shadow: 0 .4rem 1.2rem rgba(var(--clr-dark-rgb), .1); z-index: 10; opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity var(--ts-25) ease, transform var(--ts-25) ease, visibility var(--ts-25) ease; }
    .wpb-select-dropdown__option{ padding: 1rem 1.6rem; font-family: var(--font-primary); font-size: var(--fs); color: var(--clr); cursor: pointer; transition: background var(--ts-25) ease;
        &:hover, &:focus-visible{ background: var(--clr-hover-bg); outline: none; }
        &.is-active{ font-weight: 600; display: none; }
    }
    &.is-open{
        .wpb-select-dropdown__selected i.fa-chevron-down{ transform: rotate(180deg); }
        .wpb-select-dropdown__options{ opacity: 1; visibility: visible; transform: translateY(0); }
    }
}