:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --light-bg: #f8f9fa;
    --dark-bg: #1a202c;
    --light-text: #f8f9fa;
    --dark-text: #2c3e50;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --quiz-card-bg: #ffffff;
}

/* Navigation bar styles - ensuring visibility */
.nav-link {
    color: var(--light-text) !important;
}

.nav-link.active {
    background-color: var(--secondary-color);
    color: var(--light-text);
}

/* Chinese text styles */
.chinese-text-nav {
    font-size: 0.8em;
    opacity: 0.9;
    display: inline; /* This puts it on the same line */
    margin-left: 0.25rem; /* This adds a little space */
}

.chinese-text-body {
    font-size: 0.9em;
    color: #555;
    display: block;
}

/* Progress bar styles */
.progress-container {
    width: 100%;
    height: 6px;
    background-color: #e0e0e0;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--accent-color));
    transition: width 0.3s ease;
}

/* Content section styles */
.content-section {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
}

/* Header animation */
.header-animation {
    animation: gradient-shift 10s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating icons */
.floating-icon {
    position: absolute;
    animation: float 6s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Fade in animation */
.animate-fadeInDown {
    animation: fadeInDown 1s ease-out forwards;
}

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

/* Knowledge check styles */
.blank-input {
    border: 2px dashed var(--accent-color);
    background: transparent;
    padding: 4px 8px;
    font-weight: bold;
    color: var(--primary-color);
    min-width: 100px;
    text-align: center;
    transition: all 0.3s ease;
}

.blank-input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.blank-input.correct {
    border-color: var(--success-color);
    background-color: rgba(46, 204, 113, 0.1);
    color: var(--success-color);
}

.blank-input.incorrect {
    border-color: var(--accent-color);
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--accent-color);
}

/* Scroll up button */
#scrollUpBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--secondary-color);
    color: var(--light-text);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollUpBtn.visible {
    opacity: 1;
    transform: translateY(0);
}

#scrollUpBtn:hover {
    background-color: var(--primary-color);
}

/* --- FINAL QUIZ STYLES (SVG METHOD) --- */
.quiz-option {
    display: flex;
    align-items: center;
    position: relative; /* Add this critical line */
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.quiz-option:hover {
    background-color: rgba(52, 152, 219, 0.1);
}

/* Hide the browser's default radio button */
.quiz-option input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}

/* Create a custom radio button using SVG backgrounds */
.checkmark {
    height: 22px;
    width: 22px;
    margin-right: 12px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    /* Default State: Empty Circle Icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3c/svg%3e");
}

/* Dark mode style for the empty circle */
body.dark-mode .checkmark {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3c/svg%3e");
}

/* Selected State: Blue Circle with Checkmark Icon */
.quiz-option.is-selected .checkmark {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='11' fill='%233498db' stroke='none'/%3e%3cpath d='M9 12l2 2 4-4'%3e%3c/path%3e%3c/svg%3e");
}

.quiz-result-correct {
    color: var(--success-color);
    font-weight: bold;
}

.quiz-result-incorrect {
    color: var(--accent-color);
    font-weight: bold;
}

/* Summary card styles */
.summary-card {
    position: relative;
    min-height: 200px;
    cursor: pointer;
}

.summary-card .card-front,
.summary-card .card-back {
    transition: all 0.3s ease;
}

/* Case study card styles */
.case-study-card {
    transition: all 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

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

/* Responsive styles */
@media (max-width: 768px) {
    .nav-links {
        font-size: 0.9rem;
    }
    
    .chinese-text-nav {
        font-size: 0.7em;
    }
    
    .content-section {
        padding: 1.5rem;
    }
}

/* Print styles */
@media print {
    .nav-links,
    #scrollUpBtn,
    .btn {
        display: none;
    }
    
    .content-section {
        page-break-inside: avoid;
        box-shadow: none;
    }
}
/* Dark Mode Styles */
body.dark-mode {
    --light-bg: #1a202c;
    --dark-text: #f8f9fa;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --quiz-card-bg: #2c3e50;
}

/* Specific overrides for dark mode */
body.dark-mode .bg-white {
    background-color: #2c3e50; /* Dark card background */
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .chinese-text-body {
    color: #bdc3c7; /* Lighter gray text */
}

body.dark-mode .info-box {
    background-color: #2c3e50 !important;
    border-color: var(--secondary-color) !important;
}

body.dark-mode .case-study-card,
body.dark-mode .bg-gradient-to-br {
    background-image: none;
    background-color: #2d3748;
}

body.dark-mode .text-blue-900,
body.dark-mode .text-green-900,
body.dark-mode .text-orange-900 {
    color: var(--light-text);
}

body.dark-mode .text-blue-700 { color: #3498db; }
body.dark-mode .text-green-700 { color: #2ecc71; }
body.dark-mode .text-orange-700 { color: #f39c12; }

body.dark-mode .bg-white\/80 {
    background-color: rgba(26, 32, 44, 0.8);
}

body.dark-mode .knowledge-check-box,
body.dark-mode .bg-yellow-50 {
    background-color: #3e3e3e;
    border-color: var(--warning-color);
}

body.dark-mode .text-yellow-700 {
    color: var(--warning-color);
}

body.dark-mode .blank-input {
    color: var(--light-text);
    border-color: var(--accent-color);
}

body.dark-mode .blank-input.correct {
    color: var(--success-color);
    background-color: rgba(46, 204, 113, 0.1);
}
/* --- DEFINITIVE QUIZ STYLES - DO NOT EDIT --- */

/* This rule styles the container for each answer */
.quiz-option {
    display: flex;
    align-items: center;
    border: 2px solid transparent; /* Add a border for spacing */
    border-radius: 0.5rem;
    margin-bottom: 10px;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* This rule styles the custom checkmark icon's space */
.quiz-option .checkmark {
    height: 22px;
    width: 22px;
    margin-right: 12px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    /* Default State: An empty gray circle */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
}

/* When an option is selected, add a highlight and change the icon */
.quiz-option.is-selected {
    border-color: #3498db; /* Blue border for highlight */
    background-color: rgba(52, 152, 219, 0.1); /* Faint blue background for highlight */
}

.quiz-option.is-selected .checkmark {
    /* Selected State: A solid blue circle with a white checkmark */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3ccircle cx='12' cy='12' r='11' fill='%233498db'/%3e%3cpath stroke='white' stroke-width='2' d='M9 12l2 2 4-4'/%3e%3c/svg%3e");
}

/* Dark mode adjustments for the empty circle icon */
body.dark-mode .quiz-option .checkmark {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
}

/* Make sure the selected icon doesn't change in dark mode */
body.dark-mode .quiz-option.is-selected .checkmark {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3ccircle cx='12' cy='12' r='11' fill='%233498db'/%3e%3cpath stroke='white' stroke-width='2' d='M9 12l2 2 4-4'/%3e%3c/svg%3e");
}
/* --- FINAL DARK MODE CONTRAST FIXES --- */

/* Fixes all main titles and headlines (like "Welcome to Unit 5!") that use the primary color */
body.dark-mode .text-\[var\(--primary-color)\] {
    color: #e2e8f0; /* Changes dark blue text to a light gray/white */
}

/* Fixes the info box titles (like "What is Consumer Protection Law?") */
body.dark-mode .text-\[var\(--secondary-color)\] {
    color: #63b3ed; /* Makes the blue text a lighter, more readable blue */
}

/* Fixes light gray backgrounds, like in tables and the quiz score box */
body.dark-mode .bg-gray-100 {
    background-color: #2d3748; /* Changes light gray background to dark gray */
}

/* Ensures table header text is light */
body.dark-mode th {
    color: #cbd5e0;
}

/* Specifically fixes the text color of the quiz score */
body.dark-mode #quizScore {
    color: #e2e8f0;
}
/* --- FINAL BATCH OF DARK MODE CONTRAST FIXES --- */

/* A more forceful rule to fix all h2, h3, and h4 titles */
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: #e2e8f0; /* A light, readable gray */
}

/* Fixes for all light-colored backgrounds used in case studies and info boxes */
body.dark-mode .bg-yellow-100 {
    background-color: #4a4122;
    color: #fefce8;
}

body.dark-mode .bg-red-100 {
    background-color: #4c2b2b;
    color: #fee2e2;
}

body.dark-mode .bg-blue-50,
body.dark-mode .bg-blue-100 {
    background-color: #1e3a8a;
    color: #dbeafe;
}

body.dark-mode .bg-green-50,
body.dark-mode .bg-green-100 {
    background-color: #166534;
    color: #dcfce7;
}

body.dark-mode .bg-orange-50,
body.dark-mode .bg-orange-100 {
    background-color: #7c2d12;
    color: #fff7ed;
}

body.dark-mode .bg-purple-50,
body.dark-mode .bg-purple-100 {
    background-color: #581c87;
    color: #f3e8ff;
}

body.dark-mode .bg-indigo-50,
body.dark-mode .bg-indigo-100 {
    background-color: #312e81;
    color: #e0e7ff;
}

body.dark-mode .bg-sky-50 {
    background-color: #0c4a6e;
    color: #e0f2fe;
}

/* Fixes the text inside the verdict/analysis boxes to be lighter */
body.dark-mode .text-gray-700 {
    color: #cbd5e0;
}
/* Dark Mode Toggle Alignment and Glow Effect */
#darkModeToggle {
    top: 50%;
    transform: translateY(-50%);
    /* Added !important to guarantee this animation runs */
    animation: glow 2.5s ease-in-out infinite !important;
}

/* Keyframes for the pulsating glow animation */
@keyframes glow {
    0% {
        box-shadow: 0 0 2px rgba(255, 255, 200, 0.4);
    }
    50% {
        /* Drastically reduced size to 7px for a tight, subtle glow */
        box-shadow: 0 0 7px rgba(255, 255, 200, 0.7);
    }
    100% {
        box-shadow: 0 0 2px rgba(255, 255, 200, 0.4);
    }
}