/* Guided tour overlay — self-contained, no external dependencies. */

.tour-spot {
    position: absolute;
    z-index: 20000;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(6, 6, 14, .78),
                0 0 0 3px #3CB371,
                0 0 18px 3px rgba(60, 179, 113, .55);
    pointer-events: none;
    transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}

/* Used when a step has no element to point at — dims the page, no cutout. */
.tour-spot.tour-spot-center {
    box-shadow: 0 0 0 9999px rgba(6, 6, 14, .82);
    border: none;
}

.tour-pop {
    position: absolute;
    z-index: 20001;
    width: 330px;
    max-width: calc(100vw - 24px);
    background: #171725;
    border: 1px solid #2c2c45;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
    color: #e8e8f0;
    font-size: .875rem;
    line-height: 1.5;
    overflow: hidden;
}

.tour-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 0 14px;
    font-weight: 600;
    color: #ffffff;
    font-size: .95rem;
}

.tour-pop-head .tour-step-badge {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 500;
    color: #8b8ba7;
    white-space: nowrap;
}

.tour-pop-body {
    padding: 7px 14px 12px 14px;
    color: #c8c8d8;
}

.tour-pop-body code {
    background: #0e0e18;
    border: 1px solid #2c2c45;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .82em;
    color: #7ee2a8;
}

.tour-pop-body strong { color: #e8e8f0; }

.tour-pop-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #12121f;
    border-top: 1px solid #24243a;
}

.tour-dots { display: flex; gap: 4px; margin-right: auto; }

.tour-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #33334d;
}
.tour-dot.on { background: #3CB371; }

.tour-btn {
    border: 1px solid #33334d;
    background: transparent;
    color: #c8c8d8;
    border-radius: 6px;
    padding: 3px 12px;
    font-size: .8rem;
    cursor: pointer;
    font-family: inherit;
}
.tour-btn:hover { border-color: #4a4a6a; color: #fff; }

.tour-btn-primary {
    background: #1e4fd9;
    border-color: #1e4fd9;
    color: #fff;
    font-weight: 600;
}
.tour-btn-primary:hover { background: #2a5ee8; border-color: #2a5ee8; color: #fff; }

.tour-skip {
    background: none;
    border: none;
    color: #6f6f8c;
    font-size: .78rem;
    cursor: pointer;
    padding: 3px 6px;
    font-family: inherit;
}
.tour-skip:hover { color: #c8c8d8; text-decoration: underline; }

/* Arrow */
.tour-pop::before {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: #171725;
    border: 1px solid #2c2c45;
    transform: rotate(45deg);
}
.tour-pop[data-arrow="top"]::before {
    top: -6px; left: var(--arrow-x, 28px);
    border-right: none; border-bottom: none;
}
.tour-pop[data-arrow="bottom"]::before {
    bottom: -6px; left: var(--arrow-x, 28px);
    border-left: none; border-top: none;
}
.tour-pop[data-arrow="left"]::before {
    left: -6px; top: var(--arrow-y, 24px);
    border-right: none; border-top: none;
}
.tour-pop[data-arrow="right"]::before {
    right: -6px; top: var(--arrow-y, 24px);
    border-left: none; border-bottom: none;
}
.tour-pop[data-arrow="none"]::before { display: none; }

/* Welcome / finish card, centred with no target */
.tour-pop.tour-pop-center {
    width: 420px;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}
.tour-pop.tour-pop-center .tour-pop-head { font-size: 1.05rem; padding-top: 16px; }
.tour-pop.tour-pop-center .tour-pop-body { padding-bottom: 15px; }

/* Nav "Guide" button pulse on very first visit */
@keyframes tourPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(60, 179, 113, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(60, 179, 113, 0); }
}
.tour-pulse { animation: tourPulse 1.9s ease-out 4; border-radius: 6px; }

@media (max-width: 576px) {
    .tour-pop { width: calc(100vw - 24px); }
    .tour-pop.tour-pop-center { width: calc(100vw - 24px); }
}