/* ==========================================================
   نوار نمادهای اعتماد — _TrustBadges.cshtml
   - کاملاً مستقل از store.css (کلاس‌ها با tb- شروع می‌شوند)
   - بدون اسکرول افقی: grid + minmax(0,1fr) + کانتینر داخلی
========================================================== */
.tb,
.tb * {
    box-sizing: border-box;
}

.tb {
    /* کانتینر خودش را دارد؛ مستقل از اینکه صفحه container داشته باشد یا نه */
    width: min(1240px, calc(100% - 32px));
    max-width: 100%;
    margin: 2.5rem auto 2rem;
    overflow: clip;           /* هر چیزی بیرون بزند، صفحه را اسکرول نمی‌کند */
    overflow-clip-margin: 0;
}

.tb__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.tb__item {
    position: relative;
    min-width: 0;             /* اجازه‌ی کوچک شدن متن داخل grid */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface, #fffdf9);
    border: 1px solid var(--line, rgba(40, 43, 40, .10));
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(40, 43, 40, .04);
    transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), border-color .25s var(--ease, ease);
}

/* خط رنگی ظریف بالای هر کارت */
.tb__item::before {
    content: "";
    position: absolute;
    inset-inline: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, var(--p-forest, #3e5641), var(--p-mint, #83bca9));
    opacity: .0;
    transition: opacity .25s ease;
}

.tb__item--accent::before {
    background: linear-gradient(90deg, var(--p-orange, #d36135), var(--p-brick, #a24936));
}

.tb__item:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong, rgba(40, 43, 40, .16));
    box-shadow: var(--shadow-soft, 0 10px 28px rgba(40, 43, 40, .08));
}

.tb__item:hover::before {
    opacity: 1;
}

.tb__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--p-forest, #3e5641);
    background: rgba(131, 188, 169, .20);
    transition: background .25s ease, color .25s ease;
}

.tb__item--accent .tb__icon {
    color: var(--p-orange, #d36135);
    background: rgba(211, 97, 53, .12);
}

.tb__item:hover .tb__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--p-forest, #3e5641), var(--p-mint, #83bca9));
}

.tb__item--accent:hover .tb__icon {
    background: linear-gradient(135deg, var(--p-orange, #d36135), var(--p-brick, #a24936));
}

.tb__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb__title {
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--p-forest, #3e5641);
    overflow-wrap: anywhere;
}

.tb__sub {
    font-size: .76rem;
    line-height: 1.5;
    color: var(--muted, #70766f);
    overflow-wrap: anywhere;
}

/* ---------- تبلت: ۳ ستون + ردیف دوم وسط‌چین ---------- */
@media (max-width: 1100px) {
    .tb__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tb__item {
        grid-column: span 2;
    }

    /* دو کارت آخر ردیف دوم را وسط‌چین می‌کند */
    .tb__item:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .tb__item:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

/* ---------- موبایل: ۲ ستون، کارت‌ها عمودی و جمع‌وجور ---------- */
@media (max-width: 640px) {
    .tb {
        width: calc(100% - 24px);
        margin: 1.75rem auto 1.5rem;
    }

    .tb__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tb__item,
    .tb__item:nth-child(4),
    .tb__item:nth-child(5) {
        grid-column: auto;
    }

    /* کارت پنجم (تنها) تمام عرض می‌شود */
    .tb__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .tb__item {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 8px;
        padding: 14px 8px;
    }

    .tb__item:last-child:nth-child(odd) {
        flex-direction: row;
        text-align: start;
        gap: 12px;
    }

    .tb__icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
        border-radius: 12px;
    }

    .tb__text {
        align-items: center;
    }

    .tb__item:last-child:nth-child(odd) .tb__text {
        align-items: flex-start;
    }

    .tb__title {
        font-size: .84rem;
    }

    .tb__sub {
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb__item,
    .tb__item::before,
    .tb__icon {
        transition: none;
    }

    .tb__item:hover {
        transform: none;
    }
}