/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Flashcard 3D flip styles */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

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

/* Quiz feedback styles */
.feedback-correct {
  background-color: #d1fae5;
  border: 1px solid #10b981;
  color: #065f46;
}

.feedback-incorrect {
  background-color: #fee2e2;
  border: 1px solid #ef4444;
  color: #991b1b;
}

.option-btn.correct {
  background-color: #d1fae5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}

.option-btn.incorrect {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* Prose styling for summary */
.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose strong {
  font-weight: 600;
}