/* =========================================================
   SANBY QUICK SEARCH
   Modern UI v2
========================================================= */

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

.sanby-qs-panel{
    position:absolute;
    z-index:99999;

    margin-top:8px;

    background:#fff;

    border:none;

    border-radius:18px;

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

    overflow:hidden;

    padding:8px 0;

    max-height:420px;

    overflow-y:auto;

    animation:qsFade .18s ease;
}

/* ==========================
   SCROLLBAR
========================== */

.sanby-qs-panel::-webkit-scrollbar{
    width:8px;
}

.sanby-qs-panel::-webkit-scrollbar-track{
    background:transparent;
}

.sanby-qs-panel::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;
}

.sanby-qs-panel::-webkit-scrollbar-thumb:hover{

    background:#a1a1aa;
}

/* ==========================
   GROUP
========================== */

.sanby-qs-group{

    padding:0;
}

.sanby-qs-group-title{

    padding:10px 18px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    color:#6b7280;

    text-transform:uppercase;

    background:#fafafa;

    border-bottom:1px solid #f1f5f9;
}

/* ==========================
   ITEM LIST
========================== */

.sanby-qs-group-items{

    padding:0;
}

.sanby-qs-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 18px;

    cursor:pointer;

    transition:.18s;

    border-bottom:1px solid #f3f4f6;

    text-decoration:none;

    color:inherit;
}

.sanby-qs-item:last-child{

    border:none;
}

.sanby-qs-item:hover,
.sanby-qs-item:focus{

    background:#f7f9fc;
}

/* Hàng hết hàng vẫn hiện bình thường (không ẩn), chỉ làm nhạt giá đi 1 chút */
.sanby-qs-item--oos .sanby-qs-price{

    color:#94a3b8;
}

/* ==========================
   IMAGE
========================== */

.sanby-qs-item img{

    width:56px;

    height:56px;

    object-fit:contain;

    flex-shrink:0;

    border-radius:8px;

    background:#fff;
}

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

.sanby-qs-content{

    flex:1;

    min-width:0;
}

/* ==========================
   PRODUCT NAME
========================== */

.sanby-qs-title{

    font-size:14px;

    font-weight:500;

    color:#111827;

    line-height:1.35;

    margin-bottom:5px;

    overflow:hidden;

    text-overflow:ellipsis;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;
}

/* ==========================
   PRICE
========================== */

.sanby-qs-price{

    font-size:15px;

    font-weight:700;

    color:#0066ff;

    line-height:1;

    margin-top:4px;
}

.sanby-qs-oos-badge{

    display:inline-block;

    margin-left:6px;

    font-size:12px;

    font-weight:600;

    color:#ef4444;
}

/* ==========================
   GIÁ ĐẠI LÝ (B2B)
   Hiện thêm dưới giá bán lẻ khi khách đang login b2b_customer — không
   bao giờ thay thế giá bán lẻ ở trên.
========================== */

.sanby-qs-b2b{

    display:block;

    margin-top:6px;

    font-size:14px;

    font-weight:700;

    color:#0d1b2a;

    background:#f3f4f6;

    border-radius:8px;

    padding:4px 10px;

    width:fit-content;
}

.sanby-qs-b2b-label{

    font-size:12px;

    font-weight:500;

    color:#64748b;

    margin-right:4px;
}

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

.sanby-qs-loading{

    padding:32px;

    text-align:center;
}

.sanby-qs-loading::after{

    content:"";

    display:inline-block;

    width:18px;

    height:18px;

    border:2px solid #e5e7eb;

    border-top-color:#0066ff;

    border-radius:50%;

    animation:qsSpin .6s linear infinite;
}

@keyframes qsSpin{

    to{ transform:rotate(360deg); }
}

/* ==========================
   NÚT SUBMIT (kính lúp) — đây là markup CÓ SẴN của theme Flatsome
   (.ux-search-submit), không phải do plugin này tạo ra. Style ở đây chỉ
   để khớp bộ giao diện tìm kiếm, chưa xác nhận được bằng ảnh chụp thật
   trên site — kiểm tra lại trực quan sau khi lên site, có thể cần chỉnh
   lại nếu icon dùng SVG không theo currentColor.
========================== */

.ux-search-submit:hover,
.ux-search-submit:focus{

    background:#fff!important;

    color:#0066ff!important;

    border-color:#0066ff!important;
}

.ux-search-submit:hover svg,
.ux-search-submit:focus svg{

    fill:#0066ff!important;
}

/* ==========================
   NO RESULT
========================== */

.sanby-qs-empty{

    padding:30px;

    text-align:center;

    color:#94a3b8;
}

/* ==========================
   ANIMATION
========================== */

@keyframes qsFade{

    from{

        opacity:0;

        transform:translateY(-8px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

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

@media(max-width:768px){

.sanby-qs-panel{

    width:100%!important;

    left:0!important;

    right:0!important;

    max-height:60vh;

    border-radius:16px;
}

.sanby-qs-item{

    padding:12px 14px;
}

.sanby-qs-item img{

    width:52px;

    height:52px;
}

}