.flashcardcellpanel {
  /* 1. Setup the perspective for 3D */
  /* 2. The main element that rotates */
  /* State for the flipped card */
  /* 3. Common properties for the card faces */
  /* Ensure images take up the full space of their container */
  /* 4. Initial and Flipped States */
  /* The front face is visible by default */
  /* The back face is rotated 180 degrees initially, so it faces away */
}
.flashcardcellpanel .flashcard_holder {
  width: 100%;
  /* Or set a fixed width */
  height: auto;
  /* Or set a fixed height */
  position: relative;
  /* This creates the 3D space */
  perspective: 1000px;
}
.flashcardcellpanel .flashcard_flipper {
  position: relative;
  transition: transform 0.6s;
  /* Animation duration */
  transform-style: preserve-3d;
  /* Key for 3D flip */
  background-image: url('/images/placeholders/placeholder_flashcard.png');
  background-size: 100% 100%;
  background-position: center;
  aspect-ratio: 827 / 1181;
}
.flashcardcellpanel .flashcard_flipper.flipped {
  transform: rotateY(180deg);
}
.flashcardcellpanel .flashcard_face {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Hides the back side of the face when rotated away */
  backface-visibility: hidden;
  /* Important: makes the face fill the card holder */
  -webkit-backface-visibility: hidden;
  /* Improved spinner overlay styles */
}
.flashcardcellpanel .flashcard_face .spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.flashcardcellpanel .flashcard_face .spinner-overlay .spinner-content {
  text-align: center;
}
.flashcardcellpanel .flashcard_face .spinner-overlay .spinner-content img {
  display: block;
  margin: 0 auto 12px auto;
  opacity: 0.8;
}
.flashcardcellpanel .flashcard_face .spinner-overlay .spinner-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.flashcardcellpanel .flashcard_face img {
  width: 100%;
  height: auto;
  display: block;
}
.flashcardcellpanel .flashcard_front {
  transform: rotateY(0deg);
}
.flashcardcellpanel .flashcard_back {
  transform: rotateY(180deg);
}