/* ==========================================================================
   🚫 RIMOZIONE COMPLETA DELLA BARRA DI SCORRIMENTO VERTICALE (VISIVA)
   ========================================================================== */

/* Regola universale per tutti i browser moderni (Chrome, Safari, Edge) */
html, body {
    scrollbar-width: none !important; /* Per Firefox */
    -ms-overflow-style: none !important;  /* Per vecchie versioni di Internet Explorer / Edge */
}

/* Per Google Chrome, Safari, Opera e l'Iframe della Dashboard */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important; /* Nasconde visivamente la barra */
    width: 0 !important;      /* Riduce a zero lo spazio occupato */
    height: 0 !important;
}


.main-name {
    margin-top: 3cqw;
    margin-bottom: 5cqw;
}

/* ==========================================
   1. STRUTTURA BASE E SMARTPHONE (Mobile First)
   ========================================== */

/* Container principale: impostato a 2 colonne per ottimizzare lo spazio su Mobile */
.bento-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
    padding: 12px;
    max-width: 800px;
    margin-bottom: 10cqw ;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   🖥️ LIMITAZIONE LARGHEZZA MASSIMA DESKTOP A 700PX (CENTRATO)
   ========================================================================== */

/* 1. Blocchiamo l'immagine di copertina */
.bento-main-image,
.image-main {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Blocchiamo la barra dei tre pulsanti superiori */
.bento-top-actions-bar {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Blocchiamo l'intero container dei cubotti Bento */
.bento-container {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Base Cubotti */
.bento-item {
    background-color: #1c1c1e;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Effetto Hover globale */
.bento-link:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    
}

/* Comportamento colonne su Smartphone: i blocchi grandi prendono 2 colonne (tutta la larghezza) */
.bento-main-image,
.bento-profile,
.bento-web,
.bento-qr,
.bento-address {
    grid-column: span 2;
}

/* ==========================================================================
   🔀 RIGHE DI CONTATTO AD ADATTAMENTO AUTOMATICO (NO BUCHI VUOTI)
   ========================================================================== */

/* Creiamo un super-contenitore fluido per i contatti corti */
.bento-contacts-flex-group {
    grid-column: span 2;        /* Occupa sempre tutta la larghezza del Bento */
    display: flex !important;
    flex-wrap: wrap !important; /* Permette ai cubotti di andare a capo se non c'è spazio */
    gap: 3cqw !important;       /* Mantiene lo stesso identico spazio del Bento */
    width: 100% !important;
}

/* Regola per i cubotti interni al gruppo fluido */
.bento-contacts-flex-group .bento-item {
    flex: 1 1 calc(50% - 1.5cqw) !important; /* Di base provano a stare al 50% (due per riga) */
    min-width: 40% !important;               /* Impedisce di rimpicciolirsi troppo */
}

/* 🎯 IL TRUCCO DELLO SPAZIO: Se un cubotto rimane da solo sulla sua riga, si allarga al 100% */
.bento-contacts-flex-group .bento-item:last-child:nth-child(odd) {
    flex: 1 1 100% !important;
}

/* Sganciamo i contatti corti dalle vecchie regole rigide di grid-column */
.bento-phone, 
.bento-mobile, 
.bento-email {
    grid-column: auto !important; 
}




/* ==========================================================================
   🚨 SPECIFICITÀ ASSOLUTA: RESET HOVER BLU E ATTIVAZIONE PRESSIONE (CLIC/TOCCO)
   ========================================================================== */

/* 1. Blocchiamo tassativamente qualsiasi cambio di colore all'hover sui link dei cubotti */
.bento-container a.bento-link:hover,
.bento-container a.bento-link:hover *,
.bento-container a.bento-link:focus,
.bento-container a.bento-link:focus * {
    text-decoration: none !important;
    
}


/* 3. EFFETTO COMPRESSIONE REALE AL CLIC (Stato :active tipo applicazione iOS) */
.bento-container a.bento-link:active {
    transform: scale(0.95) !important; /* Il cubotto si comprime visibilmente del 5% */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; /* Sfiata l'ombra simulando la pressione */
    transition: transform 0.04s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Risposta istantanea */
}

/* Al clic, forziamo il testo e le icone interne a non subire alterazioni cromatiche parassite */
.bento-container a.bento-link:active .bento-value,
.bento-container a.bento-link:active .bento-value *,
.bento-container a.bento-link:active .bento-icon i {
    opacity: 0.85 !important; /* Un micro-flash di opacità per simulare il tocco fisico */
}



/* ==========================================
   2. DETTAGLI DI STILE DEI SINGOLI BLOCCHI
   ========================================== */

.bento-main-image {
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    border-radius: 24px;
    padding: 3px;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   👤 LIBERAZIONE AVATAR PROFILO (SOVRAPPOSIZIONE MAIN SENZA TAGLI)
   ========================================================================== */

/* 1. Sblocchiamo i contenitori principali per permettere la fuoriuscita verso l'alto */
.bento-container {
    overflow: visible !important; /* 🎯 TASSATIVO: permette agli elementi interni di uscire dai bordi della griglia */
}

.bento-profile {
    overflow: visible !important; /* Permette all'immagine profilo di fluttuare oltre il cubotto */
    position: relative !important;
    z-index: 10 !important;       /* Posiziona il cubotto del profilo sopra il flusso standard */
}



/* 3. Assicuriamoci che l'immagine Main sia posizionata sotto l'avatar */
.image-main {
    position: relative !important;
    z-index: 1 !important;         /* Livello base, l'avatar al livello 9999 passerà sopra senza problemi */
}


.bento-main-image img {
    
    border-radius: 24px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: auto;
}
.image-main {
    width: 90% !important;
    
    border-radius: 6cqw !important;  /* Regola il valore per accentuare l'effetto */
    
    overflow: hidden !important;  
    margin: 0 auto;
    margin-top: 35px;
}



/* 1. Profilo */
.bento-profile {
    align-items: center !important;
    text-align: center !important;
    /* 🎯 IL FIX: Rimosso il linear-gradient fisso e forzata l'ereditarietà dello sfondo comune */
    background: #1c1c1e; !important; 
    background-color: #1c1c1e  !important; 
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}


.profile-img-wrapper img {
    width: 100% !important;        /* Lascia che segua la dimensione di .avatar-container */
    height: 100% !important;
    object-fit: cover !important;  /* 🌟 Forza cover anche qui */
    border: none !important;       /* Il bordo lo gestisce già .avatar-container, qui non serve */
    margin: 0 !important;
}

.bento-profile h2 { font-size: 1.4rem; margin: 4px 0; font-weight: 600; }
.bento-profile p { font-size: 0.9rem; color: #aeaea3; margin: 0; }


/* ==========================================================================
   🔄 NUOVA DISPOSIZIONE INTERNA APPLE CONTATTI STYLE (FLEXBOX)
   ========================================================================== */

/* Forza i cubotti di contatto ad allineare l'icona e i testi sulla stessa riga */
.bento-phone,
.bento-mobile,
.bento-web,
.bento-address,
.bento-email {
    flex-direction: row !important;      /* Mette l'icona a sinistra e il blocco testo a destra */
    align-items: center !important;       /* Centra verticalmente l'icona rispetto ai testi */
    justify-content: flex-start !important; /* Spinge tutto il contenuto verso sinistra */
    gap: 4cqw !important;                /* Spazio orizzontale fisso tra l'icona e l'inizio del testo */
}

/* Rimuove il vecchio margine inferiore dell'icona (che prima serviva per mandarla sopra) */
.bento-phone .bento-icon,
.bento-mobile .bento-icon,
.bento-web .bento-icon,
.bento-address .bento-icon,
.bento-email .bento-icon {
    margin-bottom: 0 !important;         /* Elimina lo spazio verticale residuo */
    flex-shrink: 0 !important;           /* Impedisce all'icona di rimpicciolirsi se il testo è lungo */
}

/* Forza la scatola del testo a svilupparsi in verticale (Titolo sopra, Valore sotto) */
.bento-content {
    display: flex !important;
    flex-direction: column !important;   /* Dispone la Label sopra e il Valore sotto */
    gap: 0.5cqw !important;              /* Spazio finissimo tra la scritta e il numero/url */
    text-align: left !important;         /* Allinea il testo rigorosamente a sinistra */
    width: 100% !important;
    overflow: hidden !important;         /* Evita che link lunghi spacchino la scatola */
}

/* Ottimizzazione visiva per i testi affiancati */
.bento-label {
    font-size: 2.8cqw !important;
    margin: 0 !important;
}

.bento-value {
    font-size: 3.8cqw !important;        /* Leggermente calibrato per non sovrapporsi su mobile */
    margin: 0 !important;
}


/* 5. Modulo QR Code */
.bento-qr {
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    color: #1c1c1e;
}

.qr-instruction span {
    font-size: 0.85rem;
    font-weight: 500;
    color: #8e8e93;
    text-align: center;
}

/* 7. Moduli Social Mini */
/* ==========================================================================
   🌐 SUPER-CONTENITORE FLUIDO SOCIAL (FORZATURA IN RIGA)
   ========================================================================== */

.bento-social-flex-group {
    grid-column: span 2 !important;  /* Forza l'estensione su tutta la griglia mobile */
    display: flex !important;        /* Attiva tassativamente il layout in riga */
    flex-direction: row !important;  /* Costringe gli elementi a stare uno di fianco all'altro */
    flex-wrap: wrap !important;      /* Permette di andare a capo se superano lo spazio della riga */
    gap: 3cqw !important;            /* Spazio preciso tra un cubotto e l'altro */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Regola per ogni singolo quadratino social interno al gruppo */
.bento-social-flex-group .bento-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;             /* Sgancia totalmente dalle vecchie regole grid */
    flex: 1 1 calc(50% - 1.5cqw) !important;  /* Forza la disposizione a coppie (due per riga) */
    min-width: 40% !important;                /* Impedisce che si rimpiccioliscano troppo */
    box-sizing: border-box !important;
}

/* 🎯 SE SONO DISPARI: L'ultimo si allarga al 100% per chiudere la griglia senza lasciare buchi */
.bento-social-flex-group .bento-social:last-child:nth-child(odd) {
    flex: 1 1 100% !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;
}



/* ==========================================================================
   ✨ HOVER PREMIUM DEI BRAND SUI SOCIAL (VINCE SULLA COLATA LIVE)
   ========================================================================== */
/* Definiamo la variabile di base ereditata da PHP al caricamento */
.bento-container {
    --bento-card-bg: <?php echo htmlspecialchars($design['bg_color_card'] ?? '#1c1c1e', ENT_QUOTES, 'UTF-8'); ?>;
}

/* Tutti i cubotti leggeranno lo sfondo da questa variabile */
.bento-container .bento-item {
    background: var(--bento-card-bg) !important;
    background-color: var(--bento-card-bg) !important;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* Il profilo eredita la stessa variabile di sfondo */
.bento-profile {
    background: var(--bento-card-bg) !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Il QR Code rimane tassativamente bianco */
.bento-container .bento-qr {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* L'hover del brand: Avendo liberato il CSS dagli stili in linea, questo vincerà SEMPRE */
.social-brand-hover:hover {
    background: var(--brand-bg) !important; 
    border-color: var(--brand-hover-border) !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
.social-brand-hover:hover i.social-icon-clear {
    color: transparent; !important;
}




/* Colore di base delle icone social ereditato dal pannello utente */
.bento-social i.social-icon-clear {
    color: <?php echo htmlspecialchars($coloreLink, ENT_QUOTES, 'UTF-8'); ?> !important;
    transition: color 0.2s ease-in-out !important;
}

/* ==========================================================================
   ✨ HOVER INTELLIGENTE - ILLUMINAZIONE BRAND PREMIUM
   ========================================================================== */
.social-brand-hover:hover {
    background: var(--brand-bg) !important;       /* Applica il colore o gradiente esatto del social */
    border-color: var(--brand-hover-border) !important;
    transform: scale(1.05) translateY(-2px) !important; /* Effetto micro-sollevamento iOS */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Quando il cubotto è in hover, l'icona interna diventa tassativamente bianca */
.social-brand-hover:hover i.social-icon-clear {
    
}



/* ==========================================
   4. ANIMAZIONI DI ENTRATA (FADE-IN CASCATA)
   ========================================== */
@keyframes bentoFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stato iniziale invisibile per i cubotti */
.bento-item {
    opacity: 0;
    animation: bentoFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ritardi sequenziali (Effetto Cascata) */
.bento-item:nth-child(1) { animation-delay: 0.1s; }
.bento-item:nth-child(2) { animation-delay: 0.18s; }
.bento-item:nth-child(3) { animation-delay: 0.26s; }
.bento-item:nth-child(4) { animation-delay: 0.34s; }
.bento-item:nth-child(5) { animation-delay: 0.42s; }
.bento-item:nth-child(6) { animation-delay: 0.50s; }
.bento-item:nth-child(7) { animation-delay: 0.58s; }
.bento-item:nth-child(8) { animation-delay: 0.64s; }
.bento-item:nth-child(9) { animation-delay: 0.70s; }
.bento-item:nth-child(10) { animation-delay: 0.76s; }
    
/* ==========================================================================
   📸 GESTIONE PROFILO AVATAR CORE (CENTRATURA ELASTICA T5)
   ========================================================================== */
.avatar-container {
    /* 🎯 RISOLTO: Sradicato il vecchio 50vw e normalizzato a 43cqw come l'asse degli altri modelli. 
       In questo modo l'avatar non sfonderà mai la scocca da 180px nell'onboarding */
    width: 43cqw !important;
    height: 43cqw !important;
    flex-shrink: 0 !important;
    overflow: hidden !important; 
    position: relative !important;
    border: 0.8cqw solid #ffffff !important; /* Convertito 3px */
    
    display: block !important;          
    margin-left: auto !important;       
    margin-right: auto !important;      
}

.avatar-container {
    position: relative !important; /* Rende attivo il controllo dello z-index */
    z-index: 9999 !important;      /* 👑 Forza l'avatar a stare sopra a QUALSIASI cosa (inclusa la .image-main) */
}
.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 .profile-img-t6 {
    border-radius: 50% !important;
}

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


/* Forza i link personalizzati aggiuntivi generati da JS a prendere l'intera riga nel gruppo flex */
.bento-contacts-flex-group .bento-custom-wide-link {
    flex: 1 1 100% !important; /* Occupa il 100% dello spazio orizzontale */
    width: 100% !important;
}

/* ==========================================================================
   ⚙️ STILE RIGA AZIONI SUPERIORE (MATEMATICAMENTE BILANCIATA - NO OVERFLOW)
   ========================================================================== */
.bento-top-actions-bar {
    display: flex !important;
    flex-direction: row !important;      /* Mantiene la linea orizzontale */
    justify-content: space-between !important;
    align-items: center !important;
    gap: 5.5cqw !important;              /* Spazio fisso tra i pulsanti (~20px) */
    width: 90% !important;               /* Contiene rigorosamente la barra nel 90% della pagina */
    margin-top: 12cqw !important;
    margin-bottom: 0cqw !important;
    box-sizing: border-box !important;   /* Include padding e bordi nel calcolo della larghezza */
}

/* Applichiamo la regola di spartizione fluida */
.bento-top-actions-bar .bento-top-btn {
    flex: 1 1 auto !important;           /* 🎯 GENIALE: Dice ai 3 pulsanti di dividersi equamente lo spazio AVANZATO dopo il gap */
    width: 25cqw !important;              /* Rimuove il 33.33% che causava l'overflow */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5cqw !important;
    padding: 3.5cqw 1cqw !important;
    background-color: transparent; !important;
    border: none !important;
    border-radius: 4cqw !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;      /* Impedisce al testo di andare a capo */
    box-shadow: none !important;
}

/* Forza i testi e le icone di tutti e tre i pulsanti, incluso il QR Code */
.bento-top-actions-bar .bento-top-btn i,
.bento-top-actions-bar .bento-top-btn span {
    color: <?php echo htmlspecialchars($coloreSfondo, ENT_QUOTES, 'UTF-8'); ?> !important;
    font-size: 5.5cqw !important;        /* Dimensione bilanciata per schermi mobile */
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Effetto Hover */
.bento-top-actions-bar .bento-top-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    opacity: 0.95 !important;
}





/* ==========================================================================
   🌐 SOCIAL FLUIDI A 3 PER RIGA
   ========================================================================== */
.bento-social-flex-group-three {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 3cqw !important;
    width: 100% !important;
}
.bento-social-flex-group-three .bento-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 calc(33.33% - 2cqw) !important; /* Forza la base iniziale al 33.33% */
    min-width: 28% !important;
    min-height: 16cqw !important;
}



/* ==========================================================================
   📸 CUBOTTI GALLERY A FILE DA 2 CON LIGHTBOX NATIVO
   ========================================================================== */
.bento-gallery-flex-group {
    grid-column: span 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3cqw !important;
    width: 100% !important;
    margin-top: 10cqw !important; 
    margin-bottom: 10cqw !important;          
}
.bento-gallery-item {
    flex: 1 1 calc(50% - 1.5cqw) !important; /* File da 2 su mobile */
    min-width: 45% !important;
    height: 35cqw !important;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}
/* Se l'elemento è l'ultimo ed è dispari (es: sono 3 o 5 foto), si allarga al 100% */
.bento-gallery-flex-group .bento-gallery-item:last-child:nth-child(odd) {
    flex: 1 1 100% !important;
}


/* 1. Gestione del contenitore del cubotto */
.bento-item.bento-gallery-item {
    background-color: #1a252f !important; /* Colore di sfondo visibile nei bordi vuoti */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 6px; /* 🌟 Cambia questo valore per decidere i pixel di margine interno */
}

/* 2. Regole per l'immagine interna */
.bento-item.bento-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🌟 Mantiene le proporzioni senza tagliare l'immagine */
    border-radius: 0px;   /* Opzionale: arrotonda leggermente gli angoli dell'immagine interna */
}



/* Bottone X di chiusura */
.bento-lightbox-close {
    display: none; /* Nascosto di base */
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
}
.bento-gallery-item.is-expanded .bento-lightbox-close {
    display: block; /* Visibile solo a schermo intero */
}

@keyframes bentoZoomIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   🎞️ STILE SLIDER INTERATTIVO MULTI-FOTO GLOBAL LIGHTBOX
   ========================================================================== */

.bento-global-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.95) !important; /* Sfondo scuro cinema */
    z-index: 9999999 !important; /* Sopra a qualunque elemento del sito */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

/* Stato attivo del Lightbox */
.bento-global-lightbox.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Contenitore dell'immagine per la massima stabilità */
.bento-slider-content {
    width: 85% !important;
    height: 80vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: bentoSliderZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bento-slider-content img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Preserva la proporzione verticale o orizzontale originale */
    border-radius: 24px !important; /* Un leggero arrotondamento anche a tutto schermo */
    box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
}

/* Pulsante X di Chiusura */
.bento-slider-close {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 28px !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    line-height: 38px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.bento-slider-close:hover { background: rgba(255, 255, 255, 0.3) !important; }

/* Freccette di Navigazione Destra / Sinistra */
.bento-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-size: 22px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s !important;
    user-select: none !important;
}
.bento-slider-arrow:hover { background: rgba(255, 255, 255, 0.25) !important; }

.arrow-left { left: 20px !important; }
.arrow-right { right: 20px !important; }

/* Animazione di ingresso morbida stile iOS */
@keyframes bentoSliderZoomIn {
    0% { transform: scale(0.96); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Ottimizzazione per smartphone stretti: nascondiamo o rimpiccioliamo leggermente le frecce per lasciare spazio alla foto */
@media (max-width: 480px) {
    .bento-slider-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .arrow-left { left: 10px !important; }
    .arrow-right { right: 10px !important; }
    .bento-slider-content { width: 90% !important; }
}

/* ==========================================================================
   🎞️ SLIDER BENTO CON CONTROLLI SOTTO LA FOTO (STILE APPLE MEDIA)
   ========================================================================== */

/* Sfondo oscurato totale */
.bento-global-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.96) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.bento-global-lightbox.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* La scatola verticale che tiene insieme Foto (Sopra) e Controlli (Sotto) */
.bento-slider-main-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90% !important;
    max-width: 650px; /* Non supera mai la larghezza della tua griglia da 700px */
    height: auto !important;
    gap: 4cqw !important; /* Spazio preciso tra la foto e la barra dei pulsanti */
}

/* Area dedicata all'immagine (Mantiene le proporzioni) */
.bento-slider-content {
    width: 100% !important;
    height: 65vh !important; /* Ridotto leggermente per lasciare spazio sicuro sotto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bento-slider-content img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6) !important;
}

/* ==========================================================================
   🕹️ STILE BARRA DEI CONTROLLI (SOTTO LA FOTO)
   ========================================================================== */
.bento-slider-controls-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8cqw !important; /* Distanza generosa tra i 3 tasti inferiori */
    background: rgba(255, 255, 255, 0.1) !important; /* Effetto vetro fumé */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 3cqw 8cqw !important;
    border-radius: 40px !important; /* Barra a pillola arrotondata stile iOS */
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Stile unico per i pulsanti interni alla barra (Indietro, Chiudi, Avanti) */
.bento-slider-control-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 5cqw !important; /* Dimensione proporzionata al tocco */
    width: 12cqw !important;
    height: 12cqw !important;
    max-width: 50px !important;
    max-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, opacity 0.2s !important;
    outline: none !important;
}

.bento-slider-control-btn i {
    color: #ffffff !important;
}

/* Feedback visivo alla pressione (Effetto molla) */
.bento-slider-control-btn:active {
    transform: scale(0.85) !important;
    opacity: 0.6 !important;
}

/* Colore speciale opzionale per il tasto di chiusura centrale */
.bento-slider-control-btn.close-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
}




/* ==========================================================================
   📺 CUBOTTI VIDEO DECORATIVI PREMIUM (YOUTUBE)
   ========================================================================== */

/* Il singolo blocco che contiene il video */
.bento-container .bento-video-block {
    grid-column: span 2 !important;  /* Occupa l'intera larghezza bento su smartphone */
    padding: 0 !important;           /* Azzerato per far aderire il player ai bordi curvi */
    background-color: #000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; /* Ombra profonda stile iOS cinema */
    border: 0px solid #000 !important;
    overflow: hidden !important;
}

/* La scatola Bootstrap per mantenere la proporzione 16:9 del video */
.bento-container .bento-video-block .ratio-16x9 {
    border-radius: 24px !important;  /* Smussatura angoli identica a tutti gli altri cubotti */
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

/* Forza l'iframe di YouTube a riempire la scatola senza sbordare */
.bento-container .bento-video-block .ratio-16x9 iframe {
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px;
    border-radius: 24px !important;  
}

/* --- CONFIGURAZIONE ADATTAMENTO DESKTOP / PC --- */
@media (min-width: 600px) {
    /* Su PC i video si affiancano a coppie (due per riga) per non diventare giganti */
    .bento-container .bento-video-block {
        grid-column: span 2 !important; /* Occupa mezza riga (2 colonne su 4 totali) */
    }
}






/* ==========================================================================
   🔳 STILE POPUP MODAL QR CODE - GLOSSY APPLE STYLE
   ========================================================================== */

/* Il contenitore principale della finestra */
.bento-qr-modal .modal-content {
    background: rgba(28, 28, 30, 0.75) !important; /* Sfondo scuro semi-trasparente */
    backdrop-filter: blur(20px) saturate(180%) !important; /* Effetto sfocatura vetro (Glossy) */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Bordino lucido finissimo */
    border-radius: 28px !important; /* Angoli molto arrotondati */
    padding: 6cqw !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Centratura assoluta del corpo interno alla modal */
.bento-qr-modal .qr-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* Il contenitore bianco del QR Code (Tassativo bianco per far leggere il codice alle fotocamere) */
.bento-qr-modal .qr-container {
    background-color: #ffffff !important;
    width: 90% !important; /* Largo il 90% della modal */
    aspect-ratio: 1 / 1 !important; /* Forza una forma perfettamente quadrata */
    padding: 5cqw !important;
    border-radius: 24px !important; /* Angoli arrotondati richiesti per il QR */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 5cqw !important; /* Spazio preciso prima della scritta sotto */
}

/* Forza gli elementi (img o canvas) generati da JavaScript a centrarsi e prendere tutto lo spazio */
.bento-qr-modal #qrcode-public {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bento-qr-modal #qrcode-public img,
.bento-qr-modal #qrcode-public canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important; /* Arrotonda leggermente anche gli angoli del codice pixelato stesso */
}

/* 🌟 STILE DELLA SCRITTA INFERIORE "SCAN ME" */
.bento-qr-modal .qr-instruction {
    margin: 0 !important;
    padding: 0 !important;
}

.bento-qr-modal .qr-instruction span {
    color: <?php echo htmlspecialchars($coloreTesto ?? '#ffffff', ENT_QUOTES, 'UTF-8'); ?> !important; /* Eredita il colore testo impostato dall'utente */
    font-size: 4.2cqw !important;
    font-weight: 600 !important;
    letter-spacing: 0.1cqw !important;
    text-transform: uppercase; /* Rende la scritta in maiuscolo per uno stile più deciso */
    opacity: 0.9 !important;
}


/* ==========================================================================
   📝 CUBOTTO BIOGRAFIA A TENDINA ERGONOMICA (RISPARMIO SPAZIO VERTICALE)
   ========================================================================== */

/* ==========================================================================
   📝 CUBOTTO BIOGRAFIA AD APERTURA FLUIDA ULTRA-SOFT
   ========================================================================== */
.bento-about-block {
    grid-column: span 2 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* La striscia del pulsante sempre visibile */
.bento-about-trigger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5cqw !important;
    cursor: pointer !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bento-icon-title { display: flex !important; gap: 4cqw !important; align-items: center !important; padding: 4.5cqw !important; }
.bento-icon-title i { color: <?php echo htmlspecialchars($coloreLink, ENT_QUOTES, 'UTF-8'); ?> !important; font-size: 4.5cqw !important; }

/* Freccetta Apple */
.bento-about-arrow i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 3.5cqw !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Quando il cubotto riceve la classe .is-open, giriamo la freccia */
.bento-about-block.is-open .bento-about-arrow i {
    transform: rotate(180deg) !important;
}

/* 🎯 IL SEGRETO DELLA TRANSIZIONE: Di base l'altezza massima è zero e tutto è nascosto */
.bento-about-content-wrapper {
    max-height: 0;
    overflow: hidden;
    /* Gestisci qui il tempo reale (es: 0.4s o 0.5s è la velocità perfetta stile Apple) */
    transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important; 
    width: 100% !important;
}

/* Il testo interno riceve il suo spazio */
.bento-about-content {
    padding: 0 5cqw 5cqw 5cqw !important;
    box-sizing: border-box !important;
}

.bento-about-text {
    font-size: 3.8cqw !important;
    line-height: 1.6 !important;
    text-align: left !important;
    color: <?php echo htmlspecialchars($coloreTesto, ENT_QUOTES, 'UTF-8'); ?> !important;
}