/* ==========================================================================
   🧼 RESET DI FABBRICA E BLOCCO SCROLLBAR PARASSITE
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Blocca tassativamente lo scorrimento orizzontale */
    background-color: #1a1a1a !important; /* Sfondo grigio scuro */
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
    -ms-overflow-style: none !important;  
    scrollbar-width: none !important;     
}

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

a {
    text-decoration: none !important; /* Rimuove la sottolineatura da qualsiasi link */
}

/* ==========================================================================
   🖼️ GESTIONE IMMAGINE DI COPERTINA (COVER MAIN IMAGE)
   ========================================================================== */
.image-main {
    width: 100% !important;
    position: relative !important;
}

.main-cover-image {
    width: 100% !important;
    height: auto !important; /* L'altezza si calcola da sola proporzionalmente */
    display: block !important; 
}

/* ==========================================================================
   📦 MASTER CARD SUPERIORE (THE T4 PROFILE CONTAINER BLOCK)
   ========================================================================== */
.top-profile-card {
    background-color: #262626 !important; 
    /* 🎯 Convertito padding: 15px 20px in cqw proporzionali (15/360*100 = 4.1cqw) */
    padding: 4.1cqw 5.5cqw !important; 
    border-radius: 4.4cqw !important; /* Convertito 16px */
    box-shadow: 0 2.7cqw 6.9cqw rgba(0,0,0,0.3) !important; 
    
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    float: none !important;

    /* 📐 IMPOSTAZIONE LARGHEZZA E MARGINI ELASTICI CQW */
    margin-left: 2.7cqw !important;  /* 🎯 Convertito 10px in 2.7cqw per stabilità nella modal */
    margin-right: 2.7cqw !important; /* 🎯 Convertito 10px in 2.7cqw */
    width: 94.6cqw !important;       /* 100cqw meno i 5.4cqw totali di margine laterale */
    position: relative !important;
    z-index: 999 !important;
}

/* 🔝 LA RIGA SUPERIORE (FOTO A SINISTRA + BOTTONI A DESTRA) */
.top-profile-card .header-top-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-bottom: 1.1cqw !important; /* Convertito 4px */
}

/* Blocca l'avatar a sinistra senza float */
.top-profile-card .avatar-container {
    flex-shrink: 0 !important;
    margin: 0px !important;
}

/* ==========================================================================
   🛠️ CONTENITORE PULSANTI INTERNI (CARD ACTIONS SATELLITE)
   ========================================================================== */
.top-profile-card .card-actions-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6.5cqw !important; /* 🎯 Convertito 15px in cqw */
    position: static !important;
    margin: 0 !important;
    padding-left: 2.7cqw !important; /* Convertito 10px */
}

/* LO STILE UNIFICATO DEI MINI BOTTONI AZIONE DI SALVATAGGIO */
.action-mini-btn {
    background-color: #1a1a1a !important; 
    width: 15cqw !important;  /* 🎯 Convertito 36px in cqw (36 / 360 * 100) */
    height: 15cqw !important; /* 🎯 Convertito 36px in cqw */
    border-radius: 2.7cqw !important; /* Convertito 10px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1.1cqw 2.7cqw rgba(0,0,0,0.4) !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* Icona del tasto Salva (Discreta e bianca) */
.action-mini-btn i {
    font-size: 8cqw !important; /* 🎯 Convertito 5vw in 5cqw per blindarlo nell'iframe */
    color: #ffffff !important; 
}

/* Icona e stile del tasto Share (Arancione istituzionale T4) */
.action-mini-btn.btn-orange i {
    font-size: 5cqw !important; /* 🎯 Convertito 5vw in 5cqw */
    color: #ff6600 !important;
}

.action-mini-btn:active {
    transform: scale(0.92) !important;
    background-color: #333333 !important;
}

/* ==========================================================================
   📝 BLOCCO INTESTAZIONE IDENTITÀ NOME E RUOLO CENTRATO
   ========================================================================== */
.top-profile-card .name-role {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    float: none !important;
    margin-top: 3.4cqw !important; 
    padding: 1.4cqw !important; /* Convertito 5px */
}

.top-profile-card .main-name,
.top-profile-card .role {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

.top-profile-card .main-name {
    margin-top: 0px !important;
    margin-bottom: 2.2cqw !important; /* Convertito 8px in cqw */
}

.top-profile-card .role {
    margin-top: 5.4cqw !important; 
    margin-bottom: 0px !important;
}

/* Vecchie classi legacy di fallback per i testi */
.contact-label-name {
    font-size: 6cqw !important; /* 🎯 Convertito 6vw */
    font-weight: 500 !important;
    color: #ff6600 !important; 
    margin: 0px !important;
    line-height: 1.0 !important;
}

.contact-value-role {
    font-size: 4cqw !important; /* 🎯 Convertito 4vw */
    color: #ffffff !important; 
    margin: 1.1cqw 0 0 0 !important; /* Convertito 4px */
    line-height: 1.0 !important;
}

/* ==========================================================================
   🌍 INTEGRAZIONE LINGUA ARABA SPECULARE (RTL PRO-STABILITY)
   ========================================================================== */
[dir="rtl"] .top-profile-card .header-top-row {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .card-actions-wrapper {
    flex-direction: row-reverse !important; 
}

/* ==========================================================================
   🏢 LOGO AZIENDALE INFERIORE SECONDO PIANO
   ========================================================================== */
.company-logo {
    width: auto !important;
    height: 50cqw !important; /* 🎯 Convertito 180px in cqw (180 / 360 * 100) */
    object-fit: contain !important;
    max-width: 69.4cqw !important; /* 🎯 Convertito 250px in cqw (250 / 360 * 100) */
    padding: 2.7cqw !important; /* Convertito 10px */
}

        
/* ==========================================================================
   🧱 STRUTTURAZIONE FORZATA DELLE COLONNE GRIGLIA CONTATTI (T4 GRID)
   ========================================================================== */
.div-row-link .col-4{
    padding-left: 0.8cqw !important;  /* 🎯 Convertito 3px in cqw (3 / 360 * 100) */
    padding-right: 0.8cqw !important; /* 🎯 Convertito 3px in cqw */
    margin-bottom: 3.2cqw !important;  /* 🎯 Convertito 8px in cqw (8 / 360 * 100) */
}

/* 🧱 CONFIGURAZIONE DEI QUADRATINI (FORZATI A RESTARE QUADRATI 1:1 CON EFFETTO 3D) */
.div-row-link .bordered-div.div-rialzato {
    display: block !important;
    width: 28cqw !important; /* 🎯 Convertito 30vw in 30cqw per sigillarlo dentro la scocca */
    aspect-ratio: 1 / 1 !important; /* Forza la forma quadrata */
    border-radius: 3.8cqw !important;  /* 🎯 Convertito 14px in cqw (14 / 360 * 100) */
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* 🌟 BASE EFFETTO WOW: Doppia ombra per profondità (Convertita in cqw) */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0.8cqw 0.8cqw 2.2cqw rgba(0, 0, 0, 0.3), 
                -0.5cqw -0.5cqw 1.6cqw rgba(255, 255, 255, 0.05) !important;
                
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* 💡 EFFETTO AL TOCCO / HOVER */
.div-row-link .bordered-div.div-rialzato:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: <?php echo $coloreLink ?? 'rgba(255, 255, 255, 0.25)'; ?> !important; 
    
    /* Accentua le ombre esterne in modo proporzionale */
    box-shadow: 1.4cqw 1.4cqw 3.3cqw rgba(0, 0, 0, 0.4), 
                -0.8cqw -0.8cqw 2.2cqw rgba(255, 255, 255, 0.1) !important;
}

/* 🖱️ TOUCH / CLICK ATTIVO (Affondamento meccanico) */
.div-row-link .bordered-div.div-rialzato:active {
    transform: scale(0.95) !important; 
    box-shadow: inset 0.8cqw 0.8cqw 1.6cqw rgba(0, 0, 0, 0.5), 
                inset -0.5cqw -0.5cqw 1.4cqw rgba(255, 255, 255, 0.05) !important;
}

/* 🎯 CENTRATURA PERFETTA DI ICONA E TESTO INSIDE */
.div-row-link .bordered-div.div-rialzato a {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #ffffff !important;
    padding: 1.6cqw !important; /* Convertito 6px */
}

/* 📸 DIMENSIONE DELLE ICONE (Con animazione di pressione coordinata) */
.div-row-link .bordered-div.div-rialzato i {
    font-size: 6.5cqw !important; /* 🎯 Convertito 5.5vw in cqw */ 
    margin-bottom: 1.3cqw !important; /* Convertito 4px */
    margin-right: 0 !important;    
    margin-left: 0 !important;
    width: auto !important;        
    color: #ffffff !important; 
    transition: transform 0.15s ease-in-out !important;
}

.div-row-link .bordered-div.div-rialzato:active i {
    transform: scale(0.92) !important;
}

/* 📝 TESTO SOTTO L'ICONA */
.div-row-link .btn-label {
    font-size: 2.5cqw !important; /* 🎯 Convertito 2.5vw in cqw */
    margin-top: 1.3cqw !important; /* Convertito 4px */
    font-weight: 400 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 90% !important;
    text-align: center !important;
}

/* 🌍 COMPATIBILITÀ ARABO (RTL) */
[dir="rtl"] .div-row-link {
    flex-direction: row !important; 
}

/* ==========================================================================
   🎛️ SYSTEM BOTTOM FIXED TAB BAR (BARRA SOCIAL INFERIORE SCROLLABILE)
   ========================================================================== */
.bottom-tab-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #1a1a1a !important;
}

.bottom-tab-bar {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.4cqw 0 !important; /* Convertito 5px */
    overflow-x: auto !important;
    white-space: nowrap !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !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 in cqw */
    width: max-content !important;
    min-width: 100% !important;
    padding: 0 4.1cqw !important; /* 🎯 Convertito 15px in cqw */
    box-sizing: border-box !important;
}

/* 🟦 IL SINGOLO BOTTONE INFERIORE RIALZATO FLUIDO */
.social-btn-raised {
    width: 15cqw !important; /* 🎯 Convertito 18vw in 18cqw per rimpicciolirsi nella modal */
    aspect-ratio: 1 / 1 !important;     
    flex-shrink: 0 !important;
    background-color: #262626 !important;
    border-radius: 3.3cqw !important; /* Convertito 12px */
    padding: 2.7cqw 0 !important; /* Convertito 10px */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1.1cqw 2.7cqw rgba(0,0,0,0.3) !important;
}

.social-btn-raised i {
    font-size: 4cqw !important; /* 🎯 Convertito 5vw in cqw */
    color: #ffffff !important;
    margin-bottom: 1.1cqw !important; /* Convertito 4px */
}

.social-btn-raised span {
    font-size: 2.5cqw !important; /* 🎯 Convertito 3vw in cqw */
    
    color: #ff6600 !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !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;
}

/* ==========================================================================
   🏹 STRUTTURA E ANCORAGGIO FRECCE DI NAVIGAZIONE SOCIAL (JS SLIDER WALLS)
   ========================================================================== */
.nav-arrow-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12.5cqw !important; /* 🎯 Convertito 45px in cqw (45 / 360 * 100) per scalare con l'Iframe */
    display: flex !important;
    align-items: center !important;
    z-index: 10000 !important;
    pointer-events: none !important; 
    opacity: 0 !important; 
    transition: opacity 0.3s ease !important;
}

.left-arrow-wrapper {
    left: 0 !important;
    justify-content: flex-start !important;
    padding-left: 0.8cqw !important; /* Convertito 3px */
    background: transparent !important; 
}

.right-arrow-wrapper {
    right: 0 !important;
    justify-content: flex-end !important;
    padding-right: 0.8cqw !important; /* Convertito 3px */
    background: transparent !important; 
}

.nav-arrow-wrapper.visible {
    opacity: 0.8 !important;
    background: transparent !important;
}

/* ==========================================================================
   🏹 FRECCE REALI DI NAVIGAZIONE TAB BAR INFERIORE (JS ORIZZONTALE SLIDER)
   ========================================================================== */
.nav-arrow {
    width: 6.6cqw !important;   /* 🎯 Convertito 24px in cqw (24 / 360 * 100) */
    height: 6.6cqw !important;  /* 🎯 Convertito 24px in cqw */
    background-color: transparent !important; 
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2cqw !important; /* 🎯 Convertito 2vw in cqw */
    box-shadow: 0 0.5cqw 1.6cqw rgba(0,0,0,0.4) !important;
}

/* 🌍 Internazionalizzazione Speculare per Lingua Araba (RTL) */
[dir="rtl"] .social-buttons-row {
    display: flex !important;
    flex-direction: row-reverse !important; 
}

[dir="rtl"] .bottom-tab-container, 
[dir="rtl"] #bottomTabBar {
    direction: ltr !important;
}

/* ==========================================================================
   ↕️ CLASSI DI SPAZIATURA VERTICALE ELASTICA (SECTION SPACERS TO CQW)
   ========================================================================== */
.section-spacer-little {
    height: 0.8cqw !important; /* 🎯 Convertito 3px in cqw (3 / 360 * 100) */
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

.section-spacer {
    height: 9.7cqw !important; /* 🎯 Convertito 35px in cqw (35 / 360 * 100) */
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

.section-spacer-large {
    height: 25cqw !important; /* 🎯 Convertito 90px in cqw (90 / 360 * 100) per isolare visivamente il QR */
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

.margin10 { margin-top: 2.7cqw !important; } /* 10px */
.margin20 { margin-top: 5.5cqw !important; } /* 20px */
.margin30 { margin-top: 8.3cqw !important; } /* 30px */
.margin40 { margin-top: 11.1cqw !important; } /* 40px */
.margin50 { margin-top: 13.8cqw !important; } /* 50px */

/* ==========================================================================
   🗂️ PERSONALIZZAZIONE RIGIDA DARK ACCORDION BOOTSTRAP (T4 ACCORDION)
   ========================================================================== */
.custom-dark-accordion {
    width: 96% !important;
    margin: 0 auto !important;
}

.custom-dark-accordion .accordion-item {
    background-color: #262626 !important;
    border: 1px solid #333333 !important;
    margin-bottom: 2.7cqw !important; /* 🎯 Convertito 10px */
    border-radius: 3.3cqw !important;  /* 🎯 Convertito 12px */
    overflow: hidden !important;
}

.custom-dark-accordion .accordion-button {
    background-color: #262626 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding: 4.1cqw !important; /* 🎯 Convertito 15px in cqw (15 / 360 * 100) */
    font-size: 3.5cqw !important; /* 🎯 Convertito 3.5vw in cqw */
}

/* Icona della freccia arancione istituzionale T4 */
.custom-dark-accordion .accordion-button::after {
    filter: invert(51%) sepia(94%) saturate(2352%) hue-rotate(1deg) brightness(103%) contrast(105%) !important;
}

.custom-dark-accordion .accordion-button:not(.collapsed) {
    color: #ff6600 !important; 
    border-bottom: 0px solid #333333 !important;
}

.custom-dark-accordion .accordion-body {
    background-color: #1f1f1f !important;
    color: #dcdcdc !important;
    font-size: 3cqw !important; /* 🎯 Convertito 3vw in cqw */
    line-height: 1.5 !important;
}

/* 🖼️ ANTEPRIME FLUIDE GALLERIA FOTOGRAFICA */
.gallery-thumb {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 2.2cqw !important; /* 🎯 Convertito 8px */
    border: 1px solid #444444 !important;
    transition: transform 0.2s ease !important;
}
.gallery-thumb:hover {
    transform: scale(1.03) !important;
}

/* Supporto speculare per lingue RTL arabo nell'accordion */
[dir="rtl"] .custom-dark-accordion .accordion-button::after {
    margin-right: auto !important; 
    margin-left: 0 !important;     
}

[dir="rtl"] .custom-dark-accordion .accordion-button i.me-2 {
    margin-right: 0 !important;   
    margin-left: 2.2cqw !important;  /* 🎯 Convertito 8px */
    transform: scaleX(-1) !important; 
}

/* ==========================================================================
   📸 CORNICE FOTO PROFILO LIVE ANCORATA (AVATAR T4 CORE)
   ========================================================================== */
.avatar-container {
    width: 37cqw !important;  /* 🎯 Convertito 100px in cqw (100 / 360 * 100) */
    height: 37cqw !important; /* 🎯 Convertito 100px in cqw */
    flex-shrink: 0 !important;
    overflow: hidden !important; 
    position: relative !important;
    border: 0.5cqw solid #333333 !important; /* Convertito 2px */
    margin: 0 !important; 
    background-color: transparent !important; 
    box-sizing: border-box !important;
    padding: 0px !important; 
}

.avatar-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    object-position:  center !important;
    display: block !important;
}

.avatar-container.circular--portrait,
.avatar-container.circular--portrait img {
    border-radius: 50% !important;
}

.avatar-container.shape-square,
.avatar-container.shape-square img {
    border-radius: 3.3cqw !important; /* 🎯 Convertito 12px in cqw */
}

/* ==========================================================================
   🔳 CORNICE E CONFIGURAZIONE ELASTICA QR CODE (T4 FINALE)
   ========================================================================== */
.qr-section {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 9.7cqw !important;    /* 🎯 Convertito 35px in cqw */
    margin-bottom: 5cqw !important; /* 🎯 Convertito 35px in cqw */
    box-sizing: border-box !important;
}

.qr-container {
    background-color: #262626 !important; 
    padding: 3.3cqw !important; /* 🎯 Convertito 12px */
    border-radius: 4.4cqw !important; /* 🎯 Convertito 16px */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 3.3cqw !important; /* Convertito 12px */
}

.qrcode-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#qrcode-public {
    width: 66.6cqw !important;  /* 🎯 RISOLTO: Sradicato il vecchio 75vw e forzato a 66.6cqw (240px) */
    height: 66.6cqw !important; /* 🎯 Calcolato a 66.6cqw */
    max-width: 88.8cqw !important;  /* Tetto massimo in cqw corrispondente ai vecchi 320px */
    max-height: 88.8cqw !important; 
    background: transparent !important;
}

#qrcode-public canvas,
#qrcode-public img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 2.2cqw !important; /* Convertito 8px */
}

.qr-instruction {
    margin-top: 1.4cqw !important; /* Convertito 5px */
    text-align: center !important;
    background-color: transparent !important;
}

.qr-instruction span {
    font-size: 3.3cqw !important; /* 🎯 Convertito 0.85rem in cqw proporzionato */
    font-weight: 400 !important;
    color: #ff6600 !important;
    letter-spacing: 0.2cqw !important; /* Convertito 1px */
}


/*  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 */
}