/* === RDI BADGE GRID === */
.rdi-badge-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

/* === 3D FLIP CARD === */
.rdi-badge-flip {
  perspective: 1000px;
  background: transparent;
}

.rdi-badge-inner {
  position: relative;
  width: 100%;
  height: 240px;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
  cursor: pointer;
}

.rdi-badge-flip:hover .rdi-badge-inner,
.rdi-badge-flip.active .rdi-badge-inner {
  transform: rotateY(180deg);
}

/* FRONT & BACK */
.rdi-badge-front, .rdi-badge-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* FRONT SIDE */
.rdi-badge-front {
  background: linear-gradient(160deg, #111 0%, #2a2a2a 100%);
  color: #fff;
}

/* BACK SIDE */
.rdi-badge-back {
  background: linear-gradient(160deg, #1e1e1e 0%, #3a3a3a 100%);
  color: #ccc;
  transform: rotateY(180deg);
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  padding: 25px 18px;
}

/* IMAGE / ICON */
.rdi-badge-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  margin-bottom: 10px;
}
.rdi-badge-img img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.rdi-badge-img i {
  font-size: 42px;
  color: #29ff26;
  text-shadow: 0 0 10px rgba(41,255,38,0.5);
}

/* TEXTS */
.rdi-badge-name {
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0;
}

.rdi-badge-coin {
  color: #29ff26;
  font-weight: 700;
  font-size: 15px;
}

.rdi-badge-desc {
  padding: 0 10px;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .rdi-badge-inner {
    height: 280px;
  }
}

/* === Középre igazítás fix === */
.rdi-badge-front,
.rdi-badge-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.rdi-badge-name,
.rdi-badge-desc,
.rdi-badge-coin {
  text-align: center !important;
  width: 100%;
  word-wrap: break-word;
}

.rdi-badge-desc {
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.4;
}