/* کمپین اعتبار پویا — نوارِ چسبانِ بالای سایت + لیبلِ محصول
   رنگ‌ها از توکن‌های دیزاین‌سیستمِ بارجیل (:root --c-*) و فونتِ Dana ارث می‌رسند. */

.bjdc-bar {
    position: sticky; /* در جریانِ عادی می‌ماند (هدر را نمی‌پوشاند) و موقعِ اسکرول می‌چسبد */
    top: 0;
    inset-inline: 0;
    z-index: 9990;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: rgb(var(--c-onsurface-high));
    background: linear-gradient(90deg,
        rgb(var(--c-primary-container)) 0%,
        rgb(var(--c-secondary-container)) 100%);
    border-bottom: 1px solid rgb(var(--c-primary) / .35);
    box-shadow: 0 2px 10px rgb(var(--c-neutral-95) / .06);
}

.bjdc-bar[hidden] {
    display: none;
}

/* متنِ پیوسته. قبلاً inline-flex بود: هر تکه (مبلغ، strong، کلمه‌ها) آیتمِ جدا می‌شد و
   در موبایل جملهٔ حالتِ قفل چهارستونه می‌شکست. فاصله‌ها از خودِ متن می‌آیند. */
.bjdc-bar__text {
    display: inline;
}

.bjdc-bar__amount {
    font-weight: 800;
    white-space: nowrap; /* عدد و «تومان» در موبایل از هم جدا نشوند */
    color: rgb(var(--c-secondary)); /* نارنجیِ برند برای جلبِ توجه */
}

.bjdc-bar__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* نوارِ پیشرفتِ آزادسازی */
.bjdc-bar__progress {
    position: relative;
    width: 160px;
    max-width: 40vw;
    height: 8px;
    border-radius: 20px;
    background: rgb(var(--c-primary) / .25);
    overflow: hidden;
}

.bjdc-bar__progress-fill {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    border-radius: 20px;
    background: rgb(var(--c-primary-dark));
    transition: width .4s ease;
}

/* چیپِ شمارشِ معکوس */
.bjdc-bar__timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--c-secondary-oncontainer));
    background: rgb(var(--c-secondary-container));
    font-variant-numeric: tabular-nums;
}

/* حالتِ آزادشده — کمی روشن‌تر */
.bjdc-bar.is-active {
    background: linear-gradient(90deg,
        rgb(var(--c-primary-tonal-10)) 0%,
        rgb(var(--c-secondary-tonal-10)) 100%);
}

/* سوختنِ اعتبار — رنگِ خنثی تا با حالتِ فعال اشتباه نشود */
.bjdc-bar.is-expired {
    background: linear-gradient(90deg,
        rgb(var(--c-light-200)) 0%,
        rgb(var(--c-secondary-tonal-0)) 100%);
    border-bottom-color: rgb(var(--c-neutral-10));
}

/* کلِ نوار قابلِ زدن است و توضیحِ منطق را باز/بسته می‌کند */
.bjdc-bar.has-explain {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* دکمهٔ «چطور کار می‌کنه؟» */
.bjdc-bar__info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 10px 2px 9px;
    border: 1px solid rgb(var(--c-primary-dark) / .35);
    border-radius: 20px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: rgb(var(--c-primary-oncontainer));
    background: rgb(var(--c-neutral-0) / .6);
    cursor: pointer;
}

.bjdc-bar__info svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bjdc-bar.is-open .bjdc-bar__info {
    background: rgb(var(--c-neutral-0));
}

/* پنلِ توضیح: ردیفِ تمام‌عرض داخلِ خودِ نوار، پس با نوار می‌چسبد و همراهِ کاربر می‌ماند */
.bjdc-bar__explain {
    flex-basis: 100%;
    max-width: 760px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
    text-align: center;
    color: rgb(var(--c-onsurface-high));
    background: rgb(var(--c-neutral-0) / .75);
    cursor: auto;
}

.bjdc-bar__explain[hidden] {
    display: none;
}

/* دکمهٔ ورودِ مهمان؛ مودالِ ورودِ هدر را باز می‌کند */
.bjdc-bar__login {
    flex-shrink: 0;
    padding: 2px 16px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: rgb(var(--c-primary-on));
    background: rgb(var(--c-primary));
    cursor: pointer;
}

.bjdc-bar__login:hover {
    background: rgb(var(--c-primary-tonal-60));
}

/* پالسِ کوتاه هنگام تغییرِ مبلغ */
@keyframes bjdc-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.bjdc-bar__amount.bjdc-pulse {
    display: inline-block;
    animation: bjdc-pulse .5s ease;
}

@media (max-width: 767px) {
    .bjdc-bar {
        font-size: 12.5px;
        gap: 6px 8px;
        padding: 7px 12px;
        justify-content: flex-start;
    }
    /* متن کنارِ سکه می‌ماند و درونِ خودش می‌شکند (سکه دیگر به خطِ جدا نمی‌رود) */
    .bjdc-bar__text {
        flex: 1 1 0;
        min-width: 0;
    }
    /* نوارِ پیشرفت زیرِ متن، تمام‌عرض */
    .bjdc-bar__progress {
        flex-basis: 100%;
        width: auto;
        max-width: none;
    }
    .bjdc-bar__timer {
        font-size: 11px;
        padding: 2px 7px;
    }
    /* فقط آیکون؛ نامِ دسترس‌پذیر از aria-label می‌آید */
    .bjdc-bar__info {
        padding: 3px;
        border-radius: 50%;
    }
    .bjdc-bar__info-label {
        display: none;
    }
    .bjdc-bar__info svg {
        width: 18px;
        height: 18px;
    }
    .bjdc-bar__explain {
        padding: 7px 10px;
        font-size: 12px;
        text-align: start;
    }
    .bjdc-bar__login {
        padding: 2px 12px;
        font-size: 12px;
    }
}

/* لیبلِ اعتبار روی کارتِ محصول */
.bjdc-product-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: rgb(var(--c-primary-oncontainer));
    background: rgb(var(--c-primary-container));
    border: 1px solid rgb(var(--c-primary) / .4);
}

.bjdc-product-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .bjdc-product-label {
        font-size: 11px;
        padding: 2px 7px;
    }
}