/* =====================================================
   quiz.css — REVISIONE #195 (QA FAIL cycle 1, TASK-1793484689136-7PQR1)
   Stili scoped del Sfizio QUIZZ per pes-renewal, design approvato #182.
   Copre il contratto DOM di assets/quiz.js V5.1 (classi .quiz-*, stati
   .disabled/.fade/.correct/.wrong, opt-in V5, risultati win/lose).
   Token #182: --nero, --oro, --oro-scuro, --oro-ink, --crema, --crema-carta,
   --testo-chiaro, --testo-sec-chiaro, --font-display.
   ===================================================== */

.quiz-section { background: var(--crema-carta, #FBF7EF); color: var(--testo-chiaro, #1A1A1A); padding: clamp(3rem, 8vw, 5rem) 0; }
.quiz-container { max-width: 620px; margin: 0 auto; padding: 0 1.25rem; }
.quiz-card { background: #fff; border: 1px solid var(--oro, #C8A460); border-radius: 10px; padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; box-shadow: 0 10px 30px rgba(20, 19, 17, .06); }
.quiz-intro-icon, .quiz-result-icon { font-size: 2.2rem; display: block; margin-bottom: .5rem; line-height: 1; }
.quiz-title { font-family: var(--font-display, Georgia, serif); font-size: 1.7rem; margin: 0 0 .5rem; color: var(--nero, #141311); }
.quiz-subtitle { color: var(--testo-sec-chiaro, #5C554B); margin: 0 0 1.5rem; line-height: 1.65; }

/* ===== Bottoni ===== */
.quiz-btn-start, .quiz-btn-next, .quiz-btn-retry, .quiz-btn-submit { display: inline-block; background: var(--nero, #141311); color: var(--crema, #F5EBDD); border: 1px solid var(--nero, #141311); padding: 12px 28px; border-radius: 999px; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.quiz-btn-start:hover, .quiz-btn-next:hover, .quiz-btn-retry:hover, .quiz-btn-submit:hover { background: var(--oro, #C8A460); border-color: var(--oro, #C8A460); color: var(--nero, #141311); }
.quiz-btn-next:disabled, .quiz-btn-start:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Card email + opt-in (V5) ===== */
.quiz-email-form { display: flex; flex-direction: column; gap: .75rem; max-width: 400px; margin: 0 auto 1rem; text-align: left; }
.quiz-email-input { width: 100%; padding: 12px 14px; border: 1px solid var(--oro-scuro, #B08D4E); border-radius: 6px; font-size: 1rem; background: var(--crema-carta, #FBF7EF); color: var(--testo-chiaro, #1A1A1A); }
.quiz-email-input:focus { outline: none; border-color: var(--oro, #C8A460); box-shadow: 0 0 0 3px rgba(200, 164, 96, .15); }
.quiz-optin-wrapper { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin-top: .25rem; }
.quiz-optin-wrapper input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--oro, #C8A460); cursor: pointer; }
.quiz-optin-wrapper label { font-size: .85rem; color: var(--testo-sec-chiaro, #5C554B); line-height: 1.5; cursor: pointer; margin: 0; }
.quiz-optin-hint { font-size: .8rem; color: var(--testo-sec-chiaro, #5C554B); opacity: .85; text-align: left; margin: 0 0 .5rem; line-height: 1.4; }

/* ===== Progresso ===== */
.quiz-progress-bar { background: var(--crema, #F5EBDD); border-radius: 999px; height: 6px; margin: 0 0 .75rem; overflow: hidden; }
.quiz-progress-fill { background: var(--oro, #C8A460); height: 100%; width: 0%; transition: width .3s ease; border-radius: 999px; }
.quiz-progress-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-ink, #8C6F3F); margin: 0 0 1rem; }

/* ===== Domanda e risposte ===== */
.quiz-question-text { font-family: var(--font-display, Georgia, serif); font-size: 1.25rem; margin: 0 0 1rem; color: var(--nero, #141311); line-height: 1.4; }
.quiz-answers { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1rem; text-align: left; }
.quiz-answer-btn { display: block; width: 100%; background: var(--crema-carta, #FBF7EF); color: var(--testo-chiaro, #1A1A1A); border: 1px solid var(--oro-scuro, #B08D4E); border-radius: 8px; padding: 12px 16px; cursor: pointer; font-size: 1rem; line-height: 1.5; text-align: left; transition: border-color .2s, background .2s, opacity .2s; }
.quiz-answer-btn:hover:not(.disabled) { border-color: var(--oro, #C8A460); background: var(--crema, #F5EBDD); }
.quiz-answer-btn.disabled { cursor: default; pointer-events: none; }
.quiz-answer-btn.correct { background: #4a7c4e; border-color: #4a7c4e; color: #fff; }
.quiz-answer-btn.wrong { background: #b04a4a; border-color: #b04a4a; color: #fff; }
.quiz-answer-btn.fade { opacity: .45; }

/* ===== Feedback ===== */
.quiz-feedback { margin: .5rem 0 1rem; padding: 14px 16px; background: var(--crema-carta, #FBF7EF); border-left: 3px solid var(--oro, #C8A460); border-radius: 6px; text-align: left; }
.quiz-feedback-text { font-size: .95rem; color: var(--testo-sec-chiaro, #5C554B); line-height: 1.6; margin: 0; }
.quiz-feedback-text .feedback-correct { color: #4a7c4e; font-weight: 700; }
.quiz-feedback-text .feedback-wrong { color: #b04a4a; font-weight: 700; }

/* ===== Risultato (V5 — nessun voucher a schermo) ===== */
.quiz-result-win-title, .quiz-result-lose-title { font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; margin: 0 0 .5rem; color: var(--nero, #141311); line-height: 1.3; }
.quiz-result-win-text, .quiz-result-lose-text { color: var(--testo-sec-chiaro, #5C554B); font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.5rem; }

/* ===== Loading ===== */
.quiz-loading { text-align: center; color: var(--oro-ink, #8C6F3F); font-style: italic; font-size: .95rem; padding: 20px 0; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .quiz-card { padding: 1.5rem 1.15rem; }
  .quiz-title { font-size: 1.4rem; }
  .quiz-question-text { font-size: 1.1rem; }
  .quiz-answer-btn { padding: 11px 14px; font-size: .95rem; }
  .quiz-btn-start, .quiz-btn-next, .quiz-btn-retry, .quiz-btn-submit { width: 100%; }
  .quiz-email-form { width: 100%; }
}