/* ═══════════════════════════════════════════════════════════════════════
Fastitem 7.2 — صفحهٔ «خرید آیتم دوتا ۲» (طرح Fastitem Dota2 Listing، ۲۰۲۶-۰۹-۰۵)
ستون فیلتر راست آکاردئونی (۳۰۰px) + گرید کارتهای ثابت (حداقل ۲۱۰px) + «نمایش آیتمهای بیشتر» با نوار پیشرفت.
فقط روی صفحهٔ dota2 لود میشود (body.fsi-dl). توکنها از css/fsi-72-shell.css میآیند.
═══════════════════════════════════════════════════════════════════════ */
body.fsi-dl { background: var(--fh-bg) !important; background-image: none !important; color: var(--fh-text); }
body.fsi-dl > hr { display: none; }
/* ───────── چیدمان: فیلتر راست ۳۰۰px + محتوا ───────── */
/* ساختار: .container-fluid.fsi-dl-wrap > .row > (.sideCat + .fsi-dl-main) — گرید روی .row؛ فیلتر همیشه ۳۰۰px، کش نمیآید */
body.fsi-dl .fsi-dl-wrap { padding: 16px var(--fh-gutter) 40px; }
body.fsi-dl .fsi-dl-wrap > .row { display: grid !important; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 !important; }
body.fsi-dl .fsi-dl-wrap > .row::before, body.fsi-dl .fsi-dl-wrap > .row::after { display: none !important; content: none !important; }
body.fsi-dl .fsi-dl-wrap > .row > .sideCat { grid-column: 1; grid-row: 1; width: 300px !important; max-width: 300px !important; min-width: 300px !important; float: none !important; padding: 0 !important; margin: 0 !important; position: sticky; }
body.fsi-dl .fsi-dl-wrap > .row > .fsi-dl-main { grid-column: 2; grid-row: 1; min-width: 0; width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; position: static; }
body.fsi-dl .sideCat { background: transparent; border: 0; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--fh-line2) transparent; }
body.fsi-dl .FilterBanner, body.fsi-dl .fsi-dl-ads { display: none !important; }
/* ───────── پنل فیلتر ───────── */
body.fsi-dl .FsiFP { background: var(--fh-bg2) !important; border: 1px solid var(--fh-line) !important; border-radius: 14px !important; }
body.fsi-dl .FsiFPHead { padding: 12px 14px; border-bottom: 1px solid var(--fh-line); font-size: 14px; font-weight: 800; color: var(--fh-text); }
body.fsi-dl .FsiFPHead { gap: 8px; }
body.fsi-dl .FsiFPHead span { margin-right: auto; }
body.fsi-dl .FsiFPHead::before { content: ''; width: 16px; height: 16px; order: -1; opacity: .7;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
body.fsi-dl .FsiFPHead span { color: var(--fh-muted); font-size: 12px; font-weight: 600; }
body.fsi-dl .FsiFPHead span:hover { color: #fff; text-decoration: none; }
body.fsi-dl .FsiFPBody { padding: 12px 14px 6px; }
body.fsi-dl .FsiFSec { background: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid var(--fh-line) !important; border-radius: 0 !important; padding: 0 0 6px !important; margin: 0 0 6px !important; }
body.fsi-dl .FsiFSec:last-child { border-bottom: 0 !important; }
body.fsi-dl .FsiFSec:last-child { border-bottom: 0; }
body.fsi-dl .FsiFSearch { margin-bottom: 4px; }
body.fsi-dl .FsiFSearch::before { content: ''; width: 14px; height: 14px; top: 12px; left: 12px; opacity: .6;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
body.fsi-dl .FsiFPBody input[type="search"], body.fsi-dl .FsiFPBody input[type="text"] {
background: var(--fh-bg) !important; border: 1px solid var(--fh-line2) !important; border-radius: 10px !important; padding: 0 12px !important; height: 38px !important; line-height: 38px !important; font-size: 12.5px !important; color: var(--fh-text) !important; text-align: right !important; box-sizing: border-box !important;
}
body.fsi-dl .FsiFPBody .HeroSelectCat input#SearchHeroName { height: 34px !important; line-height: 34px !important; font-size: 12px !important; }
body.fsi-dl .FsiFPBody input:focus { border-color: var(--fh-blue) !important; box-shadow: 0 0 0 3px rgba(61,90,254,.18) !important; }
/* سربرگ آکاردئونی */
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel {
display: flex !important; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 0 !important; padding: 4px 0; width: 100%; direction: rtl;
font-size: 13.5px; font-weight: 800; color: var(--fh-text);
}
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-title { order: 1; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-sum { order: 2; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-x { font-style: normal; font-size: 14px; line-height: 1; color: var(--fh-muted); padding: 0 2px; cursor: pointer; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-sum { font-size: 11.5px; font-weight: 500; color: var(--fh-muted); display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-sum i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--fh-muted2)); display: inline-block; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-x { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fh-muted); font-size: 12px; font-style: normal; border: 1px solid var(--fh-line2); }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-x:hover { color: #f87171; }
body.fsi-dl .FsiFSec.fdl-acc > .FsiFLabel::after {
content: ''; order: 9; margin-right: auto; margin-left: 2px; width: 14px; height: 14px; flex: 0 0 auto; transition: transform .2s; opacity: .7;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.fsi-dl .FsiFSec.fdl-acc.fdl-collapsed > .FsiFLabel::after { transform: rotate(180deg); }
body.fsi-dl .FsiFSec.fdl-acc > .fdl-acc-body { padding-top: 6px; padding-bottom: 0; display: flow-root; }
body.fsi-dl .fdl-acc-body > *, body.fsi-dl .fdl-acc-body .HeroSelectCat > * { margin-bottom: 0 !important; }
body.fsi-dl .fdl-acc-body #AllHeroCats { margin: 0 !important; padding: 0 !important; }
body.fsi-dl .FsiFSec.fdl-acc.fdl-collapsed > .fdl-acc-body { display: none; }
/* هیرو: دایرهها ۶ در ردیف + کاشی N+ */
body.fsi-dl .HeroSelectCat input#SearchHeroName { margin-bottom: 10px !important; }
body.fsi-dl #AllHeroCats { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none; max-height: none; overflow: visible; }
body.fsi-dl #AllHeroCats > * { min-width: 0; }
body.fsi-dl #AllHeroCats .list-toggle .show-more2 { margin: 0 !important; padding: 0 !important; }
body.fsi-dl #AllHeroCats .list-toggle .collapse { display: none !important; }
body.fsi-dl #AllHeroCats:not(.collapsed) .list-toggle .collapse { display: flex !important; }
body.fsi-dl .HeroSelectCat { margin: 0 !important; padding: 0 !important; }
body.fsi-dl #AllHeroCats.collapsed { max-height: none !important; overflow: visible !important; }
body.fsi-dl #AllHeroCats li { float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; overflow: visible; border-radius: 0; }
body.fsi-dl #AllHeroCats li#UncheckHeroFilter { display: none !important; }
body.fsi-dl #AllHeroCats li { display: block; }
body.fsi-dl #AllHeroCats li label { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; line-height: 0; cursor: pointer; position: relative; }
body.fsi-dl #AllHeroCats li img { width: 100% !important; max-width: none !important; aspect-ratio: 1; height: auto !important; object-fit: cover; border-radius: 50% !important; border: 2px solid var(--fh-line2) !important; margin: 0 !important; box-shadow: none !important; display: block; transition: transform .15s, border-color .15s; }
body.fsi-dl #AllHeroCats li:hover img { transform: scale(1.06); border-color: var(--fh-muted); }
body.fsi-dl #AllHeroCats input[type="radio"]:checked + label img { border-color: var(--fh-blue) !important; box-shadow: 0 0 0 3px rgba(61,90,254,.3) !important; }
/* حالت جمع: فقط ۱۱ تای اول + کاشی N+ */
body.fsi-dl #AllHeroCats.collapsed:not(.fdl-searching) li:nth-child(n+13) { display: none !important; }
body.fsi-dl #AllHeroCats:not(.collapsed) { max-height: 262px; overflow-y: auto; padding-left: 4px; scrollbar-width: thin; scrollbar-color: var(--fh-line2) transparent; }
body.fsi-dl #AllHeroCats .clear { display: none; }
body.fsi-dl #AllHeroCats .list-toggle { grid-column: auto !important; padding: 0 !important; margin: 0 !important; width: auto !important; display: block !important; }
body.fsi-dl #AllHeroCats .list-toggle .show-more2 { display: none; }
body.fsi-dl #AllHeroCats.collapsed .list-toggle .expand,
body.fsi-dl #AllHeroCats:not(.collapsed) .list-toggle .collapse {
display: flex !important; align-items: center; justify-content: center; width: 100% !important; aspect-ratio: 1; box-sizing: border-box; border-radius: 50% !important; border: 1.5px dashed #3a414d !important;
background: transparent !important; color: var(--fh-muted) !important; font-size: 10px !important; font-weight: 700; padding: 0 !important; margin: 0 !important; line-height: 1; cursor: pointer; font-family: iransansx, sans-serif; direction: ltr;
}
body.fsi-dl #AllHeroCats .list-toggle .expand::after, body.fsi-dl #AllHeroCats .list-toggle .collapse::after { content: none !important; }
body.fsi-dl #AllHeroCats .list-toggle .expand:hover, body.fsi-dl #AllHeroCats .list-toggle .collapse:hover { border-color: var(--fh-muted); color: #fff; }
body.fsi-dl #AllHeroCats.collapsed { display: grid !important; }
body.fsi-dl #AllHeroCats.collapsed .list-toggle { order: 12; }
/* چیپها */
body.fsi-dl .FsiChips { gap: 6px; }
body.fsi-dl .FsiChip { background: var(--fh-bg); border-color: var(--fh-line2); color: var(--fh-muted); border-radius: 9px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; }
body.fsi-dl .FsiChip:hover { border-color: var(--fh-muted); color: #fff; }
body.fsi-dl .FsiChip.on { background: rgba(255,181,71,.14) !important; border-color: #ffb547 !important; color: #fff; box-shadow: none; }
body.fsi-dl .FsiWChip.on { background: rgba(255,181,71,.14) !important; border-color: #ffb547 !important; }
body.fsi-dl .FsiFPBody select { background: var(--fh-bg) !important; border-color: var(--fh-line2) !important; border-radius: 10px !important; color: var(--fh-text) !important; }
/* مدل آیتم: چیپهای دو ستونه (طرح) */
body.fsi-dl .fsi-dl-types { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
body.fsi-dl .fsi-dl-types .FsiChip { display: flex; align-items: center; justify-content: flex-start; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--fh-text); white-space: nowrap; }
/* بازههای قیمت */
body.fsi-dl .fsi-dl-prices { display: grid; gap: 8px; }
body.fsi-dl .fsi-dl-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12.5px; color: var(--fh-text); margin: 0; font-weight: 700; height: 38px; padding: 0 12px; border: 1px solid var(--fh-line2); border-radius: 10px; background: var(--fh-bg); transition: border-color .15s; }
body.fsi-dl .fsi-dl-radio:hover { border-color: var(--fh-muted); }
body.fsi-dl .fsi-dl-radio:has(input:checked) { border-color: #ffb547; background: rgba(255,181,71,.10); }
body.fsi-dl .fsi-dl-radio b { margin-right: auto; font-weight: 500; font-size: 11px; color: var(--fh-muted); }
body.fsi-dl .fsi-dl-radio input { display: none; }
body.fsi-dl .fsi-dl-radio i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fh-line2); display: inline-block; position: relative; flex: 0 0 auto; transition: border-color .15s; }
body.fsi-dl .fsi-dl-radio:hover i { border-color: var(--fh-muted); }
body.fsi-dl .fsi-dl-radio input:checked + i { border-color: #ffb547; }
body.fsi-dl .fsi-dl-radio input:checked + i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #ffb547; }
body.fsi-dl .fsi-dl-count { padding: 10px 16px; border-top: 1px solid var(--fh-line); font-size: 12px; color: var(--fh-muted); text-align: right; }
/* ───────── تولبار بالای گرید ───────── */
body.fsi-dl .fsi-dl-crumb { font-size: 12px; color: var(--fh-muted); display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
body.fsi-dl .fsi-dl-crumb a { color: var(--fh-muted); text-decoration: none; }
body.fsi-dl .fsi-dl-crumb a:hover { color: #fff; }
body.fsi-dl .fsi-dl-crumb .sep { color: var(--fh-muted2); }
body.fsi-dl .fsi-dl-crumb .cur { color: #b9bfcc; font-weight: 500; }
body.fsi-dl .fsi-dl-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
body.fsi-dl .fsi-dl-bar h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--fh-text); display: inline-flex; align-items: center; gap: 10px; }
body.fsi-dl .fsi-dl-bar h1 span.fh-badge { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; background: var(--fh-red); color: #fff; }
body.fsi-dl .fsi-dl-bar h1 { color: #fff; }
body.fsi-dl .fsi-dl-bar h1 .fsi-dl-total { font-size: 12.5px; color: var(--fh-muted); font-weight: 500; margin-right: 4px; }
body.fsi-dl .fsi-dl-bar h1 .fsi-dl-total b { color: var(--fh-muted); font-weight: 500; }
body.fsi-dl .fsi-dl-bar { flex-wrap: nowrap; }
body.fsi-dl .fsi-dl-bar .fsi-dl-active { flex: 1 1 auto; min-width: 0; }
body.fsi-dl .fsi-dl-active { display: flex; gap: 6px; flex-wrap: wrap; }
body.fsi-dl .fsi-dl-active span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 6px; border-radius: 8px; background: var(--fh-card); border: 1px solid var(--fh-line2); font-size: 11.5px; color: var(--fh-text); }
body.fsi-dl .fsi-dl-active span i { font-style: normal; cursor: pointer; color: var(--fh-muted); font-size: 12px; line-height: 1; }
body.fsi-dl .fsi-dl-active span i:hover { color: #fff; }
body.fsi-dl .fsi-dl-sort { margin-right: auto; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--fh-card); border: 1px solid var(--fh-line2); font-size: 12.5px; color: var(--fh-muted); }
body.fsi-dl .fsi-dl-sort b { color: var(--fh-text); font-weight: 700; }
body.fsi-dl .fsi-dl-sort { cursor: pointer; user-select: none; }
body.fsi-dl .fsi-dl-sortmenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: #1b1e26; border: 1px solid var(--fh-line2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); z-index: 50; }
body.fsi-dl .fsi-dl-sortmenu[hidden] { display: none; }
body.fsi-dl .fsi-dl-sortmenu li { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--fh-text); cursor: pointer; text-align: right; }
body.fsi-dl .fsi-dl-sortmenu li:hover { background: var(--fh-card2); }
body.fsi-dl .fsi-dl-sortmenu li.on { color: #ffb547; }
body.fsi-dl .fsi-dl-sort svg { width: 14px; height: 14px; }
body.fsi-dl .FindCount { display: none; }
/* مرتبسازی از تولبار انجام میشود؛ بخش سایدبار مخفی */
body.fsi-dl .sideCat .FsiFSec[data-acc*="مرتب"], body.fsi-dl .fsi-dl-mmount .FsiFSec[data-acc*="مرتب"] { display: none; }
/* ───────── گرید کارتها (کارت ثابت ≥۲۱۰px) ───────── */
body.fsi-dl .ItemCat { margin: 0; }
body.fsi-dl #GetPost { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
body.fsi-dl #GetPost > [class*="col-"] { display: block !important; width: auto !important; max-width: none; padding: 0 !important; float: none !important; margin: 0; flex: none; min-width: 0; }
body.fsi-dl #GetPost > [class*="col-"].fsi-dl-hidden { display: none !important; }
body.fsi-dl #GetPost > input[type="hidden"] { display: none; }
body.fsi-dl .fh-card { height: 100%; }
body.fsi-dl .fh-expand { display: none !important; }
body.fsi-dl .fh-cs .fh-expand { display: inline-flex !important; } /* کانتر: آیکون نسخهها لازم است */
/* آیتم فعال ناوبری: دوتا۲ */
body.fsi-dl .GameCatTop ul li:nth-child(1) a { background: rgba(204,49,38,.14); border-color: #cc3126; }
body.fsi-dl .fh-img { aspect-ratio: 232 / 150; }
body.fsi-dl .pagenav { display: none !important; }
body.fsi-dl .FsiEmptyState { grid-column: 1 / -1; }
/* ───────── نمایش آیتمهای بیشتر ───────── */
body.fsi-dl .fsi-dl-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 10px; }
body.fsi-dl .fsi-dl-more[hidden] { display: none; }
body.fsi-dl .fsi-dl-more.is-loading button { opacity: .5; pointer-events: none; }
body.fsi-dl .fsi-dl-more.is-loading .fsi-dl-prog i { background: repeating-linear-gradient(90deg, var(--fh-blue) 0 12px, #6f86ff 12px 24px); animation: fdlbar 1s linear infinite; }
@keyframes fdlbar { to { background-position: 24px 0; } }
body.fsi-dl .fsi-dl-more .fsi-dl-prog { width: 260px; height: 4px; border-radius: 4px; background: var(--fh-line); overflow: hidden; }
body.fsi-dl .fsi-dl-more .fsi-dl-prog i { display: block; height: 100%; width: 0; background: var(--fh-blue); border-radius: 4px; transition: width .3s; }
body.fsi-dl .fsi-dl-more small { font-size: 12px; color: var(--fh-muted); }
body.fsi-dl .fsi-dl-more button {
height: 40px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--fh-line2); background: var(--fh-card); color: var(--fh-text);
font-family: iransansx; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s;
}
body.fsi-dl .fsi-dl-more button:hover { background: var(--fh-card2); color: #fff; }
body.fsi-dl .fsi-dl-more button svg { width: 15px; height: 15px; }
/* ───────── ریسپانسیو ───────── */
/* زیر ۹۹۲: فیلتر کناری حذف؛ فیلتر موبایل (دکمهٔ «فیلتر» هدر + آفکانواس) کار میکند */
@media (max-width: 991px) {
body.fsi-dl .fsi-dl-wrap > .row { grid-template-columns: minmax(0, 1fr); }
body.fsi-dl .fsi-dl-wrap > .row > .fsi-dl-main { grid-column: 1; }
body.fsi-dl .fsi-dl-wrap > .row > .sideCat { display: none !important; }
}
@media (max-width: 600px) {
body.fsi-dl #GetPost { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.fsi-dl .fsi-dl-bar h1 { font-size: 17px; }
}
/* سلولهای هیرو مربع و سیال — style.css قدیمی li/label را 40px ثابت کرده بود و زیر هر ردیف فاصله میافتاد */
body.fsi-dl #AllHeroCats li,
body.fsi-dl #AllHeroCats li label,
body.fsi-dl #AllHeroCats .list-toggle {
height: auto !important;
aspect-ratio: 1 / 1;
}
/* حین جستوجوی نام هیرو: همهٔ نتایج دیده شوند (نه فقط ۱۱ تای اول) و کاشی +N مخفی شود */
body.fsi-dl #AllHeroCats.fdl-searching .list-toggle { display: none !important; }
body.fsi-dl #AllHeroCats.fdl-searching { max-height: 262px; overflow-y: auto; padding-left: 4px !important; }
/* ═══════════════ کانتر (طرح CS2 Listing، ۲۰۲۶-۰۹-۰۶) ═══════════════ */
body.fsi-dl .fh-badge.fh-badge-cs { background: #f2c230 !important; color: #0b0c10 !important; }
body.fsi-dl .fsi-dl-nact { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255,181,71,.16); color: #ffb547; font-size: 11px; font-weight: 800; margin-right: 6px; }
body.fsi-dl .fsi-dl-nact[hidden] { display: none; }
body.fsi-dl .fsi-dl-clearall { font-size: 12px; color: var(--fh-muted); text-decoration: none; white-space: nowrap; }
body.fsi-dl .fsi-dl-clearall:hover { color: #fff; }
body.fsi-dl .fsi-dl-clearall[hidden] { display: none; }
body.fsi-cs .GameCatTop ul li:nth-child(1) a { background: var(--fh-card); border-color: var(--fh-line); }
body.fsi-cs .GameCatTop ul li:nth-child(2) a { background: rgba(242,194,48,.14); border-color: #f2c230; }
/* دسته: درخت */
body.fsi-dl .fsi-cs-cats { display: grid; gap: 6px; }
body.fsi-dl .fsi-cs-cat { border: 1px solid var(--fh-line2); border-radius: 10px; background: var(--fh-bg); overflow: hidden; }
body.fsi-dl .fsi-cs-cat.on { border-color: #ffb547; background: rgba(255,181,71,.10); }
body.fsi-dl .fsi-cs-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; cursor: pointer; user-select: none; }
body.fsi-dl .fsi-cs-row .fa { font-size: 12.5px; font-weight: 700; color: var(--fh-text); }
body.fsi-dl .fsi-cs-row .en { font-size: 11px; color: var(--fh-muted2); font-family: 'Rajdhani', sans-serif; letter-spacing: .02em; margin-right: auto; }
body.fsi-dl .fsi-cs-cat.on .fsi-cs-row .en { color: var(--fh-muted); }
body.fsi-dl .fsi-cs-row .chev { width: 12px; height: 12px; flex: 0 0 auto; opacity: .6; transition: transform .2s;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
body.fsi-dl .fsi-cs-cat.open .fsi-cs-row .chev { transform: rotate(180deg); }
body.fsi-dl .fsi-cs-sub { display: none; padding: 2px 30px 10px 12px; position: relative; }
body.fsi-dl .fsi-cs-cat.open .fsi-cs-sub { display: block; }
body.fsi-dl .fsi-cs-sub::before { content: ''; position: absolute; right: 21px; top: 4px; bottom: 14px; width: 1px; background: var(--fh-line2); }
body.fsi-dl .fsi-cs-w { display: flex; align-items: center; gap: 10px; height: 30px; cursor: pointer; font-size: 12.5px; color: var(--fh-text); font-family: 'Rajdhani', iransansx, sans-serif; font-weight: 600; direction: rtl; position: relative; }
body.fsi-dl .fsi-cs-w i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fh-line2); background: var(--fh-bg2); flex: 0 0 auto; margin-right: -16px; position: relative; z-index: 1; }
body.fsi-dl .fsi-cs-w i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #ffb547; opacity: 0; }
body.fsi-dl .fsi-cs-w.on i { border-color: #ffb547; }
body.fsi-dl .fsi-cs-w.on i::after { opacity: 1; }
body.fsi-dl .fsi-cs-w:hover { color: #fff; }
body.fsi-dl .fsi-cs-w span { font-family: 'Rajdhani', iransansx, sans-serif; }
body.fsi-dl .fsi-cs-w:first-child span { font-family: iransansx; font-weight: 700; }
/* چیپهای فرسودگی / کمیابی / ویژه */
body.fsi-dl .fsi-cs-wear .FsiChip, body.fsi-dl .fsi-cs-grade .FsiChip { gap: 7px; }
body.fsi-dl .fsi-cs-wear .FsiChip i, body.fsi-dl .fsi-cs-grade .FsiChip i { width: 7px; height: 7px; border-radius: 50%; background: var(--wc, #8b93a3); font-style: normal; flex: 0 0 auto; }
body.fsi-dl .fsi-cs-wear .FsiChip small { font-size: 9.5px; color: var(--fh-muted2); font-family: 'Rajdhani', sans-serif; letter-spacing: .05em; margin-right: 2px; }
body.fsi-dl .fsi-cs-special .FsiChip { font-family: 'Rajdhani', iransansx, sans-serif; font-weight: 700; font-size: 12.5px; }
body.fsi-dl .fsi-cs-special .FsiChip[hidden] { display: none !important; }
body.fsi-dl .fsi-cs-special .FsiChip.fsi-chip-star b { color: #e4ae39; margin-left: 4px; }
body.fsi-dl .fsi-cs-special .FsiChip.on.fsi-chip-st { color: #ff9d5c; }
/* ─── پنجرهٔ نسخهها (GetFloatsModal) ─── */
#GetFloatsModal .uk-modal-dialog { width: min(960px, 96vw) !important; background: #14161c !important; border: 1px solid var(--fh-line2) !important; border-radius: 16px !important; padding: 0 !important; overflow: hidden; }
#GetFloatsModal .uk-modal-dialog .uk-modal-close-default { display: none; }
.fcv { direction: rtl; color: var(--fh-text); font-family: iransansx; }
.fcv-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--fh-line); }
.fcv-img { width: 64px; height: 48px; border-radius: 10px; background: var(--fh-card2); border-top: 3px solid var(--rc, transparent); overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.fcv-img img { width: 100%; height: 100%; object-fit: cover; }
.fcv-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcv-title b { font-size: 16px; font-weight: 800; color: #fff; direction: ltr; text-align: right; }
.fcv-title small { font-size: 12px; color: var(--fh-muted); display: flex; gap: 6px; align-items: center; }
.fcv-title small em { font-style: normal; color: var(--fh-muted2); }
.fcv-count { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #ffb547; color: #ffb547; font-size: 12px; font-weight: 700; }
.fcv-count svg { width: 14px; height: 14px; }
.fcv-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--fh-line2); background: var(--fh-card); color: var(--fh-text); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fcv-close:hover { background: var(--fh-card2); }
.fcv-table { padding: 6px 18px 16px; max-height: 60vh; overflow-y: auto; }
.fcv-th, .fcv-row { display: grid; grid-template-columns: 1.5fr 1fr .9fr 1.4fr; gap: 14px; align-items: center; }
.fcv-th { font-size: 11.5px; color: var(--fh-muted); padding: 8px 12px; }
.fcv-row { padding: 10px 12px; border-radius: 12px; background: var(--fh-card); border: 1px solid var(--fh-line); margin-top: 8px; }
.fcv-row:hover { border-color: var(--fh-line2); }
.fcv-wearrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.fcv-wearrow b { font-weight: 700; }
.fcv-wearrow b small { font-size: 10px; color: #f9a8d4; margin-right: 4px; }
.fcv-wearrow span { font-family: 'Rajdhani', monospace; font-size: 12px; color: #c3c8d1; letter-spacing: .03em; direction: ltr; }
.fcv-bar { position: relative; height: 4px; border-radius: 4px; margin-top: 6px; background: linear-gradient(to right, #4fc06a 0 7%, #9dc34e 7% 15%, #f1c40f 15% 38%, #e67e22 38% 45%, #e74c3c 45% 100%); }
.fcv-bar i { position: absolute; top: -3px; width: 2px; height: 10px; background: #fff; border-radius: 1px; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.fcv-stk { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fcv-stk img { width: 26px; height: 20px; object-fit: contain; }
.fcv-stk img.ch { width: 22px; height: 22px; border-radius: 4px; background: var(--fh-card2); }
.fcv-none { font-size: 11.5px; color: var(--fh-muted2); }
.fcv-cd span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.fcv-cd span i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.fcv-cd .ok { color: #7fe39c; } .fcv-cd .ok i { background: #22c55e; }
.fcv-cd .wait { color: var(--fh-muted); } .fcv-cd .wait i { background: var(--fh-muted2); }
.fcv-price { display: flex; align-items: baseline; gap: 5px; }
.fcv-price b { font-size: 15px; font-weight: 800; color: #fff; }
.fcv-price small { font-size: 11px; color: var(--fh-muted); }
.fcv-act { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
/* ردیف: فرسودگی | استیکر | تحویل | قیمت | دکمهها — سرستونها همان ۴ ستون اول + ستون دکمهها را میپوشانند */
.fcv-row { grid-template-columns: 1.5fr 1fr .9fr 1fr auto; }
.fcv-th { grid-template-columns: 1.5fr 1fr .9fr 1fr auto; }
.fcv-th span:last-child { text-align: right; }
.fcv-th::after { content: ''; width: 108px; }
.fcv-eye { width: 36px; height: 36px; border-radius: 9px; background: #22c55e; color: #052e16; display: inline-flex; align-items: center; justify-content: center; }
.fcv-eye svg { width: 16px; height: 16px; }
.fcv-eye:hover { background: #4ade80; color: #052e16; }
.fcv-buy { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--fh-blue); color: #fff; font-family: iransansx; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.fcv-buy svg { width: 15px; height: 15px; }
.fcv-buy:hover { background: var(--fh-blue2); }
.fsi-floats-empty { padding: 30px; text-align: center; color: var(--fh-muted); }
/* ───────── اسکلتون بارگذاری (Fastitem Loading Concepts — 1a) ─────────
کارتهای جایخالی با درخشش داخل گرید؛ هدر و فیلترها فعال میمانند، صفحه سیاه نمیشود. */
@keyframes fsk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
body.fsi-dl #GetPost > .fsk-card { display: flex; flex-direction: column; min-width: 0; }
.fsk-card { background: var(--fh-card, #181a21); border: 1px solid var(--fh-line, #262933); border-radius: var(--fh-radius, 14px); overflow: hidden; }
.fsk-card .fsk-img { aspect-ratio: 320 / 220; background: linear-gradient(135deg, #1f2230 0%, #272b38 50%, #1f2230 100%); position: relative; overflow: hidden; }
.fsk-card .fsk-img::after, .fsk-line, .fsk-btn, .fsk-sq, .fsk-mimg {
background: linear-gradient(90deg, #262933 25%, #343846 50%, #262933 75%); background-size: 200% 100%; animation: fsk-shimmer 1.4s linear infinite;
}
.fsk-card .fsk-img::after { content: ''; position: absolute; inset: 0; opacity: .35; }
.fsk-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.fsk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fsk-line { display: block; height: 10px; border-radius: 6px; }
.fsk-h14 { height: 14px; }
.fsk-w20 { width: 20%; } .fsk-w25 { width: 25%; } .fsk-w30 { width: 30%; } .fsk-w40 { width: 40%; } .fsk-w50 { width: 50%; } .fsk-w60 { width: 60%; } .fsk-w80 { width: 80%; }
.fsk-btns { margin-top: 2px; }
.fsk-btn { display: block; flex: 1 1 auto; height: 36px; border-radius: 9px; }
.fsk-sq { display: block; width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.fsk-pill { height: 26px; border-radius: 13px; }
/* مودال نسخهها */
.fsk-modal .fcv-head { gap: 14px; }
.fsk-mimg { width: 64px; height: 48px; border-radius: 10px; flex: 0 0 auto; }
.fsk-mtitle { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.fsk-mrow { display: grid; grid-template-columns: 1.5fr 1fr .9fr 1fr auto; gap: 14px; align-items: center; padding: 14px 12px; border-radius: 12px; background: var(--fh-card, #181a21); border: 1px solid var(--fh-line, #262933); margin-top: 8px; }
.fsk-mrow .fsk-line { width: auto; }
.fsk-mbtn { width: 108px; height: 36px; flex: none; }
@media (max-width: 600px) { .fsk-card .fsk-img { aspect-ratio: 4 / 3; } .fsk-btn { height: 32px; } .fsk-sq { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .fsk-card .fsk-img::after, .fsk-line, .fsk-btn, .fsk-sq, .fsk-mimg { animation: none; } }
/* ───────── شیت فیلتر موبایل (bottom sheet) — همان پنل دسکتاپ داخل آفکانواس، مطابق طرح موبایل ───────── */
body.fsi-dl #offcanvas-nav-filter .uk-offcanvas-bar {
position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
width: 100% !important; max-width: none !important; height: auto !important; max-height: 84vh; min-height: 40vh;
padding: 8px 16px 0 !important; background: #14161c !important; border-radius: 22px 22px 0 0; direction: rtl;
box-shadow: 0 -12px 40px rgba(0,0,0,.5); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
transform: translateY(100%) !important; transition: transform .32s cubic-bezier(.2,.8,.2,1) !important;
display: flex !important; flex-direction: column;
}
body.fsi-dl #offcanvas-nav-filter .uk-offcanvas-bar::-webkit-scrollbar { display: none; }
body.fsi-dl #offcanvas-nav-filter.uk-open .uk-offcanvas-bar { transform: translateY(0) !important; }
body.fsi-dl .fsi-dl-mhandle { display: block; width: 44px; height: 4px; border-radius: 2px; background: #3a3f4b; margin: 6px auto 8px; flex: 0 0 auto; }
body.fsi-dl .fsi-dl-mmount { flex: 1 1 auto; }
body.fsi-dl .fsi-dl-mmount .FsiFP { position: static; margin: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
body.fsi-dl .fsi-dl-mmount .FsiFPHead { padding: 8px 0 14px; border-bottom: 1px solid var(--fh-line); font-size: 16px; }
body.fsi-dl .fsi-dl-mmount .FsiFPHead::before { display: none; }
body.fsi-dl .fsi-dl-mmount .FsiFPHead .fsi-dl-nact { min-width: 22px; height: 22px; border-radius: 50%; background: #ffb547; color: #1a1a1a; font-size: 12px; padding: 0 4px; margin-right: 8px; }
body.fsi-dl .fsi-dl-mmount .FsiFPHead span { font-size: 12.5px; }
body.fsi-dl .fsi-dl-mmount .FsiFPBody { padding: 0; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.FsiFSearch { padding: 12px 0; border-bottom: 1px solid var(--fh-line); margin: 0; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc { padding: 0; margin: 0; border-bottom: 1px solid var(--fh-line); }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .FsiFLabel { padding: 17px 0; font-size: 15.5px; gap: 10px; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-sum { font-size: 13.5px; font-weight: 600; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc.fdl-has > .FsiFLabel .fdl-acc-sum { color: #ffb547; font-weight: 700; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-sum i { display: none; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .FsiFLabel .fdl-acc-x { width: 20px; height: 20px; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .FsiFLabel::after { width: 16px; height: 16px; opacity: .55; }
body.fsi-dl .fsi-dl-mmount .FsiFSec.fdl-acc > .fdl-acc-body { padding: 0 0 18px; }
body.fsi-dl .fsi-dl-mmount .FsiChips { gap: 8px; }
body.fsi-dl .fsi-dl-mmount .FsiChip { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--fh-text); background: #1b1e26; border-color: var(--fh-line2); display: inline-flex; align-items: center; }
body.fsi-dl .fsi-dl-mmount .FsiChip i { display: none; }
body.fsi-dl .fsi-dl-mmount .FsiChip.on { background: #ffb547 !important; border-color: #ffb547 !important; color: #1a1a1a !important; }
body.fsi-dl .fsi-dl-mmount .fsi-dl-types .FsiChip { height: 38px; }
body.fsi-dl .fsi-dl-mmount #AllHeroCats:not(.collapsed), body.fsi-dl .fsi-dl-mmount #AllHeroCats.fdl-searching { max-height: 300px; }
body.fsi-dl .fsi-dl-mmount .fsi-dl-count { border-top: 0; padding-top: 0; }
body.fsi-dl .fsi-dl-mfoot { position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px 16px; background: #14161c; flex: 0 0 auto; }
body.fsi-dl .fsi-dl-mdone {
display: block; width: 100%; height: 52px; border: 0; border-radius: 13px; background: #ffb547; color: #1a1a1a;
font-family: iransansx; font-size: 15px; font-weight: 800; cursor: pointer;
}
body.fsi-dl .fsi-dl-mdone b { font-family: 'Rajdhani', iransansx, sans-serif; font-size: 16px; margin: 0 3px; color: #1a1a1a; }
/* نوار عنوان در موبایل: دو ردیف (عنوان + تعداد / چیپها + مرتبسازی) تا صفحه اسکرول افقی نگیرد */
@media (max-width: 767px) {
body.fsi-dl .fsi-dl-bar { flex-wrap: wrap; gap: 8px 10px; }
body.fsi-dl .fsi-dl-bar h1 { flex: 1 1 100%; font-size: 17px; white-space: nowrap; }
body.fsi-dl .fsi-dl-bar h1 .fsi-dl-total { white-space: nowrap; }
body.fsi-dl .fsi-dl-bar .fsi-dl-active { flex: 1 1 auto; order: 2; }
body.fsi-dl .fsi-dl-bar .fsi-dl-clearall { order: 3; }
body.fsi-dl .fsi-dl-bar .fsi-dl-sort { order: 1; margin-right: 0; height: 32px; font-size: 12px; flex: 0 0 auto; }
body.fsi-dl .fsi-dl-bar .fsi-dl-sort .fsi-dl-sortmenu { right: auto; left: 0; }
body.fsi-dl .fsi-dl-main { overflow-x: hidden; }
}
/* شیت موبایل: دکمهٔ پایین کلاس uk-offcanvas-close دارد که UIkit آن را absolute میکند — برگردان؛ پسزمینه تیرهتر و تمامعرض */
body.fsi-dl .fsi-dl-mdone { position: static !important; top: auto !important; left: auto !important; padding: 0 !important; z-index: auto !important; }
body.fsi-dl #offcanvas-nav-filter { left: 0 !important; right: 0 !important; width: auto !important; }
body.fsi-dl #offcanvas-nav-filter.uk-offcanvas-overlay::before { background: rgba(0, 0, 0, .6) !important; }
/* شیت: خود پنل اسکرول میخورد، دکمهٔ پایین همیشه دیده میشود (sticky داخل فلکسِ سرریزشده کار نمیکرد) */
body.fsi-dl #offcanvas-nav-filter .uk-offcanvas-bar { overflow: hidden !important; }
body.fsi-dl .fsi-dl-mmount { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
body.fsi-dl .fsi-dl-mmount::-webkit-scrollbar { display: none; }
body.fsi-dl .fsi-dl-mfoot { position: static; flex: 0 0 auto; }
/* ───────── «چیزی پیدا نشد» — طرح 1b: چیپهای فیلتر داخل پیام، یکییکی حذف کن ───────── */
body.fsi-dl .fsi-dl-empty {
grid-column: 1 / -1; margin: 0; padding: 40px 20px; min-height: min(62vh, 520px);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
background: #14161c; border: 1px dashed #2f333d; border-radius: 14px; animation: none;
}
body.fsi-dl .fsi-dl-empty h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; color: #fff; }
body.fsi-dl .fsi-dl-empty p { margin: 0 0 16px; font-size: 13.5px; color: var(--fh-muted); }
body.fsi-dl .fsi-dl-echips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 16px; }
body.fsi-dl .fsi-dl-echips span {
display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px;
background: rgba(255,181,71,.06); border: 1px solid #ffb547; color: #fff; font-size: 13px; font-weight: 700;
}
body.fsi-dl .fsi-dl-echips span i { font-style: normal; color: #ffb547; font-size: 15px; line-height: 1; cursor: pointer; }
body.fsi-dl .fsi-dl-echips span i:hover { color: #fff; }
body.fsi-dl .fsi-dl-eclear { font-size: 13px; font-weight: 700; color: #ffb547; text-decoration: none; }
body.fsi-dl .fsi-dl-eclear:hover { color: #ffd08a; text-decoration: none; }
@media (max-width: 600px) { body.fsi-dl .fsi-dl-empty { min-height: 50vh; padding: 28px 14px; } body.fsi-dl .fsi-dl-empty h3 { font-size: 17px; } }