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

body {
    background-image: url('sfondo-vetro.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; 
}

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

.main-app-layout {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.margin5 {
    height: 5cqw !important; 
    width: 100% !important; 
    display: block !important; 
    clear: both !important;
}

.margin10 {
    height: 10cqw !important; 
    width: 100% !important; 
    display: block !important; 
    clear: both !important;
}

.margin15 {
    height: 15cqw !important; 
    width: 100% !important; 
    display: block !important; 
    clear: both !important;
}

.margin20 {
    height: 20cqw !important; 
    width: 100% !important; 
    display: block !important; 
    clear: both !important;
}

.margin25 {
    height: 25cqw !important; 
    width: 100% !important; 
    display: block !important; 
    clear: both !important;
}

/* ==========================================================================
   🌐 SELETTORE LINGUE CON EFFETTO FADE-DOWN VETRO SFOCATO (T10)
   ========================================================================== */
.lang-dropdown {
    position: relative !important;
    display: inline-block !important;
}

.lang-dropdown-content {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -2.7cqw) !important; /* 🎯 Convertito -10px in cqw (10 / 360 * 100) */
    opacity: 0 !important;
    visibility: hidden !important;
    width: 11.1cqw !important; /* 🎯 Convertito width: 40px in cqw (40 / 360 * 100) */
    min-width: 11.1cqw !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 1.1cqw 3.3cqw rgba(0, 0, 0, 0.15) !important; /* Convertito ombra 4px 12px */
    border-radius: 3.3cqw !important; /* Convertito 12px */
    z-index: 100000 !important;
    margin-top: 1.6cqw !important; /* Convertito 6px */
    padding: 1.1cqw 0 !important;  /* Convertito 4px */
    box-sizing: border-box !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
}

.lang-dropdown-content.show-lang {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

.lang-dropdown-content a {
    color: inherit !important;
    padding: 2.2cqw 0 !important; /* Convertito 8px */
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    transition: background-color 0.2s ease !important;
}

.lang-dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2.2cqw !important; /* Convertito 8px */
}

/* ==========================================================================
   🧱 STRUTTURA TESTATA PROFILO COMPATTA (MODELLO T10)
   ========================================================================== */
.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 */
}

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

/* 🖼️ SCATOLA FOTO PROFILO TRIDIMENSIONALE */
.zoom-in-out-box {
    position: relative !important;
    display: block !important;
    
    /* 🎯 RISOLTO: Sradicato il vecchio 50vw instabile che deforma l'onboarding 
       e unificato a 43cqw per centratura ed impatto ottimale */
    width: 43cqw !important;
    height: 43cqw !important;
    max-width: 43cqw !important;
    max-height: 43cqw !important;
    
    margin: 4.1cqw auto 0 auto !important; /* 🎯 Convertito 15px in cqw (15 / 360 * 100) */
    border: 0.8cqw solid rgba(255, 255, 255, 0.2) !important; /* Convertito 3px */
    box-shadow: 0 1.6cqw 5.5cqw rgba(0, 0, 0, 0.15) !important; /* Convertito 6px 20px */
    overflow: hidden !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
}

.zoom-in-out-box.circular--portrait,
.zoom-in-out-box.circular--portrait img { 
    border-radius: 50% !important; 
}

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

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

/* 📝 TESTI DELL'INTESTAZIONE */
.main-name h1 {
    font-size: 6.2cqw !important; /* 🎯 Convertito 1.4rem in cqw proporzionato (22px / 360 * 100) */
    font-weight: 700 !important;
    margin-bottom: 3.0cqw !important; /* Convertito 2px */
    letter-spacing: -0.08cqw !important; /* Convertito -0.3px */
}

.main-name .role-t10-color {
    font-size: 4.1cqw !important; /* 🎯 Convertito 0.95rem in cqw proporzionato (15px / 360 * 100) */
    font-weight: 500 !important;
    opacity: 0.85 !important;
    margin-bottom: 3.8cqw !important; /* Convertito 5px */
}

/* 🧱 CORNICE BENTO INFOTEXT SUPERIORE */
.name-box-glossy-t10 {
    /* 🎯 RISOLTO: Sradicato il vecchio 96vw instabile e forzato a 91.6cqw 
       per farlo entrare al millimetro senza sbavature laterali nell'onboarding */
    width: 91.6cqw !important; 
    
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 3cqw !important;
    margin-bottom: 0cqw !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.12) !important;
    border-radius: 5cqw !important; /* 🎯 Convertito 18px in cqw (18 / 360 * 100) */
    padding: 0.8cqw !important; /* Convertito 3px */
    box-shadow: 0 1.1cqw 4.1cqw rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
}
/* ==========================================================================
   🧱 ACCORDION AD APP CON COMPATTEZZA CENTRATA IN CQW (MODELLO T10)
   ========================================================================== */
.myaccordion {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 5.5cqw !important; /* 🎯 Convertito 20px in cqw (20 / 360 * 100) */
}

.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;
    margin-bottom: 2.7cqw !important; /* Convertito 10px */
    overflow: hidden !important;
    
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4.4cqw !important; /* Convertito 16px */
    box-shadow: 0 1.1cqw 4.1cqw rgba(0, 0, 0, 0.08) !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 5cqw !important; /* 🎯 Convertito 16px 18px */
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 4.5cqw !important; /* 🎯 Convertito 1rem in cqw proporzionato */
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
}

.myaccordion .card-header button.btn-link:focus {
    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;
}


/* ==========================================================================
   📞 COMPATTEZZA DELLE RIGHE CONTATTO STILE MENU IPHONE (T10 BENTO INNER)
   ========================================================================== */
.t10-internal-contacts {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.2cqw !important; /* 🎯 Convertito 8px in cqw */
    width: 100% !important;
}

.t10-internal-contacts .app-style-row {
    display: flex !important;
    align-items: center !important;
    padding: 3.3cqw 3.8cqw !important; /* 🎯 Convertito 12px 14px */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 3.3cqw !important; /* Convertito 12px */
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.2s, transform 0.1s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.t10-internal-contacts .app-style-row:active { 
    background: rgba(255, 255, 255, 0.08) !important; 
    transform: scale(0.99) !important;
}

.t10-internal-contacts .app-style-row span { 
    margin-right: 3.8cqw !important; /* Convertito 14px */
    font-size: 5.5cqw !important;    /* 🎯 Convertito 1.15rem in cqw */
    display: inline-flex !important; 
    align-items: center !important; 
}

.t10-internal-contacts .app-style-row .title,
.t10-internal-contacts .app-style-row .title-elipsis { 
    font-weight: 500 !important; 
    font-size: 4.2cqw !important; /* 🎯 Convertito 0.92rem in cqw */
    white-space: normal !important; 
    text-overflow: ellipsis !important; 
    margin: 0 !important;
}

/* ==========================================================================
   🌐 SOCIAL INTERMEDI, BARRA RIBASSATA E POP-UP MODAL (T10 FINALE)
   ========================================================================== */
.public-social-container-t10 {
    padding: 0 !important;
    margin: 5.5cqw 0 4.1cqw 0 !important; /* 🎯 Convertito 20px 0 15px 0 */
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important; 
}

.social-box-glossy-t10 {
    width: 91.6cqw !important; /* 🎯 Allineato a 91.6cqw di larghezza bento stabile per l'onboarding */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !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.12) !important;
    border-radius: 5cqw !important; /* Convertito 18px */
    padding: 4.4cqw 3.3cqw !important; /* Convertito 16px 12px */
    box-shadow: 0 1.1cqw 4.1cqw rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
}

.social-row-grid-t10 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3.3cqw !important; /* Convertito 12px */
    width: 100% !important;
}

.scritta-social {
    font-weight: 600 !important;
    font-size: 3.4cqw !important; /* 🎯 Convertito 0.85rem */
    text-transform: uppercase !important;
    letter-spacing: 0.1cqw !important; /* Convertito 0.5px */
    opacity: 0.8 !important;
}

.t10-social-inline-btn {
    width: 10cqw !important;   /* 🎯 Convertito 36px in cqw (36 / 360 * 100) */
    height: 10cqw !important;
    min-width: 10cqw !important;
    min-height: 10cqw !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: transform 0.1s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.t10-social-inline-btn:active { 
    transform: scale(0.9) !important; 
}

.t10-social-inline-btn i { 
    font-size: 4cqw !important; /* 🎯 Convertito 1rem */
    margin: 0 !important; 
    padding: 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;
}

/* 🎛️ La barra inferiore a nastro ribassato (Master Glossy Nav) */
.t10-control-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    height: 8.8cqw !important; /* 🎯 Convertito 32px in cqw (32 / 360 * 100) fluida simulatore */
    background-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: none !important; 
    box-shadow: 0 -1.1cqw 6.9cqw rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.t10-action-row {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 111.1cqw !important; /* 🎯 Convertito max-width: 400px in cqw */
    margin: 0 auto !important;
    padding: 0 4.1cqw !important; /* Convertito 15px */
    position: relative !important;
}

/* ==========================================================================
   🏹 PULSANTI CERCHIATI CHE SPUNTANO A METÀ FUORI DAL NASTRO (T10 OVERLAPPING)
   ========================================================================== */
.t10-control-btn {
    width: 12.7cqw !important;  /* 🎯 Convertito 46px in cqw (46 / 360 * 100) */
    height: 12.7cqw !important; /* 🎯 Convertito 46px in cqw */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 1.1cqw 3.3cqw rgba(0,0,0,0.15) !important; /* Convertito 4px 12px */
    
    /* 🎯 IL TRUCCO: Spinge il bottone verso l'alto in modo proporzionale in cqw (3.8cqw corrispondono ai vecchi -14px) */
    transform: translateY(-3.8cqw) !important; 
    z-index: 10000 !important;
    transition: transform 0.1s ease, background 0.2s !important;
}

.t10-control-btn:active { 
    transform: translateY(-3.8cqw) scale(0.9) !important; 
}

.t10-control-btn i { 
    font-size: 5cqw !important; /* 🎯 Convertito 1.25rem in cqw reattivo */
    margin: 0 !important; 
    padding: 0 !important; 
}

/* ==========================================================================
   🔳 SCHERMATA POP-UP (MODAL WINDOW) DEL QR CODE SUL SITO T10
   ========================================================================== */
.t10-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important; 
    backdrop-filter: blur(8px) !important; 
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100000 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease !important;
}

.t10-modal-overlay.open { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
}

.t10-modal-content {
    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.2) !important;
    padding: 6.6cqw !important; /* 🎯 Convertito 24px in cqw (24 / 360 * 100) */
    border-radius: 6.6cqw !important; /* 🎯 Convertito 24px in cqw */
    box-shadow: 0 5.5cqw 13.8cqw rgba(0,0,0,0.3) !important; /* Convertito ombra 20px 50px */
    position: relative !important;
    max-width: 94cqw !important; /* 🎯 Convertito max-width: 280px in cqw (280 / 360 * 100) */
    width: 94% !important;
    transform: scale(0.85) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-align: center !important;
}

.t10-modal-overlay.open .t10-modal-content { 
    transform: scale(1) !important; 
}

.t10-modal-close {
    position: absolute !important; 
    top: 1.6cqw !important;   /* 🎯 Convertito 6px in cqw */
    right: 3.8cqw !important;  /* 🎯 Convertito 14px in cqw */
    font-size: 5.5cqw !important; /* 🎯 Convertito 1.6rem in cqw */
    color: rgba(255, 255, 255, 0.7) !important; 
    text-decoration: none !important; 
    cursor: pointer !important;
}
.t10-modal-close:hover { 
    color: #ffffff !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 */
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2cqw !important; /* Convertito 1px */
    margin-bottom: 3.3cqw !important; /* Convertito 12px */
}

.qrcode-wrapper {
    padding: 2.7cqw !important; /* 🎯 Convertito 10px in cqw */
    background: #ffffff !important; 
    border-radius: 3.3cqw !important; /* Convertito 12px */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 90cqw !important;  /* 🎯 Convertito max-width: 200px in cqw */
    max-height: 90cqw !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: 96cqw !important;  /* 🎯 Convertito 180px in cqw (180 / 360 * 100) */
    max-height: 96cqw !important; /* 🎯 Convertito 180px in cqw */
    display: block !important;
}


/* 🏹 CUSCINETTO DI RESPIRO IN FONDO ALLA PAGINA SOPRA LA NAV-BAR FISSA */
.section-spacer { 
    height: 13.8cqw !important; /* 🎯 Convertito 50px in cqw (50 / 360 * 100) */
    display: block !important; 
    width: 100% !important; 
}

/* ==========================================================================
   🧼 RESET FINALE: DEPURAZIONE DA INTERFERENZE DI TRASCINAMENTO (BOOTSTRAP)
   ========================================================================== */
.t10-control-btn, 
.t10-social-inline-btn, 
.app-style-row {
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

.t10-control-bar i, 
.social-row-grid-t10 i, 
.app-style-row i {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !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 */
}