/**
 * DeutchMaak — universal premium button & option UI (all B1/B2 quizzes)
 * Visual only — does not affect quiz logic or scoring.
 */
@import url('../telc-home-nav.css');
@import url('../telc-theme-dark.css');
@import url('../telc-micro-interactions.css');
@import url('../telc-exercise-chrome.css');

:root {
  --telc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --telc-motion: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --telc-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --telc-shadow-active: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --telc-pink: #e11d2e;
  --telc-blue: #e11d2e;
  --telc-primary: #e11d2e;
  --telc-primary-dark: #b31321;
  --telc-violet: #3a424d;
  --telc-border: #e6e8ec;
  --telc-text: #101216;
  --telc-muted: #5d6774;
}

/* ── Shared motion ── */
body .option,
body label.option,
body .draggable,
body .quiz-button,
body .quiz-button-link,
body #checkBtn,
body #resetBtn,
body #homeBtn,
body .btn-check,
body .btn-green,
body .btn-blue,
body .auto-nav-btn,
body .button-wrapper button,
body .button-wrapper a,
body .button-container button,
body .button-container a,
body #check-btn,
body button.quiz-button,
body a.quiz-button-link,
body input[type="button"],
body input[type="submit"]:not([disabled]),
body button[type="button"],
body button[type="submit"]:not([disabled]),
body .choices button,
body .container > button,
body .letter ~ button,
body a.btn,
body .btn,
body [role="button"]:not(input) {
  transition: var(--telc-motion) !important;
  -webkit-tap-highlight-color: transparent;
}

/* ── Answer options (Sprachbausteine, MCQ labels) ── */
body .option,
body label.option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  font-size: clamp(14px, 2.8vw, 15px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--telc-text) !important;
  border: 2px solid var(--telc-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fdf8fc 100%) !important;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.05) !important;
  cursor: pointer !important;
  text-align: center !important;
}

body.sprachbausteine-page .option,
body.sprachbausteine-page label.option,
body.sprachbausteine-page button.option {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: nowrap !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: normal !important;
  border-radius: 18px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  flex: 1 1 0 !important;
}

body.sprachbausteine-page .options {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body .option:hover,
body label.option:hover {
  border-color: #e88b95 !important;
  background: linear-gradient(145deg, #fdecee 0%, #fbe9ea 100%) !important;
}

body .option.selected,
body label.option.selected {
  border-color: var(--telc-primary) !important;
  background: linear-gradient(145deg, #fbd9dc 0%, #f8e3e4 100%) !important;
  box-shadow: 0 4px 14px rgba(225, 29, 46, 0.18) !important;
}

body .option.correct,
body label.option.correct {
  border-color: #2e7d32 !important;
  background: #e8f5e9 !important;
}

body .option.incorrect,
body label.option.incorrect {
  border-color: #e53935 !important;
  background: #ffebee !important;
}

/* ── Drag-and-drop answer pool (Lesen, etc.) ── */
body .right-column .draggable,
body .right-column-content .draggable,
body #teil1-answers .draggable,
body .answer-column .draggable {
  padding: 12px 16px !important;
  font-size: clamp(14px, 2.8vw, 15px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--telc-text) !important;
  border: 2px solid var(--telc-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f5f7fa 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  cursor: grab !important;
}

body .right-column .draggable:hover,
body .right-column-content .draggable:hover,
body #teil1-answers .draggable:hover {
  border-color: #e88b95 !important;
  background: linear-gradient(145deg, #fdecee 0%, #fff 100%) !important;
}

body .draggable.dragging,
body .draggable.dragging-style {
  cursor: grabbing !important;
}

body .drop-target .draggable {
  cursor: default !important;
}

/* ── Primary action: check / submit ── */
body #checkBtn,
body .btn-check,
body #check-btn,
body .btn-green,
body button.quiz-button:not(.secondary):not(.telc-global-check-btn):not(.lesen-teil2-check-btn),
body .quiz-button:not(.secondary):not(.telc-global-check-btn):not(.lesen-teil2-check-btn),
body button[type="button"]:not(#resetBtn):not(#resetQuizButton):not(.telc-global-reset-btn):not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(#telcThemeToggle):not(.telc-theme-capsule):not(.telc-theme-toggle),
body .choices button[type="button"]:not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(.telc-global-reset-btn),
body .container > button[type="button"]:not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(.telc-global-reset-btn) {
  padding: 12px 24px !important;
  font-size: clamp(14px, 2.8vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--telc-primary) 0%, var(--telc-blue) 100%) !important;
  box-shadow: 0 4px 14px rgba(225, 29, 46, 0.32) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

body #checkBtn:hover,
body .btn-check:hover,
body #check-btn:hover,
body .btn-green:hover,
body button.quiz-button:not(.secondary):not(.telc-global-check-btn):not(.lesen-teil2-check-btn):hover,
body .quiz-button:not(.secondary):not(.telc-global-check-btn):not(.lesen-teil2-check-btn):hover,
body button[type="button"]:not(#resetBtn):not(#resetQuizButton):not(.telc-global-reset-btn):not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(#telcThemeToggle):not(.telc-theme-capsule):not(.telc-theme-toggle):hover,
body .choices button[type="button"]:not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(.telc-global-reset-btn):hover,
body .container > button[type="button"]:not(.telc-global-check-btn):not(.lesen-teil2-check-btn):not(.telc-global-reset-btn):hover {
  background: linear-gradient(135deg, var(--telc-primary-dark) 0%, #8f0f1a 100%) !important;
}

/* ── Reset / Wiederholen / secondary quiz actions ── */
body #resetBtn,
body #resetQuizButton,
body button.telc-global-reset-btn,
body button.quiz-button.secondary,
body .quiz-button.secondary {
  padding: 12px 24px !important;
  font-size: clamp(14px, 2.8vw, 16px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #454d58 0%, #2a3038 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 18, 22, 0.22) !important;
  cursor: pointer !important;
}

body #resetBtn:hover,
body #resetQuizButton:hover,
body button.telc-global-reset-btn:hover,
body button.quiz-button.secondary:hover,
body .quiz-button.secondary:hover {
  filter: none !important;
}

/* ── Back / home / Zurück ── */
body #homeBtn,
body .quiz-button-link,
body a.quiz-button-link,
body .quiz-button-link.secondary,
body .btn-blue {
  padding: 12px 24px !important;
  font-size: clamp(14px, 2.8vw, 15px) !important;
  font-weight: 700 !important;
  color: var(--telc-muted) !important;
  border: 2px solid var(--telc-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body #homeBtn:hover,
body .quiz-button-link:hover,
body a.quiz-button-link:hover,
body .btn-blue:hover {
  border-color: var(--telc-pink) !important;
  color: var(--telc-pink) !important;
  background: #fff !important;
}

/* ── Prev / Next / auto-nav ── */
body .auto-nav-btn,
body .auto-nav-wrap a.auto-nav-btn {
  padding: 10px 20px !important;
  font-size: clamp(13px, 2.6vw, 15px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e11d2e 0%, #b31321 100%) !important;
  box-shadow: 0 3px 12px rgba(225, 29, 46, 0.28) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body .auto-nav-btn.auto-nav-secondary {
  background: linear-gradient(135deg, #454d58 0%, #2a3038 100%) !important;
}

body .auto-nav-btn:hover,
body .auto-nav-wrap a:hover {
  filter: none !important;
}

body .auto-nav-btn.auto-nav-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Generic inputs used as buttons ── */
body input[type="button"],
body input[type="submit"]:not([disabled]) {
  padding: 10px 20px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 2px solid var(--telc-border) !important;
  background: #fff !important;
  cursor: pointer !important;
}

body input[type="button"]:hover,
body input[type="submit"]:not([disabled]):hover {
  border-color: var(--telc-interact-border-hover, #e11d2e);
}

/* ── Button groups spacing ── */
body .button-wrapper,
body .button-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 520px) {
  body .button-wrapper button,
  body .button-wrapper a,
  body .button-container button,
  body .button-container a,
  body #checkBtn,
  body #resetBtn,
  body #homeBtn,
  body .auto-nav-btn {
    width: 100%;
    max-width: 100%;
  }

  body .option,
  body label.option {
    flex: 1 1 100%;
  }
}

/* ── Catch-all: any remaining native <button> in quiz body ── */
body button:not(label.option):not(label.option *) {
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  body .option,
  body label.option,
  body .draggable,
  body .quiz-button,
  body .quiz-button-link,
  body #checkBtn,
  body #resetBtn,
  body #homeBtn,
  body .auto-nav-btn,
  body .btn-check,
  body .btn-green,
  body .btn-blue,
  body button[type="button"] {
    transition: none !important;
  }
}

@import url('../telc-theme-dark-exercises.css');