/* Basic body styling for smooth transitions if needed */
body {
    transition: background-color 0.5s, color 0.5s;
}

/* Additional custom styles can go here if Tailwind isn't enough */

/* Styling for quiz options */
.quiz-option {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0; /* Tailwind gray-300 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.quiz-option:hover {
    background-color: #f7fafc; /* Tailwind gray-100 */
}

.quiz-option.selected {
    background-color: #ebf8ff; /* Tailwind blue-100 */
    border-color: #90cdf4; /* Tailwind blue-300 */
    color: #2b6cb0; /* Tailwind blue-700 for text */
}

.dark .quiz-option {
    border: 1px solid #4a5568; /* Tailwind dark:gray-600 */
    background-color: #2d3748; /* Tailwind dark:gray-700 */
}

.dark .quiz-option:hover {
    background-color: #4a5568; /* Tailwind dark:gray-600 */
}

.dark .quiz-option.selected {
    background-color: #2c5282; /* Tailwind dark:blue-800 adjust as needed */
    border-color: #63b3ed; /* Tailwind dark:blue-400 adjust */
    color: #bee3f8; /* Tailwind dark:blue-200 for text */
}


/* Styling for correct/incorrect answers in review */
.correct-answer-review {
    color: #38a169; /* Tailwind green-600 */
    font-weight: bold;
}

.user-answer-incorrect {
    color: #e53e3e; /* Tailwind red-600 */
    text-decoration: line-through;
}

.dark .correct-answer-review {
    color: #68d391; /* Tailwind dark:green-400 */
}

.dark .user-answer-incorrect {
    color: #fc8181; /* Tailwind dark:red-400 */
}

/* Simple slide-in animation for result page */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Applied to the card within result page for consistency with initial build behavior */
#result-page > .card {
    animation: slideInUp 0.5s ease-out forwards;
}
/* If result page itself should slide, it would be #result-page.slide-in as before */
/* For now, matching the HTML structure where .card was added to the result div */


#confetti-container { /* Ensured this is fixed for viewport coverage */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Ensure select text color is visible in dark mode, already handled in index.html by adding dark:text-gray-100 to select tags */
/* Dark mode toggle button icons */
#dark-mode-toggle .text-yellow-500 { color: #F59E0B; }
#dark-mode-toggle .text-gray-400 { color: #9CA3AF; }


/* Ensure hidden class works as expected if not using Tailwind's hidden */
.hidden {
    display: none !important;
}

/* Custom select arrow styling if needed beyond Tailwind, but initial build relied on browser default or simple Tailwind */
select {
    /* appearance-none; Tailwind class can also be used in HTML */
    /* For initial build, likely used browser default or very minimal styling for select arrow */
}
label { /* General label color for dark mode if not overridden by more specific selectors */
    /* color: #374151; /* gray-700 */ /* Reverted to rely on HTML for this */
}
.dark label {
    /* color: #D1D5DB; /* gray-300 */ /* Reverted to rely on HTML for this */
}

/* SVG Timer Styles */
#timer-wrapper {
    /* Sizing is handled by Tailwind classes in HTML (w-20 h-20 sm:w-24 sm:h-24) */
}

.timer-svg-bg {
    stroke: #e5e7eb; /* Tailwind gray-200 */
}
.dark .timer-svg-bg {
    stroke: #4b5563; /* Tailwind gray-600 */
}

.timer-svg-progress {
    stroke: #3b82f6; /* Tailwind blue-500 */
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}
.dark .timer-svg-progress {
    stroke: #60a5fa; /* Tailwind blue-400 */
}

.timer-svg-progress.warning {
    stroke: #f59e0b; /* Tailwind amber-500 */
}
.dark .timer-svg-progress.warning {
    stroke: #fcd34d; /* Tailwind amber-300 */
}

.timer-svg-progress.danger {
    stroke: #ef4444; /* Tailwind red-500 */
    animation: pulseDanger 1s infinite ease-in-out;
}
.dark .timer-svg-progress.danger {
    stroke: #f87171; /* Tailwind red-400 */
}

#timer-text {
    /* Text color and font size handled by Tailwind in HTML */
}

@keyframes pulseDanger {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Result Page Enhancements */
#score-summary #score, #score-summary #percentage {
    font-size: 1.75rem; /* text-2xl */
    color: #3b82f6; /* Tailwind blue-500 */
    padding: 0.25rem 0.5rem;
    /* background-color: #eff6ff; /* Tailwind blue-100 */
    /* border-radius: 0.25rem; */
}
.dark #score-summary #score, .dark #score-summary #percentage {
    color: #60a5fa; /* Tailwind blue-400 */
    /* background-color: #1e3a8a; /* Tailwind blue-800 */
}

#result-message {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* medium */
}

/* Icons for review section (if not already perfectly styled from initial build) */
.user-answer-incorrect::before {
    content: "✕ "; /* Cross mark */
    color: #ef4444; /* Tailwind red-500 */
    font-weight: bold;
    margin-right: 0.25rem;
}
.dark .user-answer-incorrect::before {
    color: #f87171; /* Tailwind red-400 */
}

.correct-answer-review::before {
    content: "✓ "; /* Check mark */
    color: #10b981; /* Tailwind green-500 */
    font-weight: bold;
    margin-right: 0.25rem;
}
.dark .correct-answer-review::before {
    color: #34d399; /* Tailwind green-400 */
}

/* Styling for each item in the detailed review list */
#incorrect-answers-list > div {
    padding: 0.75rem; /* p-3 */
    margin-bottom: 0.75rem; /* mb-3 */
    border-left-width: 4px;
}

#incorrect-answers-list > div .user-answer-incorrect {
   border-left-color: #ef4444; /* red-500 */
}
#incorrect-answers-list > div .correct-answer-review {
   /* No specific border needed here as it's the correct one */
}


/* Motivational Quote Section */
#motivational-quote p {
    /* Tailwind classes in HTML handle this mostly */
    /* font-style: italic; done in html */
}

/* General Button Base Enhancements */
.btn-base {
    /* Tailwind already provides 'transition duration-300', which is good. */
    /* Adding transform for hover/active states */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    will-change: transform; /* Hint for browser performance */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind shadow-md */
}

.btn-base:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02); /* Slight lift and scale */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-lg */
    /* Specific background hover colors are still handled by Tailwind classes on each button */
}

.btn-base:active:not(:disabled) {
    transform: translateY(0px) scale(1); /* Back to normal or slightly pressed */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* Tailwind shadow-sm or inner shadow */
}

.btn-base:focus:not(:disabled) {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity)); /* Default blue-500 focus ring */
}
.dark .btn-base:focus:not(:disabled) {
    --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity)); /* Lighter blue for dark mode focus */
}

/* Dark Mode Toggle Button Specific Hover/Focus (it's already rounded-full) */
#dark-mode-toggle.btn-base:hover:not(:disabled) {
    /* Tailwind classes like hover:bg-gray-300 dark:hover:bg-gray-600 already handle this. */
    /* If more distinction is needed, it can be added here */
    transform: scale(1.1); /* Just scale for icon button */
}
#dark-mode-toggle.btn-base:active:not(:disabled) {
    transform: scale(1);
}
#dark-mode-toggle.btn-base:focus:not(:disabled) {
     /* Use a ring that fits the circular button */
    --tw-ring-offset-width: 0px; /* No offset for circular tight ring */
    --tw-ring-color: rgba(96, 165, 250, 0.7); /* Lighter blue, slightly transparent */
}

/* Quiz Option Enhancements */
.quiz-option {
    /* display: block; (already set) */
    /* padding: 0.75rem 1rem; (already set) */
    /* margin-bottom: 0.5rem; (already set) */
    /* border: 1px solid #e2e8f0; (already set) */
    /* border-radius: 0.375rem; (already set) */
    /* cursor: pointer; (already set) */
    /* transition: background-color 0.2s, border-color 0.2s; (original) */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative; /* For pseudo-element positioning */
}

.quiz-option:hover {
    /* background-color: #f7fafc; (original hover) */
    border-color: #60a5fa; /* Tailwind blue-400 for hover border */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.dark .quiz-option:hover {
    border-color: #3b82f6; /* Tailwind blue-500 for dark hover border */
}

.quiz-option.selected {
    /* background-color: #ebf8ff; (original selected bg) */
    /* border-color: #90cdf4; (original selected border) */
    /* color: #2b6cb0; (original selected text) */
    background-color: #EBF8FF; /* Tailwind blue-100 */
    border-color: #63B3ED; /* Tailwind blue-400 */
    color: #2C5282; /* Tailwind blue-800 */
    font-weight: 600; /* semibold */
    box-shadow: 0 0 0 2px #63B3ED; /* Ring effect for selected */
    padding-right: 2.5rem; /* Make space for checkmark icon */
}

.dark .quiz-option.selected {
    background-color: #2A4365; /* Tailwind blue-800 (a bit darker than previous blue-800 for variety) */
    border-color: #63B3ED; /* Tailwind blue-400 */
    color: #EBF8FF; /* Tailwind blue-100 */
    box-shadow: 0 0 0 2px #63B3ED;
}

/* Checkmark Icon for selected option */
.quiz-option.selected::after {
    content: '✓';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem; /* text-xl */
    font-weight: bold;
    color: #38A169; /* Tailwind green-600 */
}
.dark .quiz-option.selected::after {
    color: #68D391; /* Tailwind green-400 */
}

/* Hide radio button, but keep it accessible */
.quiz-option input[type="radio"].sr-only { /* Ensure this class is on the input in HTML */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}