/**
 * Product View Switcher - pulsante "VIEW PRODOTTO" e modal di scelta della
 * visualizzazione degli elenchi prodotto (TABLE / LIST / BOXES).
 *
 * Lo stile del pulsante e' volutamente costruito sulle STESSE variabili CSS
 * del pulsante GUIDA (--et-launcher-*, dichiarate in eteria-tour.css e
 * ridefinite in eteria-tour-custom.css): se domani cambi il look del pulsante
 * GUIDA, questo lo segue senza altre modifiche.
 *
 * Ogni var() ha comunque un fallback, cosi' il pulsante resta corretto anche
 * sulle pagine dove eteria-tour.css non venisse caricato.
 *
 * Va caricato DOPO eteria-tour.css / eteria-tour-custom.css.
 *
 * @package    EteriaConnectSuite
 * @subpackage Webroot\Css\Frontend
 * @author     Eteria Srl
 * @version    1.0.0
 */

:root {
    /* ---- Pulsante VIEW PRODOTTO --------------------------------------- */
    /* Spazio orizzontale fra il pulsante VIEW PRODOTTO e il pulsante GUIDA.
       La posizione definitiva viene ricalcolata via JS misurando la larghezza
       reale del pulsante GUIDA (che cambia fra desktop e mobile).           */
    --pvs-launcher-spacing: 10px;
    /* Distanza dal bordo destro quando il pulsante GUIDA e' presente.
       E' un valore dichiarato e non piu' calcolato: la misura a runtime della
       larghezza del GUIDA dipendeva dal momento in cui veniva presa e dava
       risultati diversi a ogni caricamento. Se un domani il GUIDA cambia
       ingombro, si corregge questo numero.                                  */
    --pvs-launcher-right-with-guide: 110px;
    /* Dimensione del font-icon ingranaggio, indipendente da quella del
       pulsante GUIDA: qui l'icona e' nuda e regge una misura maggiore.      */
    --pvs-launcher-icon-font-size: 1.4em;
    /* Posizione di partenza, prima che il JS misuri il pulsante GUIDA. Vale
       quanto --et-launcher-right: e' la posizione corretta nelle pagine dove
       il pulsante GUIDA non c'e', cioe' il caso in cui il JS non deve
       spostare nulla.                                                       */
    --pvs-launcher-right: 15px;

    /* ---- Card di scelta nella modal ----------------------------------- */
    --pvs-primary: var(--et-primary, var(--primary-color, #12678f));

    /* Verde semaforo della selezione e sua versione tenue per il fondo della
       card corrispondente alla visuale in uso. */
    --pvs-green: #21a04a;
    --pvs-green-soft: #eaf7ee;

    --pvs-option-bg: #ffffff;
    --pvs-option-border: rgba(0, 0, 0, 0.12);
    --pvs-option-radius: 6px;
    --pvs-option-padding: 12px;
    --pvs-option-gap: 10px;
    --pvs-option-title-size: 1.4rem;     /* +4px rispetto alla misura iniziale */
    --pvs-option-desc-size: 1.05rem;     /* +2px                                */
    --pvs-option-btn-size: 1.2rem;       /* +4px sul pulsante SELEZIONA         */
    --pvs-option-badge-size: 0.95rem;    /* +4px sull'etichetta ATTUALE         */
    --pvs-option-desc-color: #6c757d;
    --pvs-option-transition: 0.25s ease;

    /* Spessore dell'anello che evidenzia la card selezionata, disegnato con
       un'ombra interna per non alterare le dimensioni della card. */
    --pvs-selected-ring: 3px;
}

/* =====================================================================
 * 1. Pulsante VIEW PRODOTTO
 * ===================================================================== */

.pvs-launcher {
    position: fixed;
    top: var(--et-launcher-top, 105px);
    /* Stesso scostamento verticale applicato al pulsante GUIDA, per non
       restare incollati sotto la navbar. */
    margin-top: var(--et-launcher-margin-top, 0);
    right: var(--pvs-launcher-right);
    z-index: var(--et-launcher-z, 1030);
    display: inline-flex;
    align-items: center;
    gap: var(--et-launcher-gap, 7px);
    font: inherit;
    font-size: var(--et-launcher-font-size, 0.85em);
    font-weight: var(--et-launcher-weight, 600);
    letter-spacing: var(--et-launcher-letter-spacing, 0.04em);
    text-transform: var(--et-launcher-transform, none);
    padding: var(--et-launcher-padding, 7px 13px);
    border-radius: var(--et-launcher-radius, 5px);
    border: 1px solid var(--et-launcher-border, rgba(0, 0, 0, 0.08));
    background: var(--et-launcher-bg, #ffffff);
    color: var(--et-launcher-fg, #212529);
    box-shadow: var(--et-launcher-shadow, 0 4px 14px rgba(15, 23, 42, 0.14));
    cursor: pointer;
    /* Transizione sulla regola base e non su :hover, cosi' l'effetto e'
       simmetrico in entrata e in uscita: identico al pulsante GUIDA. */
    transition: background var(--et-launcher-transition, 0.5s ease),
                color var(--et-launcher-transition, 0.5s ease),
                border-color var(--et-launcher-transition, 0.5s ease);
}

.pvs-launcher:hover,
.pvs-launcher:focus {
    background: var(--pvs-primary);
    color: var(--et-primary-fg, #ffffff);
    border-color: var(--pvs-primary);
    text-decoration: none;
}

/*
 * A differenza del pulsante GUIDA, che racchiude il "?" in un cerchio pieno,
 * qui l'ingranaggio e' nudo: nessuno sfondo, nessun bordo, solo il font-icon
 * nel colore primario.
 */
.pvs-launcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--pvs-primary);
    font-size: var(--pvs-launcher-icon-font-size, 1.4em);
    line-height: 1;
    transition: color var(--et-launcher-transition, 0.5s ease);
}

/* In hover lo sfondo del pulsante diventa blu: l'ingranaggio passa al colore
   del testo, altrimenti sparirebbe dentro il fondo.
   Il colore e' dichiarato anche sui figli i/svg perche' Font Awesome, a
   seconda di come il kit e' configurato, puo' lasciare il tag <i> oppure
   sostituirlo con un <svg>: cosi' la regola vale in entrambi i casi. */
.pvs-launcher:hover .pvs-launcher-icon,
.pvs-launcher:focus .pvs-launcher-icon,
.pvs-launcher:hover .pvs-launcher-icon i,
.pvs-launcher:focus .pvs-launcher-icon i,
.pvs-launcher:hover .pvs-launcher-icon svg,
.pvs-launcher:focus .pvs-launcher-icon svg {
    color: var(--et-primary-fg, #ffffff);
}

/*
 * Il colore e' dichiarato anche sul figlio e con !important perche' il kit di
 * Font Awesome e alcune regole del tema colorano direttamente il glifo,
 * vincendo sull'ereditarieta' dal contenitore.
 */
.pvs-launcher-icon i {
    font-size: inherit;
    line-height: 1;
    color: var(--primary-color) !important;
}

/* In hover il fondo diventa blu: qui il bianco deve tornare a vincere. */
.pvs-launcher:hover .pvs-launcher-icon i,
.pvs-launcher:focus .pvs-launcher-icon i {
    color: var(--et-primary-fg, #ffffff) !important;
}

/* Durante il tour (html.et-lock) il pulsante GUIDA sparisce: questo deve
   sparire con lui, altrimenti resterebbe sopra la maschera. */
html.et-lock .pvs-launcher {
    display: none;
}

/* =====================================================================
 * 2. Card di scelta della visuale (body della modal)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Ingombro verticale della finestra
 * ---------------------------------------------------------------------
 * Su uno schermo da 15 pollici la finestra superava l'altezza disponibile e
 * il pie' con SALVA e CHIUDI restava fuori campo. Il corpo e' limitato a
 * quanto resta tolti intestazione, pie' e margini, e scorre al proprio
 * interno: il pie' e' cosi' sempre raggiungibile, a qualunque risoluzione.
 * ------------------------------------------------------------------- */

#modal_product_view_switcher .modal-dialog {
    margin-top: 18px;
    margin-bottom: 18px;
}

#modal_product_view_switcher .modal-body {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ---------------------------------------------------------------------
 * Maschera di attesa
 * ---------------------------------------------------------------------
 * Copre il contenuto della finestra dal click su SALVA fino al
 * ricaricamento della pagina. Il ricaricamento puo' richiedere un paio di
 * secondi: senza un segnale visibile l'utente non sa se il comando sia
 * stato raccolto e tende a premere una seconda volta.
 * ------------------------------------------------------------------- */

.pvs-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    border-radius: inherit;
}

.pvs-overlay.pvs-visible {
    display: flex;
}

.pvs-overlay-inner {
    text-align: center;
    color: var(--pvs-primary);
}

.pvs-overlay-inner > i {
    font-size: 2.6rem;
}

.pvs-overlay-text {
    margin: 14px 0 0;
    font-size: 1.45rem;
    font-weight: 600;
}

/* Avvertenza sul raggio d'azione della scelta: deve leggersi come una nota a
   margine, non competere con il testo che spiega cosa fare. */
.pvs-note {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.45;
    color: #7a848c;
}

.pvs-options-row {
    display: flex;
    flex-wrap: wrap;
}

/* Le colonne diventano flex per far crescere le card tutte alla stessa
   altezza, a prescindere dalla lunghezza della descrizione. */
.pvs-options-row > [class*="col-"] {
    display: flex;
    margin-bottom: var(--pvs-option-gap);
}

.pvs-option {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background: var(--pvs-option-bg);
    border: 1px solid var(--pvs-option-border);
    border-radius: var(--pvs-option-radius);
    padding: var(--pvs-option-padding);
    cursor: pointer;
    transition: border-color var(--pvs-option-transition),
                box-shadow var(--pvs-option-transition);
}

.pvs-option:hover {
    border-color: var(--pvs-green);
}

/* Card corrispondente alla visuale attualmente in uso: fondo verdino, così si
   distingue a colpo d'occhio anche prima che l'utente scelga. */
.pvs-option-current {
    background: var(--pvs-green-soft);
}

/* Card scelta in questo momento dall'utente, non ancora salvata. */
.pvs-option.pvs-selected {
    border-color: var(--pvs-green);
    box-shadow: 0 0 0 var(--pvs-selected-ring) var(--pvs-green) inset;
}

.pvs-option-preview {
    margin-bottom: 10px;
}

.pvs-option-preview img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #eeeeee;
    border-radius: 4px;
}

.pvs-option-title {
    margin: 0 0 4px;
    font-size: var(--pvs-option-title-size);
    font-weight: 700;
    text-transform: uppercase;
}

.pvs-option-desc {
    margin: 0 0 14px;
    font-size: var(--pvs-option-desc-size);
    line-height: 1.5;
    color: var(--pvs-option-desc-color);
}

/* Il testo del pulsante SELEZIONA segue la stessa scala del titolo, altrimenti
   resterebbe l'unico elemento piccolo della card. */
.pvs-option-select {
    font-size: var(--pvs-option-btn-size);
}

/* Sulla card selezionata il segno di spunta riprende il verde dell'anello: e'
   lo stesso stato, deve avere lo stesso colore. */
#modal_product_view_switcher .pvs-option.pvs-selected .pvs-label-selected i {
    color: var(--pvs-green);
}

/* Spinge il pulsante SELEZIONA sul fondo della card: i tre pulsanti restano
   allineati anche con descrizioni di lunghezza diversa. */
.pvs-option-select {
    margin-top: auto;
    width: 100%;
}

/* Etichetta "SELEZIONATA" visibile solo sulla card scelta. */
.pvs-option .pvs-label-selected {
    display: none;
}

.pvs-option.pvs-selected .pvs-label-selected {
    display: inline;
}

.pvs-option.pvs-selected .pvs-label-select {
    display: none;
}

/* ---------------------------------------------------------------------
 * Blocco dell'amministratore
 * ---------------------------------------------------------------------
 * Quando Catalogues.view_mode e' valorizzato la scelta non e' modificabile:
 * le card restano visibili a scopo illustrativo ma non rispondono al mouse,
 * e il pulsante SALVA non viene nemmeno stampato.
 * ------------------------------------------------------------------- */

.pvs-option-disabled {
    cursor: default;
    opacity: 0.65;
}

.pvs-option-disabled:hover {
    border-color: var(--pvs-option-border);
}

/* La card corrispondente alla scelta dell'amministratore resta in evidenza e
   a piena opacita': e' l'unica informazione utile della schermata. */
.pvs-option-disabled.pvs-selected {
    opacity: 1;
}

.pvs-locked-alert {
    text-align: left;
}

/* ---------------------------------------------------------------------
 * Allineamento dei pulsanti nel pie' della finestra
 * ---------------------------------------------------------------------
 * SALVA e CHIUDI usano due classi diverse del tema, con altezze e margini
 * propri: accostati risultavano sfalsati in verticale. La regola e' limitata
 * a questa finestra tramite l'id, per non alterare il pie' delle altre modali
 * del portale.
 * ------------------------------------------------------------------- */

#modal_product_view_switcher .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Azzera i margini che il tema applica ai pulsanti: la spaziatura la governa
   il gap del contenitore, cosi' i due pulsanti restano complanari. */
#modal_product_view_switcher .modal-footer .btn {
    margin: 0;
    vertical-align: middle;
}

/* Badge "Attuale" sulla visuale gia' in uso. */
.pvs-option-current-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--pvs-green);
    color: #ffffff;
    font-size: var(--pvs-option-badge-size);
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}

/* Messaggio di errore del salvataggio. */
.pvs-error {
    display: none;
    margin-top: 10px;
}


/* =====================================================================
 * 3. Responsive
 * ===================================================================== */

/* Tablet e schermi stretti: le tre card si incolonnano (col-xs-12) e le
   dimensioni del testo scendono di un gradino, altrimenti su una colonna sola
   il corpo della finestra diventa lunghissimo da scorrere. */
@media (max-width: 767.98px) {
    :root {
        --pvs-option-title-size: 1.2rem;
        --pvs-option-desc-size: 1rem;
        --pvs-option-btn-size: 1.05rem;
        --pvs-option-badge-size: 0.85rem;
    }

    #modal_product_view_switcher .modal-body {
        max-height: calc(100vh - 190px);
    }

    /* Su una colonna sola l'immagine di anteprima diventerebbe enorme: la
       larghezza e' limitata e la card resta leggibile. */
    .pvs-option-preview img {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    /* Sotto i 576px il pulsante GUIDA nasconde la label e diventa quadrato:
       facciamo lo stesso, cosi' i due restano appaiati. */
    .pvs-launcher span.pvs-launcher-label {
        display: none;
    }

    .pvs-launcher {
        padding: var(--et-launcher-mobile-padding, 9px);
    }

    :root {
        /* Senza etichetta il pulsante GUIDA e' molto piu' stretto: lo
           scostamento va ridotto di conseguenza. */
        --pvs-launcher-right-with-guide: 62px;
    }

    #modal_product_view_switcher .modal-dialog {
        margin-left: 8px;
        margin-right: 8px;
    }

    .pvs-note {
        font-size: 0.8rem;
    }

    /* Il pie' su schermo stretto: i due pulsanti si dividono la riga invece di
       andare a capo lasciando SALVA da solo. */
    #modal_product_view_switcher .modal-footer {
        justify-content: stretch;
    }

    #modal_product_view_switcher .modal-footer .btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pvs-launcher,
    .pvs-launcher-icon,
    .pvs-option {
        transition: none !important;
    }
}