.flip-card {
  perspective: 1000px;
  height: 100%;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  min-height: 360px; /* adjust as needed */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
.flip-indicator {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 1.1rem;
  color: #198754;
  opacity: 0.5;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.2s ease;
  pointer-events: none; /* optional: prevent hover click conflict */
}

.card-body {
  position: relative; /* required for indicator positioning */
}

.flip-indicator:hover {
  opacity: 1;
  transform: rotate(180deg);
}