/******************
    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
*/


/******************
  User custom CSS
  ---------------
  Custom overrides loaded last.
******************/

/* =========================================================
   1) Global text rendering: disable hyphenation/word breaking
   ========================================================= */
#outerframeContainer,
#outerframeContainer * {
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;

  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

/* =========================================================
   2) Survey list page (landing page)
   ========================================================= */
.surveylist-logo {
  max-width: 380px;
  height: auto;
}

/* Center the whole survey list block */
#dynamicReloadContainer .row {
  justify-content: center;
}

/* Limit width and center the content column */
#dynamicReloadContainer .col-12 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Center internal text */
#dynamicReloadContainer .form-heading,
#dynamicReloadContainer .list-unstyled,
#dynamicReloadContainer p {
  text-align: center;
}

.surveylist-contact {
  text-align: center !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Reduce vertical whitespace on survey list page */
#dynamicReloadContainer {
  padding-top: 30px !important;
  padding-bottom: 40px !important;
}
#dynamicReloadContainer .surveylist-logo {
  margin-bottom: 15px !important;
}
#dynamicReloadContainer .surveylist-contact {
  margin-top: 10px !important;
}
#dynamicReloadContainer .row {
  margin-bottom: 10px !important;
}

/* Survey list primary button */
#dynamicReloadContainer .btn-primary {
  background-color: #0B4DA2 !important;
  border-color: #0B4DA2 !important;
  border-radius: 6px !important;
  padding: 10px 28px !important;
  font-weight: 600 !important;
}
#dynamicReloadContainer .btn-primary:hover,
#dynamicReloadContainer .btn-primary:focus {
  background-color: #083B7A !important;
  border-color: #083B7A !important;
}

/* =========================================================
   3) Dropdown menus: scrollable + avoid clipping
   ========================================================= */
#surveylist-language-changer .dropdown-menu,
#survey-nav .dropdown-menu,
.navbar .dropdown-menu,
.dropdown-menu {
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#survey-nav,
#survey-nav .container,
#survey-nav .container-fluid,
.navbar,
.navbar .container,
.navbar .container-fluid {
  overflow: visible !important;
}

/* =========================================================
   4) CREATE palette + common UI (survey pages)
   ========================================================= */
:root{
  --create-blue: #0B4DA2;
  --create-blue-dark: #083B7A;
  --create-red: #E53935;
}

/* Reduce vertical whitespace (survey pages) */
#outerframeContainer,
#question-data-container {
  padding-top: 0 !important;
}

.ls-group-title,
.group-title {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.question-container,
.ls-question,
.card {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.answer-container,
.card-body {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Rounded corners */
.card,
.btn,
.form-control {
  border-radius: 8px !important;
}
.card-header {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

/* Titles (text) */
.group-title,
.question-title,
.ls-question-text,
.h3,
h3,
.ls-group-title {
  color: var(--create-blue) !important;
}

/* Dark header strips (question/group header bars) */
.question-title-container,
.ls-question-title,
.group-container .panel-heading,
.group-container .card-header,
.question-container .panel-heading,
.question-container .card-header,
.card-header,
.panel-heading {
  background-color: var(--create-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.question-title-container *,
.ls-question-title *,
.card-header *,
.panel-heading * {
  color: #ffffff !important;
}

/* Required asterisk */
.asterisk,
.text-danger,
.mandatory {
  color: var(--create-red) !important;
}

/* Inputs focus */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--create-blue) !important;
  box-shadow: 0 0 0 0.15rem rgba(11, 77, 162, 0.25) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--create-blue) !important;
}
.ls-progress-label,
.progress-bar-label,
.progress .badge,
.progress [class*="label"],
.progress [class*="badge"] {
  background-color: var(--create-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* =========================================================
   5) Buttons (survey pages) - final, authoritative
   ========================================================= */
/* Primary buttons: Next / Submit / Save etc. */
#outerframeContainer .btn-primary,
#outerframeContainer button.btn-primary,
#outerframeContainer input.btn-primary,
#outerframeContainer a.btn-primary {
  background-color: var(--create-blue) !important;
  border-color: var(--create-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
#outerframeContainer .btn-primary:hover,
#outerframeContainer .btn-primary:focus,
#outerframeContainer .btn-primary:active {
  background-color: var(--create-blue-dark) !important;
  border-color: var(--create-blue-dark) !important;
  color: #ffffff !important;
}

/* Secondary / Previous */
#outerframeContainer .btn-outline-secondary,
#outerframeContainer .btn-secondary,
#outerframeContainer a.btn-outline-secondary,
#outerframeContainer a.btn-secondary {
  background-color: #ffffff !important;
  color: var(--create-blue) !important;
  border-color: var(--create-blue) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
#outerframeContainer .btn-outline-secondary:hover,
#outerframeContainer .btn-secondary:hover,
#outerframeContainer .btn-outline-secondary:focus,
#outerframeContainer .btn-secondary:focus {
  background-color: rgba(11, 77, 162, 0.08) !important;
  color: var(--create-blue-dark) !important;
  border-color: var(--create-blue-dark) !important;
}

/* =========================================================
   6) Privacy block (welcome page): center 2 lines, keep checkbox left
   ========================================================= */
/* "There are XX questions in this survey." */
body .number-of-questions,
body .number-of-questions .question-count-text {
  display: block;
  width: 100%;
  text-align: center !important;
}

/* "This survey is anonymous." heading */
body .privacy.row .ls-privacy-head {
  display: block;
  width: 100%;
  text-align: center !important;
}

/* Paragraph under the heading (if present) */
body .privacy.row .ls-privacy-body,
body .privacy.row .ls-privacy-body * {
  text-align: center !important;
}

/* Privacy Policy checkbox + label must stay left */
body .privacy.row .form-check,
body .privacy.row .form-check * {
  text-align: left !important;
}
body .privacy.row .form-check {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
}
body .privacy.row .form-check-label {
  margin-left: 6px;
}

/* =========================================================
   7) Help bar: make the "?" visible on dark strip
   ========================================================= */
#outerframeContainer .question-valid-container.bg-primary .ls-questionhelp,
#outerframeContainer .question-valid-container.bg-primary .ls-questionhelp * {
  color: #eaf2fb !important;
  opacity: 1 !important;
}

#outerframeContainer .question-valid-container.bg-primary .ls-questionhelp i,
#outerframeContainer .question-valid-container.bg-primary .ls-questionhelp .fa,
#outerframeContainer .question-valid-container.bg-primary .ls-questionhelp .glyphicon {
  color: #eaf2fb !important;
  opacity: 1 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.35) !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(234,242,251,0.55) !important;
  border-radius: 999px !important;
  padding: 2px 6px !important;
  line-height: 1 !important;
}

/* =========================================================
   8) Answers text color (remove aggressive red)
   ========================================================= */
#outerframeContainer .ls-answers label,
#outerframeContainer .ls-answers .form-check-label,
#outerframeContainer .ls-answers li,
#outerframeContainer .ls-answers span {
  color: #333333 !important;
  font-weight: 400 !important;
}

/* Selected option slightly stronger */
#outerframeContainer .ls-answers input:checked + label {
  color: #111111 !important;
  font-weight: 600 !important;
}

/* Radio accent (modern browsers) */
#outerframeContainer input[type="radio"]:checked {
  accent-color: var(--create-blue);
}

/* =========================================================
   9) Move ONLY vertical list-radio answers slightly right
      (do NOT touch arrays 1..5)
   ========================================================= */
#outerframeContainer .question-container.list-radio .ls-answers {
  text-align: left !important;
  margin-left: clamp(0px, 10vw, 150px) !important;
}

#outerframeContainer .question-container.list-radio .ls-answers li,
#outerframeContainer .question-container.list-radio .ls-answers .answer-item,
#outerframeContainer .question-container.list-radio .ls-answers .radio,
#outerframeContainer .question-container.list-radio .ls-answers .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

#outerframeContainer .question-container.list-radio .ls-answers input[type="radio"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#outerframeContainer .question-container.list-radio .ls-answers label,
#outerframeContainer .question-container.list-radio .ls-answers .form-check-label {
  margin: 0 !important;
  text-align: left !important;
  flex: 1 1 auto !important;
}

/* Explicitly do nothing to arrays (1..5) */
#outerframeContainer .question-container.array .ls-answers {
  margin-left: 0 !important;
}

/* Small screens: tighten array spacing slightly */
@media (max-width: 600px) {
  #outerframeContainer .question-container.array .ls-answers table td,
  #outerframeContainer .question-container.array .ls-answers table th {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}