/*
HEADER SEARCH TRIGGER
*/

.wcp-header-search-trigger {

    position: fixed;

    top: 200px;

    right: 0;

    z-index: 999999;
}

/*
SEARCH ICON BUTTON
*/

.wcp-search-toggle-btn {

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 10px 0 0 10px;

    background: #111;

    color: #d4c18f;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.wcp-search-toggle-btn:hover {

    background: #d4c18f;

    color: #111;

    transform: translateX(-4px);
}

/*
HEADER SEARCH BAR
*/

.wcp-header-search-bar {

    position: fixed;

    top: 86px;

    left: 0;

    width: 100%;

    padding: 14px 20px;

    z-index: 999998;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.wcp-header-search-bar.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

/*
INNER WRAPPER
*/

.wcp-header-search-inner {

    width: 100%;

    max-width: 1380px;

    margin: 0 auto;
}

/*
SEARCH WRAPPER
*/

.wcp-search-wrap {

    position: relative;

    width: 100%;
}

/*
INPUT WRAPPER
*/

.wcp-search-input-wrap {

    position: relative;
}

/*
SEARCH INPUT
*/

.wcp-search-input {

    border: solid 2px #000 !important;

    width: 100%;

    height: 52px;

    border: none;

    border-radius: 8px !important;

    background: #f2f2f2;

    color: #111;

    font-size: 20px;

    padding: 0 70px 0 18px;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.wcp-search-input:focus {

    outline: none;

    background: #fff;

    box-shadow: 0 0 0 2px rgba(212,193,143,0.3);
}

/*
CLEAR BUTTON
*/

.wcp-search-clear {

    position: absolute;

    top: 50%;

    right: 22px;

    transform: translateY(-50%);

    width: 24px;

    height: 24px;

    border: none;

    background: transparent;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;

    color: #666;

    padding: 0;

    z-index: 3;
}

.wcp-search-clear.active {

    display: flex;
}

/*
LOADER
*/

.wcp-search-loader {

    position: absolute;

    top: 50%;

    right: 20px;

    transform: translateY(-50%);

    width: 28px;

    height: 28px;

    border: 3px solid rgba(0,0,0,0.12);

    border-top-color: #111;

    border-radius: 50%;

    animation: wcpSpin 0.7s linear infinite;

    display: none;

    z-index: 2;
}

.wcp-search-loader.active {

    display: block;
}

@keyframes wcpSpin {

    to {

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

/*
SEARCH RESULTS
*/

.wcp-search-results {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: 100%;

    background: #fff;

    border-radius: 0 0 10px 10px;

    overflow: hidden;

    box-shadow: 0 18px 50px rgba(0,0,0,0.12);

    display: none;

    z-index: 999999;

    max-height: 70vh;

    overflow-y: auto;
}

/*
SEARCH ITEM
*/

.wcp-search-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 18px;

    text-decoration: none;

    color: #111;

    border-bottom: 1px solid #ececec;

    transition: background 0.2s ease;
}

.wcp-search-item:hover {

    background: #f7f7f7;
}

/*
PRODUCT IMAGE
*/

.wcp-search-image img {

    width: 58px;

    height: 58px;

    object-fit: cover;

    border-radius: 6px;

    display: block;
}

/*
CONTENT
*/

.wcp-search-content {

    flex: 1;
}

.wcp-search-title {

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;
}

.wcp-search-price {

    margin-top: 4px;

    font-size: 13px;

    opacity: 0.75;
}

/*
CATEGORY LABEL
*/

.wcp-search-category {

    margin-top: 4px;

    font-size: 12px;

    color: #888;
}

/*
NO RESULTS
*/

.wcp-no-results {

    padding: 18px;

    font-size: 14px;
}

/*
LAPTOP
*/

@media (max-width: 1440px){

    .wcp-header-search-inner {

        width: calc(100% - 60px);

        max-width: 1380px;
    }
}

/*
TABLET
*/

@media (max-width: 1024px){

    .wcp-header-search-bar {

        top: 74px;

        padding: 14px 18px;
    }

    .wcp-header-search-inner {

        width: 100%;

        max-width: 100%;
    }

    .wcp-search-input {

        height: 48px;

        font-size: 17px;
    }

    .wcp-search-loader {

        width: 24px;

        height: 24px;
    }
}

/*
MOBILE
*/

@media (max-width: 768px){

    .wcp-header-search-trigger {

        top: 160px;

        right: 0;
    }

    .wcp-header-search-bar {

        top: 64px;

        padding: 12px;
    }

    .wcp-search-input {

        height: 44px;

        font-size: 15px;

        padding: 0 54px 0 14px;
    }

    .wcp-search-image img {

        width: 46px;

        height: 46px;
    }

    .wcp-search-title {

        font-size: 13px;
    }

    .wcp-search-price {

        font-size: 12px;
    }

    .wcp-search-loader {

        width: 20px;

        height: 20px;
    }
}