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

    This file is the safest place to reshape an extended LimeSurvey theme.
    It loads last, so overrides here win without touching core theme files.
*/

:root {
  --ls-page-bg: #f6efe7;
  --ls-surface: #ffffff;
  --ls-surface-muted: #fbf7f2;
  --ls-text-primary: #171311;
  --ls-text-secondary: #655b53;
  --ls-text-muted: #8a8077;
  --ls-accent: #111111;
  --ls-accent-strong: #000000;
  --ls-accent-soft: rgba(17, 17, 17, 0.05);
  --ls-border-soft: rgba(23, 19, 17, 0.10);
  --ls-border-strong: rgba(23, 19, 17, 0.18);
  --ls-shadow-lg: 0 28px 80px rgba(31, 26, 23, 0.10);
  --ls-shadow-md: 0 12px 36px rgba(31, 26, 23, 0.06);
  --ls-radius-card: 28px;
  --ls-radius-control: 18px;
  --ls-radius-pill: 999px;
  --ls-space-8: 8px;
  --ls-space-12: 12px;
  --ls-space-16: 16px;
  --ls-space-24: 24px;
  --ls-space-32: 32px;
  /* Motion (aligned with Cookiy screener fast tap; medium for step enters) */
  --ls-motion-fast: 120ms;
  --ls-motion-medium: 260ms;
  --ls-motion-stagger: 44ms;
  --ls-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ls-ease-in-out: ease;
  --ls-brand-logo-height: 28px;
  --ls-yesno-selected-shadow: 0 2px 10px rgba(17, 17, 17, 0.12);
}

@keyframes lsStepEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsOptionEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsProgressShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes lsWelcomeEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--ls-page-bg);
}

body {
  color: var(--ls-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 34%),
    linear-gradient(180deg, #fbf7f2 0%, var(--ls-page-bg) 100%);
}

article,
#dynamicReloadContainer,
.top-container,
.outerframe {
  background: transparent !important;
}

#survey-nav,
.navbar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#navbar-toggler {
  border: 1px solid var(--ls-border-soft);
  border-radius: var(--ls-radius-pill);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ls-text-primary);
  box-shadow: none;
}

#main-dropdown {
  border-radius: 20px;
  border: 1px solid var(--ls-border-soft);
  box-shadow: var(--ls-shadow-md);
}

.top-content,
.col-xl-8,
.col-centered {
  max-width: 760px !important;
}

#outerframeContainer {
  padding-bottom: 48px;
}

#main-row {
  margin: 0;
}

/*
 * Single elevated surface: only #main-col is the white slab.
 * .space-col also appears on .top-container (progress) and #navigator-container — those must not become second cards.
 */
#main-col {
  background: var(--ls-surface);
  border-radius: var(--ls-radius-card);
  box-shadow: var(--ls-shadow-lg);
  padding: 32px 36px 40px;
}

.top-container.space-col,
#navigator-container.space-col,
#main-col .space-col {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.top-container.space-col {
  margin-bottom: var(--ls-space-16);
  padding-bottom: 0 !important;
}

#main-col > :first-child {
  margin-top: 0;
}

#progressbar-top,
.top-container .top-content {
  margin-bottom: 18px;
}

#progressbar-top .progress,
.top-container .progress {
  height: 8px;
  border-radius: var(--ls-radius-pill);
  background: rgba(23, 19, 17, 0.08);
  box-shadow: none;
}

#progressbar-top .progress-bar,
.top-container .progress-bar {
  position: relative;
  overflow: hidden;
  border-radius: var(--ls-radius-pill);
  background: linear-gradient(90deg, var(--ls-accent), #2e2e2e);
}

#progressbar-top .progress-bar::after,
.top-container .progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  animation: lsProgressShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

#progressbar-top .visually-hidden {
  color: var(--ls-text-muted);
}

#welcome-container {
  padding-top: 4px;
}

.survey-name,
h1.survey-name {
  max-width: 20ch;
  margin: 0 0 18px;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ls-text-primary);
}

#main-col .survey-name,
#main-col h1.survey-name,
#main-col .survey-description,
#main-col .survey-welcome,
#main-col .number-of-questions {
  text-align: left !important;
}

.survey-description,
.survey-welcome,
.form-heading {
  max-width: 40rem;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ls-text-secondary);
}

.number-of-questions,
.question-count-text,
.privacy {
  color: var(--ls-text-muted);
}

.question-count-text {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ls-border-soft);
  border-radius: var(--ls-radius-pill);
  background: var(--ls-surface-muted);
}

.privacy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ls-border-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* Step enter replay: class toggled by custom.js after each navigation */
.ls-step-enter .question-container {
  animation: lsStepEnter var(--ls-motion-medium) var(--ls-ease-out) both;
}

.ls-step-enter .answer-container .checkbox-item label,
.ls-step-enter .answer-container .radio-item label,
.ls-step-enter .answer-container .answer-item label,
.ls-step-enter .answer-container .form-check label {
  animation: lsOptionEnter calc(var(--ls-motion-medium) * 0.92) var(--ls-ease-out) both;
}

.ls-step-enter .answer-container .checkbox-item:nth-child(1) label,
.ls-step-enter .answer-container .radio-item:nth-child(1) label,
.ls-step-enter .answer-container .answer-item:nth-child(1) label,
.ls-step-enter .answer-container li:nth-child(1) label {
  animation-delay: calc(var(--ls-motion-stagger) * 1.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(2) label,
.ls-step-enter .answer-container .radio-item:nth-child(2) label,
.ls-step-enter .answer-container .answer-item:nth-child(2) label,
.ls-step-enter .answer-container li:nth-child(2) label {
  animation-delay: calc(var(--ls-motion-stagger) * 2.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(3) label,
.ls-step-enter .answer-container .radio-item:nth-child(3) label,
.ls-step-enter .answer-container .answer-item:nth-child(3) label,
.ls-step-enter .answer-container li:nth-child(3) label {
  animation-delay: calc(var(--ls-motion-stagger) * 3.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(4) label,
.ls-step-enter .answer-container .radio-item:nth-child(4) label,
.ls-step-enter .answer-container .answer-item:nth-child(4) label,
.ls-step-enter .answer-container li:nth-child(4) label {
  animation-delay: calc(var(--ls-motion-stagger) * 4.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(5) label,
.ls-step-enter .answer-container .radio-item:nth-child(5) label,
.ls-step-enter .answer-container .answer-item:nth-child(5) label,
.ls-step-enter .answer-container li:nth-child(5) label {
  animation-delay: calc(var(--ls-motion-stagger) * 5.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(6) label,
.ls-step-enter .answer-container .radio-item:nth-child(6) label,
.ls-step-enter .answer-container .answer-item:nth-child(6) label,
.ls-step-enter .answer-container li:nth-child(6) label {
  animation-delay: calc(var(--ls-motion-stagger) * 6.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(7) label,
.ls-step-enter .answer-container .radio-item:nth-child(7) label,
.ls-step-enter .answer-container .answer-item:nth-child(7) label,
.ls-step-enter .answer-container li:nth-child(7) label {
  animation-delay: calc(var(--ls-motion-stagger) * 7.5);
}

.ls-step-enter .answer-container .checkbox-item:nth-child(8) label,
.ls-step-enter .answer-container .radio-item:nth-child(8) label,
.ls-step-enter .answer-container .answer-item:nth-child(8) label,
.ls-step-enter .answer-container li:nth-child(8) label {
  animation-delay: calc(var(--ls-motion-stagger) * 8.5);
}

.ls-step-enter #welcome-container {
  animation: lsWelcomeEnter var(--ls-motion-medium) var(--ls-ease-out) both;
}

/*
 * Typeform-like single slab: no nested “card inside card”. Questions sit on #main-col surface;
 * multiple questions are separated by a light divider only.
 */
.question-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 20px 0 28px;
  margin-bottom: 0;
  transition:
    border-color var(--ls-motion-fast) var(--ls-ease-in-out),
    box-shadow var(--ls-motion-fast) var(--ls-ease-in-out);
}

.question-container + .question-container {
  border-top: 1px solid var(--ls-border-soft);
  padding-top: 28px;
}

.question-container:focus-within {
  border: none !important;
  box-shadow: none !important;
}

/* Slightly tighter when lone question (optional body class from custom.js) */
body.ls-one-question-page .question-container {
  padding-top: 12px;
  padding-bottom: 20px;
}

body.ls-one-question-page .question-container + .question-container {
  border-top: none;
  padding-top: 20px;
}

.question-container .questiontext,
.question-container .lsquestiontext,
.question-container [id^='ls-question-text-'] {
  margin-bottom: 14px;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--ls-text-primary);
}

.question-container .help-container,
.question-container .text-info,
.question-container .lsquestionhelp {
  color: var(--ls-text-secondary) !important;
}

.question-container .help-container {
  margin-bottom: 16px;
}

.question-container .lsquestionhelp {
  display: inline-block;
  max-width: 100%;
  padding: 10px 14px;
  background: var(--ls-surface-muted);
  border: 1px solid var(--ls-border-soft);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
}

.question-container .mandatory,
.question-container .asterisk,
.text-danger {
  color: #c35d2d !important;
}

.question-container .questionhelp,
.question-container .q-help,
.question-container .question-valid-container,
.question-container .em_tip {
  font-size: 14px;
  line-height: 1.6;
}

.answer-container,
[class*='answer-container'] {
  margin-top: 18px;
}

.form-control,
.form-select,
textarea,
select,
input[type='text'],
input[type='email'],
input[type='number'],
input[type='password'] {
  min-height: 54px;
  border-radius: 16px !important;
  border: 1px solid var(--ls-border-soft) !important;
  background: #ffffff !important;
  color: var(--ls-text-primary) !important;
  box-shadow: none !important;
  transition:
    border-color var(--ls-motion-fast) var(--ls-ease-in-out),
    box-shadow var(--ls-motion-fast) var(--ls-ease-in-out),
    background-color var(--ls-motion-fast) var(--ls-ease-in-out);
}

textarea {
  min-height: 140px;
  padding-top: 14px;
  resize: vertical;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus {
  border-color: rgba(17, 17, 17, 0.35) !important;
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08) !important;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--ls-accent);
}

.answer-item label,
.checkbox-item label,
.radio-item label,
.form-check-label,
.answertext {
  border-radius: 16px;
}

.checkbox-item label,
.radio-item label,
.answer-item label,
.form-check-label {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ls-border-soft);
  background: #ffffff;
  transition:
    border-color var(--ls-motion-fast) var(--ls-ease-in-out),
    background-color var(--ls-motion-fast) var(--ls-ease-in-out),
    box-shadow var(--ls-motion-fast) var(--ls-ease-in-out),
    transform var(--ls-motion-fast) var(--ls-ease-in-out);
}

.checkbox-item label:hover,
.radio-item label:hover,
.answer-item label:hover,
.form-check-label:hover {
  background: var(--ls-surface-muted);
  border-color: var(--ls-border-strong);
}

.checkbox-item input[type='checkbox']:checked + label,
.radio-item input[type='radio']:checked + label,
.form-check-input:checked + .form-check-label {
  background: rgba(17, 17, 17, 0.04);
  border-color: var(--ls-accent);
  box-shadow: inset 0 0 0 1px var(--ls-accent);
}

.array-flexible-row .btn,
.btn {
  border-radius: var(--ls-radius-pill) !important;
  min-height: 52px;
  box-shadow: none !important;
  font-weight: 600;
  transition:
    transform var(--ls-motion-fast) var(--ls-ease-in-out),
    background-color var(--ls-motion-fast) var(--ls-ease-in-out),
    border-color var(--ls-motion-fast) var(--ls-ease-in-out),
    color var(--ls-motion-fast) var(--ls-ease-in-out);
}

.yesno-button.btn-group > .btn,
.yesno-button.btn-group > label,
.gender-button.btn-group > .btn,
.gender-button.btn-group > label {
  border-radius: var(--ls-radius-pill) !important;
  min-height: 52px;
  box-shadow: none !important;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--ls-motion-fast) var(--ls-ease-in-out),
    background-color var(--ls-motion-fast) var(--ls-ease-in-out),
    border-color var(--ls-motion-fast) var(--ls-ease-in-out),
    color var(--ls-motion-fast) var(--ls-ease-in-out),
    box-shadow var(--ls-motion-fast) var(--ls-ease-in-out);
}

/* Idle options: clearly “not chosen” (.ls-yesno-selected is toggled in custom.js for all LS DOM shapes) */
.yesno-button.btn-group > .btn:not(.ls-yesno-selected):not(:hover),
.yesno-button.btn-group > label.btn:not(.ls-yesno-selected):not(:hover),
.gender-button.btn-group > .btn:not(.ls-yesno-selected):not(:hover),
.gender-button.btn-group > label.btn:not(.ls-yesno-selected):not(:hover),
.yesno-button.btn-group > .btn.btn-primary:not(.ls-yesno-selected):not(:hover),
.yesno-button.btn-group > label.btn-primary:not(.ls-yesno-selected):not(:hover),
.gender-button.btn-group > .btn.btn-primary:not(.ls-yesno-selected):not(:hover),
.gender-button.btn-group > label.btn-primary:not(.ls-yesno-selected):not(:hover) {
  background: var(--ls-surface-muted) !important;
  border: 1px solid var(--ls-border-soft) !important;
  color: var(--ls-text-primary) !important;
  box-shadow: none !important;
}

.btn:hover,
.array-flexible-row .btn:hover,
.yesno-button.btn-group > .btn:not(.ls-yesno-selected):hover,
.yesno-button.btn-group > label:not(.ls-yesno-selected):hover,
.gender-button.btn-group > .btn:not(.ls-yesno-selected):hover,
.gender-button.btn-group > label:not(.ls-yesno-selected):hover {
  transform: translateY(-1px);
}

.btn-primary:active,
.ls-move-next-btn:active,
.ls-move-submit-btn:active,
.array-flexible-row .btn:active {
  transform: translateY(0) scale(0.98);
}

.yesno-button.btn-group > label:active,
.gender-button.btn-group > label:active,
.yesno-button .button-item label:active,
.gender-button .button-item label:active {
  transform: scale(0.98);
}

/* Chosen option: persistent high-contrast state (class from JS + :has for label-wrapped radios) */
.yesno-button.btn-group label.ls-yesno-selected,
.yesno-button.btn-group label:has(input[type='radio']:checked),
.gender-button.btn-group label.ls-yesno-selected,
.gender-button.btn-group label:has(input[type='radio']:checked),
.yesno-button.btn-group > .btn-check:checked + label,
.yesno-button input[type='radio']:checked + label,
.yesno-button .button-item input[type='radio']:checked + label,
.gender-button.btn-group > .btn-check:checked + label,
.gender-button input[type='radio']:checked + label,
.gender-button .button-item input[type='radio']:checked + label {
  background: var(--ls-accent) !important;
  border-color: var(--ls-accent) !important;
  color: #ffffff !important;
  box-shadow: var(--ls-yesno-selected-shadow) !important;
}

.yesno-button.btn-group label.ls-yesno-selected:hover,
.yesno-button.btn-group label:has(input[type='radio']:checked):hover,
.gender-button.btn-group label.ls-yesno-selected:hover,
.gender-button.btn-group label:has(input[type='radio']:checked):hover {
  transform: translateY(-1px);
}

.yesno-button.btn-group > .btn-check:focus-visible + label,
.yesno-button input[type='radio']:focus-visible + label,
.gender-button.btn-group > .btn-check:focus-visible + label,
.gender-button input[type='radio']:focus-visible + label,
.yesno-button label:has(input:focus-visible),
.gender-button label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.yesno-button.btn-group > .btn-check:checked:focus-visible + label,
.yesno-button input[type='radio']:checked:focus-visible + label,
.gender-button.btn-group > .btn-check:checked:focus-visible + label,
.gender-button input[type='radio']:checked:focus-visible + label {
  box-shadow:
    0 0 0 3px rgba(17, 17, 17, 0.12),
    var(--ls-yesno-selected-shadow);
}

.btn-primary,
.ls-move-next-btn,
.ls-move-submit-btn {
  background: var(--ls-accent) !important;
  border-color: var(--ls-accent) !important;
  color: #ffffff !important;
  padding: 14px 24px !important;
}

.btn-primary:hover,
.btn-primary:focus,
.ls-move-next-btn:hover,
.ls-move-next-btn:focus,
.ls-move-submit-btn:hover,
.ls-move-submit-btn:focus {
  background: var(--ls-accent-strong) !important;
  border-color: var(--ls-accent-strong) !important;
  color: #ffffff !important;
}

.btn-outline-secondary,
.btn-secondary,
.btn-default {
  background: transparent !important;
  border-color: var(--ls-border-soft) !important;
  color: var(--ls-text-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-default:hover {
  background: var(--ls-accent-soft) !important;
  border-color: var(--ls-border-strong) !important;
  color: var(--ls-text-primary) !important;
}

#navigator-container {
  margin-top: 28px;
  padding-top: 6px;
}

#navigator-container .btn {
  min-width: 132px;
}

.alert,
.error,
.warningjs {
  border-radius: 18px;
  border: 1px solid var(--ls-border-soft);
  box-shadow: none;
}

.table,
.table-bordered {
  border-color: #dadada;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border: 1px solid #dadada;
}

@media (max-width: 768px) {
  body {
    background-image: none;
  }

  #main-col {
    padding: 22px 18px 30px;
    border-radius: 22px;
  }

  .survey-name,
  h1.survey-name {
    max-width: none;
    font-size: 32px;
    line-height: 1.08;
  }

  .survey-description,
  .survey-welcome,
  .form-heading {
    font-size: 16px;
  }

  .question-container {
    padding: 16px 0 22px;
  }

  .question-container .questiontext,
  .question-container .lsquestiontext,
  .question-container [id^='ls-question-text-'] {
    font-size: 24px;
  }

  #navigator-container .col-6,
  #navigator-container .text-start,
  #navigator-container .text-end {
    width: 100%;
    text-align: left !important;
  }

  #navigator-container .btn {
    width: 100%;
    margin-top: 12px;
  }
}

/* Cookiy branding: logo image from nav_bar.twig + visually-hidden label */
#survey-nav .cookiy-brand {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  margin-right: 0;
  color: var(--ls-text-primary) !important;
  background: none !important;
}

#survey-nav .cookiy-brand-logo {
  display: block;
  height: var(--ls-brand-logo-height);
  width: auto;
  max-width: 11.5rem;
  object-fit: contain;
}

img[src*='poweredby'] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #progressbar-top .progress-bar::after,
  .top-container .progress-bar::after {
    animation: none !important;
    content: none !important;
  }

  .ls-step-enter .question-container,
  .ls-step-enter .answer-container .checkbox-item label,
  .ls-step-enter .answer-container .radio-item label,
  .ls-step-enter .answer-container .answer-item label,
  .ls-step-enter .answer-container .form-check label,
  .ls-step-enter #welcome-container {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
}