/* SLFS/web-v2 · بخشِ tests
   منتقل‌شده از <style>ِ قالب (2026-10-02) — RULES §۳.۵ */

/* ══════════ tests ══════════ */
/* ══ SLFS · آزمون‌های تکمیلی پیشنهادی (.slfs-tx) — از tests-section.html ══ */
/* :root{--C;--EC-border;--EC-slate} طرح → متغیرهای محلیِ همین بخش */
.slfs-tx { --tx-c: #334155; --tx-border: #E5E7EB; --tx-slate: #64748b; color: var(--tx-c) }

/* ── کارتِ آزمون (هم‌سبکِ بخشِ آزمون‌های تکمیلیِ CTI) ── */
.slfs-tx .test-list { margin: 16px 0; display: flex; flex-direction: column; gap: 16px }
.slfs-tx .test-item { background: #fff; border-radius: 20px; border: 1px solid var(--tx-border); box-shadow: 0 4px 20px rgba(0,0,0,.04); overflow: hidden; transition: all .3s }
.slfs-tx .test-item:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px) }
.slfs-tx .test-item__top { padding: 20px 24px; display: flex; gap: 20px; align-items: flex-start }
.slfs-tx .test-item__icon { width: 56px; height: 56px; border-radius: 14px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-tx .test-item__icon svg { width: 28px; height: 28px; fill: #64748b }
.slfs-tx .test-item__info { flex: 1; min-width: 0 }
.slfs-tx .test-item__name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px }
.slfs-tx .test-item__name { font-size: 17px; font-weight: 900; color: var(--tx-c) }
.slfs-tx .test-item__en { font-size: 12px; color: #94A3B8; font-weight: 600; direction: ltr }
.slfs-tx .test-item__reason { margin-top: 10px; font-size: 13px; color: #4B5563; line-height: 24px; text-align: justify }
.slfs-tx .test-item__bottom { padding: 16px 24px; background: linear-gradient(135deg, #F8FAFC, #F1F5F9); border-top: 1px solid var(--tx-border); display: flex; align-items: center; justify-content: space-between; gap: 16px }
.slfs-tx .test-item__meta { display: flex; gap: 12px; flex: 1; flex-wrap: wrap }
.slfs-tx .test-item__meta-tag { font-size: 11px; color: var(--tx-slate); font-weight: 600; background: #fff; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--tx-border); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.slfs-tx .test-item__meta-tag svg { width: 12px; height: 12px; fill: var(--tx-slate) }
.slfs-tx .test-item__cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; border-radius: 12px; background: linear-gradient(135deg, #12B886, #0D9488); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; transition: all .2s; border: none; cursor: pointer; flex-shrink: 0; font-family: var(--font-family); box-shadow: 0 4px 12px rgba(18,184,134,.25) }
.slfs-tx .test-item__cta:hover { box-shadow: 0 6px 20px rgba(18,184,134,.4); transform: translateY(-1px) }
.slfs-tx .test-item__cta svg { width: 16px; height: 16px; fill: #fff }

@media (max-width: 768px) {
    .slfs-tx .test-item__name-row { flex-direction: column; gap: 2px; align-items: center; text-align: center }
    .slfs-tx .test-item__en { text-align: center }
}
@media (max-width: 576px) {
    .slfs-tx .test-item__top { flex-direction: column; align-items: center; text-align: center; padding: 16px }
    .slfs-tx .test-item__name-row { align-items: center; text-align: center }
    .slfs-tx .test-item__name { text-align: center }
    .slfs-tx .test-item__en { text-align: center }
    .slfs-tx .test-item__reason { text-align: justify }
    .slfs-tx .test-item__bottom { flex-direction: column; text-align: center; padding: 14px 16px; gap: 12px }
    .slfs-tx .test-item__meta { justify-content: center }
    .slfs-tx .test-item__cta { width: 100%; justify-content: center }
}

/* ── یادآوری مهم (در طرح: .disclaimer-box) ── */
.slfs-tx .tx-disclaimer { background: #F3F4F6; border-radius: 12px; padding: 20px 24px; margin-top: 40px; border: 1px solid var(--tx-border) }
.slfs-tx .tx-disclaimer__title { font-size: 14px; font-weight: 700; color: #6B7280; margin-bottom: 8px; display: flex; align-items: center; gap: 6px }
.slfs-tx .tx-disclaimer__title svg { width: 18px; height: 18px; fill: currentColor }
.slfs-tx .tx-disclaimer__text { font-size: 13px; color: #6B7280; line-height: 1.9; text-align: justify }