/* Mini-tutorial pós-cadastro — spotlight */

/* Mantém o miolo rolável para o tour alcançar emblemas/presente;
   o overlay bloqueia cliques fora do alvo. */
body.bns-tour-active {
    overscroll-behavior: none;
}

body.bns-tour-active .main {
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bns-tour-root {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10050;
}

.bns-tour-root.is-active {
    pointer-events: auto;
}

.bns-tour-overlay {
    background: rgba(4, 8, 14, 0.78);
    inset: 0;
    position: absolute;
    transition: clip-path 0.28s ease;
}

.bns-tour-spotlight {
    border: 2px solid rgba(var(--bns-accent-rgb), 0.95);
    border-radius: 14px;
    box-shadow:
        0 0 0 2px rgba(var(--bns-accent-rgb), 0.25),
        0 12px 40px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    position: absolute;
    transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
}

.bns-tour-card {
    background: var(--bns-surface, #121820);
    border: 1px solid var(--bns-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    color: var(--bns-text, #f3f6fa);
    max-width: min(360px, calc(100vw - 2rem));
    padding: 1.1rem 1.15rem 1rem;
    /* Acima de dropdowns da topbar — evita o 1º clique “sumir” no menu */
    pointer-events: auto;
    position: absolute;
    transition: top 0.28s ease, left 0.28s ease;
    width: 360px;
    z-index: 10060;
}

.bns-tour-card__eyebrow {
    color: var(--bns-accent, #3b82f6);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.bns-tour-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.45rem;
}

.bns-tour-card__text {
    color: var(--bns-text-muted, #9aa7b5);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 0.95rem;
}

.bns-tour-card__footer {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: space-between;
}

.bns-tour-card__progress {
    color: var(--bns-text-muted, #9aa7b5);
    font-size: 0.78rem;
    font-weight: 600;
}

.bns-tour-card__actions {
    display: flex;
    gap: 0.45rem;
}

.bns-tour-btn {
    align-items: center;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.25rem;
    padding: 0.55rem 0.9rem;
}

.bns-tour-btn--primary {
    background: var(--bns-accent, #3b82f6);
    color: #fff;
}

.bns-tour-btn--primary:hover {
    filter: brightness(1.08);
}

.bns-tour-btn--ghost {
    background: transparent;
    border: 1px solid var(--bns-border, rgba(255, 255, 255, 0.14));
    color: var(--bns-text-muted, #9aa7b5);
}

.bns-tour-btn--ghost:hover {
    color: var(--bns-text, #f3f6fa);
}

.bns-tour-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Garante que o alvo fique acima do overlay visualmente via z-index no clone
   — usamos clip-path no overlay, então o alvo real precisa de highlight class */
.bns-tour-target {
    position: relative;
    z-index: 10051 !important;
}

body.bns-tour-active .dropdown-menu.show[data-tour-force-open] {
    display: block !important;
    z-index: 10052 !important;
}

/* Última etapa: roleta visível, giro só pelo botão do tutorial */
#dailyGiftAccountPanel.is-tour-controlled [data-daily-gift-spin-btn],
#dailyGiftAccountPanel.is-tour-controlled [data-daily-gift-claim-btn],
#dailyGiftAccountPanel.is-tour-controlled [data-daily-gift-resume-btn] {
    display: none !important;
}

@media (max-width: 575.98px) {
    .bns-tour-card {
        left: 1rem !important;
        max-width: calc(100vw - 2rem);
        right: 1rem;
        width: auto;
    }
}