/* ====== ACCESSIBILITY (Enhanced Focus with Neon Glow) ====== */
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.btn-neutral:focus-visible,
.btn-special-green:focus-visible,
.btn-special-purple:focus-visible,
.lang-select:focus-visible,
.addon-item:focus-visible,
.toggle-switch input:focus-visible + .slider {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
    box-shadow: 0 0 18px var(--secondary-color), 0 0 10px var(--neon-glow-secondary);
    animation: focusPulse 0.8s ease-in-out infinite alternate;
}

@keyframes focusPulse {
    0% { box-shadow: 0 0 12px var(--secondary-color), 0 0 6px var(--neon-glow-secondary); }
    100% { box-shadow: 0 0 22px var(--secondary-color), 0 0 14px var(--neon-glow-secondary); }
}

input[type="text"]:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 12px var(--neon-glow-secondary), 0 0 4px var(--secondary-color);
    transition: box-shadow 0.25s ease-in-out;
}

/* ====== INTRO.JS STYLES (Cyberpunk Theme) ====== */
.introjs-tooltip {
    background: linear-gradient(135deg, rgba(18,12,24,0.95), rgba(24,16,30,0.92));
    border: 1px solid rgba(187,134,252,0.2);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.75), 0 0 10px var(--neon-glow-primary);
    backdrop-filter: blur(8px);
    color: #E6E6E6;
    font-family: var(--font-main);
    max-width: 350px;
    transition: all 0.25s ease;
}

.introjs-tooltiptext {
    font-size: 0.95rem;
    line-height: 1.6;
}

.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right { border-bottom-color: rgba(18,12,24,0.95); }
.introjs-arrow.bottom,
.introjs-arrow.bottom-middle,
.introjs-arrow.bottom-right { border-top-color: rgba(18,12,24,0.95); }
.introjs-arrow.left { border-right-color: rgba(18,12,24,0.95); }
.introjs-arrow.right { border-left-color: rgba(18,12,24,0.95); }

.introjs-tooltipbuttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(187,134,252,0.18);
}

.introjs-button {
    font-family: var(--font-main);
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.25s ease;
}
.introjs-button:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.introjs-nextbutton {
    background: linear-gradient(90deg, rgba(187,134,252,1), rgba(3,218,198,0.95));
    color: #060606;
    border: none;
    box-shadow: 0 0 6px var(--neon-glow-primary);
}
.introjs-nextbutton:hover:not(:disabled) {
    filter: brightness(1.3);
    box-shadow: 0 0 12px var(--neon-glow-primary);
}

.introjs-prevbutton:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
}

.introjs-skipbutton {
    color: #CF6679;
}
.introjs-skipbutton:hover:not(:disabled) {
    background: rgba(207,102,121,0.12);
    color: #CF6679;
}

.introjs-bullets ul li a {
    background: rgba(255,255,255,0.22);
    transition: all 0.25s ease;
}
.introjs-bullets ul li a.active {
    background: #BB86FC;
    box-shadow: 0 0 6px var(--neon-glow-primary);
}

.introjs-helperLayer {
    background: rgba(8,2,10,0.65);
    box-shadow: 0 0 1px 2px rgba(187,134,252,0.55), 0 0 52px rgba(187,134,252,0.22) inset;
    border: 1px solid rgba(187,134,252,0.85);
    border-radius: 8px;
    transition: all 0.25s ease;
}