/* =========================================================
   MCQ Quiz - Frontend Styles (Mobile-first, HD Quiz से प्रेरित)
   ========================================================= */

.mcq-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.mcq-quiz-wrapper {
  width: 100%;
  max-width: 680px;
  margin: 20px auto;
  box-sizing: border-box;
  overflow-x: hidden; /* लंबे शब्द/explanation से horizontal scroll न हो */
}

.mcq-quiz-wrapper *,
.mcq-quiz-wrapper *:before,
.mcq-quiz-wrapper *:after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */
.mcq-quiz-header {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.mcq-exam-title {
  margin: 0 0 6px 0;
  color: #2c3e50;
  font-size: 1.3em;
  line-height: 1.4;
}
.mcq-quiz-desc {
  margin: 0 0 14px 0;
  color: #666;
  font-size: 0.95em;
}

/* ---------- Timer: top-right पर fixed floating badge (मोबाइल पर notch/status-bar से बचाकर) ---------- */
.mcq-timer-float {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #ffffff;
  border: 1.5px solid #c8e1ff;
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  font-weight: bold;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  touch-action: none; /* ताकि touch से drag करते वक्त पेज खुद scroll न हो जाए */
  user-select: none;
}
.mcq-timer-float.mcq-timer-dragging {
  cursor: grabbing;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  opacity: 0.95;
}
.mcq-timer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcq-timer-icon {
  font-size: 0.95em;
  line-height: 1;
}
.mcq-timer-float .mcq-timer-display {
  color: #2980b9;
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.mcq-timer-hint {
  font-size: 0.68em;
  font-weight: normal;
  color: #999;
  white-space: nowrap;
  line-height: 1.2;
}
.mcq-timer-hint.mcq-timer-hint-blink {
  animation: mcq-timer-hint-cycle 1.2s ease-in-out infinite;
  font-weight: bold;
}
@keyframes mcq-timer-hint-cycle {
  0%, 100% { color: #e74c3c; }
  33% { color: #f39c12; }
  66% { color: #27ae60; }
}
.mcq-timer-float.mcq-timer-warning {
  background: #fff8e1;
  border-color: #e0c46c;
}
.mcq-timer-float.mcq-timer-warning .mcq-timer-display {
  color: #b8860b;
}
.mcq-timer-float.mcq-timer-critical {
  background: #ffebee;
  border-color: #f44336;
  animation: mcq-timer-pulse 1s ease-in-out infinite;
}
.mcq-timer-float.mcq-timer-critical .mcq-timer-display {
  color: #d32f2f;
}
@keyframes mcq-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* छोटे फ़ोन पर थोड़ा और कॉम्पैक्ट, ताकि किसी और UI एलिमेंट से न टकराए */
@media screen and (max-width: 480px) {
  .mcq-timer-float {
    top: calc(6px + env(safe-area-inset-top, 0px));
    right: calc(6px + env(safe-area-inset-right, 0px));
    padding: 5px 10px;
    border-radius: 16px;
  }
  .mcq-timer-float .mcq-timer-display {
    font-size: 0.9em;
  }
}

/* बड़ी स्क्रीन (डेस्कटॉप) पर थोड़ा बड़ा और स्पष्ट */
@media screen and (min-width: 782px) {
  .mcq-timer-float {
    top: 18px;
    right: 24px;
    padding: 8px 16px;
    border-radius: 24px;
  }
  .mcq-timer-icon {
    font-size: 1.1em;
  }
  .mcq-timer-float .mcq-timer-display {
    font-size: 1.15em;
  }
}

.mcq-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mcq-progress-track {
  flex: 1;
  height: 8px;
  background: #eef2f5;
  border-radius: 6px;
  overflow: hidden;
}
.mcq-progress-fill {
  height: 100%;
  background: #3498db;
  border-radius: 6px;
  transition: width 250ms ease-in-out;
}
.mcq-progress-text {
  font-size: 0.8em;
  color: #666;
  white-space: nowrap;
}

.mcq-score-summary {
  margin-top: 14px;
  text-align: center;
  background: #f1f8ff;
  border: 1px solid #c8e1ff;
  border-radius: 8px;
  padding: 14px;
}
.mcq-score-summary h3 {
  margin: 0 0 6px 0;
  color: #2980b9;
  font-size: 1.1em;
}
.mcq-score-summary .mcq-score-number {
  font-size: 1.8em;
  font-weight: bold;
  color: #e74c3c;
}

/* ---------- Name field ---------- */
.mcq-name-field {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.mcq-name-field label {
  display: block;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}
.mcq-student-name {
  width: 100%;
  padding: 12px;
  font-size: 16px; /* 16px से कम होने पर iOS पर फोकस करते ही zoom हो जाता है */
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* ---------- Question cards ---------- */
.mcq-questions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.mcq-question-card {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 16px;
  transition: box-shadow 200ms ease;
}
.mcq-question-card.mcq-card-answered {
  box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
}

.mcq-question-head {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.mcq-question-number {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3498db;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcq-question-text {
  color: #34495e;
  font-size: 1.05em;
  line-height: 1.5;
  padding-top: 2px;
}

/* ---------- Options: पूरी row tap करने लायक (mobile के लिए सबसे ज़रूरी) ---------- */
.mcq-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcq-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px; /* thumb-friendly tap-target */
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 150ms ease, background 150ms ease;
}
.mcq-option-row:active {
  background: #f5f9ff;
}
.mcq-option-row:has(.mcq-radio:checked) {
  border-color: #3498db;
  background: #f5f9ff;
}

.mcq-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mcq-option-marker {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #b6c2cc;
  position: relative;
}
.mcq-radio:checked ~ .mcq-option-marker {
  border-color: #3498db;
}
.mcq-radio:checked ~ .mcq-option-marker::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3498db;
}

.mcq-option-text {
  color: #2c3e50;
  font-size: 1em;
  line-height: 1.4;
}

/* सबमिट के बाद सही/गलत हाइलाइट सीधे उसी option पर */
.mcq-option-correct {
  border-color: #4caf50 !important;
  background: #e8f5e9 !important;
}
.mcq-option-correct .mcq-option-marker {
  border-color: #4caf50 !important;
}
.mcq-option-correct .mcq-option-marker::after {
  background: #4caf50 !important;
}
.mcq-option-wrong {
  border-color: #f44336 !important;
  background: #ffebee !important;
}
.mcq-option-wrong .mcq-option-marker {
  border-color: #f44336 !important;
}
.mcq-option-wrong .mcq-option-marker::after {
  background: #f44336 !important;
}

.mcq-quiz-submitted .mcq-option-row {
  cursor: default;
  pointer-events: none;
}

.mcq-explanation-panel {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff8e1;
  border: 1px dashed #e0c46c;
  border-radius: 6px;
  font-size: 0.92em;
  color: #5a4a20;
  line-height: 1.6;
}

/* ---------- Submit bar: लंबे quiz में हर बार नीचे scroll न करना पड़े इसलिए sticky ---------- */
.mcq-submit-bar,
.mcq-retry-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #ffffff 70%, rgba(255,255,255,0));
  padding: 14px 0 6px 0;
  z-index: 5;
}

.mcq-submit-btn {
  background-color: #3498db;
  color: #fff;
  padding: 14px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  transition: background-color 0.2s;
  touch-action: manipulation;
}
.mcq-submit-btn:hover { background-color: #2980b9; }
.mcq-submit-btn:disabled { background-color: #a9c8dd; cursor: not-allowed; }

.mcq-retry-btn {
  background-color: #2c3e50;
}
.mcq-retry-btn:hover { background-color: #1a252f; }

/* ---------- Small phones ---------- */
@media screen and (max-width: 480px) {
  .mcq-quiz-wrapper { margin: 10px auto; }
  .mcq-quiz-header,
  .mcq-name-field,
  .mcq-question-card { padding: 12px; border-radius: 8px; }
  .mcq-exam-title { font-size: 1.1em; }
  .mcq-question-text { font-size: 1em; }
  .mcq-option-row { padding: 10px 12px; }
  .mcq-submit-btn { padding: 13px 18px; font-size: 15px; }
}

/* =========================================================
   Admin Styles
   ========================================================= */
.mcq-question-block {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}
.mcq-question-block label { display: inline-block; min-width: 160px; }
.mcq-copy-btn { margin-left: 5px; }