/* Main Form Styling */

#form-main {
    padding:10px;
    background:white;
    border-radius:var(--theme--button-radius);
}

.quick-search-fields{
    & .form-group-holder {
        padding: 5px;
        margin: 5px;
        background:#fff;
        border-radius:var(--theme--border-radius);

        & .form-group {
            position:relative;


            & label{
                position: absolute;
                font-size: 0.77778em;
                line-height: 1em;
                color: #4a4a4a;
                left: 45px;
                font-family: var(--theme--heading-font);
                z-index:100;
                pointer-events:none;
                white-space: nowrap
            }

            & .form-control {
                display: block;
                padding: 17px 15px 0px;
                position: relative;
                box-sizing:border-box;
                border-radius:0;
                border:1px solid white;
                font-size: 0.77778em;
                font-family: var(--theme--body-font);
                z-index:1;
                cursor:pointer;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                margin-left:30px;
                
                &.dateRangePicker {
                    width: calc(100% - 20px);
                    min-width: 220px;
                }

                &:focus{
                    box-shadow: unset;
                    outline:unset;
                }

                &:disabled {
                    background:unset;
                    color:var(--theme--primary-color,#bba386);
                    font-weight:600;
                }
            }
        }
    }
}
#mobile-search-bar-bottom-holder {
    & .form-group-holder {
     & .form-group {   
         & .form-control {
              font-size: inherit;
         }
     }
    }
}

.form-buttons {
    & .button-holder:not(.hidden){
        display:flex;
        align-items:center;

        & .form-control{

            &.button {
                line-height: 32px;
                font-size: 16px;
                border: 1px solid var(--theme--primary-color,#BDA588);
                padding: 0.8rem;
                font-family: var(--theme--body-font);
                font-weight:500;
                cursor:pointer;
                gap: 10px;
                text-transform: uppercase;
                text-align:center;
                

                & i {
                    margin:0;
                    padding:0;
                    display: block;
                }

                &:not(.outline) {
                    background: var(--theme--primary-color,#BDA588);
                    color: white;
                }
            }
        }
    }
}

.search-banner-button{
    line-height: 1.9;
    height: 100%;
    color:#fff;
    background-color: var(--theme--primary-color);
    border: 1px solid var(--theme--primary-color,#BDA588);
    padding-top: calc(0.667em + 2px);
    padding-right: calc(1.333em + 2px);
    padding-bottom: calc(0.667em + 2px);
    padding-left: calc(1.333em + 2px);
    font-family: var(--theme--body-font);
    font-weight:500;
    cursor:pointer;
    gap: 10px;
    text-transform: uppercase;
    text-align:center;
}

/* Icons */

.formIcon {
    position:relative;
}
.formIcon::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 200;
    font-size: 1em;
    position: absolute;
    top: 0;
    left: 10px;
    pointer-events: none;
    color: var(--theme--primary-color);
    z-index: 100;
}
.formIcon.suburb::before,
.formIcon.regions::before{
    content: '\f3c5';
}
.formIcon.sleeps::before {
    content: '\f0c0';
}
.formIcon.bedrooms::before {
    content: '\f236';
}
.formIcon.bathrooms::before {
    content: '\f2cd';
}
.formIcon.dates::before {
    content: '\f073';
}
.formIcon.keyword::before {
    content: '\f002';
}
.formIcon.sortby::before {
    content: '\f160';
}
.formIcon.group::before{
    content: '\f0c0';
}
.formIcon.property::before{
    content: '\f015';
}
.formIcon.listingcat::before,
.formIcon.amenities::before,
.formIcon.custom::before{
    content: '\f03a';
}
.formIcon .form-control {
    background: none;
    background-color:#fff;
}

/* Advanced Search Filter Styling */
#advancedSearch {
    cursor:pointer;
}

#mobile-search-bar-bottom-holder-wrapper,
#advanced-search-filters-wrapper {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:999;
    pointer-events:none;
    transition-duration:300ms;
    opacity:0;
    max-width:100vw;

    & .clickbox {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background: #000000aa;
        z-index:1;
        max-width:100vw;
    }

    & .btn-close {
        display:block;
        padding: 0.5em 1em;
        position:absolute;
        top:20px;
        right:20px;
        cursor: pointer;
        transition-duration: 300ms;
        z-index:3;
        
        &:hover {
            transform:rotate(90deg);
        }
    }

    &.active {
        opacity:1;
        pointer-events:initial;
    }

    & #mobile-search-bar-bottom-holder,
    & #advanced-search-filters-holder {
        background: var(--wp--preset--color--sand);
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        height:100vh;
        display:flex;
        align-items:center;
        padding: 2rem;
        min-width:280px;
        transition-duration:300ms;
        transform:translateX(500px);
        pointer-events: initial;
        z-index:2;
    }

    &.active #mobile-search-bar-bottom-holder,
    &.active #advanced-search-filters-holder{
        transform:translateX(0);
    }

    
}

body.admin-bar #advanced-search-filters-wrapper .btn-close {
    top: 52px;
}

@media screen and (max-width:782px){
   body.admin-bar #advanced-search-filters-wrapper .btn-close {
        top: 62px;
    } 
}

/* Advanced Modal Styling */

#advancedOptionsModal {
    .form-group {
        padding-bottom:0.5em;
        &.formIcon {
            &:before{
                left:unset;
                right:0;
                z-index: 1;
            }
        }
        & label {
            font-size:14px;
            font-weight:700;
            display:block;
            padding-bottom:0.25em;
        }

        & .form-control {
            width:100%;
            padding:0.5em;
        }

        & .tail-select {
            margin: 0;
            width:100%;
            font-size: inherit;
            line-height: 26px;

            & .select-label {
                border-color: transparent;
                padding-top: 8px;
                padding-bottom:8px;
                border-radius:0;
                box-shadow:unset;
                -webkit-box-shadow:unset;
            }
        }
    }

    & #advancedOptionsApply {
        text-align:center;
        width:100%;
        padding: 10px;
        background: var(--theme--primary-color);
        color:white;
        text-transform: uppercase;
        font-weight:500;
        margin-top: 15px;
        cursor:pointer;
    }
}

@media screen and (max-width:1024px){
    #mobile-search-bar-bottom-holder {
    & .form-group-holder {
     & .form-group {   
         & .form-control {
              font-size: clamp(13px, 2.5vw, 16px);
              &.dateRangePicker {
                    min-width: unset;
                }
         }
     }
    }
    

                
}

}
@media screen and (max-width:380px){
.form-buttons {
    & .button-holder:not(.hidden){
        display:flex;
        align-items:center;

        & .form-control{

            &.button {
                font-size: 12px;
            }
        }
    }
}
}