/**
 * Eteria Tour - stili maschera, spotlight e tooltip.
 *
 * NON MODIFICARE QUESTO FILE.
 *
 * Ogni colore, dimensione, spaziatura e durata passa da una variabile CSS
 * dichiarata nel blocco :root qui sotto. Per adattare la guida al tema di
 * Eteria Connect Suite ridefinisci le variabili che ti servono in
 * webroot/css/frontend/eteria-tour-custom.css, che va caricato DOPO questo
 * file. Cosi' il motore resta aggiornabile senza perdere le personalizzazioni.
 *
 * L'elenco completo delle variabili con i valori di default e' in
 * VARIABILI-CSS.md.
 *
 * @package    EteriaConnectSuite
 * @subpackage Webroot\Css
 * @author     Eteria Srl
 * @version    1.6.2
 */

:root {
    /* ---- Maschera e spotlight ---------------------------------------- */
    /* Velo che copre la pagina: grigio chiaro semi-trasparente.          */
    --et-mask: rgba(120, 130, 145, 0.45);
    /* Anello luminoso attorno all'elemento evidenziato.                  */
    --et-ring: rgba(255, 255, 255, 0.9);
    --et-ring-accent: rgba(13, 110, 253, 0.55);
    --et-ring-width: 2px;          /* spessore dell'anello chiaro         */
    --et-ring-accent-width: 5px;   /* spessore totale con l'anello colore */
    --et-spotlight-radius: 8px;    /* arrotondamento del "buco"           */

    /* ---- Tempi di animazione ----------------------------------------- */
    --et-move-duration: 0.28s;     /* spostamento di spotlight e tooltip  */
    --et-move-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --et-fade-duration: 0.18s;     /* comparsa e scomparsa della guida    */

    /* ---- Finestra di dialogo (tooltip) ------------------------------- */
    --et-font-family: inherit;
    --et-tooltip-bg: #ffffff;
    --et-tooltip-fg: #212529;
    --et-tooltip-muted: #6c757d;
    --et-tooltip-border: rgba(0, 0, 0, 0.08);
    --et-tooltip-border-width: 1px;
    --et-tooltip-width: 340px;
    --et-tooltip-radius: 10px;
    --et-tooltip-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    --et-tooltip-padding: 16px 18px 14px;
    --et-tooltip-gap: 14px;        /* distanza dall'elemento evidenziato  */
    --et-arrow-size: 14px;

    /* ---- Titolo dello step ------------------------------------------- */
    --et-title-size: 1rem;
    --et-title-weight: 600;
    --et-title-line-height: 1.3;
    --et-title-margin: 0 0 6px;
    --et-title-color: var(--et-tooltip-fg);

    /* ---- Testo dello step -------------------------------------------- */
    --et-body-size: 0.9rem;
    --et-body-line-height: 1.5;
    --et-body-margin: 0 0 14px;
    --et-body-color: var(--et-tooltip-fg);
    /* Altezza massima del solo testo: oltre, il testo scorre. */
    --et-body-max-height: 55vh;

    /* ---- Pulsante di chiusura (x) ------------------------------------ */
    --et-close-size: 1.4rem;

    /* ---- Comando "rivedi anche i blocchi comuni" ---------------------- */
    --et-replay-size: 0.85rem;
    --et-replay-color: var(--et-primary);
    --et-replay-margin: 0 0 14px;

    /* ---- Avanzamento -------------------------------------------------- */
    --et-counter-size: 0.75rem;
    --et-bar-height: 4px;
    --et-bar-radius: 2px;
    --et-bar-bg: rgba(0, 0, 0, 0.08);
    --et-progress-gap: 8px;
    --et-progress-min-width: 90px;

    /* ---- Pulsanti Avanti / Indietro / Salta --------------------------- */
    --et-primary: #0d6efd;
    --et-primary-fg: #ffffff;
    --et-btn-size: 0.85rem;
    --et-btn-weight: inherit;
    --et-btn-padding: 8px 14px;
    --et-btn-radius: 6px;
    --et-btn-ghost-border: rgba(0, 0, 0, 0.15);
    --et-actions-gap: 6px;
    --et-footer-gap: 12px;

    /* ---- Pulsante GUIDA ----------------------------------------------- */
    /*
     * Distanza dal bordo alto. Dalla 1.6.0 il motore la calcola da solo
     * appoggiando il pulsante al bordo inferiore della barra dei cataloghi:
     * questo valore vale solo come riserva, se la barra non c'e'.
     */
    --et-launcher-top: 72px;
    /* Aria tra la barra e il pulsante: si somma sempre, calcolo o riserva. */
    --et-launcher-margin-top: 1em;
    --et-launcher-right: 20px;
    --et-launcher-z: 1030;
    --et-launcher-font-size: 0.78rem;
    --et-launcher-weight: 600;
    --et-launcher-letter-spacing: 0.04em;
    --et-launcher-transform: uppercase;
    --et-launcher-padding: 8px 14px;
    --et-launcher-radius: 999px;
    --et-launcher-gap: 7px;
    --et-launcher-bg: var(--et-tooltip-bg);
    --et-launcher-fg: var(--et-tooltip-fg);
    --et-launcher-border: var(--et-tooltip-border);
    --et-launcher-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
    --et-launcher-transition: 0.25s ease;
    --et-launcher-icon-size: 18px;
    --et-launcher-icon-font-size: 0.72rem;
    --et-launcher-mobile-padding: 9px;
}

/* Blocca lo scroll del body mentre la guida e' attiva. */
html.et-lock,
html.et-lock body {
    overflow: hidden !important;
}

/* --------------------------------------------------------------------- */
/* Contenitore                                                            */
/* --------------------------------------------------------------------- */

.et-root {
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: opacity var(--et-fade-duration) ease;
    font-family: var(--et-font-family);
}

.et-root.et-visible {
    opacity: 1;
}

/* Strato trasparente che intercetta i click sul resto della pagina. */
.et-blocker {
    position: fixed;
    inset: 0;
    background: transparent;
    cursor: default;
}

/* --------------------------------------------------------------------- */
/* Spotlight: il "buco" nella maschera                                     */
/* --------------------------------------------------------------------- */

/*
 * L'ombra con spread enorme dipinge di grigio chiaro tutto cio' che sta
 * fuori dal rettangolo: l'elemento corrente resta perfettamente leggibile.
 */
.et-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    border-radius: var(--et-spotlight-radius);
    box-shadow:
        0 0 0 var(--et-ring-width) var(--et-ring),
        0 0 0 var(--et-ring-accent-width) var(--et-ring-accent),
        0 0 0 9999px var(--et-mask);
    transition: top var(--et-move-duration) var(--et-move-easing),
                left var(--et-move-duration) var(--et-move-easing),
                width var(--et-move-duration) var(--et-move-easing),
                height var(--et-move-duration) var(--et-move-easing),
                opacity var(--et-fade-duration) ease;
}

/* Nessun elemento da evidenziare: maschera piena, tooltip al centro. */
.et-root.et-centered .et-blocker {
    background: var(--et-mask);
}

/*
 * L'elemento corrente non ha bisogno di essere spostato: il "buco" della
 * maschera lo lascia gia' perfettamente leggibile. La classe serve solo come
 * gancio per eventuali stili personalizzati (es. accentuare un pulsante).
 */
.et-target {
    /* nessuna regola di posizionamento: non altera il layout della pagina */
}

/* Solo se lo step dichiara allowInteraction: true. */
.et-target-interactive {
    pointer-events: auto;
}

/* --------------------------------------------------------------------- */
/* Finestra di dialogo                                                    */
/* --------------------------------------------------------------------- */

.et-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    /*
     * Esplicito il box-sizing: cosi' --et-tooltip-width e' sempre la larghezza
     * totale della finestra, indipendentemente dal reset globale della pagina
     * ospite (con content-box la spaziatura interna si sommerebbe).
     */
    box-sizing: border-box;
    width: var(--et-tooltip-width);
    max-width: calc(100vw - 24px);
    background: var(--et-tooltip-bg);
    color: var(--et-tooltip-fg);
    border: var(--et-tooltip-border-width) solid var(--et-tooltip-border);
    border-radius: var(--et-tooltip-radius);
    box-shadow: var(--et-tooltip-shadow);
    padding: var(--et-tooltip-padding);
    z-index: 20002;
    transition: top var(--et-move-duration) var(--et-move-easing),
                left var(--et-move-duration) var(--et-move-easing);
}

.et-arrow {
    position: absolute;
    width: var(--et-arrow-size);
    height: var(--et-arrow-size);
    background: var(--et-tooltip-bg);
    border: var(--et-tooltip-border-width) solid var(--et-tooltip-border);
    transform: rotate(45deg);
}

.et-tooltip[data-placement="bottom"] .et-arrow { border-right: 0; border-bottom: 0; }
.et-tooltip[data-placement="top"] .et-arrow    { border-left: 0; border-top: 0; }
.et-tooltip[data-placement="right"] .et-arrow  { border-right: 0; border-top: 0; }
.et-tooltip[data-placement="left"] .et-arrow   { border-left: 0; border-bottom: 0; }

.et-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.et-title {
    margin: var(--et-title-margin);
    font-size: var(--et-title-size);
    font-weight: var(--et-title-weight);
    line-height: var(--et-title-line-height);
    color: var(--et-title-color);
}

.et-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--et-tooltip-muted);
    font-size: var(--et-close-size);
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    border-radius: 4px;
}

.et-close:hover {
    color: var(--et-tooltip-fg);
}

.et-body {
    font-size: var(--et-body-size);
    line-height: var(--et-body-line-height);
    color: var(--et-body-color);
    margin: var(--et-body-margin);
    /*
     * Rete di sicurezza per i testi lunghi sugli schermi bassi: il testo
     * scorre dentro la finestra invece di far diventare la finestra piu' alta
     * dello schermo.
     */
    max-height: var(--et-body-max-height);
    overflow-y: auto;
}

.et-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------- */
/* Comando "rivedi anche i blocchi comuni"                                 */
/* --------------------------------------------------------------------- */

/*
 * Compare solo nella finestra del primo step e solo quando l'utente ha gia'
 * visto in passato i blocchi comuni (header, navbar): cliccandolo la guida
 * riparte completa, senza che debba svuotare a mano la memoria del browser.
 */
.et-replay {
    margin: var(--et-replay-margin);
}

.et-replay-link {
    font: inherit;
    font-size: var(--et-replay-size);
    line-height: 1.4;
    text-align: left;
    color: var(--et-replay-color);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.et-replay-link:hover {
    filter: brightness(0.85);
}

.et-replay-link:focus-visible {
    outline: 2px solid var(--et-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------- */
/* Footer: avanzamento e pulsanti                                          */
/* --------------------------------------------------------------------- */

.et-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--et-footer-gap);
    flex-wrap: wrap;
}

.et-progress {
    display: flex;
    align-items: center;
    gap: var(--et-progress-gap);
    flex: 1 1 auto;
    min-width: var(--et-progress-min-width);
}

.et-counter {
    font-size: var(--et-counter-size);
    color: var(--et-tooltip-muted);
    white-space: nowrap;
}

.et-bar {
    display: block;
    flex: 1 1 auto;
    height: var(--et-bar-height);
    background: var(--et-bar-bg);
    border-radius: var(--et-bar-radius);
    overflow: hidden;
}

.et-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--et-primary);
    border-radius: var(--et-bar-radius);
    transition: width 0.25s ease;
}

.et-actions {
    display: flex;
    align-items: center;
    gap: var(--et-actions-gap);
}

.et-btn {
    font: inherit;
    font-size: var(--et-btn-size);
    font-weight: var(--et-btn-weight);
    line-height: 1;
    padding: var(--et-btn-padding);
    border-radius: var(--et-btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.et-btn:focus-visible {
    outline: 2px solid var(--et-primary);
    outline-offset: 2px;
}

.et-btn-primary {
    background: var(--et-primary);
    color: var(--et-primary-fg);
}

.et-btn-primary:hover {
    filter: brightness(0.94);
}

.et-btn-ghost {
    background: transparent;
    color: var(--et-tooltip-fg);
    border-color: var(--et-btn-ghost-border);
}

.et-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04);
}

.et-btn-link {
    background: transparent;
    color: var(--et-tooltip-muted);
    padding-left: 4px;
    padding-right: 4px;
    text-decoration: underline;
}

.et-btn-link:hover {
    color: var(--et-tooltip-fg);
}

/* --------------------------------------------------------------------- */
/* Pulsante GUIDA (in alto a destra, sotto la navbar)                      */
/* --------------------------------------------------------------------- */

.et-launcher {
    position: fixed;
    top: var(--et-launcher-top);
    /*
     * Il margine resta fuori dal calcolo del motore, che scrive solo 'top':
     * cosi' l'aria sotto la barra e' sempre la stessa a ogni larghezza di
     * schermo e si regola da qui, senza toccare il codice.
     */
    margin-top: var(--et-launcher-margin-top);
    right: var(--et-launcher-right);
    z-index: var(--et-launcher-z);
    display: inline-flex;
    align-items: center;
    gap: var(--et-launcher-gap);
    font: inherit;
    font-size: var(--et-launcher-font-size);
    font-weight: var(--et-launcher-weight);
    letter-spacing: var(--et-launcher-letter-spacing);
    text-transform: var(--et-launcher-transform);
    padding: var(--et-launcher-padding);
    border-radius: var(--et-launcher-radius);
    border: 1px solid var(--et-launcher-border);
    background: var(--et-launcher-bg);
    color: var(--et-launcher-fg);
    box-shadow: var(--et-launcher-shadow);
    cursor: pointer;
    /*
     * La transizione sta sulla regola base e non su :hover, cosi' l'effetto
     * e' simmetrico: si anima sia all'ingresso sia all'uscita del mouse.
     */
    transition: background var(--et-launcher-transition),
                color var(--et-launcher-transition),
                border-color var(--et-launcher-transition);
}

.et-launcher:hover {
    background: var(--et-primary);
    color: var(--et-primary-fg);
    border-color: var(--et-primary);
}

.et-launcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--et-launcher-icon-size);
    height: var(--et-launcher-icon-size);
    border-radius: 50%;
    background: var(--et-primary);
    color: var(--et-primary-fg);
    font-size: var(--et-launcher-icon-font-size);
    font-weight: 700;
    transition: background var(--et-launcher-transition),
                color var(--et-launcher-transition);
}

.et-launcher:hover .et-launcher-icon {
    background: var(--et-primary-fg);
    color: var(--et-primary);
}

/* Il launcher non deve restare sopra la maschera durante il tour. */
html.et-lock .et-launcher {
    display: none;
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

/*
 * Sugli schermi piccoli la finestra di dialogo si rimpicciolisce: meno
 * ingombro significa piu' spazio libero attorno all'elemento evidenziato e
 * quindi nessuna sovrapposizione con cio' che la finestra sta spiegando.
 *
 * Le variabili sono ridichiarate su .et-root e non su :root: la finestra sta
 * dentro .et-root e quindi eredita da qui, anche se in eteria-tour-custom.css
 * hai ridichiarato le stesse variabili su :root per il desktop. Se vuoi altri
 * valori per il piccolo schermo, ricopia questi blocchi in
 * eteria-tour-custom.css usando lo stesso selettore .et-root.
 */
@media (max-width: 767.98px) {
    .et-root {
        --et-tooltip-width: 330px;
        --et-tooltip-padding: 14px 16px 12px;
        --et-tooltip-radius: 10px;
        --et-title-size: 15px;
        --et-title-margin: 0 0 5px;
        --et-body-size: 12.5px;
        --et-body-line-height: 1.45;
        --et-body-margin: 0 0 11px;
        --et-body-max-height: 45vh;
        --et-close-size: 1.35rem;
        --et-replay-size: 1.1rem;
        --et-counter-size: 11px;
        --et-bar-height: 4px;
        --et-btn-size: 13px;
        --et-btn-padding: 8px 14px;
        --et-btn-radius: 6px;
        --et-actions-gap: 6px;
        --et-footer-gap: 10px;
        --et-progress-gap: 8px;
        --et-progress-min-width: 100px;
        --et-arrow-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .et-root {
        --et-tooltip-width: 300px;
        --et-tooltip-padding: 12px 14px 11px;
        --et-title-size: 14px;
        --et-body-size: 12px;
        --et-body-margin: 0 0 9px;
        --et-body-max-height: 40vh;
        --et-close-size: 1.25rem;
        --et-replay-size: 1rem;
        --et-counter-size: 10px;
        --et-btn-size: 12.5px;
        --et-btn-padding: 7px 12px;
        --et-footer-gap: 8px;
        --et-progress-min-width: 80px;
        --et-arrow-size: 12px;
    }

    .et-launcher span.et-launcher-label {
        display: none;
    }

    .et-launcher {
        padding: var(--et-launcher-mobile-padding);
    }
}

/*
 * Spazio utile molto ridotto: finestra bassa E intestazione alta, cioe' meno
 * di 340px liberi sotto le barre agganciate. La classe la mette il motore, che
 * e' l'unico a sapere quanto spazio resta davvero: il CSS da solo vede
 * l'altezza dello schermo ma non l'ingombro dell'intestazione.
 *
 * Qui si stringe piu' che nei blocchi qui sopra, perche' l'alternativa e' una
 * finestra che copre per forza l'elemento che sta spiegando.
 */
.et-root.et-tight {
    --et-tooltip-width: 280px;
    --et-tooltip-padding: 10px 12px 9px;
    --et-title-size: 13px;
    --et-title-margin: 0 0 3px;
    --et-body-size: 11.5px;
    --et-body-line-height: 1.35;
    --et-body-margin: 0 0 7px;
    --et-body-max-height: 132px;
    --et-close-size: 1.1rem;
    --et-replay-size: 0.95rem;
    --et-replay-margin: 0 0 7px;
    --et-counter-size: 10px;
    --et-bar-height: 3px;
    --et-btn-size: 12px;
    --et-btn-padding: 6px 11px;
    --et-actions-gap: 5px;
    --et-footer-gap: 6px;
    --et-progress-gap: 6px;
    --et-progress-min-width: 60px;
    --et-arrow-size: 11px;
}

/*
 * Finestre basse (telefono in orizzontale, browser con molte barre): conta
 * l'altezza, non la larghezza. Si comprime tutto cio' che occupa righe.
 */
@media (max-height: 560px) {
    .et-root {
        --et-tooltip-padding: 12px 14px 10px;
        --et-title-margin: 0 0 4px;
        --et-body-margin: 0 0 9px;
        --et-body-max-height: 38vh;
        --et-btn-padding: 7px 13px;
        --et-footer-gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-spotlight,
    .et-tooltip,
    .et-bar-fill,
    .et-launcher,
    .et-root {
        transition: none !important;
    }
}