/* Custom Styles for Quiz Tool */

/* Align with Site Styling */

/* Navbar Brand Styling */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

/* Active Link Styling */
.nav-link.active {
  font-weight: bold;
}

/* Button Hover Effect */
.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Footer Text Size */
footer p {
  font-size: 0.9rem;
}

/* Card Styling */
.card {
  border: none;
  margin-top: 20px;
}

.card-body {
  display: flex;
  flex-direction: column;
}

/* Option Buttons */
.option-btn {
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
}

.option-btn.correct {
  background-color: #d4edda; /* Light green */
  border-color: #c3e6cb;
}

.option-btn.incorrect {
  background-color: #f8d7da; /* Light red */
  border-color: #f5c6cb;
}

/* Disable pointer events during feedback */
.disable-pointer {
  pointer-events: none;
}

/* Progress Bar Styling */
.progress {
  height: 20px;
}

.progress-bar {
  transition: width 0.6s ease;
}

.progress-bar.bg-success {
  background-color: #28a745;
}

.progress-bar.bg-warning {
  background-color: #ffc107;
}

.progress-bar.bg-danger {
  background-color: #dc3545;
}

/* Score Display Color Coding */
#score-display {
  font-weight: bold;
}

.score-high {
  color: #28a745; /* Green for high scores */
}

.score-medium {
  color: #ffc107; /* Yellow for medium scores */
}

.score-low {
  color: #dc3545; /* Red for low scores */
}

/* Review Page Styles */
.review-item {
  margin-bottom: 20px;
}

.review-item.correct .card {
  border-left: 5px solid #28a745;
}

.review-item.incorrect .card {
  border-left: 5px solid #dc3545;
}

.review-item .card-body {
  position: relative;
}

.review-item .badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.review-item .option {
  margin-bottom: 5px;
}

.review-item .option.correct {
  font-weight: bold;
  color: #28a745;
}

.review-item .option.incorrect {
  font-weight: bold;
  color: #dc3545;
}

#retake-btn {
  width: 200px;
  margin-top: 20px;
}

/* Adjustments for Responsiveness */
@media (max-width: 576px) {
  .progress {
      height: 15px;
  }

  .option-btn {
      font-size: 0.9rem;
  }

  #score-display {
      font-size: 1rem;
  }
}

/* Styles for Skipped Questions */
.review-item.skipped .card {
  border-left: 5px solid #6c757d;
}

.review-item.skipped .badge {
  background-color: #6c757d; /* Bootstrap secondary color */
}

.option-btn.skipped {
  background-color: #e2e3e5; /* Light grey */
  border-color: #d6d8db;
}

/* Explanation Text */
.explanation {
  font-style: italic;
  color: #6c757d;
}

/* Ensure that the badge and question title stack on small screens */
@media (max-width: 576px) {
  .review-item .card-body .d-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-item .card-body .badge {
    margin-bottom: 0.5rem;
  }
}

/* Style for the badge */
.badge {
  font-size: 0.9em;
  padding: 0.5em 0.75em;
}

/* Highlight correct answers */
.option.correct {
  background-color: #d1e7dd; /* Light green */
}

/* Highlight incorrect answers */
.option.incorrect {
  background-color: #f8d7da; /* Light red */
}

/* Style for the review item */
.review-item .card {
  border-left: 5px solid #dc3545; /* Bootstrap's danger color */
}

/* Adjust badge positioning within the header container */
.review-item .card-body .badge {
  margin-right: 0.5rem;
}

/* Optional: Add some spacing between review items */
.review-item {
  margin-bottom: 15px;
}