.ccm-section, .ccm-accordion, .ccm-item { font-family: var(--w-font, var(--font-body)); font-feature-settings: "ss01" 1, "ss02" 1, "rdot" 1;
} .ccm-section { background: var(--surface, #fff); border-radius: var(--w-radius, var(--border-radius, 12px)); box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 24px;
}
.ccm-heading { font-size: 1.25rem; font-weight: 800; color: var(--text, #222); margin: 0 0 16px;
} .ccm-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 16px; background: var(--surface-2, #f8f9fa); border-radius: var(--w-radius, var(--border-radius, 10px)); margin-bottom: 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #555);
}
.ccm-summary i { margin-left: 4px; color: var(--text-muted, #999); font-size: 0.78rem;
} .ccm-accordion { }
.ccm-chapter { border: 1px solid var(--border-color, #f0f0f0); border-radius: var(--w-radius, var(--border-radius, 10px)); margin-bottom: 8px; overflow: hidden;
}
.ccm-chapter-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface-2, #fafafa); border: none; cursor: pointer; transition: background .2s;
}
.ccm-chapter-toggle:hover { background: var(--surface-2, #f3f3f3);
}
.ccm-chapter-info { display: flex; align-items: center; gap: 10px;
}
.ccm-chapter-icon { color: var(--primary, #d4a843); font-size: 0.9rem;
}
.ccm-chapter-title { font-size: 0.92rem; font-weight: 700; color: var(--text, #333);
}
.ccm-chapter-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-muted, #999);
}
.ccm-chevron { font-size: 0.7rem; color: var(--text-muted, #999); transition: transform .25s;
}
.ccm-chapter-toggle.collapsed .ccm-chevron { transform: rotate(-90deg);
}
[dir="rtl"] .ccm-chapter-toggle.collapsed .ccm-chevron { transform: rotate(90deg);
} .ccm-lessons { padding: 0;
}
.ccm-lesson { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 10px 24px; border-top: 1px solid var(--border-color, #f3f3f3); transition: background .15s;
}
.ccm-lesson:hover { background: #fafbfc;
}
.ccm-lesson-free { background: #f0fdf4;
}
.ccm-lesson-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.ccm-lesson-icon { font-size: 0.78rem; color: var(--text-muted, #999); flex-shrink: 0;
}
.ccm-lesson-title { font-size: 0.85rem; color: var(--text-muted, #444); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccm-free-badge { font-size: 0.68rem; font-weight: 700; color: #27ae60; background: #dcfce7; padding: 2px 8px; border-radius: var(--w-radius, var(--border-radius, 4px)); flex-shrink: 0;
}
.ccm-lesson-duration { font-size: 0.78rem; color: var(--text-muted, #999); font-weight: 600; flex-shrink: 0; margin-inline-start: 10px; direction: ltr;
} @media (max-width: 767.98px) { .ccm-section { padding: 16px; } .ccm-lesson { padding: 8px 12px 8px 16px; } .ccm-lesson-title { font-size: 0.8rem; }
}