/**
 * ==========================================================================
 * Builder Search
 * ==========================================================================
 */

.builder-search{
    position:relative;
    z-index:100;
}

.builder-search-box{
    position:relative;
}

.builder-search-box input{
    width:100%;
    height:65px;
    padding:0 110px 0 0;
    background:transparent;
    color:#fff;
    font-size:24px;
    font-weight:400;
    letter-spacing:.02em;
    border: 0;
    border-top:1px solid rgba(255,255,255,.35);
    border-bottom:1px solid rgba(255,255,255,.35);
    outline:none;
    transition:.25s;
}

.builder-search-box input::placeholder{

    color:rgba(255,255,255,.75);

}

.builder-search-box input:focus{

    border-color:#FF5126;

}

.builder-search-button{

    position:absolute;

    top:50%;
    right:28px;

    transform:translateY(-50%);

    width:44px;
    height:44px;

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

    background:none;
    border:none;

    color:#fff;

    pointer-events:none;

}

.builder-search-button svg{

    width:42px;
    height:42px;

}


/* ==========================================================
Dropdown
========================================================== */

.builder-search-result{

    position:absolute;

    top:100%;
    left:0;
    right:0;

    margin:0;
    padding:0;

    list-style:none;

    background:#0e0e0e;

    border:1px solid rgba(255,255,255,.12);
    border-top:none;

    opacity:0;
    visibility:hidden;

    transform:translateY(-8px);

    transition:.18s ease;

    max-height:520px;

    overflow:auto;

}

.builder-search-result.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

.builder-search-result li{

    margin:0;

}

.builder-search-result a{
    display:flex;
    align-items:center;
    gap:18px;
    padding:10px 20px;
    color:#fff;
    text-decoration:none;
    transition:.2s;
    position: relative;
}

.builder-search-result a:hover,
.builder-search-result a.active{

    background:#1c1c1c;

}

.builder-search-result img{
    width:72px;
    height:72px;
    object-fit:cover;
    flex-shrink:0;
}

.builder-search-info{

    flex:1;

}


.builder-search-info::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    right: 15px;
    bottom: 15px;
    background: url(../images/icon/arrow-headline-down-while.webp) no-repeat center;
    background-size: contain;
}

.builder-search-name{

    font-size:18px;
    font-weight:700;
    line-height:1.3;

}

.builder-search-brand{

    margin-top:4px;

    font-size:14px;

    color:rgba(255,255,255,.72);

    text-transform:uppercase;

}

.builder-search-result mark{

    background:transparent;

    color:#FF5126;

    font-weight:700;

    padding:0;

}

/* ==========================================================
No Result
========================================================== */

.builder-search-empty{

    list-style:none;

}

.builder-search-empty-text{

    padding:10px 20px;

    text-align:left;

    font-size:18px;

    color:rgba(255,255,255,.55);

    user-select:none;

    pointer-events:none;

}

.builder-search-empty-text strong{

    display:block;

    font-size:18px;

    font-weight:700;

    color:#fff;

}

.builder-search-empty-text span{

    display:block;

    margin-top:6px;

    font-size:14px;

    color:rgba(255,255,255,.55);

}


/* ==========================================================
Mobile
========================================================== */

@media(max-width:768px){

.builder-search{

    margin:0;

}

.builder-search-box input{

    height:55px;

    font-size:20px;

    padding:0 76px 0 0;

}

.builder-search-button{

    right:18px;

}

.builder-search-button svg{

    width:32px;
    height:32px;

}

.builder-search-result img{

    width:58px;
    height:58px;

}

.builder-search-name{

    font-size:16px;

}

.builder-search-brand{

    font-size:13px;

}

}