/* =========================
   Pack Card Styles
   ========================= */

.pack-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--spacing-unit) * 2.0);
  position: relative;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}

.pack-card .pack-count {
  background: var(--color-accent);
  border: 3px solid var(--color-accent-dark);
  border-radius: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 0.85rem;
  text-align: center;
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  z-index: 10;
}

.pack-card .pack-remaining {
  color: var(--color-text-subtle);
  font-weight: 800;
  line-height: 1;
  text-align: left;
}

.pack-card .pack-title {
  font-size: clamp(1.2rem, 1rem + 1.5vw, 1.5rem);
  font-weight: 700;
}

.pack-card .pack-wrap {
  display: block;
  margin: auto;
  margin-top: -30px;
  margin-bottom: -30px;
  opacity: 0.5;
  width: 75%;
}

.pack-card .pack-meta {
  font-size: clamp(0.8rem, 0.7rem + 1vw, 1rem);
  color: var(--color-text-muted);
}

.pack-card .pack-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;
}

.pack-card .pack-rarities {
  display: flex;
  gap: calc(var(--spacing-unit) * 0.15);
  margin: 10px auto;
}

.pack-card .pack-rarities .pack-rarity-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 0.7);
  background: color-mix(in srgb, var(--rarity-color) 18%, transparent);
  border: 2px solid var(--rarity-color);
  margin-bottom: calc(var(--spacing-unit) * 0.5);
  text-transform: uppercase;
  width: 86px;
}

.pack-card .pack-rarities .pack-rarity-box .pack-rarity-count {
  font-size: clamp(1rem, 0.7rem + 1.5vw, 1.2rem);
  font-weight: 800;
  line-height: 1;
}

.pack-card .pack-rarities .pack-rarity-box .pack-rarity-label {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
}

.pack-card .pack-rarities .pack-rarity-box-lg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-unit) * 0.7);
  background: color-mix(in srgb, var(--rarity-color) 18%, transparent);
  border: 2px solid var(--rarity-color);
  margin-bottom: -15px;
  text-transform: uppercase;
  width: 184px;
}

.pack-card .pack-rarities .pack-rarity-box-lg .pack-rarity-count {
  font-weight: 800;
  line-height: 1;
}

.pack-card .pack-rarities .pack-rarity-box-lg .pack-rarity-label {
  font-weight: 600;
  line-height: 1;
}

/* Pack Buttons */

.pack-card .buy-pack-button {
  background: transparent;
  border: 1px solid var(--rarity-legendary);
  border-radius: var(--border-radius);
  font-weight: 600;
  width: 100%;
  padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.25);
  color: var(--rarity-legendary);
  font-weight: 800;
  text-transform: uppercase;
  width: 100%;
}

.pack-card .buy-pack-button:hover,
.pack-card .buy-pack-button:focus-visible {
  border-color: #ac8312;
  color: #ac8312;
}

.pack-card .buy-pack-button:disabled,
.pack-card .buy-pack-button.disabled {
  background-color: #6b6b6b;
  border-color: #6b6b6b;
  color: #d0d0d0;
}

.pack-card .open-pack-button {
  background: #004a99;
  border: 1px solid #002349;
  border-radius: var(--border-radius);
  font-weight: 600;
  width: 100%;
  padding: 12px 12px;
  font-weight: 800;
  text-transform: uppercase;
  width: 100%;
}


.pack-card[data-pack-id] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--division-olympics-wc-cc) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--division-olympics-wc-cc);
  border-radius: var(--border-radius);
  box-shadow: 0 0 24px var(--division-olympics-wc-cc);
}

.pack-card[data-pack-id="1"] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--rarity-common) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--rarity-common);
  border-radius: var(--border-radius);
  box-shadow: 0 0 calc(var(--spacing-unit) * 0.5) var(--rarity-common);
}

.pack-card[data-pack-id="2"] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--rarity-rare) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--rarity-rare);
  border-radius: var(--border-radius);
  box-shadow: 0 0 calc(var(--spacing-unit) * 1) var(--rarity-rare);
}

.pack-card[data-pack-id="3"] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--rarity-epic) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--rarity-epic);
  border-radius: var(--border-radius);
  box-shadow: 0 0 calc(var(--spacing-unit) * 1.5) var(--rarity-epic);
}

.pack-card[data-pack-id="4"] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--rarity-legendary) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--rarity-legendary);
  border-radius: var(--border-radius);
  box-shadow: 0 0 calc(var(--spacing-unit) * 2) var(--rarity-legendary);
}

.pack-card[data-pack-id="5"] {
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--rarity-all-star) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 3px solid var(--rarity-all-star);
  border-radius: var(--border-radius);
  box-shadow: 0 0 calc(var(--spacing-unit) * 2) var(--rarity-all-star);
}