/* ==========================================================================
   COURSE CONTENT DESIGN SYSTEM - Golden Template v2.0

   A comprehensive design system for professional corporate training courses.
   All classes are scoped under .course-content and prefixed with cc- to avoid
   conflicts with external frameworks like Tailwind.

   Table of Contents:
   1. Foundation & Typography
   2. Layout Components
   3. Callouts & Alerts
   4. Statistics & Data Display
   5. Navigation & Tabs
   6. Accordions & Reveals
   7. Steps & Progress
   8. Interactive Checklists
   9. Cards & Containers
   10. Scenarios & Assessments
   11. Micro-Checks & Knowledge Checks
   12. Banners & Highlights
   13. Tables & Data
   14. Badges & Tags
   15. Page Progress Header
   16. Glossary Component
   17. Certificate Preview
   18. Accessibility & Print
   19. Animations
   20. Responsive Design
   21. Utility Classes
   ========================================================================== */

/* ==========================================================================
   1. FOUNDATION & TYPOGRAPHY
   ========================================================================== */

.course-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #1e293b;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  padding: 2rem;
}

.course-content * {
  box-sizing: border-box;
}

.course-content h1,
.course-content h2,
.course-content h3,
.course-content h4,
.course-content h5,
.course-content h6 {
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
  margin-top: 0;
  margin-bottom: 1rem;
}

.course-content h1 {
  font-size: 1.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.course-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.course-content h3 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
  color: #1e293b;
}

.course-content h4 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
  color: #334155;
}

.course-content p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: #334155;
}

.course-content strong {
  font-weight: 600;
  color: #0f172a;
}

.course-content em {
  font-style: italic;
  color: #475569;
}

.course-content a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.course-content a:hover {
  color: #1e40af;
}

.course-content a:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}

.course-content ul,
.course-content ol {
  margin: 1.25rem 0;
  padding-left: 1.75rem;
}

.course-content li {
  margin-bottom: 0.625rem;
  color: #334155;
}

.course-content li::marker {
  color: #64748b;
}

.course-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #e2e8f0;
  background: #f8fafc;
  font-style: italic;
  color: #475569;
}

.course-content blockquote p:last-child {
  margin-bottom: 0;
}

.course-content code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.875em;
  background: #f1f5f9;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  color: #0f172a;
}

.course-content hr {
  border: none;
  height: 1px;
  background: #e2e8f0;
  margin: 2rem 0;
}

/* Lead paragraph - for introductions */
.course-content .cc-lead {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. LAYOUT COMPONENTS
   ========================================================================== */

.course-content .cc-page {
  max-width: 760px;
  margin: 0 auto;
}

.course-content .cc-section {
  margin-bottom: 2.5rem;
}

.course-content .cc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e2e8f0, transparent);
  margin: 2.5rem 0;
}

/* Two-column layout */
.course-content .cc-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .course-content .cc-columns {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3. CALLOUTS & ALERTS
   ========================================================================== */

.course-content .cc-callout {
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  border-left: 4px solid;
  position: relative;
}

.course-content .cc-callout-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.course-content .cc-callout-content {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.course-content .cc-callout-content p:last-child,
.course-content .cc-callout-content ul:last-child,
.course-content .cc-callout-content ol:last-child {
  margin-bottom: 0;
}

/* Callout variants */
.course-content .cc-callout-key {
  background: #f8fafc;
  border-color: #475569;
}

.course-content .cc-callout-key .cc-callout-title {
  color: #334155;
}

.course-content .cc-callout-key .cc-callout-title::before {
  content: '★';
  font-size: 1rem;
}

.course-content .cc-callout-info {
  background: #eff6ff;
  border-color: #3b82f6;
}

.course-content .cc-callout-info .cc-callout-title {
  color: #1d4ed8;
}

.course-content .cc-callout-info .cc-callout-title::before {
  content: 'ℹ';
  font-size: 1rem;
}

.course-content .cc-callout-warning {
  background: #fffbeb;
  border-color: #f59e0b;
}

.course-content .cc-callout-warning .cc-callout-title {
  color: #b45309;
}

.course-content .cc-callout-warning .cc-callout-title::before {
  content: '⚠';
  font-size: 1rem;
}

.course-content .cc-callout-danger {
  background: #fef2f2;
  border-color: #ef4444;
}

.course-content .cc-callout-danger .cc-callout-title {
  color: #b91c1c;
}

.course-content .cc-callout-danger .cc-callout-title::before {
  content: '⛔';
  font-size: 0.875rem;
}

.course-content .cc-callout-success {
  background: #f0fdf4;
  border-color: #22c55e;
}

.course-content .cc-callout-success .cc-callout-title {
  color: #15803d;
}

.course-content .cc-callout-success .cc-callout-title::before {
  content: '✓';
  font-size: 1rem;
  font-weight: bold;
}

.course-content .cc-callout-example {
  background: #fefce8;
  border-color: #eab308;
}

.course-content .cc-callout-example .cc-callout-title {
  color: #a16207;
}

.course-content .cc-callout-example .cc-callout-title::before {
  content: '💡';
  font-size: 1rem;
}

/* Definition callout - for key terms */
.course-content .cc-callout-definition {
  background: #faf5ff;
  border-color: #a855f7;
}

.course-content .cc-callout-definition .cc-callout-title {
  color: #7c3aed;
}

.course-content .cc-callout-definition .cc-callout-title::before {
  content: '📖';
  font-size: 1rem;
}

/* ==========================================================================
   4. STATISTICS & DATA DISPLAY
   ========================================================================== */

.course-content .cc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.course-content .cc-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: all 0.2s ease;
}

.course-content .cc-stat:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.course-content .cc-stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.course-content .cc-stat-label {
  display: block;
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* Stat with accent color */
.course-content .cc-stat-accent {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: none;
}

.course-content .cc-stat-accent .cc-stat-value {
  color: white;
}

.course-content .cc-stat-accent .cc-stat-label {
  color: #cbd5e1;
}

/* Stat variants */
.course-content .cc-stat-danger .cc-stat-value { color: #dc2626; }
.course-content .cc-stat-warning .cc-stat-value { color: #d97706; }
.course-content .cc-stat-success .cc-stat-value { color: #16a34a; }

/* ==========================================================================
   5. NAVIGATION & TABS
   ========================================================================== */

.course-content .cc-tabs {
  margin: 1.5rem 0;
}

.course-content .cc-tab-list {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  list-style: none;
  padding: 0;
  margin-top: 0;
}

.course-content .cc-tab-btn {
  padding: 0.875rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}

.course-content .cc-tab-btn:hover {
  color: #334155;
  background: #f8fafc;
}

.course-content .cc-tab-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.course-content .cc-tab-btn.active {
  color: #0f172a;
  border-bottom-color: #0f172a;
  font-weight: 600;
}

.course-content .cc-tab-panel {
  display: none;
  animation: ccFadeIn 0.3s ease;
}

.course-content .cc-tab-panel.active {
  display: block;
}

/* ==========================================================================
   6. ACCORDIONS & REVEALS
   ========================================================================== */

.course-content .cc-accordion {
  margin: 1.5rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.course-content .cc-accordion-item {
  border-bottom: 1px solid #e2e8f0;
}

.course-content .cc-accordion-item:last-child {
  border-bottom: none;
}

.course-content .cc-accordion-header {
  width: 100%;
  padding: 1.125rem 1.5rem;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
  text-align: left;
  transition: background 0.2s ease;
  font-family: inherit;
}

.course-content .cc-accordion-header:hover {
  background: #f1f5f9;
}

.course-content .cc-accordion-header:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.course-content .cc-accordion-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  color: #64748b;
  flex-shrink: 0;
}

.course-content .cc-accordion-item.open .cc-accordion-icon {
  transform: rotate(180deg);
}

.course-content .cc-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.course-content .cc-accordion-item.open .cc-accordion-content {
  max-height: 2000px;
}

.course-content .cc-accordion-body {
  padding: 1.5rem;
  background: white;
}

.course-content .cc-accordion-body p:last-child {
  margin-bottom: 0;
}

/* Progressive reveal */
.course-content .cc-reveal-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #1d4ed8;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

.course-content .cc-reveal-trigger:hover {
  color: #1e40af;
}

.course-content .cc-reveal-trigger:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.course-content .cc-reveal-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s ease;
}

.course-content .cc-reveal-trigger.open::after {
  transform: rotate(90deg);
}

.course-content .cc-reveal-content {
  display: none;
  padding: 1rem 0 0 1rem;
  border-left: 3px solid #e2e8f0;
  margin-left: 0.5rem;
  animation: ccSlideDown 0.3s ease;
}

.course-content .cc-reveal-content.open {
  display: block;
}

/* ==========================================================================
   7. STEPS & PROGRESS
   ========================================================================== */

.course-content .cc-steps {
  margin: 1.5rem 0;
}

.course-content .cc-step {
  display: flex;
  gap: 1rem;
  position: relative;
  padding-bottom: 1.5rem;
}

.course-content .cc-step:last-child {
  padding-bottom: 0;
}

.course-content .cc-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.course-content .cc-step-num {
  width: 36px;
  height: 36px;
  background: #0f172a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.course-content .cc-step-body {
  flex: 1;
  padding-top: 0.375rem;
}

.course-content .cc-step-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #0f172a;
  margin-bottom: 0.375rem;
}

.course-content .cc-step-desc {
  font-size: 0.9375rem;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

/* Step completed state */
.course-content .cc-step.completed .cc-step-num {
  background: #22c55e;
}

.course-content .cc-step.completed::before {
  background: #22c55e;
}

/* Progress bar */
.course-content .cc-progress {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
}

.course-content .cc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0f172a 0%, #334155 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Progress bar with label */
.course-content .cc-progress-wrapper {
  margin: 1.5rem 0;
}

.course-content .cc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.course-content .cc-progress-label strong {
  color: #0f172a;
}

/* ==========================================================================
   8. INTERACTIVE CHECKLISTS
   ========================================================================== */

.course-content .cc-checklist {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.course-content .cc-checklist-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #0f172a;
  margin-bottom: 1rem;
}

.course-content .cc-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.course-content .cc-check-item:last-child {
  margin-bottom: 0;
}

.course-content .cc-check-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.course-content .cc-check-item:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.course-content .cc-check-item.checked {
  background: #f0fdf4;
  border-color: #86efac;
}

.course-content .cc-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 0.125rem;
}

.course-content .cc-check-item.checked .cc-checkbox {
  background: #22c55e;
  border-color: #22c55e;
}

.course-content .cc-checkbox svg {
  display: none;
  color: white;
  width: 14px;
  height: 14px;
}

.course-content .cc-check-item.checked .cc-checkbox svg {
  display: block;
}

.course-content .cc-check-text {
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.course-content .cc-checklist-ready {
  display: none;
}

.course-content .cc-checklist-ready.show {
  display: block;
}

/* ==========================================================================
   9. CARDS & CONTAINERS
   ========================================================================== */

.course-content .cc-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.course-content .cc-card-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.course-content .cc-card-icon {
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}

.course-content .cc-card-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #0f172a;
  margin: 0;
}

.course-content .cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

/* Card hover effect */
.course-content .cc-card-interactive {
  cursor: pointer;
  transition: all 0.2s ease;
}

.course-content .cc-card-interactive:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* ==========================================================================
   10. SCENARIOS & ASSESSMENTS
   ========================================================================== */

.course-content .cc-scenario {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.course-content .cc-scenario:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.course-content .cc-scenario.selected {
  border-color: #0f172a;
  box-shadow: 0 0 0 1px #0f172a;
}

.course-content .cc-scenario-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.625rem;
}

.course-content .cc-scenario-text {
  font-size: 1rem;
  color: #1e293b;
  line-height: 1.65;
}

.course-content .cc-scenario-feedback {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  display: none;
}

.course-content .cc-scenario.revealed .cc-scenario-feedback {
  display: block;
  animation: ccFadeIn 0.3s ease;
}

/* Scenario with options */
.course-content .cc-scenario-options {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.course-content .cc-scenario-option {
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.course-content .cc-scenario-option:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.course-content .cc-scenario-option.selected {
  border-color: #0f172a;
  background: #f1f5f9;
}

.course-content .cc-scenario-option.correct {
  border-color: #22c55e;
  background: #f0fdf4;
}

.course-content .cc-scenario-option.incorrect {
  border-color: #ef4444;
  background: #fef2f2;
}

.course-content .cc-scenario-option-marker {
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: #64748b;
}

.course-content .cc-scenario-option.selected .cc-scenario-option-marker {
  background: #0f172a;
  border-color: #0f172a;
  color: white;
}

/* ==========================================================================
   11. MICRO-CHECKS & KNOWLEDGE CHECKS
   ========================================================================== */

/* Quick knowledge check - appears inline in content */
.course-content .cc-micro-check {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1px solid #d8b4fe;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.course-content .cc-micro-check-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.course-content .cc-micro-check-icon {
  width: 32px;
  height: 32px;
  background: #7c3aed;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.course-content .cc-micro-check-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b21a8;
  margin: 0;
}

.course-content .cc-micro-check-question {
  font-size: 1.0625rem;
  color: #1e293b;
  margin-bottom: 1rem;
  font-weight: 500;
}

.course-content .cc-micro-check-options {
  display: grid;
  gap: 0.5rem;
}

.course-content .cc-micro-check-option {
  padding: 0.875rem 1rem;
  background: white;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9375rem;
  color: #334155;
}

.course-content .cc-micro-check-option:hover {
  border-color: #c084fc;
  background: #faf5ff;
}

.course-content .cc-micro-check-option.selected {
  border-color: #7c3aed;
  background: #f5f3ff;
}

.course-content .cc-micro-check-option.correct {
  border-color: #22c55e;
  background: #f0fdf4;
}

.course-content .cc-micro-check-option.incorrect {
  border-color: #ef4444;
  background: #fef2f2;
}

.course-content .cc-micro-check-feedback {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
  animation: ccFadeIn 0.3s ease;
}

.course-content .cc-micro-check-feedback.show {
  display: block;
}

.course-content .cc-micro-check-feedback.correct {
  background: #f0fdf4;
  border: 1px solid #86efac;
}

.course-content .cc-micro-check-feedback.incorrect {
  background: #fef2f2;
  border: 1px solid #fca5a5;
}

.course-content .cc-micro-check-feedback-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.course-content .cc-micro-check-feedback.correct .cc-micro-check-feedback-title {
  color: #15803d;
}

.course-content .cc-micro-check-feedback.incorrect .cc-micro-check-feedback-title {
  color: #b91c1c;
}

/* Think About It - reflection prompt */
.course-content .cc-think-prompt {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.course-content .cc-think-prompt-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.course-content .cc-think-prompt-icon {
  width: 32px;
  height: 32px;
  background: #ea580c;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.course-content .cc-think-prompt-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c2410c;
  margin: 0;
}

.course-content .cc-think-prompt-question {
  font-size: 1.0625rem;
  color: #1e293b;
  font-style: italic;
  line-height: 1.6;
}

.course-content .cc-think-prompt-reveal {
  margin-top: 1rem;
}

.course-content .cc-think-prompt-answer {
  display: none;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  margin-top: 0.75rem;
  animation: ccFadeIn 0.3s ease;
}

.course-content .cc-think-prompt-answer.show {
  display: block;
}

/* True/False quick check */
.course-content .cc-true-false {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border: 1px solid #67e8f9;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.course-content .cc-true-false-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.course-content .cc-true-false-icon {
  width: 32px;
  height: 32px;
  background: #0891b2;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.course-content .cc-true-false-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0e7490;
  margin: 0;
}

.course-content .cc-true-false-statement {
  font-size: 1.0625rem;
  color: #1e293b;
  margin-bottom: 1rem;
  font-weight: 500;
}

.course-content .cc-true-false-buttons {
  display: flex;
  gap: 0.75rem;
}

.course-content .cc-true-false-btn {
  flex: 1;
  padding: 0.875rem;
  background: white;
  border: 2px solid #a5f3fc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: inherit;
}

.course-content .cc-true-false-btn:hover {
  border-color: #22d3ee;
  background: #ecfeff;
}

.course-content .cc-true-false-btn.selected {
  border-color: #0891b2;
  background: #cffafe;
}

.course-content .cc-true-false-btn.correct {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
}

.course-content .cc-true-false-btn.incorrect {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

/* ==========================================================================
   12. BANNERS & HIGHLIGHTS
   ========================================================================== */

.course-content .cc-banner {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: white;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.course-content .cc-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  transform: translate(30%, -30%);
}

.course-content .cc-banner h2 {
  color: white;
  margin: 0 0 0.625rem;
  font-size: 1.625rem;
  position: relative;
}

.course-content .cc-banner p {
  color: #cbd5e1;
  margin: 0;
  font-size: 1.0625rem;
  position: relative;
}

/* Red flag indicator */
.course-content .cc-red-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  background: #fef2f2;
  border-radius: 10px;
  margin: 0.875rem 0;
  border: 1px solid #fecaca;
}

.course-content .cc-red-flag-icon {
  width: 26px;
  height: 26px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.course-content .cc-red-flag-text {
  font-size: 0.9375rem;
  color: #991b1b;
  line-height: 1.5;
}

/* Highlight box */
.course-content .cc-highlight {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  margin: 2rem 0;
}

.course-content .cc-highlight-icon {
  width: 56px;
  height: 56px;
  background: #0f172a;
  color: white;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.course-content .cc-highlight-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.625rem;
}

.course-content .cc-highlight-text {
  color: #475569;
  max-width: 500px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Key takeaway box */
.course-content .cc-takeaway {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.course-content .cc-takeaway-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.course-content .cc-takeaway-icon {
  width: 32px;
  height: 32px;
  background: #22c55e;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.course-content .cc-takeaway-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #15803d;
  margin: 0;
}

.course-content .cc-takeaway-content {
  font-size: 1rem;
  color: #166534;
  line-height: 1.6;
}

.course-content .cc-takeaway-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   13. TABLES & DATA
   ========================================================================== */

.course-content .cc-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.course-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.course-content th,
.course-content td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.course-content th {
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.course-content td {
  color: #334155;
}

.course-content tr:last-child td {
  border-bottom: none;
}

.course-content tbody tr:hover td {
  background: #f8fafc;
}

/* ==========================================================================
   14. BADGES & TAGS
   ========================================================================== */

.course-content .cc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.course-content .cc-badge-default {
  background: #f1f5f9;
  color: #475569;
}

.course-content .cc-badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.course-content .cc-badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.course-content .cc-badge-success {
  background: #dcfce7;
  color: #166534;
}

.course-content .cc-badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.course-content .cc-badge-purple {
  background: #f3e8ff;
  color: #6b21a8;
}

/* ==========================================================================
   15. PAGE PROGRESS HEADER
   ========================================================================== */

.course-content .cc-page-header {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.course-content .cc-page-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.course-content .cc-page-header-breadcrumb {
  font-size: 0.875rem;
  color: #64748b;
}

.course-content .cc-page-header-breadcrumb span {
  color: #0f172a;
  font-weight: 500;
}

.course-content .cc-page-header-time {
  font-size: 0.875rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.course-content .cc-page-header-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.course-content .cc-page-header-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.course-content .cc-page-header-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #64748b;
}

/* ==========================================================================
   16. GLOSSARY COMPONENT
   ========================================================================== */

.course-content .cc-glossary {
  margin: 1.5rem 0;
}

.course-content .cc-glossary-search {
  margin-bottom: 1rem;
}

.course-content .cc-glossary-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.course-content .cc-glossary-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.course-content .cc-glossary-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.course-content .cc-glossary-term {
  width: 100%;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease;
}

.course-content .cc-glossary-term:hover {
  background: #f1f5f9;
}

.course-content .cc-glossary-definition {
  padding: 1rem 1.25rem;
  background: white;
  display: none;
  border-top: 1px solid #e2e8f0;
  animation: ccFadeIn 0.2s ease;
}

.course-content .cc-glossary-item.open .cc-glossary-definition {
  display: block;
}

.course-content .cc-glossary-definition p {
  margin: 0;
  color: #475569;
}

/* ==========================================================================
   17. CERTIFICATE PREVIEW
   ========================================================================== */

.course-content .cc-certificate-preview {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 2px solid #fde047;
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  text-align: center;
}

.course-content .cc-certificate-preview-icon {
  width: 64px;
  height: 64px;
  background: #eab308;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
}

.course-content .cc-certificate-preview-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #854d0e;
  margin-bottom: 0.5rem;
}

.course-content .cc-certificate-preview-text {
  color: #a16207;
  margin-bottom: 1.5rem;
}

.course-content .cc-certificate-preview-card {
  background: white;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.1);
}

.course-content .cc-certificate-preview-card h4 {
  color: #854d0e;
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.course-content .cc-certificate-preview-card p {
  color: #a16207;
  margin: 0;
  font-size: 0.875rem;
}

/* ==========================================================================
   18. ACCESSIBILITY & PRINT
   ========================================================================== */

/* Focus styles for keyboard navigation */
.course-content *:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Screen reader only */
.course-content .cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .course-content *,
  .course-content *::before,
  .course-content *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .course-content {
    background: white;
    padding: 0;
  }

  .course-content .cc-banner {
    background: #f1f5f9;
    color: #0f172a;
  }

  .course-content .cc-banner h2,
  .course-content .cc-banner p {
    color: #0f172a;
  }

  .course-content .cc-accordion-content {
    max-height: none;
    display: block;
  }

  .course-content .cc-reveal-content {
    display: block;
  }

  .course-content .cc-micro-check,
  .course-content .cc-true-false,
  .course-content .cc-think-prompt {
    break-inside: avoid;
  }
}

/* ==========================================================================
   19. ANIMATIONS
   ========================================================================== */

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

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

@keyframes ccPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes ccShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.course-content .cc-animate-pulse {
  animation: ccPulse 2s infinite;
}

.course-content .cc-animate-shake {
  animation: ccShake 0.4s ease;
}

/* ==========================================================================
   20. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 640px) {
  .course-content {
    padding: 1.25rem;
  }

  .course-content h1 {
    font-size: 1.5rem;
  }

  .course-content h2 {
    font-size: 1.25rem;
  }

  .course-content h3 {
    font-size: 1.125rem;
  }

  .course-content .cc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-content .cc-tab-list {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .course-content .cc-tab-btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .course-content .cc-callout {
    padding: 1rem 1.25rem;
  }

  .course-content .cc-banner {
    padding: 1.5rem;
    border-radius: 12px;
  }

  .course-content .cc-banner h2 {
    font-size: 1.375rem;
  }

  .course-content .cc-card-grid {
    grid-template-columns: 1fr;
  }

  .course-content .cc-true-false-buttons {
    flex-direction: column;
  }

  .course-content .cc-page-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .course-content .cc-step {
    gap: 0.75rem;
  }

  .course-content .cc-step-num {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   21. UTILITY CLASSES
   ========================================================================== */

/* Display */
.course-content .cc-hidden { display: none !important; }
.course-content .cc-block { display: block; }
.course-content .cc-inline { display: inline; }
.course-content .cc-flex { display: flex; }
.course-content .cc-grid { display: grid; }

/* Text alignment */
.course-content .cc-text-left { text-align: left; }
.course-content .cc-text-center { text-align: center; }
.course-content .cc-text-right { text-align: right; }

/* Text size */
.course-content .cc-text-xs { font-size: 0.75rem; }
.course-content .cc-text-sm { font-size: 0.875rem; }
.course-content .cc-text-base { font-size: 1rem; }
.course-content .cc-text-lg { font-size: 1.125rem; }
.course-content .cc-text-xl { font-size: 1.25rem; }

/* Font weight */
.course-content .cc-font-normal { font-weight: 400; }
.course-content .cc-font-medium { font-weight: 500; }
.course-content .cc-font-semibold { font-weight: 600; }
.course-content .cc-font-bold { font-weight: 700; }

/* Margins */
.course-content .cc-m-0 { margin: 0; }
.course-content .cc-mt-0 { margin-top: 0; }
.course-content .cc-mb-0 { margin-bottom: 0; }
.course-content .cc-mb-2 { margin-bottom: 0.5rem; }
.course-content .cc-mb-4 { margin-bottom: 1rem; }
.course-content .cc-mb-6 { margin-bottom: 1.5rem; }
.course-content .cc-mt-2 { margin-top: 0.5rem; }
.course-content .cc-mt-4 { margin-top: 1rem; }
.course-content .cc-mt-6 { margin-top: 1.5rem; }
.course-content .cc-mt-8 { margin-top: 2rem; }
.course-content .cc-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.course-content .cc-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* Padding */
.course-content .cc-p-0 { padding: 0; }
.course-content .cc-p-4 { padding: 1rem; }
.course-content .cc-p-6 { padding: 1.5rem; }
.course-content .cc-px-4 { padding-left: 1rem; padding-right: 1rem; }
.course-content .cc-py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* Width */
.course-content .cc-w-full { width: 100%; }
.course-content .cc-max-w-sm { max-width: 24rem; }
.course-content .cc-max-w-md { max-width: 28rem; }
.course-content .cc-max-w-lg { max-width: 32rem; }

/* Border radius */
.course-content .cc-rounded { border-radius: 0.25rem; }
.course-content .cc-rounded-lg { border-radius: 0.5rem; }
.course-content .cc-rounded-xl { border-radius: 0.75rem; }
.course-content .cc-rounded-full { border-radius: 9999px; }

/* Colors */
.course-content .cc-text-muted { color: #64748b; }
.course-content .cc-text-primary { color: #0f172a; }
.course-content .cc-text-danger { color: #dc2626; }
.course-content .cc-text-success { color: #16a34a; }
.course-content .cc-text-warning { color: #d97706; }

/* Background */
.course-content .cc-bg-white { background: white; }
.course-content .cc-bg-muted { background: #f8fafc; }
.course-content .cc-bg-primary { background: #0f172a; }

/* ==========================================================================
   22. TIMELINE COMPONENT
   ========================================================================== */

.course-content .cc-timeline {
  position: relative;
  padding-left: 2rem;
  margin: 1.5rem 0;
}

.course-content .cc-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.course-content .cc-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.course-content .cc-timeline-item:last-child {
  padding-bottom: 0;
}

.course-content .cc-timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid #94a3b8;
  border-radius: 50%;
  z-index: 1;
}

.course-content .cc-timeline-item-current .cc-timeline-marker {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.15);
}

.course-content .cc-timeline-content {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.course-content .cc-timeline-item-current .cc-timeline-content {
  background: #fef3c7;
  border-color: #fcd34d;
}

.course-content .cc-timeline-time {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.course-content .cc-timeline-item-current .cc-timeline-time {
  color: #92400e;
}

.course-content .cc-timeline-content p {
  margin: 0;
  font-size: 0.9375rem;
  color: #334155;
}

/* ==========================================================================
   23. INFO GRID COMPONENT
   ========================================================================== */

.course-content .cc-info-grid {
  display: grid;
  gap: 0.5rem;
}

.course-content .cc-info-row {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.course-content .cc-info-row:last-child {
  border-bottom: none;
}

.course-content .cc-info-label {
  font-weight: 500;
  color: #64748b;
  min-width: 140px;
  flex-shrink: 0;
}

.course-content .cc-info-value {
  color: #1e293b;
}

/* ==========================================================================
   24. BUTTONS
   ========================================================================== */

.course-content .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.course-content .cc-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.course-content .cc-btn-primary {
  background: #0f172a;
  color: white;
}

.course-content .cc-btn-primary:hover {
  background: #1e293b;
}

.course-content .cc-btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.course-content .cc-btn-secondary:hover {
  background: #e2e8f0;
}

.course-content .cc-btn-success {
  background: #22c55e;
  color: white;
}

.course-content .cc-btn-success:hover {
  background: #16a34a;
}

/* ==========================================================================
   25. BLOCKQUOTE ENHANCED
   ========================================================================== */

.course-content .cc-blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: #f8fafc;
  border-left: 4px solid #94a3b8;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #475569;
}

.course-content .cc-blockquote p {
  margin: 0;
}

.course-content .cc-blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  color: #64748b;
}

.course-content .cc-blockquote cite::before {
  content: '— ';
}

/* ==========================================================================
   26. TABLE ENHANCEMENTS
   ========================================================================== */

.course-content .cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.course-content .cc-table-highlight,
.course-content tr.cc-table-highlight td {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
}

/* ==========================================================================
   27. GLOSSARY ENHANCEMENTS
   ========================================================================== */

.course-content .cc-glossary-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  padding: 1rem 0 0.5rem;
  margin-top: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.course-content .cc-glossary-letter:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
   28. SCENARIO STAGES (Multi-stage scenarios)
   ========================================================================== */

.course-content .cc-scenario-stage {
  display: none;
}

.course-content .cc-scenario-stage.active {
  display: block;
  animation: ccFadeIn 0.3s ease;
}

.course-content .cc-scenario-outcome {
  animation: ccFadeIn 0.3s ease;
}

/* ==========================================================================
   29. PROGRESS BADGES SYSTEM (Phase 4)
   ========================================================================== */

.course-content .cc-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.course-content .cc-progress-badge {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.course-content .cc-progress-badge.earned {
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  border-color: #fcd34d;
}

.course-content .cc-progress-badge.locked {
  opacity: 0.5;
  filter: grayscale(1);
}

.course-content .cc-progress-badge-icon {
  width: 64px;
  height: 64px;
  background: #e2e8f0;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.course-content .cc-progress-badge.earned .cc-progress-badge-icon {
  background: linear-gradient(135deg, #fcd34d 0%, #eab308 100%);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
}

.course-content .cc-progress-badge-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.course-content .cc-progress-badge-desc {
  font-size: 0.8125rem;
  color: #64748b;
}

.course-content .cc-progress-badge.earned .cc-progress-badge-desc {
  color: #92400e;
}

/* Progress Ring */
.course-content .cc-progress-ring {
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
  position: relative;
}

.course-content .cc-progress-ring svg {
  transform: rotate(-90deg);
}

.course-content .cc-progress-ring-circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.course-content .cc-progress-ring-bg {
  stroke: #e2e8f0;
}

.course-content .cc-progress-ring-progress {
  stroke: #22c55e;
  transition: stroke-dashoffset 0.5s ease;
}

.course-content .cc-progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

/* ==========================================================================
   30. CERTIFICATE PREVIEW ENHANCED (Phase 4)
   ========================================================================== */

.course-content .cc-certificate-container {
  perspective: 1000px;
  margin: 2rem 0;
}

.course-content .cc-certificate {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 3px solid #fde047;
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(234, 179, 8, 0.15);
}

.course-content .cc-certificate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, #eab308 0%, #fde047 50%, #eab308 100%);
}

.course-content .cc-certificate-seal {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4);
}

.course-content .cc-certificate-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #92400e;
  margin-bottom: 0.5rem;
}

.course-content .cc-certificate-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 1rem;
}

.course-content .cc-certificate-course {
  font-size: 1.125rem;
  color: #a16207;
  margin-bottom: 1.5rem;
}

.course-content .cc-certificate-details {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #fde68a;
}

.course-content .cc-certificate-detail {
  text-align: center;
}

.course-content .cc-certificate-detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a16207;
  margin-bottom: 0.25rem;
}

.course-content .cc-certificate-detail-value {
  font-weight: 600;
  color: #78350f;
}

/* Locked certificate state */
.course-content .cc-certificate.locked {
  filter: grayscale(0.8);
  opacity: 0.7;
}

.course-content .cc-certificate.locked::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
}

/* ==========================================================================
   31. ANALYTICS HOOKS (Phase 4)
   ========================================================================== */

/* Hidden data attributes for analytics tracking */
.course-content [data-track-view] {
  /* Marker for view tracking */
}

.course-content [data-track-click] {
  /* Marker for click tracking */
}

.course-content [data-track-time] {
  /* Marker for time-on-content tracking */
}

.course-content [data-track-complete] {
  /* Marker for completion tracking */
}

/* Visual feedback for tracked interactions */
.course-content .cc-tracked-complete {
  position: relative;
}

.course-content .cc-tracked-complete::after {
  content: '✓';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   32. ENGAGEMENT INDICATORS (Phase 4)
   ========================================================================== */

/* Module completion indicator */
.course-content .cc-module-completion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  margin: 1rem 0;
}

.course-content .cc-module-completion-icon {
  width: 32px;
  height: 32px;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.course-content .cc-module-completion-text {
  flex: 1;
  font-weight: 500;
  color: #166534;
}

/* Streak counter */
.course-content .cc-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: 999px;
  font-weight: 600;
  color: #92400e;
}

.course-content .cc-streak-fire {
  font-size: 1.25rem;
}

/* Time spent indicator */
.course-content .cc-time-spent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
}

.course-content .cc-time-spent svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   33. CONFETTI ANIMATION (for celebrations)
   ========================================================================== */

@keyframes ccConfetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.course-content .cc-confetti {
  position: fixed;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: ccConfetti 3s ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}