/* ============================================================
   RadiaMaps Onboarding Tour — Fallout Bright Theme
   Pure CSS, no external libraries
   ============================================================ */

/* ── Overlay / Spotlight backdrop ──────────────────────────── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none; /* clicks pass through to the spotlight area */
  /* Spotlight trick: giant box-shadow on a 0×0 element positioned over the
     target rect; JS sets top/left/width/height on .onboarding-spotlight */
}

.onboarding-spotlight {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  border-radius: var(--radius-sm);
  /* The "darkness everywhere except here" effect */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.82);
  transition: top 0.25s, left 0.25s, width 0.25s, height 0.25s, border-radius 0.25s;
}

/* Full-screen backdrop for welcome/done overlays (no spotlight) */
.onboarding-fullscreen-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Welcome & Done centered cards ──────────────────────────── */
.onboarding-welcome-overlay,
.onboarding-done-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.onboarding-center-card {
  background: var(--bg-surface);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-glow);
  color: var(--primary);
  font-family: var(--font-display), 'Courier New', monospace;
  max-width: 480px;
  width: 90vw;
  padding: 2.4rem;
  text-align: center;
  border-radius: var(--radius-md);
}

.onboarding-center-card .onboarding-logo {
  font-size: 2.6rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 12px var(--primary);
}

.onboarding-center-card .onboarding-tagline {
  font-size: 1.1rem;
  color: #aaa;
  margin-bottom: 1.8rem;
}

/* ── Tooltip card ───────────────────────────────────────────── */
.onboarding-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-glow);
  color: var(--primary);
  font-family: var(--font-display), 'Courier New', monospace;
  max-width: 340px;
  width: max-content;
  padding: 1.2rem;
  border-radius: var(--radius-md);
  pointer-events: auto;
  /* Animate entry/exit */
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: translateY(0);
}

.onboarding-tooltip.entering {
  opacity: 0;
  transform: translateY(8px);
}

.onboarding-tooltip.exiting {
  opacity: 0;
  transform: translateY(-8px);
}

/* ── Step title & body ──────────────────────────────────────── */
.onboarding-step-title {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px rgba(255, 224, 48, 0.5);
}

.onboarding-step-body {
  font-size: 1rem;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ── Tooltip arrow (CSS triangle trick) ─────────────────────── */
.onboarding-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

/* Arrow pointing DOWN (tooltip is above target) */
.onboarding-tooltip-arrow.arrow-bottom {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--primary);
  border-bottom: none;
}

/* Arrow pointing UP (tooltip is below target) */
.onboarding-tooltip-arrow.arrow-top {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--primary);
  border-top: none;
}

/* Arrow pointing RIGHT (tooltip is to the left of target) */
.onboarding-tooltip-arrow.arrow-right {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--primary);
  border-right: none;
}

/* Arrow pointing LEFT (tooltip is to the right of target) */
.onboarding-tooltip-arrow.arrow-left {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--primary);
  border-left: none;
}

/* ── Progress dots ──────────────────────────────────────────── */
.onboarding-progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.8rem;
}

.onboarding-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 224, 48, 0.25);
  border: 1px solid rgba(255, 224, 48, 0.4);
  transition: background 0.2s, box-shadow 0.2s;
}

.onboarding-progress-dot.active {
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}

/* ── Navigation row ─────────────────────────────────────────── */
.onboarding-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

/* Shared cyberpunk button base */
.onboarding-btn-skip,
.onboarding-btn-back,
.onboarding-btn-next,
.onboarding-btn-done,
.onboarding-btn-start {
  font-family: var(--font-display), 'Courier New', monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.28rem 0.75rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}

.onboarding-btn-skip,
.onboarding-btn-back,
.onboarding-btn-next,
.onboarding-btn-done,
.onboarding-btn-start:hover {
  background: var(--primary-dim);
  box-shadow: 0 0 8px rgba(255, 224, 48, 0.3);
}

/* Skip is dimmer by default */
.onboarding-btn-skip {
  border-color: var(--border-subtle);
  color: rgba(255, 224, 48, 0.55);
  margin-left: auto; /* push to far right */
}

.onboarding-btn-skip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Done / Start are accented */
.onboarding-btn-done,
.onboarding-btn-start {
  background: rgba(255, 224, 48, 0.12);
  box-shadow: 0 0 10px rgba(255, 224, 48, 0.25);
  font-size: 1.1rem;
}

.onboarding-btn-done:hover,
.onboarding-btn-start:hover {
  background: rgba(255, 224, 48, 0.22);
  box-shadow: 0 0 16px rgba(255, 224, 48, 0.45);
}

/* Back button less prominent than Next */
.onboarding-btn-back {
  border-color: rgba(255, 224, 48, 0.5);
  color: rgba(255, 224, 48, 0.7);
}

.onboarding-btn-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Active highlight border on target element ──────────────── */
.onboarding-highlight {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px;
  box-shadow: 0 0 14px rgba(255, 224, 48, 0.55) !important;
  transition: outline 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 9997; /* sit just under overlay so box-shadow bleeds through */
}

/* ── Scrollbar styling for any overflow in cards ────────────── */
.onboarding-center-card::-webkit-scrollbar,
.onboarding-tooltip::-webkit-scrollbar {
  width: 4px;
}

.onboarding-center-card::-webkit-scrollbar-thumb,
.onboarding-tooltip::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 2px;
}

/* ── Responsive — mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .onboarding-tooltip {
    max-width: 90vw;
    width: 90vw;
    /* Always appear at bottom-center on small screens */
    left: 5vw !important;
    right: 5vw !important;
    bottom: 1.5rem !important;
    top: auto !important;
    transform: none !important;
  }

  .onboarding-tooltip.entering {
    opacity: 0;
    transform: translateY(12px) !important;
  }

  .onboarding-tooltip.exiting {
    opacity: 0;
    transform: translateY(12px) !important;
  }

  /* Hide directional arrows on small screens — position is always bottom */
  .onboarding-tooltip-arrow {
    display: none;
  }

  .onboarding-center-card {
    padding: 1.6rem 1.2rem;
  }

  .onboarding-center-card .onboarding-logo {
    font-size: 2rem;
  }

  .onboarding-nav {
    gap: 0.4rem;
  }
}