/* =========================================================================
 * iCONsite — Module: photo-gallery
 * Auto-incluso dal sistema modulare. Sezioni: FRONTEND e ADMIN.
 * ========================================================================= */


/* =========================================================================
 * === FRONTEND ============================================================
 * ========================================================================= */

/* =========================================================================
 * CONFIG GALLERY — UNICO PUNTO PER REGOLARE LE DIMENSIONI DELLE FOTO
 * -------------------------------------------------------------------------
 * Modifica solo i valori qui sotto. Le altre regole CSS leggono queste
 * variabili e si adattano automaticamente.
 * ========================================================================= */
.module-photo-gallery {
    /* Larghezza della singola foto in pixel.
       (es. 220px = foto piccole/medie, 280px = medie, 340px = grandi) */
    --photo-size: 160px;

    /* Forma della foto: rapporto larghezza/altezza.
       1/1 = quadrato, 4/3 = orizzontale, 3/4 = verticale (ritratto), 16/9 = cinema */
    --photo-aspect-ratio: 1 / 1;

    /* Spazio tra una foto e l'altra (orizzontale e verticale) */
    --photo-gap: 10px;
}
/* ========================================================================= */
:root {
    --gallery-move-arrow: color-mix(in srgb, var(--primary) 59%, transparent);
}

.module-photo-gallery {
    width: 100%;
    background: var(--module-bg);
    box-shadow: var(--module-surface-shadow);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}
.module-photo-gallery--no-bg {
    background: transparent;
    padding-top: 30px;
    padding-bottom: 30px;
    box-shadow: none;
}

.module-photo-gallery .photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--photo-size));
    justify-content: center;
    gap: var(--photo-gap);
}

/* Titolo della gallery (rendered solo se name_visible=true e name valorizzato).
   Classe dedicata: indipendente dagli altri moduli. */
.module-photo-gallery-title {
    margin: 1rem 0 1rem;
    padding: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--primary);
}

.module-photo-gallery .photo-gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    margin: 1rem 0;
    display: none;
}

.module-photo-gallery .photo-gallery-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.module-photo-gallery .photo-gallery-item img {
    width: 100%;
    aspect-ratio: var(--photo-aspect-ratio);
    object-fit: cover;
    display: block;
    border-radius: var(--radius-inner);
}

.module-photo-gallery .photo-gallery-link,
.module-photo-gallery .img-lightbox-trigger {
    display: block;
    line-height: 0;
}

.module-photo-gallery .photo-gallery-caption {
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--module-text-muted);
    text-align: center;
}

/* Quando il modulo NON ha modifier --lightbox né --metalink, le foto sono
   visivamente inerti: cursore default, niente hover effect. Pattern: la foto
   è cliccabile SOLO se il modulo dichiara una modalità di interazione. */
.module-photo-gallery .photo-gallery-item img {
    cursor: default;
    border: 2px solid transparent;
    transition: border 0.3s ease, transform 0.3s ease;
}

/* Modalità Lightbox o Metalink: foto cliccabile. Cursor pointer + hover
   con bordo ocra e leggero zoom. Feedback visivo coerente con il fatto che
   c'è un'azione al click. */
.module-photo-gallery--lightbox .photo-gallery-item img,
.module-photo-gallery--metalink .photo-gallery-item img {
    cursor: pointer;
}
.module-photo-gallery--lightbox .photo-gallery-item img:hover,
.module-photo-gallery--metalink .photo-gallery-item img:hover {
    border-color: var(--primary);
    transform: scale(1.03);
}


/* =========================================================================
 * === ADMIN ===============================================================
 * Pannello editor inside .module-card-body.
 * ========================================================================= */

/* =========================================================================
 * FIX DOPPIO SCROLL — singolo scroll su .gallery-items-section
 *
 * Problema: il core admin usa .module-card-body { max-height: 360px;
 * overflow-y: auto } + la gallery aveva .gallery-items-section
 * { max-height: 500px; overflow-y: auto } → DUE scroll annidati.
 * Passando da grid a list, scrollIntoView muoveva entrambi.
 *
 * Soluzione: rimuovo lo scroll dal .module-card-body (per la gallery)
 * e lo concentro SOLO sulla .gallery-items-section. La toolbar (name row
 * + gallery-editor-head) resta naturalmente sopra la zona scrollabile,
 * ferma. UN solo scroll, zero conflitti.
 *
 * NB: .module-card mantiene overflow:hidden (core). La modale errori
 * upload è spostata su document.body via JS (portal pattern) per
 * uscire dal containing block creato da .screen { transform }.
 * ========================================================================= */
.module-card[data-module-type="photo-gallery"]:not(.module-card--collapsed) .module-card-body {
    max-height: none;
    overflow: visible;
}

.gallery-panel {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Wrapper "testa" del pannello: top-row (tab + toggles) + add-row (bottoni
   Carica). NON più sticky (lo scroll è isolato nella .gallery-items-section
   sotto; la testa resta naturalmente sopra). Manteniamo z-index e ombra. */
.gallery-editor-head {
    position: relative;
    z-index: 50;
    background: var(--ed-bg-toolbar);
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.07));
}

/* ---- Riga superiore unica ----------------------------------------------
   Layout: [tab IT/EN] - flex spacer - [toggles modulo] - gap - [SFONDO]
   Tutti i toggle vivono qui, niente box separato sotto. */
.gallery-top-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0px 6px 0 0;
    border-bottom: 1px solid #D0D0D0;
    background: var(--ed-bg-toolbar);
}
.gallery-top-row .gallery-lang-tabs {
    margin-bottom: -2px;
}


.gallery-top-toggles {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-left: auto;
    margin-right: -16px;
}
.gallery-top-toggles .inline-form {
    margin: 0;
}

/* ---- Tab IT / EN del modulo gallery -----------------------------------
   CLONE VISIVO dei tab del text-editor (.icns-editor-tab in text-editor.css)
   ma con classi PROPRIE: il modulo è autonomo, può evolvere senza toccare
   il core. Stesso identico aspetto, zero accoppiamenti. */
.gallery-lang-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 6px 0 8px;
    background: var(--ed-bg-toolbar);
    border-bottom: 1px solid var(--ed-border);
}

.gallery-lang-tab {
    font: inherit;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
    padding: 5px 14px 4px;
    border: 1px solid var(--ed-border);
    border-bottom: none;
    border-radius: var(--tab-radius);
    background: #ececec;
    color: #666;
    cursor: pointer;
    transition: background 100ms, color 100ms;
    min-height: 24px;
    min-width: 45px;
}
.gallery-lang-tab:hover {
    background: #e0e0e0;
    color: var(--ed-text);
}
.gallery-lang-tab.is-active {
    background: var(--tab-active);
    color: var(--ed-primary-dark);
    border-color: var(--ed-border);
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
    min-height: 25px;
    min-width: 45px;
    padding: 4px 14px 4px;
}

/* Pane lingua: visibility via classe .is-active.
   Niente attributo hidden: pattern più robusto, nessun rischio di display
   override di figli che lottano contro user-agent stylesheet. */
.gallery-lang-pane {
    display: none;
}
.gallery-lang-pane.is-active {
    display: block;
}

/* Stato disabled del mini-switch (lightbox quando metalink ON). */
.icns-editor-bg-switch--disabled {
    opacity: 0.4;
}
.icns-editor-bg-switch--disabled:hover {
    opacity: 0.4;
}

/* ---- Sezione items list -----------------------------------------------
   UNICO scroll container del modulo gallery. La toolbar (module-name-row
   + gallery-editor-head) resta ferma sopra. max-height: 60vh offre un
   buon compromesso tra spazio visibile e convivenza con gli altri moduli
   della pagina. Un solo scroll context → zero conflitti grid↔list. */
.gallery-items-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0px 0 0;
    max-height: 60vh;
    overflow-y: auto;
}

/* Empty state: cornice tratteggiata visibile, box basso e largo, testo piccolo. */
.gallery-no-items {
    margin: 0;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px dashed #c0c0c0;
    border-radius: 0px;
    color: #777;
    text-align: center;
    font-size: 0.82rem;
}

.gallery-items-list {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gallery-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 15px 13px;
    background: var(--ed-bg-toolbar);
    border-bottom: 1px solid #e0e0e0;
}

/* Thumbnail 60×60 quadrata. */
.gallery-item-thumb {
    flex-shrink: 0;
    width: 110px;
    height: 66px;
    border-radius: 3px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    cursor: grab;
}
/* Simmetria col pattern vghtml5/vgyt/audio: grabbing già alla
   pressione, prima che il gesto attivo accenda la regola globale. */
.gallery-item-thumb:active { cursor: grabbing; }
.gallery-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-item-thumb-placeholder { color: #ccc; }
.gallery-item-thumb-placeholder svg { width: 24px; height: 24px; }

/* Checkbox include/escludi foto dalla gallery (frontend).
   Stato is-checked: foto pubblicata → spunta su sfondo ocra.
   Stato is-off: foto nascosta dal frontend → quadrato ROSSO vuoto.
   Niente "neutro": appena la foto entra nel JSON ha photo_enabled = true
   (default), quindi l'utente vede subito un colore (verde o rosso). */
.gallery-item-photo-form { display: flex; align-items: center; }
.gallery-item-photo-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 0;
    padding: 0;
    background: #fff;
    border: 1.5px solid #c0c0c0;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}
.gallery-item-photo-check:hover {
    filter: brightness(1.05);
}
.gallery-item-photo-check.is-checked {
    background: var(--primary);
    border-color: var(--primary);
}
.gallery-item-photo-check.is-off {
    background: transparent;
    border-color: var(--primary);
}
.gallery-item-photo-check svg {
    pointer-events: none;
}

/* Info area: titolo + didascalia (per lingua attiva). */
.gallery-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -0.3rem 0;
}

.gallery-item-input {
    width: 100%;
    padding: 5px 8px;
    margin: 2px 0;
    font-size: 0.8rem;
    line-height: 1.3;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    background: #fff;
    color: #333;
    transition: border-color 120ms ease-out;
}
.gallery-item-input:hover {
    border-color: #c0c0c0;
}
.gallery-item-input:focus {
    outline: 0;
    border-color: var(--primary);
}

/* Actions a destra (frecce + remove): colonna verticale. */
.gallery-item-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    margin-top: -3px;
}
.gallery-item-actions .inline-form { margin: 0; }

/* ---- Drag handle (grip icon a sinistra dell'item lista) --------------- */
.gallery-item-drag-handle {
    flex-shrink: 0;
    width: 18px;
    display: flex;
    justify-content: center;
    color: #c0c0c0;
    cursor: grab;
    transition: color 120ms ease-out;
    margin-right: -8px;
    margin-left: -9px;
    margin-top: -2px;
    align-items: center;
}
.gallery-item-drag-handle:active { cursor: grabbing; }
.gallery-item-drag-handle:hover  { color: var(--primary); }
.gallery-item-drag-handle svg    { pointer-events: none; }

/* ---- Drag states (lista e griglia) ------------------------------------ */
.gallery-item.is-dragging {
    opacity: 0.4;
    background: #f8f4e8;
}
.gallery-grid-item.is-dragging {
    opacity: 0.4;
}

.gallery-item-action-btn {
    padding: 5px !important;
    width: 30px;
    height: 18px;
    background: white;
    border: 1.5px solid var(--gallery-move-arrow);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    transition: all 200ms ease-out;
}

.gallery-item-action-btn svg {
    height: 12px;
    width: 12px;
}

.gallery-item-action-btn:hover {
    color: white;
    background: var(--primary);
}
.gallery-item-action-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}
.gallery-item-action-btn:disabled:hover {
    color: #999;
    border-color: transparent;
    background: transparent;
}

.gallery-item-action-btn--danger {
    color: white;
    background: red;
    border: 1.5px solid transparent;
    margin-bottom: 5px;
}
.gallery-item-action-btn--danger:hover {
    filter: brightness(1.2);
    background: red;
}
.gallery-item-action-btn svg { pointer-events: none; }

/* ---- Zona aggiungi: usa la classe core .btn-bg-action ------------------
   Pattern uguale ai bottoni "Carica" dell'header foto pagina.
   Il wrapper .bg-actions-upload + .gallery-add-row riusa il flex
   layout già definito in admin-style.css. */

.gallery-add-row {
    position: relative;
    padding: 7px 18px 7px 7px;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
}

.gallery-add-file { display: none; }
.gallery-panel .hidden-form { display: none; }

/* Stato uploading: leggera variazione visiva del bottone "dal computer". */
.btn-bg-action.is-uploading {
    opacity: 0.7;
}

/* Modifier compatto per i bottoni Carica del modulo gallery. Convive con
   .btn-bg-action: avere DUE classi sullo stesso elemento crea specificità
   maggiore della classe singola, quindi questi valori vincono senza
   !important. Niente guerre di specificità con il core. */
.btn-bg-action.gallery-load-btn {
    max-height: 29px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 10px;
    max-width: 190px;
}

/* =========================================================================
 * VIEW MODE — switch lista / griglia
 * ========================================================================= */

/* Gruppo toggle vista: 2 bottoni allineati a sinistra dei bottoni Carica.
   margin-right: auto spinge i bottoni Carica a destra mantenendo il gruppo
   a sinistra (dentro .bg-actions-upload che è display:flex). */
.gallery-view-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: auto;
    margin-left: 1px;
}
.gallery-view-btn {
    width: 45px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    opacity: 0.4;
    transition: all 120ms ease-out;
}
.gallery-view-btn:hover {
    opacity: 1;
    border-color: rgba(212, 160, 23, 0.6);
    color: var(--primary);
}
.gallery-view-btn.is-active {
    opacity: 1;
    background: #fff;
    border-color: rgba(212, 160, 23, 0.5);
}
.gallery-view-btn svg { pointer-events: none; }

/* Vista griglia riattivata (v1.0093): il doppio scroll è risolto con
   singolo scroll su .gallery-items-section. Il bottone grid è visibile. */


/* ---- Vista griglia ----------------------------------------------------- */
.gallery-grid-list {
    list-style: none;
    margin: 0;
    padding: 15px 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 124px);
    gap: 8px;
    justify-content: start;
}

.gallery-grid-item {
    margin: 0;
    padding: 0;
}

/* Singola cella: bottone tap-friendly, foto 110×66 (stessa thumb della lista). */
.gallery-grid-item-btn {
    width: 124px;
    height: 70px;
    padding: 0;
    border: 0;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 120ms ease-out;
    border: solid 1px transparent;
}
/* Cella griglia "vuota" (media non disponibile): visivamente più dimmed,
   tono coerente con .gallery-grid-item-placeholder. */
.gallery-grid-item-btn--empty {
    background: #e9e9e9;
}
.gallery-grid-item-btn:hover {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
    border: solid 1px var(--primary);
}
.gallery-grid-item-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-grid-item-placeholder {
    color: #ccc;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
}
.gallery-grid-item-placeholder svg { width: 24px; height: 24px; }


/* ---- Flash animation: click griglia → torno in lista ------------------
   Highlight dell'item cliccato per 1.4s, fade-out morbido. Background ocra
   chiaro + bordo per attirare l'occhio senza essere aggressivo. */
@keyframes gallery-item-flash {
    0%   { background: #fff5d6; box-shadow: inset 4px 0 0 var(--primary); }
    100% { background: #fff;    box-shadow: inset 0 0 0 transparent; }
}
.gallery-item.is-flash {
    animation: gallery-item-flash 2500ms ease-out forwards;
}


/* =========================================================================
 * [hidden] OVERRIDE — difende la semantica HTML5
 *
 * L'attributo [hidden] è specificato da HTML5 come "non visibile" e i browser
 * lo traducono in display:none nello user-agent stylesheet. PERÒ qualunque
 * regola CSS d'autore che setti display: (block/flex/grid) sull'elemento con
 * specificità ≥ user-agent FA APPARIRE l'elemento, ignorando hidden.
 *
 * Nel nostro pannello succede su:
 *   - .gallery-grid-list (display: grid) quando ha hidden
 *   - .gallery-items-list (display: flex) quando ha hidden
 *   - input pane EN/IT (display di default) quando ha hidden
 *
 * Soluzione: forziamo display:none ovunque l'attributo hidden compaia dentro
 * il pannello. !important QUI È CORRETTO: difendiamo la semantica HTML, non
 * stiamo patchando uno scontro tra stili d'autore.
 * ========================================================================= */
.gallery-panel [hidden] {
    display: none !important;
}

/* =========================================================================
 * Modale custom errori upload multiplo. Il pattern visivo segue
 * .modal-content--confirm del core. Qui solo lista errori e contatore.
 * ========================================================================= */
.gallery-upload-errors-list {
    list-style: disc;
    margin: 8px auto 16px;
    padding: 8px 0px 8px 35px;
    max-height: 180px;
    /* max-width: 95%; */
    overflow-y: auto;
    font-size: 13.5px;
    background: #ffffff17;
    border-radius: 5px;
    color: black;
    font-weight: 600;
    text-align: left;
}
.gallery-upload-errors-list li {
    margin: 3px 0;
    line-height: 1.4;
    word-break: break-word;
    margin-right: 20px;
}

.gallery-upload-errors-list li::marker {
    color: var(--admin-red);
}

/* =========================================================================
 * MOBILE — sotto 600px: 2 colonne fluide invece di larghezza fissa
 * ---------------------------------------------------------------------
 * Su mobile con --photo-size:160px le colonne fissate generano impilamento
 * a 1 colonna su schermi <340px e bordi vuoti enormi tra 340-500px.
 * Sostituiamo la grid auto-fit con repeat(2, 1fr) → sempre 2 colonne, ogni
 * colonna larga (50% - gap/2). Le foto si ridimensionano automaticamente.
 * Aspect-ratio resta 1/1 (impostato sul .photo) → niente distorsione.
 * ========================================================================= */
@media (max-width: 362px) {
    .module-photo-gallery .photo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
 * DRAG & DROP SORT — item sorgente durante il drag (motore icnsDragSort).
 * CLONE VISIVO 1:1 delle regole .is-dragging del vecchio drag nativo
 * (righe sopra, ora inerti): stessa opacità, stesso fondo riga.
 * ========================================================================= */
.gallery-item.is-dragsort-source {
    opacity: 1;
    
}
.gallery-grid-item.is-dragsort-source {
    opacity: 1;
    
}

/* Ghost della tile grid: il <li> vive in una traccia da 119px ma la tile
   (bottone) è 110px — il clone erediterebbe i 9px d'aria come banda bianca
   a destra. width: auto (!important: vince sull'inline del motore) lo
   restringe al contenuto. */
.gallery-grid-item.icns-dragsort-ghost {
    width: auto !important;
}


/* ============================================================
   BERSAGLIO META-LINK — icona trigger + mini-modale + tendina
   (tendina: clone del select photo-text, menu aperto verso il basso)
   ============================================================ */
.gallery-metalink-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary, #d4a017);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: -5px;
    margin-right: 10px;
    margin-left: -5px;
}
.gallery-metalink-btn:hover:not([disabled]) {
    filter: brightness(1.2);
}
.gallery-metalink-btn[disabled] {
    color: #b5b5b5;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
/* Dimensioni e parametri dell'icona: si regolano qui. */
.gallery-metalink-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* La modale non ritaglia il menu della tendina (override dell'overflow core). */
.modal-content.gallery-metalink-modal {
    overflow-y: visible;
}
.gallery-metalink-modal .gallery-metalink-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 10px 0 6px;
    text-align: left;
}
.gallery-metalink-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gallery-metalink-url-visible {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    max-height: 29px;
    box-sizing: border-box;
}
.gallery-metalink-newtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: 15px;
}

/* Toggle LINK con bersaglio guasto: TRACK rosso, acceso O spento. */
button.icns-editor-bg-switch--broken .icns-editor-bg-switch-track,
button.icns-editor-bg-switch--broken.is-on .icns-editor-bg-switch-track {
    background: var(--admin-red);
}
/* Icona bersaglio: rossa quando il link configurato è guasto (e attiva). */
.gallery-metalink-btn--broken:not([disabled]) {
    color: var(--admin-red);
}

/* ---- Voci speciali della tendina pagina (componente select
   unificato): scoped sull'attributo del modulo, corpi originali ---- */
/* Pagine NON pubbliche (private/con-link): rosse in lista e nel trigger. */
.icns-sel-item.is-nonpublic {
    color: var(--admin-red);
}
/* Pagina corrente: non selezionabile (previene l'auto-link alla radice). */
.icns-sel-item.is-current {
    pointer-events: none;
    opacity: 0.4;
}
.icns-sel[data-gallery-metalink-select]:has(.icns-sel-item.is-selected.is-nonpublic) .icns-sel-value {
    color: var(--admin-red);
}