/* SEARCH + CATEGORIES */

.discover-bar{
    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:15px;

    background:transparent;

    backdrop-filter:none;

    pointer-events:none;
}

.search-wrapper,
.category-scroll{
    pointer-events:auto;
}

.search-wrapper{
display:flex;
justify-content:flex-end;
margin-bottom:10px;
}

.search-icon{
position:static;
font-size:34px;
color:white;
cursor:pointer;
}

#searchInput{
display:none;
}

#searchInput:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(109, 60, 255, .10);
}

.search-suggestions {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(20, 20, 45, .15);
    z-index: 100;
}

.suggestion-item {
    padding: 14px 17px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f5;
    font-size: 14px;
    font-weight: 600;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: #faf8ff;
    color: var(--purple);
}

.category-scroll{
display:flex;
gap:15px;
overflow-x:auto;
padding:0;
scrollbar-width:none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.category{

    white-space:nowrap;

    border:none;

    background:#ffffff;

    color:#555;

    padding:12px 22px;

    border-radius:40px;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    transition:all .3s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.category:hover{

    transform:translateY(-2px);

}

.category:hover,
.category.active-category{

    color:#fff;

    background:linear-gradient(
        135deg,
        #6d3cff,
        #ff4fa3
    );

    transform:scale(1.05);

    box-shadow:0 10px 24px rgba(109,60,255,.35);

}

.discover-bar{

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

}

.hide-bar{

transform:
translateY(-100%);

opacity:0;

pointer-events:none;

}