/* ===== HSA Compare Modal (final) ===== */

html.hsa-cmp-open,
body.hsa-cmp-open {
    overflow: hidden !important;
}

/* بک‌دراپ: پیش‌فرض مخفی */
#hsaCmpBackdrop.hsa-cmp-modal__backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    background: rgba(0,0,0,.4) !important;
    display: none !important;           /* ← پیش‌فرض: مخفی */
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* فقط وقتی باز است نمایش بده */
#hsaCmpBackdrop.is-open {
    display: grid !important;
    place-items: center !important;
}

/* در حضور نوار ادمین: از بالا کمی فاصله بده */
body.admin-bar #hsaCmpBackdrop {
    padding-top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar #hsaCmpBackdrop {
        padding-top: 46px !important;
    }
}

/* خود مدال داخل بک‌دراپ */
#hsaCmpModal.hsa-cmp-modal {
    position: relative !important;
    width: 100% !important;
    max-width: min(900px, 96vw) !important;
    max-height: 92dvh !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
    overflow: hidden !important;
}

/* سرمدال */
.hsa-cmp-modal__head {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid #eee;
}
.hsa-cmp-modal__title { font-weight: 600; font-size: 15px; margin-inline-end: auto; }
.hsa-cmp-modal__search { flex: 1; display: flex; gap: 8px; }
.hsa-cmp-modal__search input {
    flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px;
}
.hsa-cmp-btn {
    background: #174aff; color: #fff; border: none;
    border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.hsa-cmp-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* بدنهٔ نتایج */
.hsa-cmp-modal__list {
    padding: 8px 0; overflow: auto; max-height: calc(92dvh - 60px);
}

.hsa-cmp-item{
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid #f3f3f3;
}
.hsa-cmp-item img{
    width: 44px; height: 44px; object-fit: contain;
    background: #fafafa; border: 1px solid #eee; border-radius: 6px;
}
.hsa-cmp-item__meta{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hsa-cmp-item__title{
    font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw;
}
.hsa-cmp-item__sku{ font-size: 11px; color: #777; }
.hsa-cmp-item__price{ font-size: 12px; color: #333; }

@media (max-width: 480px){
    #hsaCmpModal.hsa-cmp-modal { max-width: min(900px, 98vw) !important; }
    .hsa-cmp-item__title { max-width: 52vw; }
}