/* ---------------------------------------------------------
   8.3 – ROLLERPIAC FLIP TEXT CARD (V2 UI elem)
--------------------------------------------------------- */

.rp-flip {
  width: 260px;
  height: 120px;
  perspective: 1000px;
  cursor: pointer;
  margin: 20px auto;
}

.rp-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}

/* === HOVER → fordul meg === */
.rp-flip:hover .rp-flip-inner {
  transform: rotateY(180deg);
}

/* FRONT + BACK közös */
.rp-flip-front,
.rp-flip-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 14px;
  transition:
    background 0.6s ease-in-out,
    backdrop-filter 0.6s ease-in-out,
    border 0.6s ease-in-out;
}

/* === FRONT – row layout a bal oldali ikon miatt === */
.rp-flip-front {
  flex-direction: row;      /* ikon bal, szöveg jobb */
  gap: 10px;                /* ikon és szöveg közti távolság */
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}

/* === BACK – középre igazított layout === */
.rp-flip-back {
  flex-direction: column;
  background: transparent;
  border: 1px solid transparent;
  transform: rotateY(180deg);
  color: #eee;
  font-size: 14px;
  line-height: 1.4;
}

/* FLIP után kap keretet + üveghatást */
.rp-flip:hover .rp-flip-back {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(10px);
}

/* === INFO IKON — bal oldalon, vertikálisan középen === */
.rp-flip-info-icon {
  font-size: 22px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.45));
  pointer-events: none; /* ne zavarja a flipet */
}