/* ============================================================
   CEDARS Guided Tour — dependency-free spotlight overlay
   Works on any page (PHP or React). See cedars-tour.js.
   ============================================================ */
/* The overlay itself must NOT catch clicks — only the popover does — so the user can
   click the highlighted element (open a modal, create a rule, etc.) and follow along. */
.cedars-tour-root { position: fixed; inset: 0; z-index: 99998; display: none; pointer-events: none; }
.cedars-tour-root.active { display: block; }

/* Backdrop is purely visual. It only dims the whole screen on centered (no-target) steps;
   on targeted steps the spotlight's box-shadow does the dimming and the target stays clickable. */
.cedars-tour-backdrop { position: fixed; inset: 0; z-index: 1; background: transparent; pointer-events: none; transition: background .2s ease; }
.cedars-tour-root.centered .cedars-tour-backdrop { background: rgba(8, 12, 18, 0.74); }

/* The spotlight: a box whose huge box-shadow dims everything around it */
.cedars-tour-highlight {
    position: fixed; z-index: 2; border-radius: 10px; border: 2px solid #00ffd5;
    box-shadow: 0 0 0 9999px rgba(8, 12, 18, 0.74), 0 0 22px rgba(0, 255, 213, 0.55);
    pointer-events: none; opacity: 0;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
}
.cedars-tour-highlight.show { opacity: 1; }

/* The description popover */
.cedars-tour-pop {
    position: fixed; z-index: 3; width: 328px; max-width: calc(100vw - 28px);
    background: #0f1621; color: #e6edf3; border: 1px solid #24303c; border-radius: 14px;
    padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    font-family: 'Inter', system-ui, -apple-system, sans-serif; display: none;
    pointer-events: auto;   /* the popover is the only interactive part of the overlay */
}
.cedars-tour-hint {
    font-size: 11.5px; color: #86d9cd; background: rgba(0, 255, 213, 0.07);
    border: 1px solid rgba(0, 255, 213, 0.20); border-radius: 8px;
    padding: 6px 9px; margin: -2px 0 12px; display: none;
}
/* Pulse the spotlight border so the clickable target is obvious */
.cedars-tour-highlight.clickable { cursor: pointer; animation: cedarsTourPulse 1.6s ease-in-out infinite; }
@keyframes cedarsTourPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(8,12,18,0.74), 0 0 0 2px #00ffd5, 0 0 18px rgba(0,255,213,0.35); }
    50%      { box-shadow: 0 0 0 9999px rgba(8,12,18,0.74), 0 0 0 2px #00ffd5, 0 0 30px rgba(0,255,213,0.75); }
}
.cedars-tour-badge {
    font-size: 11px; font-weight: 600; color: #08121a; background: #00ffd5;
    display: inline-block; padding: 2px 9px; border-radius: 999px; margin-bottom: 9px; letter-spacing: .3px;
}
.cedars-tour-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.3; }
.cedars-tour-text { font-size: 13.5px; line-height: 1.55; color: #aeb9c4; margin: 0 0 14px; }
.cedars-tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cedars-tour-nav-right { display: flex; gap: 8px; }
.cedars-tour-skip { background: none; border: none; color: #7b8794; font-size: 12.5px; cursor: pointer; padding: 6px 2px; }
.cedars-tour-skip:hover { color: #aeb9c4; text-decoration: underline; }
.cedars-tour-back {
    background: #1b2733; color: #cdd7e0; border: 1px solid #2b3945; border-radius: 8px;
    padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.cedars-tour-back:hover { background: #22303c; }
.cedars-tour-next {
    background: #00ffd5; color: #08121a; border: none; border-radius: 8px;
    padding: 6px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cedars-tour-next:hover { background: #00e0bd; }

/* Intentionally do NOT lock body scroll — the tour is interactive; the user must be able
   to scroll and click the highlighted elements to follow along. */

/* Floating "Guided tour" launcher button (optional helper style) */
.cedars-tour-launch {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(0, 255, 213, 0.10); color: #00ffd5; border: 1px solid rgba(0, 255, 213, 0.30);
    border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; transition: all .15s ease;
}
.cedars-tour-launch:hover { background: rgba(0, 255, 213, 0.18); }

/* Demo-mode banner */
.cedars-demo-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(0,255,213,0.12), rgba(0,191,165,0.12));
    border-bottom: 1px solid rgba(0, 255, 213, 0.25); color: #bdeee6;
    font-size: 13px; padding: 8px 16px; font-family: 'Inter', system-ui, sans-serif;
}
.cedars-demo-banner strong { color: #00ffd5; }
.cedars-demo-banner a { color: #00ffd5; text-decoration: underline; font-weight: 600; }