/**
 * 選択式クイズ スタイル
 * @module neuvecom-common/css/quiz
 */

/* ========================================
   クイズコンテナ
   ======================================== */

.quiz-container {
  margin: 24px 0;
  padding: 24px;
  background-color: var(--quiz-bg, #f9fafb);
  border-radius: 12px;
  border: 1px solid var(--quiz-border, #e5e7eb);
}

/* ダークテーマ（mdBook） */
.navy .quiz-container,
.coal .quiz-container,
.ayu .quiz-container {
  background-color: var(--quiz-bg-dark, #1f2937);
  border-color: var(--quiz-border-dark, #374151);
}

/* ダークテーマ（汎用） */
[data-theme="dark"] .quiz-container,
.dark .quiz-container {
  background-color: var(--quiz-bg-dark, #1f2937);
  border-color: var(--quiz-border-dark, #374151);
}

/* ========================================
   問題
   ======================================== */

.quiz-question {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--quiz-border, #e5e7eb);
}

.quiz-question:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.navy .quiz-question,
.coal .quiz-question,
.ayu .quiz-question,
[data-theme="dark"] .quiz-question,
.dark .quiz-question {
  border-bottom-color: var(--quiz-border-dark, #374151);
}

.quiz-question-text {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--quiz-text, #374151);
}

.navy .quiz-question-text,
.coal .quiz-question-text,
.ayu .quiz-question-text,
[data-theme="dark"] .quiz-question-text,
.dark .quiz-question-text {
  color: var(--quiz-text-dark, #e5e7eb);
}

/* ========================================
   選択肢
   ======================================== */

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  background-color: var(--quiz-option-bg, white);
  border: 2px solid var(--quiz-option-border, #d1d5db);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1em;
  font-family: inherit;
  color: inherit;
}

.navy .quiz-option,
.coal .quiz-option,
.ayu .quiz-option,
[data-theme="dark"] .quiz-option,
.dark .quiz-option {
  background-color: var(--quiz-option-bg-dark, #374151);
  border-color: var(--quiz-option-border-dark, #4b5563);
  color: var(--quiz-text-dark, #e5e7eb);
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--quiz-primary, #3b82f6);
  background-color: var(--quiz-primary-light, #eff6ff);
}

.navy .quiz-option:hover:not(:disabled),
.coal .quiz-option:hover:not(:disabled),
.ayu .quiz-option:hover:not(:disabled),
[data-theme="dark"] .quiz-option:hover:not(:disabled),
.dark .quiz-option:hover:not(:disabled) {
  background-color: var(--quiz-option-hover-dark, #1f2937);
  border-color: var(--quiz-primary-dark, #60a5fa);
}

.quiz-option.selected {
  border-color: var(--quiz-primary, #3b82f6);
  background-color: var(--quiz-selected-bg, #dbeafe);
}

.navy .quiz-option.selected,
.coal .quiz-option.selected,
.ayu .quiz-option.selected,
[data-theme="dark"] .quiz-option.selected,
.dark .quiz-option.selected {
  border-color: var(--quiz-primary-dark, #60a5fa);
  background-color: var(--quiz-selected-bg-dark, #1e3a5f);
}

.quiz-option.correct {
  border-color: var(--quiz-success, #10b981) !important;
  background-color: var(--quiz-success-light, #d1fae5) !important;
}

.navy .quiz-option.correct,
.coal .quiz-option.correct,
.ayu .quiz-option.correct,
[data-theme="dark"] .quiz-option.correct,
.dark .quiz-option.correct {
  border-color: var(--quiz-success-dark, #34d399) !important;
  background-color: var(--quiz-success-bg-dark, #064e3b) !important;
}

.quiz-option.incorrect {
  border-color: var(--quiz-error, #ef4444) !important;
  background-color: var(--quiz-error-light, #fee2e2) !important;
}

.navy .quiz-option.incorrect,
.coal .quiz-option.incorrect,
.ayu .quiz-option.incorrect,
[data-theme="dark"] .quiz-option.incorrect,
.dark .quiz-option.incorrect {
  border-color: var(--quiz-error-dark, #f87171) !important;
  background-color: var(--quiz-error-bg-dark, #7f1d1d) !important;
}

.quiz-option.show-correct:not(.selected) {
  border-color: var(--quiz-success, #10b981);
  border-style: dashed;
}

.quiz-option:disabled {
  cursor: default;
  opacity: 0.9;
}

.option-label {
  font-weight: bold;
  color: var(--quiz-label, #6b7280);
  min-width: 28px;
}

.navy .option-label,
.coal .option-label,
.ayu .option-label,
[data-theme="dark"] .option-label,
.dark .option-label {
  color: var(--quiz-label-dark, #9ca3af);
}

.option-text {
  flex: 1;
}

/* ========================================
   解説
   ======================================== */

.quiz-explanation {
  margin-top: 16px;
  padding: 16px;
  background-color: var(--quiz-explanation-bg, #ecfdf5);
  border-radius: 8px;
  border-left: 4px solid var(--quiz-success, #10b981);
  font-size: 0.95em;
  line-height: 1.6;
}

.navy .quiz-explanation,
.coal .quiz-explanation,
.ayu .quiz-explanation,
[data-theme="dark"] .quiz-explanation,
.dark .quiz-explanation {
  background-color: var(--quiz-explanation-bg-dark, #064e3b);
  color: var(--quiz-explanation-text-dark, #d1fae5);
}

/* ========================================
   フッター
   ======================================== */

.quiz-footer {
  margin-top: 24px;
  text-align: center;
}

.quiz-button {
  padding: 12px 24px;
  font-size: 1em;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.quiz-submit {
  background-color: var(--quiz-primary, #3b82f6);
  color: white;
}

.quiz-submit:hover:not(:disabled) {
  background-color: var(--quiz-primary-hover, #2563eb);
}

.quiz-submit:disabled {
  background-color: var(--quiz-disabled, #9ca3af);
  cursor: not-allowed;
}

.quiz-reset {
  background-color: var(--quiz-secondary, #6b7280);
  color: white;
  margin-right: 12px;
}

.quiz-reset:hover {
  background-color: var(--quiz-secondary-hover, #4b5563);
}

/* ========================================
   結果表示
   ======================================== */

.quiz-result {
  padding: 24px;
  background-color: var(--quiz-result-bg, white);
  border-radius: 8px;
  border: 1px solid var(--quiz-border, #e5e7eb);
  margin-bottom: 16px;
}

.navy .quiz-result,
.coal .quiz-result,
.ayu .quiz-result,
[data-theme="dark"] .quiz-result,
.dark .quiz-result {
  background-color: var(--quiz-result-bg-dark, #374151);
  border-color: var(--quiz-border-dark, #4b5563);
}

.quiz-score {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--quiz-text, #1f2937);
  margin-bottom: 16px;
}

.quiz-score.perfect {
  color: var(--quiz-success, #10b981);
}

.navy .quiz-score,
.coal .quiz-score,
.ayu .quiz-score,
[data-theme="dark"] .quiz-score,
.dark .quiz-score {
  color: var(--quiz-text-dark, #f3f4f6);
}

.navy .quiz-score.perfect,
.coal .quiz-score.perfect,
.ayu .quiz-score.perfect,
[data-theme="dark"] .quiz-score.perfect,
.dark .quiz-score.perfect {
  color: var(--quiz-success-dark, #34d399);
}

.quiz-actions {
  margin-bottom: 24px;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 600px) {
  .quiz-container {
    padding: 16px;
  }

  .quiz-option {
    padding: 12px 14px;
  }
}