/* ===================================
   Guided Tour / Onboarding Component
   =================================== */

/* ================================================================
   CONTEXTUAL BAR — wizard steps (non-invasive, auto-advancing)
   Sits at the bottom of the screen, above the mobile bottom nav.
   Never blocks the wizard panels below.
   ================================================================ */

.tour-contextual-bar {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: var(--space-md);
  right: var(--space-md);
  z-index: 9100;
  background: var(--gradient-g1);
  border: 1.5px solid var(--accent-secondary);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(173, 142, 98, 0.3);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: all;
}

.tour-contextual-bar.tour-ctx-visible {
  opacity: 1;
  transform: translateY(0);
}

.tour-ctx-content {
  flex: 1;
  min-width: 0;
}

.tour-ctx-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tour-ctx-body {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.tour-ctx-body strong {
  color: #fff;
  font-weight: var(--font-weight-bold);
  background: rgba(255,255,255,0.15);
  padding: 0 3px;
  border-radius: 3px;
}

.tour-ctx-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.tour-ctx-counter {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--font-weight-medium);
}

.tour-ctx-skip {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: 4px 12px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.tour-ctx-skip:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
}

/* Desktop: narrower bar centered */
@media (min-width: 769px) {
  .tour-contextual-bar {
    bottom: var(--space-xl);
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(480px, calc(100vw - 2rem));
  }
}

/* ---- Backdrop overlay ---- */
.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* pointer-events:none makes the overlay purely visual.
     Clicks pass through to the page, which is essential for the
     reservations wizard where the user must interact with wizard buttons
     while the tour is displayed. */
  pointer-events: none;
}

/* SVG overlay that creates the spotlight "hole" around the target element */
.tour-backdrop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The dark region (everything except the spotlight) */
.tour-svg-mask-outer {
  fill: rgba(10, 8, 6, 0.86);
}

/* The "hole" — transparent, lets the element show through */
.tour-svg-spotlight {
  fill: black; /* fill=black inside mask = transparent in result */
}

/* ---- Highlight ring on the target element ---- */
.tour-target-highlight {
  position: relative;
  z-index: 9001 !important;
  outline: 2px solid rgba(149, 31, 39, 0.9);
  outline-offset: 6px;
  border-radius: var(--radius-xl);
  box-shadow:
    0 0 0 6px rgba(149, 31, 39, 0.15),
    0 0 24px rgba(149, 31, 39, 0.3);
  animation: tourHighlightPulse 2s ease-in-out infinite;
  /* Ensure it renders above the overlay */
  pointer-events: none;
}

@keyframes tourHighlightPulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(149, 31, 39, 0.15),
      0 0 24px rgba(149, 31, 39, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(149, 31, 39, 0.08),
      0 0 32px rgba(149, 31, 39, 0.5);
  }
}

/* ---- Tooltip card ---- */
.tour-tooltip {
  position: fixed;
  z-index: 9100;
  background: var(--gradient-g1);
  border: 1.5px solid var(--accent-secondary);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(173, 142, 98, 0.25);
  width: min(340px, calc(100vw - 2rem));
  padding: var(--space-lg);
  animation: tourTooltipIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Prevent tooltip from creating scroll when near viewport edge */
  overflow: visible;
}

@keyframes tourTooltipIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Arrow pointing from tooltip to target */
.tour-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #6D1A2E; /* start of --gradient-g1 */
  border: 1px solid var(--accent-secondary);
  transform: rotate(45deg);
}

/* Arrow positions */
.tour-tooltip[data-arrow="top"]::before {
  top: -7px;
  left: 50%;
  translate: -50% 0;
  border-right: none;
  border-bottom: none;
}

.tour-tooltip[data-arrow="bottom"]::before {
  bottom: -7px;
  left: 50%;
  translate: -50% 0;
  border-left: none;
  border-top: none;
}

.tour-tooltip[data-arrow="none"]::before {
  display: none;
}

/* ---- Tooltip header ---- */
.tour-tooltip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tour-tooltip-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tour-tooltip-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.tour-tooltip-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
}

/* ---- Tooltip body ---- */
.tour-tooltip-body {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.tour-tooltip-body p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.tour-tooltip-body strong {
  color: #fff;
  font-weight: var(--font-weight-bold);
  background: rgba(255,255,255,0.15);
  padding: 0 3px;
  border-radius: 3px;
}

/* ---- Progress indicator ---- */
.tour-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--space-md);
}

.tour-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.tour-progress-dot.active {
  background: #fff;
  width: 18px;
  border-radius: 3px;
}

.tour-progress-dot.done {
  background: rgba(255, 255, 255, 0.6);
}

.tour-progress-label {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ---- Actions row ---- */
.tour-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tour-btn-skip {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-xs);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
  margin-right: auto;
}

.tour-btn-skip:hover {
  color: #fff;
}

.tour-btn-prev {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tour-btn-prev:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
}

.tour-btn-next {
  background: #fff;
  border: none;
  color: #6D1A2E; /* Matches the dark bordeaux for contrast */
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.tour-btn-next:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* ---- Resume floating button ---- */
.tour-resume-btn {
  position: fixed;
  bottom: calc(var(--space-xl) + 60px); /* above mobile bottom nav */
  right: var(--space-lg);
  z-index: 8900;
  background: var(--gradient-g1);
  border: none;
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(149, 31, 39, 0.4);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  animation: tourResumeIn 0.3s ease-out;
  transition: all var(--transition-fast);
}

.tour-resume-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(149, 31, 39, 0.5);
}

@keyframes tourResumeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Desktop — push resume button up a bit more */
@media (min-width: 769px) {
  .tour-resume-btn {
    bottom: calc(var(--space-xl) + var(--space-md));
  }
}

/* ---- Tooltip mobile adjustments ---- */
@media (max-width: 768px) {
  .tour-tooltip {
    width: calc(100vw - 2rem);
    left: 1rem !important;
    right: 1rem !important;
  }
}

/* ---- Skip toast ---- */
.tour-skip-toast {
  position: fixed;
  bottom: calc(var(--space-xl) + 60px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 9000;
  background: var(--bg-secondary, #2a2a2a);
  color: var(--text-primary, #f0f0f0);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  white-space: normal;
  text-align: left;
}

.tour-skip-toast.tour-skip-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tour-skip-toast strong {
  color: var(--primary, #e74c3c);
}

.tour-skip-toast-close {
  background: none;
  border: none;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}

.tour-skip-toast-close:hover {
  color: var(--text-primary, #f0f0f0);
}

@media (min-width: 769px) {
  .tour-skip-toast {
    bottom: calc(var(--space-xl) + var(--space-md));
  }
}