/* ============================================================
   MODULE 4: Interactive Onboarding Tour (spotlight walkthrough)
   Lightweight, dependency-free — see static/js/onboarding-tour.js
   ============================================================ */

.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: transparent;
    /* Blocks interaction with the underlying page while the tour is
       active; the spotlight box and popover re-enable pointer-events on
       themselves individually. */
    pointer-events: auto;
}

.tour-spotlight {
    position: fixed;
    z-index: 9001;
    border-radius: 14px;
    /* The dark backdrop IS this box-shadow — a huge spread that covers the
       whole viewport everywhere except inside this element's own box,
       which is sized/positioned to exactly match the target element. */
    box-shadow: 0 0 0 9999px rgba(10, 8, 16, 0.78);
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Deliberately interactive (see onboarding-tour.js's forwardToTarget):
       this box sits directly over the real highlighted element and forwards
       any click/tap straight to it, so "Click here anytime!" (step 1,
       pointing at the AI chatbot launcher) actually works instead of the
       full-viewport .tour-overlay underneath silently swallowing the tap. */
    pointer-events: auto;
    cursor: pointer;
}

.tour-popover {
    position: fixed;
    z-index: 9002;
    width: min(340px, calc(100vw - 32px));
    background: var(--card-bg, #ffffff);
    color: var(--text, #241d27);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-popover-step {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark, #9a0e25);
    margin-bottom: 8px;
}

.tour-popover-title {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0 0 8px;
    color: var(--text-strong, #221c26);
}

.tour-popover-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-soft, #6f6470);
    margin: 0 0 18px;
}

.tour-popover-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tour-popover-nav {
    display: flex;
    gap: 8px;
}

.tour-btn {
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.tour-btn:active {
    transform: scale(0.96);
}

.tour-btn-skip {
    background: transparent;
    color: var(--text-soft, #6f6470);
    padding-left: 4px;
    padding-right: 4px;
}

.tour-btn-skip:hover {
    color: var(--text, #241d27);
}

.tour-btn-back {
    background: rgba(30, 36, 118, 0.08);
    color: var(--text, #241d27);
}

.tour-btn-back:disabled {
    opacity: 0.35;
    cursor: default;
}

.tour-btn-next {
    background: linear-gradient(135deg, #1E2476, #C41230);
    color: #fff;
}

.tour-btn-next:hover {
    opacity: 0.92;
}

/* Small caret pointing from the popover toward the highlighted element. */
.tour-popover::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
    transform: rotate(45deg);
}

.tour-popover[data-caret="top"]::before {
    top: -6px;
    left: var(--tour-caret-offset, 24px);
}

.tour-popover[data-caret="bottom"]::before {
    bottom: -6px;
    left: var(--tour-caret-offset, 24px);
}

html[dir="rtl"] .tour-popover-step,
html[dir="rtl"] .tour-popover-title,
html[dir="rtl"] .tour-popover-text {
    text-align: right;
}

html[dir="rtl"] .tour-popover-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tour-popover-nav {
    flex-direction: row-reverse;
}

html[data-theme="dark"] .tour-popover {
    background: var(--card-bg, #16122a);
    color: var(--text, #e8eaf6);
}

@media (max-width: 480px) {
    .tour-popover {
        padding: 16px 18px;
    }

    .tour-popover-title {
        font-size: 1.05rem;
    }
}

/* "Retake the tour" trigger, used on Profile settings. */
.tour-replay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 36, 118, 0.08);
    color: var(--primary-dark, #9a0e25);
    border: 1px solid rgba(30, 36, 118, 0.12);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

.tour-replay-btn:hover {
    background: rgba(30, 36, 118, 0.14);
}