/* ============================================
   OPE Osakidetza 2026 - Custom Styles
   ============================================ */

/* Smooth transitions for dark mode */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Option Buttons (Quiz Answers)
   ============================================ */
.option-btn {
    @apply w-full text-left p-4 rounded-xl border-2 transition-all duration-200 cursor-pointer;
    @apply border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
    @apply hover:border-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-900/20;
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
}

.option-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.option-btn.selected {
    @apply border-emerald-500 bg-emerald-50 dark:bg-emerald-900/30 dark:border-emerald-400;
    @apply shadow-md;
}

.option-btn.correct {
    @apply border-green-500 bg-green-50 dark:bg-green-900/30 dark:border-green-400;
}

.option-btn.incorrect {
    @apply border-red-500 bg-red-50 dark:bg-red-900/30 dark:border-red-400;
}

.option-btn.disabled {
    @apply cursor-default opacity-70 pointer-events-none;
}

/* Option label (A, B, C, D) */
.option-label {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold;
    @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
    @apply mr-3 flex-shrink-0;
}

.selected .option-label {
    @apply bg-emerald-500 text-white;
}

.correct .option-label {
    @apply bg-green-500 text-white;
}

.incorrect .option-label {
    @apply bg-red-500 text-white;
}

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
    @apply h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden;
}

.progress-bar-fill {
    @apply h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400;
    transition: width 0.5s ease-in-out;
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ============================================
   Fade-in Animation
   ============================================ */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-fast {
    animation: fadeInFast 0.2s ease-out;
}

@keyframes fadeInFast {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Question transition */
.question-enter {
    animation: questionSlideIn 0.3s ease-out;
}

@keyframes questionSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

.dark * {
    scrollbar-color: #4b5563 #1f2937;
}

/* ============================================
   Timer Circle
   ============================================ */
.timer-circle {
    @apply relative inline-flex items-center justify-center;
    @apply w-20 h-20 rounded-full;
    @apply border-4 border-gray-200 dark:border-gray-700;
    @apply text-2xl font-bold;
    @apply text-gray-900 dark:text-white;
    transition: border-color 0.3s ease;
}

.timer-circle.warning {
    @apply border-amber-400 text-amber-600 dark:text-amber-400;
}

.timer-circle.danger {
    @apply border-red-400 text-red-600 dark:text-red-400;
    animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   Card Hover Effects
   ============================================ */
.card-hover {
    @apply transition-all duration-200;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Stats Counter Animation
   ============================================ */
.stat-number {
    @apply text-3xl font-bold;
    transition: all 0.3s ease;
}

/* ============================================
   Loading Spinner
   ============================================ */
.spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 dark:border-gray-600 rounded-full;
    border-top-color: #10b981;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Mobile Touch Optimization
   ============================================ */
@media (max-width: 640px) {
    .option-btn {
        @apply p-3 text-sm;
        min-height: 48px;
    }

    .option-label {
        @apply w-7 h-7 text-xs;
    }

    .timer-circle {
        @apply w-16 h-16 text-xl;
    }
}

/* ============================================
   Toast Notification
   ============================================ */
.toast {
    @apply fixed bottom-4 right-4 z-50 max-w-sm p-4 rounded-xl shadow-xl;
    @apply transform translate-y-0 opacity-100;
    animation: toastIn 0.3s ease-out;
}

.toast.toast-out {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* ============================================
   Explanation Box
   ============================================ */
.explanation-box {
    @apply p-4 rounded-xl border;
    @apply bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800;
    @apply text-sm text-blue-800 dark:text-blue-200;
}

/* ============================================
   Score Badge
   ============================================ */
.score-badge {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium;
}

.score-badge.excellent {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200;
}

.score-badge.good {
    @apply bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-200;
}

.score-badge.average {
    @apply bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200;
}

.score-badge.poor {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200;
}