/* Samouczek — dymki, przyciemnienie i podświetlenie elementu. */
.tour-layer { position: fixed; inset: 0; z-index: 9000; }
.tour-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6, 10, 18, .72), 0 0 0 2px #2dd4bf, 0 0 26px rgba(45, 212, 191, .55);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-tip {
  position: fixed; z-index: 9001; background: #0f172a; color: #e8eefc;
  border: 1px solid #2a3a55; border-radius: 14px; padding: 16px 16px 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-size: 13.5px; line-height: 1.55;
}
.tour-tip::after {
  content: ''; position: absolute; left: 50%; margin-left: -8px; border: 8px solid transparent;
}
.tour-tip.gora::after { top: -16px; border-bottom-color: #0f172a; }
.tour-tip.dol::after { bottom: -16px; border-top-color: #0f172a; }
.tour-tip.lewo::after { left: -16px; top: 24px; margin-left: 0; border-right-color: #0f172a; }
.tour-tip.prawo::after { left: auto; right: -16px; margin-left: 0; border-left-color: #0f172a; }
.tour-tip.brak::after { display: none; }
.tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tour-ico { font-size: 20px; line-height: 1; }
.tour-title { font-weight: 700; font-size: 14.5px; color: #fff; }
.tour-step { margin-left: auto; font-size: 11.5px; color: #93a4c0; white-space: nowrap; }
.tour-text { color: #c8d4e8; margin-bottom: 12px; }
.tour-bar { height: 4px; background: #1e293b; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.tour-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, #2dd4bf); transition: width .3s; }
.tour-actions { display: flex; gap: 8px; align-items: center; }
.tour-actions .btn { font-size: 12.5px; padding: 6px 12px; }
.tour-actions .tour-skip { margin-left: auto; background: none; border: 0; color: #7f8ea8; cursor: pointer; font-size: 12px; }
.tour-actions .tour-skip:hover { color: #cbd5e1; }
.tour-pomoc {
  position: relative;
}
.tour-pomoc::after {
  content: ''; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px;
  border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px #0b1220;
}
@media (max-width: 700px) {
  .tour-tip { font-size: 13px; padding: 14px; }
}

.tour-ladowanie { opacity: .45; pointer-events: none; }

.tour-tip.bok::after { left: -16px; top: 26px; margin-left: 0; border-right-color: #0f172a; }