/* Tour overlay (Apka-ad4 — vanilla coachmarks) */
/*
 * Architektura nakładki spotlight:
 *   .tour-overlay   — przechwytuje kliknięcia poza spotlight (pointer-events:auto)
 *                     ale jest PRZEZROCZYSTE — nie zaciemnia ekranu.
 *   .tour-keyhole   — z-index wyższy; box-shadow 9999px dookoła = ciemna otoczka.
 *                     Wnętrze elementu (= spotlight) jest transparent → widać pod nim
 *                     treść strony. Gdyby overlay był ciemny (stare zachowanie),
 *                     pokazywał by się przez przezroczyste wnętrze keyhola
 *                     i spotlight wyglądał jak szary prostokąt.
 */
.tour-overlay {
  position: fixed; inset: 0;
  background: transparent;   /* ciemność pochodzi wyłącznie z keyhole box-shadow */
  z-index: 9998;
  pointer-events: auto;
}
.tour-keyhole {
  position: fixed;
  border: 3px solid #0b6bcb;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  z-index: 9999;
  pointer-events: none;
  transition: all 0.3s ease;
}
.tour-tooltip {
  position: fixed;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  padding: 16px 20px;
  max-width: 360px;
  z-index: 10000;
  font-size: 14px;
  line-height: 1.5;
}
.tour-tooltip h3 { margin: 0 0 8px 0; font-size: 16px; color: #084a8d; }
.tour-tooltip .tour-progress { color: #6b7a87; font-size: 12px; margin-bottom: 4px; }
.tour-tooltip p { margin: 0 0 12px 0; }
.tour-tooltip .tour-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 16px; }
.tour-tooltip .tour-actions-right { display: flex; gap: 8px; }
.tour-tooltip button {
  padding: 6px 14px; border-radius: 4px; border: 1px solid #d0d7de;
  background: #fff; cursor: pointer; font-size: 13px;
}
.tour-tooltip button.tour-next { background: #0b6bcb; color: #fff; border-color: #0b6bcb; }
.tour-tooltip button.tour-skip { color: #6b7a87; border: none; background: transparent; }
.tour-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; font-size: 18px; color: #6b7a87; cursor: pointer;
}
@media (max-width: 768px) {
  .tour-tooltip { max-width: calc(100vw - 32px); }
}