/* Mint badges (pack vs scan + mint number) */

.gp-mint-overlay {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
  z-index: 5;
}

.gp-mint-overlay-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gp-mint-overlay-top-left,
.gp-mint-overlay-top-right,
.gp-mint-overlay-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gp-mint-overlay-top-right {
  justify-content: flex-end;
}

.gp-mint-overlay-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.gp-mint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  user-select: none;
}

.gp-mint-pill--serial {
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.gp-mint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.gp-mint-pill--tier-street { color: rgba(255, 255, 255, 0.9); border-color: rgba(148, 163, 184, 0.35); }
.gp-mint-pill--tier-street .gp-mint-dot { background: #94a3b8; }

.gp-mint-pill--tier-neon { color: rgba(34, 211, 238, 0.95); border-color: rgba(34, 211, 238, 0.35); }
.gp-mint-pill--tier-neon .gp-mint-dot { background: #22d3ee; }

.gp-mint-pill--tier-skye { color: rgba(96, 165, 250, 0.95); border-color: rgba(96, 165, 250, 0.32); }
.gp-mint-pill--tier-skye .gp-mint-dot { background: #60a5fa; }

.gp-mint-pill--tier-nova { color: rgba(245, 158, 11, 0.95); border-color: rgba(245, 158, 11, 0.34); }
.gp-mint-pill--tier-nova .gp-mint-dot { background: #f59e0b; }

.gp-mint-pill--tier-cosmic { color: rgba(255, 255, 255, 0.95); border-color: rgba(188, 19, 254, 0.42); }
.gp-mint-pill--tier-cosmic .gp-mint-dot { background: #bc13fe; }

.gp-mint-pill--source-scan { border-color: rgba(255, 255, 255, 0.14); }
.gp-mint-pill--source-pack { border-color: rgba(188, 19, 254, 0.32); }

.gp-mint-overlay--hero {
  inset: 14px;
}

.gp-mint-overlay--hero .gp-mint-pill {
  padding: 8px 12px;
  font-size: 12px;
}

.gp-mint-overlay--hero .gp-mint-dot {
  width: 9px;
  height: 9px;
}