/* First-visit tour (ui/js/tour.js): a dimmed screen with one part lit up, a hand-drawn lime arrow and a bubble.
   The bubble keeps the brand green in both themes so it reads the same on light and dark pages. */
.tour { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.tour-blocker { position: fixed; inset: 0; pointer-events: auto; }
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px #07130fb3, 0 0 0 3px #c8f07a, 0 0 28px 6px #c8f07a55;
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
}
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid #c8f07a; animation: tour-pulse 1.8s ease-out infinite; }
@keyframes tour-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }
.tour-arrow { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; color: #c8f07a; overflow: visible; }
.tour-arrow-path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; filter: drop-shadow(0 2px 6px #0008); }
.tour-arrow-path.draw { animation: tour-draw .55s .1s ease-out forwards; }
@keyframes tour-draw { to { stroke-dashoffset: 0; } }

.tour-bubble {
  position: fixed; pointer-events: auto; box-sizing: border-box; padding: 18px 20px 16px; border-radius: 16px;
  background: #143f35; color: #f3f8f2; border: 1px solid #c8f07a59; box-shadow: 0 18px 50px #000a;
  font-family: var(--font-text, "Segoe UI"), Arial, sans-serif; opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tour-bubble.show { opacity: 1; transform: none; }
.tour-count { font-size: 12.5px; font-weight: 650; color: #c8f07a; margin-bottom: 6px; }
.tour-bubble h3 { font-family: var(--font-display, Georgia), serif; font-size: 21px; font-weight: 640; letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.tour-bubble p { font-size: 14.5px; line-height: 1.55; color: #d5e6db; margin: 0; }
.tour-progress { height: 4px; border-radius: 4px; background: #ffffff1f; margin: 14px 0 12px; overflow: hidden; }
.tour-progress i { display: block; height: 100%; background: #c8f07a; border-radius: 4px; transition: width .35s ease; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-actions > span { display: flex; gap: 8px; }
.tour-skip { background: none; border: 0; padding: 4px 0; color: #a9c2b4; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover { color: #fff; }
.tour-bubble .btn.ghost { color: #f3f8f2; border-color: #ffffff40; }
.tour-bubble .btn.ghost:hover { background: #ffffff14; }
.tour-bubble .btn.primary { background: #c8f07a; color: #123a30; border-color: #c8f07a; }
.tour-bubble button:focus-visible { outline: 3px solid #c8f07a; outline-offset: 2px; }

/* «Впервые в Тендерной?» — the offer before the front-page tour. */
.tour-welcome-wrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: #07130fa6; animation: tour-fade .25s ease; }
@keyframes tour-fade { from { opacity: 0; } }
.tour-welcome {
  position: relative; overflow: hidden; width: min(420px, 100%); box-sizing: border-box; text-align: center; padding: 44px 28px 24px;
  border-radius: 20px; background: #143f35; color: #f3f8f2; border: 1px solid #c8f07a59; box-shadow: 0 24px 60px #000b;
  animation: tour-pop .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.tour-awning { position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'><rect width='16' height='16' fill='%23c8f07a'/><rect x='16' width='16' height='16' fill='%23eef9d9'/><circle cx='8' cy='16' r='8' fill='%23c8f07a'/><circle cx='24' cy='16' r='8' fill='%23eef9d9'/></svg>") 0 0 / 23px 18px repeat-x; }
.tour-mark { width: 54px; height: 54px; margin: 6px auto 12px; display: block; }
.tour-welcome h2 { font-family: var(--font-display, Georgia), serif; font-size: 27px; font-weight: 640; letter-spacing: -.015em; margin: 0 0 8px; color: #fff; }
.tour-welcome p { font-size: 15.5px; line-height: 1.55; color: #d5e6db; margin: 0 auto 20px; max-width: 320px; }
.tour-welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tour-welcome .btn.primary { background: #c8f07a; color: #123a30; border-color: #c8f07a; }
.tour-welcome .btn.ghost { color: #f3f8f2; border-color: #ffffff40; }
.tour-welcome .btn.ghost:hover { background: #ffffff14; }
.tour-welcome small { display: block; margin-top: 14px; color: #a9c2b4; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-bubble, .tour-progress i { transition: none; }
  .tour-spot::after, .tour-welcome, .tour-welcome-wrap { animation: none; }
  .tour-arrow-path { stroke-dashoffset: 0; }
  .tour-arrow-path.draw { animation: none; }
}
@media print { .tour, .tour-welcome-wrap { display: none !important; } }