/* ───────── Card Grid ───────── */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  justify-content: center;
  padding: 0 var(--gap);
}

/* ───────── Card Structure ───────── */
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s;
  position: relative;
  overflow: hidden;
}

.card.premarket {
  border: 1px solid rgb(84 116 170 / 50%);
  box-shadow: 0 0 3px 0px rgb(84 116 170 / 50%);
}

.card:hover {
  transform: translateY(-2px);
}

.card-img-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 4px;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ───────── Card Text Content ───────── */
.name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stars {
  font-size: 0.75rem;
  color: #52525b;
  margin-top: 1px;
  cursor: help;
}

.stars.with-upgrade {
  color: #be8200;
}

.supply {
  font-size: 0.7rem;
  color: #71717a;
  margin-top: 1px;
  cursor: help;
}

.capitalization {
  font-size: 0.7rem;
  color: #1e3a8a;
  margin-top: 1px;
  cursor: help;
}

.volume {
  font-size: 0.7rem;
  color: #71717a;
  margin-top: 1px;
  cursor: help;
}

/* ───────── Popularity Level Colors ───────── */
.popularity-level {
  font-weight: 500;
}

.popularity-level.very-high {
  color: #03ad1f;
}

.popularity-level.high {
  color: #119a51; 
}

.popularity-level.medium {
  color: #77823a; 
}

.popularity-level.low {
  color: #b97911; 
}

.popularity-level.very-low {
  color: #a32323;
}

/* ───────── Badges - Right Side ───────── */
.floor-badge {
  position: absolute;
  top: var(--badge-margin-top);
  right: 0px;
  background: #3b82f6;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 8px 0 0 8px;
  font-weight: 400;
  cursor: help;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.floor-stars-badge {
  position: absolute;
  top: calc(var(--badge-margin-top) + var(--badge-height) + var(--badge-spacing));
  right: 0px;
  background: #facc15;
  color: #000;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 8px 0 0 8px;
  font-weight: 400;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.floor-stars-badge.low-floor-stars {
  background: #ef4444;
  color: #fff;
}

.xprofit-badge {
  position: absolute;
  top: calc(var(--badge-margin-top) + 2 * (var(--badge-height) + var(--badge-spacing)));
  right: 0px;
  background: #4ade80;
  color: #000;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 8px 0 0 8px;
  font-weight: 400;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.xprofit-badge.negative {
  background: #ef4444;
  color: #fff;
}

/* ───────── Badges - Left Side ───────── */
.floor-change-badge {
  position: absolute;
  top: var(--badge-margin-top);
  left: 0px;
  background: #4ade80;
  color: #000;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 0 8px 8px 0;
  font-weight: 400;
  cursor: help;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.floor-change-badge.negative {
  background: #ef4444;
  color: #fff;
}

/* ───────── Pre-market Badge ───────── */
.premarket-badge {
  position: absolute;
  top: 72px;
  left: 0px;
  color: rgb(255 255 255);
  font-size: 0.7rem;
  font-weight: 400;
  background: rgb(84 116 170 / 70%);
  padding: 0px 6px;
  border-radius: 0px 8px 8px 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ───────── Mobile Responsive ───────── */
@media (max-width: 700px) {
  .card-img-wrapper {
    width: 75px;
    height: 75px;
  }

  .card {
    padding: 4px;
  }

  .premarket-badge {
    top: 65px;
  }
}