/* SS PRO kursusplatform — venstremenu, delt på tværs af alle sider */

.sspro-toggle{
  position:fixed; top:14px; left:14px; z-index:1001;
  background:#CCFF00; color:#111; border:none; border-radius:100px;
  padding:10px 16px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:13px;
  cursor:pointer; display:none; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.sspro-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:998;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
html.sspro-open .sspro-backdrop{ opacity:1; pointer-events:auto; }

.sspro-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:280px;
  background:#111111; border-right:1px solid #262626;
  overflow-y:auto; z-index:999;
  font-family:'DM Sans',sans-serif;
  transition:transform .25s ease;
}
.sspro-brand{
  padding:22px 20px 18px; border-bottom:1px solid #262626;
  color:#fff; font-family:'Miriam Libre',sans-serif; font-size:15px;
  letter-spacing:.1em; text-transform:uppercase;
}
.sspro-brand span{ color:#CCFF00; }
.sspro-brand small{
  display:block; margin-top:6px; color:#8C8C8C; font-family:'DM Sans',sans-serif;
  text-transform:none; letter-spacing:0; font-size:11.5px;
}

.sspro-home-link{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  padding:14px 20px; color:#EDEDED; font-size:13.5px; font-weight:700;
  font-family:'DM Sans',sans-serif; text-decoration:none; border-bottom:1px solid #1d1d1d;
}
.sspro-home-link:hover{ color:#CCFF00; background:#181818; }
.sspro-home-link.active{ color:#CCFF00; border-left:3px solid #CCFF00; background:#1a1d0d; }

.sspro-modules{ padding:6px 0 34px; }
.sspro-module{ border-bottom:1px solid #1d1d1d; }
.sspro-module-head{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; color:#EDEDED; font-size:13.5px; font-weight:700;
  font-family:'DM Sans',sans-serif;
}
.sspro-module-head i{
  font-style:normal; color:#8C8C8C; transition:transform .2s; font-size:11px;
}
.sspro-module.open .sspro-module-head i{ transform:rotate(90deg); color:#CCFF00; }
.sspro-module.open .sspro-module-head{ color:#CCFF00; }

.sspro-lesson-list{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.sspro-module.open .sspro-lesson-list{ max-height:900px; }

.sspro-lesson{
  display:block; padding:10px 20px 10px 34px; font-size:13px; color:#B8B8B8;
  text-decoration:none; border-left:3px solid transparent;
}
.sspro-lesson:hover{ color:#fff; background:#181818; }
.sspro-lesson.active{
  color:#CCFF00; border-left-color:#CCFF00; background:#1a1d0d; font-weight:600;
}
.sspro-lesson.locked{ color:#5c5c5c; cursor:default; }
.sspro-lesson.locked em{ font-style:normal; font-size:10.5px; opacity:.7; }

@media(min-width:901px){
  html.sspro-has-sidebar body{ padding-left:280px; }
}
@media(max-width:900px){
  .sspro-sidebar{ transform:translateX(-100%); }
  html.sspro-open .sspro-sidebar{ transform:translateX(0); }
  .sspro-toggle{ display:inline-block; }
}

/* LESSON PREV/NEXT NAV — injected by course-nav.js at the bottom of every
   lesson page. Deliberately a self-contained dark card so it looks the same
   and stays legible regardless of the page's own background/theme. */
.sspro-lessonnav{
  background:#111111; border-top:1px solid #262626;
  padding:34px 24px 44px; font-family:'DM Sans',sans-serif;
}
.sspro-lessonnav-inner{ max-width:1080px; margin:0 auto; }
.sspro-lessonnav-progress{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.sspro-lessonnav-modtitle{
  font-family:'Miriam Libre',sans-serif; font-size:12.5px; color:#B8B8B8;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.sspro-lessonnav-count{ font-size:12px; color:#8C8C8C; white-space:nowrap; }
.sspro-lessonnav-track{
  height:5px; border-radius:100px; background:#262626; overflow:hidden; margin-bottom:22px;
}
.sspro-lessonnav-fill{ height:100%; background:#CCFF00; border-radius:100px; }

.sspro-lessonnav-buttons{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; }
.sspro-lessonnav-prev, .sspro-lessonnav-next{
  flex:1 1 220px; display:flex; flex-direction:column; justify-content:center;
  padding:16px 20px; border-radius:14px; text-decoration:none; transition:opacity .15s,border-color .15s;
}
.sspro-lessonnav-prev{ background:#1B1B1B; border:1px solid #2A2A2A; color:#EDEDED; }
.sspro-lessonnav-prev:hover{ border-color:#444; }
.sspro-lessonnav-next{ background:#CCFF00; color:#111; text-align:right; align-items:flex-end; }
.sspro-lessonnav-next:hover{ opacity:.88; }
.sspro-lessonnav-next.crossmod{ background:#111; border:1.5px solid #CCFF00; color:#CCFF00; }
.sspro-lessonnav-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  opacity:.65; margin-bottom:4px;
}
.sspro-lessonnav-title{ font-size:15px; font-weight:700; line-height:1.3; }

.sspro-lessonnav-done{
  margin-top:14px;
  background:linear-gradient(135deg, rgba(204,255,0,.12), rgba(204,255,0,.03));
  border:1px solid rgba(204,255,0,.35); border-radius:16px;
  padding:26px 24px; text-align:center;
}
.sspro-lessonnav-done .emoji{ font-size:26px; margin-bottom:8px; }
.sspro-lessonnav-done p{ color:#EDEDED; font-size:15px; margin-bottom:16px; }
.sspro-lessonnav-done a{
  display:inline-block; background:#CCFF00; color:#111; padding:12px 26px;
  border-radius:100px; font-weight:700; font-size:13.5px; text-decoration:none;
}
.sspro-lessonnav-done a:hover{ opacity:.88; }

@media(max-width:600px){
  .sspro-lessonnav{ padding:24px 16px 34px; }
  .sspro-lessonnav-buttons{ flex-direction:column; }
  .sspro-lessonnav-prev, .sspro-lessonnav-next{
    flex:0 0 auto; padding:14px 18px;
  }
  .sspro-lessonnav-next{ text-align:left; align-items:flex-start; }
}