/* ===========================================
   CCB OCEAN — LimeSurvey 6 Theme Override
   Parent: fruity_twentythree

   Cream background, deep-ocean text, sand CTAs.
   Matches the survey landing-pages aesthetic but
   optimized for long-form readability.
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  --ccb-primary:        #164E63;
  --ccb-primary-light:  #0E7490;
  --ccb-primary-dark:   #083344;
  --ccb-secondary:      #A98467;
  --ccb-secondary-light:#DDB892;
  --ccb-secondary-soft: #E9CBAE;
  --ccb-accent:         #D97706;
  --ccb-ink:            #083344;
  --ccb-text:           #475569;
  --ccb-muted:          #6B7280;
  --ccb-cream:          #FAF9F6;
  --ccb-card:           #FFFFFF;
  --ccb-border:         rgba(8, 51, 68, 0.10);
  --ccb-border-strong:  rgba(8, 51, 68, 0.18);

  /* Bootstrap variable overrides */
  --bs-primary: #164E63;
  --bs-primary-rgb: 22, 78, 99;
  --bs-link-color: #0E7490;
  --bs-link-hover-color: #083344;
  --bs-body-color: #083344;
  --bs-body-bg: #FAF9F6;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-border-radius: 0.75rem;
}

/* ===========================================
   Global
   =========================================== */

html, body {
  background: var(--ccb-cream) !important;
  color: var(--ccb-ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

body {
  /* Subtle ocean waves + soft top glow.
     Two layered SVG sine waves in deep ocean, very low opacity,
     fixed to the viewport so they breathe with scroll. */
  background-image:
    radial-gradient(ellipse 90% 50% at 50% 0%,
                    rgba(22, 78, 99, 0.06) 0%,
                    transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='none' stroke='%23164E63' stroke-width='1.2' stroke-opacity='0.10' d='M0,180 C240,140 480,220 720,180 C960,140 1200,220 1440,180'/><path fill='none' stroke='%230E7490' stroke-width='1' stroke-opacity='0.08' d='M0,210 C240,170 480,250 720,210 C960,170 1200,250 1440,210'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='none' stroke='%23164E63' stroke-width='1.2' stroke-opacity='0.07' d='M0,140 C320,100 640,200 960,140 C1200,100 1320,180 1440,150'/><path fill='none' stroke='%23A98467' stroke-width='1' stroke-opacity='0.06' d='M0,170 C320,130 640,230 960,170 C1200,130 1320,210 1440,180'/></svg>") !important;
  background-repeat: no-repeat, repeat-x, repeat-x !important;
  background-position: top center, 0 28%, 0 72% !important;
  background-size: auto, 1440px 320px, 1800px 360px !important;
  background-attachment: fixed, fixed, fixed !important;
}

.container,
.outerframe-container,
.row.outerframe-container,
.outerframe {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===========================================
   Typography
   =========================================== */

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.group-title,
.survey-name {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--ccb-ink) !important;
  line-height: 1.2;
}

h1, .h1, .survey-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.85rem) !important; }
h2, .h2, .group-title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem) !important; }
h3, .h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem) !important; }

p, .lead, .group-description, .survey-description, label, .answer-text {
  color: var(--ccb-text) !important;
}

a { color: var(--ccb-primary-light); text-decoration: none; border-bottom: 1px solid rgba(14, 116, 144, 0.25); transition: color 220ms ease, border-color 220ms ease; }
a:hover, a:focus-visible { color: var(--ccb-primary-dark); border-bottom-color: currentColor; outline: none; }

em, i { color: var(--ccb-secondary); font-style: italic; }

/* ===========================================
   Survey Header (Logo + Name + Description)
   =========================================== */

.survey-header,
.survey-welcome,
#survey-name,
.survey-list-heading {
  text-align: center !important;
  padding: clamp(2rem, 4vw, 3.5rem) 1rem clamp(1.5rem, 3vw, 2.5rem) !important;
  background: transparent !important;
  border: none !important;
}

.survey-header img,
.logo-container img {
  max-width: clamp(110px, 14vw, 160px) !important;
  height: auto !important;
  margin: 0 auto 1.5rem !important;
  display: block !important;
  opacity: 0.92;
}

/* ===========================================
   Question Cards
   =========================================== */

.question-container,
.row.question-container,
.ls-form-group {
  background: var(--ccb-card) !important;
  border: 1px solid var(--ccb-border) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: clamp(1.5rem, 2vw + 0.5rem, 2.25rem) !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 1px 2px rgba(8, 51, 68, 0.04),
              0 8px 24px -16px rgba(8, 51, 68, 0.08) !important;
  transition: box-shadow 280ms ease, border-color 280ms ease;
}

.question-container:focus-within {
  border-color: var(--ccb-primary-light) !important;
  box-shadow: 0 1px 2px rgba(8, 51, 68, 0.04),
              0 12px 32px -16px rgba(22, 78, 99, 0.18) !important;
}

.question-title-container,
.question-text,
.ls-label-question {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem) !important;
  color: var(--ccb-ink) !important;
  line-height: 1.45 !important;
  margin-bottom: 0.85rem !important;
}

.ls-question-help,
.help-block,
.question-help-container {
  font-size: 0.92rem !important;
  color: var(--ccb-muted) !important;
  font-style: italic;
  margin-top: 0.5rem !important;
}

/* Required asterisk → amber */
.ls-question-mandatory,
.asterisk,
.text-danger.asterisk {
  color: var(--ccb-accent) !important;
}

/* ===========================================
   Form Controls — inputs, textareas, selects
   =========================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  background: var(--ccb-cream) !important;
  border: 1px solid var(--ccb-border-strong) !important;
  border-radius: 0.5rem !important;
  color: var(--ccb-ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  box-shadow: none !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--ccb-card) !important;
  border-color: var(--ccb-primary-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18) !important;
}

textarea, .form-control[rows] {
  min-height: 120px;
  line-height: 1.55 !important;
  resize: vertical;
}

::placeholder { color: rgba(71, 85, 105, 0.5) !important; }

/* ===========================================
   Radio + Checkbox — clean cards
   =========================================== */

.answer-item,
.radio-item,
.checkbox-item,
.answers-list .answer-item,
.form-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.85rem 1rem !important;
  margin-bottom: 0.5rem !important;
  background: var(--ccb-cream) !important;
  border: 1px solid var(--ccb-border) !important;
  border-radius: 0.6rem !important;
  transition: border-color 220ms ease, background 220ms ease;
  /* Do NOT set pointer-events or cursor on wrapper itself — let the
     native input/label receive the click as LimeSurvey expects */
}

.answer-item:hover,
.radio-item:hover,
.checkbox-item:hover,
.form-check:hover {
  border-color: var(--ccb-secondary-light) !important;
  background: rgba(233, 203, 174, 0.10) !important;
}

.answer-item:has(input:checked),
.radio-item:has(input:checked),
.checkbox-item:has(input:checked),
.form-check:has(input:checked) {
  border-color: var(--ccb-primary-light) !important;
  background: rgba(14, 116, 144, 0.08) !important;
}

.answer-item label,
.radio-item label,
.checkbox-item label {
  color: var(--ccb-ink) !important;
  font-weight: 400 !important;
  cursor: pointer;
  margin: 0 !important;
  flex: 1;
}

/* Radio + Checkbox — work WITH Bootstrap 5's .form-check-input, not against it.
   We only retint the checked state and add a focus ring. We do NOT override
   width/height/appearance, otherwise BS5's custom SVG indicator breaks and
   selections look like they don't register. */
input[type="radio"],
input[type="checkbox"],
.form-check-input {
  accent-color: var(--ccb-primary) !important;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.2rem !important;
}

.form-check-input:checked {
  background-color: var(--ccb-primary) !important;
  border-color: var(--ccb-primary) !important;
}

.form-check-input:focus {
  border-color: var(--ccb-primary-light) !important;
  box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.22) !important;
}

/* ===========================================
   Likert / Matrix tables
   =========================================== */

.ls-answers,
.ls-answers table,
table.questions-list {
  border-collapse: separate !important;
  border-spacing: 0 0.4rem !important;
  width: 100% !important;
}

.ls-answers th,
table.questions-list th {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ccb-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0.4rem !important;
  text-align: center !important;
}

.ls-answers td,
table.questions-list td {
  background: var(--ccb-cream) !important;
  border-top: 1px solid var(--ccb-border) !important;
  border-bottom: 1px solid var(--ccb-border) !important;
  padding: 0.85rem 0.5rem !important;
  text-align: center !important;
}

.ls-answers td:first-child,
table.questions-list td:first-child {
  text-align: left !important;
  font-weight: 500;
  color: var(--ccb-ink) !important;
  border-left: 1px solid var(--ccb-border) !important;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  padding-left: 1rem !important;
}

.ls-answers td:last-child,
table.questions-list td:last-child {
  border-right: 1px solid var(--ccb-border) !important;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* ===========================================
   Navigation Buttons — Sand CTA, Ocean ghost
   Scoped narrowly so we don't touch Y-type or
   button-group answer buttons inside questions.
   =========================================== */

.ls-move-submit-btn,
.ls-move-next-btn,
.navigator-container .btn-primary,
.navigator-container .btn-success,
#ls-button-submit,
#ls-button-next {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.015em;
  padding: 0.95rem 2rem !important;
  border-radius: 999px !important;
  background: var(--ccb-secondary-light) !important;
  color: var(--ccb-primary-dark) !important;
  border: 1px solid var(--ccb-secondary-light) !important;
  box-shadow: 0 14px 32px -18px rgba(169, 132, 103, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease,
              background 280ms ease,
              border-color 280ms ease !important;
  cursor: pointer;
  text-decoration: none !important;
}

.ls-move-submit-btn:hover, .ls-move-submit-btn:focus-visible,
.ls-move-next-btn:hover, .ls-move-next-btn:focus-visible,
.navigator-container .btn-primary:hover,
.navigator-container .btn-success:hover,
#ls-button-submit:hover,
#ls-button-next:hover {
  transform: translateY(-2px);
  background: var(--ccb-secondary-soft) !important;
  border-color: var(--ccb-secondary-soft) !important;
  box-shadow: 0 18px 38px -16px rgba(217, 184, 146, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  outline: none !important;
}

/* Previous → Ghost Ocean */
.ls-move-previous-btn,
.navigator-container .btn-secondary,
.navigator-container .btn-default,
.navigator-container .btn-outline-secondary,
#ls-button-previous {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.015em;
  padding: 0.95rem 2rem !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ccb-primary) !important;
  border: 1px solid var(--ccb-border-strong) !important;
  box-shadow: none !important;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease !important;
  cursor: pointer;
  text-decoration: none !important;
}

.ls-move-previous-btn:hover,
.navigator-container .btn-secondary:hover,
.navigator-container .btn-default:hover,
.navigator-container .btn-outline-secondary:hover,
#ls-button-previous:hover {
  background: rgba(22, 78, 99, 0.06) !important;
  border-color: var(--ccb-primary) !important;
  color: var(--ccb-primary-dark) !important;
}

/* ===========================================
   Y-Type Button-Group (Ja/Nein/Keine Antwort)
   Bootstrap 5 pattern: <input class="btn-check"> + <label class="btn">
   The input is visually hidden — only the label needs styling.
   =========================================== */

.btn-check {
  /* Bootstrap hides this — keep it hidden */
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
}

.btn-group .btn,
label.btn-default,
.answer-item label.btn {
  background: var(--ccb-cream) !important;
  border: 1px solid var(--ccb-border-strong) !important;
  color: var(--ccb-ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  padding: 0.7rem 1.25rem !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.btn-group .btn:hover,
label.btn-default:hover {
  background: rgba(233, 203, 174, 0.15) !important;
  border-color: var(--ccb-secondary-light) !important;
}

/* The active/checked state — selected button gets ocean fill */
.btn-check:checked + .btn,
.btn-check:checked + label.btn,
.btn-group .btn.active,
label.btn.active {
  background: var(--ccb-primary) !important;
  border-color: var(--ccb-primary) !important;
  color: var(--ccb-cream) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.22) !important;
}

/* Navigation row spacing — force Zurück + Weiter onto one row, vertically centered */
.navigator-container,
.ls-navigator,
#navigator-container,
.row.navigator,
.navigator,
#navigator-buttons {
  margin-top: 2rem !important;
  padding: 1rem 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Each button-cell often sits in its own Bootstrap col — neutralize the
   column behavior so buttons align on a single baseline */
.navigator-container > [class*="col-"],
.ls-navigator > [class*="col-"],
#navigator-container > [class*="col-"],
.row.navigator > [class*="col-"],
.navigator > [class*="col-"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Push the submit/next group to the right when previous is on the left */
.navigator-container .ls-move-submit-btn,
.navigator-container .ls-move-next-btn,
.ls-navigator .ls-move-submit-btn,
.ls-navigator .ls-move-next-btn {
  margin-left: auto !important;
}

/* ===========================================
   Progress Bar
   =========================================== */

.progress {
  background: rgba(8, 51, 68, 0.08) !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden;
  margin: 1rem auto !important;
  max-width: 760px;
}

.progress-bar {
  background: linear-gradient(90deg,
              var(--ccb-primary) 0%,
              var(--ccb-primary-light) 100%) !important;
  border-radius: 999px !important;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ===========================================
   Alerts / Validation
   =========================================== */

.alert-danger,
.has-error .help-block,
.text-danger {
  color: var(--ccb-accent) !important;
}

.alert {
  border-radius: var(--bs-border-radius) !important;
  border: 1px solid var(--ccb-border) !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.95rem;
}

.alert-warning,
.alert-danger {
  background: rgba(217, 119, 6, 0.08) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
  color: var(--ccb-accent) !important;
}

.alert-info {
  background: rgba(14, 116, 144, 0.06) !important;
  border-color: rgba(14, 116, 144, 0.22) !important;
  color: var(--ccb-primary-dark) !important;
}

/* ===========================================
   Welcome / Completed screens
   =========================================== */

.completed-text,
.submit-results,
#completed-message {
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  font-size: 1.1rem;
  color: var(--ccb-text);
}

/* ===========================================
   Misc cleanup
   =========================================== */

/* Hide the LimeSurvey footer branding if present */
.ls-footer .ls-no-js-hidden,
.ls-footer-message {
  font-size: 0.78rem;
  color: var(--ccb-muted);
  text-align: center;
  padding: 1rem;
  opacity: 0.6;
}

/* Numbered question prefix (e.g. "1.") */
.ls-question-code,
.question-number {
  color: var(--ccb-secondary) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  margin-right: 0.5rem;
}

/* Smooth scroll between groups */
html { scroll-behavior: smooth; }

/* ===========================================
   Reduced motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================
   Mobile
   =========================================== */

@media (max-width: 640px) {
  .question-container,
  .ls-form-group {
    padding: 1.25rem !important;
    border-radius: 0.6rem !important;
  }

  .btn,
  .ls-move-submit-btn,
  .ls-move-next-btn,
  .ls-move-previous-btn {
    width: 100%;
    justify-content: center;
  }

  .navigator-container { flex-direction: column-reverse; }

  /* Matrix tables → stack on mobile */
  .ls-answers,
  .ls-answers thead { display: block; }
  .ls-answers thead { display: none; }
  .ls-answers tr {
    display: block;
    background: var(--ccb-cream) !important;
    border: 1px solid var(--ccb-border) !important;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }
  .ls-answers td {
    display: flex !important;
    justify-content: space-between;
    border: none !important;
    padding: 0.5rem 0 !important;
    text-align: left !important;
  }
  .ls-answers td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ccb-muted);
  }
}