/* ═══════════════════════════════════════════════════════
   TOURS — spotlight, step card, first-visit invitation, Tour buttons
   ═══════════════════════════════════════════════════════ */

/* Above every panel (the preview is 1100); toasts stay above at 9999. The layer takes clicks, so
   the page can't be changed mid-tour. */
.tour-layer { position: fixed; inset: 0; z-index: 5000; }
.tour-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--brand-cyan);
    pointer-events: none;
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-card {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    padding: 0.95rem 1rem 0.8rem;
    border-radius: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--neo-float), 0 12px 32px rgba(0, 0, 0, 0.45);
}
.tour-still .tour-spot { transition: none; }   /* a tour's first step, and reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tour-spot { transition: none; }
    [data-tour].tour-new::after { animation: none; }
}
.tour-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.tour-card p { margin: 0 0 0.8rem; font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); }
.tour-foot { display: flex; align-items: center; gap: 0.4rem; }
.tour-count { margin-right: auto; font-size: 0.78rem; color: var(--text-secondary); }
.tour-foot button, .tour-invite button {
    min-height: 36px;
    padding: 0 0.85rem;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--neo-btn);
}
.tour-foot .tour-next, .tour-invite .tour-invite-start { background: var(--brand-orange); color: #111111; }
.tour-foot .tour-skip { background: none; box-shadow: none; color: var(--text-secondary); padding: 0 0.4rem; }
.tour-foot button:disabled { opacity: 0.4; cursor: default; }
.tour-card button:focus-visible, .tour-invite button:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }

/* First visit: a small card in the corner, never a takeover. It sits above the Help launcher. */
.tour-invite {
    position: fixed;
    right: var(--fab-gap);
    bottom: calc(var(--fab-gap) + var(--fab-size) + 0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: min(300px, calc(100vw - 2rem));
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: var(--bg-primary);
    box-shadow: var(--neo-float), 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.86rem;
    color: var(--text-secondary);
}
.tour-invite p { margin: 0 0 0.65rem; }
.tour-invite strong { color: var(--text-primary); }
.tour-invite-actions { display: flex; gap: 0.5rem; }

/* A panel's Tour button; the dot means its tour hasn't been seen */
.tour-invite-btn {
    position: relative;
    min-height: 30px;
    padding: 0 0.65rem;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.tour-invite-btn:hover { color: var(--text-primary); }
[data-tour] { position: relative; }
/* Placed in each panel's header: pushed right, beside the close button */
.sidebar-header .tour-invite-btn, .cart-header .tour-invite-btn, .eqp-modal-header .tour-invite-btn { margin-left: auto; margin-right: 0.5rem; }
[data-tour].tour-new::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-orange);
    animation: tour-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-pulse { 50% { opacity: 0.35; } }