﻿.dtimg1 img {
    filter: invert(0%) sepia(75%);
    opacity: 0.6;
}

.dtimg1 {
    width: 34px;
    display: inline-block;
    top: 22px;
    position: absolute;
    right: 0px;
}


#lblSummery {
    font-size: 12px;
    word-wrap: break-word;
}


    #lblSummery .sumr {
        padding-bottom: 21px;
        padding-top: 12px;
        padding-right: 7px;
    }

        #lblSummery .sumr li {
            font-weight: bold;
        }


            #lblSummery .sumr li:before {
                content: ' ';
                width: 8px;
                height: 8px;
                display: inline-block;
                background: var(--ColorBadge);
                border-radius: 24px;
                position: relative;
                top: 1px;
                right: -6px;
            }


.CardSumDetail {
    font-size: 14px;
    padding: 8px;
}

.c_q {
    display: none;
}

.Qcview .c_quantity {
    top: -71px;
}

.c_quantity {
    float: left;
    position: absolute;
    top: -9px;
    left: 0px;
    font-size: 11px;
    background-color: #4285f4;
    padding: 7px 9px;
    border-radius: 10px;
    cursor: pointer;
}


.gLine1 {
    padding-bottom: 20px;
    border-bottom: 1px solid #dfdfdf;
}

.garranty {
    top: 8px;
}

.totalAll {
    border-top: 4px solid var(--LogoOrgColor);
    padding: 15px 0;
}

#div_PurchaseDetail {
    margin-bottom: 10px;
}


    #div_PurchaseDetail .cardcount[data-cardnumber]:not([data-cardnumber='0']) {
        /* padding-left: 4px; */
    }

.det-info .txt-1 {
    color: #5f5f5f;
    font-size: 12px;
    line-height: 25px;
    margin: 10px auto;
}

.totalBox {
    display: inline-block;
    width: 100%;
    margin: 15px auto auto;
}

.boxProDet {
    border: var(--line_Border_Gray);
    display: inline-block;
    height: auto;
    margin: 6px auto;
    width: 100%;
    border-radius: 10px;
    background-color: #FFF;
}

[data-isrequired=True]:before {
}




.pro-opt {
    position: absolute;
    right: 5px;
    /*top: 117px;*/
    top: 159px;
}


.tab-place {
    width: 100%;
    /* border: 1px solid #dfdfdf; */
    /* box-shadow: 0 4px 6px #ccc; */
    display: inline-block;
    margin: 10px auto;
    height: auto;
    border-top: none;
}

ul.tab-link {
    padding: 0px;
    margin: 0px;
}

.tab-link {
    display: inline-block;
    width: 99.7%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d2d2d2+100 */
    /* background: rgb(245, 245, 245); */
    /*font-family: "Mj_Liner_Screen_Bd";*/
    /* background-color: #f5f5f5; */
    border-bottom: 1px solid #dfdfdf;
    /* margin-right: -3px; */
    /* border: 1px solid #dfdfdf; */
}

    .tab-link a {
        background-size: 100% 100%;
        color: #000;
        display: block;
        float: right;
        margin: auto 0px;
        padding: 8px 14px;
        position: relative;
        font-size: 14px;
    }

        .tab-link a:first-child {
        }

.tab-div-holder {
    width: 100%;
    /* margin-top: 22px; */
    /* -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.09); */
    /* box-shadow: 0px 3px 4px 0 rgba(0,0,0,.09); */
    /* border-radius: 0px 5px 5px 5px; */
    /* border: 1px solid #dfdfdf; */
    /* border-top: 0px; */
    /* background-color: white; */
    margin-top: -7px;
}

.tab-link a.active-tab {
    color: #b71d03;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1e1e+0,d50a09+100 */
    /* background: #e4322c; */ /* Old browsers */
    border: 1px solid #dfdfdf;
    border-bottom: 1px solid white;
    /* position: relative; */
    /* top: 1px; */
    /* border-top: 3px solid #4285f4; */
    background-color: white;
    /* z-index: 111; */
    /* border: 1px solid black; */
    /* position: relative; */
}


.tab-link-A a:first-child, .tab-link-B a:first-child, .tab-link-B a:first-child {
    margin-right: 0;
}

.inner-tab {
    margin-top: 15px;
}



.tab-link a.active-tab:after {
    content: " ";
    width: 100%;
    height: 103%;
    /* background-color:red; */
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: 2px solid #4285f4;
    border-bottom: 4px solid #ffffff;
    z-index: 1;
}





.inner-tab .propID, .inner-tab .propValue {
    /* width: 100% !important; */
    /* max-width: 100%; */
    /* flex: 100%; */
    margin-bottom: 0px !important;
    border-bottom: 2px solid white;
    margin-left: 0px !important;
}


.inner-tab .propID {
    background-color: #e4e4e4 !important;
}

.inner-tab .propValue {
    background-color: #d8d8d8 !important;
}


.propValue a {
    position: relative;
}

    .propValue a:after {
        left: 0;
        right: 0;
        top: 50%;
        margin-top: 0.85em;
        content: "";
        position: absolute;
        border-bottom: 1px dashed #1ca2bd;
    }

.inner-tab .propValue {
    background: #f1f1f1 !important;
    font-weight: bold;
}

.s_bottom .tumb.active {
    border: 1px solid #606060;
}

.s_bottom .tumb img {
    width: 100%;
    cursor: pointer;
    padding: 4px;
    width: 60px;
}

.swiper-container.s_top {
    min-height: 300px;
}

.s_bottom .tumb {
    /* float: right; */
    border: 1px solid silver;
    border-radius: 5px;
    /* padding: 4px; */
    /* margin: 2px; */
    /* width: 74px; */
    /* height: 74px; */
    /* float: left; */
    /* position: relative; */
    margin-top: 8px;
    width: 61.6667px;
    margin-left: 5px;
}



.hart_ra {
    position: relative;
}

.VisitnumberN {
    /* float: left; */
    /* padding: 0px 7px; */
}




.heart {
    /* background: url(//dl.shahreyaragh.com/site/img/AtImages/web_heart_animation.png); */
    /* background-position: left; */
    /* background-repeat: no-repeat; */
    /* height: 100px; */
    /* width: 100px; */
    cursor: pointer;
    /* position: absolute; */
    /* right: -34px; */
    /* top: -36px; */
    /* background-size: 2900px; */
    background-color: transparent;
    border: none;
    /* float: right; */
    /* position: absolute; */
    /* left: -30px; */
    /* top: -2px; */
}

    .heart .mb3.out {
    }

    .heart .mb3.fill {
        display: none;
    }


.fa.fa-eye {
    font-size: 10px;
}

    .fa.fa-eye:before {
        content: "\E117";
    }

.heartAnimation .mb3.out {
    display: none;
}

.heartAnimation .mb3.fill {
    display: block;
}


#Add2WishList .mb3 .fa-fw {
    width: 27px !important;
    padding-right: 3px;
}




/* افکت ساده و سبک برای فیلدهای اجباری */
.required-highlight {
    animation: highlight 1.5s ease-out;
}

@keyframes highlight {
    0%, 100% {
        background: transparent;
        transform: translateX(0);
    }

    10% {
        background: rgba(255, 59, 48, 0.12);
        transform: translateX(-6px);
    }

    20% {
        transform: translateX(6px);
    }

    30% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    50% {
        background: rgba(255, 59, 48, 0.08);
        transform: translateX(0);
    }
}

.swiper-zoom-container figure {
    width: 100%;
}


/*position: relative
        اینو باید برای پی سی و موبایل میزاشتیم
        اینو قبالا فقط برای موبال گذاشته بودیم
    توی pc بگا رفته بود
    */
.c_effect {
    transition: all .4s ease-in;
    position: relative
}


/* ── باکس «نسخهٔ جدید این محصول» (بالای صفحهٔ محصول قدیمی) ── */
.newVersionNotice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    padding: 12px 16px;
    border: 1px solid #ffd9a0;
    border-radius: 10px;
    background: linear-gradient(90deg, #fff8ec, #fffdf8);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s ease, border-color .25s ease;
}

    .newVersionNotice:hover {
        border-color: #ffb84d;
        box-shadow: 0 4px 14px rgba(255, 152, 0, .18);
        text-decoration: none;
        color: inherit;
    }

.newVersionNotice__img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0;
}

.newVersionNotice__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.newVersionNotice__badge {
    font-size: 12px;
    font-weight: 700;
    color: #d97706;
}

.newVersionNotice__title {
    font-weight: 700;
    font-size: 15px;
}

.newVersionNotice__text {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.newVersionNotice__cta {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #b45309;
}

@media (max-width: 576px) {
    .newVersionNotice__img {
        width: 52px;
        height: 52px;
    }
    .newVersionNotice__title {
        font-size: 14px;
    }
}

/* باکس قیمت/خرید: در دسکتاپ هنگام اسکرول در ستون خودش می‌چسبد. مقدار top را productdetail.js تنظیم می‌کند */
@media (min-width: 769px) {
    .boxProce.kw-sticky-buybox {
        position: sticky;
        top: var(--kw-buybox-top, 100px);
    }
}

/* ===== توکن‌های رنگ و badge فارسیِ کارت خرید و سبد خرید گروهی =====
   پیش‌فرض‌ها از متغیرهای Bootstrap 5.3 می‌آیند؛ پس با data-bs-theme="dark" خودکار تیره می‌شوند.
   این فایل (از @section header) بعد از site.css و custom.css مستاجر لود می‌شود. :where(:root) هم specificity صفر دارد؛
   بنابراین هر :root{--kw-...} که مستاجر در tenants/{domain}/site.css یا custom.css بنویسد، فارغ از ترتیب لود، همیشه برنده است. */
:where(:root) {
    /* رنگ شاخص: ردیف انتخاب‌شده، دکمه‌ی افزودن به سبد، خط زیر عنوان بخش */
    --kw-buy-accent: var(--bs-danger);

    /* برچسب «تا X با خرید عمده»، درصد تخفیف، جدول پله‌ها */
    --kw-bulk-bg: var(--bs-success-bg-subtle);
    --kw-bulk-color: var(--bs-success-text-emphasis);
    --kw-bulk-border: var(--bs-success-border-subtle);

    /* پیام «N عدد دیگر ← هر عدد X» */
    --kw-hint-color: var(--bs-warning-text-emphasis);

    /* badge/لیبل مناسب فارسی: اندازه‌ی .75em پیش‌فرض بوت‌استرپ روی بدنه‌ی ۱۲px یعنی ۹px که برای حروف فارسی ناخوانا است
       و فاصله‌ی خطِ کم (۱) نقطه‌ها و اعراب را می‌برد */
    --kw-badge-font-size: 12px;
    --kw-badge-font-weight: 500;
    --kw-badge-line-height: 1.9;
    --kw-badge-padding-x: .65em;
    --kw-badge-padding-y: .1em;
    --kw-badge-radius: var(--bs-border-radius);
}

/* badge پایه: همان .badge بوت‌استرپ با متغیرهای خودش (مطابق مستندات)؛ نوع‌ها (kw-badge-bulk و ...) فقط رنگ را عوض می‌کنند.
   specificity دو کلاس است تا روی .badge عمومی (Style_ads.css و ...) برنده شود */
.badge.kw-badge {
    --bs-badge-padding-x: var(--kw-badge-padding-x);
    --bs-badge-padding-y: var(--kw-badge-padding-y);
    --bs-badge-font-size: var(--kw-badge-font-size);
    --bs-badge-font-weight: var(--kw-badge-font-weight);
    --bs-badge-border-radius: var(--kw-badge-radius);
    --bs-badge-color: var(--kw-badge-color, var(--bs-secondary-color));
    background-color: var(--kw-badge-bg, var(--bs-secondary-bg));
    border: 1px solid var(--kw-badge-border, transparent);
    line-height: var(--kw-badge-line-height);
}

.kw-badge-bulk {
    --kw-badge-bg: var(--kw-bulk-bg);
    --kw-badge-color: var(--kw-bulk-color);
    --kw-badge-border: var(--kw-bulk-border);
}

/* ===== تخفیف تعدادی: برچسب بازشونده + جدول پله‌ها (Pages/Site/Product/_QuantityDiscountBox.cshtml) ===== */
.qd-box {
    position: relative;
    display: block;
    flex-basis: 100%;
    margin-top: 6px;
}

.badge.qd-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.qd-badge::-webkit-details-marker {
    display: none;
}

.qd-badge:focus-visible {
    outline: 2px solid var(--kw-bulk-color);
    outline-offset: 2px;
}

.qd-badge i {
    font-size: .9em;
    transition: transform .2s;
}

.qd-box[open] .qd-badge i {
    transform: rotate(180deg);
}

.qd-pop {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 30;
    min-width: 230px;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    font-size: 12px;
    line-height: 1.8;
}

.qd-title {
    margin-bottom: 4px;
    color: var(--kw-bulk-color);
    font-weight: 700;
}

/* هر پله یک «قرص»؛ پله‌ی فعال (qd-active) با کادر مشخص می‌شود. بوردر شفاف از جابه‌جایی چیدمان موقع فعال‌شدن جلوگیری می‌کند */
.qd-pop table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
}

.qd-pop td {
    padding: 2px 10px;
    border: 0 solid transparent;
    border-block-width: 1px;
    white-space: nowrap;
}

.qd-pop td:first-child {
    border-inline-start-width: 1px;
    border-start-start-radius: var(--bs-border-radius);
    border-end-start-radius: var(--bs-border-radius);
}

.qd-pop td:last-child {
    border-inline-end-width: 1px;
    border-start-end-radius: var(--bs-border-radius);
    border-end-end-radius: var(--bs-border-radius);
    text-align: end;
}

.qd-price {
    font-weight: 700;
    color: var(--kw-bulk-color);
}

.qd-row[data-base] .qd-price {
    color: var(--bs-body-color);
}

.qd-row.qd-active td {
    background-color: var(--kw-bulk-bg);
    border-color: var(--kw-bulk-border);
}

/* پله‌ی پایه (هنوز تخفیفی نخورده) کادر خنثی می‌گیرد، نه سبز */
.qd-row[data-base].qd-active td {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* پیام پله‌ی بعد */
.qd-next {
    margin-top: 4px;
    color: var(--kw-hint-color);
    font-size: 12px;
    line-height: 1.8;
}

.qd-next b {
    font-weight: 700;
}

/* قیمت قبل از پله (خط‌خورده) + درصد تخفیف؛ فقط وقتی پله‌ای فعال است دیده می‌شود */
.qd-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.qd-live[hidden] {
    display: none;
}

.qd-live-old {
    color: var(--bs-secondary-color);
    font-size: 12px;
}
