/* Basic quiz styles */
/* .quiz-wrapper { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:32px; max-width:900px; margin:0 auto; } */
.quiz-loading { text-align:center; padding:40px; color:#6b7280; font-size:16px; }
.quiz-start-screen { min-height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.quiz-start-screen h2 { margin:0 0 20px; font-weight:700; }
.quiz-start-screen .quiz-button { margin-top:20px; }
.quiz-error { text-align:center; padding:24px; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; border-radius:12px; margin:16px 0; }
.quiz-sticky-container {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.quiz-header { 
  display:flex; 
  flex-direction: column;
  justify-content:space-between; 
  align-items:flex-start; 
  margin-bottom:0; 
  flex-wrap:wrap; 
  gap:12px;
  padding: 15px 0 10px 0;
  border-bottom: 1px solid #e5e7eb;
}
.quiz-header h2 { margin:0; font-size:24px; font-weight:700; color:rgb(55, 65, 81); }
.quiz-progress { 
  background: #fff;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
  margin:0; 
}
.quiz-progress .progress-bar-wrapper {
  height:10px; 
  background:#e5e7eb; 
  border-radius:999px; 
  overflow:hidden;
}
.quiz-progress .bar { height:100%; background:linear-gradient(90deg,#2563eb,#3b82f6); transition:width .4s ease; }
.quiz-question { margin-top:20px; padding:20px; border:2px solid #e5e7eb; border-radius:12px; background:#f9fafb; transition:border-color .2s; }
.quiz-question:hover { border-color:#cbd5e1; }
.quiz-answers { display:grid; gap:12px; margin-top:16px; }
.quiz-answer { padding:14px 18px; border:2px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer; transition:all .2s ease; text-align:left; font-size:15px; color:rgb(55, 65, 81);text-transform: inherit;}
.quiz-answer:hover:not(:disabled) { border-color:#2563eb; background:#eff6ff; transform:translateX(4px); box-shadow:0 4px 12px rgba(37,99,235,0.15); }
.quiz-answer.selected { border-color:#2563eb; background:#eff6ff; font-weight:600; }
.quiz-answer.correct { border-color:#16a34a; background:#ecfdf3; color:#166534; }
.quiz-answer.incorrect { border-color:#dc2626; background:#fef2f2; color:#991b1b; }
.quiz-answer:disabled { cursor:not-allowed; opacity:0.7; }
.quiz-footer { margin-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.quiz-button { padding:14px 24px; border-radius:10px; border:none; background:#2563eb; color:#fff; font-weight:600; cursor:pointer; transition:all .2s ease; font-size:15px; }
.quiz-button:disabled { background:#9ca3af; cursor:not-allowed; transform:none; }
.quiz-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,99,235,0.3); }
.quiz-notice { color:#1e40af; background:#eef2ff; border:1px solid #c7d2fe; padding:14px 16px; border-radius:10px; margin-bottom:16px; line-height:1.6; }
.quiz-notice strong { color:#1e3a8a; }
.quiz-remaining { color:#6b7280; font-size:14px; padding:8px 12px; background:#f3f4f6; border-radius:8px; }
.quiz-popup-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.75); display:flex; align-items:center; justify-content:center; z-index:99999; backdrop-filter:blur(4px); }
.quiz-popup { background:#fff; padding:28px; border-radius:20px; width:95%; max-width:95%; box-shadow:0 25px 60px rgba(0,0,0,0.25); animation:quizPopupIn .3s ease; }
@keyframes quizPopupIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.quiz-popup h3 { margin:0 0 12px; font-size:22px; font-weight:700; color:rgb(55, 65, 81); }
.quiz-popup p { margin:0 0 16px; color:#6b7280; line-height:1.6; }
.quiz-popup-input { width:100%; padding:12px 16px; border:2px solid #d1d5db; border-radius:10px; margin-top:8px; font-size:15px; transition:border-color .2s; }
.quiz-popup-input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.quiz-popup-actions { margin-top:20px; display:flex; gap:12px; justify-content:flex-end; }
.quiz-tag { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:#f3f4f6; color:rgb(55, 65, 81); font-size:13px; font-weight:500; }
.quiz-list { margin-top:8px; }
/* .quiz-embed { background:#f9fafb; } */
.quiz-embed .quiz-wrapper { margin:10px auto; }
/* Floating header for iframe */
.quiz-floating-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.quiz-floating-header .quiz-header {
  padding: 10px 20px;
  margin: 0;
}
.quiz-floating-header .quiz-progress {
  padding: 8px 20px;
  margin: 0;
}
.quiz-embed .quiz-wrapper,
body.quiz-embed .quiz-wrapper {
  overflow: visible !important;
  position: relative !important;
}
.quiz-embed .quiz-embed-wrapper,
body.quiz-embed .quiz-embed-wrapper {
  overflow: visible !important;
  position: relative !important;
}
.quiz-embed .max-w-4xl,
body.quiz-embed .max-w-4xl {
  overflow: visible !important;
  position: relative !important;
}

@media (max-width: 640px) {
  /* .quiz-start-screen,.quiz-wrapper{ padding:10px !important; } */
  .quiz-question{ padding:10px !important; }
  .quiz-answer{padding: 10px 15px;line-height: 1;}
  .quiz-button{padding: 10px 15px; line-height: 1.5;}
  .quiz-popup{ padding:10px !important;}
  .quiz-button{font-size: 12px;}
  .campaign-questions-section{padding:10px !important; }
}