/* ═══════════════════════════════════════════════════════════
   ProSocial World — Noticing Tool Survey Theme
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

body {
  background: #F7F7F7 !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
}

/* ── Header / navbar ──────────────────────────────────── */
.navbar, .navbar-default {
  background: #062224 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.navbar-brand span, .navbar-brand > span {
  display: none !important;
}

.navbar-brand {
  padding: 8px 15px !important;
}

.navbar .nav > li > a, a[href*="saveall"] {
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px !important;
}

/* ── Layout — 80% width, centered ─────────────────────── */
div#outerframeContainer.outerframe.container {
  max-width: 80% !important;
  width: 80% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .container, body .outerframe {
  padding-top: 8px !important;
}

.row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Question cards — tight vertical spacing ──────────── */
.question-container {
  margin-bottom: 8px !important;
  padding: 12px 24px 12px !important;
  min-height: 0 !important;
}

.boilerplate, .text-display, [class*="boilerplate"] {
  width: 100% !important;
}

.question-container .question-text {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

.question-container .answer-container {
  margin-top: 4px !important;
  padding-top: 0 !important;
}

textarea {
  min-height: 80px !important;
}

/* ── Progress bar — all pages ─────────────────────────── */
.progress, div[class*="progress"]:not(.progress-bar) {
  height: 22px !important;
  border-radius: 11px !important;
  background: #E8E4DF !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
}

.progress-bar, div[class*="progressbar"] {
  background: linear-gradient(to right, #C0E172, #5F418C) !important;
  border-radius: 11px !important;
  border: none !important;
  transition: width 0.4s ease !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #FFFFFF !important;
  line-height: 22px !important;
  text-align: center !important;
  min-width: 2em !important;
}

.progress-bar span, .progress-bar .sr-only {
  display: inline !important;
  position: static !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
}

/* ── Typography ───────────────────────────────────────── */
h3, .survey-name h3 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-weight: 400 !important;
  color: #062224 !important;
}

/* ── Text inputs ──────────────────────────────────────── */
textarea, input[type="text"], input.form-control {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  border: 1px solid #D4D0CC !important;
  padding: 10px 16px !important;
  background: #FAFAFA !important;
}

textarea:focus, input[type="text"]:focus {
  border-color: #5F418C !important;
  box-shadow: 0 0 0 3px rgba(95,65,140,0.12) !important;
  background: #FFF !important;
}

/* ── Navigation buttons ───────────────────────────────── */
.btn-primary, input[type="submit"], .btn-success, [id*="movenext"] {
  background: #062224 !important;
  border: 2px solid #062224 !important;
  color: #FFF !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 28px !important;
}

.btn-primary:hover, [id*="movenext"]:hover {
  background: #0a3538 !important;
  box-shadow: 0 2px 8px rgba(6,34,36,0.25) !important;
}

.btn-default, [id*="moveprev"] {
  background: transparent !important;
  border: 2px solid #D4D0CC !important;
  color: #062224 !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 10px 28px !important;
}

.btn-default:hover, [id*="moveprev"]:hover {
  border-color: #062224 !important;
}

/* ── Hide question count ──────────────────────────────── */
.ls-questioncount, .question-count-text {
  display: none !important;
}

/* ── Mandatory asterisk ───────────────────────────────── */
.text-danger, .asterisk {
  color: #5F418C !important;
  font-size: 10px !important;
}

/* ── Mobile — go full width on small screens ──────────── */
@media (max-width: 768px) {
  div#outerframeContainer.outerframe.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  textarea { font-size: 16px !important; }
  .navigator .btn { width: 100% !important; margin-bottom: 8px !important; }
}
}/* ── Widen audio guide pill ───────────────────────────── */
div[style*="background:#C0E172"] {
  max-width: 100% !important;
}