﻿
.gotobottom {
    background: linear-gradient( 0deg, rgba(255,255,255,1) 1%, rgb(255,255,255,80%) 60%, rgb(255,255,255) 100%);
}

.spcat {
    text-align: center;
    display: inline-block;
    font-size: 11px;
    width: 100%
}

.PageSummery p {
    line-height: 39px;
    font-size: 14px;
}

.PageSummery {
    max-height: 94px;
    overflow: hidden;
}

.filtercard h3 {
    font-size: 14px;
    display: inline-block;
    margin-bottom: -1px;
    font-weight: 500;
    min-width: 80%;
}

.categories .box li > a {
    color: #656565;
}

.categories .box li.URLActive > a {
    font-weight: bold;
    font-size: 14px;
    color: #4285f4;
}


.sidebar-fix-holder .box {
    margin: 10px 0;
    padding: 0 17px;
}


.sidebar-fix-holder .categories .box > ul {
    margin-right: 0;
    display: block;
}

.sidebar-fix-holder .categories li li > span:before {
    content: " ";
    position: absolute;
    height: 30px;
    width: 1px;
    top: 7px;
    border-right: 1px dashed silver;
    right: -2px;
}

.sidebar-fix-holder .categories li li:last-child > span:before {
    height: 11px;
}

.sidebar-fix-holder .categories li li:first-child > span:before {
    height: 38px;
    top: -2px;
}

.sidebar-fix-holder .categories li li > span:after {
    content: " ";
    position: absolute;
    width: 18px;
    height: 1px;
    top: 16px;
    right: 0px;
    border-bottom: 1px dashed silver;
}

.sidebar-fix-holder .categories li > span {
    padding: 5px 7px;
    width: 11px;
    min-height: 10px;
    /* display: inline-block; */
    float: right;
    position: relative;
}

.sidebar-fix-holder .categories li li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.sidebar-fix-holder .categories li a {
    display: block;
    padding: 5px 22px 5px 0;
}

.sidebar-fix-holder .categories li span i {
    font-size: 11px;
    transition: all 0.3s;
    cursor: pointer;
}

.sidebar-fix-holder .categories li:hover span i {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari */
    transform: scale(1.5);
}

.sidebar-fix-holder .categories li.active > span i {
    transform: rotate(-90deg);
}

.categories .box li > a:hover {
    background-color: #f2f2f2;
    color: #812990;
}

.sidebar-fix-holder .categories ul ul:after {
    /* content:" "; */
    position: absolute;
    height: 93%;
    width: 1px;
    top: 0px;
    border-right: 1px dashed silver;
    right: -2px;
}

.sidebar-fix-holder .categories ul ul {
    margin-right: 25px;
    position: relative;
}

.sidebar-fix-holder .categories ul {
    margin-right: 20px;
    display: none;
}

    .sidebar-fix-holder .categories ul.active {
    }

.PageSummery a {
    text-decoration: underline;
    color: #0275d8;
}

#CP_Main_lblSummery {
}

:not(.ContentMyModalSOrt).SortUL:before {
    display: inline-block;
    content: attr(data-label);
    color: #3b3b3b;
    margin-left: 5px;
    font-size: 12px;
    font-size: .857rem;
    line-height: 21px;
    vertical-align: middle;
    white-space: nowrap;
}


.ContentMyModalSOrt li {
    width: 100%;
}

.SortUL li {
    display: inline-block;
}

.ContentMyModalSOrt .SortUL li a {
    padding-right: 31px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.SortUL li a {
    display: block;
    padding: 0 11px;
    position: relative;
    font-size: 12px;
    font-size: .757rem;
    line-height: 32px;
    vertical-align: middle;
    border-radius: 15px;
    white-space: nowrap;
    color: #898989;
}

.ContentMyModalSOrt .SortUL li {
    position: relative;
    border-bottom: 1px solid #e6e6e6;
}

    .ContentMyModalSOrt .SortUL li a:after {
        content: '';
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 0;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #424242;
        flex-shrink: 0;
    }

    .ContentMyModalSOrt .SortUL li .isactive:after {
        background-color: #00bfd6;
    }

    .ContentMyModalSOrt .SortUL li .isactive {
        background-color: #ffffff;
        color: rgba(19,19,19,1);
    }

.SortUL li .isactive {
    background-color: #00bfd6;
    color: #fff;
}

.fitModal .ContentMyModalSOrt .SortUL li a {
    text-align: right;
}

.fastSerach {
    position: relative;
}

.clistingheader {
    margin-bottom: 10px;
    margin-top: 20px;
}

.fastSerach:after {
}

.filtercard {
    display: inline-block;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d2d2d2+100 */
    /* background: rgb(245, 245, 245); */ /* Old browsers */
    font-family: var(--kw-font-fa, "iranyekan");
    /* border-bottom: 1px solid #e2e2e2; */
    /* border-radius: 4px 4px 0px 0px; */
    position: relative;
    padding: 8px 7px;
    /* margin-bottom: 10px; */
    margin-bottom: 7px;
    color: var(--color800);
}


.sh_r hr {
    position: relative;
    top: -4px;
    left: 0px; /* right: 11px; */ /* float: right; */ /* width: 87%; */
}

.sh_r b {
    font-weight: bold;
    font-size: 1rem;
    background: white;
    float: right;
    margin-left: 11px;
}

.sh_r {
    /* margin: 12px 0px; */
}


/* ===== نوار چیپ‌های فیلتر موبایل (category-mobile.js) ===== */
.kw-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 2px;
    margin-bottom: 6px;
}

    .kw-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .kw-filter-chips:empty {
        display: none;
    }

.kw-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #444;
    font-size: 13px;
    white-space: nowrap;
}

    .kw-filter-chip.is-active {
        border-color: var(--bs-primary, #198754);
        color: var(--bs-primary, #198754);
        background: rgba(25, 135, 84, .08);
    }

.kw-filter-chip__count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bs-primary, #198754);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

    .kw-filter-chip__count:empty {
        display: none;
    }

/* فلش چیپ‌های بازکننده‌ی کشو */
.kw-filter-chip__arrow {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    /* لبه‌های فیزیکی (نه logical) تا در RTL هم گوشه‌ی پایین‌راست بماند و بعد از چرخش ۴۵ درجه فلش رو به پایین باشد */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* دایره‌ی رادیویی چیپ‌های تک‌حالته (تخفیف‌دار / فقط موجود) */
.kw-filter-chip__radio {
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
    background: #fff;
}

.kw-filter-chip.is-active .kw-filter-chip__radio {
    border-color: #ef394e;
    background: radial-gradient(circle, #ef394e 0 45%, #fff 50%);
}

/* ===== گروه‌بندی‌های placeholder صفحه‌ی جستجو: در موبایل یک ردیف با اسکرول افقی ===== */
@media (max-width: 575.98px) {
    .kw-hscroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .kw-hscroll::-webkit-scrollbar {
            display: none;
        }

        /* عرض هر آیتم = ۱۰۰٪ ÷ تعداد آیتم قابل‌دیدن (عدد اعشاری)؛ با ۳.۵ سه آیتم کامل و نصفِ چهارمی دیده می‌شود تا کاربر بفهمد ادامه دارد.
           برای تغییر، فقط --kw-hscroll-visible را عوض کنید. سلکتور قوی‌تر از col-* است تا عرض ستون‌ها را override کند */
        .row.kw-hscroll > * {
            flex: 0 0 auto;
            width: calc(100% / var(--kw-hscroll-visible, 3.5));
            max-width: none;
        }
}

/* ===== تغییر نحوه‌ی نمایش لیست محصولات در موبایل: لیست (پیش‌فرض) / ۲ ستون =====
   کلاس kw-view-grid روی <html> با یک اسکریپت کوچک در <head> و از روی کوکی kw_list_view ست می‌شود
   (قبل از رندر، بدون چشمک‌زدن؛ مستقل از Output Cache). تمام تغییر چیدمان فقط با CSS است. */
.kw-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #444;
}

    .kw-view-toggle svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    /* آیکون را بر اساس حالت فعلی عوض می‌کنیم: در حالت لیست آیکون «۲ ستون»، در حالت ۲ ستون آیکون «لیست» */
    .kw-view-toggle .kw-icon-list {
        display: none;
    }

html.kw-view-grid .kw-view-toggle .kw-icon-list {
    display: block;
}

html.kw-view-grid .kw-view-toggle .kw-icon-grid {
    display: none;
}

@media (max-width: 768px) {
    html.kw-view-grid #TopProductDiv .loadAjaxP > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* شمارنده‌ی صفحه‌بندی و پیام‌های کل‌عرض باید کل ردیف را بگیرند */
    html.kw-view-grid #TopProductDiv .loadAjaxP > .alert,
    html.kw-view-grid #TopProductDiv .loadAjaxP > div:not([class*="col-"]) {
        width: 100%;
    }

    html.kw-view-grid #TopProductDiv .pro-item {
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        height: 100%;
        position: relative;
    }

        html.kw-view-grid #TopProductDiv .pro-item.effect-bubba > a {
            flex-direction: column;
            flex: 1;
        }

        html.kw-view-grid #TopProductDiv .pro-item .proImg {
            float: none !important;
            flex: 0 0 auto;
            width: 100%;
        }

        html.kw-view-grid #TopProductDiv .pro-item div.proImg img {
            width: 100%;
            height: 150px !important;
            object-fit: contain;
        }

        html.kw-view-grid #TopProductDiv .pro-item .l_title {
            flex: 1;
            padding: 0 6px 6px;
        }

        html.kw-view-grid #TopProductDiv .pro-item .titlePro h3 {
            font-size: 12px;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        html.kw-view-grid #TopProductDiv article.pro-item .mg1_hv {
            position: static;
            width: 100%;
        }
}

/* ===== اسکلتون نوار چیپ‌ها تا لود فیلترها =====
   ارتفاع چیپ واقعی، دکمه‌ی نمایش و اسکلتون هر سه ۳۴px ثابت است تا هنگام جایگزینی، صفحه نپرد (بدون Layout Shift). */
.kw-filter-chip,
.kw-view-toggle,
.kw-chip-skeleton {
    box-sizing: border-box;
    height: 34px;
}

.kw-chip-skeleton {
    flex: 0 0 auto;
    width: 96px;
    border-radius: 20px;
    background: #e9ecef;
    animation: kwChipSkeletonPulse 1.2s ease-in-out infinite;
}

    .kw-chip-skeleton:first-child {
        width: 36px;
    }

    .kw-chip-skeleton:nth-child(3) {
        width: 80px;
    }

@keyframes kwChipSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
