/* wrapper */
.autocomplete-wrapper{
    position: relative;
}

/* suggestions dropdown */
#suggestions{
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;

    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;

    margin-top: 6px;

    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;

    max-height: 280px;
    overflow-y: auto;

    z-index: 9999;
    display: none;

    animation: fadeIn .18s ease;
}

/* animation */
@keyframes fadeIn{
    from{
        opacity:0;
        transform: translateY(-5px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}

/* item */
.suggest-item{
    padding:12px 16px;
    cursor:pointer;
    transition:.15s;
}

.suggest-item:hover,
.suggest-item.active{
    background:#f1f5ff;
}

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

/* row layout */
.suggest-row{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

/* icon */
.icon{
    font-size:18px;
    margin-top:2px;
}

/* title */
.title{
    font-size:15px;
    font-weight:600;
    color:#111827;
}

/* meta */
.meta{
    font-size:13px;
    color:#6b7280;
}

.highlight{
    background:#fff3cd;
    padding:1px 0px;
}


/* subtitle */
.suggest-header{
    padding:10px 16px;
    font-size:12px;
    font-weight:600;
    color:#6b7280;
    background:#fafafa;
    border-bottom:1px solid #eee;
}

.subtitle{
    font-size:12px;
    font-weight:600;
    color:#6c757d;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* loader spinner */
.loader{
    position: absolute;
    right: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border: 3px solid #ddd;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: none;
}

@keyframes spin{
    100%{ transform: rotate(360deg); }
}

/* mobile */
@media(max-width:768px){
    #suggestions{
        max-height: 220px;
    }
}