/* File: public_html/assets/home-top-traders.css */

.top-traders-box{
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.tt-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:10px;
  /* پیش‌فرض: انگلیسی / LTR → چپ‌چین */
  align-items:flex-start;
  text-align:left;
}

.tt-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  text-align:left; /* برای LTR */
}

.tt-sub{
  margin:0;
  font-size:11.5px;
  color:var(--muted);
  text-align:left; /* برای LTR */
}

.tt-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.tt-card{
  background: color-mix(in oklab, var(--card) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 14px;
  padding: 10px 10px 12px;
  text-align: center;
  position: relative;
  transition: transform .14s ease, border .14s ease;
}

.tt-card:hover{
  transform: translateY(-2px);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--border));
}

.tt-avatar-wrap{
  position:relative;
  width:54px;
  height:54px;
  margin:0 auto 6px;
}

.tt-avatar{
  width:54px;
  height:54px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid color-mix(in oklab, var(--border) 75%, transparent);
  background: color-mix(in oklab, var(--card) 90%, transparent);
}

.tt-badge{
  position:absolute;
  bottom:-3px;
  right:-4px;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
}

.tt-name{
  margin:0 0 6px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

.tt-metrics{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
}

.tt-metrics li{
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border:1px solid color-mix(in oklab, var(--border) 75%, transparent);
  border-radius:10px;
  padding:4px 6px 3px;
  min-width:70px;
}

.tt-metrics li span{
  display:block;
  font-size:10px;
  color:var(--muted);
  line-height:1.25;
}

.tt-metrics li strong{
  font-size:12px;
  color:var(--text);
  font-weight:600;
}

/* RTL + فارسی */
/* اگر html یا روت dir="rtl" داشته باشه یا lang="fa" باشه، راست‌چین کن */
[dir="rtl"] .tt-head,
[lang="fa"] .tt-head,
[lang^="fa-"] .tt-head{
  align-items:flex-end;
  text-align:right;
}

[dir="rtl"] .tt-title,
[dir="rtl"] .tt-sub,
[lang="fa"] .tt-title,
[lang="fa"] .tt-sub,
[lang^="fa-"] .tt-title,
[lang^="fa-"] .tt-sub{
  text-align:right;
}