/*********************************************
 * Search popup
**********************************************/
html.search-open {overflow:hidden;}
html:not(.search-open) .vii-search-popup {visibility:hidden; opacity:0;}

/* form popup */
.vii-search-popup {padding:calc(15vh + var(--vii-header-height)) var(--vii-gap-container) 20vh; z-index:21;}
.vii-search-popup .vii-search-form {--search-field-height:48px; width:100%; max-width:600px;}

/* Popup input */
.vii-search-popup .vii-form-field {
    --form-bg:rgba(0, 0, 0, 0);
    --form-bg-hover:rgba(0, 0, 0, 0);
    --form-color:#000;
    --form-color-hover:var(--vii-color-primary);
    --form-placeholder-color:rgba(0, 0, 0, .5);
    --form-radius:0px;
    --form-font-size:var(--vii-size-28);
    border:none; border-bottom:2px solid #000; padding-bottom:5px; padding-left:0;
}
.vii-search-popup .vii-form-field::placeholder {font-size:var(--vii-size-28);}
.vii-search-popup .vii-form-field:hover::placeholder,
.vii-search-popup .vii-form-field:focus::placeholder {color:rgba(0, 0, 0, .2);}
.vii-search-popup .vii-search-form__submit {border-radius:0; color:#000; font-size:1.5em; right:-10px;}
.vii-search-popup .vii-search-form__submit:hover {color:var(--vii-color-blue); background:rgba(0, 0, 0, 0);}

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


/*********************************************
 * Search form
**********************************************/
/* form */
.vii-search-form {
    --form-field-height:48px;
    --search-field-height:48px;
    --form-radius:8px;
}

/* input */
.vii-search-form__field {padding-right:var(--form-field-height); max-width:180px;}

/* submit */
.vii-search-form__submit {
    height:var(--search-field-height); aspect-ratio:1; border-radius:var(--form-radius);
    background:none; font-size:1.2em; color:var(--vii-color-blue);
}
.vii-search-form__submit:hover {color:var(--vii-color-secondary);}

/* Large search form */
.large-search .vii-search-form__field {max-width:100%;}

/* Button close */
.vii-search-popup__close-button {
    width:40px; aspect-ratio:1;
    background:var(--vii-color-primary); color:var(--vii-color-on-primary);
    top:10px; right:10px;
}
.vii-search-popup__close-button:hover {background:#f00;}


/*********************************************
 * Search form Responsive
**********************************************/
@media only screen and (max-width:1024px) {
}