/* Showpiece 3 — Quiz engine. Visual states only; content lives in Elementor widgets. */
#quiz { position: relative; box-shadow: 14px 14px 0 var(--e-global-color-pnpblush); }
@media (max-width: 767px) { #quiz { box-shadow: 8px 8px 0 var(--e-global-color-pnpblush); } }

/* Answer cards (counter letters A, B, C, D) */
#quiz-questions > .e-con, #quiz-questions > .e-con-inner > .e-con { counter-reset: pnp-ans; }
#quiz .quiz-answer { counter-increment: pnp-ans; }
#quiz .quiz-answer .elementor-button {
  width: 100%; height: 100%; white-space: normal; text-align: left;
  padding: 18px 20px !important; border-radius: 12px !important;
  background: var(--e-global-color-pnpcream) !important; color: var(--e-global-color-primary) !important;
  border: 1.5px solid var(--e-global-color-pnpline) !important;
  font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4;
  transition: border-color .25s, background-color .25s, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
#quiz .quiz-answer .elementor-button-content-wrapper { justify-content: flex-start; align-items: center; }
#quiz .quiz-answer .elementor-button-text { display: flex; align-items: center; gap: 16px; }
#quiz .quiz-answer .elementor-button-text::before {
  content: counter(pnp-ans, upper-alpha); flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--e-global-color-pnpwhite); border: 1.5px solid var(--e-global-color-primary);
  font-family: var(--e-global-typography-accent-font-family), monospace; font-size: 13px; font-weight: 700;
}
#quiz .quiz-answer .elementor-button:hover {
  background: var(--e-global-color-pnpwhite) !important; border-color: var(--e-global-color-primary) !important;
  transform: translate(-2px, -2px) rotate(-0.4deg); box-shadow: 4px 4px 0 var(--e-global-color-primary);
}
#quiz .quiz-answer.is-selected .elementor-button { background: var(--e-global-color-pnpblush) !important; border-color: var(--e-global-color-secondary) !important; box-shadow: 4px 4px 0 var(--e-global-color-secondary); }
#quiz .quiz-answer.is-selected .elementor-button-text::before { background: var(--e-global-color-secondary); border-color: var(--e-global-color-secondary); color: var(--e-global-color-pnpwhite); }
#quiz .quiz-question-title .elementor-heading-title { outline: none; }

/* Progress bottle */
.pnp-quiz-progress { display: none; align-items: center; gap: 16px; margin-bottom: 32px; }
.pnp-qp-bottle { position: relative; flex-shrink: 0; width: 34px; height: 56px; }
.pnp-qp-cap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 10px; border-radius: 3px 3px 0 0; background: var(--e-global-color-primary); }
.pnp-qp-glass { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border: 1.5px solid var(--e-global-color-primary); border-radius: 8px 8px 10px 10px; overflow: hidden; background: var(--e-global-color-pnpcream); }
.pnp-qp-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, var(--e-global-color-secondary), var(--e-global-color-pnprose)); transition: height .7s cubic-bezier(.22,1,.36,1); }
.pnp-qp-bar { flex: 1 1 auto; height: 4px; border-radius: 4px; background: var(--e-global-color-pnpblush); overflow: hidden; }
.pnp-qp-bar-fill { display: block; height: 100%; width: 0; background: var(--e-global-color-secondary); transition: width .7s cubic-bezier(.22,1,.36,1); }
.pnp-qp-count { font-family: var(--e-global-typography-accent-font-family), monospace; font-size: 13px; letter-spacing: .1em; white-space: nowrap; }

/* States (only once the script is running) */
#quiz.is-ready #quiz-questions,
#quiz.is-ready .quiz-back,
#quiz.is-ready .quiz-loading,
#quiz.is-ready #quiz-results { display: none; }
#quiz.is-started #quiz-intro { display: none; }
#quiz.is-started:not(.is-finished) .pnp-quiz-progress { display: flex; }
#quiz.is-started:not(.is-finished) #quiz-questions { display: flex; }
#quiz.is-started:not(.is-finished) .quiz-back { display: block; }
#quiz.is-first .quiz-back { opacity: .3; pointer-events: none; }
#quiz.is-ready #quiz-questions > .e-con,
#quiz.is-ready #quiz-questions > .e-con-inner > .e-con { display: none; }
#quiz.is-ready #quiz-questions .e-con.is-active { display: flex; padding-bottom: 0; animation: pnp-q-in .55s cubic-bezier(.22,1,.36,1); }
#quiz.is-ready #quiz-questions .e-con.is-active.is-back { animation-name: pnp-q-back; }
@keyframes pnp-q-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pnp-q-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.quiz-back { margin-top: 28px; }

#quiz.is-finished.is-loading .quiz-loading { display: block; padding: 60px 0; }
.quiz-loading .elementor-heading-title::after { content: " ●●●"; letter-spacing: 4px; font-size: .6em; color: var(--e-global-color-pnprose); animation: pnp-dots 1s infinite; }
@keyframes pnp-dots { 50% { opacity: .3; } }

#quiz.is-finished:not(.is-loading) #quiz-results { display: flex; }
#quiz.is-ready #quiz-results > [id^="result-"],
#quiz.is-ready #quiz-results > .e-con-inner > [id^="result-"] { display: none; }
#quiz.is-ready #quiz-results [id^="result-"].is-active { display: flex; padding-bottom: 24px; }
#quiz.is-ready #quiz-actions { display: none; }
#quiz.is-revealed #quiz-actions { display: flex; }
#quiz.is-revealed #quiz-results-head { display: none; }

[id^="result-"][id$="-reveal"] { position: relative; overflow: hidden; }
.pnp-scratch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; cursor: grab; touch-action: none; transition: opacity .7s cubic-bezier(.22,1,.36,1); }
.pnp-scratch.is-clearing { opacity: 0; pointer-events: none; }
.quiz-result-stamp img { transform: rotate(-10deg); }