/* Onboarding tour — spotlight + tooltip */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: auto;
  /* Spotlight: bright transparent core, gold ring at the edge, dimmed
     (but still visible) outside. Gold ring helps the eye find the target
     when the body of the spotlight blends with whatever it's over. */
  background: radial-gradient(
    circle at var(--tour-x, 50%) var(--tour-y, 50%),
    transparent 0,
    transparent calc(var(--tour-r, 60px) - 2px),
    rgba(245, 197, 24, 0.55) var(--tour-r, 60px),
    rgba(245, 197, 24, 0.18) calc(var(--tour-r, 60px) + 6px),
    rgba(0, 0, 0, 0.58) calc(var(--tour-r, 60px) + 10px)
  );
  transition: background 280ms var(--ease-out);
  animation: tourFadeIn 250ms var(--ease-out);
}
@keyframes tourFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Subtle pulsing ring around the spotlight for extra "look here" energy.
   Sized via custom properties set in JS, sitting behind everything else.*/
.tour-overlay::after {
  content: '';
  position: absolute;
  left: var(--tour-x, 50%);
  top:  var(--tour-y, 50%);
  width:  calc(var(--tour-r, 60px) * 2);
  height: calc(var(--tour-r, 60px) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 24px rgba(245, 197, 24, 0.35);
  pointer-events: none;
  animation: tourPulse 1.8s var(--ease-out) infinite;
}
@keyframes tourPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 0.55; }
}

.tour-tip {
  position: fixed;
  z-index: 8600;
  max-width: 280px;
  background: var(--color-bg-elev);
  border: 1px solid rgba(245, 197, 24, 0.5);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--glow-gold), var(--shadow-lg);
  animation: tipPop 220ms var(--ease-spring);
  transition: left 280ms var(--ease-out), top 280ms var(--ease-out);
}
@keyframes tipPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Arrow chevron pointing at the spotlight. Direction set via data-arrow. */
.tour-tip::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-bg-elev);
  border: 1px solid rgba(245, 197, 24, 0.5);
  pointer-events: none;
}
.tour-tip[data-arrow="up"]::before {
  top: -8px;
  left: var(--tour-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  border-bottom: none;
  border-right: none;
}
.tour-tip[data-arrow="down"]::before {
  bottom: -8px;
  left: var(--tour-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tour-tip[data-arrow="left"]::before {
  left: -8px;
  top: var(--tour-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.tour-tip[data-arrow="right"]::before {
  right: -8px;
  top: var(--tour-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}

.tour-tip__step {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.tour-tip__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--color-text);
  line-height: 1.1;
}
.tour-tip__body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-dim);
  margin: 0 0 var(--s-3);
}

.tour-tip__actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  align-items: center;
}
.tour-tip__actions button {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.tour-tip__actions button[data-skip] {
  background: transparent;
  color: var(--color-text-mute);
  border: none;
}
.tour-tip__actions button[data-skip]:hover { color: var(--color-text-dim); }

.tour-tip__cta {
  background: var(--grad-gold);
  color: var(--color-text-invert);
  border: none;
  box-shadow: var(--shadow-md);
}
.tour-tip__cta:hover { transform: translateY(-1px); }
.tour-tip__cta:active { transform: translateY(0) scale(0.98); }

@media (max-width: 380px) {
  .tour-tip { max-width: calc(100vw - 24px); padding: var(--s-3); }
  .tour-tip__title { font-size: var(--fs-base); }
}

/* Allow tour-targeted elements to receive clicks through the overlay's hole */
.tour-overlay { pointer-events: none; }
.tour-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: transparent;
}