/* Kursimple-Checkout/Warenkorb-Styles fuer das kube-Referenzmodul.
   Automatisch reduziert auf Selektoren, die im Projekt-CSS fehlen
   (build_checkout_css.py, Quellen: kube checkout-steps.css/style.css,
   bewegt-lernen kursimple.css). Bestehende Projekt-Styles werden NICHT
   ueberschrieben. */

.progress-container { display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; margin: 20px 0; }
.progress-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: gray; z-index: 0; }
.circle { width: 40px; height: 40px; border: 1px solid gray; border-radius: 50%; background-color: white; text-align: center; line-height: 40px; font-size: 18px; color: black; z-index: 1; transition: border-color 0.3s ease; }
.circle.active { width: 44px; height: 44px; }
.circle.active:nth-child(2) { border: 3px solid #1E90FF; }
.circle.active:nth-child(3) { border: 3px solid #00BFFF; }
.circle.active:nth-child(4) { border: 3px solid #40E0D0; }
.circle.active:nth-child(5) { border: 3px solid #3CB371; }
.circle.active:nth-child(6) { border: 3px solid #32CD32; }
#loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 999; justify-content: center; align-items: center; }

/* kubes Checkout-Templates nutzen teils nackte inputs; die Referenzprojekte
   (ddif/bewegt-lernen/achim) stylen input global:
   { width:100%; margin:3px; border-radius:10px; padding:5px; border:solid 1px }
   harteck bekommt denselben Look, aber NUR im Checkout. Die ID-Selektoren
   uebersteuern harteck's Altregel #registration-data-form input { border:0 }
   (gleiche Spezifitaet, diese Datei laedt spaeter). */
#registration-data-form input:not([type="checkbox"]):not([type="radio"]),
#registration-data-form select,
#registration-data-form textarea,
.course-participant input:not([type="checkbox"]):not([type="radio"]),
.course-participant select,
[id^="step-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[id^="step-"] select,
[id^="step-"] textarea {
  width: 100%;
  margin: 3px 0;
  border-radius: 10px;
  padding: 5px;
  border: solid 1px;
  background-color: #fff;
  display: block;
  height: auto;
  text-indent: 5px;
}
[id^="step-"] input[type="checkbox"] { width: auto; height: auto; display: inline-block; }
[id^="step-"] label { margin-bottom: .25rem; width: 100%; }
[id^="step-"] .hint { font-size: 13px; font-weight: bold; }
[id^="step-"] .form-group { margin-bottom: 1rem; }