/* Custom styles on top of Tailwind for the RTL Hebrew quiz app */

html, body {
  overscroll-behavior: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.option-btn {
  transition: all 0.15s ease;
}
.option-btn:active {
  transform: scale(0.98);
}

.option-btn.correct {
  background-color: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #166534 !important;
}
.option-btn.wrong {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}
.option-btn.selected-neutral {
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

.fade-in {
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.spinner {
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.bottom-nav-item.active {
  color: #2563eb;
}

textarea, input[type="text"], input[type="number"], select {
  font-family: 'Heebo', sans-serif;
}