/* =====================================================================
   Quiz Pre & Post Evento — Frontend CSS
   Brand: marrone #5F4E4E · panna #fff6ea
   ===================================================================== */

:root {
  --q-brown:    #5F4E4E;
  --q-brown2:   #4a3b3b;
  --q-cream:    #fff6ea;
  --q-cream2:   #fff0d8;
  --q-border:   #e8d9c4;
  --q-text:     #2d1f1f;
  --q-muted:    #8a7070;
  --q-light:    #c4aca4;
  --q-white:    #ffffff;
  --q-radius:   16px;
  --q-shadow:   0 4px 24px rgba(95,78,78,.10);
}

#qppe-quiz-root * { box-sizing: border-box; }
#qppe-quiz-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 16px;
  color: var(--q-text);
  background: var(--q-cream);
  min-height: 100vh;
}

.qppe-phase { animation: qppeIn .3s ease; }
@keyframes qppeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ── Intro ──────────────────────────────────────────────────────────── */
.qppe-intro {
  background: var(--q-brown);
  border-radius: 24px;
  padding: 52px 36px;
  text-align: center;
  color: var(--q-white);
  position: relative;
  overflow: hidden;
}
.qppe-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255,246,234,.08) 0%, transparent 60%);
  pointer-events: none;
}
.qppe-intro-eyebrow {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--q-cream2); margin-bottom: 20px; font-weight: 700;
}
.qppe-intro h2 {
  font-size: 32px; font-weight: 800; margin: 0 0 14px; line-height: 1.2;
  color: var(--q-white);
}
.qppe-intro h2 span { color: var(--q-cream2); }
.qppe-intro p { color: rgba(255,246,234,.75); font-size: 15px; line-height: 1.7; margin: 0 0 36px; }

.qppe-type-buttons { display: grid; gap: 12px; }
.qppe-type-btn {
  width: 100%; padding: 18px 24px; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  border: 2px solid rgba(255,246,234,.4);
  background: rgba(255,246,234,.08);
  color: var(--q-cream);
  text-align: center; transition: all .2s;
  letter-spacing: .3px;
}
.qppe-type-btn:hover {
  background: rgba(255,246,234,.18);
  border-color: rgba(255,246,234,.7);
  transform: translateY(-2px);
}
.qppe-intro-note { margin-top: 24px; font-size: 12px; color: rgba(255,246,234,.45); }

/* ── Cards (identify, section, open) ────────────────────────────────── */
.qppe-identify,
.qppe-section-card,
.qppe-open-card {
  background: var(--q-white);
  border-radius: var(--q-radius);
  padding: 28px 26px;
  box-shadow: var(--q-shadow);
  border: 1px solid var(--q-border);
  margin-bottom: 14px;
}
.qppe-identify h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--q-brown); }
.qppe-identify > p { font-size: 14px; color: var(--q-muted); margin: 0 0 22px; }
.qppe-open-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--q-brown); }
.qppe-open-card > p { font-size: 13px; color: var(--q-muted); margin: 0 0 22px; }

/* Context badge (company/team) */
.qppe-context-badge {
  display: inline-block; background: var(--q-cream); color: var(--q-brown);
  font-size: 13px; font-weight: 600; padding: 6px 14px;
  border-radius: 99px; margin-bottom: 18px; border: 1px solid var(--q-border);
}

/* Fields */
.qppe-field { margin-bottom: 16px; }
.qppe-field label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--q-brown);
}
.qppe-field input,
.qppe-field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--q-border); font-size: 14px;
  outline: none; transition: border-color .15s; background: #fff;
  color: var(--q-text);
}
.qppe-field input:focus,
.qppe-field select:focus { border-color: var(--q-brown); }

/* Privacy */
.qppe-privacy-wrap {
  margin-bottom: 18px; padding: 12px 16px;
  background: var(--q-cream); border: 1.5px solid var(--q-border); border-radius: 10px;
}
.qppe-privacy-label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 14px; color: var(--q-text); line-height: 1.5;
}
.qppe-privacy-label input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--q-brown); cursor: pointer;
}
.qppe-privacy-label a { color: var(--q-brown); font-weight: 600; }

/* Progress bar */
.qppe-progress-bar { margin-bottom: 22px; }
.qppe-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--q-muted); font-weight: 600; margin-bottom: 8px;
}
.qppe-progress-track {
  background: var(--q-border); border-radius: 99px; height: 5px; overflow: hidden;
}
.qppe-progress-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }

/* Section badge */
.qppe-section-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; margin-bottom: 24px;
  background: var(--q-cream); color: var(--q-brown); border: 1px solid var(--q-border);
}

/* Questions */
.qppe-question-block {
  margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--q-cream2);
}
.qppe-question-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.qppe-question-text {
  font-size: 15px; font-weight: 600; color: var(--q-text); margin: 0 0 4px; line-height: 1.55;
}
.qppe-question-selected { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--q-brown); }

/* Scale */
.qppe-scale {
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: center; margin-top: 12px;
}
.qppe-scale-btn {
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .15s; background: var(--q-white);
  color: var(--q-text); border: 1.5px solid var(--q-border);
}
.qppe-scale-btn:hover { transform: scale(1.08); border-color: var(--q-brown); }
.qppe-scale-btn.selected { transform: scale(1.12); color: #fff; box-shadow: 0 4px 14px rgba(95,78,78,.25); }
.qppe-scale-legend {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--q-light); font-style: italic; margin-top: 8px;
}

/* Open textarea */
.qppe-open-q-label {
  font-size: 15px; font-weight: 600; margin: 0 0 10px; line-height: 1.5; color: var(--q-text);
}
.qppe-open-textarea {
  width: 100%; min-height: 100px; border-radius: 12px;
  border: 1.5px solid var(--q-border); padding: 12px 16px;
  font-size: 14px; color: var(--q-text); resize: vertical;
  font-family: inherit; outline: none; transition: border-color .2s;
  line-height: 1.6; background: var(--q-cream);
}
.qppe-open-textarea:focus { border-color: var(--q-brown); background: #fff; }

/* Navigation buttons */
.qppe-nav { display: grid; gap: 12px; margin-top: 4px; }
.qppe-nav.two-col { grid-template-columns: 1fr 1fr; }
.qppe-nav-btn {
  width: 100%; padding: 14px; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .2s;
}
.qppe-nav-btn.back {
  background: var(--q-white); color: var(--q-muted);
  border: 1.5px solid var(--q-border);
}
.qppe-nav-btn.back:hover { border-color: var(--q-brown); color: var(--q-brown); }
.qppe-nav-btn.next { background: var(--q-brown); color: #fff; letter-spacing: .3px; }
.qppe-nav-btn.next:hover { background: var(--q-brown2); transform: translateY(-1px); }
.qppe-nav-btn.next:disabled {
  background: var(--q-border) !important; color: var(--q-light); cursor: not-allowed; transform: none;
}
.qppe-nav-hint { text-align: center; font-size: 12px; color: var(--q-light); margin-top: 10px; }

/* Done screen */
.qppe-done {
  background: var(--q-brown); border-radius: 24px;
  padding: 52px 36px; text-align: center; color: #fff;
}
.qppe-done-icon { font-size: 56px; margin-bottom: 18px; }
.qppe-done h3 { font-size: 26px; font-weight: 800; margin: 0 0 14px; }
.qppe-done p { color: rgba(255,246,234,.75); font-size: 15px; line-height: 1.7; margin: 0 0 30px; }
.qppe-done-restart {
  padding: 14px 32px; border-radius: 12px;
  background: rgba(255,246,234,.15); color: var(--q-cream);
  border: 2px solid rgba(255,246,234,.4); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .2s;
}
.qppe-done-restart:hover { background: rgba(255,246,234,.25); }

/* Error */
.qppe-error {
  background: #FEF2F2; color: #B91C1C; border-radius: 10px;
  padding: 12px 16px; font-size: 13px; margin-top: 8px; border: 1px solid #FECACA;
}