/* ServKart Edu — MOOC section styles. Deliberately separate from styles.css:
   the main lesson viewer / content display CSS is frozen and must not be
   touched. Everything here is scoped under .mooc- classes only. */

.mooc-page{background:linear-gradient(180deg,#f5f3ff 0%,#eef2ff 40%,#f8fafc 100%);min-height:60vh}

/* ---- hero / hub ---- */
.mooc-hero{padding:72px 28px;text-align:center;color:#fff}
.mooc-hero .wrap{max-width:1040px;margin:0 auto}
.mooc-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:99px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mooc-hero h1{font-size:2.4rem;font-weight:800;margin:18px 0 14px;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.mooc-hero p{font-size:1.1rem;opacity:.95;max-width:620px;margin:0 auto;text-shadow:0 1px 10px rgba(0,0,0,.2)}
.mooc-gold{color:#fde68a;font-weight:800}

.mooc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:36px 28px;max-width:1200px;margin:0 auto}
.mooc-card{border-radius:20px;overflow:hidden;cursor:pointer;background:#fff;box-shadow:0 6px 20px rgba(30,27,75,.10);transition:transform .22s cubic-bezier(.22,.9,.32,1),box-shadow .22s ease;border:1px solid rgba(15,23,42,.05)}
.mooc-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(30,27,75,.18)}
.mooc-card-top{padding:26px 20px;position:relative;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.mooc-card-icon{font-size:2.1rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.mooc-card-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.92}
.mooc-card-free{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.94);color:#166534;font-weight:800;font-size:.68rem;padding:4px 10px;border-radius:99px;letter-spacing:.02em}
.mooc-card-body{padding:16px 20px 20px}
.mooc-card-body h3{font-size:1.08rem;font-weight:800;color:#1e1b4b;margin-bottom:8px;line-height:1.3}
.mooc-card-body p{font-size:.86rem;color:#64748b;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mooc-card-meta{display:flex;gap:14px;font-size:.78rem;color:#7c3aed;font-weight:700}

/* ---- course detail ---- */
.mooc-course-head{padding:44px 28px;color:#fff}
.mooc-course-head .wrap{max-width:900px;margin:0 auto}
.mooc-course-head h1{font-size:2rem;font-weight:800;margin:10px 0}
.mooc-course-head p{opacity:.94;font-size:1.02rem;max-width:680px}
.mooc-course-body{max-width:900px;margin:0 auto;padding:32px 28px 60px}
.mooc-chapter-list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.mooc-chapter-item{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid #e9e5ff;border-radius:16px;padding:18px 20px;box-shadow:0 2px 8px rgba(30,27,75,.05)}
.mooc-chapter-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#4338ca);flex:none}
.mooc-chapter-item.done .mooc-chapter-num{background:linear-gradient(135deg,#16a34a,#15803d)}
.mooc-chapter-info h4{font-size:1rem;font-weight:700;color:#1e1b4b}
.mooc-chapter-info p{font-size:.84rem;color:#64748b;margin-top:2px}
.mooc-chapter-done-tag{margin-left:auto;color:#16a34a;font-weight:700;font-size:.8rem}

/* ---- progress ---- */
.mooc-progress-track{height:10px;background:#e9e5ff;border-radius:99px;overflow:hidden;margin:14px 0}
.mooc-progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#db2777);border-radius:99px;transition:width .4s ease}

/* ---- chapter viewer ---- */
.mooc-chapter-wrap{max-width:820px;margin:0 auto;padding:36px 24px 70px}
.mooc-chapter-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.mooc-back-link{color:#7c3aed;font-weight:700;font-size:.88rem;text-decoration:none}
.mooc-chapter-pill{background:#ede9fe;color:#5b21b6;font-weight:700;font-size:.78rem;padding:5px 14px;border-radius:99px}
.mooc-chapter-title{font-size:1.9rem;font-weight:800;color:#1e1b4b;margin:6px 0 6px;line-height:1.2}
.mooc-chapter-overview{color:#64748b;font-size:1.05rem;margin-bottom:26px}

.mooc-video-wrap{background:#0f0a2e;border-radius:18px;overflow:hidden;margin-bottom:30px;box-shadow:0 10px 30px rgba(30,27,75,.2)}
.mooc-video-wrap video{width:100%;display:block;max-height:420px;background:#000}
.mooc-video-placeholder{padding:46px 24px;text-align:center;color:#c7d2fe}
.mooc-video-placeholder .vp-ic{font-size:2.2rem;display:block;margin-bottom:10px}
.mooc-video-placeholder small{display:block;margin-top:6px;color:#a5b4fc;font-size:.8rem}

.mooc-block{margin-bottom:20px}
.mooc-block-paragraph{font-size:1.06rem;line-height:1.85;color:#1e293b}
.mooc-block-heading{font-size:1.32rem;font-weight:800;color:#4338ca;margin:30px 0 12px;padding-bottom:8px;border-bottom:3px solid #ede9fe}
.mooc-block-bullets,.mooc-block-numbered{list-style:none;padding:0;margin:0}
.mooc-block-bullets li,.mooc-block-numbered li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;line-height:1.65;color:#1e293b;padding:9px 0}
.mooc-bullet-dot{flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#db2777);margin-top:8px}
.mooc-num-badge{flex:none;width:26px;height:26px;border-radius:8px;background:#ede9fe;color:#5b21b6;font-weight:800;font-size:.82rem;display:grid;place-items:center;margin-top:1px}

.mooc-callout{border-radius:14px;padding:18px 20px;margin:24px 0;border-left:5px solid;display:flex;gap:12px}
.mooc-callout .cc-ic{font-size:1.3rem;flex:none}
.mooc-callout h5{font-weight:800;margin-bottom:4px;font-size:.98rem}
.mooc-callout p{font-size:.96rem;line-height:1.6}
.mooc-callout.info{background:#eff6ff;border-color:#3b82f6;color:#1e3a8a}
.mooc-callout.tip{background:#f0fdf4;border-color:#16a34a;color:#14532d}
.mooc-callout.warning{background:#fffbeb;border-color:#f59e0b;color:#78350f}
.mooc-callout.success{background:#faf5ff;border-color:#a855f7;color:#581c87}

.mooc-exhibit{background:#fff;border:1px solid #e9e5ff;border-radius:16px;padding:18px;margin:26px 0;box-shadow:0 4px 14px rgba(30,27,75,.06);text-align:center}
.mooc-exhibit svg{max-width:100%;height:auto}
.mooc-exhibit figcaption{margin-top:10px;font-size:.85rem;color:#64748b;font-style:italic}

/* ---- quiz ---- */
.mooc-quiz-head{margin:42px 0 18px;text-align:center}
.mooc-quiz-head h2{font-size:1.5rem;font-weight:800;color:#1e1b4b}
.mooc-quiz-head p{color:#64748b;font-size:.94rem}
.mooc-q{background:#fff;border:1.5px solid #e9e5ff;border-radius:16px;padding:20px 22px;margin-bottom:16px}
.mooc-q-num{font-size:.78rem;font-weight:800;color:#7c3aed;text-transform:uppercase;letter-spacing:.04em}
.mooc-q-text{font-size:1.04rem;font-weight:700;color:#1e1b4b;margin:6px 0 14px}
.mooc-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:12px;margin-bottom:9px;cursor:pointer;font-size:.96rem;color:#1e293b;transition:border-color .15s,background .15s}
.mooc-opt:hover{border-color:#c4b5fd}
.mooc-opt.selected{border-color:#7c3aed;background:#f5f3ff}
.mooc-opt.correct{border-color:#16a34a;background:#f0fdf4;font-weight:700}
.mooc-opt.wrong{border-color:#dc2626;background:#fef2f2}
.mooc-opt input{accent-color:#7c3aed}
.mooc-q-explain{margin-top:10px;font-size:.88rem;color:#475569;background:#f8fafc;border-radius:10px;padding:10px 14px;display:none}
.mooc-q-explain.show{display:block}
.mooc-quiz-score{text-align:center;background:linear-gradient(120deg,#4338ca,#7c3aed);color:#fff;border-radius:18px;padding:26px;margin:26px 0;font-weight:800;font-size:1.3rem}
.mooc-quiz-score small{display:block;font-weight:500;opacity:.9;font-size:.85rem;margin-top:6px}

/* ---- completion / certificate ---- */
.mooc-complete-wrap{max-width:680px;margin:60px auto;padding:0 24px;text-align:center}
.mooc-complete-badge{font-size:4rem;margin-bottom:10px}
.mooc-complete-wrap h1{font-size:1.7rem;font-weight:800;color:#1e1b4b;margin-bottom:10px;line-height:1.35}
.mooc-complete-wrap p{color:#64748b;font-size:1.02rem;margin-bottom:24px}
.mooc-cert-pay-card{max-width:460px;margin:0 auto;background:#fff;border:1.5px solid #e9e5ff;border-radius:18px;padding:28px;box-shadow:0 10px 28px rgba(30,27,75,.08);text-align:left}
.mooc-cert-price-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid #f1f5f9}
.mooc-cert-price-row b{font-size:1.1rem;color:#1e1b4b}
.mooc-cert-visual{max-width:760px;margin:0 auto}

/* ---- generic buttons reused in mooc pages (kept local so nothing here
   depends on, or overrides, the main .btn classes in the frozen stylesheet) ---- */
.mooc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;font-weight:700;font-size:.97rem;cursor:pointer;border:none;text-decoration:none}
.mooc-btn-primary{background:linear-gradient(120deg,#7c3aed,#db2777);color:#fff}
.mooc-btn-primary:hover{filter:brightness(1.06)}
.mooc-btn-outline{background:#fff;border:1.5px solid #c4b5fd;color:#5b21b6}
.mooc-btn:disabled{opacity:.6;cursor:not-allowed}
.mooc-btn-block{display:flex;width:100%}

/* ---- chapter slide deck (Sep 2026 redesign: real slideshow instead of one long scroll) ---- */
.mooc-slidedeck{margin-bottom:8px}
.mooc-slide-progress{height:6px;background:#e9e5ff;border-radius:99px;overflow:hidden;margin-bottom:22px}
.mooc-slide-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#db2777);border-radius:99px;transition:width .35s ease}
.mooc-slide-stage{min-height:360px;position:relative}
.mooc-slide{animation:moocSlideIn .38s cubic-bezier(.22,.9,.32,1)}
@keyframes moocSlideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
.mooc-slide-intro{text-align:left}
.mooc-slide-eyebrow{display:inline-block;background:#ede9fe;color:#5b21b6;font-weight:800;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:99px;margin-bottom:12px}
.mooc-slide-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap}
.mooc-slide-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;order:2;flex:1}
.mooc-slide-nav .mooc-btn{order:1}
.mooc-slide-nav .mooc-btn-primary{order:3}
.mooc-slide-dot{width:9px;height:9px;border-radius:50%;background:#e2e8f0;cursor:pointer;border:none;padding:0;transition:background .18s,transform .18s,width .18s}
.mooc-slide-dot:hover{transform:scale(1.25)}
.mooc-slide-dot.active{background:linear-gradient(135deg,#7c3aed,#db2777);width:22px;border-radius:99px}
.mooc-hidden{display:none!important}
@media (max-width:640px){
  .mooc-slide-stage{min-height:300px}
  .mooc-slide-nav{justify-content:center}
}

@media (max-width:640px){
  .mooc-hero h1{font-size:1.7rem}
  .mooc-chapter-title{font-size:1.5rem}
  .mooc-grid{padding:24px 16px;gap:16px}
}