/* Frontend Styles for Musicians' Wall */

/* Popup Styles */
#mw-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none; /* Nascosto di default */
    align-items: center;
    justify-content: center;
    z-index: 100000; /* Aumentato per essere sopra la sezione hero */
}

#mw-popup-overlay:not(.mw-hidden) {
    display: flex; /* Mostra quando la classe mw-hidden non è presente */
}

#mw-popup-content {
    display: flex;
    flex-direction: column; /* Organizza gli elementi in colonna */
    align-items: stretch; /* Permetti agli elementi figli di allungarsi orizzontalmente */
    justify-content: center; /* Centra gli elementi verticalmente */
    background: #fff;
    padding: 10px 10px 20px 10px; /* Aumentato il padding-bottom per dare più spazio al bottone */
    border-radius: 8px;
    max-width: 700px;
    width: 90%;
    max-height: calc(90vh - 20px); /* Reintrodotto max-height */
    overflow-x: hidden; /* Assicurati che non ci sia scroll orizzontale */
    overflow-y: auto; /* Aggiunto per gestire lo scroll verticale */
    position: relative; /* Aggiunto per il posizionamento assoluto del link */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    box-sizing: border-box; /* Include padding e border nella larghezza/altezza */
    z-index: 100001;
    transition: opacity 0.3s ease-in-out; /* Aggiungi transizione per l'opacità */
}

/* Classi per l'animazione di fade-out e fade-in */
#mw-popup-content.mw-popup-content-fading-out {
    opacity: 0;
}

#mw-popup-content.mw-popup-content-fading-in {
    opacity: 1;
}

#mw-popup-close {
    display: none; /* Nascondi il pulsante di chiusura */
}

/* Stili per le frecce di navigazione */
.mw-nav-arrow {
    position: fixed;
    top: 10px; /* Posizionato proprio in cima alla pagina */
    transform: translateX(-50%);
    color: #fff;
    font-size: 2.2em;
    cursor: pointer;
    z-index: 100003;
    user-select: none;
    transition: transform 0.2s ease;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    line-height: 1;
    margin: 0;
}

.mw-nav-arrow:hover {
    transform: translateX(-50%) scale(1.1);
}

.mw-nav-arrow.mw-hidden {
    display: none;
}

#mw-prev-musician {
    left: 50%;
    margin-left: -70px; /* Maggiore spazio tra le due frecce */
    text-align: center;
}

#mw-next-musician {
    left: 50%;
    margin-left: 70px; /* Maggiore spazio tra le due frecce */
    text-align: center;
}

/* Navigation arrows are now positioned fixed on the viewport */

/* Responsive adjustments for navigation arrows */
@media (max-width: 768px) {
    .mw-nav-arrow {
        font-size: 1.5em;
    }
    #mw-prev-musician {
        margin-left: -45px; /* Ridotto lo spazio per schermi medi */
    }
    #mw-next-musician {
        margin-left: 15px; /* Ridotto lo spazio per schermi medi */
    }
}

@media (max-width: 480px) {
    .mw-nav-arrow {
        font-size: 1.2em;
    }
    #mw-prev-musician {
        margin-left: -35px; /* Ridotto ulteriormente per schermi piccoli */
    }
    #mw-next-musician {
        margin-left: 10px; /* Ridotto ulteriormente per schermi piccoli */
    }
}

.mw-popup-media-quote-wrapper {
    position: relative; /* Aggiunto per posizionare correttamente il badge fondatore */
    display: flex;
    flex-direction: row; /* Affianca gli elementi */
    align-items: stretch; /* Allinea gli elementi verticalmente al centro e li allunga */
    width: 100%;
    margin-bottom: 15px; /* Spazio sotto il wrapper */
    flex-grow: 1; /* Permetti al wrapper di occupare lo spazio verticale disponibile */
}

#mw-popup-image { /* Ora è un singolo div */
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 20px; /* Spazio tra l'immagine e la citazione */
    max-width: 40%; /* L'immagine occupa al massimo il 40% della larghezza */
    min-height: 150px; /* Altezza minima per assicurare la visibilità */
    max-height: 400px; /* Limita l'altezza massima per le foto */
    height: auto; /* Permetti all'altezza di adattarsi proporzionalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Rimosso overflow: hidden per permettere al badge fondatore di essere visibile anche se leggermente fuori dai bordi */
    position: relative; /* Aggiunto per posizionare il badge fondatore */
    /* Rimosso background-color e border-radius per far seguire la forma dell'immagine */
}

.mw-popup-image-actual {
    max-width: 100%;
    max-height: 100%; /* Assicura che l'immagine occupi l'altezza del contenitore */
    width: auto; /* Permetti alla larghezza di adattarsi */
    height: auto; /* Permetti all'altezza di adattarsi */
    display: block; /* Rende l'immagine un blocco per un migliore controllo */
    object-fit: contain;
    border-radius: 5px;
}

#mw-popup-quote-title {
    font-style: italic;
    color: #555;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.2;
    margin-bottom: 5px;
}

#mw-popup-quote {
    font-style: italic;
    color: #555;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.2;
    flex-grow: 1;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#mw-popup-quote h4 {
    font-style: italic;
    color: #555;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.2;
    margin-bottom: 5px;
}

.mw-popup-quote-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive adjustments for popup content and quote */
@media (max-width: 768px) {
    #mw-popup-content {
        max-height: calc(95vh - 20px); /* Aumenta l'altezza del modale per schermi medi */
    }
    #mw-popup-quote {
        font-size: 1.4em; /* Riduci la dimensione del font per schermi più piccoli */
    }
    .mw-popup-media-quote-wrapper {
        flex-direction: row; /* Mantieni immagine e citazione affiancate */
        height: 100%; /* Forza il wrapper a prendere l'altezza disponibile */
        align-items: stretch; /* Permetti agli elementi figli di allungarsi per riempire l'altezza */
    }
    #mw-popup-image {
        max-width: 35%; /* Riduci la larghezza dell'immagine per lasciare spazio alla citazione */
        margin-right: 10px; /* Riduci lo spazio tra immagine e citazione */
        min-height: 120px; /* Riduci l'altezza minima per schermi medi */
        height: 100%; /* Permetti all'immagine di prendere l'altezza del wrapper */
    }
    .mw-popup-image-actual {
        height: 100%; /* Assicura che l'immagine occupi l'altezza del contenitore */
        width: auto; /* Mantieni la proporzione */
    }
}

@media (max-width: 480px) {
    #mw-popup-content {
        max-height: calc(98vh - 20px); /* Aumenta ulteriormente l'altezza del modale per schermi molto piccoli */
    }
    #mw-popup-quote {
        font-size: 1.4em; /* Riduci la dimensione del font per schermi più piccoli */
        max-height: none; /* Rimuovi il limite di altezza per permettere l'espansione */
    }
    #mw-popup-quote {
        font-size: 1.1em; /* Riduci ulteriormente per schermi molto piccoli */
        max-height: none; /* Rimuovi il limite di altezza per permettere l'espansione */
    }
    .mw-popup-media-quote-wrapper {
        flex-direction: row; /* Mantieni immagine e citazione affiancate */
        height: 100%; /* Forza il wrapper a prendere l'altezza disponibile */
        align-items: stretch; /* Permetti agli elementi figli di allungarsi per riempire l'altezza */
    }
    #mw-popup-image {
        max-width: 30%; /* Riduci ulteriormente la larghezza dell'immagine */
        margin-right: 5px; /* Riduci ulteriormente lo spazio */
        min-height: 100px; /* Riduci l'altezza minima per schermi molto piccoli */
        height: 100%; /* Permetti all'immagine di prendere l'altezza del wrapper */
    }
    .mw-popup-image-actual {
        height: 100%; /* Assicura che l'immagine occupi l'altezza del contenitore */
        width: auto; /* Mantieni la proporzione */
    }
}


.mw-musician-details-bottom {
    display: flex;
    flex-direction: row; /* Allinea gli elementi sulla stessa riga */
    align-items: center; /* Centra gli elementi verticalmente */
    justify-content: flex-start; /* Allinea gli elementi a sinistra */
    width: 100%;
    margin-top: 5px;
    flex-wrap: wrap;
    flex-shrink: 1; /* Permetti al contenitore di rimpicciolirsi */
    min-width: 0;
    padding: 0; /* Rimosso padding orizzontale, gestito dal contenitore principale */
}

.mw-popup-header-wrapper {
    display: flex;
    flex-direction: column; /* Cambiato da row a column */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra orizzontalmente */
    width: 100%;
    margin-bottom: 5px; /* Ridotto lo spazio sotto l'header */
    position: relative; /* Mantenuto per sicurezza */
}

.mw-popup-title-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra nome e strumenti */
    flex-grow: 1; /* Permette al gruppo di occupare lo spazio disponibile */
}

#mw-popup-name {
    font-size: 1.5em; /* Diminuito il font-size */
    font-weight: bold;
    margin: 0;
    padding-top: 5px; /* Aggiunto leggero padding sopra */
    color: #333;
    text-align: center; /* Centra il nome */
    line-height: 1.2;
}

#mw-popup-instruments {
    font-size: 0.8em; /* Diminuito il font-size */
    color: #666;
    font-weight: normal;
    margin: 0;
    padding-bottom: 8px; /* Aggiunto leggero padding sotto */
    text-align: center; /* Centra gli strumenti */
    line-height: 1.2;
}

#mw-popup-link {
    display: inline-flex;
    align-items: center;
    background: #0073aa;
    color: #fff;
    padding: 4px 8px; /* Ridotto padding */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.7em; /* Ridotto il font-size */
    margin-bottom: 10px; /* Spazio tra il pulsante e il nome */
    position: static; /* Rimuove il posizionamento assoluto */
    top: auto;
    right: auto;
    z-index: auto;
    align-self: flex-end; /* Allinea il pulsante a destra all'interno del contenitore flex */
}

/* Responsive adjustments for popup link */
@media (max-width: 768px) {
    #mw-popup-link {
        font-size: 0.54em; /* Aggiustato per schermi medi */
        padding: 4px 8px;
    }
}

@media (max-width: 480px) {
    #mw-popup-link {
        font-size: 0.42em; /* Aggiustato per schermi molto piccoli */
        padding: 3px 6px;
    }
}

#mw-popup-link::before {
    content: '\f05a'; /* Codice Unicode per l'icona di informazione (FontAwesome) */
    font-family: 'Font Awesome 5 Free'; /* Assicurati che FontAwesome sia caricato */
    font-weight: 900; /* Per icone Solid */
    margin-right: 5px;
}

#mw-popup-link:hover {
    background: #005177;
}

.mw-hidden {
    display: none;
}

/* Responsive Design - Media Queries */

/* Responsive Design - Media Queries */


/* Stili aggiuntivi per assicurare la piena larghezza del contenuto del wall */
.page-template-templates-page-full-width #primary.content-area,
.page-template-templates-page-full-width #main.site-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}



.mw-grid-item {
    background: #f9f9f9;
    border-radius: 8px;
    /* overflow: hidden; */ /* Rimosso per permettere al badge fondatore di essere visibile */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: center;
    position: relative; /* Necessario per posizionare il badge fondatore */
    /* Rimossi display: flex, flex-direction, align-items, justify-content per evitare conflitti con break-inside: avoid */
    opacity: 0; /* Inizialmente nascosto */
    transform: translateY(20px); /* Inizia leggermente sotto */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transizione per opacity e trasformazione */
}

.mw-grid-item.mw-grid-item-initial-load {
    opacity: 1;
    transform: translateY(0); /* Torna alla posizione originale */
}

.mw-item-inner {
    position: relative; /* Assicura che il badge sia posizionato correttamente rispetto all'inner item */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mw-founder-badge {
    position: absolute;
    top: 5px; /* Ridotto per rimpicciolire */
    right: 5px; /* Ridotto per rimpicciolire */
    background: linear-gradient(45deg, var(--founder-base-color, #8A2BE2), var(--founder-light-color, #A052EE)); /* Gradiente dinamico */
    color: #fff;
    padding: 2.5px 5px; /* Ridotto della metà */
    border-radius: 3px; /* Ridotto per proporzione */
    font-size: 0.4em; /* Ridotto della metà */
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Ridotto per proporzione */
    pointer-events: none; /* Non blocca i click sull'elemento sottostante */
    opacity: 0; /* Inizialmente nascosto */
    transition: opacity 0.3s ease-in-out; /* Transizione per il fade-in */
}

.mw-founder-badge.mw-founder-visible {
    opacity: 1; /* Rendi visibile */
}

.mw-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.mw-grid-item img.mw-image {
    visibility: hidden; /* Nasconde l'immagine ma mantiene il suo spazio (per prevenire reflow) */
    opacity: 0; /* Inizialmente opaca, la transizione verrà gestita dalla classe di reveal */
}

.mw-grid-item img.mw-image.mw-image-reveal {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* La transizione viene applicata solo quando la classe è presente */
}

.mw-grid-item img {
    max-width: 100%;
    width: 100%; /* Aggiunto per assicurare che l'immagine occupi tutto lo spazio */
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.mw-musician-quote-preview {
    position: absolute; /* Sovrapponi alla foto */
    bottom: 20px; /* Aumentato per lasciare più spazio tra il rettangolo e la cornice della foto */
    left: 10px; /* Distanza dal bordo sinistro dell'immagine */
    right: 10px; /* Distanza dal bordo destro dell'immagine */
    background-color: #f0f0f0; /* Grigio chiaro opaco */
    border-radius: 5px;
    padding: 2px 5px; /* Padding interno ulteriormente ridotto */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: left;
    color: #6b5e5e; /* Grigio più scuro/marroncino/beige */
    font-size: 0.65em; /* Testo ancora più piccolo */
    line-height: 1.1; /* Interlinea ancora più piccola */
    display: block; /* Assicura che white-space: nowrap funzioni */
    z-index: 5; /* Assicura che sia sopra l'immagine ma sotto il badge fondatore */
    opacity: 0; /* Inizialmente nascosto */
    transition: opacity 1s ease-in-out; /* Transizione per il fade-in di 1 secondo */
}

.mw-musician-quote-preview.mw-quote-visible {
    opacity: 1; /* Rendi visibile */
}

.mw-musician-quote-preview p {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Spostato qui */
    text-overflow: ellipsis; /* Spostato qui */
    white-space: nowrap; /* Spostato qui */
    display: block; /* Assicura che white-space: nowrap funzioni */
    max-width: 100%; /* Assicura che il testo rispetti la larghezza del genitore */
}

.mw-grid-item-name {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
    padding: 0 5px;
    word-break: break-word;
}

/* Stili per il pulsante "Carica Altri" */
.mw-load-more-button-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.mw-button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.8em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mw-button:hover:not(:disabled) {
    background-color: #005177;
}

.mw-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Le media query per il mosaico sono state spostate in musicians-wall.php */

/* Hero Section Popup Styles */
#mw-hero-popup-overlay {
    position: fixed; /* Ripristinato a fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999; /* Aumentato z-index */
    opacity: 1;
    visibility: visible;
    pointer-events: none; /* Impedisce all'overlay di intercettare i click */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, transform 0.5s ease-out, bottom 0.5s ease-out, right 0.5s ease-out, left 0.5s ease-out; /* Aggiungi transizione per fade out e trasformazioni */
}

#mw-hero-popup-overlay.mw-hero-fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Assicurati che non sia cliccabile quando svanisce */
}

#mw-hero-popup-overlay.mw-hero-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Nuova classe per la hero image rimpicciolita e posizionata */
#mw-hero-popup-overlay.mw-hero-minimized {
    transform: scale(0.35); /* Rimpicciolisci al 35% della dimensione originale */
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto; /* Assicurati che non ci siano conflitti con left: 0 */
    display: flex; /* Mantieni flex per centrare il contenuto all'interno dell'overlay rimpicciolito */
    align-items: center;
    justify-content: center;
    opacity: 1; /* Assicurati che sia visibile */
    visibility: visible;
    pointer-events: auto; /* Riabilita i click quando è rimpicciolito */
    z-index: 99999; /* Mantieni lo stesso z-index o aumentalo se necessario */
    transform-origin: bottom right; /* Origine della trasformazione in basso a destra */
}

/* Adatta il contenuto interno quando l'overlay è rimpicciolito */
#mw-hero-popup-overlay.mw-hero-minimized #mw-hero-popup-content {
    max-width: 100%; /* Permetti al contenuto di occupare tutta la larghezza disponibile nell'overlay rimpicciolito */
    width: 100%;
    max-height: 100%;
    padding: 0;
}

#mw-hero-popup-overlay.mw-hero-minimized .mw-hero-title-wrapper,
#mw-hero-popup-overlay.mw-hero-minimized #mw-hero-description {
    display: none; /* Nascondi titolo e descrizione quando l'immagine è rimpicciolita */
}

.mw-hero-popup-link {
    text-decoration: none;
    color: inherit;
    display: contents;
}

#mw-hero-popup-content {
    position: relative;
    background: transparent;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.mw-hero-title-wrapper {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px; /* Ripristinato il padding originale */
    border-radius: 10px;
    z-index: 10001;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    margin-top: 20px; /* Aggiunto margin-top per dare spazio sopra */
    margin-bottom: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: fit-content;
    transition: font-size 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin-bottom 0.3s ease, margin-top 0.3s ease; /* Aggiunto transition per margin-top */
}

#mw-hero-title {
    margin: 0;
    font-size: 2.5em; /* Diminuito il font-size */
    font-weight: bold;
    line-height: 1;
    padding-top: 10px; /* Aggiunto leggero padding sopra */
    transition: font-size 0.3s ease;
    pointer-events: auto;
}

#mw-hero-image {
    max-width: 100%;
    max-height: 400px; /* Altezza massima per desktop */
    object-fit: contain; /* Assicurati che l'immagine si adatti senza distorsioni */
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #fff;
    border: 2px solid #fff;
    padding: 8px;
    box-shadow: 0 100px 200px 100px rgba(0, 0, 0, 0.95);
    display: block;
    box-sizing: border-box;
    pointer-events: auto;
}

#mw-hero-description {
    margin: 15px 0 20px;
    font-size: 1.5em; /* Diminuito il font-size */
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 15px 10px 15px; /* Aggiunto leggero padding sotto */
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 1;
    line-height: 1;
    transition: font-size 0.3s ease, max-width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    pointer-events: auto;
    position: relative; /* Aggiunto per permettere z-index */
    z-index: 100002; /* Aumentato per essere sopra l'ombra dell'immagine */
}

/* Rimuovi sottolineatura dai link nella sezione hero */
#mw-hero-title a,
#mw-hero-description a {
    text-decoration: none;
    color: inherit;
}

/* Responsive adjustments for Hero Section */
@media (max-width: 1024px) {
    #mw-hero-popup-content {
        max-width: 700px;
        width: 90%;
    }
    #mw-hero-title {
        font-size: 2.4em;
        line-height: 1;
        white-space: normal;
    }
    #mw-hero-description {
        font-size: 1.5em;
        line-height: 1;
    }
}

@media (max-width: 768px) {
    #mw-hero-popup-content {
        max-width: 90%;
        max-height: 95vh; /* Aumentato per ricalcare la forma dello smartphone */
    }
    .mw-hero-title-wrapper {
        margin-bottom: 10px;
        padding: 8px 10px;
    }
    #mw-hero-title {
        font-size: 2em;
        line-height: 1;
        white-space: normal;
    }
    #mw-hero-image {
        margin-top: 0;
        max-height: 50vh;
    }
    #mw-hero-description {
        font-size: 1.4em;
        line-height: 1;
        margin: 10px 0 15px;
        padding: 6px 12px;
    }

    /* Posizionamento al centro per mobile quando rimpicciolito */
    #mw-hero-popup-overlay.mw-hero-minimized {
        left: 50%;
        right: auto;
        transform: translateX(-50%) scale(0.25);
        transform-origin: bottom center; /* Origine della trasformazione in basso al centro */
    }
}

@media (max-width: 480px) {
    #mw-hero-popup-content {
        width: 95%;
        max-height: 75vh;
        border-radius: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .mw-hero-title-wrapper {
        margin-bottom: 8px;
        padding: 5px;
        max-width: 100%;
    }
    #mw-hero-title {
        font-size: 1.2em;
        line-height: 1;
        white-space: normal;
    }
    #mw-hero-image {
        margin-top: 0;
        max-height: 40vh;
        border-radius: 8px;
    }
    #mw-hero-description {
        font-size: 1em;
        line-height: 1;
        margin: 8px 0 10px;
        padding: 4px 8px;
    }

    /* Posizionamento al centro per schermi molto piccoli quando rimpicciolito */
    #mw-hero-popup-overlay.mw-hero-minimized {
        left: 50%;
        right: auto;
        transform: translateX(-50%) scale(0.25);
        transform-origin: bottom center;
    }
}


/* Stili per l'emoji info sulla hero image */
.mw-hero-image-wrapper {
    position: relative;
    display: inline-block; /* Assicura che il wrapper si adatti all'immagine */
}

.mw-hero-info-icon {
    position: absolute;
    bottom: 10px; /* Distanza dal bordo inferiore */
    right: 10px; /* Spostato a destra */
    left: auto; /* Rimuovi il posizionamento a sinistra */
    font-size: 48px; /* Dimensione dell'emoji */
    color: white; /* Colore dell'emoji */
    background-color: transparent; /* Reso trasparente */
    border: 2px solid #8cafbf; /* Aggiunto bordo con il colore specificato */
    border-radius: 50%; /* Rende lo sfondo circolare */
    border: 4px solid #8cafbf; /* Raddoppiato lo spessore del bordo */
    width: 80px; /* Allargato ulteriormente */
    height: 80px; /* Allargato ulteriormente */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10; /* Assicura che sia sopra l'immagine */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
}

.mw-hero-info-icon span {
    line-height: 1; /* Allinea verticalmente l'emoji */
}

.mw-hero-pointer-icon {
    position: absolute;
    bottom: 10px; /* Stessa distanza dal bordo inferiore dell'info icon */
    right: 98px; /* Spostato più a sinistra per ridurre lo spazio con l'icona info */
    font-size: 70px; /* Ingrandita ulteriormente l'emoji */
    color: white;
    background-color: transparent;
    width: 110px; /* Ingrandito il contenitore */
    height: 110px; /* Ingrandito il contenitore */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    text-decoration: none;
    opacity: 0; /* Inizialmente nascosta */
    transform: rotate(20deg); /* Inclinata di 20 gradi in senso orario */
    animation: pointer-animation 2s ease-out 2s forwards, pointer-disappear 1s ease-in 9s forwards; /* Applica l'animazione di apparizione con un ritardo di 2 secondi e quella di scomparsa dopo 5 secondi dalla fine della prima */
}

@keyframes pointer-animation {
    0% {
        transform: translateX(-50px) rotate(20deg) rotateY(0deg) scale(0.5);
        opacity: 0;
    }
    25% {
        transform: translateX(20px) rotate(20deg) rotateY(180deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateX(-10px) rotate(20deg) rotateY(360deg) scale(1.2);
        opacity: 1;
    }
    75% {
        transform: translateX(5px) rotate(20deg) rotateY(360deg) scale(0.9);
    }
    100% {
        transform: translateX(0) rotate(20deg) rotateY(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes pointer-disappear {
    0% {
        transform: translateX(0) rotate(20deg) rotateY(360deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(50px) rotate(20deg) rotateY(0deg) scale(0.5);
        opacity: 0;
    }
}

.mw-hero-pointer-icon span {
    line-height: 1;
}

/* Stili per il badge fondatore nel popup */
.mw-popup-founder-badge {
    position: absolute;
    bottom: 5px; /* Posiziona in basso */
    left: 5px; /* Posiziona a 5px dal bordo sinistro dell'immagine */
    top: auto; /* Rimuovi il posizionamento in alto */
    right: auto; /* Rimuovi il posizionamento a destra */
    z-index: 100;
    pointer-events: auto; /* Permetti eventi del mouse sulle icone */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 4px; /* Ridotto lo spazio tra elementi */
}

.mw-popup-founder-badge-core {
    background: linear-gradient(45deg, var(--founder-base-color, #8A2BE2), var(--founder-light-color, #A052EE));
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.6em; /* Aumentato leggermente per uniformare */
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mw-popup-founder-badge.mw-founder-visible {
    opacity: 1; /* Rendi visibile */
}

/* Stili per le icone delle qualifiche nel popup */
.mw-popup-qualification-icon {
    width: 30px; /* Dimensione più grande per le icone */
    height: 30px;
    object-fit: contain;
    border-radius: 0;
    position: relative;
    cursor: pointer;
}

/* Tooltip custom per le icone delle qualifiche - Ora gestito via JavaScript */

/* Stili per il testo dei referral diretti nel popup */
.mw-popup-direct-referrals {
    font-size: 0.7em;
    font-weight: normal;
    color: #333;
    white-space: nowrap;
}

/* Stili per l'etichetta fondatore nel popup */
.mw-popup-founder-label {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

/* Stili per il pulsante CTA nel popup */
#mw-cta-button-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 5px; /* Ridotto il margin-top per dare più spazio al bottone */
    margin-bottom: 2px; /* Quasi niente padding sotto */
}

#mw-cta-button {
    display: inline-block;
    padding: 6px 10px; /* Meno padding interno */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap; /* Evita che il testo vada a capo */
    overflow: hidden; /* Nasconde il testo in eccesso */
    text-overflow: ellipsis; /* Aggiunge i puntini di sospensione se il testo è troppo lungo */
    max-width: 90%; /* Limita la larghezza massima del pulsante */
    box-sizing: border-box;
    font-size: 1.1em; /* Testo più grande */
}

#mw-cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Responsive adjustments for CTA button */
@media (max-width: 768px) {
    #mw-cta-button {
        padding: 6px 12px;
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    #mw-cta-button {
        padding: 5px 10px;
        max-width: 100%;
    }
}


/* Wall mini menu styles */
.mw-wall-mini-menu {
    position: fixed; /* Rende il menu "floating" */
    bottom: 5px;    /* Lo posiziona in basso */
    left: 50%;       /* Lo centra orizzontalmente */
    transform: translateX(-50%); /* Aggiusta il centraggio */
    background-color: transparent; /* Nessuno sfondo */
    padding: 2px 5px; /* Padding ridotto */
    border-radius: 20px;
    z-index: 999999;   /* Assicura che sia sopra gli altri elementi */
    /* Rimosso box-shadow per assenza di background */
}

.mw-wall-mini-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Allinea gli elementi in orizzontale */
    gap: 8px;     /* Spazio tra le voci di menu ridotto */
}

.mw-wall-mini-menu li {
    margin: 0;
    padding: 0;
}

.mw-wall-mini-menu a {
    color: #888 !important;             /* Testo grigio medio */
    text-decoration: underline;    /* Sottolineato per indicare un link */
    font-size: 0.7em;         /* Molto piccolo */
    white-space: nowrap;      /* Impedisce il wrapping del testo */
    padding: 2px 0; /* Padding ulteriormente ridotto */
    display: block; /* Rende cliccabile l'intera area */
}

.mw-wall-mini-menu a:hover,
.mw-wall-mini-menu a:focus {
    color: #00aaff !important; /* Colore al passaggio del mouse/focus */
}

/* Responsive adjustments for mini menu */
@media (max-width: 480px) {
    .mw-wall-mini-menu {
        padding: 1px 3px; /* Ridotto ulteriormente il padding per mobile */
    }

    .mw-wall-mini-menu ul {
        gap: 5px; /* Spazio ridotto per mobile */
    }

    .mw-wall-mini-menu a {
        font-size: 0.55em; /* Ancora più piccolo per schermi molto piccoli */
        padding: 1px 0; /* Padding ridotto per mobile */
    }

}
/* Stili per la sezione di cancellazione del profilo */
.mw-profile-deletion-section {
    background-color: #ffebeb; /* Sfondo rosso chiaro per indicare pericolo */
    border: 1px solid #ff0000; /* Bordo rosso più scuro */
    padding: 20px;
    margin-top: 30px;
    border-radius: 8px;
    text-align: center;
}

.mw-profile-deletion-section h3 {
    color: #ff0000; /* Testo rosso scuro */
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

.mw-profile-deletion-section h3 i {
    margin-right: 10px;
    font-size: 1.2em;
}

.mw-profile-deletion-section p strong {
    color: #cc0000; /* Rosso ancora più scuro per l'avviso */
    display: block;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.mw-profile-deletion-section hr {
    border: none;
    border-top: 2px solid #ff0000; /* Linea orizzontale rossa */
    margin: 20px auto;
    width: 80%;
}

.mw-delete-confirmation-section label {
    color: #333;
    font-size: 0.95em;
    margin-bottom: 10px;
    display: block;
}

.mw-delete-confirmation-section input[type="checkbox"] {
    margin-right: 5px;
}

.mw-profile-deletion-section .mw-delete-button {
    background-color: #ff0000; /* Pulsante rosso */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.mw-profile-deletion-section .mw-delete-button:hover:not(:disabled) {
    background-color: #cc0000; /* Rosso più scuro al passaggio del mouse */
}

.mw-profile-deletion-section .mw-delete-button:disabled {
    background-color: #ffaaaa; /* Rosso chiaro quando disabilitato */
    cursor: not-allowed;
}

.mw-profile-editor-wrapper {
    margin-right: 20px;
    margin-left: 20px;
}