/* ── Туториал (spotlight tour) ─────────────────────────────────
   Овърлей, който затъмнява екрана, изрязва прозорче около
   обяснявания елемент и показва картичка с текст. */

.tut-root {
  position: fixed;
  inset: 0;
  z-index: 1100; /* над бургер менюто и celebration модалите (1060), под toast (9999) */
}

/* Центрирани стъпки без anchor — пълно затъмнение от самия root */
.tut-root.tut-dim {
  background: var(--c-overlay-dark);
  backdrop-filter: blur(2px);
}

.tut-highlight {
  position: fixed;
  border-radius: 12px;
  pointer-events: none;
  /* Рамка + "дупка" в затъмнението с една сянка */
  box-shadow: 0 0 0 3px var(--c-primary), 0 0 0 9999px var(--c-overlay-dark);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

.tut-card {
  position: fixed;
  width: min(340px, calc(100vw - 16px));
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-modal);
  transition: top .25s ease, left .25s ease;
}

.tut-card.tut-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  transition: none;
}

.tut-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.tut-text {
  font-size: 14px;
  color: var(--c-text-2);
  line-height: 1.45;
}

.tut-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.tut-count {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-right: auto;
  white-space: nowrap;
}

.tut-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--c-text-2);
  cursor: pointer;
}

.tut-btn:active {
  opacity: .8;
}

.tut-btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .tut-highlight,
  .tut-card {
    transition: none;
  }
}