/* ==========================================================
   WOOCOMMERCE LIVE PRODUCT SEARCH — LIGHT + DARK MODE
   Dark mode auto-applies wherever body.dark is present,
   matching the rest of the theme's dark mode system.
   ========================================================== */

:root{
    --wls-accent: #FD5000;
}

.wls-search-wrapper{
    position: relative;
    width: 100%;
    max-width: 480px;
    font-family: inherit;
}

.wls-search-form{
    display: flex;
    align-items: center;
    gap: 8px;
}

.wls-category-select{
    flex-shrink: 0;
    padding: 10px 12px;
    border: 1px solid #D5D8DC;
    border-radius: 8px;
    background: #fff;
    color: #0B1424;
    font-size: 13px;
    max-width: 140px;
}

.wls-input-wrap{
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.wls-search-icon{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    z-index: 2;
}

.wls-search-wrapper .wls-search-input{
    width: 100%;
    padding: 11px 44px 11px 46px !important;
    border: 1px solid #D5D8DC;
    border-radius: 50px;
    background: #fff;
    color: #0B1424;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.wls-search-input:focus{
    border-color: var(--wls-accent);
    box-shadow: 0 0 0 3px rgba(253,80,0,.12);
}
.wls-search-input::placeholder{
    color: #9CA3AF;
}

.wls-search-wrapper .wls-clear-btn{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 22px;
    text-align: center;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 50%;
    background: #E5E7EB;
    color: #4B5563;
    font-size: 15px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.wls-search-wrapper .wls-clear-btn.is-visible{
    display: flex;
}
.wls-search-wrapper .wls-clear-btn:hover{
    background: var(--wls-accent);
    color: #fff;
}

.wls-spinner{
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid #E5E7EB;
    border-top-color: var(--wls-accent);
    border-radius: 50%;
    display: none;
    animation: wls-spin .6s linear infinite;
}
.wls-spinner.is-active{
    display: block;
}
.wls-clear-btn.is-visible + .wls-spinner.is-active{
    right: 38px;
}

@keyframes wls-spin{
    to { transform: rotate(360deg); }
}

/* ---- results panel ---- */
.wls-search-wrapper{
    max-width: 640px;
}

.wls-results-panel{
    position: absolute;
    top: calc(100% + 8px);
    left: -160px;
    /* Panel is wider than the input to fit the two-column layout. */
    width: min(1100px, 92vw);
    right: auto;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.08);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}
.wls-results-panel.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wls-panel-message{
    padding: 20px;
    text-align: center;
    color: #6B7280;
    font-size: 14px;
}

.wls-results-list{
    list-style: none;
    margin: 0;
    padding: 6px;
}

.wls-result-item{
    border-radius: 8px;
    transition: background .15s ease;
}
.wls-result-item.is-active,
.wls-result-item:hover{
    background: #F3F4F6;
}

.wls-result-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
}

.wls-result-thumb{
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #F3F4F6;
}

.wls-result-info{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wls-result-title{
    font-size: 14px;
    font-weight: 500;
    color: #0B1424;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wls-result-title mark{
    background: rgba(253,80,0,.18);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.wls-result-cat{
    font-size: 12px;
    color: #9CA3AF;
}

.wls-result-meta{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wls-result-price{
    font-size: 13px;
    font-weight: 600;
    color: #0B1424;
    white-space: nowrap;
}
.wls-result-price .woocommerce-Price-amount{
    color: inherit;
}
.wls-result-price del{
    opacity: .5;
    font-weight: 400;
}
.wls-result-price ins{
    text-decoration: none;
}

.wls-stock-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wls-stock-dot.in-stock{
    background: #22c55e;
}
.wls-stock-dot.out-of-stock{
    background: #ef4444;
}

.wls-view-all{
    display: block;
    text-align: center;
    padding: 12px;
    border-top: 1px solid #E5E7EB;
    color: var(--wls-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.wls-view-all:hover{
    background: #F3F4F6;
}

/* ==========================================================
   TWO-COLUMN PANEL: suggestions (left) + products grid (right)
   ========================================================== */
.wls-panel-cols{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
}

.wls-col{
    padding: 20px 22px;
}
.wls-col-suggestions{
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
}

.wls-col-heading{
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B7280;
}

/* ---- suggestions list ---- */
.wls-suggestion-list{
    list-style: none;
    margin: 0 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wls-suggestion{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #0B1424;
    font-size: 14px;
    transition: background .15s ease;
}
.wls-suggestion:hover{
    background: #F3F4F6;
}
.wls-suggestion-icon{
    color: #9CA3AF;
    flex-shrink: 0;
}
.wls-suggestion-text strong{
    font-weight: 700;
}

/* ---- view-all button ---- */
.wls-view-all-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 13px 16px;
    border-radius: 8px;
    background: #0B1424;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
}
.wls-view-all-btn:hover{
    background: var(--wls-accent);
    color: #fff;
}

/* ---- products grid ---- */
.wls-products-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.wls-products-grid.wls-cols-1{ grid-template-columns: repeat(1, 1fr); }
.wls-products-grid.wls-cols-2{ grid-template-columns: repeat(2, 1fr); }
.wls-products-grid.wls-cols-3{ grid-template-columns: repeat(3, 1fr); }
.wls-products-grid.wls-cols-4{ grid-template-columns: repeat(4, 1fr); }

.wls-no-products{
    grid-column: 1 / -1;
    margin: 0;
    padding: 30px 0;
    text-align: center;
    color: #6B7280;
    font-size: 14px;
}

/* ---- default product card (fallback when no Elementor template) ---- */
.wls-card{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.wls-card-media{
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F3F4F6;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.wls-card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}
.wls-card:hover .wls-card-img{
    transform: scale(1.04);
}
.wls-card-body{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wls-card-title{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #0B1424;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wls-card-title mark{
    background: rgba(253,80,0,.18);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.wls-card-excerpt{
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #9CA3AF;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wls-card-price{
    font-size: 15px;
    font-weight: 700;
    color: #0B1424;
}
.wls-card-price del{ opacity: .5; font-weight: 400; }
.wls-card-price ins{ text-decoration: none; }
.wls-card-badge{
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #7BC142;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wls-results-panel .elementor-heading-title{
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    
}

/* ---- responsive: stack columns on narrow screens ---- */
@media (max-width: 782px){
    .wls-panel-cols{ grid-template-columns: 1fr; }
    .wls-col-suggestions{
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
    }
    .wls-products-grid,
    .wls-products-grid.wls-cols-3,
    .wls-products-grid.wls-cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
    .wls-results-panel{ width: 92vw; }
    .wls-products-grid,
    .wls-products-grid.wls-cols-2,
    .wls-products-grid.wls-cols-3,
    .wls-products-grid.wls-cols-4{ grid-template-columns: 1fr; }
	.wls-results-panel{
		left:0px !important;
	}
	
}

/* ==========================================================
   DARK MODE — applies when <body> has the "dark" class
   ========================================================== */

body.dark .wls-category-select{
    background: #1A2D44;
    border: 1px solid #ffffff1a;
    color: #ffffffb3;
}

body.dark .wls-search-input{
    background: #1A2D44;
    border: 1px solid #ffffff1a;
    color: #fff;
}
body.dark .wls-search-input::placeholder{
    color: #ffffff66;
}
body.dark .wls-search-input:focus{
    border-color: #FD5000;
    box-shadow: 0 0 0 3px rgba(253,80,0,.18);
}
body.dark .wls-search-icon{
    color: #ffffffb3;
}

body.dark .wls-clear-btn{
    background: #ffffff1a;
    color: #ffffffb3;
}
body.dark .wls-clear-btn:hover{
    background: #FD5000;
    color: #fff;
}

body.dark .wls-spinner{
    border-color: #ffffff1a;
    border-top-color: #FD5000;
}

body.dark .wls-results-panel{
    background: #0e223a;
    border: 1px solid #ffffff1a;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.35);
}

body.dark .wls-panel-message{
    color: #ffffffb3;
}

body.dark .wls-result-item.is-active,
body.dark .wls-result-item:hover{
    background: #1A2D44;
}

body.dark .wls-result-thumb{
    background: #1A2D44;
}

body.dark .wls-result-title{
    color: #fff;
}
body.dark .wls-result-title mark{
    background: rgba(253,80,0,.3);
    color: #fff;
}

body.dark .wls-result-cat{
    color: #ffffff80;
}

body.dark .wls-result-price{
    color: #fff;
}

body.dark .wls-view-all{
    border-top: 1px solid #ffffff1a;
    color: #FD5000;
}
body.dark .wls-view-all:hover{
    background: #1A2D44;
}

/* ---- dark mode: two-column panel ---- */
body.dark .wls-col-suggestions{
    border-right: 1px solid #ffffff1a;
}
body.dark .wls-col-heading{
    border-bottom: 1px solid #ffffff1a;
    color: #ffffff80;
}
body.dark .wls-suggestion{
    color: #fff;
}
body.dark .wls-suggestion:hover{
    background: #1A2D44;
}
body.dark .wls-suggestion-icon{
    color: #ffffff66;
}
body.dark .wls-view-all-btn{
    background: #1A2D44;
    color: #fff;
}
body.dark .wls-view-all-btn:hover{
    background: var(--wls-accent);
}
body.dark .wls-no-products{
    color: #ffffffb3;
}
body.dark .wls-card-media{
    background: #1A2D44;
}
body.dark .wls-card-title{
    color: #fff;
}
body.dark .wls-card-title mark{
    background: rgba(253,80,0,.3);
    color: #fff;
}
body.dark .wls-card-excerpt{
    color: #ffffff80;
}
body.dark .wls-card-price{
    color: #fff;
}

body.dark .wls-col-suggestions{ border-bottom-color: #ffffff1a; }
@media (max-width: 782px){
    body.dark .wls-col-suggestions{
        border-right: none;
        border-bottom: 1px solid #ffffff1a;
    }
}