/* ======= Home cards – compact mode ======= */
.home-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* پیش‌فرض‌های امن برای متغیرها (خارج از موبایل) */
:root { --text-1: #111; }
.home-featured-grid {
  --hc-pad: 12px;
  --hc-radius: 14px;
  --hc-gap: 10px;
  --hc-flag: 24px;
  --hc-title: 14px;
  --hc-code: 12px;
  --hc-price: 18px;
  --hc-meta-gap: 6px;
  --hc-left-gap: 10px;
  --hc-minh: 72px;
  --hc-shadow: none;
}

/* حالت موبایل و compact */
@media (max-width: 480px) {
  .home-featured-grid.compact {
    --hc-pad: 10px;
    --hc-radius: 12px;
    --hc-gap: 8px;
    --hc-flag: 20px;
    --hc-title: 13px;
    --hc-code: 11px;
    --hc-price: 16px;
    --hc-meta-gap: 4px;
    --hc-left-gap: 8px;
    --hc-minh: 64px;
    --hc-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  }

  .home-card {
    padding: var(--hc-pad);
    border-radius: var(--hc-radius);
    min-height: var(--hc-minh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-gap);
    box-shadow: var(--hc-shadow);
  }

  .hc-left {
    display: flex;
    align-items: center;
    gap: var(--hc-left-gap);
    min-width: 0;
  }

  .hc-icon {
    width: var(--hc-flag);
    height: auto;
    border-radius: 3px;
    flex: 0 0 var(--hc-flag);
  }

  .hc-meta {
    display: flex;
    flex-direction: column;
    gap: var(--hc-meta-gap);
    min-width: 0;
  }

  .hc-title {
    font-size: var(--hc-title);
    line-height: 1.1;
    font-weight: 700;
    color: var(--text-1, #111);
    display: -webkit-box; /* دو خط */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hc-code {
    font-size: var(--hc-code);
    line-height: 1;
    opacity: .7;
  }

  .hc-right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hc-row { padding: 0; margin: 0; }
  .hc-row.single { line-height: 1; }

  .hc-val {
    font-size: var(--hc-price);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
  }

  .home-featured-grid { gap: 8px; }

  .home-coins, .coins-preview, .section-coins {
    margin-top: 6px !important;
  }
}

/* دسکتاپِ راحت‌تر برای حالت compact */
@media (min-width: 481px) {
  .home-featured-grid.compact .home-card {
    --hc-minh: 72px;
    --hc-pad: 12px;
    --hc-flag: 22px;
    --hc-title: 14px;
    --hc-price: 18px;
  }
}

/* ریزبهینه‌سازی‌ها */
.home-card [dir="rtl"] .hc-right { margin-right: auto; }
.home-card [dir="ltr"] .hc-right { margin-left: auto; }
.hc-title 
/* ریزبهینه‌سازی‌ها */
.home-card [dir="rtl"] .hc-right { margin-right: auto; }
.home-card [dir="ltr"] .hc-right { margin-left: auto; }
.hc-title { word-break: break-word; }


/* --- hotfix: جمع‌وجور کردن آیتم‌های لیست ارزی حتی با DOM قدیمی --- */

/* تصاویر پرچم داخل کارت‌های ارزی را محدود کن */
.currency-card img,
.home-featured-grid img,
.app-content img.flag,
.app-content img[alt*="پرچم"],
.app-content img[alt*="flag"] {
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
}

/* اگر هر کارت ارزی یک ردیف با سه/چهار ستون دارد، گرید کن */
.currency-card,
.app-content .currency-item,
.app-content .currency-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 35px; /* نام ارز | خرید | فروش | علاقه‌مندی */
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ستون نام و کد ارز کنار پرچم */
.currency-card .col-symbol,
.app-content .currency-item .col-symbol {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.currency-card .currency-name { font-size: 14px; font-weight: 600; }
.currency-card .currency-code { font-size: 11px; color: #666; }

/* قیمت‌ها وسط‌چین و رنگ‌بندی */
.currency-card .price-buy, .currency-card .price-sell,
.app-content .currency-item .price-buy, .app-content .currency-item .price-sell {
  text-align: center; font-weight: 600; font-family: "IRANYekanFaNum", monospace;
}
.currency-card .price-buy,
.app-content .currency-item .price-buy { color: #1a9d4a; }
.currency-card .price-sell,
.app-content .currency-item .price-sell { color: #e63946; }

/* آیکن علاقه‌مندی */
.currency-card .col-fav, .app-content .currency-item .col-fav { text-align: center; width: 35px; }

/* موبایل */
@media (max-width:480px){
  .currency-card,
  .app-content .currency-item,
  .app-content .currency-row {
    grid-template-columns: 1fr 80px 80px 25px;
    padding: 8px 10px;
  }
}