/* 
Author: Procom
*/


.sls-grid {
    padding: 20px;
}
.sls-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.sls-left {
    width: 30%;
}
.sls-right {
    width: 68%;
}

#sls-search-input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}

#sls-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 95vw;

    background: #fff;
    border: 1px solid #ddd;
    display: none;
    z-index: 9999;

    overflow-y: auto;
    max-height: 600px;
}

.sls-results {
    display: none;
}

.sls-results.active {
    display: block !important;
}


.sls-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.sls-input-group {
    display: flex;
    align-items: center;
    border: 2px solid #ff6210;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f3f3;
}

/* INPUT */
#sls-search-input {
    flex: 1;
    padding: 11px 20px;
    border: none;
    outline: none;
    background: transparent;
}

button.sls-btn img {
    width: 16px;
}

/* CLEAR (X) BUTTON */
.sls-clear {
    font-size: 22px;
    padding: 0 15px;
    color: #aaaaaa00;
}

.sls-clear.active {
    display: block;
    color: #000;
    cursor: pointer;
}


/* SEARCH BUTTON */
.sls-btn {
    background: linear-gradient(135deg, #ff6210, #ff6210);
    border: none;
    padding: 16px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.sls-btn:hover {
    opacity: 0.9;
}

.sls-products {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    max-width: 707px;
    gap: 4px;
}
.sls-product {
    width: 30%;
    padding: 10px;
}
.sls-product:hover {
    background-color: #efefef;
    transition: 0.1s ease-in;
}
.sls-product a, .sls-product span.woocommerce-Price-amount.amount {
    font-size: 12px;
    text-wrap: auto;
    color: #000;
}
.sls-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.sls-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.sls-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sls-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 36px;
}
.sls-list li::before {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.6 3.75C6.76295 3.75 3.75 6.77915 3.75 10.5409C3.75 14.3001 6.76045 17.3318 10.5 17.3318C11.9854 17.3318 13.3777 16.8561 14.5821 15.9089L18.6227 19.975C18.7663 20.1195 19.0288 20.25 19.3 20.25C19.5712 20.25 19.8337 20.1195 19.9773 19.975C20.1209 19.8305 20.25 19.567 20.25 19.2956C20.25 19.185 20.2027 19.0662 20.1614 18.9831C20.1162 18.8922 20.052 18.792 19.9773 18.7169L15.9348 14.6489C16.8771 13.4366 17.35 12.0355 17.35 10.5409C17.35 6.78165 14.3395 3.75 10.6 3.75ZM5.65 10.5409C5.65 7.85986 7.83955 5.65881 10.5 5.65881C13.1605 5.65881 15.35 7.85986 15.35 10.5409C15.35 13.3225 13.2605 15.423 10.5 15.423C7.83955 15.423 5.65 13.2219 5.65 10.5409Z' fill='%23333333'/%3E%3C/svg%3E%0A");
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: 22px;
    margin-right: 5px;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.sls-list li a {
    text-decoration: none;
    display: block;
    color: #333;
}

.sls-item a {
    font-weight: bold;
    text-decoration: none;
}
.sls-dropdown.sls-grid h4 {
    border-bottom: 1px solid #333;
    font-weight: 500;
    color: #333;
    font-size: 18px;
    padding-bottom: 7px;
}

.sls-see-all {
    grid-column: 1 / -1;
    text-align: center;
    padding: 15px;
    border-top: 1px solid #eee;
}

.sls-see-all a {
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border-radius: 6px;
}

.sls-see-all a:hover {
    opacity: 0.9;
}

.sls-stars {
    display: flex;
    gap: 2px;
    font-size: 10px;
    margin-top: 4px;
}
.star {
    color: #ddd;
}
.star.full {
    color: #000;
}
.star.half {
    color: #000;
    opacity: 0.6;
}
.star.empty {
    color: #ddd;
}


@media(max-width: 800px) {
    #sls-results {
        left: 0%;
        transform: translateX(0%);
    }
    .sls-left, .sls-right {
        width: 100%;
    }
    .sls-product {
        width: 45%;
    }
}