/* Styles for mega-crypto.hbs — the "خرید ارز دیجیتال" panel.
   Card chrome shared with mega-blog.hbs lives in header.css. */

.card-body {
  display: flex;
  gap: 8px;
}

.card-symbol {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.card-asset {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-asset strong {
  color: var(--on-background-neutral-default);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.card-asset small {
  color: var(--on-background-neutral-subdued);
  font-size: 14px;
  line-height: 20px;
}

.card-change {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* Width only. The glyph's own `height="24"` is what legacy leaves standing, and
   that extra 4px is the difference between a 104px and the legacy 108px card. */
.card-change-arrow {
  width: 20px;
}

.card-change--up {
  color: var(--on-background-success);
}

/* One glyph serves both directions — the upward states flip it. */
.card-change--up .card-change-arrow,
.card-change--flat .card-change-arrow {
  transform: rotate(180deg);
}

.card-change--down {
  color: var(--on-background-error-default);
}

/* Legacy has no neutral state: an asset sitting at exactly 0.00% falls through to
   the same branch as a rise, so it reads green and keeps its arrow. */
.card-change--flat {
  color: var(--on-background-success);
}

/* Revealed on hover, desktop only. Direct-child selector keeps it off the
   "بیشتر" card, whose arrow is nested inside `.card-more-text`. */
.card-item > .card-arrow {
  position: absolute;
  bottom: 16px;
  left: 16px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (min-width: 1000px) {
  .mega-cards--crypto {
    grid-template-columns: repeat(4, 1fr);
  }

  .mega-cards .card-item:hover > .card-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}