/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root{
  --brand-primary:#0c1421;
  --brand-accent:#b00003;
  --brand-bg:#ffffff;
  --brand-lightblue:#3a87d4;
  --brand-alert:#7a0002;

  --help-size:1rem;
  --question-size:calc(var(--help-size)*1.5);
}

/* Grundfarben + Wasserzeichen */
body{ background:var(--brand-bg); color:var(--brand-primary); }
body::before{
  content:""; position:fixed; inset:0;
  background:center 70px/28% no-repeat url("../files/mo_logo.png");
  opacity:.5; pointer-events:none; z-index:0;
}

/* Texte */
.survey-name,.group-name{ color:var(--brand-primary) !important; }
.question-container .question-title,
.question-container .ls-question-title,
.question-container .question-text,
.question-container .ls-question-text,
.question .question-title,
.question .ls-question-title,
.question .question-text,
.question .ls-question-text,
.question-container .text-primary{
  color:var(--brand-primary) !important;
  font-size:var(--question-size) !important;
  font-weight:400 !important;
  font-style:normal !important;
}
.surveydescription,.survey-description,
.survey-welcome .lead,.survey-welcome p{ color:var(--brand-primary) !important; }

/* Pflichtsternchen */
.asterisk,.mandatory,.asterisk:before,.asterisk:after{
  color:var(--brand-lightblue) !important; border-color:var(--brand-lightblue) !important;
}

/* Hilfen & Hinweise */
.question-container .help-block,
.question-container .questionhelp,
.question-container .question-help,
.question-container .ls-questionhelp{
  font-style:italic !important; font-size:var(--help-size) !important; color:var(--brand-lightblue) !important;
}
.question-container .fa-question-circle,.question-container .bi-question-circle{ color:var(--brand-lightblue) !important; }
.question-container .alert-info,
.question-container .help-block.text-info,
.question-container .text-info,
.question-container .ls-em-tip,
.question-container .ls-em-error,
.question-container .em-tip,
.question-container .em-warning{
  font-style:italic !important; font-size:var(--help-size) !important; color:var(--brand-alert) !important;
}
.question-container .fa-exclamation-circle,.question-container .bi-exclamation-circle{ color:var(--brand-alert) !important; }

/* Erfolg (grün) -> Light Blue */
.text-success,.ls-em-success,.em-success{ color:var(--brand-lightblue) !important; font-style:normal !important; }
.alert-success{
  color:var(--brand-primary) !important;
  background-color:rgba(58,135,212,.08) !important;
  border-color:rgba(58,135,212,.35) !important;
}
.fa-check,.bi-check,.fa-check-circle,.bi-check-circle{ color:var(--brand-lightblue) !important; }

/* ---------- Antwort-Labels & Select ---------- */
.answer-item label,.ls-answers .answer-item label,label.btn{
  background:#fff; color:var(--brand-accent);
  border:1px solid transparent; border-radius:10px;
  padding:.30rem .70rem; line-height:1.25;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.answer-item label:hover,label.btn:hover{
  background:rgba(0,0,0,.03); color:var(--brand-accent); border-color:transparent;
}
.ls-answers input[type="radio"]:checked + label,
.ls-answers input[type="checkbox"]:checked + label,
.btn-group input:checked + label.btn,
.yes-no input:checked + label.btn{
  background:var(--brand-accent) !important; color:#fff !important; border-color:var(--brand-accent) !important;
}

/* Select/Dropdown neutral */
select,.form-select{ background:#fff; border:1px solid #ddd; color:var(--brand-primary); border-radius:6px; }
select:hover,.form-select:hover{ color:var(--brand-accent); border-color:#ddd; }

/* ---------- RADIO: nativen Punkt ausblenden, eigenen am Label zeichnen ---------- */
/* Listeneinträge NICHT umbauen -> bleiben untereinander */
.answer-item.radio-item{ display:block; }

/* Nativen Input wirklich unsichtbar machen (Spezifität + !important) */
.answer-item.radio-item > input[type="radio"]{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  margin:0 !important; padding:0 !important;
  opacity:0 !important; pointer-events:none !important;
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
}

/* Label trägt die sichtbare Kontrolle – mittig zur Textzeile */
.answer-item.radio-item > label{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer; vertical-align:middle;
}

/* der Kringel vor dem Text (neutral) */
.answer-item.radio-item > label::before{
  content:""; display:inline-block;
  width:1em; height:1em; box-sizing:border-box;
  border:2px solid #b5b5b5; border-radius:50%; background:#fff;
}

/* Checked: blauer Punkt + blauer Rand */
.answer-item.radio-item > input[type="radio"]:checked + label::before{
  border-color:var(--brand-lightblue) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--brand-lightblue) 0 50%, transparent 52%) no-repeat !important;
}

/* Tastaturfokus sichtbar */
.answer-item.radio-item > input[type="radio"]:focus + label::before{
  outline:2px solid rgba(58,135,212,.5); outline-offset:2px;
}

/* ---------- CHECKBOX: analog am Label ---------- */
.answer-item input[type="checkbox"]{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
}
.answer-item input[type="checkbox"] + label{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer; vertical-align:middle;
}
.answer-item input[type="checkbox"] + label::before{
  content:""; display:inline-block;
  width:1em; height:1em; box-sizing:border-box;
  border:2px solid #b5b5b5; border-radius:.2em; background:#fff;
}
.answer-item input[type="checkbox"]:checked + label::before{
  border-color:var(--brand-lightblue) !important;
  background:
    linear-gradient(45deg, transparent 45%, var(--brand-lightblue) 45% 55%, transparent 0) left .24em top .48em/ .3em .2em no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--brand-lightblue) 45% 55%, transparent 0) left .41em top .62em/ .55em .2em no-repeat,
    #fff !important;
}
.answer-item input[type="checkbox"]:focus + label::before{
  outline:2px solid rgba(58,135,212,.5); outline-offset:2px;
}

/* Matrix/Array: nur Farben fürs Label bei Checked, kein Layout-Hack */
.ls-answers .array .answer-item input:checked + label,
.ls-answers .answer-item input:checked + label{
  background:var(--brand-accent) !important; color:#fff !important; border-color:var(--brand-accent) !important;
}

/* Navigation */
.navbar .navbar-nav .nav-link{ border-bottom:3px solid transparent; }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:active,
.navbar .navbar-nav .nav-link.active{ border-bottom-color:#444 !important; }

/* Buttons (Weiter/Zurück) */
.btn-primary,.ls-move-btn,.btn.btn-primary{
  background:#fff !important; color:var(--brand-accent) !important;
  border:2px solid var(--brand-accent) !important; border-radius:10px !important;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.ls-move-btn:hover,.ls-move-btn:focus,.ls-move-btn:active,
.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:active{
  background:var(--brand-accent) !important; color:#fff !important; border-color:var(--brand-accent) !important;
}

/* Fortschrittsbalken */
.progress-bar{ background:var(--brand-accent) !important; }

/* Mobile: Wasserzeichen kleiner */
@media (max-width:768px){
  body::before{ background-size:18% !important; background-position:center 60px !important; }
}