/* ════════════════════════════════════════════════════════════════════════════
   DEMO ENGINE - Visual overlay system for product walkthroughs
   Loaded only on pages that include demo-engine.js
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dim overlay (SVG mask) ────────────────────────────────────────────────── */
.demo-dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 100010;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.demo-dim-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Highlighted element ───────────────────────────────────────────────────── */
.demo-hl {
  outline: 3px solid #e81123 !important;
  outline-offset: 5px;
  border-radius: 6px;
  animation: demo-hl-pulse 1.8s ease-in-out infinite;
}
@keyframes demo-hl-pulse {
  0%, 100% { outline-color: #e81123; }
  50%       { outline-color: rgba(232, 17, 35, 0.55); }
}

/* ── Fake cursor ───────────────────────────────────────────────────────────── */
.demo-cursor {
  position: fixed;
  z-index: 100014;
  width: 36px;
  height: 36px;
  /* Hotspot is the tip of the index finger — roughly top-centre of the hand icon */
  transform: translate(-14px, -4px);
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: left, top;
}
.demo-cursor.visible {
  opacity: 1;
}

/* ── Click ripple ring ─────────────────────────────────────────────────────── */
.demo-click-ring {
  position: fixed;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(232, 17, 35, 0.5);
  pointer-events: none;
  z-index: 100013;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
}
.demo-click-ring.pop {
  animation: demo-ring-pop 0.45s cubic-bezier(0, 0.6, 0.4, 1) forwards;
}
@keyframes demo-ring-pop {
  to { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* ── Step label tooltip card ───────────────────────────────────────────────── */
.demo-step-label {
  position: fixed;
  z-index: 100012;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(232, 17, 35, 0.12);
  max-width: 260px;
  min-width: 160px;
  padding: 14px 16px 12px;
  pointer-events: none;
  /* Centred on left value via transform */
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.demo-step-label.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Arrow - points up toward the highlighted element (default: tooltip is below) */
.demo-step-label::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top: none;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.06));
}

/* Flipped: tooltip is above the element, arrow points down */
.demo-step-label.above::before {
  top: auto;
  bottom: -7px;
  border-bottom: none;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}

.demo-label-title {
  font-family: 'Lexend', 'Segoe UI', sans-serif;
  font-size: 0.87rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  padding-left: 9px;
  border-left: 3px solid #e81123;
  line-height: 1.3;
}

.demo-label-desc {
  font-family: 'Lexend', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: #64748b;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ── Control bar (top-right) ───────────────────────────────────────────────── */
.demo-control-bar {
  position: fixed;
  top: 72px; /* below typical navbar */
  right: 20px;
  z-index: 100011;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 40px;
  padding: 7px 7px 7px 16px;
  font-family: 'Lexend', 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.11);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.demo-control-bar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.demo-control-bar .demo-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e81123;
  flex-shrink: 0;
  animation: demo-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes demo-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}
.demo-exit-btn {
  background: #e81123;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1.4;
}
.demo-exit-btn:hover {
  background: #c50f1a;
}