/* ==========================================================
   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: 14px;
    color: #6b7280;
    pointer-events: none;
}

.wls-search-input{
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1px solid #D5D8DC;
    border-radius: 50px;
    background: #fff;
    color: #0B1424;
    font-size: 14px;
    outline: none;
    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-clear-btn{
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border: none;
    border-radius: 50%;
    background: #E5E7EB;
    color: #4B5563;
    font-size: 14px;
    cursor: pointer;
    display: none;
}
.wls-clear-btn.is-visible{
    display: block;
}
.wls-clear-btn:hover{
    background:#fd5000 !important;
    color: #fff !important;
}

.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-results-panel{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    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: 420px;
    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;
}
.wls-search-input{
  width: 350px !important;
  padding-left: 40px !important;
  border: 1px solid #D5D8DC !important;
	border-radius:5px !important;
}    
.wls-clear-btn{
   background-color: transparent;
    border: 1px solid #D5D8DC !important;
    border-radius: 3px;
    color: #fd5000 !important;
    padding:0px 5px !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;
}