/* ═══════════════════════════════════════════════════════════════════════════
   Onboarding tour — coaching marks
   Design: Variant A (mobile) / Variant E (desktop), "Light minimal"
   ───────────────────────────────────────────────────────────────────────── */

/* Root layer — fixed above modals (modal z-index = 1000 per tokens.css) */
#tour-root {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
}

/* Backdrop dims the page slightly so the highlighted anchor reads */
#tour-root .tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 180ms ease;
}
#tour-root.visible .tour-backdrop { opacity: 1; }

/* Tooltip card — Variant A / E. Same styling, different tail direction. */
#tour-root .tour-tip {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f0ece4;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 14px 16px 12px;
  pointer-events: auto;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
#tour-root.visible .tour-tip {
  opacity: 1;
  transform: translateY(0);
}

#tour-root .tour-tip-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#tour-root .tour-step-counter {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #2d5a47;
}
#tour-root .tour-step-counter .muted {
  color: #8b9a91;
  font-weight: 500;
}
#tour-root .tour-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #8b9a91;
  transition: background 120ms ease;
}
#tour-root .tour-close-btn:hover { background: #f8f6f2; }

#tour-root .tour-tip-title {
  font-family: 'Poppins', var(--font-system, sans-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #1a1f1e;
  margin-bottom: 6px;
}
#tour-root .tour-tip-body {
  font-size: 13px;
  line-height: 1.5;
  color: #5a6360;
}

/* Footer is now two stacked rows: the carousel dots, then a Back/Next arrow
   row beneath them (circle buttons in the route-planner style). */
#tour-root .tour-tip-foot {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  gap: 12px;
}

/* Pagination dots — current is a 18px pill, others 6px circles */
#tour-root .tour-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Arrow nav row — Back on the left, Next on the right. */
#tour-root .tour-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#tour-root .tour-arrow {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, opacity 140ms ease;
}
#tour-root .tour-arrow svg { width: 18px; height: 18px; }
#tour-root .tour-arrow-back {
  background: #f1efe9;
  color: #1a1f1e;
}
#tour-root .tour-arrow-back:hover { background: #e8e4dc; }
#tour-root .tour-arrow-back:disabled { opacity: 0.35; cursor: default; }
#tour-root .tour-arrow-next {
  background: #2d5a47;
  color: #ffffff;
}
#tour-root .tour-arrow-next:hover { background: #3d7a5f; }
#tour-root .tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #e8e4dc;
  transition: width 200ms ease, background 200ms ease;
}
#tour-root .tour-dot.active {
  width: 18px;
  background: #2d5a47;
}

#tour-root .tour-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
#tour-root .tour-btn-ghost {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  border: 1px solid #e8e4dc;
  background: #f8f6f2;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #1a1f1e;
  font-family: inherit;
  white-space: nowrap;
}
#tour-root .tour-btn-ghost:disabled {
  opacity: 0.35;
  cursor: default;
}
#tour-root .tour-btn-primary {
  height: 30px;
  padding: 0 12px;
  border: none;
  background: #2d5a47;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
}
#tour-root .tour-btn-primary:hover { background: #3d7a5f; }
/* Secondary action (currently only the "Clear all sample data" CTA on tip 9). */
#tour-root .tour-btn-secondary {
  display: block;
  width: 100%;
  margin: 10px 0 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #c9a45c;
  background: rgba(201, 164, 92, 0.12);
  color: #92400e;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
#tour-root .tour-btn-secondary:hover { background: rgba(201, 164, 92, 0.22); }
#tour-root .tour-btn-secondary:disabled { opacity: 0.6; cursor: default; }

/* ─── Tails ────────────────────────────────────────────────────────────── */
#tour-root .tour-tail {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-left: 1px solid #e8e4dc;
  border-top: 1px solid #e8e4dc;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
}
/* Tail position is dynamic — JS sets --tail-offset to the pixel distance
   from the card edge where the anchor actually sits, so clamped tooltips
   still point at their anchor. Falls back to 50% if unset. */
#tour-root .tour-tip[data-tail="bottom"] .tour-tail {
  /* Card is ABOVE the anchor; tail points down */
  bottom: -7px;
  left: var(--tail-offset, 50%);
  margin-left: -7px;
  transform: rotate(225deg);
}
#tour-root .tour-tip[data-tail="top"] .tour-tail {
  /* Card is BELOW the anchor; tail points up */
  top: -7px;
  left: var(--tail-offset, 50%);
  margin-left: -7px;
  transform: rotate(45deg);
}
#tour-root .tour-tip[data-tail="left"] .tour-tail {
  /* Card is to the RIGHT of anchor; tail points left */
  left: -7px;
  top: var(--tail-offset, 50%);
  margin-top: -7px;
  transform: rotate(-45deg);
}
#tour-root .tour-tip[data-tail="right"] .tour-tail {
  /* Card is to the LEFT of anchor; tail points right */
  right: -7px;
  top: var(--tail-offset, 50%);
  margin-top: -7px;
  transform: rotate(135deg);
}

/* ─── Anchor glow ──────────────────────────────────────────────────────── */
/* Pulsing 3px amber ring around the highlighted anchor element */
.tour-anchor-glow {
  position: relative;
  z-index: 1051;
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.9), 0 0 0 8px rgba(201, 164, 92, 0.25) !important;
  border-radius: inherit;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.9), 0 0 0 8px rgba(201, 164, 92, 0.25); }
  50%      { box-shadow: 0 0 0 3px rgba(201, 164, 92, 1),   0 0 0 14px rgba(201, 164, 92, 0.0); }
}
/* The tinted Trip-highlights card (.sp-tinted) is ~14% opaque, so when it's
   lifted above the tour backdrop the dimmed page shows THROUGH it and it reads
   dim next to the opaque white cards. Give the glowed tinted card an opaque
   equivalent of its tint (teal 14% over white) so it stays bright. */
.tour-anchor-glow.sp-tinted {
  background: #edf7f2 !important;
}

/* Settings: tour toggle row */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  width: 100%;
}
.settings-toggle-label {
  font-size: 14px;
  color: var(--color-text);
}

/* Mobile tweaks — narrower cards, smaller paddings */
@media (max-width: 480px) {
  #tour-root .tour-tip {
    width: 300px;
    padding: 12px 14px 10px;
  }
  #tour-root .tour-tip-title { font-size: 15px; }
  #tour-root .tour-tip-body { font-size: 12.5px; }
}