/* ============================================================
   SPARAC LimeSurvey 6.17 — custom.css
   Brand colours: POST-2020 SAPBIO logo
   Help: single icon system, right of question, hover to reveal
   ============================================================ */

/* ── ROOT VARIABLES ──────────────────────────────────────── */
:root {
  --sapbio-navy:   #0D2D5E;
  --sapbio-ocean:  #0072BC;
  --sapbio-sky:    #29ABE2;
  --sapbio-ice:    #E8F5FC;
  --sapbio-fog:    #F0F8FD;
  --sapbio-border: #D0E8F5;
  --sapbio-muted:  #5A7FA8;

  --goal1-color:   #0D2D5E;
  --goal1-bg:      #EBF1F8;
  --goal2-color:   #0072BC;
  --goal2-bg:      #E8F5FC;
  --goal3-color:   #29ABE2;
  --goal3-bg:      #F0F8FD;
}

/* ── 1. HIDE NATIVE TIPS & HELP (shown via icon instead) ──── */
/* Catch-all: any element whose class contains "help" or "tip",
   plus the native question-mark icons (FontAwesome + Remix Icon). */
[class*="question-help"],
[class*="questionhelp"],
[class*="help-block"],
.ls-question-help,
.questionhelp,
.ls-help-block,
.help-block,
.help-container,
.hint-item,
.ls-answers-count,
.ls-question-help-icon,
i.fa-question-circle,
.fa-question-circle,
i.ri-question-line,
i.ri-question-fill,
.ls-questionhelp,
.question-help-container,
[class*="ri-question"] {
  display: none !important;
}

/* ── 2. SURVEY TITLE ──────────────────────────────────────── */
.survey-name,
.ls-survey-name {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--sapbio-navy) !important;
  line-height: 1.25 !important;
}

/* ── 3. GOAL BANNERS ──────────────────────────────────────── */
.goal1-banner,
.goal2-banner,
.goal3-banner {
  border-radius: 8px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 4px !important;
}
.goal1-banner { background: var(--goal1-bg) !important; border-left: 5px solid var(--goal1-color) !important; }
.goal2-banner { background: var(--goal2-bg) !important; border-left: 5px solid var(--goal2-color) !important; }
.goal3-banner { background: var(--goal3-bg) !important; border-left: 5px solid var(--goal3-color) !important; }

.goal-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.goal1-banner .goal-badge { background: var(--goal1-color) !important; color: #fff !important; }
.goal2-banner .goal-badge { background: var(--goal2-color) !important; color: #fff !important; }
.goal3-banner .goal-badge { background: var(--goal3-color) !important; color: #fff !important; }

.goal-title { font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.goal1-banner .goal-title { color: var(--goal1-color) !important; }
.goal2-banner .goal-title { color: var(--goal2-color) !important; }
.goal3-banner .goal-title { color: var(--goal3-color) !important; }

/* ── 4. QUESTION CONTAINER ────────────────────────────────── */
.question-container,
.ls-question {
  position: relative !important;              /* anchor for the help icon */
  background: #ffffff !important;
  border: 0.5px solid var(--sapbio-border) !important;
  border-radius: 8px !important;
  padding: 0.85rem 1.1rem !important;
  margin-bottom: 0.75rem !important;
}

.ls-label-question,
.ls-label-question-text,
.question-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sapbio-navy) !important;
  line-height: 1.4 !important;
  margin-bottom: 2px !important;
}

/* reserve room on the right so long titles don't run under the icon */
.question-container.has-hint-icon .ls-label-question,
.question-container.has-hint-icon .ls-label-question-text,
.ls-question.has-hint-icon .ls-label-question,
.ls-question.has-hint-icon .ls-label-question-text {
  padding-right: 32px !important;
}

.mandatory_star,
.asterisk {
  color: #E84B4A !important;
  margin-right: 2px !important;
  font-weight: 700 !important;
}

/* ── 5. GROUP DESCRIPTION ─────────────────────────────────── */
.ls-question-group-description,
.group-description,
.ls-description {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #344054 !important;
  line-height: 1.75 !important;
  border-left: 3px solid var(--sapbio-sky) !important;
  padding-left: 12px !important;
  margin-bottom: 12px !important;
}

/* ── 6. RADIO BUTTONS — horizontal equal bordered cards ───── */
body .list-radio ul,
body .answers-list ul,
body .radio ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  width: 100% !important;
}
body .list-radio ul li,
body .answers-list ul li,
body .radio ul li {
  flex: 1 !important;
  min-width: 100px !important;
  float: none !important;
  width: auto !important;
  border: 1.5px solid var(--sapbio-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
body .list-radio ul li:hover,
body .answers-list ul li:hover,
body .radio ul li:hover {
  border-color: var(--sapbio-sky) !important;
  background: var(--sapbio-fog) !important;
}
body .list-radio ul li:has(input[type="radio"]:checked),
body .answers-list ul li:has(input[type="radio"]:checked),
body .radio ul li:has(input[type="radio"]:checked) {
  border-color: var(--sapbio-ocean) !important;
  background: var(--sapbio-ice) !important;
}
body .list-radio ul li:has(input[type="radio"]:checked) label,
body .answers-list ul li:has(input[type="radio"]:checked) label,
body .radio ul li:has(input[type="radio"]:checked) label {
  color: var(--sapbio-ocean) !important;
  font-weight: 600 !important;
}
body .list-radio label,
body .answers-list label,
body .radio label {
  font-size: 13px !important;
  color: var(--sapbio-navy) !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: center !important;
  flex: 1 !important;
  display: inline !important;
  float: none !important;
}
body .list-radio input[type="radio"],
body .answers-list input[type="radio"],
body .radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  border: 2px solid var(--sapbio-border) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, background 0.15s !important;
  order: -1 !important;
}
body .list-radio input[type="radio"]:checked,
body .answers-list input[type="radio"]:checked,
body .radio input[type="radio"]:checked {
  border-color: var(--sapbio-ocean) !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='4' fill='%230072BC'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}
body .list-radio input[type="radio"]:not(:checked):hover,
body .answers-list input[type="radio"]:not(:checked):hover,
body .radio input[type="radio"]:not(:checked):hover {
  border-color: var(--sapbio-sky) !important;
  background-color: var(--sapbio-fog) !important;
}

/* ── 7. CHECKBOXES — compact 4-column grid ────────────────── */
body .question-container ul,
body .ls-question ul,
body form ul.checkbox,
body .checkbox-list ul,
body .list-checkbox ul,
body .checkbox ul,
body .answers ul {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  width: 100% !important;
}
body .question-container ul li,
body .ls-question ul li,
body form ul.checkbox li,
body .checkbox-list ul li,
body .list-checkbox ul li,
body .checkbox ul li,
body .answers ul li {
  float: none !important;
  width: auto !important;
  border: 1.5px solid var(--sapbio-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
body .question-container ul li:hover,
body .ls-question ul li:hover,
body .checkbox-list ul li:hover,
body .list-checkbox ul li:hover,
body .checkbox ul li:hover {
  border-color: var(--sapbio-sky) !important;
  background: var(--sapbio-fog) !important;
}
body .question-container ul li:has(input[type="checkbox"]:checked),
body .ls-question ul li:has(input[type="checkbox"]:checked),
body .checkbox-list ul li:has(input[type="checkbox"]:checked),
body .list-checkbox ul li:has(input[type="checkbox"]:checked),
body .checkbox ul li:has(input[type="checkbox"]:checked) {
  border-color: var(--sapbio-ocean) !important;
  background: var(--sapbio-ice) !important;
}
body .question-container ul li:has(input[type="checkbox"]:checked) label,
body .ls-question ul li:has(input[type="checkbox"]:checked) label,
body .checkbox-list ul li:has(input[type="checkbox"]:checked) label,
body .list-checkbox ul li:has(input[type="checkbox"]:checked) label,
body .checkbox ul li:has(input[type="checkbox"]:checked) label {
  color: var(--sapbio-ocean) !important;
  font-weight: 600 !important;
}
body .checkbox-list label,
body .list-checkbox label,
body .checkbox label,
body .question-container ul li label,
body .ls-question ul li label {
  font-size: 13px !important;
  color: var(--sapbio-navy) !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: inline !important;
  float: none !important;
}

/* ── 8. CUSTOM CHECKBOX ───────────────────────────────────── */
body .checkbox-list input[type="checkbox"],
body .list-checkbox input[type="checkbox"],
body .checkbox input[type="checkbox"],
body .question-container ul li input[type="checkbox"],
body .ls-question ul li input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  border: 2px solid var(--sapbio-border) !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, background 0.15s !important;
  order: -1 !important;
}
body .checkbox-list input[type="checkbox"]:checked,
body .list-checkbox input[type="checkbox"]:checked,
body .checkbox input[type="checkbox"]:checked,
body .question-container ul li input[type="checkbox"]:checked,
body .ls-question ul li input[type="checkbox"]:checked {
  background-color: var(--sapbio-ocean) !important;
  border-color: var(--sapbio-ocean) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}
body .checkbox-list input[type="checkbox"]:not(:checked):hover,
body .list-checkbox input[type="checkbox"]:not(:checked):hover,
body .checkbox input[type="checkbox"]:not(:checked):hover,
body .question-container ul li input[type="checkbox"]:not(:checked):hover,
body .ls-question ul li input[type="checkbox"]:not(:checked):hover {
  border-color: var(--sapbio-sky) !important;
  background-color: var(--sapbio-fog) !important;
}

/* ── 9. OTHER FIELD — full row ────────────────────────────── */
body .question-container ul li:last-child:has(input[type="text"]),
body .ls-question ul li:last-child:has(input[type="text"]),
body form ul.checkbox li:last-child:has(input[type="text"]),
body .checkbox-list ul li:last-child:has(input[type="text"]),
body .list-checkbox ul li:last-child:has(input[type="text"]),
body .checkbox ul li:last-child:has(input[type="text"]) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
body .question-container ul li input[type="text"],
body .ls-question ul li input[type="text"],
body .checkbox-list ul li input[type="text"],
body .list-checkbox ul li input[type="text"],
body .checkbox ul li input[type="text"] {
  flex: 1 !important;
  min-width: 0 !important;
  border: 1px solid var(--sapbio-border) !important;
  border-radius: 5px !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  color: var(--sapbio-navy) !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  box-sizing: border-box !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
body .question-container ul li input[type="text"]:focus,
body .checkbox-list ul li input[type="text"]:focus,
body .list-checkbox ul li input[type="text"]:focus,
body .checkbox ul li input[type="text"]:focus {
  border-color: var(--sapbio-ocean) !important;
}

/* ── 10. TEXT INPUTS & TEXTAREA ───────────────────────────── */
.ls-answers input[type="text"],
.ls-answers textarea,
.question-container input[type="text"],
.question-container textarea {
  border: 1.5px solid var(--sapbio-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--sapbio-navy) !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  box-sizing: border-box !important;
}
.ls-answers input[type="text"]:focus,
.ls-answers textarea:focus,
.question-container input[type="text"]:focus,
.question-container textarea:focus {
  border-color: var(--sapbio-ocean) !important;
  box-shadow: 0 0 0 3px rgba(0,114,188,0.1) !important;
}

/* ── 10b. DATE PICKER — button on the RIGHT of the field ──── */
/* LimeSurvey wraps the date input + calendar button in an .input-group.
   Force them onto one row, button flush to the right of the field. */
.question-container .input-group,
.ls-question .input-group,
.question-container .ls-input-group,
.ls-question .ls-input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: 320px !important;
}

/* the date field takes the available width */
.question-container .input-group input.form-control,
.ls-question .input-group input.form-control,
.question-container .input-group input[type="text"],
.ls-question .input-group input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

/* the calendar button sits flush to the right, same height */
.question-container .input-group .input-group-append,
.ls-question .input-group .input-group-append,
.question-container .input-group-btn,
.ls-question .input-group-btn,
.question-container .input-group button,
.ls-question .input-group button,
.question-container button.btn-date,
.ls-question button.btn-date {
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.question-container .input-group button,
.ls-question .input-group button,
.question-container button.btn-date,
.ls-question button.btn-date {
  background: var(--sapbio-ocean) !important;
  border: 1.5px solid var(--sapbio-ocean) !important;
  color: #fff !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 0 12px !important;
  cursor: pointer !important;
}

/* ── 11. HELP ICON — right of question, hover to reveal ───── */

/* the "?" pill, pinned top-right of the question box
   (visually on the same line as the question label) */
.hint-icon {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--sapbio-sky) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: help !important;
  border: none !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
}

/* the bubble — opens below-left so it never leaves the screen */
.hint-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  transform: none;
  background: var(--sapbio-navy);
  color: #f0f8fd;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: 6px;
  width: 260px;
  max-width: 78vw;
  z-index: 9999;
  white-space: normal;
  text-align: left;
  box-shadow: 0 6px 20px rgba(13,45,94,0.25);
}
.hint-popup::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 6px;
  left: auto;
  transform: none;
  border: 5px solid transparent;
  border-bottom-color: var(--sapbio-navy);
}
.hint-icon:hover .hint-popup,
.hint-icon.active .hint-popup {
  display: block !important;
}

/* Guarantee the bubble TEXT is visible (target inner nodes only, so the
   bubble itself keeps its default display:none until hover) */
.hint-popup * {
  display: inline !important;
  color: #f0f8fd !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.hint-popup {
  color: #f0f8fd !important;
}

/* ── 12. TYPOGRAPHY ───────────────────────────────────────── */
.ls-question-group-title,
.group-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--sapbio-navy) !important;
  line-height: 1.3 !important;
}
#ls-welcome-container h2,
.welcome-container h2,
#ls-completed-container h2,
.completed-container h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--sapbio-navy) !important;
  margin-bottom: 10px !important;
}
#ls-welcome-container p,
.welcome-container p,
#ls-completed-container p,
.completed-container p {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #344054 !important;
  line-height: 1.75 !important;
}
#ls-completed-container a,
.completed-container a,
.end-url a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sapbio-ocean) !important;
  text-decoration: underline !important;
  background: var(--sapbio-ice) !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--sapbio-border) !important;
  display: inline-block !important;
  margin-top: 10px !important;
}
.end-url-description,
.ls-end-url-description {
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--sapbio-muted) !important;
  margin-top: 6px !important;
}

/* ── 13. ALERTS ───────────────────────────────────────────── */
.alert-warning,
.ls-alert-warning,
div[class*="alert-warning"] {
  background: #FFFBEA !important;
  border: 1px solid #F5D87A !important;
  color: #7A5C00 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
}
.alert-danger,
.ls-alert-danger,
.ls-error,
div[class*="alert-danger"],
div[class*="alert-error"] {
  background: #FEF0EF !important;
  border: 1px solid #F5B8B5 !important;
  color: #922B21 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
}
.alert-info,
.ls-alert-info {
  background: var(--sapbio-ice) !important;
  border: 1px solid var(--sapbio-border) !important;
  color: var(--sapbio-navy) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
}
.alert .close,
.ls-alert .close {
  color: inherit !important;
  opacity: 0.7 !important;
  font-size: 18px !important;
  background: none !important;
  border: none !important;
}

/* ── 14. NAVIGATION BUTTONS ───────────────────────────────── */
.ls-btn-prev,
input[id*="moveprev"],
button[id*="moveprev"],
.button-previous {
  background: #ffffff !important;
  border: 1.5px solid var(--sapbio-border) !important;
  color: var(--sapbio-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.ls-btn-prev:hover,
input[id*="moveprev"]:hover,
button[id*="moveprev"]:hover {
  border-color: var(--sapbio-sky) !important;
  background: var(--sapbio-fog) !important;
}
.ls-btn-next,
.ls-btn-submit,
input[id*="movenext"],
button[id*="movenext"],
input[id*="submit"],
button[id*="submit"],
.button-next,
.button-submit {
  background: var(--sapbio-ocean) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 28px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.ls-btn-next:hover,
.ls-btn-submit:hover,
input[id*="movenext"]:hover,
button[id*="movenext"]:hover,
input[id*="submit"]:hover,
button[id*="submit"]:hover {
  background: var(--sapbio-navy) !important;
}

/* ── 15. FILE UPLOAD — accepted types as icon chips ───────── */
.file-types-box {
  background: var(--sapbio-fog) !important;
  border: 1px solid var(--sapbio-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-top: 8px !important;
}
.file-types-title {
  margin: 0 0 9px 0 !important;
  font-size: 12.5px !important;
  color: var(--sapbio-ocean) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.file-types-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.file-types-list .ft {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid var(--sapbio-border) !important;
  border-radius: 6px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  color: var(--sapbio-navy) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}


/* ── 16. NEUTRAL EM TIPS (keep hidden) ────────────────────── */
.ls-em-tip.em_default,
.ls-em-tip.em_initial,
.ls-em-tip.em_hidden,
.ls-question-tip.em_default,
.tip.em_default {
  display: none !important;
}

/* ── 17. VALIDATION ERROR — inline right of the label ─────── */
/* JS adds .q-has-error on the question and .q-error-msg on the message. */

/* the error message: same line as the label, right-aligned.
   Only the JS-added .q-error-msg triggers this — never the raw EM tip,
   which LimeSurvey keeps in the DOM even when there is no error. */
.question-container .q-error-msg,
.ls-question .q-error-msg {
  display: inline-block !important;
  position: absolute !important;
  top: 12px !important;
  right: 44px !important;              /* clears the help "?" icon at right:16px */
  max-width: 55% !important;
  text-align: right !important;
  color: #922B21 !important;
  background: #FEF0EF !important;
  border: 1px solid #F5B8B5 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  z-index: 6 !important;
  margin: 0 !important;
}

/* red field ONLY when JS confirms an active error (.q-has-error) */
.q-has-error input[type="text"],
.q-has-error textarea,
.q-has-error select,
.q-has-error .form-control {
  border-color: #E84B4A !important;
  box-shadow: 0 0 0 3px rgba(232,75,74,0.12) !important;
}

/* normal (no error): theme-blue focus, never red */
.question-container:not(.q-has-error) input[type="text"]:focus,
.question-container:not(.q-has-error) textarea:focus,
.question-container:not(.q-has-error) select:focus,
.ls-question:not(.q-has-error) input[type="text"]:focus,
.ls-question:not(.q-has-error) textarea:focus,
.ls-question:not(.q-has-error) select:focus {
  border-color: var(--sapbio-ocean) !important;
  box-shadow: 0 0 0 3px rgba(0,114,188,0.12) !important;
}

/* red outline on radio/checkbox cards when in error */
.q-has-error .list-radio ul,
.q-has-error ul.answers-list,
.q-has-error .checkbox-list ul,
.q-has-error .list-checkbox ul {
  outline: 1.5px solid rgba(232,75,74,0.35) !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
}

/* keep room on the right of the label so the error doesn't overlap the text */
.q-has-error .ls-label-question,
.q-has-error .ls-label-question-text {
  padding-right: 40% !important;
}

/* ── 18. CBD/GBF TARGET LINE (in goal banners) ────────────── */
.cbd-gbf-line {
  margin-top: 8px !important;
  font-size: 12.5px !important;
  color: var(--sapbio-muted) !important;
  line-height: 1.6 !important;
}
.cbd-gbf-line strong {
  color: var(--sapbio-navy) !important;
  font-weight: 600 !important;
}
.cbd-gbf-line a {
  color: var(--sapbio-ocean) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--sapbio-sky) !important;
  white-space: nowrap !important;
}
.cbd-gbf-line a:hover {
  color: var(--sapbio-navy) !important;
  border-bottom-color: var(--sapbio-ocean) !important;
}