/*
 * compare.css — ماژول «مقایسه‌ی محصولات»
 * ---------------------------------------------------------------
 * فقط وقتی GlobalSettings.IsCompareEnabled روشن است از _Layout بارگذاری می‌شود.
 * همه‌ی جهت‌ها با ویژگی‌های منطقی (inset-inline-*, padding-inline, ...) نوشته شده تا یک فایل برای RTL و LTR کافی باشد.
 * رنگ تأکید از تم هر مستاجر می‌آید (--LogoOrgColor)؛ برای شخصی‌سازی در tenants/{domain}/site.css فقط --kwc-accent را بازنویسی کن.
 */
:root {
    --kwc-accent: var(--LogoOrgColor, #e6456f);
    --kwc-border: #e4e6ec;
    --kwc-muted: #6b7280;
    --kwc-ink: #1f2937;
    --kwc-diff: #fff8e6;
    --kwc-radius: 12px;
}

/* ───────────────────────── دکمه‌ی «مقایسه» (کارت محصول / صفحه‌ی محصول / پیشنهادها) ─────────────────────────
   قالب HTML فقط یکی است (_CompareToggle)؛ ظاهر بر اساس جایگاه عوض می‌شود:
   - پایه (پیشنهادهای پنل): قرص «آیکون + برچسب»
   - داخل .kwc-quick (نوار هاور کارت محصول): دکمه‌ی گرد فقط‌آیکون با tooltip
   - داخل .kwc-inline (صفحه‌ی محصول): آیکون ساده هم‌اندازه‌ی قلب و اشتراک‌گذاری با tooltip
   حالت انتخاب‌شده با aria-pressed="true": آیکون پر (kfa-compare-fill) + رنگ تأکید؛ بدون تیک. */
.kwc-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--kwc-border);
    border-radius: 999px;
    background: #fff;
    color: #3b3f45;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    /* ناحیه‌ی لمس بزرگ‌تر از ظاهر دکمه (حداقل ~44px) بدون تغییر در چیدمان */
    .kwc-toggle::after {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }

    .kwc-toggle .kwc-toggle__icon {
        flex: none;
        font-size: 16px;
        line-height: 1;
    }

    /* آیکون پر و برچسب «در مقایسه» فقط در حالت انتخاب‌شده دیده می‌شوند */
    .kwc-toggle .kwc-toggle__icon--on,
    .kwc-toggle .kwc-toggle__on {
        display: none;
    }

    .kwc-toggle[aria-pressed="true"] .kwc-toggle__icon--off,
    .kwc-toggle[aria-pressed="true"] .kwc-toggle__off {
        display: none;
    }

    .kwc-toggle[aria-pressed="true"] .kwc-toggle__icon--on {
        display: inline-block;
    }

    .kwc-toggle[aria-pressed="true"] .kwc-toggle__on {
        display: inline;
    }

@media (hover: hover) {
    .kwc-toggle:hover {
        border-color: var(--kwc-accent);
        color: var(--kwc-accent);
    }
}

.kwc-toggle:focus-visible {
    outline: 2px solid var(--kwc-accent);
    outline-offset: 2px;
}

.kwc-toggle[aria-pressed="true"] {
    border-color: var(--kwc-accent);
    background: #fdeef3; /* fallback مرورگرهای بدون color-mix */
    background: color-mix(in srgb, var(--kwc-accent) 12%, #fff);
    color: var(--kwc-accent);
}

/* ─── tooltip سریع (CSS خالص؛ متن‌ها از data-tip-* که resx سرور می‌دهد) ─── */
.kwc-quick .kwc-toggle::before,
.kwc-quick .Qview::before,
.kwc-inline .kwc-toggle::before {
    content: attr(data-tip-off);
    position: absolute;
    z-index: 7;
    padding: 5px 10px;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
}

.kwc-quick .Qview::before {
    content: attr(data-tip);
}

.kwc-quick .kwc-toggle[aria-pressed="true"]::before,
.kwc-inline .kwc-toggle[aria-pressed="true"]::before {
    content: attr(data-tip-on);
}

/* روی کارت: tooltip سمت داخل کارت باز می‌شود (جهت منطقی؛ در RTL و LTR درست است) */
.kwc-quick .kwc-toggle::before,
.kwc-quick .Qview::before {
    inset-inline-start: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

/* در صفحه‌ی محصول: بالای آیکون و وسط‌چین (left فیزیکی عمدی است تا translateX در RTL هم درست باشد) */
.kwc-inline .kwc-toggle::before {
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
}

@media (hover: hover) {
    .kwc-quick .kwc-toggle:hover::before,
    .kwc-quick .kwc-toggle:focus-visible::before,
    .kwc-quick .Qview:hover::before,
    .kwc-quick .Qview:focus-visible::before,
    .kwc-inline .kwc-toggle:hover::before,
    .kwc-inline .kwc-toggle:focus-visible::before {
        opacity: 1;
        visibility: visible;
        transition: opacity .15s ease, visibility 0s;
    }
}

/* ─── نوار عمودی هاور کارت محصول: «مقایسه» + «گالری تصاویر» ─── */
/* همان .Quick قدیمی است (از لبه‌ی ابتدای کارت می‌لغزد)؛ فقط وقتی ماژول روشن است کلاس kwc-quick می‌گیرد.
   اندازه/سایه‌ی قدیمی (۳۴×۳۴ و box-shadow رنگی) اینجا بازنویسی می‌شود؛ سلکتورها عمداً از قاعده‌های site.css قوی‌ترند. */
article.pro-item .Quick.kwc-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    width: 40px;
    height: auto;
    top: 12px;
    inset-inline-start: -56px;
    padding: 4px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    z-index: 5;
    pointer-events: none; /* مخفی است؛ نباید کلیک/هاور بگیرد */
    transition: opacity .25s ease, inset-inline-start .25s ease;
}

/* ریبون «دارای سایزبندی» همان گوشه است؛ نوار زیر آن شروع می‌شود */
article.pro-item:has(.pi-ribbon) .Quick.kwc-quick {
    top: 46px;
}

/* دیده‌شدن نوار. هر حالت عمداً قاعده‌ی جدا دارد: در مرورگر قدیمی بدون :has() کل قاعده‌ای که یک سلکتورش نامعتبر باشد
   حذف می‌شود، و اگر :has کنار :hover در یک لیست بود نوار روی هاور هم هرگز دیده نمی‌شد. */

/* ۱) هاور روی کارت؛ بالاتر از بقیه‌ی کارت (مثل .Quick قدیمی) */
article.pro-item:hover .Quick.kwc-quick {
    inset-inline-start: 8px;
    opacity: 1;
    pointer-events: auto;
    z-index: 1111;
}

/* ۲) فوکوس «کیبورد» روی دکمه‌ها (نه فوکوس بعد از کلیک ماوس که نوار را باز نگه می‌دارد) */
article.pro-item:has(.Quick.kwc-quick :focus-visible) .Quick.kwc-quick {
    inset-inline-start: 8px;
    opacity: 1;
    pointer-events: auto;
    z-index: 1111;
}

/* ۳) محصول در مقایسه انتخاب شده: نوار ثابت می‌ماند تا کاربر بداند کدام کارت‌ها انتخاب شده‌اند؛
      z-index عمداً بالا نمی‌رود تا روی هدر چسبان، پنل پیشنهادها و نوار پایین نیفتد */
article.pro-item:has(.kwc-toggle[aria-pressed="true"]) .Quick.kwc-quick {
    inset-inline-start: 8px;
    opacity: 1;
    pointer-events: auto;
}

.Quick.kwc-quick .kwc-toggle,
.Quick.kwc-quick .Qview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #4b5563;
    font-size: 17px;
    line-height: 1;
    overflow: visible; /* tooltip بیرون از دکمه باز می‌شود (در .Quick .Qview قدیمی overflow:hidden است) */
    opacity: 1;
}

    .Quick.kwc-quick .kwc-toggle .kwc-toggle__icon,
    .Quick.kwc-quick .Qview .kfa {
        font-size: 18px;
    }

    /* در نوار فقط آیکون؛ برچسب‌های متنی در HTML می‌مانند ولی دیده نمی‌شوند (نام دکمه برای صفحه‌خوان از aria-label می‌آید) */
    .Quick.kwc-quick .kwc-toggle[data-kwc-toggle] .kwc-toggle__off,
    .Quick.kwc-quick .kwc-toggle[data-kwc-toggle] .kwc-toggle__on {
        display: none;
    }

@media (hover: hover) {
    .Quick.kwc-quick .kwc-toggle:hover,
    .Quick.kwc-quick .Qview:hover {
        background: #f3f4f6;
        color: var(--kwc-accent);
    }
}

.Quick.kwc-quick .kwc-toggle[aria-pressed="true"] {
    background: #fdeef3;
    background: color-mix(in srgb, var(--kwc-accent) 14%, #fff);
    color: var(--kwc-accent);
}

/* لمسی (بدون هاور): نوار همیشه دیده می‌شود، کوچک‌تر و در گوشه‌ی کارت */
@media (hover: none) {
    article.pro-item .Quick.kwc-quick {
        top: 6px;
        inset-inline-start: 8px; /* هم‌اندازه‌ی حالت هاور (اولین لمس :hover چسبنده می‌سازد؛ نوار نباید ۲px بپرد) */
        width: 38px;
        gap: 0;
        padding: 3px;
        opacity: 1;
        pointer-events: auto;
        background: rgba(255, 255, 255, .94);
    }

    article.pro-item:has(.pi-ribbon) .Quick.kwc-quick {
        top: 40px;
    }

    /* ۳۲px: ناحیه‌ی لمس دکمه‌ها از .Quick قدیمی (۳۴px) کوچک‌تر نشود */
    .Quick.kwc-quick .kwc-toggle,
    .Quick.kwc-quick .Qview {
        width: 32px;
        height: 32px;
    }

        .Quick.kwc-quick .kwc-toggle .kwc-toggle__icon,
        .Quick.kwc-quick .Qview .kfa {
            font-size: 16px;
        }
}

/* ─── صفحه‌ی محصول: آیکون ساده کنار قلب و اشتراک‌گذاری ─── */
.kwc-inline {
    display: inline-flex;
    align-items: center;
}

    .kwc-inline .kwc-toggle {
        gap: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: inherit;
    }

        /* گلیف مقایسه باریک‌تر از آیکون‌های کناری است؛ کمی بزرگ‌تر می‌شود تا هم‌وزن دیده شود */
        .kwc-inline .kwc-toggle .kwc-toggle__icon {
            font-size: 21px;
        }

        .kwc-inline .kwc-toggle[data-kwc-toggle] .kwc-toggle__off,
        .kwc-inline .kwc-toggle[data-kwc-toggle] .kwc-toggle__on {
            display: none;
        }

@media (hover: hover) {
    .kwc-inline .kwc-toggle:hover {
        color: var(--kwc-accent);
    }
}

.kwc-inline .kwc-toggle[aria-pressed="true"] {
    background: none;
    color: var(--kwc-accent);
}

/* ───────────────────────── نوار انتخاب‌ها (پایین صفحه) ───────────────────────── */
.kwc-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1045;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--kwc-border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .10);
    visibility: hidden;
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
}

    .kwc-bar.is-open {
        visibility: visible;
        transform: none;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    }

/* با منوی پایین موبایل (kw-bottom-nav) درست بالای آن می‌نشیند */
body.kwbn-on .kwc-bar {
    bottom: var(--kwbn-occupied, 62px);
    padding-bottom: 10px;
}

.kwc-bar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 12px;
}

.kwc-bar__slots {
    display: flex;
    flex: none;
    gap: 8px;
}

.kwc-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px dashed #c4c8d0;
    border-radius: 10px;
    background: #fafafa;
    color: #9aa0ab;
    font-size: 24px;
    line-height: 1;
}

button.kwc-slot {
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

    button.kwc-slot:hover,
    button.kwc-slot:focus-visible {
        border-color: var(--kwc-accent);
        color: var(--kwc-accent);
        background: #fff;
    }

    button.kwc-slot:focus-visible {
        outline: 2px solid var(--kwc-accent);
        outline-offset: 2px;
    }

.kwc-slot--filled {
    border: 1px solid var(--kwc-border);
    background: #fff;
}

    .kwc-slot--filled img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 9px;
    }

.kwc-slot__x {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #3b3f45;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .kwc-slot__x::after {
        content: "";
        position: absolute;
        inset: -10px;
    }

    .kwc-slot__x:hover,
    .kwc-slot__x:focus-visible {
        background: #c0392b;
    }

.kwc-bar__text {
    flex: 1 1 auto;
    min-width: 0;
}

.kwc-bar__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--kwc-ink);
}

.kwc-bar__hint {
    overflow: hidden;
    font-size: 12px;
    color: var(--kwc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kwc-bar__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
}

.kwc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.kwc-btn--primary {
    background: var(--kwc-accent);
    border-color: var(--kwc-accent);
    color: #fff;
}

    .kwc-btn--primary:hover,
    .kwc-btn--primary:focus-visible {
        color: #fff;
        filter: brightness(.94);
    }

    .kwc-btn--primary.is-disabled {
        background: #e5e7eb;
        border-color: #e5e7eb;
        color: #9aa0ab;
        cursor: not-allowed;
        filter: none;
    }

.kwc-btn--ghost {
    background: transparent;
    border-color: var(--kwc-border);
    color: #4b5563;
}

    .kwc-btn--ghost:hover,
    .kwc-btn--ghost:focus-visible {
        border-color: #c4c8d0;
        background: #f9fafb;
    }

.kwc-btn:focus-visible {
    outline: 2px solid var(--kwc-accent);
    outline-offset: 2px;
}

/* با باز بودن نوار: دکمه‌های شناور (بالا رفتن/چت) نباید زیر نوار بمانند و آخر صفحه زیر نوار گم نشود */
body.kwc-on {
    padding-bottom: var(--kwc-h, 0px);
}

body.kwc-on #btnScrollTop,
body.kwc-on #chaty-widget-0,
body.kwc-on .chaty-widget {
    bottom: calc(var(--kwc-h, 0px) + 16px) !important;
}

body.kwc-on.kwbn-on #btnScrollTop,
body.kwc-on.kwbn-on #chaty-widget-0,
body.kwc-on.kwbn-on .chaty-widget {
    bottom: calc(var(--kwbn-occupied, 82px) + var(--kwc-h, 0px) + 16px) !important;
}

/* ───────────────────────── پنل پیشنهادها (نزدیک‌ترین محصولات برای مقایسه) ───────────────────────── */
.kwc-panel {
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--kwc-bottom, 0px));
    z-index: 1044;
    max-width: 1140px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--kwc-border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .14);
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

    .kwc-panel.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s;
    }

    .kwc-panel:focus {
        outline: none;
    }

.kwc-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 4px;
}

.kwc-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--kwc-ink);
}

.kwc-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f5;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

    .kwc-panel__close:hover,
    .kwc-panel__close:focus-visible {
        background: #e5e7eb;
    }

/* کادر جستجو در همان دسته (بین سرتیتر و فهرست) */
.kwc-panel__search {
    position: relative;
    padding: 4px 14px 6px;
}

.kwc-panel__searchicon {
    position: absolute;
    top: 50%;
    inset-inline-start: 28px;
    transform: translateY(-50%);
    color: var(--kwc-muted);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

.kwc-panel__input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding-block: 0;
    padding-inline: 40px 14px;
    border: 1px solid var(--kwc-border);
    border-radius: 999px;
    background: #f7f8fa;
    color: var(--kwc-ink);
    font: inherit;
    font-size: 13px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .kwc-panel__input::placeholder {
        color: var(--kwc-muted);
    }

    /* iOS Safari روی ورودی با فونت کمتر از ۱۶px هنگام فوکوس کل صفحه را زوم می‌کند */
    @media (hover: none), (max-width: 767px) {
        .kwc-panel__input {
            font-size: 16px;
        }
    }

    .kwc-panel__input:focus {
        outline: none;
        border-color: var(--kwc-accent);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
    }

.kwc-panel__body {
    min-height: 120px;
    max-height: 52vh;
    overflow-y: auto;
}

.kwc-panel__state {
    padding: 34px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--kwc-muted);
}

    .kwc-panel__state.is-loading::before {
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        margin: 0 auto 10px;
        border: 3px solid #e5e7eb;
        border-top-color: var(--kwc-accent);
        border-radius: 50%;
        animation: kwc-spin .8s linear infinite;
    }

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

.kwc-sugg {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 6px 14px 16px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.kwc-sugg__item {
    display: flex;
    flex: 0 0 150px;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--kwc-border);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    scroll-snap-align: start;
}

.kwc-sugg__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--kwc-ink);
    text-decoration: none;
}

.kwc-sugg__img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.kwc-sugg__name {
    display: -webkit-box;
    min-height: 3.1em;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* قیمت پارشال مشترک _ProductPrice در قالب کوچک */
.kwc-sugg__price {
    min-height: 38px;
    font-size: 13px;
}

    .kwc-sugg__price .priceBox {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .kwc-sugg__price .PkgPriceOld {
        font-size: 11px;
    }

    .kwc-sugg__price .btn {
        padding: 2px 8px;
        font-size: 12px;
    }

.kwc-sugg__item .kwc-toggle {
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

/* ───────────────────────── صفحه‌ی /compare ───────────────────────── */
.kwc-page {
    padding-block: 20px 110px;
}

.kwc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kwc-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--kwc-ink);
}

.kwc-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--kwc-muted);
}

.kwc-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kwc-tool {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--kwc-border);
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .kwc-tool:hover,
    .kwc-tool:focus-visible {
        border-color: #c4c8d0;
        background: #f9fafb;
    }

.kwc-tool--danger {
    color: #c0392b;
}

/* سوییچ «فقط تفاوت‌ها» (چک‌باکس واقعی، قابل فوکوس با کیبورد) */
.kwc-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .kwc-switch input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.kwc-switch__track {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cfd3da;
    transition: background-color .2s ease;
}

    .kwc-switch__track::after {
        content: "";
        position: absolute;
        top: 3px;
        inset-inline-start: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        transition: transform .2s ease;
    }

.kwc-switch input:checked + .kwc-switch__track {
    background: var(--kwc-accent);
}

    .kwc-switch input:checked + .kwc-switch__track::after {
        transform: translateX(16px);
    }

[dir="rtl"] .kwc-switch input:checked + .kwc-switch__track::after {
    transform: translateX(-16px);
}

.kwc-switch input:focus-visible + .kwc-switch__track {
    outline: 2px solid var(--kwc-accent);
    outline-offset: 2px;
}

.kwc-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #f3d99a;
    border-radius: 10px;
    background: #fff8e6;
    font-size: 13px;
    color: #7a5a00;
}

.kwc-note--info {
    border-color: #bfd7f6;
    background: #eef5fe;
    color: #1d4f91;
}

/* جدول: روی موبایل خودش اسکرول دوطرفه دارد تا هدر و ستون عنوان چسبان بمانند (اسکرول‌کانتینر ← sticky نسبت به آن) */
.kwc-scroll {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    min-height: 260px;
    /* ارتفاع جدول اعشاری است؛ بدون این ۱px، اسکرول‌بار عمودی کاذب کنار جدول ظاهر می‌شود */
    padding-bottom: 1px;
    border: 1px solid var(--kwc-border);
    border-radius: var(--kwc-radius);
    background: #fff;
}

.kwc-table {
    width: 100%;
    min-width: calc(100px + var(--kwc-cols, 2) * 148px);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    .kwc-table th,
    .kwc-table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--kwc-border);
        font-size: 13px;
        line-height: 1.75;
        text-align: start;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .kwc-table tbody tr:last-child td,
    .kwc-table tbody tr:last-child th {
        border-bottom: 0;
    }

.kwc-corner {
    width: 100px;
}

.kwc-table thead th {
    position: sticky;
    top: var(--kwc-sticky-top, 0px);
    z-index: 3;
    padding-block: 10px;
    background: #fff;
    border-bottom: 2px solid var(--kwc-border);
    vertical-align: middle;
}

    .kwc-table thead th.kwc-corner {
        inset-inline-start: 0;
        z-index: 4;
    }

.kwc-table tbody th[scope="row"] {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #fafbfc;
    border-inline-end: 1px solid var(--kwc-border);
    font-weight: 600;
    color: #4b5563;
}

/* هدر فشرده‌ی هر محصول */
.kwc-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
    text-align: center;
}

.kwc-mini__img {
    display: block;
    width: 48px;
    height: 48px;
}

    .kwc-mini__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.kwc-mini__name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--kwc-ink);
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .kwc-mini__name:hover {
        color: var(--kwc-accent);
    }

.kwc-mini__x {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--kwc-border);
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
}

    .kwc-mini__x::after {
        content: "";
        position: absolute;
        inset: -8px;
    }

    .kwc-mini__x:hover,
    .kwc-mini__x:focus-visible {
        border-color: #c0392b;
        background: #c0392b;
        color: #fff;
    }

/* ستون «افزودن محصول» */
.kwc-col--slot {
    background: #fafafa !important;
}

.kwc-addslot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 72px;
    padding: 8px;
    border: 1px dashed #c4c8d0;
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

    .kwc-addslot:hover,
    .kwc-addslot:focus-visible {
        border-color: var(--kwc-accent);
        color: var(--kwc-accent);
    }

.kwc-addslot__plus {
    font-size: 22px;
    line-height: 1;
}

.kwc-slotcell {
    background: #fafafa;
}

/* ردیف قیمت/وضعیت/دکمه */
.kwc-row--hero td {
    text-align: center;
    vertical-align: middle;
}

.kwc-hero__price .priceBox {
    margin: 0;
    padding: 0;
}

.kwc-hero__price .tmn {
    font-size: 15px;
    font-weight: 700;
}

.kwc-hero__price .PkgPriceOld {
    font-size: 12px;
}

.kwc-hero__cta {
    display: block;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--kwc-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

    .kwc-hero__cta:hover,
    .kwc-hero__cta:focus-visible {
        color: #fff;
        filter: brightness(.94);
    }

.kwc-badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    font-size: 11.5px;
    color: #6b7280;
}

/* ردیف‌ها */
.kwc-row[data-same="0"] td {
    background: var(--kwc-diff);
}

.kwc-row[data-same="1"] td {
    color: #4b5563;
}

/* ردیف‌های اطلاعاتی (مثل کد محصول): تفاوتشان «تفاوت ویژگی» نیست؛ هایلایت نمی‌شوند و همیشه دیده می‌شوند */
.kwc-row--meta td {
    color: #6b7280;
    font-size: 12.5px;
}

.kwc-table td.is-empty {
    color: #b0b5bf;
}

@media (hover: hover) {
    .kwc-row:hover td,
    .kwc-row:hover th[scope="row"] {
        background: #f3f6fb;
    }
}

.kwc-norows {
    padding: 28px 16px;
    text-align: center;
    color: var(--kwc-muted);
}

.kwc-nodiff {
    display: none;
}

    .kwc-nodiff td {
        padding: 28px 16px;
        text-align: center;
        color: var(--kwc-muted);
    }

.kwc-table.kwc-only-diff .kwc-row[data-same="1"] {
    display: none;
}

.kwc-table.kwc-only-diff[data-diff-count="0"] .kwc-nodiff {
    display: table-row;
}

/* حالت خالی */
.kwc-empty {
    max-width: 440px;
    margin: 48px auto;
    text-align: center;
}

.kwc-empty__icon {
    color: #c4c8d0;
}

.kwc-empty__title {
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--kwc-ink);
}

.kwc-empty__text {
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--kwc-muted);
}

/* ───────────────────────── دسکتاپ ───────────────────────── */
@media (min-width: 768px) {
    /* جدول در عرض صفحه جا می‌شود؛ پس اسکرول‌کانتینر لازم نیست و هدر نسبت به خود صفحه چسبان می‌شود.
       overflow: clip اسکرول‌کانتینر نمی‌سازد (برای گوشه‌های گرد) و sticky را نمی‌شکند. */
    .kwc-scroll {
        max-height: none;
        min-height: 0;
        overflow: visible;
        overflow: clip;
    }

    .kwc-table {
        min-width: 0;
    }

    .kwc-corner {
        width: 160px;
    }

    .kwc-table th,
    .kwc-table td {
        padding: 12px 16px;
        font-size: 14px;
    }

    .kwc-mini {
        flex-direction: row;
        gap: 10px;
        text-align: start;
    }

    .kwc-mini__x {
        top: -6px;
        inset-inline-end: -8px;
    }

    .kwc-mini__img {
        flex: none;
        width: 60px;
        height: 60px;
    }
}

/* ───────────────────────── موبایل ───────────────────────── */
@media (max-width: 575.98px) {
    .kwc-bar__inner {
        gap: 6px;
        padding-inline: 10px;
    }

    .kwc-bar__slots {
        gap: 5px;
    }

    .kwc-slot {
        width: 42px;
        height: 42px;
    }

    .kwc-bar__text {
        display: none;
    }

    /* روی گوشی باریک هر چهار اسلات + «پاک کردن» + «مقایسه» باید بدون بیرون‌زدگی در یک ردیف جا شوند */
    .kwc-bar__actions {
        flex: 1 1 0;
        justify-content: flex-end;
        min-width: 0;
        gap: 6px;
    }

    .kwc-btn {
        flex: 0 1 auto;
        min-width: 0;
        padding-inline: 12px;
        font-size: 13px;
    }

    .kwc-btn--ghost {
        padding-inline: 8px;
    }

    .kwc-page {
        padding-block: 14px 120px;
    }

    .kwc-title {
        font-size: 17px;
    }

    .kwc-table tbody th[scope="row"] {
        font-size: 12px;
    }

    .kwc-sugg__item {
        flex-basis: 140px;
    }

    .kwc-panel {
        border-radius: 14px 14px 0 0;
    }

    .kwc-panel__body {
        max-height: 56vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kwc-bar,
    .kwc-panel,
    .kwc-toggle,
    article.pro-item .Quick.kwc-quick,
    .kwc-panel__input,
    .kwc-switch__track,
    .kwc-switch__track::after {
        transition: none;
    }

    .kwc-panel__state.is-loading::before {
        animation-duration: 2s;
    }
}