/* =========================================================
   PREMIUM PRODUCT SEARCH
========================================================= */

.search-overlay {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 70px 20px 30px;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.search-overlay.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.search-overlay-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(10, 25, 14, .45);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* =========================================================
   PANEL
========================================================= */

.search-panel {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 760px;

    max-height: calc(100vh - 100px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.7);

    border-radius: 24px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 30px 90px rgba(0,0,0,.22);

    transform:
        translateY(-18px)
        scale(.98);

    transition:
        transform .3s ease;
}


.search-overlay.active .search-panel {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   HEADER
========================================================= */

.search-panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 20px 22px 14px;
}


.search-brand {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #26372b;

    font-size: 13px;
    font-weight: 700;
}


.search-brand i {
    color: #3d8646;

    font-size: 20px;
}


.search-close {
    width: 36px;
    height: 36px;

    display: flex;

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

    border: 0;

    border-radius: 10px;

    background: #f2f5f2;

    color: #6e7971;

    cursor: pointer;

    transition: .2s ease;
}


.search-close:hover {
    background: #e8eee9;

    color: #2e7d32;
}


.search-close i {
    font-size: 21px;
}


/* =========================================================
   INPUT
========================================================= */

.search-input-wrapper {
    position: relative;

    margin: 0 22px;

    height: 58px;

    display: flex;

    align-items: center;

    border: 1px solid #dce6de;

    border-radius: 15px;

    background: #f8faf8;

    transition: .2s ease;
}


.search-input-wrapper:focus-within {
    border-color: #79a97e;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(76,175,80,.08);
}


.search-input-icon {
    margin-left: 17px;

    color: #4b8d53;

    font-size: 21px;
}


.product-search-input {
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    padding: 0 45px 0 12px;

    background: transparent;

    color: #26372b;

    font-family: inherit;

    font-size: 14px;
}


.product-search-input::placeholder {
    color: #9aa49d;
}


.search-clear {
    position: absolute;

    right: 9px;

    width: 36px;
    height: 36px;

    display: none;

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

    border: 0;

    border-radius: 9px;

    background: #edf2ee;

    color: #7d8880;

    cursor: pointer;
}


.search-clear.visible {
    display: flex;
}


.search-clear:hover {
    color: #2e7d32;
}


/* =========================================================
   CONTENT
========================================================= */

.search-results {
    min-height: 250px;

    overflow-y: auto;

    padding: 24px 22px;
}


.search-results::-webkit-scrollbar {
    width: 5px;
}


.search-results::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background: #d2ddd4;
}


/* =========================================================
   DEFAULT
========================================================= */

.search-default {
    text-align: center;

    padding: 25px 10px;
}


.search-default-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    margin: 0 auto 15px;

    border-radius: 17px;

    background: #edf7ee;

    color: #3d8646;
}


.search-default-icon i {
    font-size: 28px;
}


.search-default h3 {
    margin: 0 0 6px;

    color: #29372e;

    font-family: Georgia, serif;

    font-size: 21px;
}


.search-default p {
    margin: 0 auto 22px;

    max-width: 380px;

    color: #89948c;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   POPULAR
========================================================= */

.popular-searches > span {
    display: block;

    margin-bottom: 10px;

    color: #8a958d;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.popular-tags {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;
}


.popular-tags button {
    padding: 8px 12px;

    border: 1px solid #dce6de;

    border-radius: 999px;

    background: white;

    color: #56705b;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;

    transition: .2s ease;
}


.popular-tags button:hover {
    border-color: #9cc1a1;

    background: #edf7ee;

    color: #2e7d32;
}


/* =========================================================
   LOADING
========================================================= */

.search-loading {
    display: none;

    flex-direction: column;

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

    gap: 10px;

    min-height: 220px;

    color: #8a958d;

    font-size: 11px;
}


.search-loading.active {
    display: flex;
}


.search-spinner {
    width: 30px;
    height: 30px;

    border: 3px solid #dce9de;

    border-top-color: #3d8646;

    border-radius: 50%;

    animation:
        searchSpin .8s linear infinite;
}


@keyframes searchSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   PRODUCTS
========================================================= */

.search-products {
    display: none;

    flex-direction: column;

    gap: 8px;
}


.search-products.active {
    display: flex;
}


.search-product {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 10px;

    border: 1px solid transparent;

    border-radius: 14px;

    background: #fafcf9;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.search-product:hover {
    border-color: #dce8de;

    background: #f3f8f3;

    transform: translateX(2px);
}


.search-product-image {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: flex;

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

    overflow: hidden;

    border-radius: 11px;

    background: white;
}


.search-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.search-product-info {
    min-width: 0;

    flex: 1;
}


.search-product-category {
    display: block;

    margin-bottom: 3px;

    color: #76907b;

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.search-product-name {
    display: block;

    overflow: hidden;

    color: #29372e;

    font-size: 12px;

    font-weight: 650;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.search-product-price {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 5px;
}


.search-final-price {
    color: #2e7d32;

    font-size: 12px;

    font-weight: 700;
}


.search-original-price {
    color: #a0aaa2;

    font-size: 9px;

    text-decoration: line-through;
}


.search-discount {
    padding: 3px 5px;

    border-radius: 5px;

    background: #eaf5eb;

    color: #3f8848;

    font-size: 8px;

    font-weight: 700;
}


.search-product-arrow {
    color: #a2aca5;

    font-size: 18px;
}


/* =========================================================
   EMPTY
========================================================= */

.search-empty {
    display: none;

    text-align: center;

    padding: 35px 10px;
}


.search-empty.active {
    display: block;
}


.search-empty-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin: 0 auto 13px;

    border-radius: 15px;

    background: #f2f5f2;

    color: #9aa49d;
}


.search-empty-icon i {
    font-size: 25px;
}


.search-empty h3 {
    margin: 0 0 5px;

    color: #48564c;

    font-size: 15px;
}


.search-empty p {
    margin: 0;

    color: #929c95;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   FOOTER
========================================================= */

.search-panel-footer {
    display: flex;

    justify-content: space-between;

    padding: 13px 22px;

    border-top: 1px solid #edf1ed;

    color: #9aa49d;

    font-size: 9px;
}


.search-panel-footer span {
    display: flex;

    align-items: center;

    gap: 5px;
}


.search-panel-footer i {
    color: #4c9154;

    font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .search-overlay {
        padding: 0;
    }


    .search-panel {
        width: 100%;

        height: 100%;

        max-height: none;

        border: 0;

        border-radius: 0;

        transform: translateY(20px);
    }


    .search-overlay.active .search-panel {
        transform: translateY(0);
    }


    .search-panel-header {
        padding:
            18px
            16px
            13px;
    }


    .search-input-wrapper {
        margin: 0 16px;

        height: 54px;
    }


    .search-results {
        padding: 20px 16px;
    }


    .search-panel-footer {
        padding: 12px 16px;
    }


    .search-product-image {
        width: 58px;
        height: 58px;

        flex-basis: 58px;
    }

}