/* =========================
   Mobile Categories Offcanvas (Narrow Right + Circular Items)
   ========================= */

/* Offcanvas تمام صفحه */
.kk-mobile-cats-offcanvas.offcanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none;
}

/* پنل دوگانه */
.kk-categories-dual-panel {
    display: flex;
    height: 100%;
    background: #fff;
    direction: rtl;
}

/* پنل راست: والدها (باریک‌تر مثل عکس) */
.kk-cat-panel-parents {
    width: 28%;
    min-width: 110px;
    background: #f3f4f6;
    border-left: 1px solid #e5e7eb;
    overflow-y: auto;
    padding: 10px 0;
}

/* پنل چپ: فرزندان (عریض‌تر) */
.kk-cat-panel-children {
    width: 72%;
    background: #fff;
    overflow-y: auto;
    padding: 12px 10px 18px;
}

/* آیتم‌های والد */
.kk-cat-parent-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    border: 0;
    background: transparent;
    text-align: right;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,.04);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .kk-cat-parent-item i {
        font-size: 18px;
        margin-left: 10px;
        color: #6b7280;
    }

    .kk-cat-parent-item:hover {
        background: rgba(0,0,0,.04);
    }

    .kk-cat-parent-item.active {
        background: #fff;
        color: #0d6efd;
        font-weight: 700;
        border-left: 3px solid #0d6efd;
    }

        .kk-cat-parent-item.active i {
            color: #0d6efd;
        }

/* --- Grid آیتم‌های دایره‌ای سمت چپ --- */
.kk-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
}

/* لینک دایره‌ای */
.kk-cat-circle {
    text-decoration: none;
    color: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* خود دایره */
.kk-cat-circle__thumb {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* تصویر داخل دایره */
    /*.kk-cat-circle__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }*/
    .kk-cat-circle__thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    /* اگر تصویر نداشتیم: آیکن وسط دایره */
    .kk-cat-circle__thumb i {
        font-size: 26px;
        color: #6b7280;
    }

/* متن زیر دایره */
.kk-cat-circle__title {
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    color: #374151;
    max-width: 92px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* پیام خالی */
.kk-cat-empty {
    padding: 18px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    background: #f9fafb;
    border-radius: 12px;
    margin: 10px;
}

/* هدر offcanvas: عنوان/آیکن راست، بستن چپ */
.kk-offcanvas-header {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
}

    .kk-offcanvas-header .btn-close {
        margin: 0 !important;
    }

/* ریسپانسیو */
@media (max-width: 400px) {
    .kk-cat-panel-parents {
        width: 32%;
    }

    .kk-cat-panel-children {
        width: 68%;
    }

    .kk-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kk-cat-circle__thumb {
        width: 70px;
        height: 70px;
    }
}



/* =========================
   FIX: Mobile Bottom Nav override (anti-conflict)
   Paste at END of custom.css
   ========================= */

@media (max-width: 991.98px) {

    /* نوار اصلی */
    nav.kk-mobile-bottom-nav,
    .kk-mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 64px !important;
        background: #fff !important;
        border-top: 1px solid rgba(0,0,0,.10) !important;
        box-shadow: 0 -6px 18px rgba(0,0,0,.08) !important;
        z-index: 9999 !important;
        direction: rtl;
    }

        /* اگر قالب چیزی روی pseudo گذاشته حذفش کن */
        .kk-mobile-bottom-nav::before,
        .kk-mobile-bottom-nav::after {
            content: none !important;
            display: none !important;
        }

    /* ظرف داخلی */
    .kk-mobile-bottom-nav__inner {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 8px !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

        /* لینک/دکمه‌های آیتم */
        .kk-mobile-bottom-nav__inner > a.kk-mnav-item,
        .kk-mobile-bottom-nav__inner > button.kk-mnav-item {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            width: 20% !important;
            max-width: 20% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            text-decoration: none !important;
            font-size: 11px !important;
            line-height: 1.1 !important;
            color: rgba(0,0,0,.55) !important;
            white-space: nowrap !important;
        }

        /* آیکن */
        .kk-mobile-bottom-nav__inner > .kk-mnav-item i {
            font-size: 22px !important;
            line-height: 1 !important;
            margin: 0 !important;
        }

        /* متن زیر آیکن */
        .kk-mobile-bottom-nav__inner > .kk-mnav-item span {
            display: block !important;
            margin-top: 4px !important;
        }

        /* حالت فعال */
        .kk-mobile-bottom-nav__inner > .kk-mnav-item.active {
            color: #111 !important;
            font-weight: 700 !important;
        }

    /* badge سبد خرید */
    .kk-mnav-iconwrap {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .kk-mnav-badge {
        position: absolute !important;
        top: -8px !important;
        right: -12px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* جلوگیری از اینکه محتوا زیر منو بره */
    body {
        padding-bottom: 78px !important;
    }
}


/* =========================
   FIX: Active Filters Bar (safe, no layout break on view toggle)
   Paste at END of custom.css
   ========================= */

/* فقط نوار فیلترهای فعال را هدف بگیر */
#filterBox .filter-toolbar,
#filterBox .filters-summary,
#filterBox .active-filters-summary {
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 16px !important;
    background: #fff !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

/* ردیف داخلی نوار */
#filterBox .filter-toolbar__row,
#filterBox .filters-summary__row,
#filterBox .active-filters-summary__row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* چیپ‌ها: یک خط + اسکرول افقی */
#filterBox .filter-toolbar__chips,
#filterBox .active-filters,
#filterBox .selected-filters {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-bottom: 2px !important;
}

    /* فقط داخل چیپ‌ها nowrap بده، نه کل filterBox */
    #filterBox .filter-toolbar__chips *,
    #filterBox .active-filters *,
    #filterBox .selected-filters * {
        white-space: nowrap !important;
    }

/* چیپ‌ها */
#filterBox .filter-chip,
#filterBox .active-filter,
#filterBox .selected-filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(13,110,253,.35) !important;
    background: rgba(13,110,253,.08) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* سمت چپ/راست: تعداد و دکمه حذف همه */
#filterBox .filter-toolbar__right,
#filterBox .filters-summary__right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* اسکرول بار ظریف */
#filterBox .filter-toolbar__chips::-webkit-scrollbar,
#filterBox .active-filters::-webkit-scrollbar,
#filterBox .selected-filters::-webkit-scrollbar {
    height: 6px;
}

#filterBox .filter-toolbar__chips::-webkit-scrollbar-thumb,
#filterBox .active-filters::-webkit-scrollbar-thumb,
#filterBox .selected-filters::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 999px;
}


/* =========================
   FIX: Product list/grid toggle should not break layout
   ========================= */

/* کانتینر نتایج داخل filterBox هرچی هست، با چند selector رایج پوشش می‌دیم */
#filterBox .products-list,
#filterBox .product-list,
#filterBox .product-items,
#filterBox .products,
#filterBox .listing,
#filterBox .main-content {
    min-width: 0 !important;
}

/* جلوگیری از کش آمدن متن داخل کارت‌ها (تو حالت لیست/گرید) */
.product-card,
.product-card * {
    min-width: 0;
}

    /* متن عنوان محصول اگر خیلی بلند شد، نشکنه و کارت رو خراب نکنه */
    .product-card .product-title,
    .product-card .product-title a,
    .product-card .title,
    .product-card .title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* اگر قالب تو حالت لیست display:flex می‌کنه و متن می‌پاشه، این کمک می‌کنه */
.product-card,
.product-item,
.product-box {
    overflow: hidden;
}


/* Hide responsive sidebar close button on desktop */
@media (min-width: 992px) {
    .btn-close.close-responsive-sidebar {
        display: none !important;
    }
}


/* Right filters panel (desktop) - rounded card */
@media (min-width: 992px) {

    /* کانتینر فیلتر (اصلی‌ترین حالت پروژه شما) */
    .responsive-sidebar {
        background: #fff !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 18px !important;
        padding: 18px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
        overflow: hidden; /* برای حفظ گردی گوشه‌ها */
    }

        /* اگر داخلش المان‌هایی با پس‌زمینه جدا وجود داشت */
        .responsive-sidebar .widget,
        .responsive-sidebar .ui-box,
        .responsive-sidebar .card {
            border-radius: 14px !important;
        }
}

/* =========================
   Left Products Panel - Rounded Container (Desktop)
   ========================= */

@media (min-width: 992px) {

    /* کانتینر اصلی نتایج داخل #filterBox */
    #filterBox {
        background: #fff !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 22px !important;
        padding: 20px !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
        overflow: hidden; /* حفظ گوشه گرد */
    }

        /* اگر داخلش کارت‌ها جدا بک گراند دارند، نرم‌ترشان کن */
        #filterBox .card,
        #filterBox .ui-box,
        #filterBox .product-card {
            border-radius: 16px !important;
        }

        /* فاصله بین تولبار و محصولات */
        #filterBox .filter-toolbar,
        #filterBox .filters-summary {
            margin-bottom: 18px !important;
        }
}


/* =========================
   Mobile Roller (Accordion-like) for filter/sort bar
   ========================= */

@media (max-width: 991.98px) {

    .kk-m-roller {
        margin: 10px 12px 12px;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .kk-m-roller__head {
        width: 100%;
        border: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        font-weight: 800;
        font-size: 14px;
        color: #111;
    }

    .kk-m-roller__chev {
        font-size: 18px;
        line-height: 1;
        transition: transform .18s ease;
    }

    .kk-m-roller__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        border-top: 1px solid rgba(0,0,0,.06);
        padding: 0 14px;
    }

    /* حالت باز */
    .kk-m-roller.is-open .kk-m-roller__body {
        padding: 12px 14px 14px;
    }

    .kk-m-roller.is-open .kk-m-roller__chev {
        transform: rotate(180deg);
    }

    /* چون max-height باید عدد بگیره، با کلاس کمکی می‌دیم */
    .kk-m-roller.is-open .kk-m-roller__body {
        max-height: 520px; /* اگر محتوای تو بیشتره بگو تا افزایش بدم */
    }

    /* داخل رولر، آیتم‌ها فاصله خوب بگیرن */
    .kk-m-roller .filter-toolbar__row,
    .kk-m-roller .filters-summary__row {
        gap: 10px !important;
    }
}


/* =========================
   کاهش پدینگ باکس آبی و سایدبار (دسکتاپ)
   ========================= */
@media (min-width: 992px) {
    #filterBox {
        padding: 15px !important; /* قبلاً 20px بود */
    }

    .responsive-sidebar {
        padding: 15px !important; /* قبلاً 18px بود */
    }
}

/* =========================
   مرتب‌سازی افقی با اسکرول (موبایل)
   ========================= */
@media (max-width: 767.98px) {
    .sort-box ul.nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }

        .sort-box ul.nav::-webkit-scrollbar {
            height: 4px;
        }

        .sort-box ul.nav::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
        }

        .sort-box ul.nav .nav-item {
            display: inline-block;
            float: none;
        }
}

/* =========================
   دکمه حذف همه قرمز و بدون متن (در نوار فیلترهای فعال)
   ========================= */
.filter-toolbar__clear.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

    .filter-toolbar__clear.btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

/* اطمینان از عدم نمایش متن داخل دکمه (اگر با اسپن باشد) */
.filter-toolbar__clear.btn span {
    display: none;
}

/* =========================
   مخفی کردن دکمه‌های تغییر نمایش (گرید/لیست) فقط در موبایل
   ========================= */
@media (max-width: 991.98px) {
    .kk-m-roller .listing-products-view {
        display: none !important;
    }
}
/* =========================
   فوتر اصلی
   ========================= */
.page-footer {
    background-color: #f1f3f5 !important; /* خاکستری ملایم کل فوتر */
}

/* =========================
   نوار پایین فوتر
   ========================= */
.footer-bottom {
    background-color: #e9ecef;
    border-top: 1px solid #dcdfe3;
    padding: 14px 20px;
    direction: rtl;
}

.footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* متن وسط */
.copy-right {
    text-align: center;
}

    .copy-right a {
        color: #2d3e50;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        transition: color 0.2s ease;
    }

        .copy-right a:hover {
            color: #0d6efd;
        }

/* متن کپی‌رایت سمت راست */
.footer-copyright-text {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 14px;
    white-space: nowrap;
}

/* =========================
   باکس نمادها (کادر سبز)
   ========================= */
.footer-symbols-box {
    margin-top: 10px;
}

.trust-symbol-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* در RTL سمت چپ */
    align-items: center;
    min-height: 90px;
}

    .trust-symbol-custom a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #dcdfe3;
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .trust-symbol-custom img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* =========================
   ریسپانسیو
   ========================= */
@media (max-width: 991px) {
    .trust-symbol-custom {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
    }

    .footer-copyright-text {
        position: static;
        transform: none;
        white-space: normal;
        text-align: center;
    }

    .copy-right {
        order: 2;
    }
}