/* ═══════════════════════════════════════════════════════════
   QSM Quiz Navigator — Modern Frontend CSS (2026)
   Design: Glassmorphism-kompatibel, theme-agnostisch
   ═══════════════════════════════════════════════════════════ */

:root {
  --nav-btn-size:        40px;
  --nav-btn-radius:      10px;
  --nav-btn-gap:         6px;
  --nav-btn-bg:          rgba(255,255,255,0.7);
  --nav-btn-border:      rgba(0,0,0,0.08);
  --nav-btn-color:       #374151;
  --nav-btn-font:        13px;
  --nav-btn-weight:      600;
  --nav-active-bg:       #6366f1;
  --nav-active-color:    #fff;
  --nav-done-bg:         rgba(34,197,94,0.15);
  --nav-done-color:      #15803d;
  --nav-skipped-bg:      rgba(251,191,36,0.15);
  --nav-skipped-color:   #92400e;
  --nav-required-bg:     rgba(239,68,68,0.12);
  --nav-required-color:  #b91c1c;
  --nav-shadow:          0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --nav-transition:      all 0.15s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.qsm-quiz-navigator-answers-wrap {
  position: relative;
  margin: 12px 0 16px;
  width: 100%;
}

/* ── Pages container ──────────────────────────────────────── */
.qsm-quiz-navigator-pages {
  display: flex;
  align-items: center;
  gap: var(--nav-btn-gap);
  width: 100%;
}

/* ── Button ───────────────────────────────────────────────── */
.qsm-quiz-navigator-pages .qsm-pages-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--nav-btn-size);
  height: var(--nav-btn-size);
  padding: 0 8px;
  border-radius: var(--nav-btn-radius);
  background: var(--nav-btn-bg);
  border: 1px solid var(--nav-btn-border);
  color: var(--nav-btn-color);
  font-size: var(--nav-btn-font);
  font-weight: var(--nav-btn-weight);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--nav-shadow);
  transition: var(--nav-transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
  line-height: 1;
  box-sizing: border-box;
}

.qsm-quiz-navigator-pages .qsm-pages-number:hover {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.3);
  color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,.15);
}

/* Active */
.qsm-quiz-navigator-pages .qsm-pages-number.active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-bg);
  color: var(--nav-active-color);
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
  transform: translateY(-1px);
}

/* Completed */
.qsm-pages-number.qsm-navigator-page-status-completed:not(.active) {
  background: var(--nav-done-bg);
  border-color: rgba(34,197,94,0.3);
  color: var(--nav-done-color);
}

/* Skipped */
.qsm-pages-number.qsm-navigator-page-status-skipped:not(.active) {
  background: var(--nav-skipped-bg);
  border-color: rgba(251,191,36,0.3);
  color: var(--nav-skipped-color);
}

/* Required (unanswered required question) */
.qsm-pages-number.qsm-navigator-page-status-required:not(.active) {
  background: var(--nav-required-bg);
  border-color: rgba(239,68,68,0.3);
  color: var(--nav-required-color);
}

/* ── Layouts ──────────────────────────────────────────────── */

/* Horizontal: scrollbar-less scroll */
.qsm-quiz-navigator-answers-wrap-horizontal .qsm-quiz-navigator-pages {
  flex-wrap: nowrap;
  overflow-x: auto;
  width: auto;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
  padding-bottom: 2px; /* prevent clipping of box-shadow */
}
.qsm-quiz-navigator-answers-wrap-horizontal .qsm-quiz-navigator-pages::-webkit-scrollbar {
  display: none;
}

/* Horizontal with overflow arrows */
.qsm-quiz-navigator-overflow.qsm-quiz-navigator-answers-wrap-horizontal .qsm-quiz-navigator-pages {
  margin-left: 28px;
  margin-right: 28px;
}

/* Grid */
.qsm-quiz-navigator-answers-wrap-grid .qsm-quiz-navigator-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 56px));
  gap: var(--nav-btn-gap);
  width: 100%;
}

.qsm-quiz-navigator-answers-wrap-grid .qsm-pages-number {
  width: 100%;
}

/* Alignment */
.qsm-quiz-navigator-answers-wrap-center:not(.qsm-quiz-navigator-overflow) .qsm-quiz-navigator-pages {
  justify-content: center;
}
.qsm-quiz-navigator-answers-wrap-left:not(.qsm-quiz-navigator-overflow) .qsm-quiz-navigator-pages {
  justify-content: flex-start;
}
.qsm-quiz-navigator-answers-wrap-right:not(.qsm-quiz-navigator-overflow) .qsm-quiz-navigator-pages {
  justify-content: flex-end;
}

/* ── Overflow Arrows ──────────────────────────────────────── */
.qsm-quiz-navigator-arrow {
  display: none;
}
.qsm-quiz-navigator-arrow .qsm-quiz-navigator-arrow-icon {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  box-shadow: var(--nav-shadow);
  transition: var(--nav-transition);
  backdrop-filter: blur(8px);
}
.qsm-quiz-navigator-arrow .qsm-quiz-navigator-arrow-icon:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transform: scale(1.08);
}
.qsm-quiz-navigator-overflow .qsm-quiz-navigator-arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  justify-content: space-between;
  pointer-events: none;
}
.qsm-quiz-navigator-overflow .qsm-quiz-navigator-arrow .qsm-quiz-navigator-arrow-icon {
  pointer-events: all;
}

/* ── Hidden state ─────────────────────────────────────────── */
.qsm-d-none {
  display: none !important;
}