/* ==========================================================================
   🧱 MASTER RESET: RIMOZIONE BARRE DI SCORRIMENTO VERTICALI ORFANE
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; 
    background-attachment: fixed !important;
}

body::-webkit-scrollbar {
    display: none !important; 
    width: 0 !important;
    height: 0 !important;
}

.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   🖼️ IMMAGINE DI COPERTINA CON ANGOLI SMUSSATI
   ========================================================================== */
.image-main {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

.image-main img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important; 
    object-fit: contain !important; 
    border-bottom-left-radius: 6.6cqw !important;  /* 🎯 Convertito 24px in cqw (24 / 360 * 100) */
    border-bottom-right-radius: 6.6cqw !important; /* 🎯 Convertito 24px in cqw */
}

.name-box-glossy-t8 {
    margin-top: 12.1cqw !important; 
}

.margin50 {
    margin-top: 13.8cqw !important; /* 🎯 Convertito 50px in cqw (50 / 360 * 100) */
}

/* ==========================================================================
   🔘 DISTANZIAMENTO E ALLINEAMENTO PULSANTI RAPIDI (VCARD E SHARE)
   ========================================================================== */
/* ==========================================================================
   🔘 RAGGIO BOTTONI RAPIDI INTERAMENTE RESPONSIVI (FIRST BUTTON ROW T8)
   ========================================================================== */
.first-button-row {
    display: flex !important;
    justify-content: center !important; /* Mantiene i pulsanti perfettamente centrati orizzontalmente */
    align-items: center !important;
    gap: 6.6cqw !important;             /* 🎯 Convertito 24px in cqw (24 / 360 * 100) */ 
    width: 100% !important;
    margin-top: 4.1cqw !important;      /* 🎯 Convertito 15px in cqw */
    margin-bottom: 4.1cqw !important;   /* 🎯 Convertito 15px in cqw */
    box-sizing: border-box !important;
}

/* Rimuove i margini residui dei tag di ancoraggio link */
.first-button-row a {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    text-decoration: none !important;
}

/* 🎯 STRUTTURA FLUIDA DELLE ICONE: Diventano sfere elastiche autoadattive! */
.first-button-row i.fas.fa-user-plus,
.first-button-row i.fas.fa-share-alt {
    display: flex !important;
    align-items: center !important;      /* Centratura verticale ferrea dell'icona interna */
    justify-content: center !important;   /* Centratura orizzontale ferrea dell'icona interna */
    text-align: center !important;
    border-radius: 50% !important;       /* Forza la forma a cerchio perfetto */
    
    /* 📐 Calibrazione diametro: passano a 12cqw per rimpicciolirsi nella modal onboarding */
    width: 12cqw !important;
    height: 12cqw !important;
    font-size: 5cqw !important;          /* Dimensione interna dell'omino o della freccia (5cqw) */
    line-height: 12cqw !important;        
    
    box-shadow: 0 1.1cqw 2.7cqw rgba(0, 0, 0, 0.15) !important; /* Ombra responsive in cqw */
    transition: transform 0.1s ease !important;
}

/* Effetto micro-pressione al tocco sul display del telefono */
.first-button-row a:active i {
    transform: scale(0.9) !important;
}


/* ==========================================================================
   📸 CONTENITORE AVATAR MASTER BOX (SIGILLATO ED ANTIDISTORSIONE)
   ========================================================================== */
.zoom-in-out-box {
    position: relative !important;
    display: block !important;
    
    /* 🎯 Sincronizzato a 43cqw a specchio degli stili dinamici per la centratura orizzontale */
    width: 43cqw !important;
    height: 43cqw !important;
    max-width: 43cqw !important;
    max-height: 43cqw !important;
    
    margin-left: auto !important;
    margin-right: auto !important;
    border: 0.8cqw solid rgba(255, 255, 255, 0.2) !important; /* Convertito 3px */
    box-shadow: 0 2.2cqw 6.6cqw rgba(0, 0, 0, 0.2) !important; /* Convertito 8px 24px */
    overflow: hidden !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
}

.zoom-in-out-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    object-position:  center !important;
    display: block !important;
}

.zoom-in-out-box.circular--portrait {
    border-radius: 50% !important;
}
.zoom-in-out-box.shape-square {
    border-radius: 4.4cqw !important; /* 🎯 Convertito 16px in cqw (16 / 360 * 100) */
}

/* ==========================================================================
   📞 ELENCO CONTATTI ESTESI (RIGHE VERTICALI GLOSSY BENTO STYLE)
   ========================================================================== */
.phones-mail-address-link {
    margin-top: 5.5cqw !important; /* 🎯 Convertito 20px in cqw */
    padding: 4.1cqw !important;     /* 🎯 Convertito 15px in cqw */
}

.phones-mail-address-link .bordered-div.div-rialzato {
    /* 🎯 RISOLTO: Sradicato il vecchio 96vw instabile che deforma l'onboarding e forzato 
       a 91.6cqw del guscio interno lasciando l'aria laterale simmetrica! */
    width: 91.6cqw !important;
    margin-bottom: 3.3cqw !important; /* 🎯 Convertito 12px in cqw */
    border-radius: 3.8cqw !important;  /* 🎯 Convertito 14px in cqw */
    padding: 3.3cqw 4.4cqw !important; /* 🎯 Convertito 12px 16px in cqw */
    box-sizing: border-box !important;

    
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 1.1cqw 4.1cqw rgba(0, 0, 0, 0.12) !important; /* Convertito 4px 15px */
    
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.phones-mail-address-link .bordered-div.div-rialzato:active {
    transform: scale(0.98) !important;
}


/* ==========================================================================
   🎯 APPLICAZIONE GLOBALE DEL LAYOUT SU TUTTI I CORPI BENTO CORRETTI (.bordered-div)
   ========================================================================== */

/* 1. Forza tutti i contenitori di testo a comportarsi come una riga Flex bilanciata */
.phones-mail-address-link .bordered-div .title,
.phones-mail-address-link .bordered-div .title-elipsis {
    display: flex !important;
    align-items: center !important;              /* Centra verticalmente icona e testo */
    justify-content: space-between !important;   /* Spinge l'icona a sinistra e l'after invisibile a destra */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Isola il primo span (Icona) assegnandogli una larghezza fissa */
.phones-mail-address-link .bordered-div .title > span:first-child,
.phones-mail-address-link .bordered-div .title-elipsis > span:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 8.3cqw !important;                     /* Dimensione bloccata per l'allineamento */
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Blocca la dimensione dell'icona Font Awesome indipendente dal font-size generale */
.phones-mail-address-link .bordered-div .title > span:first-child i,
.phones-mail-address-link .bordered-div .title-elipsis > span:first-child i {
    font-size: 5.5cqw !important; /* 🎯 Inserisci qui la misura fissa in cqw che preferisci per l'icona */
    line-height: 1 !important;  /* Evita scompensi di altezza */
}


/* 3. Isola il secondo span (Testo) e lo costringe a stare al centro geometrico */
.phones-mail-address-link .bordered-div .title > span:nth-child(2),
.phones-mail-address-link .bordered-div .title-elipsis > span:nth-child(2) {
    flex-grow: 1 !important;                      /* Prende tutto lo spazio centrale */
    text-align: center !important;                /* 🎯 CENTRA ORIZZONTALMENTE IL TESTO */
    margin: 0 !important;
    padding: 0 3cqw !important;                    /* Aria di sicurezza per non toccare l'icona */
    overflow: hidden !important;
    text-overflow: ellipsis !important;           /* Taglia i testi lunghi con i tre puntini (...) */
    white-space: nowrap !important;               /* Impedisce al testo di andare a capo */
}

/* 4. Il Bilanciatore: Genera un blocco vuoto a destra largo quanto l'icona a sinistra */
.phones-mail-address-link .bordered-div .title::after,
.phones-mail-address-link .bordered-div .title-elipsis::after {
    content: "" !important;
    width: 8.3cqw !important;                     /* Identico a span:first-child per simmetria perfetta */
    display: flex !important;
    flex-shrink: 0 !important;
}



/* ==========================================================================
   🔳 SEZIONE STRUTTURA E CONTROLLO DI APPARIZIONE MATRICE QR CODE (T8 FINALE)
   ========================================================================== */
.public-qrcode-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 8.3cqw !important;    /* 🎯 Convertito 30px in cqw */
    margin-bottom: 12.3cqw !important; /* 🎯 Convertito 30px in cqw */
    width: 100% !important;
    box-sizing: border-box !important;
}

#qrcodeTpl {
    padding: 5.5cqw !important; /* 🎯 Convertito 20px in cqw */
    border-radius: 5cqw !important; /* 🎯 Convertito 18px in cqw */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    text-align: center !important;
    box-shadow: 0 1.6cqw 6.6cqw rgba(0,0,0,0.12) !important; /* Convertito 6px 24px */
    display: inline-block !important;
}

#qrcodeTpl .scan-me {
    font-size: 3.2cqw !important; /* 🎯 Convertito 0.8rem in cqw */
    text-transform: uppercase !important;
    letter-spacing: 0.2cqw !important; /* Convertito 1px */
    margin-bottom: 3.3cqw !important; /* Convertito 12px */
}

.qrcode-wrapper {
    padding: 1.7cqw !important; /* 🎯 Convertito 10px in cqw */
    background: #ffffff !important; 
    border-radius: 2.1cqw !important; /* Convertito 12px */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 70cqw !important;  /* 🎯 Convertito max-width: 200px in cqw */
    max-height: 70cqw !important; /* 🎯 Convertito max-height: 200px in cqw */
    margin: 0 auto !important;
}

#qrcode-public, 
#qrcode-public canvas, 
#qrcode-public img {
    width: 100% !important;
    height: auto !important;
    max-width: 65cqw !important;  /* 🎯 Convertito 180px in cqw (180 / 360 * 100) */
    max-height: 65cqw !important; /* 🎯 Convertito 180px in cqw */
    display: block !important;
}

/* ==========================================================================
   🧱 CONFIGURAZIONE ACCORDION RESPONSIVO MODELLO T8
   ========================================================================== */
.myaccordion {
    padding: 0 !important;
    width: 100% !important; /* Forza il contenitore a occupare tutto lo spazio disponibile */
    box-sizing: border-box !important;
}

.myaccordion .card {
    /* 🎯 RISOLTO: Sradicato il vecchio 96vw instabile e forzato a 91.6cqw 
       per farlo entrare al millimetro senza sbavature laterali nell'onboarding */
    width: 96cqw !important; 
    
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4.4cqw !important; /* Convertito 16px */
    margin-bottom: 3.3cqw !important;  /* Convertito 12px */
    overflow: hidden !important;
    box-shadow: 0 1.1cqw 4.1cqw rgba(0, 0, 0, 0.1) !important; /* Convertito 4px 15px */
}

.myaccordion .card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.myaccordion .card-header button.btn-link {
    width: 100% !important;
    padding: 4.4cqw 5.5cqw !important; /* 🎯 Convertito 16px 20px */
    text-align: left !important;
    font-size: 4cqw !important; /* 🎯 Convertito 1rem in cqw proporzionato */
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.myaccordion .card-header button.btn-link:focus,
.myaccordion .card-header button.btn-link:hover {
    text-decoration: none !important;
    box-shadow: none !important;
}

.myaccordion .card_info .card-body {
    background: transparent !important;
    padding: 5.5cqw !important; /* Convertito 20px */
    font-size: 3.8cqw !important; /* Convertito 0.95rem */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.myaccordion .card_gallery .card-body {
    background: transparent !important;
    padding: 0cqw !important; /* Convertito 20px */
    font-size: 3.8cqw !important; /* Convertito 0.95rem */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.myaccordion .card_video .card-body {
    background: transparent !important;
    padding: 1.5cqw !important; /* Convertito 20px */
    font-size: 3.8cqw !important; /* Convertito 0.95rem */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.gallery-block.grid-gallery .item img {
    transition: transform 0.2s ease-in-out !important;
    box-shadow: 0 1.1cqw 2.7cqw rgba(0,0,0,0.15) !important;
}
.gallery-block.grid-gallery .item img:hover {
    transform: scale(1.02) !important;
}

/* 🏹 SPAZIATORE DI SICUREZZA PER NON FAR FINIRE I BLOCCHI SOTTO LA TAB BAR FISSA */
.section-spacer {
    height: 30.5cqw !important; /* 🎯 Convertito 110px in cqw (110 / 360 * 100) per perfetto respiro */
    width: 100% !important;
    display: block !important;
}

/* ==========================================================================
   🌐 SYSTEM GLOSSY FIXED TAB BAR (BARRA SOCIAL CRISTALLO INFERIORE T8)
   ========================================================================== */
.bottom-tab-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    
    background-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 -1.1cqw 6.9cqw rgba(0, 0, 0, 0.18) !important; /* Convertito -4px 25px */
    display: flex !important;
    align-items: center !important;
    height: 20.8cqw !important; /* 🎯 Convertito 75px in cqw (75 / 360 * 100) per altezza fluida simulatore */
    box-sizing: border-box !important;
}

.bottom-tab-bar {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.bottom-tab-bar::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}

.social-buttons-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3.3cqw !important; /* 🎯 Convertito 12px */
    width: max-content !important;
    min-width: 100% !important;
    padding: 0 13.8cqw !important; /* 🎯 Convertito 50px in cqw per non impattare sulle freccette */
    box-sizing: border-box !important;
}

/* Il singolo bottone social a cristallo 3D */
.social-btn-raised {
    width: 13.8cqw !important;  /* 🎯 Convertito 50px in cqw (50 / 360 * 100) */
    height: 13.8cqw !important; /* 🎯 Convertito 50px in cqw */
    flex-shrink: 0 !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 3.3cqw !important; /* Convertito 12px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1.1cqw 2.7cqw rgba(0,0,0,0.15) !important;
    text-decoration: none !important;
    transition: transform 0.1s ease !important;
}
.social-btn-raised:active {
    transform: scale(0.9) !important;
}

.social-btn-raised i {
    font-size: 4.8cqw !important; /* 🎯 Convertito 1.3rem in cqw proporzionato */
    color: #ffffff !important;
    display: block !important;
    margin: 0 !important;
}

.social-icon-clear {
    /* [FONDAMENTALE] Forza il browser a usare Font Awesome per questo elemento */
    font-family: "Font Awesome 6 Brands", "Font Awesome 7 Brands", "Font Awesome 6 Free", "Font Awesome 7 Free" !important;
    
    /* [FONDAMENTALE] I brand richiedono un peso specifico per essere renderizzati */
    font-weight: 400 !important; 
    
    /* Assicura che l'icona mantenga uno stile visivo corretto e pulito */
    font-style: normal !important;
    display: inline-block !important;
}


/* ==========================================================================
   🏹 ASOLA E CONTENITORI FRECCE INTEGRATI (JS SLIDER SHIELDS)
   ========================================================================== */
.nav-arrow-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12.5cqw !important; /* 🎯 Convertito 45px in cqw */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    pointer-events: none !important; 
    opacity: 0 !important; 
    transition: opacity 0.3s ease !important;
    background: transparent !important;
}

.left-arrow-wrapper { left: 0 !important; }
.right-arrow-wrapper { right: 0 !important; }

.nav-arrow-wrapper.visible {
    opacity: 1 !important;
}

/* Il cerchietto fisico della freccia a cristallo */
.nav-arrow {
    width: 7.7cqw !important;  /* 🎯 Convertito 28px in cqw (28 / 360 * 100) */
    height: 7.7cqw !important; /* 🎯 Convertito 28px in cqw */
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0.5cqw 2.2cqw rgba(0,0,0,0.2) !important; /* Convertito 2px 8px */
    pointer-events: auto !important; 
    cursor: pointer !important;
}

.nav-arrow-wrapper .nav-arrow i {
    font-size: 3.5cqw !important; /* 🎯 Convertito 0.9rem in cqw */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}


@media (min-width: 576px) {
    /* ... mantieni qui il codice del body configurato in precedenza ... */
    body {
        position: relative !important;
        margin: 0 auto !important;
        width: 530px !important;
        min-height: 100vh;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
        transform: translateZ(0); 
        container-type: inline-size !important;
    }

    /* 🎯 CORREZIONE CHIRURGICA CON GLI ID ESATTI */
    #public-user-name {
        /* Sostituisci il numero (es. 7) con la stessa cifra che usi attualmente per i tuoi vw */
        font-size: 7cqw !important; 
    }

    #public-user-role {
        /* Sostituisci il numero (es. 4.5) con la stessa cifra che usi attualmente per i tuoi vw */
        font-size: 4.5cqw !important; 
    }
}

/*  Per rimpicciolire le frecce detra e sinistra nella gallery di baguettebox */

/* 1. Fa trasparente il cerchio/blocco esterno delle frecce laterali */
#baguetteBox-overlay button#next-button,
#baguetteBox-overlay button#previous-button {
     
    background-color: transparent !important; 
}

/* 🎯 RIMPICCIOLISCE LA FRECCIA GRAFICA EFFETTIVA */
#baguetteBox-overlay .baguetteBox-button svg {
    /* Rimpicciolisce la freccia al 60% della sua dimensione originale */
    transform: scale(0.6) !important; 
    
    /* Assicura che la freccia rimanga centrata durante il rimpicciolimento */
    transform-origin: center !important; 
}

/* 🎯 AVVICINA LE FRECCE AI BORDI DELLA SCOCCA DELLO SMARTPHONE */

/* Spinge la freccia sinistra (Previous) verso il bordo sinistro */
#baguetteBox-overlay button#previous-button {
    left: -8px !important; /* Regola questo valore: 0px è il limite massimo attaccato al bordo */
}

/* Spinge la freccia destra (Next) verso il bordo destro */
#baguetteBox-overlay button#next-button {
    right: -8px !important; /* Regola questo valore: 0px è il limite massimo attaccato al bordo */
}