/*
==================================================
LASP SEARCH OVERLAY
==================================================
*/

.lasp-search-overlay{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}

.lasp-search-overlay.is-open{

    opacity:1;

    visibility:visible;

}






/*
==========================
BACKDROP
==========================
*/

.lasp-search-overlay__backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

}





/*
==========================
PANEL
==========================
*/

.lasp-search-overlay__panel{

    position:relative;

    width:100%;

    background:#ffffff;

    z-index:2;

    transform:translateY(-60px);

    transition:transform .4s ease;

    box-shadow:

        0 20px 80px rgba(0,0,0,.08);

}

.lasp-search-overlay.is-open
.lasp-search-overlay__panel{

    transform:translateY(0);

}





/*
==========================
INNER
==========================
*/

.lasp-search-overlay__inner{

    max-width:1200px;

    margin:0 auto;

    padding:90px 40px 70px;

}





/*
==========================
LABEL
==========================
*/

.lasp-search-overlay__label{

    font-size:14px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#888;

    margin-bottom:22px;

}





/*
==========================
FORM
==========================
*/

.lasp-search-overlay__form{

    display:flex;

    gap:20px;

    align-items:center;

}





/*
==========================
INPUT
==========================
*/

.lasp-search-overlay__input{

    flex:1;

    height:72px;

    border:none;

    border-bottom:1px solid #d9d9d9;

    outline:none;

    background:transparent;

    font-size:34px;

    font-weight:300;

    color:#111;

    padding:0;

}

.lasp-search-overlay__input::placeholder{

    color:#bdbdbd;

}





/*
==========================
BUTTON
==========================
*/

.lasp-search-overlay__submit{

    width:180px;

    height:58px;

    border:1px solid #111;

    background:#111;

    color:#fff;

    cursor:pointer;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.3s;

}

.lasp-search-overlay__submit:hover{

    background:#fff;

    color:#111;

}





/*
==========================
CLOSE
==========================
*/

.lasp-search-overlay__close{

    position:absolute;

    top:28px;

    right:34px;

    width:48px;

    height:48px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:42px;

    font-weight:200;

    color:#222;

    line-height:1;

    transition:.25s;

    z-index:5;

}

.lasp-search-overlay__close:hover{

    transform:rotate(90deg);
	background:none;

}





/*
==========================
RESPONSIVE
==========================
*/

@media(max-width:992px){

    .lasp-search-overlay__inner{

        padding:80px 24px 50px;

    }

    .lasp-search-overlay__form{

        flex-direction:column;

        align-items:stretch;

    }

    .lasp-search-overlay__input{

        font-size:26px;

        height:64px;

    }

    .lasp-search-overlay__submit{

        width:100%;

    }

}