.wccc-curriculum-wrapper {
    width: 100%;
    margin-top: 32px;
    padding: 0 4vw;
    box-sizing: border-box;
    clear: both;
}
.wccc-course-outline {
    border: 1.5px solid #eee;
    padding: 18px;
    border-radius: 11px;
    background: #f9f9f9;
    max-width: 100%;
    margin-bottom: 32px;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.035);
}
.wccc-course-title {
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.wccc-course-description {
    margin-bottom: 18px;
    font-size: 15px;
    color: #333;
}
.wccc-section-header {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 500;
}

/* --- MODERN ACCORDION STYLES --- */
.wccc-accordion-toggle {
    background-color: var(--wccc-bg, #f5f5f5);
    color: var(--wccc-accent, #222);
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    padding: 15px 22px;
    font-size: var(--wccc-font-size, 17px);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.23s, color 0.16s, box-shadow 0.14s;
    position: relative;
    z-index: 1;
}

.wccc-accordion-content {
    display: none;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.wccc-accordion-toggle.active + .wccc-accordion-content {
    display: block;
}

.wccc-topic-list {
    list-style: none;
    padding-left: 12px;
    font-size: 15px;
}
.wccc-topic-list li::before {
    content: "📘 ";
    margin-right: 5px;
    font-size: 1.1em;
}

/* --- Five creative variants --- */

/* 1. Classic Left Accent */
.wccc-style-1 .wccc-accordion-toggle {
    border-left: 6px solid #cb0d0d;
    border-radius: 0 8px 8px 0;
    background: var(--wccc-bg, #fff8f6);
    font-weight: 600;
}
.wccc-style-1 .wccc-accordion-toggle.active {
    box-shadow: 0 2px 18px 0 #f3d2d255;
    background: #fff4f0;
}

/* 2. Gradient Bar & Glow */
.wccc-style-2 .wccc-accordion-toggle {
    border-radius: 8px 8px 8px 8px;
    border: none;
    background: linear-gradient(90deg, #fffbe8, #ffe2ec 65%);
    color: #b9285c;
    box-shadow: 0 2px 12px 0 #ffe2ec33;
}
.wccc-style-2 .wccc-accordion-toggle.active {
    background: linear-gradient(90deg, #fff6e3 20%, #ffe2ec 85%);
    color: #cb0d0d;
    box-shadow: 0 4px 26px 0 #ffe2ec60;
}

/* 3. Neon Blue Card */
.wccc-style-3 .wccc-accordion-toggle {
    border-left: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #e2f8ff 30%, #fff 100%);
    color: #2066d2;
    box-shadow: 0 2px 8px 0 #dbeafe70;
    font-family: 'Montserrat',Arial,sans-serif;
}
.wccc-style-3 .wccc-accordion-toggle.active {
    background: #e2f8ff;
    color: #134e6f;
    border-left: 5px solid #2066d2;
}

/* 4. Minimal Shadow Card */
.wccc-style-4 .wccc-accordion-toggle {
    border-radius: 12px;
    background: #faf8ff;
    color: #7b2ff2;
    border-bottom: 2px dashed #b9a1e6;
    font-style: italic;
    box-shadow: 0 2px 10px 0 #d9c3fc20;
}
.wccc-style-4 .wccc-accordion-toggle.active {
    background: linear-gradient(90deg,#faf8ff,#f1ecfb 80%);
    color: #440b7e;
}

/* 5. Tech-Glass Card */
.wccc-style-5 .wccc-accordion-toggle {
    border-radius: 10px;
    background: linear-gradient(120deg, #d7f9f1 50%, #fff 100%);
    color: #00b47e;
    border-left: 6px double #00b47e;
    font-family: 'Poppins',Arial,sans-serif;
    box-shadow: 0 4px 18px 0 #00b47e13;
    text-shadow: 0 1px 0 #fff9;
}
.wccc-style-5 .wccc-accordion-toggle.active {
    background: #b7eed8;
    color: #1e8c5d;
}

/* --- End creative --- */

/* Responsive */
@media (max-width:600px) {
    .wccc-curriculum-wrapper { padding: 0 2vw;}
    .wccc-course-outline { padding: 8px;}
    .wccc-accordion-toggle, .wccc-accordion-content { font-size: 15px; padding: 12px 10px;}
    .wccc-section-header { font-size: 16px;}
    .wccc-accordion-toggle { border-radius: 5px !important; }
}