/* ================================================================
   iranboschcenter.com — لایو سرچ
   ================================================================ */

/* هم کلاسی که JS اضافه می‌کند و هم خودِ فرم‌ها — تا اگر به هر دلیل اسکریپت
   دیر اجرا شد، پنل باز هم نسبت به کادر جستجو جای درستی بگیرد */
.ls-form,
.main-search,
.mobile-search-bar__form { position: relative; }

.ls-box {
    display: none;
    position: absolute;
    top: calc(100% + .45rem);
    inset-inline: 0;              /* دقیقاً هم‌عرض کادر جستجو */
    /* پنل داخل هدر است، پس با آیتم‌های خودِ هدر رقابت می‌کند.
       دراپ‌داون مگامنو z-index:500 دارد و مقدار قبلی (۲۰۰) زیرش می‌رفت. */
    z-index: 900;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e9eaee;
    border-radius: .85rem;
    box-shadow: 0 14px 38px rgba(11, 27, 43, .16);
    max-height: min(72vh, 30rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .3rem;
    text-align: right;
    direction: rtl;
}
.ls-box.open { display: block; }

/* اسکرول‌بار باریک — در RTL سمت چپ می‌افتد و اگر پیش‌فرض بماند تو ذوق می‌زند */
.ls-box { scrollbar-width: thin; scrollbar-color: #d7dbe0 transparent; }
.ls-box::-webkit-scrollbar { width: 6px; }
.ls-box::-webkit-scrollbar-track { background: transparent; }
.ls-box::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 99px; }

/* ---------------- عنوان بخش ---------------- */
.ls-head {
    font-size: .6875rem;
    font-weight: 800;
    color: #9aa4b2;
    padding: .55rem .55rem .3rem;
    letter-spacing: .01em;
}
.ls-head:not(:first-child) {
    border-top: 1px solid #f2f3f5;
    margin-top: .25rem;
    padding-top: .6rem;
}

/* ---------------- دسته‌بندی‌ها: چیپ افقی ---------------- */
.ls-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: 0 .45rem .45rem;
}
.ls-cat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #f6f7f9;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .32rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    color: #33475b;
    line-height: 1.7;
    max-width: 100%;
    transition: background .12s, border-color .12s, color .12s;
}
.ls-cat span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ls-cat b {
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 800;
    color: #8b95a3;
}
.ls-cat:hover,
.ls-cat.active {
    background: var(--color-primary-light, #fdecec);
    border-color: #ffd0d4;
    color: var(--color-primary-dark, #b00010);
}
.ls-cat:hover b, .ls-cat.active b { color: var(--color-primary, #e20015); }

/* ---------------- محصول ---------------- */
.ls-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .45rem .55rem;
    border-radius: .6rem;
    transition: background .12s;
}
.ls-item:hover,
.ls-item.active { background: #f7f8fa; }

.ls-item img,
.ls-item .ls-noimg {
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    object-fit: contain;
    background: #fafafa;
    border: 1px solid #f0f1f3;
    display: block;
}
.ls-item .ls-noimg::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, #f4f5f7 0 6px, #eef0f2 6px 12px);
    border-radius: .5rem;
}

.ls-item__name {
    font-size: .8125rem;
    font-weight: 600;
    color: #16202c;
    line-height: 1.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ls-item__price {
    justify-self: end;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 800;
    color: #16202c;
    white-space: nowrap;
}
/* «استعلام قیمت» قیمت نیست — کم‌رنگ‌تر و بدون تأکید قرمز */
.ls-item__price--quote {
    font-weight: 700;
    color: #8b95a3;
    font-size: .7rem;
}

.ls-box mark {
    background: transparent;
    color: var(--color-primary, #e20015);
    font-weight: 800;
    padding: 0;
}

/* ---------------- فوتر و حالت خالی ---------------- */
.ls-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: .3rem;
    padding: .6rem;
    border-top: 1px solid #f2f3f5;
    font-size: .78rem;
    font-weight: 800;
    color: var(--color-primary, #e20015);
    border-radius: 0 0 .6rem .6rem;
}
.ls-all:hover, .ls-all.active { background: var(--color-primary-light, #fdecec); }

.ls-empty {
    padding: 1.4rem .6rem;
    text-align: center;
    font-size: .8125rem;
    color: #9aa4b2;
    line-height: 2;
}
.ls-empty b { display: block; color: #33475b; font-weight: 700; }

/* ---------------- موبایل ---------------- */
@media (max-width: 768px) {
    .ls-box {
        top: calc(100% + .4rem);
        max-height: min(70vh, 26rem);
        border-radius: .75rem;
        box-shadow: 0 12px 30px rgba(11, 27, 43, .2);
    }
    .ls-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: .55rem;
        padding: .5rem .5rem;
    }
    .ls-item img, .ls-item .ls-noimg { width: 40px; height: 40px; }
    /* روی موبایل قیمت زیر نام می‌آید تا نام جای کافی داشته باشد */
    .ls-item__price {
        grid-column: 2;
        justify-self: start;
        margin-top: .1rem;
    }
    .ls-cat { font-size: .75rem; padding: .3rem .6rem; }
}