/* Import Google Fonts specified in HTML */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&family=Fira+Code&display=swap');

/* Apply base font to the entire page */
body {
    font-family: 'Sarabun', sans-serif;
}

/* Style for the active navigation button */
.nav-btn.active {
    background-color: #7c3aed; /* Corresponds to Tailwind's purple-600 */
    color: white;
    font-weight: bold;
}

/* Fade-in animation for section transitions */
.section {
    animation: fadeIn 0.5s ease-in-out;
}

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

/* Styling for code blocks */
.code-block {
    background-color: #1e293b; /* Corresponds to Tailwind's slate-800 */
    color: #e2e8f0; /* Corresponds to Tailwind's slate-200 */
    font-family: 'Fira Code', monospace;
}

/* Pastel color themes for info boxes */
.pastel-blue { background-color: #e0f2fe; color: #0c4a6e; }
.pastel-green { background-color: #dcfce7; color: #14532d; }
.pastel-yellow { background-color: #fef9c3; color: #713f12; }
.pastel-pink { background-color: #fce7f3; color: #831843; }
.pastel-purple { background-color: #f3e8ff; color: #581c87; }

/* Background for the certificate */
.certificate-bg {
    background: linear-gradient(135deg, #4c1d95, #be185d); /* purple-900 to pink-700 */
}

/* Styling for quiz result messages */
.quiz-result-correct {
    color: #16a34a; /* green-600 */
    font-weight: bold;
    border-left: 4px solid #16a34a;
    padding-left: 1rem;
    background-color: #f0fdf4; /* green-50 */
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.quiz-result-incorrect {
    color: #dc2626; /* red-600 */
    font-weight: bold;
    border-left: 4px solid #dc2626;
    padding-left: 1rem;
    background-color: #fef2f2; /* red-50 */
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

/* Custom Modal Animation */
#custom-alert-modal > div, #quiz-success-modal > div {
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- CORRECTED: For the Admin ON/OFF buttons --- */
#adsense-on-btn.active {
    background-color: #22c55e; /* green-500 */
    font-weight: bold;
}

#adsense-off-btn.active {
    background-color: #4b5563; /* gray-600 */
    font-weight: bold;
}