/* GuidedTour — универсальный premium-стиль интерактивной инструкции.
   Используется в любом кабинете: партнёрский, заказчика, админка.
   Mobile-first: bottom-sheet на узких, tooltip-карточка на desktop. */

.gt-host {
  position: fixed; inset: 0;
  z-index: 80;
  pointer-events: none;
  /* Затемнение через overlay-svg, чтобы вырезать «окно» для подсветки */
}

.gt-overlay {
  position: fixed; inset: 0;
  /* на шагах затемнение даёт «дыра» спотлайта — сам overlay прозрачный,
     чтобы подсвеченный элемент был чётко читаем (без блюра) */
  background: transparent;
  z-index: 81;
  pointer-events: auto;
  transition: background 240ms var(--ease-out);
  animation: gtFadeIn 240ms var(--ease-out);
}
/* затемнение фона: интро и финал (когда ничего не подсвечено) */
.gt-overlay.gt-dim {
  background: rgba(10,14,26,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@keyframes gtFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Подсветка элемента — клон-блок поверх с brand-glow */
.gt-spotlight {
  position: fixed;
  z-index: 82;
  pointer-events: none;
  border-radius: var(--r-lg, 16px);
  box-shadow:
    0 0 0 4px rgba(18,106,238,.40),
    0 0 0 9999px rgba(10,14,26,.55);
  transition: top 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1)),
              left 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1)),
              width 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1)),
              height 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1)),
              box-shadow 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1));
  animation: gtSpotPulse 2.4s ease-in-out infinite;
}
@keyframes gtSpotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(18,106,238,.40), 0 0 0 9999px rgba(10,14,26,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(18,106,238,.30), 0 0 0 9999px rgba(10,14,26,.55); }
}

/* Tooltip-карточка — desktop */
.gt-tooltip {
  position: fixed;
  z-index: 83;
  max-width: 360px;
  min-width: 280px;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 16px 40px rgba(10,14,26,.18), 0 4px 12px rgba(10,14,26,.08);
  padding: 18px 20px 16px;
  pointer-events: auto;
  animation: gtCardIn 280ms var(--ease-out, cubic-bezier(.16,.84,.32,1));
  transition: top 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1)),
              left 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1));
}
@keyframes gtCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gt-tooltip .gt-step-counter {
  font-size: 11px; color: var(--muted, #767A85);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  margin-bottom: 6px;
}
.gt-tooltip .gt-title {
  font-size: 17px; font-weight: 600; color: var(--ink, #0A0E1A);
  letter-spacing: -.01em; line-height: 1.25;
}
.gt-tooltip .gt-text {
  font-size: 14px; line-height: 1.5; color: var(--ink-2, #2E3340);
  margin-top: 8px;
}
.gt-tooltip .gt-dots {
  display: flex; gap: 6px; margin-top: 16px;
}
.gt-tooltip .gt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(18,106,238,.20);
  transition: background 240ms ease-out, width 240ms ease-out;
}
.gt-tooltip .gt-dot.on { background: var(--brand, #126AEE); width: 18px; border-radius: 999px; }
.gt-tooltip .gt-dot.done { background: rgba(18,106,238,.50); }

.gt-tooltip .gt-actions {
  display: flex; gap: 8px; margin-top: 16px;
  align-items: center;
}
.gt-tooltip .gt-actions .gt-skip {
  background: transparent; border: 0; color: var(--muted, #767A85);
  font: inherit; font-size: 13px; cursor: pointer; padding: 8px 4px;
  margin-right: auto;
}
.gt-tooltip .gt-actions .gt-skip:hover { color: var(--ink, #0A0E1A); }
.gt-tooltip .gt-actions .gt-back,
.gt-tooltip .gt-actions .gt-next {
  border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 16px;
  border-radius: 10px;
  transition: background 140ms ease-out, transform 140ms ease-out;
}
.gt-tooltip .gt-actions .gt-back {
  background: var(--bg, #F2F2F7); color: var(--ink, #0A0E1A);
}
.gt-tooltip .gt-actions .gt-back:hover { background: var(--card-2, #E8ECF2); }
.gt-tooltip .gt-actions .gt-next {
  background: var(--brand, #126AEE); color: #fff;
}
.gt-tooltip .gt-actions .gt-next:hover { background: var(--brand-dark, #1B3388); }
.gt-tooltip .gt-actions .gt-next:active,
.gt-tooltip .gt-actions .gt-back:active { transform: scale(.97); }

/* Стрелка-указатель (desktop) */
.gt-tooltip .gt-arrow {
  position: absolute; width: 14px; height: 14px;
  background: var(--card, #fff); transform: rotate(45deg);
  box-shadow: inherit;
}
.gt-tooltip[data-placement="bottom"] .gt-arrow { top: -7px; left: 28px; }
.gt-tooltip[data-placement="top"] .gt-arrow    { bottom: -7px; left: 28px; }
.gt-tooltip[data-placement="left"] .gt-arrow   { right: -7px; top: 28px; }
.gt-tooltip[data-placement="right"] .gt-arrow  { left: -7px; top: 28px; }

/* Bottom sheet — mobile */
@media (max-width: 600px) {
  .gt-tooltip {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-width: 100%;
    min-width: 0;
    border-radius: 22px 22px 0 0;
    padding: 24px 20px calc(20px + var(--safe-bottom, 0px));
    animation: gtSheetIn 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1));
    transition: none;  /* на mobile карточка всегда снизу, не двигается */
    top: auto !important;
  }
  .gt-tooltip::before {
    content: ''; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--line-strong, rgba(60,60,67,.16));
    border-radius: 2px;
  }
  .gt-tooltip .gt-arrow { display: none; }
  .gt-tooltip .gt-title { font-size: 18px; }
  .gt-tooltip .gt-text { font-size: 15px; }
  .gt-tooltip .gt-actions .gt-back,
  .gt-tooltip .gt-actions .gt-next {
    padding: 12px 18px; font-size: 15px;
  }
}
@keyframes gtSheetIn { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Intro-card (предложение пройти экскурсию) — отдельный лёгкий promote */
.gt-intro-card {
  position: fixed;
  z-index: 84;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(10,14,26,.16);
  max-width: 360px;
  animation: gtCardIn 320ms var(--ease-out, cubic-bezier(.16,.84,.32,1));
}
.gt-intro-card .gt-intro-title { font-size: 16px; font-weight: 600; color: var(--ink, #0A0E1A); letter-spacing: -.01em; }
.gt-intro-card .gt-intro-text  { font-size: 14px; line-height: 1.5; color: var(--ink-2, #2E3340); margin-top: 6px; }
.gt-intro-card .gt-intro-actions { display: flex; gap: 8px; margin-top: 14px; }
.gt-intro-card .gt-intro-actions button {
  flex: 1; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 14px; border-radius: 10px;
}
.gt-intro-card .gt-intro-actions .gt-intro-skip { background: var(--bg, #F2F2F7); color: var(--ink, #0A0E1A); }
.gt-intro-card .gt-intro-actions .gt-intro-show { background: var(--brand, #126AEE); color: #fff; }
.gt-intro-card .gt-intro-actions button:active { transform: scale(.97); }

/* Desktop: intro-card снизу справа. Mobile: внизу по центру, на всю ширину как тостер */
.gt-intro-card { right: 24px; bottom: 24px; }
@media (max-width: 600px) {
  .gt-intro-card {
    left: 12px; right: 12px; bottom: calc(80px + var(--safe-bottom, 0px)); /* выше bottom-nav */
    max-width: 100%;
  }
}

/* Reduced-motion: убираем плавные движения, оставляем только подсветку */
@media (prefers-reduced-motion: reduce) {
  .gt-overlay { animation: none; }
  .gt-spotlight { animation: none; transition: none; }
  .gt-tooltip { animation: none; transition: none; }
  .gt-intro-card { animation: none; }
}

/* Закрытие крестиком (mobile) */
.gt-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 0; cursor: pointer;
  border-radius: 50%;
  background: var(--bg, #F2F2F7);
  color: var(--muted, #767A85);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms;
}
.gt-close:hover { background: var(--card-2, #E8ECF2); color: var(--ink, #0A0E1A); }
@media (min-width: 601px) { .gt-close { display: none; } }