/*
Theme Name: Fastitem7.1
Theme URI: http://www.fastitem.ir
Description: فست آیتم
Version: 7.1
Author: vahid
Author URI: http://www.fastitem.ir
*/
@import url(css/fontiran.css);
/* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
/* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
html {
background: #202126;
}
input,
textarea {
background: #2e3039;
border-radius: 3px;
text-align: center;
padding: 9px 5px;
color: #fff;
margin: auto;
display: block;
width: 100%;
border: none;
}
body {
font-family: iransansx;
direction: rtl;
font-size: 16px;
background: #202126;
color: #2a4363;
font-weight: 300;
background-image: url('https://fastitem.ir/wp-content/uploads/2020/11/057780a9e2f50918c3f2e1f3151e26b4.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
select {
background: #2e3039;
color: #fff;
border-radius: 3px;
border: none;
width: 100%;
padding: 11px 6px 9px;
box-shadow: 0px 0px 3px 2px #0000001c;
margin-top: 30px;
}
.clear {
clear: both;
}
a:hover {
transition: all 0.3s;
}
h1,
h2,
h3,
h4 {
font-family: 'iransansx';
font-size: 18px;
color: #fff;
margin-top: 20px;
font-weight: 500;
}
hr {
border-top: 1px solid #303741;
}
a:hover {
text-decoration: none;
}
.BlaTaklifItems {
text-align: center;
display: block;
color: #fff;
padding: 15px;
animation-name: aanimate;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.TopHeader {
background-color: #303741;
direction: ltr;
padding: 20px 0px;
z-index: 3
}
.TopHeader .col-lg-1,
.TopHeader .col-lg-2,
.TopHeader .col-lg-3,
.TopHeader .col-lg-4,
.TopHeader .col-lg-5,
.TopHeader .col-lg-6,
.TopHeader .col-lg-7,
.TopHeader .col-lg-8,
.TopHeader .col-lg-9,
.TopHeader .col-lg-10,
.TopHeader .col-lg-11,
.TopHeader .col-lg-12 {
float: left;
}
.HeaderCard {
background-color: #444c57;
padding: 0px 11px;
border-radius: 3px;
width: 80px;
float: left;
margin-right: 45px;
}
.HeaderCard span {
float: right;
color: #fff;
font-size: 25px;
padding: 8px 0px 3px;
vertical-align: middle;
}
.HeaderCard img {
vertical-align: middle;
padding-top: 11px;
}
.logo {
margin-top: 5px;
width: 120px;
float: left;
margin-right: 30px;
}
.HeaderWallet {
color: #fff;
direction: rtl;
background: #202126;
border-radius: 3px;
text-align: center;
width: 235px;
float: left;
margin-right: 10px;
}
.HeaderWallet b {
font-size: 16px;
font-weight: 600;
}
.HeaderWallet .Mablagh {
margin-top: 15px;
}
.DepositWithdraw a {
background: #444c57;
display: block;
margin: 3px 3px;
text-align: center;
border-radius: 3px;
color: #fff;
font-size: 30px;
font-weight: 200;
line-height: 0.3;
padding: 10px 0px 1px 0px;
}
.Wathdrawmanfi {
background: #2e3037 !important;
}
.HeaderMenu {
text-align: right;
direction: rtl;
}
.HeaderMenu img {
width: 37px;
border-radius: 5px;
margin-left: 5px;
}
.GameCatTop {
z-index: 3
}
.GameCatTop ul {
list-style: none;
padding: 0px;
}
.GameCatTop ul li {
float: right;
}
.GameCatTop ul li a {
background: #2a2c34;
padding: 9px;
margin-left: 8px;
color: #fff;
font-weight: 400;
height: 45px;
display: block;
border-radius: 5px;
box-shadow: 0px 0px 8px 2px #0000000f;
transition: all 0.3s;
}
.GameCatTop ul li a:hover {
box-shadow: 0px 0px 10px 5px #0000000f;
background: #363944;
}
.GameCatTop ul li a img {
margin-left: 3px;
}
.sideCat {
background: #1c1d22;
border-left: 1px solid #303741;
border-bottom: 1px solid #303741;
margin-top: -20px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
padding: 25px 15px;
}
.sideCat input {
background: #2e3039;
border-radius: 3px;
border: 2px solid #171819;
text-align: center;
padding: 9px 5px;
color: #fff;
margin: auto;
display: block;
width: 100%;
box-shadow: 0px 0px 3px 2px #0000001c;
}
.sideCat h4 {
font-size: 16px;
color: #fff;
font-weight: 400;
font-family: 'iransansx';
margin-top: 20px;
}
.HeroSelectCat input[type="radio"] {
display: none;
}
.HeroSelectCat input[type="radio"]:checked+label img {
border: 2px solid #c24924;
}
.HeroSelectCat label {
/* display: none; */
}
.HeroSelectCat ul {
list-style: none;
padding: 0px;
}
.HeroSelectCat ul li {
float: right;
}
.HeroSelectCat ul li img {
width: 64px;
height: 38px;
border-radius: 4px;
margin-left: 8px;
margin-bottom: 8px;
border: 1px solid #303741;
box-shadow: 0px 0px 3px 2px #0000001c;
}
.sideCat .show-more,
.sideCat .show-more2 {
background: #303741;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 3px 2px #0000001c;
width: 100%;
border: none;
}
.breadcrumbs {
color: #4d5d74;
font-size: 14px;
text-align: left;
margin-top: 21px;
}
.BoxItem {
direction: ltr;
background: #303741;
border-radius: 5px;
overflow: hidden;
padding: 10px;
margin-bottom: 30px;
min-height: 385px;
position: relative;
}
.BoxItem img {
margin: -14px;
min-width: 112%;
}
.BoxItem p {
color: #4d5d74;
font-size: 14px;
font-weight: 400;
margin: 25px 0px 0px 0px;
text-align: left;
}
.BoxItem h4 {
color: #fff;
font-family: 'iransansx';
font-size: 16px;
margin: 0px;
height: 45px;
text-align: left;
}
.BoxItem .PriceBox {
background: #2b313a;
direction: rtl;
color: #fff;
padding: 8px;
margin: 0px 0px 15px;
}
.price {
font-size: 14px;
float: right;
white-space: nowrap;
}
.price b {
font-size: 18px;
}
.TradeCD {
background-color: #ff7e1c;
border-radius: 5px;
padding: 2px;
box-shadow: 1px 1px #7b4217;
}
.TradeCD i {
display: inline-block;
vertical-align: middle;
}
.TradeCDFori {
background-color: #77BC0A;
box-shadow: 1px 1px #2a582f;
}
.addtocart {
direction: rtl;
border: none;
width: 100%;
padding: 8px 0px;
background: #004fff;
color: #fff;
font-weight: 400;
border-radius: 5px;
text-align: center;
display: block;
transition: all 0.3s;
}
.addtocart:hover {
color: #fff;
cursor: pointer;
}
.GreenButtton {
background: #60a713;
box-shadow: 0px 0px 19px 4px #277b1814;
}
.GreenButtton:hover {
color: #fff;
box-shadow: 0px 0px 19px 4px #277b1885;
}
.RedButtton {
background: #c52414;
box-shadow: 0px 0px 19px 4px #d4241121;
}
.RedButtton:hover {
color: #fff;
box-shadow: 0px 0px 19px 4px #d4241173;
}
.addtocart img {
min-width: auto;
margin: 0px;
}
@media (max-width: 600px) {
.ItemCat .col-xs-6 {
width: 100%;
}
}
/* @media (max-width: 1280px) {
#ToggleSideCat {
display: none ;
}
} */
/* @media (min-width: 1280px) {
.Filterbut {
display: none !important;
}
} */
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.Filterbut {
margin-top: 20px;
background: none;
border: none;
color: #fff;
}
.MenuButInMobile {
border: none;
padding: 8px 13px;
background: #3f4854;
color: #fff;
font-weight: 400;
border-radius: 5px;
float: right;
margin-left: 5px;
margin-top: 5px;
}
.MenuButInMobile i {
vertical-align: middle;
}
.LoginButton {
padding: 5px 4px 5px 10px;
background: #3f4854;
border-radius: 3px;
box-shadow: 0px 0px 3px 2px #00000008;
font-size: 16px;
font-weight: 400;
}
.uk-dropdown {
background: #282d35;
}
.uk-dropdown ul li {
color: #fff;
text-align: center;
}
.uk-dropdown ul li a {
color: #fff;
font-size: 16px;
font-weight: 300;
text-align: right;
}
.FooterMobile {
background: #303741;
color: #fff;
text-align: center;
position: fixed;
bottom: 0px;
width: 100%;
overflow: hidden;
border-top: 1px solid #556173;
}
.FooterMobile .col-xs-3 {
border-left: 1px solid #556173;
}
.FooterMobile a p {
color: #fff;
padding: 6px;
margin: 0px;
text-align: center;
}
.FooterMobile a img {
padding: 10px;
color: #fff;
max-width: 44px;
}
.NormalFooter {
background: #303741;
margin-top: 30px;
}
.NormalFooter .namad {
text-align: left;
padding: 10px 0px;
}
.NormalFooter .namad img {
background: #fff;
text-align: center;
border-radius: 7px;
width: 70px;
}
.FooterLinks {
margin-top: 60px;
}
.FooterLinks img {
float: right;
}
.FooterLinks ul li {
float: right;
list-style: none;
}
.FooterLinks a {
color: #fff;
margin-right: 12px;
margin-top: 10px;
display: inline-block;
font-weight: 400;
border-right: 1px solid #ffffff36;
padding: 2px 31px 2px 12px;
}
.uk-offcanvas-bar {
background: #282d35;
padding: 0;
}
.uk-offcanvas-bar ul {
padding: 0;
padding-top: 5px;
}
.uk-offcanvas-bar ul li {
list-style: none;
}
.uk-offcanvas-bar ul li a {
display: block;
text-align: center;
padding: 15px 5px;
border-bottom: 1px solid #303741;
color: #a5b3c3;
}
.dataTable {
width: 100%;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #fff;
}
.dataTable thead {
color: rgb(165, 179, 195);
background: rgb(31 34 41);
}
.dataTable tr th {
color: #fff;
padding: 15px 10px;
font-weight: 300;
text-align: center;
border: 1px solid rgb(57, 64, 75);
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc:after {
font-size: 11px;
margin-bottom: 9px;
}
.dataTable tbody td {
background-color: #2a2e37 !important;
color: #fff;
border: 1px solid #39404b;
padding: 13px 10px;
}
.form-inline .form-control {
vertical-align: 0%;
margin-bottom: 28px;
margin-top: 10px;
}
.dataTables_filter .form-control {
margin: 0;
margin-top: 10px;
}
.dataTables_filter {
float: left;
}
.titrbakhat {
margin-top: 45px;
text-align: center;
margin-bottom: 25px;
}
.titrbakhat hr {
margin-bottom: -17px;
}
.titrbakhat p {
text-align: center;
display: inline-block;
margin: 0;
background: #303741;
border-radius: 5px;
color: #fff;
font-family: iransansx;
font-size: 16px;
font-weight: 300;
padding: 6px 20px;
}
.titrbakhat p a {
color: #5cf21a;
margin-right: 8px;
font-size: 15px;
font-weight: 400;
}
.BgSingle {
background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/W_I_5GLm4wPcv9jJQ7z7tz_l_0sEIYUhRfbF4arNQkgGQGKd3kMuVpMgCwRZrguPdUmZ0v8CaOrdEQY2Dtf9T0OuPKKZ-Uu0VdRLf-tpOH0e2cfugkgQUyTQAuNHANEo65rC217vCgGXK2Q9yI0E1Pad1ZLSCaKFqBTjbkMuhC2243rv/330fx219f);
background-position: top;
background-repeat: no-repeat;
position: absolute;
background-size: cover;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0.1;
}
.singlecontainer {
position: relative;
z-index: 0;
}
.singleCountent {}
.titleSingle p {
color: #4d5d74;
font-size: 14px;
font-weight: 400;
margin: 25px 0px 0px 0px;
text-align: left;
}
.titleSingle h1 {
margin-top: 20px;
font-weight: 500;
color: #fff;
font-family: 'iransansx';
font-size: 16px;
margin: 0px;
height: 45px;
text-align: left;
}
.SingleSellerItems {
margin-top: 100px;
}
.SellerItem .OffPercent {
bottom: 20px;
right: 70px;
}
.SellerItem {
color: #fff;
background: #303741;
box-shadow: 0px 0px 5px 5px #00000017;
border-radius: 3px;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 22px;
position: relative;
}
.SellerItem .price {
text-align: center;
}
.SellerItem .TradeLocks {
text-align: center;
}
.SellerItem img {
margin-top: -22px;
}
.SellerItem .addtocart img {
margin-top: 00px;
}
.SellerItem .addtocart {
font-size: 14px;
margin-top: -6px;
}
.titleSingle .BoxItem {
min-height: inherit;
}
.titleSingle hr {
border-top: 1px solid #ffffff17;
}
.dataTables_paginate a {
background: #272b33 !important;
border-color: #414652 !important;
}
.dataTables_length select,
.dataTables_filter input {
background: #272b33 !important;
border-color: #414652 !important;
color: #fff;
margin: 20px 5px !important;
}
.dataTables_filter label,
.dataTables_length label {
font-weight: 300;
}
.accepttradebutton {}
.accepttradebutton .GreenButtton {
width: inherit;
padding: 10px 20px;
margin: auto;
}
.tradeitemprice {
font-size: 14px;
font-weight: 500;
color: #444c57;
}
.tradeitemprice span {
font-family: Tahoma;
direction: ltr;
vertical-align: middle;
}
.tradeitemsbox {
background: #2a2e37;
border-radius: 20px;
margin-top: 10px;
overflow-x: hidden;
padding-bottom: 13px;
height: 570px;
overflow-y: scroll;
}
.tradeitemheader {
position: relative;
border-bottom: 2px solid #272b33;
}
.tradeitemheader label {
position: absolute;
left: 15px;
top: 18px;
}
.tradeitemheader ul {
padding: 0px;
margin: 0px;
}
.tradeitemheader ul li {
float: right;
list-style: none;
color: #fff;
padding: 5px;
border-right: 2px solid #272b33;
min-height: 50px;
padding: 0px 10px;
padding-top: 16px;
}
.tradeitemheader input {
padding-top: 0px;
margin-top: -9px;
padding: 8px;
width: 100%;
display: table;
background: #2a2e37;
outline: none;
}
.tradeitemheader ul li:first-child {
border: none;
}
.TradeYouritems .tradeitemprice {
text-align: left;
}
.tradeitemContent {
margin-top: 10px;
border-radius: 5px;
border: 2px solid #1c1f27;
overflow: hidden;
width: 107px;
float: right;
margin-right: 9px;
max-height: 68px;
position: relative;
}
.tradeitemContent img {
margin: -3px;
min-width: 103%;
}
.tradeitemContent .tradeitemprice {
position: absolute;
bottom: 3px;
left: 5px;
color: #fff;
font-family: Tahoma;
text-shadow: 0px 0px 3px black;
background: #000000bd;
padding: 0px 4px;
border-radius: 5px;
}
.tradeitemtradecd {
left: inherit !important;
right: 5px;
background: #ed9328c4 !important;
}
.tradeitemContent i {
display: inline-block;
vertical-align: middle;
}
.widthdrawinput {
font-size: 35px;
padding: 15px 0px;
}
.widthdrawtitle {
font-size: 18px;
font-weight: 400;
color: #fff;
margin-top: 30px;
}
.widthdrawtitle span {
font-size: 14px;
color: #8593a7;
cursor: pointer;
}
.AddSheba {
background: #77BC0A;
border-radius: 50px;
margin-bottom: 14px;
display: block;
margin-top: 23px;
}
.widthdrawsection select {
margin-top: 15px;
font-size: 14px;
}
.widthdrawsection .SubmitWithdraw {
margin-top: 15px;
padding: 12px 0px;
font-weight: 500;
}
.pagenav {
text-align: center;
}
.pagenav span {
background: #ff7e1c;
margin-left: 5px;
padding: 5px 12px 6px;
color: #fff;
cursor: pointer;
margin-bottom: 80px;
display: inline-block;
}
.FindCount {
font-weight: 200;
font-size: 15px;
vertical-align: middle;
color: #7f91ab;
}
.loadingg {
display: table;
text-align: center;
margin: auto;
border-radius: 25px;
padding: 5px 26px;
position: fixed;
top: 50%;
left: 47%;
z-index: 999;
}
.loadingg svg {
float: right;
}
.loadingg span {
margin-top: 94px;
display: flex;
font-size: 25px;
color: #fff;
font-weight: 400;
text-shadow: 0px 0px 18px #ff8202;
}
.koleSafhe {
background: #000000bd;
height: 100%;
position: fixed;
top: 1px;
left: 1px;
width: 100%;
z-index: 998;
}
.AddtoCartAnimate {
background: #444c57;
animation-name: CartAnimate;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes CartAnimate {
0% {
background-color: #444c57;
}
50% {
background-color: #c24924;
}
100% {
background-color: #444c57;
}
}
.OpaccityAnimation {
opacity: 1;
animation-name: OpaccityAnimation;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes OpaccityAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
.Table2 {
color: #fff;
width: 100%;
background: #2e3039;
border-radius: 5px;
padding: 5px;
text-align: center;
overflow: hidden;
}
.Table2 .Hazfesh {
color: #ff0000;
margin-right: 8px;
font-size: 19px;
text-shadow: 0px 0px 3px #ff0000ba;
}
.Table2 tr {
border-top: 1px solid #202126;
}
.Table2 tr:first-child {
border-top: none;
}
.Table2 tr td {
padding: 10px 2px;
}
.Table2 tr img {
width: 90px;
border-radius: 3px;
box-shadow: 0px 0px 2px 2px #00000024;
border: 1px solid #292a31;
}
.Dtable2 .addtocart {
padding: 11px 0px;
margin-top: 15px;
}
.Dtable2 .ghabelePardakht {
margin-top: 15px;
}
.ghabelePardakht {
background: #14a25d;
color: #fff;
padding: 10px 0px;
text-align: center;
border-radius: 5px;
}
.ghabelePardakht .price {
float: none;
}
.Nokte {
margin-top: 27px;
}
.Nokte ul li {
font-size: 14px;
color: #687585;
font-weight: 500;
margin-bottom: 15px;
}
.uk-modal {
background: rgb(0 0 0 / 78%);
}
.uk-modal-body {
background: #202126;
border-radius: 8px;
border: 2px solid #000000;
box-shadow: 0px 0px 31px 13px #0000004a;
color: #fff;
}
.SubmitWithdraw {
margin-top: 30px;
padding: 12px 0px;
}
.inventory .TradeCD {
display: inline-block;
}
.inventory .addtocart {
width: inherit;
padding: 8px 10px;
}
button:disabled,
button[disabled],
button:disabled:hover,
button[disabled]:hover {
background: #b9b9b9;
box-shadow: none;
}
.profileSetting label {
font-weight: 300;
margin-top: 30px;
color: #fff;
}
.profileSetting input {
margin-top: 5px;
}
table .TableMosbat {
color: #b1fc67;
text-shadow: 0 0 10px rgba(130, 212, 50, .63);
}
table .TableManfi {
color: #fc6767;
text-shadow: 0 0 10px rgba(212, 50, 50, .63);
}
.myitems img {
width: 90px;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 2px 2px;
border: 1px solid rgb(41, 42, 49);
}
.myitems input {
display: inherit;
width: inherit;
}
.myitems .addtocart {
padding: 8px 4px;
}
.CheckShebaNumber {
font-size: 14px;
color: #687585;
font-weight: 400;
margin-top: 30px;
}
.CheckShebaNumber span {}
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
padding-right: 0px;
}
.uk-notification-message {
color: #fff;
font-weight: 400;
border-radius: 5px;
font-size: 17px;
}
.uk-notification-message-primary {
background: #1e87f0;
}
.uk-notification-message-success {
background: #51da2d;
}
.uk-notification-message-warning {
background: #f1b27b;
}
.uk-notification-message-danger {
background: #f05353;
}
#chooseappid img {
border-radius: 6px;
border: 1px solid #00000012;
box-shadow: 0px 0px 3px 3px #0000001a;
cursor: pointer;
}
#acceptoffer,
#SendOfferPage {
display: none;
}
.Box {
background: #303741;
color: #fff;
border-radius: 3px;
padding: 20px 10px 20px;
}
.Box h3 {
font-family: 'iransansx';
font-size: 18px;
color: #fff;
}
#Robolvl {
background: #4CAF50;
border-radius: 3px;
display: inline-table;
vertical-align: middle;
text-align: center;
padding: 4px 5px 1px;
}
#RoboDate {
background: #F44336;
border-radius: 3px;
display: inline-table;
vertical-align: middle;
text-align: center;
padding: 4px 5px 1px;
}
.sideCat ul {
padding: 0px
}
.sideCat ul li {
list-style: none;
}
.sideCat ul li:last-child {
list-style: none;
border-bottom: none;
}
.sideCat ul li a {
display: block;
color: #fff;
padding: 14px 2px;
text-align: center;
}
.UserMenuUi li {
float: right;
list-style: none;
}
.UserMenuUi {
padding: 0px;
margin-bottom: 40px;
}
.UserMenuUi li a {
background: #2e3039;
color: #fff;
padding: 8px;
border-radius: 4px;
margin-left: 6px;
box-shadow: 0px 0px 3px 3px #0000000a;
}
.UserSettingInput label {
color: #fff;
font-weight: 300;
margin-bottom: 10px;
}
.UserSettingInput .addtocart {
margin-top: 33px;
}
.UserSettingInput input {
margin-bottom: 33px;
}
.UserSettingInput select {
box-shadow: none;
margin-top: 0px;
padding: 8px 5px;
}
.inltr {
direction: ltr;
}
#ShomareCardName {
color: #8d94b3;
font-weight: 500;
font-size: 14px;
position: absolute;
bottom: 5px;
right: 18px;
}
.ajs-message a {
color: #fff;
}
.alertify .ajs-header {
color: #fff;
background: #303741;
border-bottom: #2b313a 1px solid;
}
.alertify .ajs-footer {
background: #303741;
border-top: #2b313a 1px solid;
}
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button {
margin: 4px;
}
.alertify .ajs-footer .ajs-buttons .ajs-button {
color: #fff;
font-weight: 400;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
color: #ffffff;
background: #4CAF50;
font-weight: 400;
}
.uk-nav-primary li {
font-size: 18px;
color: #fff !important;
}
.uk-nav-primary li a {
font-size: 18px;
color: #fff !important;
padding: 11px 0px !important;
}
.indexbanner img {
margin-top: 30px;
box-shadow: 0px 0px 12px 7px #0000005c;
border-radius: 13px;
/* border: 2px solid #607D8B; */
}
.BgSabet {
background-position: top;
background-repeat: no-repeat;
position: absolute;
background-size: cover;
height: -webkit-fill-available;
width: 100%;
top: 0;
left: 0;
z-index: 0;
background-image: url('https://fastitem.ir/bggggg.webp');
opacity: 0.08;
}
.NoActiveRobot {
vertical-align: middle;
background: #f10;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 35px;
box-shadow: 0 0 3px 3px #4c0a0666;
margin-left: 5px;
}
.ActiveRobot {
background: #3f0;
box-shadow: 0px 0px 3px 3px #0c3a00;
opacity: 1;
animation-name: ActiveRobotAnimate;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.ActiveRobotOrange {
background: #ff8d00;
box-shadow: 0px 0px 3px 3px #3a1c00;
}
@keyframes ActiveRobotAnimate {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.FooterCartFix a {
white-space: nowrap;
}
.FooterCartFix span {
color: #fff;
padding: 8px 0px 3px;
vertical-align: middle;
display: inline-block;
font-weight: 600;
}
.uk-accordion-title {
background: #24262d;
color: #fff;
padding: 8px;
border-radius: 3px;
}
#retain-frame-container iframe {
bottom: 55px;
}
#retain-container-body .retain-launcher {
background: #f73b3b !important;
}
.WithDrawRecipe {}
.WithDrawRecipe p {
color: #fff;
text-align: center;
}
.WithDrawRecipe .Table2 {}
.gems {
position: absolute;
top: 140px;
left: 13px;
}
.gems li {
float: left;
list-style: none;
opacity: 0.9;
transition: all 0.3s;
}
.gems li:hover {
opacity: 1;
}
.gems li img {
width: 70px;
min-height: auto;
}
.Styles {
position: absolute;
top: 52px;
right: 6px;
height: 109px;
overflow-y: scroll;
opacity: 0.4;
}
.Styles ul,
.gems ul {
padding: 5px
}
.Styles:hover {
opacity: 0.8;
}
.Styles i {
margin-right: 3px;
}
.Styles ul li {
font-family: tahoma;
background: #000000;
margin-bottom: 3px;
border-radius: 5px;
font-size: 14px;
list-style: none;
}
.Styles .lock {
color: #E91E63;
}
.Styles .unlock {
color: #8BC34A;
}
.ExpandItem {
position: absolute;
top: 8px;
color: #fff;
text-shadow: 0px 0px 3px #000;
opacity: 0.7;
}
.ExpandItem:hover {
opacity: 1;
color: #fff;
}
.SellItemLink {
background: #33a25d;
width: 100%;
display: block;
text-align: center;
padding: 11px;
color: #fff;
font-weight: 500;
border-radius: 7px;
border-bottom: 2px solid #195831;
}
.CuOptions {
background: #2196f3;
text-align: center;
padding: 5px 5px 7px;
margin-top: 15px;
border-radius: 13px;
color: #fff;
}
.CuOptions input[type="checkbox"] {
width: inherit;
display: inline;
text-align: right;
margin: inherit;
}
.CuOptions label {
font-weight: 500;
}
.htitle h3 {
font-family: 'iransansx';
color: #fff;
border-bottom: 1px solid #18191d;
padding-bottom: 13px;
}
.FastCashBack {
position: absolute;
right: 4px;
top: 7px;
direction: rtl;
}
.FastCashBack img {
margin: auto;
min-width: auto;
margin-top: -1px;
}
.FastCashBack:hover .FastCashBackText {
display: revert;
opacity: 1;
}
.FastCashBackText {
background: #00000075;
color: #fff;
border-radius: 10px;
padding: 1px 23px 1px 5px;
padding-right: 23px;
margin-right: -20px;
opacity: 0;
display: none;
transition: all 0.3s;
}
.FastCashBackText span {
font-size: 26px;
margin-top: 6px;
vertical-align: -webkit-baseline-middle;
}
.Festival p span {
font-size: 30px;
font-weight: 400;
vertical-align: -webkit-baseline-middle;
}
.Festival p b {
color: #5cf21a;
font-weight: 500;
font-size: 18px;
}
.FestivalBanner {
background: #182130;
text-align: center;
margin-top: 18px;
}
.Festival .Box {
margin-bottom: 20px;
}
.FestivalTitleSpan {
font-size: 14px;
font-weight: 300;
}
.FestivalModal li {
background: #303741;
border-radius: 5px;
padding: 9px;
line-height: 30px;
list-style: none;
margin-bottom: 5px;
}
.FilterBanner a {
margin-top: 21px;
text-align: center;
background: #182130;
display: block;
}
.GameProduct {
position: relative;
overflow: hidden;
}
.GameProduct p {
line-height: 35px;
font-size: 18px;
color: #fff;
}
.iHaveAccount {
background: #11161c;
display: inline;
border-radius: 5px;
padding: 7px;
}
.iHaveAccount input[type="checkbox"] {
display: inline;
width: inherit;
vertical-align: middle;
}
.iHaveAccount label {
font-size: 16px;
font-weight: 300;
}
.GameProduct img {
border-radius: 5px;
}
.GameProduct .price {
margin: 25px 0px 25px;
}
.GameBG {
position: absolute;
top: 0px;
left: 1px;
opacity: 0.3;
}
.MaskToTop {
-webkit-mask-image: linear-gradient(to Top, transparent 25%, black 75%);
mask-image: linear-gradient(to Top, transparent 25%, black 75%);
}
.LeagueLogo {
display: block;
margin: -79px auto 0px;
}
.League .Box {
text-align: center;
padding: 25px;
position: relative;
}
.League .addtocart {
background: #c34040;
margin: 20px auto;
}
.League .GreenButtton {
background: #28c360;
}
.League .addtocart img,
.LeagueInfo img {
margin-left: 10px;
}
.League p {
line-height: 35px;
text-align: right;
}
.LeagueInfoimg {
background: #c34040;
padding: 8px 0px;
}
.LeagueInfo ul {
padding: 0px !important;
margin: 0px !important;
}
.LeagueInfo ul li {
list-style: none;
border-bottom: 1px solid #60718a;
display: block;
padding: 0px 20px 25px;
margin: 20px 0px;
}
.LeagueInfo ul li:last-child {
border-bottom: none;
}
.LeagueInfo {
padding: 0px !important;
}
.BozorgKochik {
font-size: 13px;
}
.BozorgKochik b {
font-size: 18px;
}
.LeagueRankSelected {
background: #202126;
border-radius: 5px;
padding: 20px 0px;
margin: 15px 0px;
}
.LeagueRankSelected img {
width: 80px;
margin-left: 12px;
}
.League {
margin-top: 110px
}
.LeagueLinks {
background: #607d8b;
display: block;
margin-top: 18px;
text-align: center;
padding: 14px 10px;
border-radius: 5px;
color: #fff;
}
.dataTables_length {
text-align: right;
}
.TopCenterLeague p {
text-align: center;
}
.BackLeague a {
position: absolute;
left: 0px;
top: -59px;
padding: 5px 13px;
width: auto;
}
.League a:hover {
color: #fff !important;
}
.h3League {
color: #fff;
font-family: 'iransansx';
background: #2a2e37;
padding: 7px 0px 3px;
}
.leagueTimetoStart {
float: left;
margin: -6px 0px 19px 11px;
}
.leagueTimetoStart img {
border-radius: 15px;
box-shadow: 0px 0px 6px 3px #00000038;
}
.leagueTimetoStart ul {
float: right;
margin: 9px 0px 0px 11px;
}
.leagueTimetoStart li {
float: right;
width: 42px;
height: 42px;
margin: 0px 0 4px 2px;
padding: 9px 11px 6px;
border-radius: 10px;
border: solid 1px #576477;
background-color: #242328;
color: #fff;
object-fit: contain;
font-size: 18px;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: 1.59;
letter-spacing: normal;
text-align: left;
list-style: none;
}
.leagueTimetoStart li span {
font-size: 11px;
font-weight: 300;
}
.OffPercent {
background: #f33125;
color: #fff;
padding: 2px 3px 0px 3px;
border-radius: 3px;
box-shadow: -2px -2px 0px #712e2a;
font-family: unset;
position: absolute;
bottom: 157px;
right: 10px;
}
.HeaderProfileSetting img {
width: auto;
margin-top: 4px;
margin-right: 6px;
}
.FastNote {
margin-top: 30px;
background: #1e285f;
padding: 7px;
border-radius: 3px;
color: #fff;
line-height: 40px;
}
.FastNote b {
font-size: 18px;
font-weight: 500;
color: #ffc107;
}
.uk-dropdown-nav li,
.MobileCustomLike li {
position: relative;
padding-right: 50px;
transition: all 0.3s;
}
.uk-dropdown-nav li:hover,
.MobileCustomLike li:hover {
background: #373e4a;
}
.uk-dropdown-nav li a,
.MobileCustomLike li a {
border-bottom: 1px solid #303741;
padding: 16px 0px;
font-weight: 400px;
color: #a5b3c3 !important;
}
.uk-dropdown-nav li:last-child a,
.MobileCustomLike li:last-child a {
border-bottom: none;
}
.uk-dropdown-nav li img,
.MobileCustomLike li img {
width: auto;
position: absolute;
top: 15px;
right: 15px;
opacity: 0.5;
}
.uk-dropdown {
padding: 0px;
}
ul.collapsed>li:nth-child(n+22) {
display: none;
}
ul.collapsed>.list-toggle>span.collapse,
ul.expanded>.list-toggle>span.expand {
display: none;
}
ul.collapsed>.list-toggle>span.expand,
ul.expanded>.list-toggle>span.collapse {
display: block;
}
.FilterOptions {
text-align: center;
}
.FilterOptions input {
display: none;
}
.FilterOptions label {
background: #de7351;
text-align: center;
margin-top: 15px;
border-radius: 13px;
color: #fff;
width: 100%;
padding: 14px 0px 13px;
font-weight: 300;
}
.FilterOptions input[type="checkbox"]:checked+label {
background: #ff5722;
box-shadow: 0px 0px 13px 7px #ff3e0094;
}
.OptionMotema label {
background: #009688;
}
.OptionMotema input[type="checkbox"]:checked+label {
background: #4caf50;
box-shadow: 0px 0px 13px 7px #4caf4f59;
}
.footerPM {
position: fixed;
bottom: 0px;
text-align: center;
display: block;
width: 100%;
/* background: #FF5722; */
background: #ff0057;
padding: 11px;
animation-name: aanimate;
animation-iteration-count: infinite;
animation-duration: 1s;
z-index: 999999;
color: #fff;
font-weight: 500;
}
@keyframes aanimate {
0% {
background-color: #FF5722;
}
50% {
background-color: #ff0057;
}
100% {
background-color: #FF5722;
}
}
.RefNot h4 {
font-family: 'iransansx';
margin-bottom: 28px;
font-size: 16px;
}
.RefNot .uk-margin-auto-vertical {
margin-top: 25px !important;
}
.RefNot li {
margin-top: 10px;
border-top: 1px solid #ffffff0d;
padding-top: 15px;
}
.RefNot li p {
margin-top: 18px;
}
.RefNot .GreenButtton {
margin-top: 5px;
}
.RefNot .ForiCanceled {
color: #ff0202;
}
.RefNot .ForiAccepted {
color: #38ea15;
}
.RefNot .ForiWaiting {
color: #eab515;
}
.FastTutsssss {
float: left !important;
}
.FastTutsssss a {
background: #009688 !important;
padding: 9px 20px 9px !important;
transition: all 0.3s;
}
.FastTutsssss a:hover {
box-shadow: 0px 0px 10px 5px #0000000f;
background: #2fab9a !important;
}
.FastTutsssss img {
width: 21px;
margin-top: 4px;
vertical-align: middle;
margin-left: 15px !important;
}
.FAQMobile {}
.FAQMobile a {}
.FAQMobile img {
top: 9px !important;
width: 27px !important;
right: 10px !important;
}
.SteamerPage .uk-grid {
margin-right: 15px;
display: block;
margin-top: 30px;
}
.SteamerPage .uk-grid>* {
padding-right: 0px;
}
.SteamerPage .col-lg-2 {
float: left;
}
.SteamerPage h1 {
margin: 40px 0px;
}
.SteamerPage .GreenButtton {
width: max-content;
display: initial;
border-radius: 15px;
padding: 7px;
font-size: 16px;
margin-right: 6px;
}
.SteamerPage .GreenButtton i {
font-size: 11px;
}
.SteamerPage .SteamerFilter {
text-align: left;
background: #00000045;
padding: 0px;
}
.SteamerPage .SteamerFilter li {
color: #fff;
float: left;
list-style: none;
margin-right: 0px;
padding: 8px 8px 6px;
transition: all 0.3s;
}
.SteamerPage .SteamerFilter li:hover {
background: #e91e63;
cursor: pointer;
}
.StreamerBox {
background: #101a27;
text-align: left;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 0px 3px 5px #0000003b;
position: relative;
margin-bottom: 35px;
border: 2px solid #090d13;
}
.StreamerBox img {
width: 100%;
}
.StreamerBox a {
color: inherit;
}
.StreamerBox .LiveTime {
position: absolute;
top: 0px;
left: 0px;
background: #ff5722;
padding: 4px 7px 2px;
color: #fff;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
.StreamerBox .LiveTime i {
float: left;
margin-right: 6px;
margin-left: -1px;
}
.StreamerBox .Streamer img {
float: left;
width: 50px;
border-radius: 14px;
margin: 12px;
}
.StreamerBox .Streamer h3 {
color: #fff;
margin: 0px;
padding-top: 16px;
font-size: 14px;
}
.StreamerBox .Streamer h4 {
color: #4f6686;
font-size: 13px;
margin: 0px;
}
.StreamerBox .ViwerCount {
color: #fff;
text-align: right;
margin-top: 28px;
margin-right: 12px;
font-size: 17px;
font-weight: 500;
}
.StreamerBox i {
float: right;
margin-left: 5px;
padding-top: 2px;
}
.BTCDeposit .BTCQRCode {
border-radius: 16px;
margin-top: 25px;
}
.BTCDeposit img {
display: block;
margin: auto;
margin-bottom: 20px;
}
.BTCDeposit .BTCAlert b {
color: #ffeb00;
font-weight: 600;
}
.BTCDeposit .BTCAlert {
text-align: center;
background: #0f1ba3;
font-size: 20px;
padding: 16px 0;
border-radius: 18px;
}
.BTCPaymentDetails {
display: none;
}
.TimeToPayBTC {
text-align: center;
margin-top: 18px;
}
.PayWithBTC {
text-align: left;
}
.PayWithBTC a {
background: #1f2024;
padding: 10px;
border: 1px dashed #ffffff47;
color: #fff;
border-radius: 7px;
}
/* CardToCar */
.CardToDeposit {
background: #17181b;
font-size: 35px;
padding: 15px 0px 4px 0px;
color: #ffc600;
border-radius: 20px;
font-weight: 400;
margin-bottom: 25px;
direction: ltr;
}
.CardToDepositName {
color: #fff;
font-size: 22px;
padding-bottom: 13px;
}
.AmountCardToCard {
font-size: 22px;
text-align: center;
margin-bottom: 20px;
}
.AmountCardToCard b {
font-size: 40px;
}
.CardToCardFF label {
font-weight: 300;
font-size: 19px;
margin-bottom: 8px;
}
.CardToCardFF p {
line-height: 44px;
font-size: 19px;
color: #fff;
}
.NewBlueButtonDiv {
text-align: left;
}
.NewBlueButton {
background: #001eff;
border: none;
padding: 14px 47px;
font-size: 22px;
border-radius: 11px;
}
.TimeToDepostCardToCard {
background: #272930;
padding: 8px;
border-radius: 8px;
margin-top: 18px;
text-align: center;
font-size: 17px;
font-weight: 200;
}
.cardtocardDone {
text-align: center;
}
.cardtocardDone h5 {
font-family: inherit;
font-size: 22px;
font-weight: 700;
text-align: center;
color: #fff;
}
#CardToCardSecPage,
#CardToCardLastPage {
display: none;
}
.cardtocardDone span {
background: red;
font-weight: 800;
padding: 1px 6px 1px 5px;
margin-left: 5px;
}
/* Vase League Badan Delete Knam Chon be Khode League ezafe kardamvali file style update nashod */
.LeagueChangeLog {
padding: 0px 15px;
background: #ffbc00;
border-radius: 27px;
color: #000;
border: 2px dashed #0000004d;
margin-bottom: 15px;
}
.LeagueChangeLog h4 {
color: #000;
}
.LeagueChangeLog ul {}
.LeagueChangeLog ul li {}
.SelectPaymentGetWay {}
.SelectPaymentGetWay input[type="radio"] {
display: none
}
.SelectPaymentGetWay label {
background: #000;
padding: 5px 14px;
margin-top: 15px;
border: none;
border-radius: 5px;
font-weight: 400;
margin-left: 4px;
font-size: 18px;
transition: all 0.3s;
}
.SelectPaymentGetWay label:hover {
background: #00000036;
}
.SelectPaymentGetWay input[type="radio"]:checked+label {
background: #ffdf00;
color: #000;
}
.StarxTable tr {
border-top: 1px solid #212b38;
}
.StarxTable {
background: #11161d;
}
.StarxTable tr img {
width: 30px;
border: none;
box-shadow: none;
}
.StarxTotalShard {
text-align: center;
color: #fff;
}
.StarxTotalShard img {
margin-left: -32px;
}
.StarxPrclosed,
.StarxPrclosed:hover {
color: #ff9a00;
}
.StarxPrFinished,
.StarxPrFinished:hover {
color: #de1a1a;
}
.StarxPropen {
color: #00ff6c;
}
.StarxPropen:hover {
color: #25c512;
}
.StarxTeamPr label {
margin-top: 24px;
font-weight: 300;
color: #fff;
}
.StarxTeamPr {
text-align: center;
}
.StarxTeamPr img {
max-width: 188px;
max-height: 188px;
min-height: 200px;
}
.StarxClub .addtocart {
margin-top: 15px;
}
.StarxTeamNamePr {
background: #11161d;
text-align: center;
padding: 6px;
border-radius: 11px;
font-weight: 500;
color: #fff;
margin-top: 10px;
}
.logo-watermark {
display: none !important;
}
iframe body {
background: none;
}
.FastitemFloatBar {
position: relative;
width: 40%;
float: left;
}
.FastitemFloat {
height: 6px;
display: inline-block;
margin-right: -5px;
}
.Factory_New {
width: 7%;
background: #3c818f;
}
.Minimal_Wear {
width: 8%;
background: #83b135;
}
.Field_Tested {
width: 23%;
background: #d7be48;
}
.Well_Worn {
width: 7%;
background: #f08141;
}
.Battle_Scarred {
width: 57%;
background: #ec4f3d;
}
.FloatPointer {
position: absolute;
height: 8px;
display: flex;
top: 100%;
margin-top: -11px;
transition: var(--ex-transition-primary);
transform: translate(-50%);
z-index: 1;
color: #fff;
text-shadow: 0 1px 8px #000000;
font-size: 18px;
}
.AllFloats {
color: #fff;
position: absolute;
top: 5px;
right: 5px;
background: #484b5e;
padding: 5px 5px 3px;
border-radius: 9px;
border-bottom: 1px solid #1f1e26;
}
.AllFloats i {
margin-right: 6px;
}
.AllFloats:hover {
cursor: pointer;
}
.priceFloat {
float: left;
width: 40%;
text-align: center;
}
.priceFloat .price {
display: contents;
color: #fff;
}
.BuyFloat {
width: 20%;
}
.FloatNumber {
text-align: left;
color: #fff;
font-family: monospace;
font-size: 12px;
}
.GetFloatByTable {
background: #08080a42;
padding: 7px 0px;
border-radius: 10px;
margin: 5px 0px;
}
.LiquipediaLink {
position: absolute;
bottom: 1px;
right: 1px;
background: #000000c4;
padding: 5px;
border-radius: 5px;
color: #fff;
direction: rtl;
font-size: 14px;
border-bottom: 2px solid #000;
}
.LiquipediaLink:hover {
opacity: 1;
}
.boxitem_img_fast {
position: relative;
}
/* ======================================================================
FASTITEM 7.0 — HEADER (single clean stylesheet). 2026-07-15.
Placement unchanged; unified box family, tight spacing, account menu.
====================================================================== */
.TopHeader { background: #191b21 !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); }
.TopHeader .container-fluid { padding: 0 24px; }
/* --- shared box family: cart / inventory / wallet / profile (same height) --- */
.HeaderCard, .HeaderWallet, .LoginButton {
height: 44px !important; box-sizing: border-box !important;
background: #23252d !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
display: inline-flex !important; align-items: center !important;
margin: 0 0 0 8px !important;
}
.logo { margin: 0 6px 0 0 !important; }
/* cart / inventory: icon + count inline */
.HeaderCard { padding: 0 14px !important; gap: 8px; }
.HeaderCard a { display: inline-flex !important; align-items: center; line-height: 0; }
.HeaderCard img { height: 20px !important; padding: 0 !important; }
.HeaderCard span { font-size: 16px !important; line-height: 1 !important; padding: 0 !important; float: none !important; color: #eef1f6 !important; }
.HeaderCard .clear { display: none !important; }
/* wallet */
.HeaderWallet { padding: 0 7px 0 13px !important; direction: rtl; }
.HeaderWallet .row { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; gap: 11px; flex-wrap: nowrap; }
.HeaderWallet .col-xs-4, .HeaderWallet .col-xs-8 { float: none !important; width: auto !important; padding: 0 !important; height: 100% !important; display: flex !important; align-items: center !important; }
.HeaderWallet .Mablagh { margin: 0 !important; font-size: 15px !important; white-space: nowrap; color: #eef1f6; }
.HeaderWallet b { color: #f0f3f8 !important; font-weight: 700 !important; }
.DepositWithdraw { display: flex !important; flex-direction: column; gap: 4px; }
.DepositWithdraw a {
background: #30343e !important; width: 30px !important; height: 16px !important;
border-radius: 6px !important; font-size: 16px !important; line-height: 16px !important;
padding: 0 !important; margin: 0 !important; color: #cfd5e0 !important; font-weight: 400 !important;
display: flex !important; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.DepositWithdraw a:hover { background: #62ab14 !important; color: #fff !important; }
.DepositWithdraw .Wathdrawmanfi:hover { background: #c73a2b !important; }
/* profile button */
.LoginButton { padding: 0 14px 0 8px !important; gap: 8px; font-size: 14px !important; color: #eef1f6 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; transition: background .2s; }
.LoginButton:hover { background: #282b33 !important; }
.LoginButton img { width: 30px; height: 30px; border-radius: 50%; margin: 0 !important; object-fit: cover; }
/* profile side icons — bg-less, sized to match */
.HeaderMenu { display: flex; align-items: center; gap: 8px; }
.HeaderProfileSetting img { background: transparent !important; box-shadow: none !important; width: 40px !important; height: 40px !important; padding: 9px !important; box-sizing: border-box; border-radius: 11px; opacity: .8; transition: opacity .2s, background .2s; }
.HeaderProfileSetting:hover img { opacity: 1; background: rgba(255,255,255,.06) !important; }
/* game nav chips */
.GameCatTop ul li a { background: #1d1f27 !important; border-radius: 11px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; transition: background .2s, box-shadow .2s; }
.GameCatTop ul li a:hover { background: #23262f !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) !important; }
/* green button */
.GreenButtton { background: #62ab14 !important; border-radius: 12px !important; box-shadow: none !important; transition: filter .2s; }
.GreenButtton:hover { filter: brightness(1.08); }
/* === account menu (redesigned dropdown) === */
.fsi-accmenu { background: #1e2027 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; box-shadow: 0 22px 55px rgba(0,0,0,.6) !important; padding: 0 !important; min-width: 280px !important; margin-top: 12px !important; overflow: hidden; }
.fsi-accmenu-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: linear-gradient(135deg, rgba(98,171,20,.15), transparent 65%); border-bottom: 1px solid rgba(255,255,255,.07); }
.fsi-accmenu-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(98,171,20,.5); flex-shrink: 0; }
.fsi-accmenu-meta { display: flex; flex-direction: column; gap: 3px; text-align: right; min-width: 0; }
.fsi-accmenu-name { color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.fsi-accmenu-id { color: #8a93a3; font-size: 12px; }
.fsi-accmenu-list { padding: 8px !important; margin: 0 !important; list-style: none !important; }
.fsi-accmenu-list li { border-radius: 10px !important; margin: 2px 0 !important; border: none !important; background: transparent !important; }
.fsi-accmenu-list li a { display: flex !important; align-items: center; gap: 11px; color: #cbd2dd !important; padding: 11px 12px !important; font-size: 14px !important; border-radius: 10px !important; transition: background .15s, color .15s; }
.fsi-accmenu-list li a:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.fsi-accmenu-list li img { width: 19px !important; height: 19px !important; object-fit: contain; opacity: .7; }
.fsi-accmenu-logout { margin-top: 6px !important; border-top: 1px solid rgba(255,255,255,.07) !important; padding-top: 6px !important; }
.fsi-accmenu-logout a { color: #e8705f !important; }
.fsi-accmenu-logout a:hover { background: rgba(199,58,43,.14) !important; color: #ff8a78 !important; }
/* remove UIkit nav dividers/lines inside the account menu */
.fsi-accmenu-list li, .fsi-accmenu-list li a { border: 0 !important; box-shadow: none !important; }
.fsi-accmenu-list li::before, .fsi-accmenu-list li::after { display: none !important; content: none !important; }
.fsi-accmenu .uk-nav > li > a { border: 0 !important; }
/* --- fixes: natural-size side icons, bigger clickable +/- , roomier boxes --- */
/* profile side icons (settings + direct-buy fire): keep NATURAL aspect ratio, not squished */
.HeaderProfileSetting img {
background: transparent !important; box-shadow: none !important;
width: auto !important; height: 34px !important; padding: 0 !important;
border-radius: 8px; opacity: .85; transition: opacity .2s;
}
.HeaderProfileSetting:hover img { opacity: 1; }
/* wallet +/- : side-by-side, big & easy to click */
.DepositWithdraw { display: flex !important; flex-direction: row !important; gap: 5px !important; }
.DepositWithdraw a {
background: #30343e !important; width: 30px !important; height: 30px !important;
border-radius: 8px !important; font-size: 19px !important; line-height: 1 !important;
padding: 0 !important; margin: 0 !important; color: #d3d8e2 !important; font-weight: 400 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
transition: background .2s, color .2s;
}
.DepositWithdraw a:hover { background: #62ab14 !important; color: #fff !important; }
.DepositWithdraw .Wathdrawmanfi:hover { background: #c73a2b !important; }
/* cart / inventory: a touch more room so nothing looks cramped/deformed */
.HeaderCard { padding: 0 16px !important; gap: 9px; }
.HeaderCard img { height: 22px !important; width: auto !important; }
.HeaderCard span { font-size: 16px !important; }
/* headerless account menu: round the top corners of the list nicely */
.fsi-accmenu-list { padding: 8px !important; }
/* ======================================================================
FASTITEM 7.0 — HEADER round 3 (2026-07-15): wallet redesign (plus-only),
harmonized cart/inventory/wallet, natural-size right-cluster icons.
====================================================================== */
/* --- the three sibling boxes: cart / inventory / wallet share one look --- */
.TopHeader .HeaderCard,
.TopHeader .HeaderWallet {
height: 44px !important; box-sizing: border-box !important;
background: #21232b !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
display: inline-flex !important; align-items: center !important;
margin: 0 0 0 8px !important; direction: rtl;
transition: box-shadow .2s, background .2s;
}
.TopHeader .HeaderCard:hover,
.TopHeader .HeaderWallet:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.13) !important; }
/* cart / inventory: icon + count, comfy click target */
.TopHeader .HeaderCard { padding: 0 15px !important; gap: 9px; }
.TopHeader .HeaderCard img { height: 21px !important; width: auto !important; padding: 0 !important; opacity: .92; }
.TopHeader .HeaderCard span { font-size: 15px !important; line-height: 1 !important; padding: 0 !important; float: none !important; color: #eef1f6 !important; font-weight: 600; }
.TopHeader .HeaderCard .clear { display: none !important; }
/* --- WALLET (plus-only, no minus; settlement lives in the account menu) --- */
.TopHeader .HeaderWallet { padding: 0 6px 0 14px !important; gap: 10px; }
.TopHeader .HeaderWallet .WalletIcon { display: inline-flex; align-items: center; color: #62ab14; }
.TopHeader .HeaderWallet .Mablagh { margin: 0 !important; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; line-height: 1; }
.TopHeader .HeaderWallet .Mablagh b { color: #f2f5fa !important; font-weight: 700 !important; font-size: 15px !important; }
.TopHeader .HeaderWallet .WalletUnit { color: #8b93a3; font-size: 12px; font-weight: 500; }
.TopHeader .HeaderWallet .WalletCharge {
width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
background: rgba(98,171,20,.14); color: #7dc41f !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 21px; font-weight: 400; line-height: 0; padding: 0 0 2px 0; margin: 0;
transition: background .2s, color .2s, transform .15s;
}
.TopHeader .HeaderWallet .WalletCharge:hover { background: #62ab14; color: #fff !important; transform: translateY(-1px); }
/* --- right cluster icons (settings gear + direct-buy fire): NATURAL size --- */
.TopHeader .HeaderProfileSetting {
display: inline-flex !important; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px; padding: 0 !important;
transition: background .2s;
}
.TopHeader .HeaderProfileSetting:hover { background: rgba(255,255,255,.06); }
.TopHeader .HeaderProfileSetting img {
width: auto !important; height: 26px !important; padding: 0 !important;
background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
opacity: .82; transition: opacity .2s;
}
.TopHeader .HeaderProfileSetting:hover img { opacity: 1; }
/* --- fix (round 3b): legacy width:80px on .HeaderCard squished the box icon;
fixed 40px fire/gear box was narrower than fori's natural width --- */
.TopHeader .HeaderCard { width: auto !important; }
.TopHeader .HeaderCard img,
.TopHeader .HeaderProfileSetting img,
.TopHeader .HeaderWallet .WalletIcon svg,
.TopHeader .HeaderWallet .WalletCharge { flex: 0 0 auto !important; }
/* fire + gear: clickable box grows to the icon's real width -> true aspect ratio */
.TopHeader .HeaderProfileSetting { width: auto !important; height: 40px; padding: 0 10px !important; }
.TopHeader .HeaderProfileSetting img { height: 24px !important; width: auto !important; }
/* fire icon a touch smaller than the gear (owner request) */
.TopHeader #HeaderBuyFromUser img { height: 21px !important; }
/* wallet: icon removed, number sits to the right, plus is solid green w/ white glyph */
.TopHeader .HeaderWallet { padding: 0 6px 0 14px !important; gap: 12px; }
.TopHeader .HeaderWallet .WalletCharge {
background: #62ab14 !important; color: #fff !important;
}
.TopHeader .HeaderWallet .WalletCharge:hover { background: #6fbf17 !important; color: #fff !important; }
/* ---- round 4: reorder + neutral plus ----
cart/inventory: number to the RIGHT, icon to the LEFT
wallet: plus to the RIGHT, number to the LEFT; plus is neutral (white on dark), not green */
.TopHeader .HeaderCard { flex-direction: row-reverse !important; }
.TopHeader .HeaderWallet { flex-direction: row-reverse !important; padding: 0 8px 0 15px !important; }
.TopHeader .HeaderWallet .WalletCharge {
background: #30343e !important; color: #fff !important;
}
.TopHeader .HeaderWallet .WalletCharge:hover { background: #3b404b !important; color: #fff !important; }
/* stick the wallet + hard to the right edge */
.TopHeader .HeaderWallet { padding: 0 5px 0 16px !important; }
/* round 5: fire at its TRUE native size (31x16, like the original theme's width:auto)
— no upscaling so it isn't blurry/stretched; and glue the wallet + to the box edge */
.TopHeader #HeaderBuyFromUser img { width: 31px !important; height: 16px !important; }
.TopHeader .HeaderWallet { padding: 0 3px 0 16px !important; }
/* wallet had a legacy fixed width leaving ~46px dead space right of the + ; hug content */
.TopHeader .HeaderWallet { width: auto !important; }
/* ======================================================================
round 6 (2026-07-15): elegant account dropdown redesign
====================================================================== */
.TopHeader .fsi-accmenu {
background: #1b1d24 !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 18px !important;
box-shadow: 0 26px 60px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.04) !important;
padding: 7px !important; min-width: 268px !important; margin-top: 14px !important;
overflow: hidden;
}
.TopHeader .fsi-accmenu-list { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.TopHeader .fsi-accmenu-list li { margin: 1px 0 !important; border: 0 !important; background: transparent !important; border-radius: 12px !important; }
.TopHeader .fsi-accmenu-list li a {
display: flex !important; align-items: center; gap: 12px;
padding: 9px 12px !important; border-radius: 12px !important;
color: #c3ccd8 !important; font-size: 14px !important; font-weight: 500 !important;
position: relative; transition: background .18s ease, color .18s ease;
}
/* each icon inside a soft rounded tile */
.TopHeader .fsi-accmenu-list li a img {
width: 17px !important; height: 17px !important; object-fit: contain;
padding: 7px !important; box-sizing: content-box !important;
background: rgba(255,255,255,.05) !important; border-radius: 9px !important;
opacity: .82; transition: background .18s ease, opacity .18s ease;
}
.TopHeader .fsi-accmenu-list li a:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
.TopHeader .fsi-accmenu-list li a:hover img { background: rgba(98,171,20,.18) !important; opacity: 1; }
/* green accent bar on the right edge (RTL) on hover */
.TopHeader .fsi-accmenu-list li a::after {
content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 0; background: #62ab14; border-radius: 3px; transition: height .18s ease;
}
.TopHeader .fsi-accmenu-list li a:hover::after { height: 58%; }
/* logout: red family, sits under a hairline divider */
.TopHeader .fsi-accmenu-logout { margin-top: 6px !important; padding-top: 7px !important; border-top: 1px solid rgba(255,255,255,.06) !important; }
.TopHeader .fsi-accmenu-logout a { color: #e0796a !important; }
.TopHeader .fsi-accmenu-logout a:hover { background: rgba(224,90,66,.12) !important; color: #ff9484 !important; }
.TopHeader .fsi-accmenu-logout a:hover img { background: rgba(224,90,66,.2) !important; }
.TopHeader .fsi-accmenu-logout a::after { background: #e0796a !important; }
/* dropdown was 268px wide vs 141px content -> 113px dead gutter; tighten & balance */
.TopHeader .fsi-accmenu { min-width: 208px !important; }
/* fix: legacy theme CSS absolutely-positioned dropdown icons (fell below the text)
and kept a 50px right padding on li — restore normal flex flow */
.TopHeader .fsi-accmenu-list li { padding-right: 0 !important; }
.TopHeader .fsi-accmenu-list li a img {
position: static !important; float: none !important; display: inline-block !important;
margin: 0 !important; top: auto !important; right: auto !important; left: auto !important;
}
/* ======================================================================
round 7 (2026-07-15): game-nav row (2nd row) — same family as top boxes
====================================================================== */
.GameCatTop { padding: 2px 16px 0 16px; }
.GameCatTop ul { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.GameCatTop ul li { margin: 0 !important; padding: 0 !important; float: none !important; }
.GameCatTop ul li a {
height: 40px !important; box-sizing: border-box !important;
display: inline-flex !important; align-items: center !important; gap: 9px;
padding: 0 15px !important; margin: 0 !important;
background: #21232b !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
color: #cdd4df !important; font-size: 14px !important; font-weight: 500 !important;
line-height: 1 !important; white-space: nowrap;
transition: box-shadow .2s, background .2s, color .2s;
}
.GameCatTop ul li a img { width: auto !important; height: 20px !important; margin: 0 !important; flex: 0 0 auto; }
.GameCatTop ul li a:hover {
background: #262933 !important; color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
}
/* the tutorial chip sits at the far end (unchanged position), same family */
.GameCatTop .FastTutsssss { margin-right: auto !important; }
/* game chips: same 44px height as the top box family */
.GameCatTop ul li a { height: 44px !important; }
/* ======================================================================
round 8 (2026-07-15): responsive safety net
Desktop redesign (boxes + chips + dropdown) shows >=992px; below that the
theme swaps to the hamburger + offcanvas (kept on its own styling).
====================================================================== */
/* game chips must wrap instead of overflowing on narrower desktops */
.GameCatTop ul { flex-wrap: wrap; row-gap: 8px; }
/* top cluster: allow the boxes to wrap under the logo rather than overflow */
.TopHeader .logo { display: inline-flex; align-items: center; }
/* medium desktops (992–1280): tighten so the long wallet number still fits */
@media (max-width: 1280px) {
.TopHeader .container-fluid { padding: 0 14px; }
.TopHeader .HeaderCard { padding: 0 11px !important; gap: 7px; }
.TopHeader .HeaderWallet { padding: 0 4px 0 12px !important; gap: 8px; }
.TopHeader .HeaderWallet .Mablagh b { font-size: 14px !important; }
.TopHeader .HeaderMenu { gap: 5px; }
.GameCatTop ul li a { padding: 0 12px !important; font-size: 13px !important; }
}
/* never let the header cause a horizontal scrollbar — but NOT on .TopHeader
(it hosts the account dropdown which overflows downward and must stay visible) */
.GameCatTop { max-width: 100%; overflow-x: clip; }
/* the offcanvas slide-out keeps the theme's own mobile look; just make its
wallet +/- comfortable to tap */
#offcanvas-nav-primary .DepositWithdraw a { min-width: 34px; height: 30px; }
/* ======================================================================
round 9 (2026-07-15): FIX responsive — my box-family display:inline-flex
!important (selector .TopHeader .HeaderCard, specificity 0,2,0) was beating
Bootstrap's .hidden-xs/.hidden-sm (0,1,0) and force-showing the desktop
boxes on phones (stacked/ugly). Re-hide them at their intended breakpoints
with a higher-specificity selector. Mobile header = logo + hamburger, and
everything lives in the (redesigned) offcanvas.
====================================================================== */
@media (max-width: 767px) {
.TopHeader .HeaderCard.hidden-xs,
.TopHeader .HeaderWallet.hidden-xs { display: none !important; }
}
@media (max-width: 991px) {
.TopHeader .HeaderCard.hidden-sm { display: none !important; }
}
/* ======================================================================
round 10 (2026-07-15): mobile offcanvas menu === desktop dropdown look
handles BOTH markup shapes (![]()
.. and ![]()
..)
====================================================================== */
#offcanvas-nav-primary .uk-offcanvas-bar {
background: #16181e !important; width: 300px !important; padding: 16px 12px !important;
}
#offcanvas-nav-primary .fsi-mobmenu { margin: 0 !important; padding: 0 !important; width: 100%; text-align: right; list-style: none !important; }
/* generic nav rows — the whole is the padded, hover-able pill */
#offcanvas-nav-primary .fsi-mobmenu > li {
display: flex !important; align-items: center; gap: 12px;
margin: 2px 0 !important; padding: 11px 12px !important;
border: 0 !important; border-radius: 12px !important; position: relative !important;
background: transparent !important; list-style: none !important; float: none !important;
}
#offcanvas-nav-primary .fsi-mobmenu > li:hover,
#offcanvas-nav-primary .fsi-mobmenu > li:active { background: rgba(255,255,255,.06) !important; }
#offcanvas-nav-primary .fsi-mobmenu > li > a {
flex: 1 1 auto; display: flex !important; align-items: center; gap: 12px;
color: #c3ccd8 !important; font-size: 15px !important; font-weight: 500 !important;
padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important;
line-height: 1.2 !important;
}
#offcanvas-nav-primary .fsi-mobmenu > li:hover > a { color: #fff !important; }
#offcanvas-nav-primary .fsi-mobmenu > li > a b { color: #eef1f6 !important; font-weight: 700; }
/* icon tiles — matches img whether it is a direct child of li OR nested in the */
#offcanvas-nav-primary .fsi-mobmenu > li img {
position: static !important; float: none !important; flex: 0 0 auto;
width: 18px !important; height: 18px !important; object-fit: contain; margin: 0 !important;
padding: 8px !important; box-sizing: content-box !important;
background: rgba(255,255,255,.05) !important; border-radius: 10px !important; opacity: .85 !important;
transition: background .18s, opacity .18s;
}
#offcanvas-nav-primary .fsi-mobmenu > li:hover img { background: rgba(98,171,20,.18) !important; opacity: 1 !important; }
/* green right-edge accent on hover (RTL) */
#offcanvas-nav-primary .fsi-mobmenu > li::after {
content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 0; background: #62ab14; border-radius: 3px; transition: height .18s;
}
#offcanvas-nav-primary .fsi-mobmenu > li:hover::after { height: 56%; }
/* wallet card (top of the menu) */
#offcanvas-nav-primary .fsi-mobmenu > li.fsi-mob-wallet {
justify-content: space-between; gap: 10px;
background: #21232b !important; border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 14px !important; padding: 12px 12px !important; margin: 0 0 8px 0 !important;
}
#offcanvas-nav-primary .fsi-mob-wallet::after { content: none !important; }
#offcanvas-nav-primary .fsi-mob-bal b { color: #f2f5fa !important; font-weight: 700; font-size: 17px; }
#offcanvas-nav-primary .fsi-mob-bal span { color: #8b93a3; font-size: 12px; margin-right: 3px; }
#offcanvas-nav-primary .fsi-mob-btns { display: flex; gap: 7px; }
#offcanvas-nav-primary .fsi-mob-btns a {
width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-size: 21px; line-height: 0; padding: 0 0 2px 0; transition: filter .2s, background .2s;
}
#offcanvas-nav-primary .fsi-mob-charge { background: #62ab14; color: #fff !important; }
#offcanvas-nav-primary .fsi-mob-charge:hover { filter: brightness(1.1); }
#offcanvas-nav-primary .fsi-mob-withdraw { background: #30343e; color: #cfd5e0 !important; padding: 0 !important; }
#offcanvas-nav-primary .fsi-mob-withdraw:hover { background: #c73a2b; color: #fff !important; }
/* logout row (red, under a divider) */
#offcanvas-nav-primary .fsi-mob-logout { margin-top: 6px !important; padding-top: 12px !important; border-top: 1px solid rgba(255,255,255,.06) !important; border-radius: 0 12px 12px 12px !important; }
#offcanvas-nav-primary .fsi-mob-logout > a { color: #e0796a !important; }
#offcanvas-nav-primary .fsi-mob-logout:hover { background: rgba(224,90,66,.12) !important; }
#offcanvas-nav-primary .fsi-mob-logout:hover > a { color: #ff9484 !important; }
#offcanvas-nav-primary .fsi-mob-logout:hover img { background: rgba(224,90,66,.2) !important; }
#offcanvas-nav-primary .fsi-mob-logout::after { background: #e0796a !important; }
/* ======================================================================
round 11 (2026-07-15): responsive follows the desktop family.
منو/فیلتر buttons = the 44px header-box family; the opened offcanvas
= the exact .TopHeader .fsi-accmenu dropdown look (same surface,
type scale, icon tiles, hover values).
====================================================================== */
/* mobile "منو" / "فیلتر" buttons — same box family as the desktop header */
.MenuButInMobile {
height: 44px !important; box-sizing: border-box !important;
/* no !important on display: the filter button relies on inline display:none until JS shows it */
display: inline-flex; align-items: center !important; gap: 8px;
padding: 0 16px !important; margin: 8px 0 8px 6px !important;
background: #23252d !important; border: 0 !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
color: #eef1f6 !important; font-size: 14px !important; font-weight: 500 !important;
line-height: 1 !important; white-space: nowrap;
transition: background .2s;
}
.MenuButInMobile:hover { background: #282b33 !important; }
.MenuButInMobile i { font-size: 17px; line-height: 1; margin: 0; }
/* the green login variant keeps its green fill, same geometry */
.MenuButInMobile.GreenButtton { background: #62ab14 !important; box-shadow: none !important; color: #fff !important; }
.MenuButInMobile.GreenButtton:hover { background: #62ab14 !important; filter: brightness(1.08); }
/* opened offcanvas panel = the desktop account-dropdown surface */
#offcanvas-nav-primary .uk-offcanvas-bar {
background: #1b1d24 !important;
border-left: 1px solid rgba(255,255,255,.07);
border-right: 1px solid rgba(255,255,255,.07);
box-shadow: 0 0 60px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.04);
padding: 14px 10px !important;
}
/* rows: same numbers as .TopHeader .fsi-accmenu-list (9/12 padding, 14px text,
17px icons in 9px tiles, .055 hover, 58% accent) */
#offcanvas-nav-primary .fsi-mobmenu > li { padding: 9px 12px !important; margin: 1px 0 !important; }
#offcanvas-nav-primary .fsi-mobmenu > li:hover,
#offcanvas-nav-primary .fsi-mobmenu > li:active { background: rgba(255,255,255,.055) !important; }
#offcanvas-nav-primary .fsi-mobmenu > li > a { font-size: 14px !important; }
#offcanvas-nav-primary .fsi-mobmenu > li img {
width: 17px !important; height: 17px !important;
padding: 7px !important; border-radius: 9px !important; opacity: .82 !important;
}
#offcanvas-nav-primary .fsi-mobmenu > li:hover::after { height: 58%; }
/* wallet card on top of the menu joins the same family (box surface + ring) */
#offcanvas-nav-primary .fsi-mobmenu > li.fsi-mob-wallet {
background: #23252d !important; border: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
border-radius: 12px !important; padding: 12px !important; margin: 0 0 8px 0 !important;
}
/* logout divider spacing matches the desktop dropdown */
#offcanvas-nav-primary .fsi-mob-logout { margin-top: 6px !important; padding-top: 10px !important; }
/* ======================================================================
round 12 (2026-07-15): desktop header adopts the (approved) mobile language.
1) wallet + goes GREEN like the mobile charge button (replaces the
round-4 neutral grey), same 34px/10px-radius geometry
2) fire + gear side icons get the soft icon-tile treatment (mobile tiles)
3) cart/inventory boxes get the same hover as the account button
====================================================================== */
.TopHeader .HeaderWallet .WalletCharge {
width: 34px; height: 34px; flex: 0 0 34px !important; border-radius: 10px;
background: #62ab14 !important; color: #fff !important;
transition: filter .2s, transform .15s;
}
.TopHeader .HeaderWallet .WalletCharge:hover {
background: #62ab14 !important; color: #fff !important; filter: brightness(1.1);
}
.TopHeader .HeaderWallet { padding: 0 5px 0 16px !important; }
.TopHeader .HeaderProfileSetting {
background: rgba(255,255,255,.05);
transition: background .18s;
}
.TopHeader .HeaderProfileSetting:hover { background: rgba(98,171,20,.18); }
.TopHeader .HeaderCard:hover { background: #282b33 !important; }
.TopHeader .HeaderCard { transition: background .2s; }
/* ======================================================================
round 13 (2026-07-15): FOOTER joins the header family.
Desktop .NormalFooter mirrors .TopHeader (same surface + hairline,
links as hover-pill chips like the dropdown rows, seal in a soft tile);
the fixed mobile bar gets the same surface treatment.
====================================================================== */
.NormalFooter {
background: #191b21 !important; margin-top: 48px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
padding: 16px 24px;
}
.NormalFooter .container-fluid { padding: 0; }
.NormalFooter .row { display: flex; align-items: center; }
.NormalFooter .FooterLinks { margin: 0 !important; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.NormalFooter .FooterLinks > img { float: none !important; height: 28px; width: auto; flex: 0 0 auto; opacity: .95; }
.NormalFooter .FooterLinks ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 !important; padding: 0 !important; list-style: none; }
.NormalFooter .FooterLinks ul li { float: none !important; margin: 0 !important; padding: 0 !important; }
.NormalFooter .FooterLinks a {
display: inline-flex !important; align-items: center; height: 36px;
padding: 0 13px !important; margin: 0 !important;
border: 0 !important; border-radius: 10px;
color: #b9c2cf !important; font-size: 13px !important; font-weight: 500;
white-space: nowrap; transition: background .18s, color .18s;
}
.NormalFooter .FooterLinks a:hover { background: rgba(255,255,255,.06); color: #fff !important; }
/* hairline between the fastitem links and the gifkart cross-links */
.NormalFooter .FooterLinks .FooterSep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 6px !important; }
/* round 14 (2026-07-15): kill a 1px horizontal page scroll on phones —
the .TopHeader .row's -15px bootstrap margin poked past the 14px
container padding set in the ≤1280 media block; keep padding ≥ 15px */
@media (max-width: 991px) {
.TopHeader .container-fluid { padding: 0 16px !important; }
}
/* ======================================================================
round 15 (2026-07-15): mobile bottom bar redesigned as a real tab bar.
4 tabs (cart / inventory / direct-buy / support), icon + label, counts
as small green badges — same surface + hairline family as the header.
JS hooks preserved: #FooterCartFix (AddtoCartAnimate), #CardCount2,
#InventoryCount2, #HeaderBuyFromUser1 (OpaccityAnimation).
====================================================================== */
.FooterMobile {
background: rgba(25,27,33,.96) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,.07) !important;
padding-bottom: env(safe-area-inset-bottom);
}
.fsi-tabbar { display: flex; align-items: stretch; }
.fsi-tab {
flex: 1 1 0; display: flex !important; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
padding: 8px 0 7px !important; margin: 0 !important;
color: #aeb6c4 !important; border-radius: 12px;
transition: color .18s, background .18s;
}
.fsi-tab:active { color: #fff !important; background: rgba(255,255,255,.05); }
.fsi-tab-ico {
position: relative; display: inline-flex; align-items: center; justify-content: center;
height: 24px; padding: 0 !important;
}
.fsi-tab-ico img {
height: 21px !important; width: auto !important; max-width: 34px;
padding: 0 !important; margin: 0 !important; opacity: .9;
}
.fsi-tab-badge {
position: absolute; top: -5px; right: -10px;
min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
background: #62ab14; color: #fff; border-radius: 9px;
font-size: 10px; line-height: 17px; font-weight: 700; font-style: normal;
text-align: center; white-space: nowrap;
box-shadow: 0 0 0 2px #191b21;
}
.fsi-tab-lbl { font-size: 10.5px; font-weight: 500; line-height: 1; padding: 0 !important; }
/* neutralize the legacy .FooterCartFix span / .FooterMobile img rules on the new markup */
.FooterMobile .fsi-tab span { padding: 0; margin: 0; vertical-align: baseline; font-weight: 500; }
/* add-to-cart flash reads better as a soft pill on the tab */
.fsi-tab.AddtoCartAnimate { background: rgba(98,171,20,.16) !important; }
/* ======================================================================
round 16 (2026-07-15): HOMEPAGE joins the family (CSS-only, markup and
logic untouched): hero banners, section titles, item cards, CTA, arrows.
====================================================================== */
/* --- hero banner grid: rounded family tiles with a soft lift on hover --- */
.indexbanner img {
margin-top: 24px;
width: 100%;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
transition: transform .22s ease, box-shadow .22s ease;
}
.indexbanner a { display: block; }
.indexbanner a:hover img {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14);
}
/* --- section titles: family box + green "show all" chip --- */
.titrbakhat { margin: 52px 0 22px; }
.titrbakhat hr { border-color: rgba(255,255,255,.06); }
.titrbakhat p {
background: #1e2027;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 8px 10px 8px 18px;
font-size: 15px;
display: inline-flex; align-items: center; gap: 12px;
}
.titrbakhat p a {
color: #7dc41f; font-size: 13px; font-weight: 500;
margin: 0; padding: 6px 12px;
background: rgba(98,171,20,.12); border-radius: 8px;
transition: background .18s, color .18s;
}
.titrbakhat p a:hover { background: #62ab14; color: #fff; }
/* --- item cards: card surface + ring, lift on hover --- */
.BoxItem {
background: #1e2027;
border-radius: 16px;
padding: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
transition: transform .22s ease, box-shadow .22s ease;
}
.BoxItem:hover {
transform: translateY(-4px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 32px rgba(0,0,0,.35);
}
/* main item image bleeds edge-to-edge under the rounded top */
.BoxItem .boxitem_img_fast img {
margin: -12px -12px 0;
min-width: calc(100% + 24px);
border-radius: 15px 15px 0 0;
}
.BoxItem p { color: #8b93a3; font-size: 13px; margin: 16px 0 2px; }
.BoxItem h4 { font-size: 15px; }
/* price strip: darker inset panel of the same family */
.BoxItem .PriceBox {
background: #16181e;
border-radius: 10px;
padding: 9px 10px;
margin: 6px 0 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.price b { color: #f2f5fa; }
.price del { color: #8b93a3; font-size: 12px; }
/* lock/countdown + discount chips: flat, rounded, no hard shadows */
.TradeCD { border-radius: 8px; padding: 3px 6px; box-shadow: none; font-size: 12px; }
.OffPercent {
background: #e5484d; border-radius: 8px; padding: 2px 7px; box-shadow: none; font-weight: 700;
/* moved off the title row onto the image's top-right corner (never collides with long names) */
top: 10px; right: 10px; bottom: auto;
}
/* expand + liquipedia overlays: soft dark tiles */
.ExpandItem { background: rgba(0,0,0,.45); border-radius: 9px; padding: 4px 7px; top: 9px; text-shadow: none; }
.ExpandItem:hover { background: rgba(0,0,0,.7); }
.LiquipediaLink { background: rgba(0,0,0,.6); border-radius: 8px; border-bottom: none; padding: 5px 9px; bottom: 6px; right: 6px; }
/* CTA: keep the blue buy action, modern geometry */
.addtocart {
border-radius: 10px;
padding: 10px 0;
background: #2563eb;
font-weight: 500;
transition: filter .2s, transform .15s;
}
.addtocart:hover { filter: brightness(1.12); }
.addtocart:active { transform: scale(.98); }
/* slider arrows: circular family tiles (only visible on hover as before) */
.uk-position-relative > a[uk-slidenav-previous],
.uk-position-relative > a[uk-slidenav-next] {
background: rgba(25,27,33,.88);
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.4);
}
.uk-position-relative > a[uk-slidenav-previous]:hover,
.uk-position-relative > a[uk-slidenav-next]:hover { background: rgba(35,37,45,.95); color: #fff; }
/* ======================================================================
round 17 (2026-07-15): SHOP pages (CategoryProduct — /dota2 /csgo /tf2
/rust) join the family: filter sidebar, inputs/selects, hero grid,
pagination, ad banner. CSS-only; .sideCat also styles the mobile
filter offcanvas since it reuses the same class.
====================================================================== */
/* sidebar: detached family card instead of the bordered attached panel */
.sideCat {
background: #1b1d24;
border: 0;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
margin-top: 0;
padding: 18px 14px;
}
/* inside the mobile filter offcanvas the bar already has a surface — keep the card flat there */
.uk-offcanvas-bar .sideCat { box-shadow: none; background: transparent; padding: 0; }
/* text/search/price inputs: family field */
.sideCat input {
background: #16181e;
border: 0;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 10px 12px;
transition: box-shadow .18s;
}
.sideCat input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(98,171,20,.55); }
.sideCat input::placeholder { color: #77839a; }
/* selects (item type / rarity / stickers / sort) */
.sideCat select {
background: #16181e;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
margin-top: 14px;
padding: 11px 10px;
cursor: pointer;
transition: box-shadow .18s;
}
.sideCat select:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(98,171,20,.55); }
/* hero picker grid: rounded tiles, green selection ring (was orange border) */
.HeroSelectCat ul li img {
border: 0 !important;
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(255,255,255,.08);
opacity: .88;
object-fit: cover;
transition: opacity .15s, box-shadow .15s;
}
.HeroSelectCat ul li img:hover { opacity: 1; box-shadow: 0 0 0 2px rgba(98,171,20,.55); }
.HeroSelectCat input[type="radio"]:checked + label img {
border: 0 !important;
box-shadow: 0 0 0 2px #62ab14;
opacity: 1;
}
/* بازکردن / بستن toggle */
.sideCat .show-more,
.sideCat .show-more2 {
background: #23252d;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 8px;
cursor: pointer;
transition: background .18s;
}
.sideCat .show-more:hover,
.sideCat .show-more2:hover { background: #282b33; }
/* sidebar job/promo banner */
.FilterBanner img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.07); width: 100%; }
/* top ad banner (inc/Ads.php) */
.leagueTimetoStart img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
/* pagination: family chips w/ green hover (was orange squares) */
.pagenav span {
background: #23252d;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
color: #cdd4df;
padding: 9px 18px;
margin: 0 4px 80px;
transition: background .18s, color .18s;
}
.pagenav span:hover { background: #62ab14; color: #fff; }
/* ======================================================================
round 18 (2026-07-15): FILTER panel redesign (desktop sidebar + the
same markup inside the mobile filter offcanvas). CSS-only — all ids,
onchange/onclick hooks and the collapsed/expanded JS stay untouched.
====================================================================== */
/* panel title (pure CSS, no markup change) */
.sideCat::before {
content: 'فیلترها';
display: block;
color: #eef1f6; font-size: 15px; font-weight: 700;
padding: 0 2px 12px; margin-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
/* the legacy
spacers are dead — spacing is owned by CSS now */
.sideCat br { display: none; }
.sideCat > div { margin-top: 12px; }
/* section headers (انتخاب هیرو …): small muted label with a green accent bar */
.sideCat h4 {
font-size: 13px; color: #8b93a3; font-weight: 600;
margin: 4px 2px 10px;
display: flex; align-items: center; gap: 8px;
}
.sideCat h4::before {
content: ''; width: 3px; height: 14px;
background: #62ab14; border-radius: 3px; flex: 0 0 auto;
}
/* selects: custom chevron (RTL → arrow on the left), same field family */
.sideCat select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-color: #16181e;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b93a3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
background-size: 12px 7px;
padding: 11px 12px 11px 32px;
}
/* price range: the two fields sit tight as one group */
.sideCat > .row { margin: 14px -5px 0; }
.sideCat > .row [class*="col-"] { padding: 0 5px; }
/* hero picker: tidy grid rhythm under its search field */
.HeroSelectCat input#SearchHeroName { margin-bottom: 10px; }
.HeroSelectCat ul { margin: 0; }
.HeroSelectCat ul li img { margin: 0 0 6px 6px; }
.HeroSelectCat .list-toggle { padding-top: 4px; }
/* mobile-offcanvas checkbox filters: family toggle chips
(was orange #de7351 pills with a glow when checked) */
.FilterOptions label {
background: #23252d;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
color: #cdd4df;
padding: 12px 0;
margin-top: 12px;
font-weight: 500;
cursor: pointer;
transition: background .18s, color .18s, box-shadow .18s;
}
.FilterOptions label:hover { background: #282b33; }
.FilterOptions input[type="checkbox"]:checked + label {
background: rgba(98,171,20,.16);
box-shadow: inset 0 0 0 1px #62ab14;
color: #fff;
}
.OptionMotema label { background: #23252d; }
/* ======================================================================
round 19 (2026-07-15): filter panel V2 — the polish pass.
1) active-filter signal: engaged fields get a green ring and the panel
title shows a live count (data-fsi-active set by cu.js)
2) hero picker becomes a real CSS grid (uniform, fills the panel width)
3) search fields: RTL-aligned text + inline search icon
4) بازکردن/بستن reads as a button, حذف tile reads as "clear"
====================================================================== */
/* 1 — active filters: green ring on the field + count in the title */
.sideCat select.fsi-active,
.sideCat input.fsi-active {
box-shadow: inset 0 0 0 1px rgba(125,196,31,.65) !important;
}
.sideCat[data-fsi-active]:not([data-fsi-active="0"])::before {
content: 'فیلترها (' attr(data-fsi-active) ' فعال)';
color: #7dc41f;
}
/* 2 — hero picker: uniform responsive grid instead of floats */
.HeroSelectCat ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: 6px;
}
.HeroSelectCat ul li { float: none !important; }
.HeroSelectCat ul li label { display: block; cursor: pointer; line-height: 0; }
.HeroSelectCat ul li img {
width: 100% !important; height: 36px !important;
margin: 0 !important; display: block; object-fit: cover;
}
.HeroSelectCat ul .clear { display: none; }
.HeroSelectCat .list-toggle { grid-column: 1 / -1; padding-top: 2px; }
/* the "clear hero" tile gets a red hover so it reads as remove */
#UncheckHeroFilter { cursor: pointer; }
#UncheckHeroFilter img:hover { box-shadow: 0 0 0 2px rgba(229,72,77,.65); opacity: 1; }
/* 3 — search fields: right-aligned + magnifier icon on the left edge */
.sideCat input[type="search"] {
text-align: right;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238b93a3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.4'/%3E%3Cpath d='M9.4 9.4L13 13'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
background-size: 14px;
padding-left: 34px;
}
/* 4 — بازکردن / بستن looks like a quiet button, not a field */
.sideCat .show-more,
.sideCat .show-more2 {
background: transparent;
box-shadow: none;
color: #7dc41f;
font-size: 13px; font-weight: 600;
padding: 9px;
border-radius: 10px;
}
.sideCat .show-more:hover,
.sideCat .show-more2:hover { background: rgba(98,171,20,.1); }
.sideCat .show-more2.expand::after { content: ' ▾'; font-size: 11px; }
.sideCat .show-more2.collapse::after { content: ' ▴'; font-size: 11px; }
/* tighter, even rhythm between the bare selects */
.sideCat > select { margin-top: 10px; }
.sideCat > select:first-of-type { margin-top: 16px; }
/* ======================================================================
round 20 (2026-07-15): filter panel V3 — the "کیف کنه" build.
cu.js injects: .fsi-head (title + live count + reset), .fsi-field
(label + control), .fsi-chips (tap chips replacing short selects).
====================================================================== */
/* the injected header replaces the CSS-only ::before title */
.sideCat::before,
.sideCat[data-fsi-active]:not([data-fsi-active="0"])::before { content: none; }
.fsi-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 2px 12px; margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.fsi-head b { color: #eef1f6; font-size: 15px; font-weight: 700; }
.fsi-head .fsi-count { color: #7dc41f; font-size: 12px; font-weight: 600; margin-right: 4px; }
.fsi-reset {
background: rgba(229,72,77,.12); color: #ff9484;
border: 0; border-radius: 8px; padding: 6px 11px;
font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
transition: background .18s, color .18s;
}
.fsi-reset:hover { background: rgba(229,72,77,.28); color: #fff; }
/* labeled field group */
.fsi-field { margin-top: 16px; }
.fsi-field .fsi-lbl {
display: flex; align-items: center; gap: 8px;
color: #8b93a3; font-size: 12.5px; font-weight: 600;
margin-bottom: 9px; padding: 0 2px;
}
.fsi-field .fsi-lbl::before {
content: ''; width: 3px; height: 13px;
background: #62ab14; border-radius: 3px; flex: 0 0 auto;
}
.fsi-field select { margin-top: 0 !important; }
/* tap chips */
.fsi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fsi-chip {
background: #23252d;
border: 0; border-radius: 9px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
color: #c3ccd8; font-size: 12.5px; font-weight: 500; font-family: inherit;
padding: 8px 13px; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
}
.fsi-chip:hover { background: #282b33; color: #fff; }
.fsi-chip.on {
background: rgba(98,171,20,.16);
box-shadow: inset 0 0 0 1px #62ab14;
color: #fff;
}
/* hero section header matches the new field labels */
.sideCat h4 { font-size: 12.5px; margin: 16px 2px 9px; }
.sideCat h4::before { height: 13px; }
/* ======================================================================
round 21 (2026-07-15): shop polish — kill the dead space in cards,
tame the sidebar banner, family-box the page title, tighter chips.
====================================================================== */
/* 1 — cards become flex columns: title takes what it needs, the price
strip + CTA anchor to the bottom, no reserved empty line */
.BoxItem { display: flex; flex-direction: column; min-height: 380px; }
.BoxItem p { margin: 14px 0 4px; }
.BoxItem h4 { height: auto; min-height: 23px; margin: 0; }
.BoxItem .PriceBox { margin: auto 0 12px; }
.BoxItem .boxitem_img_fast { flex: 0 0 auto; }
/* absolutes (badges/overlays) are unaffected by the flex flow */
/* 2 — the sidebar promo banner sits quietly instead of dominating */
.FilterBanner { margin-top: 18px; text-align: center; }
.FilterBanner img {
max-width: 64%;
margin: 0 auto;
display: inline-block;
opacity: .8;
transition: opacity .2s, transform .2s;
}
.FilterBanner a:hover img { opacity: 1; transform: translateY(-2px); }
/* 3 — page title («آیتم TF2 (۴۱۳ آیتم)») joins the family boxes */
.col-lg-9 .col-md-4 > h1 {
display: inline-flex; align-items: baseline; gap: 8px;
background: #1e2027;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 10px 16px;
font-size: 15px;
margin: 18px 0 8px;
white-space: nowrap;
}
.FindCount { font-size: 12.5px; }
/* 5 — chips breathe a touch tighter so rows wrap less */
.fsi-chip { padding: 8px 11px; font-size: 12px; }
/* ======================================================================
round 22 (2026-07-15): BOLD pass — premium-gaming item cards +
glassmorphism filter panel. CSS-only; every id/hook untouched.
====================================================================== */
/* ---------- ITEM CARDS ---------- */
.BoxItem {
background: linear-gradient(160deg, #23252e 0%, #191b21 100%);
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.25);
transition: transform .25s ease, box-shadow .25s ease;
}
.BoxItem:hover {
transform: translateY(-6px);
box-shadow:
inset 0 0 0 1px rgba(98,171,20,.4),
0 22px 44px rgba(0,0,0,.5),
0 0 34px rgba(98,171,20,.08);
}
/* image stage: clipped container + slow zoom on hover, soft spotlight */
.BoxItem .boxitem_img_fast {
overflow: hidden;
border-radius: 17px 17px 0 0;
margin: -12px -12px 0;
background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.05), transparent 70%);
}
.BoxItem .boxitem_img_fast img {
margin: 0 !important;
min-width: 100% !important;
border-radius: 0 !important;
display: block;
transition: transform .4s ease;
}
.BoxItem:hover .boxitem_img_fast img { transform: scale(1.07); }
/* type/hero overline + heavier title */
.BoxItem p {
font-size: 11px !important;
letter-spacing: .4px;
text-transform: uppercase;
color: #6f7b90 !important;
}
.BoxItem h4 { font-weight: 700 !important; font-size: 15px !important; }
/* price is the star */
.BoxItem .PriceBox {
background: rgba(0,0,0,.3);
border-radius: 12px;
padding: 10px 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}
.price b { font-size: 20px !important; font-weight: 800 !important; }
.TradeCDFori {
border-radius: 9px !important;
font-weight: 700;
box-shadow: 0 0 14px rgba(98,171,20,.35) !important;
}
.OffPercent {
background: linear-gradient(135deg, #e5484d, #ff5f64);
box-shadow: 0 4px 14px rgba(229,72,77,.4);
}
/* CTA: gradient + light-sweep on hover */
.addtocart {
background: linear-gradient(135deg, #2160e4, #3f7dff);
border-radius: 12px;
font-weight: 600;
position: relative;
overflow: hidden;
}
.addtocart::after {
content: '';
position: absolute; top: 0; left: -90px;
width: 60px; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
transform: skewX(-20deg);
transition: left .5s ease;
}
.addtocart:hover::after { left: calc(100% + 30px); }
.addtocart:hover { filter: brightness(1.07); }
/* color variants keep their identity (delete/approve buttons etc.) */
.addtocart.RedButtton { background: #c52414 !important; }
.addtocart.GreenButtton { background: #62ab14 !important; }
/* ---------- FILTER PANEL: glass ---------- */
.sideCat {
background: rgba(27,29,36,.72);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 34px rgba(0,0,0,.35);
}
.uk-offcanvas-bar .sideCat {
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* header: bigger title + green gradient hairline (RTL: fades leftward) */
.fsi-head {
border-bottom: 1px solid transparent;
border-image: linear-gradient(to left, #62ab14, rgba(255,255,255,.06) 45%) 1;
}
.fsi-head b { font-size: 16px; }
.fsi-reset::before { content: '✕ '; font-size: 10px; }
/* fields: a size up, glowing focus */
.sideCat input[type="search"] { padding: 12px 12px 12px 34px; border-radius: 12px; font-size: 13.5px; }
.sideCat select { border-radius: 12px; }
.sideCat input:focus,
.sideCat select:focus {
box-shadow: inset 0 0 0 1px rgba(125,196,31,.7), 0 0 18px rgba(98,171,20,.14) !important;
}
/* chips: springy press + glowing gradient when active */
.fsi-chip { border-radius: 10px; transition: background .15s, color .15s, box-shadow .15s, transform .12s; }
.fsi-chip:active { transform: scale(.94); }
.fsi-chip.on {
background: linear-gradient(135deg, #58a011, #74c11c);
box-shadow: 0 4px 16px rgba(98,171,20,.35);
color: #fff;
}
/* hero tiles: zoom-in hover, glowing selection */
.HeroSelectCat ul li { overflow: hidden; border-radius: 8px; }
.HeroSelectCat ul li img { transition: transform .2s ease, opacity .15s, box-shadow .15s; }
.HeroSelectCat ul li:hover img { transform: scale(1.12); }
.HeroSelectCat input[type="radio"]:checked + label img {
box-shadow: 0 0 0 2px #62ab14, 0 0 14px rgba(98,171,20,.5);
}
/* ======================================================================
round 23 (2026-07-15): in-site item preview modal
====================================================================== */
.fsi-preview-modal {
background: #1b1d24 !important;
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6);
color: #eef1f6;
max-width: 560px;
direction: rtl;
}
.fsi-preview-modal h4 {
color: #fff; font-size: 16px; font-weight: 700;
margin: 0 30px 14px 0; text-align: left; direction: ltr;
}
.fsi-preview-modal #FsiPvStage img {
width: 100%; display: block; border-radius: 12px;
background:
radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.06), transparent 70%),
#16181e;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fsi-preview-modal #FsiPvStage video {
width: 100%; max-height: 340px; display: block; border-radius: 12px;
background: #000;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* thumbnail strip */
.fsi-preview-modal #FsiPvThumbs {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.fsi-pv-th {
width: 76px; height: 52px; padding: 0; border: 0; border-radius: 9px;
overflow: hidden; cursor: pointer;
background: #23252d;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
color: #9aa4b5; font-family: inherit;
transition: box-shadow .15s, color .15s;
}
.fsi-pv-th img { width: 100%; height: 100%; object-fit: cover; }
.fsi-pv-th .fsi-pv-play { color: #7dc41f; font-size: 13px; line-height: 1; }
.fsi-pv-th i { font-style: normal; font-size: 9.5px; line-height: 1; }
.fsi-pv-th:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.fsi-pv-th.on { box-shadow: 0 0 0 2px #62ab14; color: #fff; }
/* ======================================================================
round 25 (2026-07-16): item card V2 — the single merged buytemp gets
the full bold treatment: cinematic image scrim, floating hero chip,
green preview FAB, oversized unboxed price, glowing CTA.
====================================================================== */
.BoxItem {
border-radius: 20px;
background: linear-gradient(165deg, #262933 0%, #17191f 72%);
min-height: 372px;
}
.BoxItem .boxitem_img_fast { border-radius: 19px 19px 0 0; }
/* cinematic fade at the bottom of the artwork */
.BoxItem .boxitem_img_fast::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
background: linear-gradient(180deg, transparent, rgba(19,20,25,.8));
pointer-events: none;
}
/* preview: icon-only round FAB on the artwork (round 26: label moved to tooltip) */
.LiquipediaLink {
z-index: 2;
bottom: 10px !important; right: 10px !important;
width: 34px; height: 34px;
display: inline-flex !important; align-items: center; justify-content: center;
background: rgba(98,171,20,.92) !important;
border-radius: 50% !important;
padding: 0 !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background .18s, transform .15s;
}
.LiquipediaLink:hover { background: #74c11c !important; transform: translateY(-2px) scale(1.06); }
.LiquipediaLink .uk-icon svg { width: 15px; height: 15px; margin-left: 2px; }
/* فوری: tiny compact text pill (round 26b/c — plain word, hard-left, no glow) */
.TradeCDFori {
display: inline-flex !important; align-items: center; justify-content: center;
width: auto; height: auto;
padding: 4px 10px !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #58a011, #7cc722) !important;
color: #fff;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
box-shadow: none !important;
cursor: default;
}
/* align the pill's left edge with the CONTENT line (same x as the title
and the CTA button) — PriceBox is direction:rtl, so LEFT = flex-END;
the col's default 15px padding lands it exactly on the 12px card
padding line (col starts at -3 because of the row's -15 margins) */
.BoxItem .PriceBox .floatLeft {
display: flex; align-items: center; justify-content: flex-end;
}
/* ======================================================================
round 27 (2026-07-16): SINGLE-PRODUCT page joins the family.
Seller rows = family cards, offers box = family card, aligned columns.
====================================================================== */
/* list header replaces the old dead 100px gap */
.SingleSellerItems { margin-top: 20px; }
.fsi-sellers-head {
display: inline-flex; align-items: baseline; gap: 8px;
background: #1e2027;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
color: #eef1f6; font-size: 15px; font-weight: 700;
padding: 10px 16px;
margin: 0 0 14px;
}
.fsi-sellers-head span { color: #8b93a3; font-size: 12px; font-weight: 500; }
/* seller rows: family cards with tiled thumb + aligned cells */
.SellerItem {
background: #1e2027;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
padding: 10px 12px;
margin-bottom: 10px;
transition: box-shadow .18s, transform .18s;
}
.SellerItem:hover {
box-shadow: inset 0 0 0 1px rgba(98,171,20,.35), 0 8px 22px rgba(0,0,0,.3);
transform: translateY(-2px);
}
.SellerItem .row { display: flex; align-items: center; }
.SellerItem .row [class*="col-"] { float: none; }
.SellerItem img {
margin: 0;
max-height: 52px; width: auto;
background: #16181e;
border-radius: 10px;
padding: 4px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.SellerItem .price b { font-size: 18px; color: #f2f5fa; }
.SellerItem .TradeLocks {
display: inline-block;
background: rgba(98,171,20,.14);
color: #8ed045;
border-radius: 8px;
padding: 5px 11px;
font-size: 12px; font-weight: 600;
}
.SellerItem .addtocart { margin: 0; padding: 9px 0; font-size: 13px; }
.SellerItem .OffPercent { position: static; margin: 0 6px; }
/* offers / bid box + the title column */
.titleSingle h1 { font-size: 18px; font-weight: 700; height: auto; margin: 18px 0 12px; }
.titleSingle .Box {
background: #1b1d24;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 16px 14px;
margin-top: 16px;
}
.titleSingle .Box h3 {
display: flex; align-items: center; gap: 8px;
color: #8b93a3; font-size: 13px; font-weight: 600;
margin: 0 0 12px;
}
.titleSingle .Box h3::before {
content: ''; width: 3px; height: 14px;
background: #62ab14; border-radius: 3px; flex: 0 0 auto;
}
.titleSingle .Box hr { border-top: 1px solid rgba(255,255,255,.06); margin: 16px 0; }
.titleSingle .Box input {
width: 100%;
background: #16181e;
border: 0; border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
color: #fff;
padding: 10px 12px;
transition: box-shadow .18s;
}
.titleSingle .Box input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(98,171,20,.55); }
.titleSingle .Box .addtocart { padding: 10px 0; }
.titleSingle .Box table { width: 100%; background: transparent; }
.titleSingle .Box table td { padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.05); color: #cdd4df; }
/* round 28: inline preview gallery on the single-product page */
#FsiSmStage video, #FsiSmStage img {
width: 100%; display: block; border-radius: 12px;
background: #000;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
#FsiSmThumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* ======================================================================
round 29 (2026-07-16): filter V4 — accordion sections. Each summary
carries the section name + its live value (green); active sections
get a green ring and open automatically.
====================================================================== */
.sideCat .fsi-acc { margin-top: 10px; }
.fsi-acc {
background: #16181e;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.fsi-acc.fsi-acc-on { box-shadow: inset 0 0 0 1px rgba(98,171,20,.45); }
.fsi-acc summary {
list-style: none;
display: flex; align-items: center; gap: 8px;
padding: 12px 13px;
cursor: pointer;
color: #c3ccd8; font-size: 13px; font-weight: 600;
-webkit-user-select: none; user-select: none;
transition: color .15s;
}
.fsi-acc summary::-webkit-details-marker { display: none; }
.fsi-acc summary > span { flex: 1 1 auto; }
.fsi-acc summary:hover, .fsi-acc[open] summary { color: #fff; }
.fsi-acc-val {
color: #7dc41f; font-size: 11.5px; font-weight: 600;
max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
direction: ltr;
}
.fsi-acc summary::after {
content: '▾'; color: #6f7b90; font-size: 11px; flex: 0 0 auto;
transition: transform .2s;
}
.fsi-acc[open] summary::after { transform: rotate(180deg); }
.fsi-acc-body { padding: 2px 12px 12px; }
.fsi-acc-body .fsi-field { margin-top: 0; }
.fsi-acc-body .row { margin: 0 -5px !important; }
.fsi-acc-body .row [class*="col-"] { padding: 0 5px; }
.fsi-acc-body select { background-color: #1b1d24; }
.fsi-acc-body .HeroSelectCat input { margin-bottom: 8px; }
/* sort sits inline right under the search box */
.fsi-sort-inline { margin-top: 12px !important; }
/* ======================================================================
round 31 (V6 — calm & minimal): each filter is one quiet row —
muted label on the right, control on the left; chip groups stack.
No accent bars, no glows: whitespace does the work.
====================================================================== */
.sideCat .fsi-field { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.sideCat .fsi-field .fsi-lbl {
flex: 0 0 auto; width: 74px;
display: block; margin: 0; padding: 0;
color: #8b93a3; font-size: 12px; font-weight: 500;
}
.fsi-field .fsi-lbl::before { content: none; } /* no accent bars — minimal */
.sideCat h4::before { content: none; }
.fsi-lbl-val { display: block; color: #7dc41f; font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.sideCat .fsi-field .fsi-ctl { flex: 1 1 auto; min-width: 0; }
.sideCat .fsi-field .fsi-ctl select { margin-top: 0 !important; width: 100%; }
/* chip fields (sort / نوع خرید) stack: label line, chips underneath */
.sideCat .fsi-field.fsi-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.sideCat .fsi-field.fsi-stack .fsi-lbl { width: auto; display: flex; align-items: baseline; gap: 6px; }
.sideCat .fsi-field.fsi-stack .fsi-lbl-val { margin: 0; }
/* price: label + the two fields on one line */
.fsi-price .row { margin: 0 -4px !important; display: flex; }
.fsi-price .row [class*="col-"] { padding: 0 4px; flex: 1 1 0; width: auto; float: none; }
.fsi-price input { padding: 9px 8px; font-size: 12.5px; }
/* quieter chips */
.fsi-chip { padding: 7px 11px; font-size: 11.5px; border-radius: 8px; }
.fsi-chip.on { box-shadow: inset 0 0 0 1px #62ab14; background: rgba(98,171,20,.15); }
/* calmer hero block */
.sideCat h4 { margin: 18px 2px 8px; }
/* round 32: bigger controls + clearer contrast (fields were sinking
into the panel — #16181e on #1b1d24 was nearly invisible) */
.sideCat input,
.sideCat select {
background-color: #23262f !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.13) !important;
color: #fff;
font-size: 13px;
}
.sideCat input { padding: 12px 13px; }
.sideCat input[type="search"] { padding: 13px 13px 13px 36px; }
.sideCat select { padding: 13px 12px 13px 32px; }
.sideCat input::placeholder { color: #96a0b1; }
.sideCat .fsi-field .fsi-lbl { color: #b6bfcd; font-size: 12.5px; }
.fsi-price input { padding: 12px 10px; font-size: 13px; }
.fsi-chip {
background: #262a33;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
color: #dfe5ee;
font-size: 12px;
padding: 8px 12px;
}
.sideCat input:focus,
.sideCat select:focus {
box-shadow: inset 0 0 0 1px rgba(125,196,31,.75) !important;
}
/* ======================================================================
round 33 (2026-07-16): MOBILE filter offcanvas — its own layout.
The desktop label-beside-control rows don't fit a 270px drawer:
wider padded bar, every label ABOVE its full-width control,
compact checkbox chips, no promo banner.
====================================================================== */
#offcanvas-nav-filter .uk-offcanvas-bar {
width: 320px !important;
padding: 18px 16px !important;
background: #1b1d24 !important;
}
#offcanvas-nav-filter .sideCat { padding: 0 !important; }
/* stack every field: label line on top, control full width */
#offcanvas-nav-filter .fsi-field {
flex-direction: column !important;
align-items: stretch !important;
gap: 7px !important;
margin-top: 16px !important;
}
#offcanvas-nav-filter .fsi-field .fsi-lbl {
width: auto !important;
display: flex !important; align-items: baseline; gap: 6px;
}
#offcanvas-nav-filter .fsi-field .fsi-lbl-val { margin: 0; }
/* compact checkbox rows (BattlePass / تخفیف) */
#offcanvas-nav-filter .FilterOptions label {
padding: 11px 12px !important;
font-size: 12.5px !important;
border-radius: 10px !important;
text-align: right !important;
margin-top: 10px !important;
}
/* hero block breathes */
#offcanvas-nav-filter .HeroSelectCat ul { gap: 7px; }
/* the promo banner has no business inside the mobile filter drawer */
#offcanvas-nav-filter .FilterBanner { display: none !important; }
/* ======================================================================
round 34 (2026-07-16): CART redesign + a gentle global .Table2 facelift
(Table2 is used across ~20 templates — only safe visual props there;
the full treatment is scoped to .fsi-cart)
====================================================================== */
.Table2 {
background: #1e2027;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
padding: 6px 10px;
}
.Table2 tr { border-top: 1px solid rgba(255,255,255,.05); }
.Table2 tr td { padding: 12px 6px; }
/* cart page */
.fsi-cart .fsi-cart-title {
display: inline-flex; align-items: baseline; gap: 8px;
background: #1e2027;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 10px 16px;
font-size: 16px; font-weight: 700; color: #fff;
margin: 24px 0 14px;
}
.fsi-cart .fsi-cart-title span { color: #8b93a3; font-size: 12.5px; font-weight: 500; }
.fsi-cart .Table2 { text-align: right; }
.fsi-cart .Table2 tr img {
width: 72px;
border: 0;
background: #16181e;
border-radius: 10px;
padding: 4px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fsi-cart .Table2 .price { white-space: nowrap; }
.fsi-cart .Table2 .price b { font-size: 16px; color: #f2f5fa; }
.fsi-cart .Hazfesh {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: rgba(229,72,77,.12);
border-radius: 9px;
color: #ff9484 !important;
font-size: 14px !important;
text-shadow: none !important;
margin: 0 !important;
transition: background .18s, color .18s;
}
.fsi-cart .Hazfesh:hover { background: rgba(229,72,77,.3); color: #fff !important; }
/* summary strip: total + pay button in one family card */
.fsi-cart .Dtable2 {
display: flex; align-items: center; gap: 12px;
background: #1e2027;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 12px 14px;
margin: 14px 0 40px !important;
}
.fsi-cart .Dtable2 [class*="col-"] { float: none; padding: 0; width: auto; }
.fsi-cart .Dtable2 .col-md-9 { flex: 1 1 auto; }
.fsi-cart .Dtable2 .col-md-3 { flex: 0 0 auto; min-width: 170px; }
.fsi-cart .Dtable2 .ghabelePardakht {
margin: 0 !important; color: #8b93a3; font-size: 13px;
background: transparent !important; padding: 0 !important; text-align: right !important;
}
.fsi-cart .Dtable2 .ghabelePardakht b { font-size: 22px; color: #f2f5fa; margin: 0 4px; }
.fsi-cart .Dtable2 .addtocart { margin: 0 !important; padding: 12px 22px; }
/* on phones the summary wraps: total on top, full-width pay button under it */
@media (max-width: 600px) {
.fsi-cart .Dtable2 { flex-wrap: wrap; }
.fsi-cart .Dtable2 .col-md-3 { flex: 1 1 100%; min-width: 0; }
.fsi-cart .Dtable2 .addtocart { width: 100%; }
}
/* ======================================================================
round 35 (2026-07-16): PROFILE page — setting cards + toggle switches
====================================================================== */
.fsi-page-title {
display: inline-flex; align-items: baseline; gap: 8px;
background: #1e2027;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 10px 16px;
font-size: 16px !important; font-weight: 700; color: #fff;
margin: 24px 0 14px !important; height: auto !important;
}
.fsi-pcard {
background: #1e2027;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
padding: 16px;
margin-top: 14px;
}
.fsi-pcard-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
color: #eef1f6; font-size: 14px; font-weight: 700;
margin-bottom: 12px;
}
.fsi-pcard-hint { color: #7dc41f !important; font-size: 12px; font-weight: 500; }
.fsi-pcard-hint:hover { color: #9ae03c !important; }
.fsi-pcard-desc { color: #8b93a3; font-size: 12.5px; line-height: 2; margin: 0; }
.fsi-pcard-desc b { color: #cdd4df; font-weight: 700; }
.fsi-pcard-row { display: flex; gap: 8px; }
.fsi-pcard-row input:not(.addtocart) {
flex: 1 1 auto; min-width: 0;
background: #16181e;
border: 0; border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
color: #fff; padding: 11px 12px; margin: 0;
}
.fsi-pcard-row input::placeholder { color: #77839a; }
.fsi-pcard-row input:not(.addtocart):focus { outline: none; box-shadow: inset 0 0 0 1px rgba(125,196,31,.65); }
.fsi-pcard-row input.addtocart {
flex: 0 0 auto; width: auto;
padding: 11px 22px; cursor: pointer;
box-shadow: 0 8px 22px rgba(37,99,235,.22);
}
.fsi-verified {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(98,171,20,.12);
color: #8ed045;
border-radius: 10px;
padding: 10px 14px;
font-size: 13.5px; font-weight: 600;
}
.fsi-pcard-grid { display: flex; gap: 14px; }
.fsi-pcard-grid .fsi-pcard { flex: 1 1 0; }
.fsi-hidden-select { display: none !important; }
/* toggle switch */
.fsi-switch {
flex: 0 0 auto;
width: 46px; height: 26px;
border: 0; border-radius: 999px;
background: #30343e;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
position: relative; cursor: pointer; padding: 0;
transition: background .2s;
}
.fsi-switch i {
position: absolute; top: 3px; right: 3px;
width: 20px; height: 20px; border-radius: 50%;
background: #8b93a3;
transition: transform .2s, background .2s;
}
.fsi-switch.on { background: #62ab14; }
.fsi-switch.on i { transform: translateX(-20px); background: #fff; }
@media (max-width: 700px) {
.fsi-pcard-grid { flex-direction: column; }
.fsi-pcard-row { flex-wrap: wrap; }
.fsi-pcard-row input.addtocart { flex: 1 1 100%; }
}
/* ======================================================================
round 36 (2026-07-16): TASVIE (settlement) page
====================================================================== */
.fsi-tasvie .fsi-balance {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: linear-gradient(135deg, rgba(98,171,20,.12), transparent 60%), #1e2027;
}
.fsi-tasvie .fsi-balance-info { display: flex; flex-direction: column; gap: 4px; }
.fsi-tasvie .fsi-balance-info span { color: #8b93a3; font-size: 12.5px; }
.fsi-tasvie .fsi-balance-info b { color: #f2f5fa; font-size: 24px; font-weight: 800; }
.fsi-tasvie .fsi-balance-info b i { font-style: normal; font-size: 12px; color: #8b93a3; font-weight: 500; }
.fsi-tasvie .fsi-balance-info small { color: #b08c3f; font-size: 11.5px; }
.fsi-tasvie .fsi-balance-all {
flex: 0 0 auto;
background: rgba(98,171,20,.14);
color: #8ed045;
border: 0; border-radius: 10px;
padding: 9px 14px;
font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
transition: background .18s, color .18s;
}
.fsi-tasvie .fsi-balance-all:hover { background: #62ab14; color: #fff; }
/* the add-card pill in the form card header */
.fsi-tasvie .AddSheba {
display: inline-flex !important; align-items: center; gap: 6px;
width: auto !important;
background: rgba(98,171,20,.14) !important;
color: #8ed045 !important;
border-radius: 10px !important;
margin: 0 !important;
padding: 8px 13px !important;
font-size: 12.5px !important;
box-shadow: none !important;
}
.fsi-tasvie .AddSheba:hover { background: #62ab14 !important; color: #fff !important; }
/* amount input: big but family */
.fsi-tasvie .widthdrawinput {
width: 100%;
background: #16181e !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
color: #fff;
font-size: 26px !important;
font-weight: 700;
text-align: center;
padding: 14px 12px !important;
margin: 0 0 4px;
}
.fsi-tasvie .widthdrawinput:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(125,196,31,.65) !important; }
.fsi-tasvie .widthdrawsection select,
.fsi-tasvie select#ShebaSelect {
background-color: #16181e;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
margin-top: 12px;
}
.fsi-tasvie .SubmitWithdraw { margin-top: 12px !important; border-radius: 12px; }
/* tables: first row acts as the header */
.fsi-tasvie .Table2 { margin-top: 6px; }
.fsi-tasvie .Table2 tr:first-child td {
color: #eef1f6; font-weight: 700; font-size: 13.5px;
padding-bottom: 12px;
}
.fsi-tasvie .Table2 td { color: #cdd4df; font-size: 13px; }
/* status chips */
.fsi-st {
display: inline-block;
border-radius: 8px;
padding: 4px 10px;
font-size: 11.5px; font-weight: 600;
white-space: nowrap;
}
.fsi-st-wait { background: rgba(245,165,36,.13); color: #f0b25a; }
.fsi-st-ok { background: rgba(98,171,20,.13); color: #8ed045; }
.fsi-st-cancel { background: rgba(229,72,77,.13); color: #ff9484; }
/* notes card */
.fsi-tasvie .Nokte {
background: #1e2027;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
padding: 14px 16px;
margin: 14px 0 40px;
}
.fsi-tasvie .Nokte ul { margin: 0; padding: 0; list-style: none; }
.fsi-tasvie .Nokte ul li {
position: relative;
padding-right: 16px;
margin-bottom: 10px;
color: #8b93a3; font-size: 12.5px; line-height: 1.9;
}
.fsi-tasvie .Nokte ul li:last-child { margin-bottom: 0; }
.fsi-tasvie .Nokte ul li::before {
content: '';
position: absolute; right: 0; top: 9px;
width: 6px; height: 6px; border-radius: 50%;
background: #62ab14;
}
@media (max-width: 600px) {
.fsi-tasvie .fsi-balance { flex-wrap: wrap; }
.fsi-tasvie .fsi-pcard-head { flex-wrap: wrap; }
}
/* ======================================================================
round 37 (2026-07-16): TRANSACTIONS page — DataTable in family dress
====================================================================== */
.fsi-trans .fsi-pcard { padding: 14px 16px 16px; margin-bottom: 40px; overflow-x: auto; }
.fsi-trans #table_id { width: 100% !important; background: transparent; }
/* header row */
.fsi-trans #table_id thead th {
color: #8b93a3; font-size: 12px; font-weight: 600;
background: transparent;
border-bottom: 1px solid rgba(255,255,255,.08);
padding: 10px 12px;
}
/* body rows */
.fsi-trans #table_id tbody td {
color: #cdd4df; font-size: 13px;
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.04);
padding: 11px 12px;
}
.fsi-trans #table_id tbody tr { background: transparent !important; transition: background .15s; }
.fsi-trans #table_id tbody tr:hover,
.fsi-trans #table_id tbody tr:hover td { background: rgba(255,255,255,.03) !important; }
/* datatables v2 (.dt-*) controls: search + length as one tidy row */
.fsi-trans .dt-layout-row:not(.dt-layout-table) {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 2px 0 10px;
}
.fsi-trans .dt-search,
.fsi-trans .dt-length {
display: inline-flex; align-items: center; gap: 7px;
color: #8b93a3; font-size: 12.5px;
}
.fsi-trans .dt-search label,
.fsi-trans .dt-length label { margin: 0; color: #8b93a3; font-weight: 400; white-space: nowrap; }
.fsi-trans .dt-search input,
.fsi-trans .dt-length select {
background: #16181e !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
color: #fff !important;
padding: 8px 12px !important;
margin: 0 !important;
width: auto !important;
}
.fsi-trans .dt-search input:focus,
.fsi-trans .dt-length select:focus {
outline: none;
box-shadow: inset 0 0 0 1px rgba(125,196,31,.65) !important;
}
.fsi-trans .dt-info { color: #6f7b90; font-size: 11.5px; padding: 0; }
/* pagination buttons: family chips, current page green */
.fsi-trans .dt-paging { margin-top: 4px; }
.fsi-trans .dt-paging button.dt-paging-button {
background: #23252d !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
border: 0 !important;
border-radius: 9px !important;
color: #cdd4df !important;
font-size: 12px !important;
padding: 7px 12px !important;
margin: 0 2px !important;
cursor: pointer;
transition: background .15s, color .15s;
}
.fsi-trans .dt-paging button.dt-paging-button:hover:not(.disabled) { background: #282b33 !important; color: #fff !important; }
.fsi-trans .dt-paging button.dt-paging-button.current {
background: rgba(98,171,20,.16) !important;
box-shadow: inset 0 0 0 1px #62ab14;
color: #fff !important;
}
.fsi-trans .dt-paging button.dt-paging-button.disabled { opacity: .35; cursor: default; }
.fsi-trans .dataTables_filter input,
.fsi-trans .dataTables_length select {
background: #16181e !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
color: #fff !important;
padding: 8px 12px !important;
margin: 0 6px !important;
width: auto !important;
}
.fsi-trans .dataTables_filter input:focus,
.fsi-trans .dataTables_length select:focus {
outline: none;
box-shadow: inset 0 0 0 1px rgba(125,196,31,.65) !important;
}
/* pagination: family chips, current page green */
.fsi-trans .dataTables_paginate { margin-top: 14px; text-align: center; }
.fsi-trans .dataTables_paginate a {
display: inline-block;
background: #23252d !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
border: 0 !important;
border-radius: 9px !important;
color: #cdd4df !important;
font-size: 12px !important;
padding: 7px 12px !important;
margin: 0 3px !important;
cursor: pointer;
transition: background .15s, color .15s;
}
.fsi-trans .dataTables_paginate a:hover { background: #282b33 !important; color: #fff !important; }
.fsi-trans .dataTables_paginate a.current {
background: rgba(98,171,20,.16) !important;
box-shadow: inset 0 0 0 1px #62ab14;
color: #fff !important;
}
.fsi-trans .dataTables_paginate a.disabled { opacity: .4; cursor: default; }
.fsi-trans .dataTables_info { color: #6f7b90; font-size: 11.5px; }
.fsi-trans .dataTables_empty { color: #8b93a3 !important; padding: 30px 0 !important; }
/* ======================================================================
round 38 (2026-07-16): INVENTORY page
====================================================================== */
.fsi-inv-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.fsi-sell-link {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(98,171,20,.14);
color: #8ed045 !important;
border-radius: 10px;
padding: 9px 14px;
font-size: 12.5px; font-weight: 600;
transition: background .18s, color .18s;
}
.fsi-sell-link:hover { background: #62ab14; color: #fff !important; }
/* MyItems DataTable extras: image column tiles, control cells centered */
.fsi-myitems #table_id img {
width: 60px;
background: #16181e;
border-radius: 10px;
padding: 3px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fsi-myitems #table_id td { vertical-align: middle; }
.fsi-myitems #table_id .addtocart {
width: auto; display: inline-flex; align-items: center; gap: 5px;
padding: 7px 13px; font-size: 12px; margin: 0; border-radius: 9px; white-space: nowrap;
}
.fsi-myitems #table_id input {
background: #16181e; border: 0; border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
color: #fff; padding: 7px 9px; width: 90px; text-align: center;
}
.fsi-inventory .Table2 { text-align: right; }
.fsi-inventory .Table2 tr img {
width: 72px;
border: 0;
background: #16181e;
border-radius: 10px;
padding: 4px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fsi-inventory .Table2 td { color: #cdd4df; font-size: 13px; }
.fsi-inventory .Table2 .addtocart {
width: auto;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
font-size: 12.5px;
margin: 0;
border-radius: 10px;
white-space: nowrap;
}
/* the countdown (not-yet-tradable) state reads as an amber chip, not a dead button */
.fsi-inventory .Table2 .addtocart[disabled] {
background: rgba(245,165,36,.13) !important;
color: #f0b25a !important;
box-shadow: none !important;
cursor: default;
opacity: 1;
}
/* ======================================================================
round 39 (2026-07-16): SELL ITEM (insertitem) page
====================================================================== */
/* game chooser tiles */
.fsi-sell-choose .htitle { margin-bottom: 6px; }
.fsi-game-tile { cursor: pointer; }
.fsi-game-tile img {
width: 100%;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
transition: transform .22s ease, box-shadow .22s ease;
}
.fsi-game-tile:hover img {
transform: translateY(-5px);
box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(98,171,20,.45);
}
/* offer-sent card */
.fsi-selloffer .fsi-pcard p { color: #8b93a3; font-size: 13.5px; margin: 6px 0; }
.fsi-selloffer .fsi-pcard b { color: #f2f5fa; }
.fsi-selloffer .SubmitWithdraw { border-radius: 12px; }
/* the send-for-sale CTA (capital-A .AddToCart class, unique to this page) */
#SendForSell {
display: inline-flex; align-items: center; gap: 8px;
width: 100%; justify-content: center;
background: linear-gradient(135deg, #58a011, #74c11c);
color: #fff;
border: 0; border-radius: 12px;
padding: 12px 0;
font-size: 14px; font-weight: 600; font-family: inherit;
cursor: pointer;
box-shadow: 0 8px 22px rgba(98,171,20,.25);
transition: filter .2s;
}
#SendForSell:hover { filter: brightness(1.08); }
/* selected-items table on this page */
#addtocarttable { text-align: right; }
#addtocarttable:empty, #addtocarttable tbody:empty { display: none; }
#addtocarttable img { width: 64px; border-radius: 10px; background: #16181e; padding: 4px; }
/* ======================================================================
round 42 (2026-07-16): FAQ page — family accordion
====================================================================== */
.fsi-faq .fsi-pcard { margin-bottom: 40px; }
.fsi-faq [uk-accordion] { margin: 0; padding: 0; list-style: none; }
.fsi-faq [uk-accordion] > li {
background: #16181e;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
margin: 0 0 8px !important;
padding: 0;
overflow: hidden;
transition: box-shadow .18s;
}
.fsi-faq [uk-accordion] > li.uk-open { box-shadow: inset 0 0 0 1px rgba(98,171,20,.4); }
.fsi-faq .uk-accordion-title {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 16px;
color: #cdd4df !important;
font-size: 14px; font-weight: 600;
transition: color .15s;
}
.fsi-faq .uk-accordion-title::after { display: none !important; }
.fsi-faq .uk-accordion-title::before {
content: '▾';
order: 2;
color: #6f7b90; font-size: 12px;
background: none !important; width: auto !important; height: auto !important; margin: 0 !important;
transition: transform .2s, color .2s;
}
.fsi-faq li.uk-open .uk-accordion-title { color: #fff !important; }
.fsi-faq li.uk-open .uk-accordion-title::before { transform: rotate(180deg); color: #7dc41f; }
.fsi-faq .uk-accordion-content {
padding: 2px 16px 16px;
margin: 0;
color: #8b93a3; font-size: 13px; line-height: 2.1;
}
.fsi-faq .uk-accordion-content p { color: #8b93a3; }
.fsi-faq .uk-accordion-content h3 { color: #eef1f6; font-size: 14px; margin: 4px 0 10px; }
.fsi-faq .uk-accordion-content a { color: #7dc41f; }
.fsi-faq .uk-accordion-content a:hover { color: #9ae03c; }
.fsi-faq .uk-accordion-content img {
max-width: 100%; height: auto;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}
.fsi-faq .uk-accordion-content ul { padding-right: 18px; }
.fsi-faq .uk-accordion-content ul li { margin-bottom: 6px; list-style: disc; }
/* nested legacy .Box inside answers goes flat */
.fsi-faq .uk-accordion-content .Box { background: transparent; border-radius: 0; padding: 0; }
/* aparat video embeds */
.fsi-faq .uk-accordion-content [id] iframe { border-radius: 10px; }
/* ======================================================================
round 44 (2026-07-16): CHARGE + GIFT-CODE modals — bold redesign
====================================================================== */
.fsi-charge-modal {
background: #1b1d24 !important;
border-radius: 20px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6) !important;
color: #eef1f6;
max-width: 440px;
direction: rtl;
padding: 26px 22px 22px !important;
}
.fsi-charge-modal .uk-modal-close-default { color: #8b93a3; }
.fsi-charge-h { color: #fff; font-size: 18px; font-weight: 800; margin: 0 0 16px; text-align: center; }
/* current-balance strip */
.fsi-charge-balance {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, rgba(98,171,20,.15), transparent 65%), #23262f;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 14px 16px; margin-bottom: 18px;
}
.fsi-charge-balance span { color: #8b93a3; font-size: 12.5px; }
.fsi-charge-balance b { color: #f2f5fa; font-size: 20px; font-weight: 800; }
.fsi-charge-balance b i { font-style: normal; font-size: 11px; color: #8b93a3; font-weight: 500; }
.fsi-charge-lbl { display: block; color: #b6bfcd; font-size: 12.5px; font-weight: 600; margin: 0 2px 8px; }
.fsi-charge-modal .fsi-charge-amount {
width: 100%;
background: #16181e !important;
border: 0 !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
color: #fff !important; font-size: 22px !important; font-weight: 700;
text-align: center; padding: 14px 12px !important; margin: 0;
}
.fsi-charge-modal .fsi-charge-amount:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(125,196,31,.7) !important; }
.fsi-charge-modal .fsi-charge-amount::placeholder { color: #77839a; font-size: 15px; font-weight: 500; }
/* quick-amount chips */
.fsi-charge-quick { display: flex; gap: 8px; margin: 12px 0 18px; }
.fsi-charge-quick button {
flex: 1 1 0;
background: #23262f; border: 0; border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
color: #cdd4df; font-size: 12.5px; font-weight: 600; font-family: inherit;
padding: 9px 0; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
}
.fsi-charge-quick button:hover { background: #282b33; color: #fff; }
.fsi-charge-quick button.on { background: rgba(98,171,20,.16); box-shadow: inset 0 0 0 1px #62ab14; color: #fff; }
/* pay button */
.fsi-charge-modal .fsi-charge-pay {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 0 !important; margin: 0 !important;
border-radius: 12px; font-size: 15px; font-weight: 700;
box-shadow: 0 8px 22px rgba(37,99,235,.28);
}
.fsi-charge-modal .fsi-charge-pay i { font-size: 18px; }
/* alternative methods: wallet gift-code + buy gift-code */
.fsi-charge-alts { display: flex; gap: 10px; margin: 16px 0 6px; }
.fsi-charge-alt {
flex: 1 1 0;
display: flex; align-items: center; gap: 10px;
background: #23262f; border: 0; border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 13px; cursor: pointer; text-align: right;
transition: background .18s, box-shadow .18s;
}
.fsi-charge-alt:hover { background: #282b33; box-shadow: inset 0 0 0 1px rgba(98,171,20,.4); }
.fsi-charge-alt i {
flex: 0 0 auto; width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(98,171,20,.14); color: #8ed045;
border-radius: 11px; font-size: 18px;
}
.fsi-charge-alt span { display: flex; flex-direction: column; gap: 3px; color: #8b93a3; font-size: 11px; line-height: 1.5; }
.fsi-charge-alt b { color: #eef1f6; font-size: 13px; font-weight: 700; }
/* notes */
.fsi-charge-notes { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.fsi-charge-notes p {
position: relative; padding-right: 16px; margin: 0 0 8px;
color: #8b93a3; font-size: 11.5px; line-height: 1.9;
}
.fsi-charge-notes p:last-child { margin-bottom: 0; }
.fsi-charge-notes p span { position: absolute; right: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #62ab14; }
.fsi-charge-notes b { color: #cdd4df; }
/* gift-code modal specifics */
.fsi-redeem-hero {
width: 66px; height: 66px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
background: rgba(98,171,20,.14); color: #8ed045;
border-radius: 50%; font-size: 30px;
}
.fsi-redeem-sub { text-align: center; color: #8b93a3; font-size: 12.5px; margin: 0 0 18px; }
.fsi-redeem-modal .fsi-charge-amount { direction: ltr; letter-spacing: 2px; }
.fsi-charge-back {
width: 100%; margin-top: 14px;
display: flex; align-items: center; justify-content: center; gap: 6px;
background: transparent; border: 0;
color: #8b93a3; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
transition: color .15s;
}
.fsi-charge-back:hover { color: #fff; }
/* empty state */
.fsi-cart-empty {
background: #1e2027;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
padding: 44px 20px;
text-align: center;
margin-bottom: 40px;
}
.fsi-cart-empty i { font-size: 44px; color: #3a4150; display: block; margin-bottom: 12px; }
.fsi-cart-empty p { color: #8b93a3; font-size: 15px; margin: 0 0 18px; }
.fsi-cart-empty .addtocart { display: inline-block; width: auto; padding: 11px 26px; }
/* the fori fire glyph ships with a BLACK pill baked into the PNG —
screen-blend turns the black transparent on the blue button */
.addtocart img {
height: 16px !important; width: auto !important;
vertical-align: middle; margin: 0 2px !important;
mix-blend-mode: screen;
}
/* hero/type name: floating glass chip overlapping the artwork edge */
.BoxItem p {
display: inline-block;
align-self: flex-start; /* the card is a flex column — stop the chip stretching full-width */
position: relative; z-index: 2;
margin: -13px 0 4px !important;
background: rgba(10,11,14,.62);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
padding: 5px 9px;
color: #cdd5e1 !important;
}
.BoxItem h4 { font-size: 16px !important; }
/* price: oversized, unboxed */
.BoxItem .PriceBox {
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 4px 0 2px;
}
.price b { font-size: 22px !important; }
.price del { opacity: .65; }
/* CTA: colored glow that intensifies with the card hover */
.addtocart {
padding: 11px 0;
border-radius: 13px;
font-size: 14px;
box-shadow: 0 8px 22px rgba(37,99,235,.22);
}
.BoxItem:hover .addtocart { box-shadow: 0 10px 28px rgba(37,99,235,.42); }
.addtocart.GreenButtton { box-shadow: 0 8px 22px rgba(98,171,20,.25) !important; }
.addtocart.RedButtton { box-shadow: 0 8px 22px rgba(197,36,20,.25) !important; }
.fsi-preview-modal .fsi-pv-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 14px; font-size: 12px; color: #8b93a3;
}
.fsi-preview-modal .fsi-pv-foot a { color: #7dc41f; white-space: nowrap; }
.fsi-preview-modal .fsi-pv-foot a:hover { color: #9ae03c; }
.fsi-preview-modal .uk-modal-close-default { color: #8b93a3; }
/* enamad seal in a soft tile, vertically centered on the row's far side */
.NormalFooter .namad { padding: 0 !important; text-align: left !important; }
.NormalFooter .namad img {
width: 62px !important; padding: 5px; background: #fff;
border-radius: 12px !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.07);
transition: transform .18s;
}
.NormalFooter .namad a:hover img { transform: translateY(-2px); }
/* fixed mobile bottom bar: same surface + hairlines as the header */
.FooterMobile {
background: #191b21 !important;
border-top: 1px solid rgba(255,255,255,.07) !important;
}
.FooterMobile .col-xs-3 { border-left: 1px solid rgba(255,255,255,.06) !important; }
.FooterMobile .col-xs-3:last-child { border-left: 0 !important; }
.FooterMobile a img { opacity: .9; }
.FooterCartFix span { color: #eef1f6 !important; }
/* ============================================================
* FSI (2026-07-16): یکنواختسازی ارتفاع کارتهای آیتم
* عکسهای استیم (کانتر/TF2/راست) اندازه و نسبتهای متفاوتی دارند
* (اسلحه عریض، استیکر مربع...) و کارتها ناهمقد میشدند؛ عکس دوتا
* همیشه 256x170 است پس همان نسبت مبنا شد و چیدمان دوتا تغییری نمیکند.
* ============================================================ */
.BoxItem .boxitem_img_fast {
aspect-ratio: 256 / 170;
display: flex;
align-items: center;
justify-content: center;
}
.BoxItem .boxitem_img_fast img {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
object-fit: contain;
}
/* ============================================================
* FSI (2026-07-16): دکمه فلوت/بازرسی کارت + مودال فلوتها — بازطراحی 7.0
* ============================================================ */
/* دکمه روی کارت: چیپ شیشهای بالای عکس، بالاتر از استیج عکس (z-index) */
.BoxItem .AllFloats {
position: absolute;
top: 10px;
right: 10px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(13, 15, 20, .78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #e8ebf2;
font-size: 11.5px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, .16);
border-bottom: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
cursor: pointer;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.BoxItem .AllFloats:hover {
background: rgba(125, 196, 31, .92);
color: #0d0f14;
border-color: transparent;
transform: translateY(-1px);
}
.BoxItem .AllFloats i { margin: 0; font-size: 12px; }
/* ============ مودال فلوتها (بازطراحی ۲) ============ */
#GetFloatsModal .uk-modal-dialog {
background: linear-gradient(180deg, #262932 0%, #1e2027 100%);
color: #e6e6ea;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 18px;
padding: 24px 24px 18px;
width: min(760px, 95vw);
box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
#GetFloatsModal .fsi-floats-title { display: none; } /* هدر داخل خود پاسخ میآید */
#GetFloatsModal .uk-modal-close-default { color: #9aa0af; }
#GetFloatsModal .uk-modal-close-default:hover { color: #fff; }
.fsi-floats-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 0 2px 16px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
margin-bottom: 14px;
}
.fsi-floats-name {
color: #fff;
font-size: 16px;
font-weight: 700;
direction: ltr;
text-align: right;
}
.fsi-floats-count {
color: #8b93a3;
font-size: 12px;
white-space: nowrap;
}
.fsi-floats-list { max-height: 62vh; overflow-y: auto; padding: 2px; }
.fsi-floats-list::-webkit-scrollbar { width: 6px; }
.fsi-floats-list::-webkit-scrollbar-thumb { background: #3a3d47; border-radius: 3px; }
.fsi-float-row {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 10px;
transition: border-color .15s ease, background .15s ease;
}
.fsi-float-row:hover {
background: rgba(255, 255, 255, .055);
border-color: rgba(125, 196, 31, .45);
}
/* وضعیت (Wear) */
.fsi-float-wear {
display: flex;
align-items: center;
gap: 7px;
min-width: 118px;
font-size: 12px;
font-weight: 600;
color: #dfe3ec;
white-space: nowrap;
}
.fsi-float-wear::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--wc, #8b93a3);
box-shadow: 0 0 8px var(--wc, transparent);
}
/* عدد + نوار فلوت */
.fsi-float-mid { flex: 1; min-width: 190px; }
.fsi-float-num {
direction: ltr;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 7px;
}
.fsi-float-num small { color: #8b93a3; font-weight: 400; margin-left: 5px; }
.fsi-float-bar {
direction: ltr;
position: relative;
height: 6px;
border-radius: 4px;
background: linear-gradient(90deg,
#4fc06a 0%, #4fc06a 7%,
#9dc34e 7%, #9dc34e 15%,
#f1c40f 15%, #f1c40f 38%,
#e67e22 38%, #e67e22 45%,
#e74c3c 45%, #e74c3c 100%);
}
.fsi-float-marker {
position: absolute;
top: 50%;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
border: 3px solid #1e2027;
transform: translate(-50%, -50%);
box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}
/* قیمت و خرید */
.fsi-float-price {
min-width: 130px;
text-align: left;
font-size: 14px;
font-weight: 800;
color: #fff;
white-space: nowrap;
}
.fsi-float-price span { font-size: 11px; color: #8b93a3; font-weight: 400; }
.fsi-float-buy {
background: linear-gradient(180deg, #8ed331, #6faf1b);
color: #10130a;
font-size: 12.5px;
font-weight: 800;
border: none;
border-radius: 10px;
padding: 10px 22px;
cursor: pointer;
transition: filter .15s ease, transform .15s ease;
}
.fsi-float-buy:hover { filter: brightness(1.1); transform: translateY(-1px); }
.fsi-floats-empty { text-align: center; color: #8b93a3; padding: 34px 0 22px; font-size: 13px; }
@media (max-width: 640px) {
.fsi-float-row { flex-wrap: wrap; gap: 10px; }
.fsi-float-mid { flex-basis: 100%; order: 3; }
.fsi-float-buy { margin-right: auto; }
}
/* ============================================================
* FSI (2026-07-16): فیلتر «کلاسیک پرو» — سایدبار دستهبندیها
* ============================================================ */
.sideCat { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.FsiFP { background: #24262d; border: 1px solid #33363f; border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.FsiFPHead { padding: 13px 16px; border-bottom: 1px solid #33363f; color: #fff; font-size: 13.5px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.FsiFPHead span { color: #7dc41f; font-size: 11px; font-weight: 400; cursor: pointer; }
.FsiFPHead span:hover { text-decoration: underline; }
.FsiFPBody { padding: 14px 16px 4px; }
.FsiFSec { border-bottom: 1px dashed #33363f; padding-bottom: 13px; margin-bottom: 13px; }
.FsiFSec:last-child { border-bottom: none; }
.FsiFLabel { display: block; font-size: 11.5px; color: #8b93a3; margin: 0 0 8px !important; }
.FsiFPBody input[type="search"], .FsiFPBody input[type="num"], .FsiFPBody input[type="text"] {
width: 100% !important;
background: #17181d !important;
border: 1px solid #3a3d47 !important;
border-radius: 10px !important;
color: #fff !important;
padding: 10px 12px !important;
font-size: 12.5px !important;
margin: 0 !important;
box-shadow: none !important;
}
.FsiFPBody input:focus {
outline: none !important;
border-color: #7dc41f !important;
box-shadow: 0 0 0 3px rgba(125, 196, 31, .14) !important;
}
.FsiFSearch { position: relative; }
.FsiFSearch::before { content: '🔍'; position: absolute; left: 12px; top: 10px; font-size: 12px; opacity: .5; pointer-events: none; }
.FsiFPBody select {
width: 100% !important;
background: #17181d !important;
border: 1px solid #3a3d47 !important;
border-radius: 10px !important;
color: #e6e6ea !important;
padding: 10px 12px !important;
font-size: 12px !important;
margin: 0 !important;
box-shadow: none !important;
}
.FsiFPBody select:focus { border-color: #7dc41f !important; outline: none !important; }
.FsiHiddenSel { display: none !important; }
.FsiChips { display: flex; flex-wrap: wrap; gap: 6px; }
.FsiChip {
border: 1px solid #3a3d47;
background: #1c1e24;
color: #b9bdc9;
border-radius: 9px;
padding: 6px 11px;
font-size: 11px;
cursor: pointer;
user-select: none;
transition: all .15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.FsiChip:hover { border-color: #7dc41f; color: #fff; }
.FsiChip.on { background: #7dc41f; border-color: #7dc41f; color: #14151a; font-weight: 700; box-shadow: 0 4px 14px -5px #7dc41f; }
.FsiWChip i { width: 8px; height: 8px; border-radius: 50%; background: var(--wc); font-style: normal; flex: 0 0 8px; }
.FsiWChip.on { background: color-mix(in srgb, var(--wc) 22%, #1c1e24); border-color: var(--wc); color: #fff; box-shadow: 0 0 12px -5px var(--wc); }
.FsiPriceRow { display: flex; gap: 8px; }
.FsiFPFoot { padding: 12px 16px 14px; background: #1f2026; border-top: 1px solid #33363f; }
.FsiApplyBtn {
display: block;
width: 100%;
text-align: center;
background: linear-gradient(180deg, #8ed331, #6faf1b);
color: #10130a;
font-weight: 800;
font-size: 13px;
border: none;
border-radius: 10px;
padding: 12px;
cursor: pointer;
font-family: inherit;
transition: filter .15s ease;
}
.FsiApplyBtn:hover { filter: brightness(1.08); }
/* هیروها: گرید دایرهای */
.FsiFP .HeroSelectCat h4 { display: none; }
.FsiFP .HeroSelectCat input#SearchHeroName { margin-bottom: 8px !important; }
.FsiFP #AllHeroCats { display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto; padding: 2px !important; margin: 0 !important; list-style: none; max-height: 460px; }
.FsiFP #AllHeroCats::-webkit-scrollbar { width: 5px; }
.FsiFP #AllHeroCats::-webkit-scrollbar-thumb { background: #3a3d47; border-radius: 3px; }
.FsiFP #AllHeroCats li { width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; flex: 0 0 40px; }
.FsiFP #AllHeroCats li label, .FsiFP #AllHeroCats li#UncheckHeroFilter {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #3a3d47;
cursor: pointer;
transition: .15s;
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
.FsiFP #AllHeroCats li label:hover, .FsiFP #AllHeroCats li#UncheckHeroFilter:hover { border-color: #8b93a3; }
.FsiFP #AllHeroCats li input[type="radio"]:checked + label { border-color: #7dc41f !important; box-shadow: 0 0 10px -2px #7dc41f; }
.FsiFP #AllHeroCats li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.FsiFP #AllHeroCats.collapsed { max-height: 176px; }
.FsiFP .list-toggle { width: 100%; flex: 1 1 100%; text-align: center; padding: 4px 0 2px; }
.FsiFP .show-more2 { color: #7dc41f; font-size: 11px; cursor: pointer; }
/* FSI کلاسیک پرو: فقط یکی از دکمههای بازکردن/بستن هیروها نمایش داده شود */
.FsiFP #AllHeroCats.collapsed .show-more2.collapse { display: none; }
.FsiFP #AllHeroCats:not(.collapsed) .show-more2.expand { display: none; }
.FsiFPFoot { display: none; }
/* FSI کلاسیک پرو: دکمه حذف هیرو لازم نیست (پاک کردن بالای پنل هست) */
.FsiFP #AllHeroCats li#UncheckHeroFilter { display: none !important; }
/* حالت بدون نتیجه */
.FsiEmptyState { text-align: center; padding: 60px 20px; background: #24262d; border: 1px dashed #3a3d47; border-radius: 16px; margin: 12px 0; }
.FsiEmptyState .FsiEmptyIcon { font-size: 34px; margin-bottom: 10px; opacity: .6; }
.FsiEmptyState p { color: #8b93a3; font-size: 14px; margin: 0 0 16px; }
.FsiEmptyState button { background: linear-gradient(180deg, #8ed331, #6faf1b); color: #10130a; font-weight: 800; font-size: 12.5px; border: none; border-radius: 10px; padding: 11px 26px; cursor: pointer; font-family: inherit; }
.FsiEmptyState button:hover { filter: brightness(1.08); }
/* FSI حالت بدون نتیجه — نسخه ۲ */
.FsiEmptyState {
text-align: center;
padding: 64px 24px 58px;
background:
radial-gradient(340px 170px at 50% 0%, rgba(125, 196, 31, .07), transparent 75%),
linear-gradient(180deg, #26282f 0%, #1e2026 100%);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 20px;
margin: 14px 8px;
}
.FsiEmptyArt { position: relative; width: 92px; height: 92px; margin: 0 auto 18px; animation: FsiBob 3.2s ease-in-out infinite; }
.FsiEmptyRing {
position: absolute;
inset: 0;
border-radius: 50%;
background: #1c1e24;
border: 1px solid rgba(255, 255, 255, .09);
box-shadow: 0 0 34px -8px rgba(125, 196, 31, .35), inset 0 0 18px rgba(0, 0, 0, .4);
}
.FsiEmptyIcon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; filter: grayscale(.3); }
@keyframes FsiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.FsiEmptyState h3 { color: #fff; font-size: 17px; margin: 0 0 8px; }
.FsiEmptyState p { color: #8b93a3; font-size: 12.5px; line-height: 2.1; margin: 0 0 20px; }
.FsiEmptyState button {
background: linear-gradient(180deg, #8ed331, #6faf1b);
color: #10130a;
font-weight: 800;
font-size: 13px;
border: none;
border-radius: 12px;
padding: 13px 30px;
cursor: pointer;
font-family: inherit;
box-shadow: 0 10px 24px -8px rgba(125, 196, 31, .55);
transition: transform .15s ease, filter .15s ease;
}
.FsiEmptyState button:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* ============================================================
* FSI (2026-07-17): برچسب «فوری» ساده — بدون کادر و پسزمینه،
* فقط یک متن خاکستری کمرنگ کنار قیمت (خواسته مالک: چشم را نگیرد)
* ============================================================ */
.TradeCDFori {
background: none !important;
border: none !important;
box-shadow: none !important;
color: #7b8494 !important;
font-size: 11px !important;
font-weight: 400 !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* ============================================================
* FSI (2026-07-17): تگ هیرو (آیکون گرد + اسم) + رنگبندی کارت بر اساس کمیابی
* دوتا۲: Common خاکستری، Rare آبی، Mythical/Restricted بنفش، Legendary صورتی،
* Immortal طلایی، Arcana سبز، Ancient قرمز.
* ============================================================ */
/* --- تگ هیروی کلیکبل: آیکون گرد + اسم کنارش --- */
.BoxItem .HeroTag {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
position: relative;
z-index: 2;
margin: -14px 0 5px !important;
padding: 2px 10px 2px 3px;
background: rgba(10, 11, 14, .66);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
color: #cdd5e1 !important;
text-decoration: none !important;
cursor: pointer;
transition: box-shadow .16s ease, color .16s ease;
}
.BoxItem .HeroTag:hover {
color: #fff !important;
box-shadow: inset 0 0 0 1px var(--rc, rgba(142, 211, 49, .6));
}
.BoxItem .HeroTag img {
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
max-width: 26px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: 50% 32% !important;
flex: 0 0 26px !important;
display: block;
margin: 0 !important;
box-shadow: 0 0 0 1px var(--rc, rgba(255, 255, 255, .2));
}
.BoxItem .HeroTag span {
font-size: 11px;
font-weight: 700;
white-space: nowrap;
direction: ltr;
}
/* --- رنگبندی کارت بر اساس کمیابی --- */
.BoxItem.HasRarity {
border-color: color-mix(in srgb, var(--rc) 34%, rgba(255, 255, 255, .09)) !important;
}
.BoxItem.HasRarity:hover {
border-color: var(--rc) !important;
box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 22px -8px var(--rc) !important;
}
/* هالهی رنگ کمیابی پشت عکس آیتم */
.BoxItem.HasRarity .boxitem_img_fast {
background:
radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 68%),
radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .04), transparent 70%) !important;
}
/* نوار نازک رنگ کمیابی بالای عکس */
.BoxItem.HasRarity .boxitem_img_fast::after {
content: '';
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rc), transparent);
z-index: 3;
}
.BoxItem.HasRarity .boxitem_img_fast { position: relative; }
/* (خط رنگی کنار قیمت حذف شد — با «فوری» تداخل داشت) */
/* ============================================================
* FSI (2026-07-17): تگ سلاح کلیکبل روی کارت کانتر — آیکون افقی سلاح + اسم
* (آیکون سلاح عریض است، پس مربعگرد نه دایره؛ کلیک → جستجوی همان سلاح)
* ============================================================ */
.BoxItem .WeaponTag img {
width: 34px !important;
height: 22px !important;
min-width: 0 !important;
max-width: 34px !important;
border-radius: 5px !important;
object-fit: contain !important;
object-position: center !important;
flex: 0 0 34px !important;
background: rgba(255, 255, 255, .05);
box-shadow: none !important;
padding: 1px 2px;
}
/* ============================================================
* FSI (2026-07-17): گرید آیکونی دسته آیتم کانتر (بهجای منوی کشویی)
* مثل گرید هیروهای دوتا: آیکون + اسم زیرش، کلیک = فیلتر همان دسته
* ============================================================ */
.CsCatGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.CsCatItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 7px 2px 5px;
border: 1px solid #3a3d47;
background: #1c1e24;
border-radius: 9px;
cursor: pointer;
user-select: none;
transition: all .15s ease;
}
.CsCatItem:hover { border-color: #7dc41f; background: #202329; }
.CsCatItem.on { border-color: #7dc41f; background: rgba(125, 196, 31, .12); box-shadow: 0 0 12px -5px #7dc41f; }
.CsCatItem .ci {
width: 100%;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.CsCatItem .ci img {
max-width: 100%;
max-height: 26px;
object-fit: contain;
display: block;
/* بیرنگ و خنثی: خاکستری روشن، بدون هیچ رنگ آیتم خاص */
filter: grayscale(1) brightness(1.9) contrast(.85) opacity(.85);
transition: filter .15s ease;
}
.CsCatItem:hover .ci img { filter: grayscale(1) brightness(2.2) opacity(1); }
.CsCatItem.on .ci img { filter: grayscale(1) brightness(2.4) opacity(1); }
.CsCatItem .fa {
font-size: 10.5px;
color: #cbd0da;
font-weight: 700;
white-space: nowrap;
line-height: 1.3;
}
.CsCatItem .en {
font-size: 8.5px;
color: #6b7280;
letter-spacing: .3px;
white-space: nowrap;
line-height: 1.1;
direction: ltr;
}
.CsCatItem.on .fa { color: #a5e34f; }
.CsCatItem.on .en { color: #7ea83a; }
/* ============================================================
* FSI (2026-07-17): چیپهای کیفیت (فرسودگی) کانتر — با رنگ FN→BS
* ============================================================ */
.CsWearGrid { display: flex; flex-wrap: wrap; gap: 6px; }
.CsWearItem {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
border: 1px solid #3a3d47;
background: #1c1e24;
border-radius: 999px;
cursor: pointer;
user-select: none;
transition: all .15s ease;
}
.CsWearItem:hover { border-color: color-mix(in srgb, var(--wc) 60%, #3a3d47); background: #202329; }
.CsWearItem.on { border-color: var(--wc); background: color-mix(in srgb, var(--wc) 12%, #1c1e24); box-shadow: 0 0 12px -5px var(--wc); }
.CsWearItem .wc {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wc);
box-shadow: 0 0 8px var(--wc);
flex: 0 0 10px;
}
.CsWearItem .wt { display: inline-flex; align-items: baseline; gap: 5px; }
.CsWearItem .wt b { font-size: 11px; color: #cbd0da; font-weight: 700; }
.CsWearItem .wt i { font-size: 9px; color: #6b7280; font-style: normal; letter-spacing: .3px; direction: ltr; }
.CsWearItem.on .wt b { color: #fff; }
.CsWearItem.on .wt i { color: var(--wc); }
/* ============================================================
* FSI (2026-07-17): گرید نوع آیتم (سلاح خاص) کانتر — آیکون + سرچ + نمایشهمه
* ============================================================ */
.CsTypeSearch {
width: 100% !important;
background: #17181d !important;
border: 1px solid #3a3d47 !important;
border-radius: 10px !important;
color: #fff !important;
padding: 9px 12px !important;
font-size: 12px !important;
margin: 0 0 8px !important;
font-family: inherit;
}
.CsTypeSearch:focus { outline: none; border-color: #7dc41f !important; box-shadow: 0 0 0 3px rgba(125,196,31,.14) !important; }
.CsTypeGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
overflow-y: auto;
max-height: 320px;
padding: 2px;
}
.CsTypeGrid.collapsed { max-height: 150px; }
.CsTypeGrid::-webkit-scrollbar { width: 6px; }
.CsTypeGrid::-webkit-scrollbar-thumb { background: #3a3d47; border-radius: 3px; }
.CsTypeGrid::-webkit-scrollbar-track { background: transparent; }
.CsTypeItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 7px 2px 5px;
border: 1px solid #3a3d47;
background: #1c1e24;
border-radius: 9px;
cursor: pointer;
user-select: none;
transition: all .15s ease;
}
.CsTypeItem:hover { border-color: #7dc41f; background: #202329; }
.CsTypeItem.on { border-color: #7dc41f; background: rgba(125,196,31,.12); box-shadow: 0 0 12px -5px #7dc41f; }
.CsTypeItem .ci { width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
.CsTypeItem .ci img {
max-width: 100%; max-height: 22px; object-fit: contain; display: block;
filter: brightness(1.05) opacity(.9);
transition: filter .15s ease;
}
.CsTypeItem:hover .ci img, .CsTypeItem.on .ci img { filter: brightness(1.15) opacity(1); }
.CsTypeItem span {
font-size: 8.5px; color: #9aa0af; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 100%; direction: ltr;
}
.CsTypeItem.on span { color: #a5e34f; font-weight: 700; }
.CsTypeToggle { text-align: center; padding: 8px 0 2px; cursor: pointer; color: #7dc41f; font-size: 11px; font-weight: 600; }
.CsTypeToggle:hover { color: #a5e34f; }
.CsTypeToggle .co { display: none; }
.CsTypeToggle.open .ex { display: none; }
.CsTypeToggle.open .co { display: inline; }
/* ============================================================
* FSI (2026-07-17): اسلایدر رنجی قیمت — دستههای سفارشی
* ============================================================ */
.FsiRange { position: relative; height: 26px; margin: 8px 8px 2px; direction: ltr; }
.FsiRangeTrack { position: absolute; top: 11px; left: 0; right: 0; height: 4px; background: #2a2d35; border-radius: 3px; }
.FsiRangeFill { position: absolute; top: 11px; height: 4px; background: #7dc41f; border-radius: 3px; }
.FsiRangeThumb {
position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px;
transform: translateY(-50%); background: #fff; border: 3px solid #7dc41f;
border-radius: 50%; cursor: grab; box-shadow: 0 1px 5px rgba(0,0,0,.5);
touch-action: none; z-index: 3;
}
.FsiRangeThumb:active { cursor: grabbing; transform: translateY(-50%) scale(1.15); }
.FsiRangeVals {
display: flex; justify-content: space-between;
font-size: 10.5px; color: #9aa0af; direction: ltr; padding: 4px 4px 0;
}
.FsiRangeMaxV { color: #cbd0da; }
/* تگ دسته کانتر روی کارت — آیکون دسته (عریض) کنار اسم انگلیسی */
.BoxItem .CatTag img {
width: 30px !important;
height: 20px !important;
min-width: 0 !important;
max-width: 30px !important;
border-radius: 5px !important;
object-fit: contain !important;
object-position: center !important;
flex: 0 0 30px !important;
background: rgba(255,255,255,.05);
box-shadow: none !important;
padding: 1px 2px;
}
.BoxItem .CatTag span { direction: ltr; }
/* گرید هیرو موبایل (offcanvas) — مثل دسکتاپ دایرهای */
#offcanvas-nav-filter #AllHeroCats2 { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; margin: 0; list-style: none; }
#offcanvas-nav-filter #AllHeroCats2 li { width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; flex: 0 0 40px; }
#offcanvas-nav-filter #AllHeroCats2 li label, #offcanvas-nav-filter #AllHeroCats2 li#UncheckHeroFilter2 { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid #3a3d47; cursor: pointer; padding: 0 !important; margin: 0 !important; background: none !important; }
#offcanvas-nav-filter #AllHeroCats2 li input[type="radio"]:checked + label { border-color: #7dc41f !important; box-shadow: 0 0 10px -2px #7dc41f; }
#offcanvas-nav-filter #AllHeroCats2 li img { width: 100%; height: 100%; object-fit: cover; display: block; }
#offcanvas-nav-filter #AllHeroCats2 li#UncheckHeroFilter2 { display: none !important; }
/* offcanvas: فیلدها و لیبلها هماستایل دسکتاپ */
#offcanvas-nav-filter .sideCat { background: transparent !important; border: none !important; padding: 0 !important; }
#offcanvas-nav-filter .FsiFSec { border-bottom: 1px dashed #33363f; padding-bottom: 13px; margin-bottom: 13px; }
/* ══════════════════════════════════════════════════════════════════
مودال «خرید مستقیم از کاربر» + نوتیف (بازطراحی ۲۰۲۶-۰۷-۱۸)
جایگزین alertify.confirm سادهی قبلی.
══════════════════════════════════════════════════════════════════ */
.FsiBuyDialog {
width: 440px;
max-width: calc(100vw - 32px);
background: #262a33;
border-radius: 18px;
padding: 0;
overflow: hidden;
box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
color: #eef1f5;
}
.FsiBuyModal .uk-modal-close-default {
color: #9aa3b1;
top: 14px;
right: auto;
left: 14px; /* راستچین */
}
.FsiBuyModal .uk-modal-close-default:hover { color: #fff; }
/* ── سربرگ ─────────────────────────────────────────────────────── */
.FsiBuyHead {
padding: 22px 24px 16px;
background: linear-gradient(160deg, #2f3540, #23272f);
border-bottom: 1px solid #333a46;
}
.FsiBuyHead h3 {
margin: 10px 0 0;
font-size: 19px;
font-weight: 700;
color: #fff;
}
.FsiBuyBadge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: #4fd463;
background: rgba(56, 178, 74, .14);
border: 1px solid rgba(56, 178, 74, .3);
padding: 5px 11px;
border-radius: 999px;
}
.FsiBuyBadge img { width: 13px; height: 13px; display: inline-block; }
/* ── بدنه ──────────────────────────────────────────────────────── */
.FsiBuyBody { padding: 20px 24px 4px; }
.FsiBuyItem {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.FsiBuyThumb {
flex: 0 0 78px;
width: 78px;
height: 78px;
border-radius: 12px;
background: #1c1f26;
border: 1px solid #333a46;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.FsiBuyThumb img {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
object-fit: contain;
margin: 0 !important;
}
.FsiBuyMeta { min-width: 0; }
.FsiBuyName {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.5;
word-break: break-word;
}
.FsiBuyHint {
font-size: 12px;
color: #8d95a3;
margin-top: 3px;
}
/* ── قیمت ──────────────────────────────────────────────────────── */
.FsiBuyPriceRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: #1e222a;
border: 1px solid #333a46;
border-radius: 12px;
}
.FsiBuyPriceLabel { font-size: 13px; color: #9aa3b1; }
.FsiBuyPrice { color: #ff8a3d; white-space: nowrap; }
.FsiBuyPrice b {
font-size: 22px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.FsiBuyPrice i { font-style: normal; font-size: 13px; margin-right: 3px; }
.FsiBuyNote {
margin: 14px 0 0;
font-size: 12.5px;
line-height: 1.9;
color: #8d95a3;
text-align: justify;
}
/* ── پاورقی و دکمهها ──────────────────────────────────────────── */
.FsiBuyFoot {
display: flex;
gap: 10px;
padding: 18px 24px 22px;
}
.FsiBuyConfirm,
.FsiBuyCancel {
flex: 1;
border: 0;
border-radius: 11px;
padding: 13px 18px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background .18s ease, transform .12s ease, opacity .18s ease;
}
.FsiBuyConfirm {
flex: 1.6;
color: #fff;
background: linear-gradient(135deg, #ff5722, #ff8a3d);
box-shadow: 0 10px 24px -8px rgba(255, 87, 34, .65);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.FsiBuyConfirm:hover:not(:disabled) { transform: translateY(-1px); }
.FsiBuyConfirm:disabled { opacity: .65; cursor: default; }
.FsiBuyCancel {
color: #c3cad6;
background: #313743;
}
.FsiBuyCancel:hover { background: #3a4150; }
.FsiBuyConfirm:focus-visible,
.FsiBuyCancel:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }
/* ── نوتیف ─────────────────────────────────────────────────────── */
.FsiToast { line-height: 1.8; }
.FsiToast b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 2px; }
.FsiToast span { display: block; font-size: 12.5px; opacity: .9; }
/* ── موبایل ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.FsiBuyDialog { border-radius: 14px; }
.FsiBuyHead { padding: 18px 18px 14px; }
.FsiBuyBody { padding: 16px 18px 4px; }
.FsiBuyFoot { padding: 14px 18px 18px; flex-direction: column-reverse; }
.FsiBuyConfirm, .FsiBuyCancel { flex: none; width: 100%; }
.FsiBuyThumb { flex-basis: 62px; width: 62px; height: 62px; }
.FsiBuyPrice b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
.FsiBuyConfirm, .FsiBuyCancel { transition: none; }
.FsiBuyConfirm:hover:not(:disabled) { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
پنل «آیتم های خرید مستقیم» (بازطراحی ۲۰۲۶-۰۷-۱۸)
قبلاً فقط عکس + یک برچسب بود؛ حالا کارت با نام/قیمت/زمان/وضعیت.
══════════════════════════════════════════════════════════════════ */
.FsiFbBar {
width: 360px;
max-width: 88vw;
background: #21252d;
padding: 0;
color: #eef1f5;
}
.FsiFbClose { top: 14px; left: 14px; right: auto; color: #9aa3b1; }
.FsiFbClose:hover { color: #fff; }
/* ── سربرگ ─────────────────────────────────────────────────────── */
.FsiFbHead {
padding: 22px 20px 16px;
border-bottom: 1px solid #2f3540;
background: linear-gradient(160deg, #272c35, #21252d);
flex: 0 0 auto;
}
.FsiFbHead h4 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.FsiFbHead p { margin: 4px 0 0; font-size: 12.5px; color: #8d95a3; }
/* ── ناحیهی اسکرول ────────────────────────────────────────────── */
.FsiFbScroll {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px 14px 20px;
-webkit-overflow-scrolling: touch;
}
.FsiFbScroll::-webkit-scrollbar { width: 8px; }
.FsiFbScroll::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 4px; }
.FsiFbLoading {
display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 40px 0; color: #8d95a3; font-size: 13px;
}
/* ── لیست ──────────────────────────────────────────────────────── */
.FsiFbList { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.FsiFbCard {
display: flex;
gap: 12px;
padding: 12px;
background: #272c35;
border: 1px solid #333a46;
border-radius: 13px;
transition: border-color .18s ease, background .18s ease;
}
.FsiFbCard:hover { border-color: #414a5a; }
/* نوار رنگی وضعیت در لبهی کارت */
.FsiFb--offer { border-right: 3px solid #38b24a; }
.FsiFb--pending { border-right: 3px solid #e6b23a; }
.FsiFb--done { border-right: 3px solid #3a4150; }
.FsiFb--refunded { border-right: 3px solid #6b7385; }
.FsiFbThumb {
flex: 0 0 56px; width: 56px; height: 56px;
border-radius: 10px;
background: #1b1e25;
border: 1px solid #333a46;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.FsiFbThumb img {
max-width: 100%; max-height: 100%;
width: auto !important; height: auto !important;
object-fit: contain; margin: 0 !important;
}
.FsiFbInfo { min-width: 0; flex: 1; }
.FsiFbName {
font-size: 13.5px; font-weight: 700; color: #fff;
line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.FsiFbSub {
margin-top: 3px; font-size: 12px; color: #8d95a3;
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.FsiFbPrice { color: #ffa76b; font-variant-numeric: tabular-nums; }
.FsiFbDot { opacity: .5; }
/* ── دکمهی «دریافت کنید» (تنها حالتی که کاربر باید کاری کند) ──── */
.FsiFbAction {
display: block;
margin-top: 9px;
text-align: center;
font-size: 12.5px; font-weight: 700;
color: #fff !important;
text-decoration: none !important;
padding: 9px 12px;
border-radius: 9px;
background: linear-gradient(135deg, #2f9e40, #43c457);
box-shadow: 0 7px 18px -7px rgba(56, 178, 74, .7);
transition: transform .15s ease;
}
.FsiFbAction:hover { transform: translateY(-1px); color: #fff !important; }
/* ── چیپهای وضعیت ─────────────────────────────────────────────── */
.FsiFbChip {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 9px;
font-size: 12px; font-weight: 700;
padding: 6px 11px;
border-radius: 999px;
}
.FsiFbChip--wait { color: #e6b23a; background: rgba(230, 178, 58, .12); border: 1px solid rgba(230, 178, 58, .28); }
.FsiFbChip--done { color: #4fd463; background: rgba(56, 178, 74, .12); border: 1px solid rgba(56, 178, 74, .26); }
.FsiFbChip--refund { color: #9aa3b1; background: rgba(154, 163, 177, .1); border: 1px solid rgba(154, 163, 177, .22); }
.FsiFbChip--expired { color: #9aa3b1; background: rgba(154, 163, 177, .1); border-color: rgba(154, 163, 177, .22); }
.FsiFbCount { font-variant-numeric: tabular-nums; }
.FsiFbDotPulse {
width: 6px; height: 6px; border-radius: 50%;
background: #e6b23a;
animation: FsiFbPulse 1.4s ease-in-out infinite;
}
@keyframes FsiFbPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* ── حالت خالی ─────────────────────────────────────────────────── */
.FsiFbEmpty { text-align: center; padding: 54px 20px; color: #8d95a3; }
.FsiFbEmptyIcon { font-size: 40px; display: block; margin-bottom: 12px; opacity: .55; }
.FsiFbEmpty p { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #c3cad6; }
.FsiFbEmpty small { font-size: 12px; line-height: 1.9; display: block; }
@media (prefers-reduced-motion: reduce) {
.FsiFbDotPulse { animation: none; }
.FsiFbAction, .FsiFbCard { transition: none; }
.FsiFbAction:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
صفحهی «فروش موقتاً غیرفعال» (۲۰۲۶-۰۷-۱۸)
══════════════════════════════════════════════════════════════════ */
.FsiSellOff {
max-width: 560px;
margin: 60px auto 80px;
padding: 44px 36px;
text-align: center;
background: #262a33;
border: 1px solid #333a46;
border-radius: 18px;
box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .7);
color: #eef1f5;
}
.FsiSellOffIcon { font-size: 46px; line-height: 1; margin-bottom: 16px; }
.FsiSellOff h2 {
margin: 0 0 14px;
font-size: 22px;
font-weight: 800;
color: #fff;
}
.FsiSellOff p {
margin: 0 0 12px;
font-size: 14.5px;
line-height: 2.1;
color: #9aa3b1;
text-align: justify;
}
.FsiSellOffNote {
font-size: 13px !important;
color: #7f8796 !important;
border-top: 1px dashed #333a46;
padding-top: 14px;
margin-top: 18px !important;
}
.FsiSellOffBtns {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 24px;
flex-wrap: wrap;
}
.FsiSellOffPrimary,
.FsiSellOffGhost {
flex: 1 1 160px;
max-width: 220px;
padding: 12px 20px;
border-radius: 11px;
font-size: 14.5px;
font-weight: 700;
text-decoration: none !important;
transition: transform .15s ease, background .18s ease;
}
.FsiSellOffPrimary {
color: #fff !important;
background: linear-gradient(135deg, #ff5722, #ff8a3d);
box-shadow: 0 10px 24px -9px rgba(255, 87, 34, .65);
}
.FsiSellOffPrimary:hover { transform: translateY(-1px); color: #fff !important; }
.FsiSellOffGhost {
color: #c3cad6 !important;
background: #313743;
}
.FsiSellOffGhost:hover { background: #3a4150; color: #fff !important; }
@media (max-width: 520px) {
.FsiSellOff { margin: 32px 14px 50px; padding: 32px 22px; }
.FsiSellOff h2 { font-size: 19px; }
.FsiSellOffBtns { flex-direction: column; }
.FsiSellOffPrimary, .FsiSellOffGhost { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.FsiSellOffPrimary, .FsiSellOffGhost { transition: none; }
.FsiSellOffPrimary:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
لودینگ پیشنمایش ویدیو/تصاویر (۲۰۲۶-۰۷-۱۸)
قبلاً فقط یک متن در پاورقی بود؛ روی اتصال کند حس «هنگ کردن» میداد.
══════════════════════════════════════════════════════════════════ */
.fsi-pv-stagewrap { position: relative; }
.fsi-pv-loading {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 12px;
color: #eef1f5;
background: rgba(24, 27, 33, .72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: FsiPvFade .18s ease;
}
.fsi-pv-loading[hidden] { display: none; }
.fsi-pv-loadtext {
font-size: 13px;
color: #c3cad6;
letter-spacing: .2px;
}
@keyframes FsiPvFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.fsi-pv-loading { animation: none; }
}