/* ══════════════════════════════════════════════════════════════
   GUIDA INTERATTIVA — "Scopri il sito in 7 tappe"
   Prototipo tappa 1 · mobile-first

   Tempi e curve presi da ui-ux-pro-max (motion.csv + ux-guidelines.csv):
   · comparsa 300-400ms, curva power1.out
   · uscita SEMPRE piu' rapida dell'entrata (timing asimmetrico)
   · spostamenti 8-16px: si leggono come dissolvenza, non come slittamento
   · si animano SOLO transform e opacity (restano sulla scheda grafica)
   · touch target minimo 44x44px, distanza minima 8px fra due tasti
   · touch-action: manipulation  -> toglie il ritardo di 300ms al tocco
   · overscroll-behavior: contain -> niente "tira per aggiornare" per sbaglio
   ══════════════════════════════════════════════════════════════ */

.rs-tour {
    --rs-tour-velo: rgba(15, 23, 42, 0.78);
    --rs-tour-oro: #FFC93C;
    --rs-tour-card-bg: #ffffff;
    --rs-tour-card-fg: #1e293b;
    --rs-tour-in: 350ms;   /* entrata */
    --rs-tour-out: 200ms;  /* uscita: piu' rapida, sempre */
    --rs-tour-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* = power1.out */
    --rs-tour-disegno: 900ms;      /* quanto ci mette a disegnarsi, all'inizio */
    --rs-tour-scorrimento: 1100ms; /* i trattini che scorrono, in continuo */
    --rs-tour-nebbia: 780ms;       /* il buio che si richiude dal riquadro in fuori */
    --rs-tour-affioramento: 1500ms; /* la seconda freccia che affiora piano */

    position: fixed;
    inset: 0;
    z-index: 99999;
    overscroll-behavior: contain;
    touch-action: manipulation;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rs-tour-out) var(--rs-tour-ease),
                visibility 0s linear var(--rs-tour-out);
}

.rs-tour.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--rs-tour-in) var(--rs-tour-ease),
                visibility 0s;
}

/* ── Il buco luminoso ───────────────────────────────────────────
   Nessuna maschera, nessuna libreria: un riquadro trasparente con
   un'ombra enorme tutt'intorno. Dentro si vede il sito, fuori e' buio. */
.rs-tour__spot {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px var(--rs-tour-velo);
    pointer-events: none;
    /* la posizione la scrive il JS; qui solo il modo in cui ci arriva */
    transition: transform var(--rs-tour-in) var(--rs-tour-ease),
                width var(--rs-tour-in) var(--rs-tour-ease),
                height var(--rs-tour-in) var(--rs-tour-ease),
                box-shadow var(--rs-tour-nebbia) cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── La nebbia ───────────────────────────────────────────────────
   Passando da una tappa all'altra il buio non "appare": si propaga
   DAL riquadro verso il resto dello schermo. Il trucco e' l'ombra
   del buco che cresce da zero fino a coprire tutto: il JS mette
   questa classe e la toglie subito, cosi' il browser interpola. */
.rs-tour.is-nebbia .rs-tour__spot {
    box-shadow: 0 0 0 0 var(--rs-tour-velo);
    transition: none;
}

/* ── Il momento di sito pulito ───────────────────────────────────
   Fra una tappa e l'altra tutto svanisce e per un istante si vede
   la pagina come la vedrebbe un visitatore, mentre scorre da sola
   verso il punto successivo. */
.rs-tour.is-dissolta .rs-tour__spot,
.rs-tour.is-dissolta .rs-tour__arrow,
.rs-tour.is-dissolta .rs-tour__card {
    opacity: 0;
    transition: opacity var(--rs-tour-out) var(--rs-tour-ease);
}

.rs-tour.is-dissolta .rs-tour__spot {
    box-shadow: 0 0 0 9999px transparent;
}

/* alone pulsante: attira l'occhio senza spostare nulla */
.rs-tour__spot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid var(--rs-tour-oro);
    opacity: 0.9;
    animation: rsTourPulse 2s var(--rs-tour-ease) infinite;
}

@keyframes rsTourPulse {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.03); opacity: 0.45; }
}

/* ── La freccia tratteggiata ────────────────────────────────────
   Il tratteggio giallo esiste gia' tutto, ma e' coperto da una
   maschera che si ritira: cosi' sembra disegnarsi da sola.
   pathLength="100" normalizza la lunghezza -> non serve misurarla. */
.rs-tour__arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.rs-tour__arrow-mask {
    stroke: #fff;
    stroke-width: 14;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

/* All'apertura si disegna UNA VOLTA, poi resta. Il ciclo continuo NON si
   fa qui: farla svanire e ridisegnare la rendeva invisibile per mezzo
   secondo a ogni giro — misurato, spariva del tutto in 3 campioni su 22. */
.rs-tour.is-drawing .rs-tour__arrow-mask {
    animation: rsTourDraw var(--rs-tour-disegno) var(--rs-tour-ease) forwards;
}

@keyframes rsTourDraw {
    to { stroke-dashoffset: 0; }
}

.rs-tour__arrow-line {
    stroke: var(--rs-tour-oro);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 10 8;   /* il tratteggio vero e proprio */
}

/* IL ciclo continuo: la linea non sparisce mai, sono i trattini che
   scorrono verso la punta. Movimento perpetuo, leggibilita' costante. */
.rs-tour.is-drawing .rs-tour__arrow-line {
    animation: rsTourScorri var(--rs-tour-scorrimento) linear infinite;
}

@keyframes rsTourScorri {
    to { stroke-dashoffset: -18; }   /* 10 + 8 = un tratteggio intero */
}

.rs-tour__arrow-head {
    fill: var(--rs-tour-oro);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* La punta compare quando il tratteggio la raggiunge e RESTA li'. */
.rs-tour.is-drawing .rs-tour__arrow-head {
    animation: rsTourHead 240ms var(--rs-tour-ease) 700ms forwards;
}

@keyframes rsTourHead {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── La seconda freccia ──────────────────────────────────────────
   Alcune tappe indicano due punti. La seconda arriva a metà tappa,
   quando il primo messaggio è stato capito, e non compare di scatto:
   affiora piano, in un secondo e mezzo, mentre il tratteggio si
   disegna. Deve farsi notare senza strappare l'attenzione. */
.rs-tour__arrow-line--due,
.rs-tour__arrow-head--due { opacity: 0; }

.rs-tour.is-drawing-due .rs-tour__arrow-line--due {
    animation: rsTourAffiora var(--rs-tour-affioramento) var(--rs-tour-ease) forwards,
               rsTourScorri var(--rs-tour-scorrimento) linear infinite;
}

@keyframes rsTourAffiora {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rs-tour.is-drawing-due .rs-tour__arrow-mask--due {
    animation: rsTourDraw var(--rs-tour-disegno) var(--rs-tour-ease) forwards;
}

.rs-tour.is-drawing-due .rs-tour__arrow-head--due {
    animation: rsTourHead 320ms var(--rs-tour-ease) 1200ms forwards;
}

/* ── Il fumetto ─────────────────────────────────────────────────
   Su telefono sta in basso: e' dove arriva il pollice. */
.rs-tour__card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    background: var(--rs-tour-card-bg);
    color: var(--rs-tour-card-fg);
    border-radius: 16px;
    padding: 18px 16px 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(12px);   /* dentro gli 8-16px consigliati */
    transition: opacity var(--rs-tour-out) var(--rs-tour-ease),
                transform var(--rs-tour-out) var(--rs-tour-ease);
}

.rs-tour.is-open .rs-tour__card {
    opacity: 1;
    transform: translateY(0);
    /* entra dopo il velo e dopo la freccia: uno alla volta, non tutto insieme */
    transition: opacity var(--rs-tour-in) var(--rs-tour-ease) 420ms,
                transform var(--rs-tour-in) var(--rs-tour-ease) 420ms;
}

/* ── Barra di avanzamento ────────────────────────────────────────
   Dice quanto manca senza doverlo leggere. Sta in cima al fumetto,
   agganciata al bordo arrotondato. */
.rs-tour__barra {
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    background: #e2e8f0;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
}

.rs-tour__barra-piena {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #F72585, #7209B7);
    transition: width 420ms var(--rs-tour-ease);
}

.rs-tour__count {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.rs-tour__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
}

.rs-tour__text {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #475569;
}

/* ── I tasti ────────────────────────────────────────────────────
   44px di altezza minima e 8px di distanza: regola n.1 e n.2
   delle linee guida tocco (gravita' alta). */
.rs-tour__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rs-tour__btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 150ms var(--rs-tour-ease),
                opacity 150ms var(--rs-tour-ease);
}

.rs-tour__btn:active { transform: translateY(1px); opacity: 0.85; }

.rs-tour__btn--skip {
    background: transparent;
    color: #64748b;
    padding: 0 10px;
    margin-right: auto;   /* "Salta" a sinistra, staccato dagli altri */
}

.rs-tour__btn--prev {
    background: #f1f5f9;
    color: #334155;
}

.rs-tour__btn--next {
    background: linear-gradient(135deg, #F72585, #7209B7);
    color: #fff;
    box-shadow: 0 4px 14px rgba(114, 9, 183, 0.35);
}

.rs-tour__btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Da tablet in su: il fumetto non serve largo tutto lo schermo ── */
@media (min-width: 768px) {
    .rs-tour__card {
        left: auto;
        right: 32px;
        bottom: 32px;
        width: 380px;
    }
}

/* ── Chi ha chiesto meno animazioni, ne riceve meno ────────────── */
@media (prefers-reduced-motion: reduce) {
    .rs-tour,
    .rs-tour__card,
    .rs-tour__spot { transition-duration: 1ms !important; }
    .rs-tour__spot::after { animation: none; }
    /* Niente ciclo continuo: la freccia si mostra gia' disegnata e resta li'.
       NON basta accorciare l'animazione: il suo ultimo fotogramma e'
       trasparente, quindi la freccia sparirebbe del tutto. */
    .rs-tour.is-drawing .rs-tour__arrow-mask {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    .rs-tour.is-drawing .rs-tour__arrow-line,
    .rs-tour.is-drawing-due .rs-tour__arrow-line--due { animation: none; }
    .rs-tour.is-drawing-due .rs-tour__arrow-mask--due {
        animation: none; stroke-dashoffset: 0; opacity: 1;
    }
    .rs-tour.is-drawing-due .rs-tour__arrow-head--due {
        animation: none; opacity: 1; transform: none;
    }
    .rs-tour.is-drawing .rs-tour__arrow-head {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── Il bottone che apre la guida (sidebar) ─────────────────────── */
.rs-tour-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #4361EE, #7209B7);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
    transition: transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rs-tour-launch:active { transform: translateY(1px); }

/* ── Dove sta il pulsante ────────────────────────────────────────
   Su computer in cima alla colonna di lato. Su telefono la colonna
   finisce in fondo alla pagina, dopo tutte le offerte: lì il pulsante
   non lo troverebbe nessuno, quindi si usa quello in cima al contenuto.
   Mai tutti e due insieme. */
.rs-tour-launch--top { display: none; }

@media (max-width: 968px) {
    /* Il bottone di lato si nasconde INSIEME alla sua scatola: nascondere solo
       il bottone lasciava una card bianca vuota (bordo + 16px di padding) sopra
       "Dove Trovarli ORA". Bug visto su telefono il 02/09/2026. */
    .rs-tour-launch--side,
    .sidebar-section--tour { display: none; }

    .rs-tour-launch--top {
        display: flex;
        margin: 0 0 0.75rem 0;
        /* più sobrio di quello nella colonna: non deve competere col
           "Registrati Gratis" che gli sta appena sopra */
        background: #fff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        box-shadow: 0 1px 3px rgba(67, 97, 238, 0.12);
        font-weight: 600;
    }
}

/* ── La campanella messa in scena ────────────────────────────────
   Le notifiche compaiono solo dopo l'iscrizione: chi guarda la guida
   da sloggato quella campanella non la vedrà mai. Allora la guida ne
   mostra una identica, nello stesso posto, con un'etichetta che dice
   che comparirà iscrivendosi. Entra con un rimbalzo, così si capisce
   che è appena arrivata e non era lì da prima. */
.rs-tour-finta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    z-index: 100000;          /* sopra il velo, come il resto della scena */
    pointer-events: none;
    animation: rsTourCampanellaEntra 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* se la barra in alto non la può ospitare, si aggancia allo schermo
   nel punto in cui comparirebbe */
.rs-tour-finta--sciolta {
    position: fixed;
    top: 12px;
    right: 74px;
}

.rs-tour-finta__icona { width: 22px; height: 22px; }

.rs-tour-finta__pallino {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    animation: rsTourPallino 1.6s ease-in-out 620ms infinite;
}

/* di fianco, non sotto: sotto ci arriva la freccia e le passava sopra */
.rs-tour-finta__etichetta {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #1e293b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    opacity: 0;
    animation: rsTourEtichetta 300ms var(--rs-tour-ease, ease-out) 700ms forwards;
}

@keyframes rsTourCampanellaEntra {
    from { opacity: 0; transform: scale(0.4) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rsTourPallino {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@keyframes rsTourEtichetta {
    from { opacity: 0; transform: translateY(-50%) translateX(6px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rs-tour-finta,
    .rs-tour-finta__pallino { animation: none; }
    .rs-tour-finta__etichetta { animation: none; opacity: 1; }
}

/* ── I numeri d'esempio ──────────────────────────────────────────
   Vedere «0 · €0,00» non insegna niente. Durante la tappa si mostrano
   i numeri che l'utente avrà dopo qualche rimborso, con una targhetta
   che dice che sono un esempio: mai far credere che siano suoi. */
.rs-tour-esempio {
    animation: rsTourNumeroEntra 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rs-tour-con-esempio { position: relative; }

.rs-tour-esempio__targa {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #1e293b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    z-index: 2;
    animation: rsTourEtichettaSemplice 300ms ease-out 260ms both;
}

@keyframes rsTourNumeroEntra {
    from { opacity: 0; transform: translateY(-6px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rsTourEtichettaSemplice {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-tour-esempio,
    .rs-tour-esempio__targa { animation: none; }
}

/* ── La scheda finale ────────────────────────────────────────────
   Non indica niente: saluta. Nessun buco, nessuna freccia, il buio
   pieno su tutto — e tre scorciatoie verso le pagine che il percorso
   non ha potuto attraversare. */
.rs-tour.is-finale {
    background: var(--rs-tour-velo);
    transition: opacity var(--rs-tour-in) var(--rs-tour-ease),
                background var(--rs-tour-nebbia) var(--rs-tour-ease);
}

.rs-tour.is-finale .rs-tour__spot,
.rs-tour.is-finale .rs-tour__arrow { display: none; }

.rs-tour__scorciatoie:empty { display: none; }

.rs-tour__scorciatoie {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

.rs-tour__scorciatoia {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;          /* la solita regola del tocco */
    padding: 9px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    touch-action: manipulation;
    transition: transform 150ms var(--rs-tour-ease),
                background 150ms var(--rs-tour-ease);
}

.rs-tour__scorciatoia:active { transform: translateY(1px); background: #eef2f7; }

.rs-tour__scorciatoia-icona { font-size: 1.35rem; line-height: 1; }

.rs-tour__scorciatoia-testi { display: flex; flex-direction: column; gap: 1px; }
.rs-tour__scorciatoia-testi strong { font-size: 0.92rem; color: #1e293b; }
.rs-tour__scorciatoia-testi span   { font-size: 0.78rem; color: #64748b; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
    .rs-tour.is-finale { transition: none; }
}

/* ── Il pulsante della voce ──────────────────────────────────────
   Sempre in vista, in alto nel fumetto accanto al contatore: chi
   non vuole sentire deve poterlo spegnere al primo sguardo, non
   cercarlo. La scelta viene ricordata: chi lo spegne non lo
   risente mai più. */
.rs-tour__riga-alta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rs-tour__audio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;          /* piccolo ma raggiungibile col pollice */
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 150ms var(--rs-tour-ease),
                background 150ms var(--rs-tour-ease),
                opacity 150ms var(--rs-tour-ease);
}

.rs-tour__audio:active { transform: translateY(1px); }

/* spento: resta leggibile ma si fa da parte */
.rs-tour__audio.is-spento {
    background: transparent;
    color: #94a3b8;
    border-color: #e2e8f0;
}

.rs-tour__audio-icona { font-size: 0.95rem; line-height: 1; }