/*********************************************
 * Search popup
**********************************************/
html.search-open {overflow:hidden; padding-right:var(--vii-scroll-bar-width);}
html:not(.search-open) .vii-search-popup {visibility:hidden; opacity:0;}

/* form popup */
.vii-search-popup {padding:24vh 20px 0;}
.vii-search-popup .vii-search-form {--search-field-height:50px;}

/* close */
.vii-search-popup__close {background:rgba(27, 27, 27, 0.7);}


/*********************************************
 * Search form
**********************************************/
/* form */
.vii-search-form {
    --search-field-height:50px;
    --search-field-bg:#fff;
    width:100%; max-width:600px;
}

/* input */
.vii-search-form__field {
    height:var(--search-field-height); width:100%; border:1px solid #5d667c17; font-size:16px;
    padding:5px calc(var(--search-field-height) + 5px) 5px 20px; background:var(--search-field-bg);
    -webkit-appearance:none !important; -webkit-border-radius:3px !important; border-radius:3px !important;
}
.vii-search-form__field:hover,
.vii-search-form__field:focus {border-color:var(--vii-color-blue);}

/* submit */
.vii-search-form__submit {
    --btn-bg:var(--vii-color-primary);
    --btn-bg-hover:var(--vii-color-blue);
    height:var(--search-field-height); aspect-ratio:1;
    font-size:1.2em; color:#fff;
    background:linear-gradient(to right, var(--btn-bg-hover) 0%, var(--btn-bg-hover) 50%, var(--btn-bg) 50%, var(--btn-bg) 100%) 100%;
    background-size:202% 100%; border-radius:0 3px 3px 0;
}
.vii-search-form__submit:hover {
    background-position:0;
}


/* mobile menu */
html:not(.search-open) .site-nav--mobile .vii-search-popup {
    opacity:1; visibility:visible;
    padding:0; position:static; display:none;
}
.site-nav--mobile .vii-search-popup__close {display:none;}

/*********************************************
 * Search form Responsive
**********************************************/
@media only screen and (max-width:480px) {
    /* mobile menu */
    .site-nav--mobile__search {padding-bottom:20px;}
    .site-nav--mobile__search:before {
        content:"";
        position:absolute; left:-20px; right:-20px; bottom:0; height:1px; background:#5d667c17;
    }
    html:not(.search-open) .site-nav--mobile .vii-search-popup {display:block;}
}