/**
 * TCP Product Search
 * style.css
 */


/*==============================
Search Trigger
==============================*/

.tcp-search-trigger{
 
    align-items:center;
    justify-content:center; 
    cursor:pointer; 
    background: transparent !important;
    color: #CBC9C7 !important;
    transition: .3s;
    padding: 0;
    border: none !important; 
}

.tcp-search-trigger svg{

    width:22px;
    height:22px;
    fill: var( --e-global-color-3124ecf );

}

.tcp-search-trigger:hover{

    color:#b68d40;

}



/*==============================
Popup
==============================*/

.tcp-search-popup{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

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

    z-index:999999;

    overflow:auto;

    padding:80px 15px;

}


.tcp-search-popup.active{

    display:flex;

}



.tcp-search-box{

    width:100%;
    max-width:900px;

    background:var( --e-global-color-3124ecf );

    border-radius:12px;

    overflow:hidden;

    position:relative;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}




/*==============================
Search Header
==============================*/


.tcp-search-header{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;

    border-bottom:1px solid #eee;

}



.tcp-search-form{

    flex:1;

}



.tcp-search-input-wrapper{

    display:flex;

    align-items:center;

    width:100%;

    border-bottom:1px solid #222;

    padding-bottom:10px;

}



/* Search Icon */

.tcp-search-icon{

    width:22px;
    height:22px;

    flex-shrink:0;

    margin-right:12px;

}


.tcp-search-icon svg{

    width:100%;
    height:100%;

}



/* Input */

.tcp-search-input{

    flex:1;

    min-width:0;

    border:0 !important;

    outline:none !important;

    background:transparent;

    font-size:18px;

    padding:0 10px;

}



.tcp-search-input::placeholder{

    color:#777;

}



/* Remove browser search clear icon */

.tcp-search-input::-webkit-search-cancel-button{

    -webkit-appearance:none;

    appearance:none;

}



/* Clear Button */

.tcp-search-clear{

    width:25px;
    height:25px;

    flex-shrink:0;

    border:0;

    background:none !important;
	color: #000 !important;
    cursor:pointer;

    display:none;

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

    padding:0;

}


.tcp-search-clear svg{

    width:18px;
    height:18px;

}



/* Close Popup */

.tcp-search-close{

    width:30px;
    height:30px;

    flex-shrink:0;

    border:0;

    background:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

}


.tcp-search-close svg{

    width:22px;
    height:22px;

}






/*==============================
Loader
==============================*/


.tcp-loader{

    display:none;

    text-align:center;

    padding:25px;

}


.tcp-loader.active{

    display:block;

}


.tcp-spinner{

    width:35px;
    height:35px;

    border:3px solid #ddd;

    border-top:3px solid var( --e-global-color-primary );

    border-radius:50%;

    animation:tcpSpin .8s linear infinite;

    margin:auto;

}


@keyframes tcpSpin{

    to{

        transform:rotate(360deg);

    }

}




/*==============================
Product Grid
==============================*/


.tcp-search-results{

    max-height:450px;
    padding: 20px;
    overflow-y:auto;

}



.tcp-search-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:20px;

}




.tcp-search-item{

    display:block;

    text-decoration:none;

    color:#222;

    border:1px solid #eee;

    border-radius:10px;

    overflow:hidden;

    background:var( --e-global-color-3124ecf );

    transition:.3s;

}


.tcp-search-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}




.tcp-product-thumb{

    width:100%;

    height:160px;

    overflow:hidden;

}



.tcp-product-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.tcp-product-info{

    padding:12px;

}



.tcp-product-title{

    font-size:14px;

    font-weight:600;

    line-height:1.4;

    margin-bottom:8px;

    color:#111;

}



.tcp-product-price{

    color:var( --e-global-color-primary );

    font-size:14px;

    font-weight:700;

}


.tcp-product-price del{

    color:#999;

    margin-right:8px;

}


.tcp-product-price ins{

    text-decoration:none;

}




/* Hide after 8 products */

.tcp-search-item:nth-child(n+9){

    display:none;

}





/*==============================
Badge
==============================*/


.tcp-badge{

    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    font-size:11px;

    margin-top:8px;

    font-weight:600;

}



.tcp-sale{

    background:var( --e-global-color-primary );

    color:var( --e-global-color-3124ecf );

}



.tcp-stock-out{

    background:#d63638;

    color:var( --e-global-color-3124ecf );

}





/*==============================
Footer
==============================*/


.tcp-search-footer{

    padding:15px 20px;

    text-align:center;

    border-top:1px solid #eee;

}



.tcp-view-more-products{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:12px 30px;

    background:var( --e-global-color-primary );

    color:var( --e-global-color-3124ecf ) !important;

    border-radius:6px;

    text-decoration:none;

    font-weight:600;

}



.tcp-view-more-products:hover{

    background:#b68d40;

    color:var( --e-global-color-3124ecf );

}





/*==============================
Keyboard
==============================*/


.tcp-search-item.active{

    background:#f7f7f7;

}





/*==============================
Mobile
==============================*/


@media(max-width:767px){


    .tcp-search-popup{

        padding:0;

        align-items:flex-start;

    }



    .tcp-search-box{

        max-width:100%;

        min-height:100vh;

        border-radius:0;

    }



    .tcp-search-header{

        padding:15px;

    }



    .tcp-search-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

        padding:15px;

    }



    .tcp-product-thumb{

        height:130px;

    }



    .tcp-product-title{

        font-size:13px;

    }



    .tcp-product-price{

        font-size:13px;

    }



}

/* Sale Badge */

.tcp-product-thumb{

    position:relative;

}

.woocommerce span.onsale {
 
background: var( --e-global-color-4e2bc71 ) !important;
margin: 0px !important;
color:var( --e-global-color-3124ecf ) !important;
 
border-radius:20px !important;
border-color: var( --e-global-color-4e2bc71 ) !important;
text-transform: uppercase !important

}
.tcp-sale-badge{

    position:absolute;

    top:10px;

    right:10px;

    background: var( --e-global-color-4e2bc71 );

    color:var( --e-global-color-3124ecf );

    font-size:11px;

    font-weight:700;

    padding:5px 10px;

    border-radius:20px;

    z-index:2;

    letter-spacing:.5px;

}