/* Custom adjustments for Arabic Typography and animations */
@layer utilities {
  .font-amiri {
    font-family: 'Amiri', serif;
  }
}

/* Keyframe animations */
@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2s infinite ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Choice button states */
.choice-btn {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.choice-btn:hover:not(:disabled) {
  border-color: #1B4D3E;
  background-color: #F0FDF4;
  transform: translateY(-1px);
}

.choice-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.choice-btn.selected-correct {
  background-color: #DCFCE7 !important;
  border-color: #16A34A !important;
  color: #14532D !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.choice-btn.selected-wrong {
  background-color: #FEE2E2 !important;
  border-color: #DC2626 !important;
  color: #7F1D1D !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.choice-btn.reveal-correct {
  background-color: #ECFDF5 !important;
  border-color: #10B981 !important;
  color: #065F46 !important;
  border-style: dashed !important;
}

/* Print Styles for Certificate */
@media print {
  header, footer, #welcomeScreen, #quizScreen, #resultBannerCard, #reviewQuestionsList, #restartQuizBtn, #downloadCertBtn, #printCertBtn, .flex.items-center.justify-between.px-2 {
    display: none !important;
  }
  
  body {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #resultScreen, #certificateWrapper, #certificateCard {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1cm !important;
    box-shadow: none !important;
    border-width: 4px !important;
  }
}