/* ═══════════════════════════════════════════════
   Quiz Poll Widget — quiz-poll.css
   ═══════════════════════════════════════════════ */

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

:root {
  --qpw-bg:           #1a1c22;
  --qpw-card:         #22252e;
  --qpw-border:       rgba(255,255,255,0.08);
  --qpw-text:         #f0f2f7;
  --qpw-muted:        rgba(240,242,247,0.55);
  --qpw-accent:       #4f8ef7;
  --qpw-correct:      #22c55e;
  --qpw-wrong:        #ef4444;
  --qpw-option-hover: rgba(79,142,247,0.12);
  --qpw-option-sel:   rgba(79,142,247,0.18);
  --qpw-radius:       14px;
  --qpw-font:         'DM Sans', sans-serif;
  --qpw-font-head:    'DM Serif Display', serif;
}

/* ── Wrapper ── */
.qpw-wrap {
  font-family: var(--qpw-font);
  max-width: 620px;
  margin: 0 auto;
  color: var(--qpw-text);
}

/* ── Disclosure ── */
.qpw-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(79,142,247,0.08);
  border: 1px solid rgba(79,142,247,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(240,242,247,0.75);
}
.qpw-disc-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--qpw-accent);
}

/* ── Feedback Banner ── */
.qpw-feedback {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.3s ease;
}
.qpw-feedback--hidden {
  display: none;
}
.qpw-feedback--correct {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
  color: #86efac;
}
.qpw-feedback--wrong {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
}

/* ── Card ── */
.qpw-card {
  background: var(--qpw-card);
  border-radius: var(--qpw-radius);
  border: 1px solid var(--qpw-border);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Image ── */
.qpw-image-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.qpw-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: transform 0.6s ease;
}
.qpw-card:hover .qpw-image {
  transform: scale(1.03);
}

/* ── Body ── */
.qpw-body {
  padding: 24px 24px 20px;
}

/* ── Question ── */
.qpw-question {
  font-family: var(--qpw-font-head);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 20px;
  color: var(--qpw-text);
}

/* ── Options List ── */
.qpw-options {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Single Option ── */
.qpw-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--qpw-border);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.qpw-option:focus {
  outline: 2px solid var(--qpw-accent);
  outline-offset: 2px;
}
.qpw-option:hover:not(.qpw-option--locked) {
  background: var(--qpw-option-hover);
  border-color: rgba(79,142,247,0.3);
}
.qpw-option--selected {
  background: var(--qpw-option-sel);
  border-color: rgba(79,142,247,0.45);
}
.qpw-option--locked {
  cursor: default;
}

/* Progress bar fill on revealed answers */
.qpw-option::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.qpw-option--correct-reveal::before { background: rgba(34,197,94,0.08); }
.qpw-option--wrong-reveal::before   { background: rgba(239,68,68,0.08);  }

/* Revealed border colours */
.qpw-option--correct-reveal {
  border-color: rgba(34,197,94,0.45) !important;
}
.qpw-option--wrong-reveal {
  border-color: rgba(239,68,68,0.3) !important;
}

/* ── Radio dot ── */
.qpw-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, background 0.18s;
  position: relative;
  z-index: 1;
}
.qpw-option--selected .qpw-radio,
.qpw-option--wrong-reveal.qpw-option--selected .qpw-radio {
  border-color: var(--qpw-accent);
  background: var(--qpw-accent);
  box-shadow: 0 0 0 3px rgba(79,142,247,0.2);
}
.qpw-option--selected .qpw-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.qpw-option--correct-reveal .qpw-radio {
  border-color: var(--qpw-correct);
  background: var(--qpw-correct);
}
.qpw-option--correct-reveal .qpw-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* ── Option text ── */
.qpw-opt-text {
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  color: var(--qpw-text);
}
.qpw-option--correct-reveal .qpw-opt-text {
  font-weight: 600;
  color: #fff;
}

/* ── Percentage ── */
.qpw-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--qpw-muted);
  min-width: 36px;
  text-align: right;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.4s 0.3s, transform 0.4s 0.3s;
}
.qpw-option--revealed .qpw-pct {
  opacity: 1;
  transform: translateX(0);
}
.qpw-option--correct-reveal .qpw-pct { color: #86efac; }
.qpw-option--wrong-reveal .qpw-pct   { color: #fca5a5; }

/* ── Check icon (correct answer) ── */
.qpw-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s 0.5s;
}
.qpw-option--correct-reveal .qpw-check-icon {
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2322c55e'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ── Submit Button ── */
.qpw-btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: var(--qpw-accent);
  color: #fff;
  font-family: var(--qpw-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s, transform 0.12s;
  letter-spacing: 0.01em;
}
.qpw-btn:hover:not(:disabled) {
  background: #6ba3ff;
  transform: translateY(-1px);
}
.qpw-btn:active:not(:disabled) {
  transform: translateY(0);
}
.qpw-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.qpw-btn--hidden {
  display: none;
}

/* ── Retake ── */
.qpw-retake {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--qpw-border);
  border-radius: 10px;
  color: var(--qpw-muted);
  font-family: var(--qpw-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  text-align: center;
}
.qpw-retake:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--qpw-text);
}
.qpw-retake--hidden { display: none; }

/* ── Animations ── */
@keyframes qpw-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qpw-feedback:not(.qpw-feedback--hidden) {
  animation: qpw-slide-in 0.3s ease forwards;
}