/* ==========================================================================
   COINFLOW FINANCE – COURSE POLISH  ·  v1.0.0
   ==========================================================================

   Ergänzt Dark UI auf der Kursseite. Jede Regel beginnt mit
   html body.cff-dark — das eine zusätzliche Element html hebt die
   Spezifität gerade so weit an, dass die breiten Flächenregeln aus
   Dark UI hier nicht mehr durchschlagen.

   Betrifft ausschließlich die Kaufbox rechts. Lehrplan, Kaufabwicklung
   und Lektionen bleiben unberührt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Platzhalterbild raus
   -------------------------------------------------------------------------- */
html body.cff-dark .course-summary-sidebar img,
html body.cff-dark .lp-course-sidebar img,
html body.cff-dark .course-sidebar img,
html body.cff-dark .course-summary-sidebar .course-thumbnail,
html body.cff-dark .course-summary-sidebar picture{
  display:none !important;
}

/* --------------------------------------------------------------------------
   2. Die Kaufbox als eigenständige Karte
   -------------------------------------------------------------------------- */
html body.cff-dark .course-summary-sidebar,
html body.cff-dark .lp-course-sidebar,
html body.cff-dark .course-sidebar{
  background-color:#0A0F0C !important;
  border:1px solid #1C2721 !important;
  border-radius:10px !important;
  padding:clamp(1.5rem,3vw,2.25rem) !important;
  overflow:hidden !important;
}

/* Preis als Kopfzeile der Karte */
html body.cff-dark .course-summary-sidebar .course-price,
html body.cff-dark .course-summary-sidebar .price,
html body.cff-dark .lp-course-price{
  display:block !important;
  margin:0 0 1.5rem !important;
  padding-bottom:1.25rem !important;
  border-bottom:1px solid #1C2721 !important;
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace !important;
  font-size:clamp(2rem,4vw,2.75rem) !important;
  font-weight:500 !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
  color:#3DDC97 !important;
}

/* --------------------------------------------------------------------------
   3. Kaufbutton — der eigentliche Fehler

   Eine breite Flächenregel in Dark UI setzt jeden Hintergrund auf
   transparent. Der Button behielt dadurch seine dunkle Schriftfarbe auf
   dunklem Grund und war erst beim Überfahren zu erkennen.
   -------------------------------------------------------------------------- */
html body.cff-dark .course-summary-sidebar button,
html body.cff-dark .course-summary-sidebar input[type="submit"],
html body.cff-dark .course-summary-sidebar .lp-button,
html body.cff-dark .course-summary-sidebar a.button,
html body.cff-dark .lp-course-sidebar button,
html body.cff-dark .course-sidebar button,
html body.cff-dark button.button-purchase-course,
html body.cff-dark button.button-enroll-course,
html body.cff-dark .lp-button-continue{
  display:block !important;
  width:100% !important;
  min-height:56px !important;
  margin:0 0 .75rem !important;
  padding:1rem 1.5rem !important;
  background-color:#3DDC97 !important;
  background-image:none !important;
  border:1px solid #3DDC97 !important;
  border-radius:4px !important;
  color:#050806 !important;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  font-size:1.0625rem !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  line-height:1.3 !important;
  text-align:center !important;
  text-transform:none !important;
  text-decoration:none !important;
  cursor:pointer !important;
  opacity:1 !important;
  visibility:visible !important;
  box-shadow:none !important;
  transition:background-color 200ms cubic-bezier(.22,.61,.28,1),
             color 200ms cubic-bezier(.22,.61,.28,1) !important;
}

/* Auch beschriftende Elemente im Button müssen lesbar sein */
html body.cff-dark .course-summary-sidebar button *,
html body.cff-dark button.button-purchase-course *,
html body.cff-dark button.button-enroll-course *{
  color:#050806 !important;
  background-color:transparent !important;
}

html body.cff-dark .course-summary-sidebar button:hover,
html body.cff-dark button.button-purchase-course:hover,
html body.cff-dark button.button-enroll-course:hover{
  background-color:transparent !important;
  color:#3DDC97 !important;
}
html body.cff-dark .course-summary-sidebar button:hover *,
html body.cff-dark button.button-purchase-course:hover *{
  color:#3DDC97 !important;
}

html body.cff-dark .course-summary-sidebar button:focus-visible{
  outline:2px solid #3DDC97 !important;
  outline-offset:3px !important;
}

/* --------------------------------------------------------------------------
   4. Meta-Zeilen ruhiger setzen
   -------------------------------------------------------------------------- */
html body.cff-dark .course-summary-sidebar ul,
html body.cff-dark .course-summary-sidebar ol{
  margin:0 0 1.5rem !important;
  padding:0 !important;
  list-style:none !important;
}
html body.cff-dark .course-summary-sidebar li{
  display:flex !important;
  align-items:center !important;
  gap:.75rem !important;
  margin:0 !important;
  padding:.7rem 0 !important;
  border-bottom:1px solid #141C17 !important;
  font-size:.9375rem !important;
  color:#8A968F !important;
}
html body.cff-dark .course-summary-sidebar li:last-child{
  border-bottom:0 !important;
}
html body.cff-dark .course-summary-sidebar li i,
html body.cff-dark .course-summary-sidebar li svg{
  flex:none !important;
  color:#3DDC97 !important;
  fill:#3DDC97 !important;
}

/* Teilen-Zeile am Fuß */
html body.cff-dark .course-summary-sidebar .lp-course-share,
html body.cff-dark .course-summary-sidebar [class*="share"]{
  margin-top:1.25rem !important;
  padding-top:1.25rem !important;
  border-top:1px solid #1C2721 !important;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace !important;
  font-size:.6875rem !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:#59655E !important;
}

/* --------------------------------------------------------------------------
   5. Autorenzeile und Datum auf der Kursseite
   -------------------------------------------------------------------------- */
html body.cff-dark .course-author,
html body.cff-dark .course-last-updated{
  display:none !important;
}