/*==================================================
AJAX SEARCH
==================================================*/

.hero-search {
    position: relative;
}

#terminal-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    border: 1px solid #e5e7eb;
    z-index: 9999;
    display: none;
    max-height: 550px;
    overflow-y: auto;
}

/* Scrollbar */

#terminal-search-results::-webkit-scrollbar {
    width: 8px;
}

#terminal-search-results::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 20px;
}

#terminal-search-results::-webkit-scrollbar-track {
    background: #f8fafc;
}

/*======================================
Category Header
======================================*/

.search-category{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 20px;

    background:#f8fafc;

    color:#0d6efd;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    border-bottom:1px solid #e5e7eb;

    transition:.25s;

}

.search-category:hover{

    background:#eef4ff;

    color:#0a58ca;

}

.search-category i{

    font-size:18px;

}

/*======================================
Search Item
======================================*/

.search-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 14px 18px;

    text-decoration: none;

    color: inherit;

    transition: .25s;

    border-bottom: 1px solid #eef2f7;

    background: #fff;

}

.search-item:hover {

    background: #f8fbff;

}

/*======================================
Thumbnail
======================================*/

.search-thumb {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

}

.search-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    display: block;

}

/*======================================
Content
======================================*/

.search-content {

    flex: 1;

    min-width: 0;

}

/* Category */

.search-content small {

    display: inline-block;

    margin-bottom: 6px;

    padding: 2px 8px;

    background: #eef4ff;

    color: #0d6efd;

    font-size: 11px;

    font-weight: 600;

    border-radius: 30px;

    text-transform: uppercase;

}

/* Title */

.search-content h6 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.4;

    color: #111827;

    text-align: left;

}

/* Excerpt */

.search-content p {

    margin: 5px 0 0;

    font-size: 13px;

    color: #64748b;

    line-height: 1.5;

    text-align: left;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

/*======================================
Empty
======================================*/

.search-empty {

    padding: 25px;

    text-align: center;

    color: #6b7280;

    font-size: 15px;

}

/*======================================
Loading
======================================*/

.search-loading {

    display: none;

    position: absolute;

    top: 50%;

    right: 120px;

    transform: translateY(-50%);

    width: 20px;

    height: 20px;

    border: 3px solid #dbeafe;

    border-top-color: #0d6efd;

    border-radius: 50%;

    animation: searchSpin .7s linear infinite;

}

@keyframes searchSpin {

    to {
        transform: translateY(-50%) rotate(360deg);
    }

}

/*======================================
Responsive
======================================*/

@media(max-width:767px){

    #terminal-search-results{

        border-radius:12px;

    }

    .search-thumb{

        width:50px;

        height:50px;

    }

    .search-content h6{

        font-size:14px;

    }

    .search-content p{

        font-size:12px;

    }

}