/* Tour guidato (tour.js): riflettore, cursore animato e fumetto. Tutto in position: fixed sopra la pagina;
   nessuna dipendenza da Bootstrap oltre alle variabili di app.css. */
.ct-tour-block {
    position: fixed; inset: 0; z-index: 2000;
    touch-action: pan-y;
}

.ct-tour-spot {
    position: fixed; z-index: 2001; pointer-events: none;
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(10, 18, 36, 0.62), 0 0 0 3px rgba(255, 255, 255, 0.92), 0 0 28px rgba(36, 87, 214, 0.45);
    transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct-tour-cursor {
    position: fixed; left: 0; top: 0; z-index: 2003; pointer-events: none;
    width: 26px; height: 26px;
    transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.ct-tour-cursor svg { display: block; width: 26px; height: 26px; }
.ct-tour-ripple {
    position: absolute; left: -16px; top: -16px; width: 36px; height: 36px;
    border-radius: 50%; border: 3px solid #4f83ff; opacity: 0; transform: scale(0.3);
}
.ct-tour-cursor.clicking .ct-tour-ripple { animation: ct-tour-ripple 0.55s ease-out; }
@keyframes ct-tour-ripple {
    0% { opacity: 0.95; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(1.5); }
}

.ct-tour-tip {
    position: fixed; z-index: 2002; left: 0; top: 0;
    width: min(370px, calc(100vw - 24px));
    background: var(--ct-surface, #fff); color: var(--ct-text, #1c2434);
    border-radius: 14px; padding: 1rem 1.15rem 0.9rem;
    box-shadow: 0 14px 44px rgba(16, 24, 40, 0.32), 0 0 0 1px rgba(16, 24, 40, 0.06);
    font-size: 0.93rem; line-height: 1.45;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
}
.ct-tour-tip.show { opacity: 1; transform: none; pointer-events: auto; }
.ct-tour-arrow {
    position: absolute; width: 14px; height: 14px; background: var(--ct-surface, #fff);
    transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(16, 24, 40, 0.06);
}
.ct-tour-tip[data-place="bottom"] .ct-tour-arrow { top: -7px; }
.ct-tour-tip[data-place="top"] .ct-tour-arrow { bottom: -7px; transform: rotate(225deg); }
.ct-tour-tip[data-place="right"] .ct-tour-arrow { left: -7px; transform: rotate(-45deg); }
.ct-tour-tip[data-place="left"] .ct-tour-arrow { right: -7px; transform: rotate(135deg); }
.ct-tour-tip[data-place="center"] .ct-tour-arrow, .ct-tour-tip[data-place="over"] .ct-tour-arrow { display: none; }
.ct-tour-tip[data-place="center"] { width: min(440px, calc(100vw - 24px)); padding: 1.3rem 1.4rem 1.1rem; }

.ct-tour-step {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ct-muted, #64748b);
}
.ct-tour-tip h3 { font-size: 1.08rem; font-weight: 650; margin: 0.2rem 0 0.4rem; color: var(--ct-text, #1c2434); }
.ct-tour-tip[data-place="center"] h3 { font-size: 1.3rem; }
.ct-tour-tip p { margin: 0 0 0.9rem; }

.ct-tour-actions { display: flex; align-items: center; gap: 0.5rem; }
.ct-tour-spacer { flex: 1; }
.ct-tour-btn {
    border-radius: 0.55rem; font: inherit; font-size: 0.88rem; font-weight: 500;
    padding: 0.42rem 0.85rem; border: 1px solid var(--ct-border, #e3e8f0);
    background: var(--ct-surface, #fff); color: var(--ct-text, #1c2434); cursor: pointer;
}
.ct-tour-btn:hover { background: #f1f4f9; }
.ct-tour-btn.primary { background: var(--ct-primary, #2457d6); border-color: var(--ct-primary, #2457d6); color: #fff; }
.ct-tour-btn.primary:hover { background: var(--ct-primary-dark, #1b45ad); border-color: var(--ct-primary-dark, #1b45ad); }
.ct-tour-btn.link { border: 0; background: none; color: var(--ct-muted, #64748b); padding-left: 0; }
.ct-tour-btn.link:hover { color: var(--ct-text, #1c2434); text-decoration: underline; }
.ct-tour-btn:disabled { opacity: 0.4; cursor: default; }
.ct-tour-btn:focus-visible { outline: 3px solid rgba(36, 87, 214, 0.35); outline-offset: 1px; }

/* Aggiornamenti "istantanei" (scroll, ridimensionamento) e utenti che preferiscono meno animazioni. */
.ct-tour-spot.instant, .ct-tour-cursor.instant, .ct-tour-instant .ct-tour-spot, .ct-tour-instant .ct-tour-cursor, .ct-tour-instant .ct-tour-tip { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .ct-tour-spot, .ct-tour-cursor, .ct-tour-tip { transition: none !important; }
    .ct-tour-cursor.clicking .ct-tour-ripple { animation: none; }
}