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

.desktop-search-overlay {
opacity: 0;


pointer-events: none;

display: flex;
align-items: center;
justify-content: flex-end;

padding-left: 2rem;

transition:
    opacity 0.2s ease;


}

#headerCenter.search-active .desktop-search-overlay {
opacity: 1;


pointer-events: auto;


}

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

.desktop-search-form {
width: 100%;
max-width: 1000px;


opacity: 0;

transform:
    scaleX(0);

transform-origin: right center;

transition:
    transform 0.28s ease,
    opacity 0.2s ease;


}

#headerCenter.search-active .desktop-search-form {
transform:
scaleX(1);


opacity: 1;


}

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

.desktop-search-form input {
width: 100%;


height: 42px;

border: 0;
border-radius: 999px;

padding-left: 20px;
padding-right: 20px;

box-shadow: none !important;

background: #fff;


}

/* =========================================================
PLACEHOLDER
========================================================= */

.desktop-search-form input::placeholder {
color: #7d7d7d;
}

/* =========================================================
SEARCH TOGGLE
========================================================= */

.desktop-search-toggle {
width: 42px;
height: 42px;


display: flex;
align-items: center;
justify-content: center;

padding: 0;

border: 0;
background: transparent;

cursor: pointer;

position: relative;
z-index: 20;

transition:
    opacity 0.2s ease,
    transform 0.2s ease;


}

.desktop-search-toggle:hover {
opacity: 0.82;
}

/* =========================================================
NAV FADE
========================================================= */

.desktop-nav-wrap {
transition:
opacity 0.2s ease,
transform 0.25s ease;
}

#headerCenter.search-active .desktop-nav-wrap {
opacity: 0;


transform: translateY(-6px);

pointer-events: none;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 991px) {


.desktop-search-overlay {
    display: none !important;
}


}