.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #6822ff12 !important;
    border: none!important;
    border-radius: 10px!important;
}

/* Stili per le notifiche personalizzate */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    min-width: 300px;
    padding: 0;
    z-index: 111111111;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.custom-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-content {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
}

.notification-icon {
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-message {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.4;
    padding-right: 10px;
}

.notification-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 0;
    margin-left: 10px;
    flex-shrink: 0;
}

.notification-close:hover {
    opacity: 1;
}

.notification-success {
    background-color: #e7f8ef;
    color: #0a6245;
    border-left: 4px solid #1ab76c;
}

.notification-error {
    background-color: #ffeaea;
    color: #8a1f1f;
    border-left: 4px solid #e74c3c;
}

.notification-warning {
    background-color: #fff8e6;
    color: #9a6d19;
    border-left: 4px solid #f39c12;
}

.notification-error-list {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 14px;
}

.notification-error-list li {
    margin-bottom: 5px;
}

.share-modal {
    display: flex; /* Correzione: Inizializza con display: block */
	gap:12px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%); /* Nascondi inizialmente la finestra */
}

.share-modal.show {
    transform: translateY(0); /* Mostra la finestra animandola dal basso */
	    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.share-button,
.close-share-modal {
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

button.share-button img {
    width: 30px;
    opacity: .8;
}

.ex {
    /* width: 30px; */
    /* height: 30px; */
    /* background: #f1f1f1; */
    /* border-radius: 100%; */
}

.progress{
	height:.6rem;
}

.progress-bars{
background: linear-gradient(45deg, #6822ff, #a881fd);
}


/*MESSAGGI*/
.message {
    position: fixed;
    z-index: 1;
    width: 100%;
    min-height: 68px;
    top:68px;
    left: 0px;
    padding: 32px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message-error {
    background: linear-gradient(269deg, #6822ff, #4917b5);
    color: #f8f8f8;
    border: none;
}

.message-close {
    cursor: pointer;
    color: #fff;
}

.creaPostInput{
    transition:.3s;
    height:40px;
    border-radius:32px!important;
    resize:none;
}

.creaPostInput:focus{
    height:82px;
    box-shadow:0px 0px 62px #6822ff;
    transition:.3s;
    border-radius:8px!important;
    word-break:break-all;
}

.creaPostInput::placeholder {
    color: #888888; /* Colore del testo */
    font-size: 14px; /* Dimensione del testo */
    padding-left:2px;
}

/* Supporto per browser diversi */
.creaPostInput::-webkit-input-placeholder {
    color: #888888;
    font-size: 14px;
    padding-left:2px;
}

.creaPostInput::-moz-placeholder {
    color: #888888;
    font-size: 14px;
    opacity: 1; /* Opacità per Firefox */
    padding-left:2px;
}

.creaPostInput::-ms-input-placeholder {
    color: #888888;
    font-size: 14px;
    padding-left:2px;
}

/* Stile del contenitore principale della tendina */
#emoji-dropdown.dropdown-menu {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 12px;
  width: fit-content;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  z-index: 1000;
  margin-top: 10px;
}

/* Stile degli span delle emoji */
#emoji-dropdown.dropdown-menu span {
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: transform 0.15s ease, background 0.15s ease;
  border-radius: 4px;
  user-select: none;
}

/* Effetto hover */
#emoji-dropdown.dropdown-menu span:hover {
  transform: scale(1.15);
  background: #f0f0f0;
}

/* Stile personalizzato per la scrollbar */
#emoji-dropdown.dropdown-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#emoji-dropdown.dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#emoji-dropdown.dropdown-menu::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

#emoji-dropdown.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Per Firefox */
#emoji-dropdown.dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Stile per il menu personalizzato */
.custom-font-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-font-dropdown-button {
    text-align: left;
    border-radius: 4px;
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-font-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-font-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.custom-font-dropdown-item:hover {
    background-color: #f8f9fa;
}	

.healthBullet {
    position: absolute;
    margin-top: -13px;
    margin-left: -5px;
    border: 3px solid #fff;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8BC34A, #96fd1f);
    display: block;
}

/* Stile per le anteprime colori */
.color-preview {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Per i gradienti nei cerchietti */
.color-preview[style*="gradient"] {
    position: relative;
    overflow: hidden;
}

.color-preview[style*="gradient"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
}

.gradient-window{
max-height: 142px;
    overflow-y: auto;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 16px;
}

.gradient-window::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

.gradient-window::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.gradient-window::-webkit-scrollbar-thumb {
  background: #673ab766;
  border-radius: 10px;
}

.gradient-window::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}


.preset-bg-window{
max-height: 142px;
    overflow-y: auto;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 16px;
}

.preset-bg-window::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

.preset-bg-window::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.preset-bg-window::-webkit-scrollbar-thumb {
  background: #673ab766;
  border-radius: 10px;
}

.preset-bg-window::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.preset-bg-dot{
	    width: 40px;
    height: 40px;
    border: 2px solid #fff !important;
    min-height: 62px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s;
    border-radius: 8px; /* facciamoli stondati come i gradienti */
}

.preset-bg-dot:hover {
    transform: scale(1.1);
    z-index: 10;
}

/* Stile personalizzato per la scrollbar */
.coverScroll::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

.coverScroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.coverScroll::-webkit-scrollbar-thumb {
  background: #673ab766;
  border-radius: 10px;
}

.coverScroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

			.layout-option {
				cursor: pointer;
				transition: transform 0.2s ease;
			}
			.layout-option .layout-preview-img {
				transition: border-color 0.2s ease, box-shadow 0.2s ease;
				border-width: 2px !important; /* Per rendere il bordo più visibile */
				border-color: transparent; /* Inizia trasparente */
			}
			.layout-option input[type="radio"]:checked + .layout-preview-img {
				border-color: transparent!important;
			}
			.layout-option .layout-overlay {
				background-color: rgb(104 34 255 / 16%);
				opacity: 0;
				transition: opacity 0.2s ease;
				pointer-events: none;
				border-radius: 12px !important;
			}
			.layout-option input[type="radio"]:checked ~ .layout-overlay { /* Mostra overlay quando selezionato */
				opacity: 1;
			}
			.layout-option:hover .layout-preview-img {
				 border-color: rgba(var(--bs-primary-rgb), 0.5);
			}
			
/**/

/* Stile per il contenitore della card */
.layout-choice-label {
    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */
    display: block; /* Rendi l'etichetta un blocco per occupare lo spazio del genitore */
}

/* Stile iniziale della card */
.layout-choice-card {
    transition: all 0.2s ease-in-out; /* Aggiungi una transizione per un effetto più fluido */
    border: 3px solid transparent; /* Imposta un bordo trasparente che diventerà visibile */
}

/* Effetto al passaggio del mouse (hover) */
.layout-choice-label:hover .layout-choice-card {
    border-color: #6c757d; /* Bordo grigio chiaro al passaggio del mouse */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Aggiunge un'ombra */
}

/* Stile per la card quando l'input radio nascosto è selezionato */
.layout-choice-label input[type="radio"]:checked + .layout-choice-card {
    border-color: #6822ff; /* Bordo blu di Bootstrap quando selezionato */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25); /* Ombra più intensa quando selezionato */
    transform: scale(1.03); /* Un leggero ingrandimento per l'effetto */
}


/* Stili per lo skeleton screen */
.skeleton-container {
    width: 100%;
}

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-circle.skeleton-sm {
    width: 25px;
    height: 25px;
}

.skeleton-line {
    height: 15px;
    margin-bottom: 8px;
    background: #e9ecef;
    border-radius: 5px;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    width: 100%;
}

.skeleton-line:last-child {
    margin-bottom: 0;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: #e9ecef;
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
    0% {
        background-color: #e9ecef;
    }
    50% {
        background-color: #f8f9fa;
    }
    100% {
        background-color: #e9ecef;
    }
}


.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    /* overflow-y: auto; */
	gap:2px;
}

.scrollMenu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  	cursor:grab;
}

.scrollMenu::-webkit-scrollbar-track {
  background: #dddddd;
  border-radius: 10px;
  cursor:grab;
}

.scrollMenu::-webkit-scrollbar-thumb {
  background: #6822ff4a;
  border-radius: 10px;
  cursor:grab;
}

.scrollMenu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
  cursor:grab;
}

@media screen and (max-width:767px){
	.nav-tabs::-webkit-scrollbar-track{
		display:none;
	}
	.scrollMenu::-webkit-scrollbar-thumb {
display:none;
}

.scrollMenu::-webkit-scrollbar-thumb:hover {
display:none;
}
}

.nav-tabs .nav-item {
    flex: 0 0 auto; /* Impedisce il wrapping e mantiene la larghezza automatica */
}


.nav-tabs .nav-item {
    flex: 0 0 auto; /* Impedisce il wrapping e mantiene la larghezza automatica */
}


/*Seo SubMenu*/
#seo-submenu-wrapper {
position: sticky;
    top: -8px;
    z-index: 100;
z-index: 100;
    background: #ffffff5c;
    backdrop-filter: blur(6px);
}

.seo-submenu {
    border-bottom: 1px solid #eee;
    min-height: 60px;
    padding: 0.5rem 0;
	box-shadow:0 4px 16px -2px rgb(0 0 0 / 11%)!important;
}

.seo-submenu ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.seo-submenu ul::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.seo-submenu li {
  flex: 0 0 auto;
}

.seo-submenu-link {
  border-radius: 12px;
  color: #0a0a0ad1;
  transition: color 0.2s, background 0.2s;
  background: none;
  text-align: center;
  display: flex;
  flex-direction: row!important;
  gap:6px;
  align-items: center;
  white-space: nowrap;      
  min-width: 0;             
  padding: 10px 14px;
      font-weight: 600;
}

.seo-submenu-link.active,
.seo-submenu-link:hover {
    background: #6822ff12 !important;
    color: #6822ff;
}

.seo-submenu-link img {
  object-fit: contain;
}

.seo-submenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


.badge-interest {
    background-color: #6822ff;
    color: white;
    padding: 6px 18px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.badge-interest:focus {
    background-color: #9C27B0;
}
#suggestionsDropdown {
    position: relative;
    width: calc(100% - 30px); /* Adatta la larghezza al campo di ricerca */
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999; /* Assicura che sia sempre in primo piano */
	margin-bottom: 8px;
    max-height: 150px;
    overflow-y: auto;
    display: none; /* Nascondi inizialmente */
}

#suggestionsDropdown li {
    cursor: pointer;
    padding: 10px;
    font-size: 13px; /* Aumenta la dimensione del testo per dispositivi mobili */
}

#suggestionsDropdown li:hover {
    background-color: #f0f0f0;
}

/* Stili specifici per dispositivi mobili */
@media (max-width: 768px) {
    #suggestionsDropdown {
        width: 100%; /* Usa l'intera larghezza su schermi piccoli */
        font-size: 13px; /* Testo più grande per migliorare la leggibilità */
    }
}

.socialLink img {
    width: 28px;
    margin-top: 8px;
    margin-bottom: 0px;
    opacity: .6;
}

/* Aggiungi questo al tuo file CSS o in un tag <style> nell'header */
.post-preview-popup {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.post-preview-popup.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.popup-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-overlay.active {
  opacity: 1;
}


.customTabProfile{
	    font-size: 13px;
	    color: #0a0a0ad1;
	    font-weight: 700;
}

.grayText{color:#c3c3c3;}

			.cropper-image-container {
				max-width: 100%;
			}
			.cropper-image-container > img {
				max-width: 100%;
			}

/* Stile base per il testo */
.shine-effect {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  color: #212121;
  background: #fff; /* Colore di sfondo per contrasto */
  overflow: hidden;
}

/* Pseudo-elemento per l'effetto luce */
.shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Parte da fuori lo schermo */
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); /* Inclina la luce */
  z-index: 1;
  animation: shine-animation 2s infinite; /* Animazione continua */
}

/* Animazione dell'effetto luce */
@keyframes shine-animation {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

/* Stile per evidenziare l'immagine selezionata */
.selected-cover {
    border: 3px solid #673AB7; /* Bordo blu per evidenziare */
    border-radius: 8px!important;
    padding: 4px;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Ombra leggera */
    transform: scale(1.05); /* Effetto di ingrandimento leggero */
    transition: all 0.3s ease; /* Transizione fluida */
    order:1!important;
}

		#profilePictureContainer {
    width: 108px;
    height: 108px;
    background-color: #f8f9fa; /* Colore di sfondo di fallback */
/* 	box-shadow: 0px 0px 22px #ededed; */
    cursor: pointer;
	margin:0 auto;
}

#profilePictureContainer:hover {
    border-color: #0d6efd; /* Cambia il bordo al passaggio del mouse */
}

#profilePictureContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centra e ritaglia l'immagine */
}

						.pexels-results-scroll::-webkit-scrollbar { /* Rendi la scrollbar più carina (opzionale) */
							height: 6px;
						}
						.pexels-results-scroll::-webkit-scrollbar-thumb {
							background-color: #ccc;
							border-radius: 3px;
						}

/* --- Stile Contenitore Bento (MODIFICATO) --- */
.contenitore-bento-5 {
    display: block; /* Rimosso grid, ora è un semplice contenitore per .contenitore-social-flex */
    max-width: 900px; /* O la tua larghezza massima desiderata */
    margin-top: 1rem;
    margin-left: auto;  /* Per centrare il contenitore se più stretto del viewport */
    margin-right: auto; /* Per centrare il contenitore */
}

/* Stile specifico per il blocco Bio (RIMANE INVARIATO, nel caso lo riattivassi) */
.blocco-bio {
    width: 280px;
    font-family: 'Neue Montreal', sans-serif !important;
    color: #333;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    margin: 0 auto; /* Se fosse l'unico elemento, lo centrerebbe */
}

.blocco-bio p#bio-utente {
    font-size: 16px;
    margin-bottom: 0.5rem;
    flex-grow: 1;
}


/* --- Contenitore Flex per i Blocchi Social (RIMANE SOSTANZIALMENTE INVARIATO) --- */
.contenitore-social-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    /* Rimuoviamo eventuali width/max-width specifiche se vogliamo che si espanda
       completamente dentro .contenitore-bento-5 */
    width: 100%; /* Assicura che occupi tutta la larghezza di .contenitore-bento-5 */
}

/* --- Stile Base per i Singoli Blocchi Social (MODIFICATO flex-basis per più flessibilità) --- */
.contenitore-social-flex .blocco-griglia.social-block {
    box-shadow: 0px 0px 32px #c3c3c36b;
    border-radius: 16px;
    min-height: 100px; /* Ridotta leggermente l'altezza minima, puoi aggiustarla */
    font-family: 'Neue Montreal', sans-serif !important;
    color: #333;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.2s ease-out, box-shadow 0.2s ease-out;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;

    flex-grow: 1; /* Permette ai blocchi di crescere */
    /* flex-basis: calc(50% - 0.5rem); // DEFAULT VECCHIO: 2 per riga */

    /* NUOVO flex-basis più dinamico:
       Inizia con una base e lascia che flex-grow faccia il resto.
       Questo valore, combinato con min-width, controlla quanti ne entrano per riga.
       Se vuoi un minimo di X elementi per riga su schermi larghi, aggiusta min-width.
    */
    flex-basis: 150px; /* Base di partenza per ogni blocco. Aggiusta questo valore. */
    min-width: 130px; /* Larghezza minima prima di andare a capo. Aggiusta questo. */
                      /* Esempio: se flex-basis è 150px e min-width 130px,
                         su un contenitore di 600px (con gap da 1rem):
                         (600 - (gap * (N-1))) / N  deve essere >= 130
                         Se N=4: (600 - (16*3)) / 4 = (600-48)/4 = 552/4 = 138px. Quindi 4 per riga.
                         Se N=3: (600 - (16*2)) / 3 = (600-32)/3 = 568/3 = 189px. Quindi 3 per riga.
                         Il browser sceglierà il numero maggiore di N che rispetta min-width.
                      */
    /* max-width: calc(25% - 0.75rem); */ /* Esempio: per un massimo di 4 per riga, considera gap */
}


/* Hover effect per i blocchi social (RIMANE INVARIATO) */
.contenitore-social-flex .blocco-griglia.social-block:hover {
    transform: translateY(-3px);
    box-shadow: 0px 5px 35px #b0b0b0a1;
}


/* --- I TUOI STILI PER LINK, ICONA E FRECCIA DENTRO I BLOCCHI SOCIAL (RIMANGONO INVARIATI) --- */
.contenitore-social-flex .social-block-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
}

.contenitore-social-flex .social-block-icon {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
}

.contenitore-social-flex .blocco-griglia.social-block .arrow-link {
     position: absolute;
     bottom: 0.75rem;
     right: 0.75rem;
     padding: 0.3rem 0.5rem;
     border-radius: 50%;
     line-height: 1;
     font-size: 0.8em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     z-index: 10;
}

/* Media queries per affinare il numero di colonne su diverse dimensioni schermo (OPZIONALE MA CONSIGLIATO) */
@media (max-width: 768px) {
    .contenitore-social-flex .blocco-griglia.social-block {
        flex-basis: calc(50% - 0.5rem); /* 2 per riga su tablet e schermi medi */
        min-width: 120px; /* Adatta se necessario */
    }
	
}

@media (max-width: 480px) {
    .contenitore-bento-5 {
        /* padding: 0 0.5rem; Riduci padding su mobile */
    }
    .contenitore-social-flex {
        gap: 0.5rem; /* Riduci gap su mobile */
    }
    .contenitore-social-flex .blocco-griglia.social-block {
        flex-basis: calc(50% - 0.25rem); /* Ancora 2 per riga ma con meno gap, o 100% per 1 per riga */
        /* Per 1 per riga su mobile: */
        /* flex-basis: 100%; */
        min-height: 90px; /* Altezza minima leggermente ridotta su mobile */
        padding: 0.75rem;
    }
    .contenitore-social-flex .social-block-icon {
        width: 36px;
        height: 36px;
    }
    .contenitore-social-flex .blocco-griglia.social-block .arrow-link {
        bottom: 0.5rem;
        right: 0.5rem;
        font-size: 0.7em;
    }
}

        .custom-color-picker {
            position: relative;
        }
        
        .color-display {
            width: 100%;
            height: 50px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 15px;
            transition: all 0.2s ease;
        }
        
        .color-display:hover {
            border-color: #adb5bd;
        }
        
        .color-display.active {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        .color-circle {
width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: var(--bs-box-shadow-sm) !important;
    margin-right: 12px;
    flex-shrink: 0;
        }
        
        .color-text {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            color: #495057;
            text-transform: uppercase;
        }
        
        .color-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            padding: 20px;
            margin-top: 4px;
            display: none;
        }
        
        .color-dropdown.show {
            display: block;
        }
        
        .color-input-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .hex-input {
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 8px 12px;
            font-family: 'Courier New', monospace;
            font-weight: 600;
            flex: 1;
        }
        
        .hex-input:focus {
            outline: none;
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        .preset-colors {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
            margin-top: 15px;
        }
        
        .preset-color {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .preset-color:hover {
            transform: scale(1.1);
            border-color: #0d6efd;
        }
        
        .preset-color.selected {
            border-color: #0d6efd;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
        }
		
		
		/* Stile per i preset di colore */
.color-preset-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #dee2e6; /* Simula un bordo sottile */
    transition: transform 0.1s ease-in-out;
}

.color-preset-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #adb5bd;
}
		
		
/* Contenitore per lo scorrimento orizzontale */
.horizontal-scroll-container {
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    -webkit-overflow-scrolling: touch; /* Scrolling fluido su iOS */
/*    scrollbar-width: thin; 
    scrollbar-color: #ced4da #f8f9fa;  Colore per Firefox */
}

/* Stile per la scrollbar su browser WebKit (Chrome, Safari) */
.horizontal-scroll-container::-webkit-scrollbar {
    height: 6px; /* Altezza della scrollbar */
	display:none;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
    background: transparent; /* Sfondo della traccia invisibile */
	display:none;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background-color: #e9ecef; /* Colore della barra */
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
	display:none;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #ced4da;
	display:none;
}

/* Modalità singolo evento: disabilita lo scroll e fai occupare il 100% */
.horizontal-scroll-container.single-event-mode {
    overflow-x: hidden; /* niente scroll */
}

.horizontal-scroll-container.single-event-mode > .d-flex {
width: 100%;
    justify-content: center;
}

.horizontal-scroll-container.single-event-mode .event-pill {
    min-width: 100%;
    max-width: 100%!important;
    width: 100%;
}

/* Stile della "pillola" evento */
.event-pill {
    display: flex;
    align-items: center;
    padding: 8px;
    min-height: 74px;
    min-width: 182px;
	max-width:260px;
/*     background-color: #f9f9f9;  */
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
    border: 1px solid #76767626; /* Bordo per l'hover */
}

.event-pill:hover {
    background-color: #ffffff;
    border-color: #dee2e6; /* Bordo grigio chiaro all'hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.event-pill-img {
    width: 52px;  /* Leggermente più grande per un look migliore */
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
}

.event-pill-text {
    display: flex;
    flex-direction: column;
/*     white-space: nowrap; */
}

.event-pill-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.event-pill-subtitle {
    font-size: 0.65rem;
    color: #6c757d;
}	

    .text-color-choice-label {
        cursor: pointer;
        display: block;
    }
    .text-color-preview-card {
        transition: all 0.2s ease-in-out;
        border-width: 2px !important;
        border-color: var(--bs-card-border-color) !important;
    }
    .text-color-choice-label input:checked + .text-color-preview-card {
        border-color: var(--bs-indigo) !important;
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
    }
	
/*Motiva*/

.gradient-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.gradient-swatch {
width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 3px solid #e9e9e9;
    cursor: pointer;
    transition: all 0.2s ease;
	order:9;
}

.gradient-swatch:hover {
    transform: scale(1.05);
    border-color: #007bff;
}

.gradient-swatch.selected {
    border-color: #6822ff;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
	order:1;
	transition:.4s;
}

.quote-preview {
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.quote-preview h4 {
    font-size: 1.2rem;
    line-height: 1.4;
}

.preset-quote-item {
    white-space: normal !important;
    padding: 8px 16px !important;
}

.preset-quote-item:hover {
    background-color: #f8f9fa;
}	

/* Stili per l'Anteprima Social */
.preview-wrapper-default {
    /* Nessuno stile particolare, si adatta al contenuto */
    transition: all 0.4s ease-in-out;
}

/* Usiamo aspect-ratio per mantenere le proporzioni corrette */
.preview-wrapper-post,
.preview-wrapper-story {
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

.preview-wrapper-post {
    aspect-ratio: 1080 / 1350; /* Proporzione di un Post Instagram */
}

.preview-wrapper-story {
    aspect-ratio: 1080 / 1920; /* Proporzione di una Storia Instagram */
}

/* Quando l'anteprima è in un wrapper con proporzioni,
   facciamo in modo che occupi tutto lo spazio e centri il contenuto. */
.preview-wrapper-post .quote-preview,
.preview-wrapper-story .quote-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10%; /* Padding proporzionale */
}
/* Aggiustiamo la dimensione del font in modo proporzionale */
.preview-wrapper-post .quote-preview h4,
.preview-wrapper-story .quote-preview h4 {
    font-size: 5.8vw; /* Scala con la larghezza del viewport */
    line-height: 1.4;
}
.preview-wrapper-post .quote-preview p,
.preview-wrapper-story .quote-preview p {
    font-size: 3vw;
}	


.vanilla-editor-container {
    border: 1px solid #dee2e6;
    border-radius: 14px;
    min-height: 162px;
}

.vanilla-editor-toolbar {
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin: 4px;
}	

.vanilla-editor-toolbar .btn {
    font-weight: 600;
}


.vanilla-editor-content {
    min-height: 120px;
    padding: 12px;
    outline: none!important; 
}
.vanilla-editor-content:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	outline: none!important;
}

.draggable-scroll {
    cursor: grab; /* Cursore "manina aperta" */
    user-select: none; /* Impedisce la selezione del testo durante il drag */
}

.draggable-scroll.is-grabbing {
    cursor: grabbing; /* Cursore "manina chiusa" quando si trascina */
}
        
		
/* Stile base per i placeholder FREE (come anteprima statica) */
.social-embed-placeholder {
    background-color: #f0f2f5; border-radius: 12px; cursor: pointer;
    transition: background-color 0.3s ease;
   /*  display: flex; justify-content: center; align-items: center;
    min-height: 150px; */ color: #65676b;
}
.social-embed-placeholder:hover {
    background-color: #e4e6eb;
}

/* === STILE DEFINITIVO CAROSELLO STORIES POST sul PROFILO (PRO) === */

.story-slide {
    height: 400px;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    float: left;
    overflow: hidden; /* FONDAMENTALE: nasconde tutto ciò che "sborda" */
    background: #fff; /* Sfondo di fallback */
    position: relative; /* Necessario per il posizionamento dell'overlay */
    transition: transform 0.2s ease-in-out;
}

.story-slide:hover {
    transform: scale(1.03); /* Un leggero effetto zoom all'hover */
}

.story-slide-wrapper {
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: transform 0.2s ease-in-out;
    margin: 0 8px; 
}

.story-slide-wrapper:hover {
    transform: scale(1.03);
}

/* Contenitore dell'embed: lo rendiamo più grande della slide */
.story-slide-content {
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disabilita l'interazione con l'embed */
}

/* Velo trasparente per catturare click e swipe */
.story-slide-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
}

/* ========= LA MAGIA DEL RITAGLIO ========= */

/* Regola GENERICA per tutti gli embed: li ingrandiamo e li spostiamo */
.story-slide-content > * {
    /* Ingrandiamo l'embed per "zoomare" sulla parte centrale (l'immagine) */
    transform: scale(1.4);
    
    /* Spostiamo l'embed verso l'alto per nascondere il footer (commenti, like) */
    /* e lo centriamo orizzontalmente */
    transform-origin: center 70%; /* Sposta il centro dello zoom verso l'alto */
    
    /* Queste proprietà sono importanti per il corretto funzionamento */
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

/* Regola SPECIFICA per nascondere l'HEADER degli embed di Instagram */
/* Instagram carica l'header in un div separato dentro l'iframe. Lo nascondiamo. */
.story-slide-content iframe .Header {
    display: none !important;
    visibility: hidden !important;
}

/* Stile per le frecce di Slick (pulite e funzionali) */
.slick-prev, .slick-next {
    z-index: 10;
    width: 40px; height: 40px;
}
.slick-prev:before, .slick-next:before {
    color: #000;
    opacity: 0.5;
    font-size: 40px;
}



/* Stile per l'iframe nel modale (invariato) */
#socialPostModalBody iframe,
#socialPostModalBody blockquote {
    max-width: 100%; margin: 0 auto; display: block;
}		

/* MEDIA QUERIES per Adattabilità */


@media (max-width: 992px) { /* Esempio per schermi più piccoli di large */
    .contenitore-bento-5 {
        /* Potresti voler cambiare la proporzione tra bio e social */
        grid-template-columns: 1.5fr 1fr;
    }
    .contenitore-social-flex .blocco-griglia.social-block {
        /* Ancora due per riga, o potresti passare a uno solo se preferisci */
        flex-basis: calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) { /* Tablet */
    .contenitore-bento-5 {
        grid-template-columns: 1fr; /* Bio sopra (tutta larghezza), contenitore social sotto (tutta larghezza) */
    }
    .blocco-bio {
    }
    .contenitore-social-flex .blocco-griglia.social-block {
        /* Mantiene 2 per riga sul tablet, o passa a 1 se vuoi più spazio verticale */
        flex-basis: calc(50% - 0.5rem);
        min-height: 100px; /* Potresti aggiustare l'altezza */
    }
	.offcanvas{
		width: 100% !important;
	}
	
}

@media (max-width: 576px) { /* Mobile */
    .contenitore-bento-5, .contenitore-social-flex {
        gap: 0.75rem; /* Riduci il gap su mobile */
    }
    .blocco-bio, .contenitore-social-flex .blocco-griglia.social-block {
        border-radius: 12px; /* Riduci border-radius se vuoi */
    }
    .contenitore-social-flex .blocco-griglia.social-block {
        flex-basis: calc(50% - 0.375rem);
        min-height: 80px; /* Riduci altezza minima */
    }
    .contenitore-social-flex .social-block-icon {
        width: 36px; /* Riduci dimensione icona su mobile */
        height: 36px;
    }
    .contenitore-social-flex .blocco-griglia.social-block .arrow-link {
        bottom: 0.5rem;
        right: 0.5rem;
        font-size: 0.7em;
    }
}


/* --- Colori di Sfondo Specifici per Social --- */

/* Instagram */
.blocco-griglia.instagram {background-color: #f2a4be;color: white;} /* Rosa/Viola IG */
.blocco-griglia.instagram .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.instagram .arrow-link span { color: white; }
.blocco-griglia.instagram .social-block-icon {  } /* Rende icona bianca */

/* Facebook */
.blocco-griglia.facebook { background-color: #3b8af0; color: white; } /* Blu FB */
.blocco-griglia.facebook .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.facebook .arrow-link span { color: white; }
.blocco-griglia.facebook .social-block-icon {  }

/* Threads */
.blocco-griglia.threads { background-color: #000000; color: white; } /* Nero Threads */
.blocco-griglia.threads .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.threads .arrow-link span { color: white; }
.blocco-griglia.threads .social-block-icon {  }

/* Bento */
.blocco-griglia.bento {background: linear-gradient(45deg, #ffdcc8, #fcd9c6);color: #4A2E20;} /* Gradiente Bento */
.blocco-griglia.bento .arrow-link { background-color: rgba(255,255,255,0.5); color: #4A2E20; }
.blocco-griglia.bento .arrow-link span { color: #4A2E20; }
/* Icona Bento potrebbe essere già colorata */

/* Tinder */
.blocco-griglia.tinder { background: linear-gradient(to right, #FD297B, #FF655B); color: white; } /* Gradiente Tinder */
.blocco-griglia.tinder .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.tinder .arrow-link span { color: white; }
.blocco-griglia.tinder .social-block-icon {  }

/* Twitter / X */
.blocco-griglia.twitter {background-color: #212121d9;color: white;} /* Nero X */
.blocco-griglia.twitter .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.twitter .arrow-link span { color: white; }
.blocco-griglia.twitter .social-block-icon {  } /* Icona bianca */

/* LinkedIn */
.blocco-griglia.linkedin {background-color: #8fb9e3;color: white;} /* Blu LinkedIn */
.blocco-griglia.linkedin .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.linkedin .arrow-link span { color: white; }
.blocco-griglia.linkedin .social-block-icon { }

/* Spotify */
.blocco-griglia.spotify { background-color: #1DB954; color: white; } /* Verde Spotify */
.blocco-griglia.spotify .arrow-link { background-color: rgba(0,0,0,0.2); color: white; }
.blocco-griglia.spotify .arrow-link span { color: white; }
.blocco-griglia.spotify .social-block-icon {  }

/* YouTube */
.blocco-griglia.youtube {background-color: #fea6a6;color: white;} /* Rosso YouTube */
.blocco-griglia.youtube .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.youtube .arrow-link span { color: white; }
.blocco-griglia.youtube .social-block-icon {  }

/* TikTok */
.blocco-griglia.tiktok { background: linear-gradient(45deg, #00f2ea, #ff0050); color: white; } /* Gradiente TikTokish */
.blocco-griglia.tiktok { background-color: #000000; color: white; } /* O nero */
.blocco-griglia.tiktok .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.tiktok .arrow-link span { color: white; }
.blocco-griglia.tiktok .social-block-icon { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); } /* TikTok ha icona multi-colore */

/* Twitch */
.blocco-griglia.twitch {background-color: #c69fff;color: white;} /* Viola Twitch */
.blocco-griglia.twitch .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.twitch .arrow-link span { color: white; }
.blocco-griglia.twitch .social-block-icon {  }

/* GitHub */
.blocco-griglia.github {background-color: #24292e85;color: white;} /* Grigio Scuro GitHub */
.blocco-griglia.github .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.github .arrow-link span { color: white; }
.blocco-griglia.github .social-block-icon {  }

/* Pinterest */
.blocco-griglia.pinterest { background-color: #e5596e; color: white; } /* Rosso Pinterest */
.blocco-griglia.pinterest .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.pinterest .arrow-link span { color: white; }
.blocco-griglia.pinterest .social-block-icon {  }

/* Behance */
.blocco-griglia.behance { background-color: #053EFF; color: white; } /* Blu Behance */
.blocco-griglia.behance .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.behance .arrow-link span { color: white; }
.blocco-griglia.behance .social-block-icon {  }

/* Dribbble */
.blocco-griglia.dribbble {background-color: #ea4c8991;color: white;} /* Rosa Dribbble */
.blocco-griglia.dribbble .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.dribbble .arrow-link span { color: white; }
.blocco-griglia.dribbble .social-block-icon {  }

/* Discord */
.blocco-griglia.discord { background-color: #5865F2; color: white; } /* Viola Discord */
.blocco-griglia.discord .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.discord .arrow-link span { color: white; }
.blocco-griglia.discord .social-block-icon {  }

/* Reddit */
.blocco-griglia.reddit { background-color: #FF4500; color: white; } /* Arancione Reddit */
.blocco-griglia.reddit .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.reddit .arrow-link span { color: white; }
.blocco-griglia.reddit .social-block-icon {  }

/* Snapchat */
.blocco-griglia.snapchat {background-color: #fffc0061;color: #333;} /* Giallo Snapchat */
.blocco-griglia.snapchat .arrow-link { background-color: rgba(0,0,0,0.1); color: #333; }
.blocco-griglia.snapchat .arrow-link span { color: #333; }
/* Icona Snapchat ha già colore */

/* WhatsApp */
.blocco-griglia.whatsapp { background-color: #25D366; color: white; } /* Verde WhatsApp */
.blocco-griglia.whatsapp .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.whatsapp .arrow-link span { color: white; }
.blocco-griglia.whatsapp .social-block-icon {  }

/* Telegram */
.blocco-griglia.telegram { background-color: #2AABEE; color: white; } /* Blu Telegram */
.blocco-griglia.telegram .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.telegram .arrow-link span { color: white; }
.blocco-griglia.telegram .social-block-icon {  }

/* Patreon */
.blocco-griglia.patreon { background-color: #FF424D; color: white; } /* Rosso Patreon */
.blocco-griglia.patreon .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.patreon .arrow-link span { color: white; }
/* Icona Patreon ਠspesso bianca di suo */

/* Etsy */
.blocco-griglia.etsy { background-color: #f1641e42; color: white; } /* Rosso Patreon */
.blocco-griglia.etsy .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.etsy .arrow-link span { color: white; }
/* Icona Patreon ਠspesso bianca di suo */

/* Substack */
.blocco-griglia.substack { background-color: #FF6719; color: white; } /* Arancione Substack */
.blocco-griglia.substack .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.substack .arrow-link span { color: white; }
/* Icona Substack potrebbe essere già colorata */

/* Medium */
.blocco-griglia.medium { background-color: #12100E; color: white; } /* Quasi Nero Medium */
.blocco-griglia.medium .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.medium .arrow-link span { color: white; }
.blocco-griglia.medium .social-block-icon {  } /* Icona M bianca */

/* Onlyfans */
.blocco-griglia.onlyfans {background-color: #00aff047;color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.onlyfans .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.onlyfans .arrow-link span { color: white; }
.blocco-griglia.onlyfans .social-block-icon {  } /* Icona M bianca */

/* fansly */
.blocco-griglia.fansly {background-color: #00b7fb6b;color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.fansly .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.fansly .arrow-link span { color: white; }
.blocco-griglia.fansly .social-block-icon {  } /* Icona M bianca */

/* fanvue */
.blocco-griglia.fanvue {background-color: #49f2646e;color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.fanvue .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.fanvue .arrow-link span { color: white; }
.blocco-griglia.fanvue .social-block-icon {  } /* Icona M bianca */

/* boosty */
.blocco-griglia.boosty {background-color: #f15f2c5c;color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.boosty .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.boosty .arrow-link span { color: white; }
.blocco-griglia.boosty .social-block-icon {  } /* Icona M bianca */

/* tonplace */
.blocco-griglia.tonplace {background-color: #7ec7ffad;color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.tonplace .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.tonplace .arrow-link span { color: white; }
.blocco-griglia.tonplace .social-block-icon {  } /* Icona M bianca */

/* biosite */
.blocco-griglia.biosite {background-color: #00000094; color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.biosite .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.biosite .arrow-link span { color: white; }
.blocco-griglia.biosite .social-block-icon {  } /* Icona M bianca */

/* playboy */
.blocco-griglia.playboy {background-color: #dbdbdb94; color: #212121;} /* Quasi Nero Medium */
.blocco-griglia.playboy .arrow-link { background-color: rgba(255,255,255,0.2); color: white; }
.blocco-griglia.playboy .arrow-link span { color: white; }
.blocco-griglia.playboy .social-block-icon {  } /* Icona M bianca */

/* LoyalFans */
.blocco-griglia.loyalfans {background-color: #e1306c70;color: white;} /* Rosa/Viola IG */
.blocco-griglia.loyalfans .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.loyalfans .arrow-link span { color: white; }
.blocco-griglia.loyalfans .social-block-icon {  } /* Rende icona bianca */

/* Stile per Link Generico */
.blocco-griglia.default-link {background-color: #ffffff;color: white;} /* Grigio */
.blocco-griglia.default-link .arrow-link { background-color: rgba(255,255,255,0.3); color: white; }
.blocco-griglia.default-link .arrow-link span { color: white; }
.blocco-griglia.default-link .social-block-icon {  }

/* Stile per blocchi Placeholder (se usati) */
.blocco-griglia.placeholder-block {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.blocco-griglia.placeholder-block p {
    margin: 0;
    font-weight: 500;
}

/* --- Stile Arrow Link (leggermente modificato per posizionamento) --- */
.arrow-link {
    position: absolute; /* Posiziona assolutamente rispetto al .blocco-griglia */
    bottom: 1rem;      /* 1rem dal basso */
    right: 1rem;       /* 1rem da destra */
    /* float: right; Rimosso, non necessario con position: absolute */

    background-color: rgba(255, 255, 255, 0.7); /* Leggermente pi๠opaco */
    backdrop-filter: blur(3px);
    border-radius: 50%;
    width: 35px;  /* Leggermente pi๠grande */
    height: 35px; /* Leggermente pi๠grande */
    display: inline-flex; /* Cambiato da flex a inline-flex se vuoi che stia sulla stessa linea di altro testo, altrimenti lascia flex */
    align-items: center; /* Centra l'icona verticalmente */
    justify-content: center; /* Centra l'icona orizzontalmente */
    text-decoration: none;
    color: #333;
    font-size: 0.9rem; /* Adatta dimensione icona interna */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, transform 0.3s ease; /* Aggiunta transizione a transform */
    /* transform: rotate(45deg); Spostato allo stato non-focus se ਠl'impostazione iniziale */
}

.arrow-link:hover, /* Stile hover per interazione */
.arrow-link:focus {
    transform: rotate(0deg); /* Ruota a 0 su hover/focus */
    background-color: rgba(255, 255, 255, 0.9); /* Sfondo pi๠chiaro su interazione */
}

/* Se usi Flaticon uicons, potrebbe essere necessario regolare la dimensione del font o line-height */
.arrow-link span[class^="fi-rr-"] {
    line-height: 1; /* Aiuta ad allineare l'icona Flaticon */
    font-size: 1em; /* Usa la dimensione del genitore (.arrow-link) */
    display: inline-block; /* Assicura che transform funzioni */
    transform: rotate(45deg); /* Ruota solo l'icona inizialmente */
    transition: transform 0.3s ease; /* Anima la rotazione dell'icona */
}
.arrow-link:hover span[class^="fi-rr-"],
.arrow-link:focus span[class^="fi-rr-"] {
     transform: rotate(0deg); /* Ruota l'icona a 0 su hover/focus */
}


/*YouTube Embed*/ 
.ytp-chrome-top.ytp-show-cards-title {
    display: none!important;
}
button.ytp-large-play-button.ytp-button.ytp-large-play-button-red-bg {
    filter: grayscale(1)!important;
    opacity: .6!important;
}
/* 
.post-image-container {
  touch-action: none;

  cursor: pointer; 
} */


        .search-results {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            background: white;
            position: absolute;
            width: 100%;
            z-index: 1000;
            margin-top: 2px;
        }
        
        .search-result-item {
            padding: 10px;
            border-bottom: 1px solid #f8f9fa;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .search-result-item:hover {
            background-color: #f8f9fa;
        }
        
        .search-result-item:last-child {
            border-bottom: none;
        }
        
        .video-thumbnail {
            width: 80px;
            height: 45px;
            object-fit: cover;
        }
        
        .search-container {
            position: relative;
        }
		
		
        .spotify-search-container {
            position: relative;
        }
		
		        .podcast-search-container {
            position: relative;
        }
        
        .search-loading {
            display: none;
            padding: 15px;
            text-align: center;
            color: #6c757d;
        }



/* Stile per il popup di condivisione */
.share-popup-overlay {
    position: fixed; /* Copre l'intera viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo semi-trasparente */
    display: none; /* Nascosto di default */
    justify-content: center;
    align-items: center;
    z-index: 111; /* Assicurati sia sopra altri elementi */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.share-popup-overlay.active {
    display: flex; /* Mostra quando attivo */
    opacity: 1;
}

.share-popup-content {
    background-color: #fff;
    display: flex;
    gap: 12px;
    padding: 25px 30px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: absolute;
    max-width: 500px; /* Larghezza massima del box */
    width: 100%; /* Responsive */
    bottom: 0px;
    min-height: 50%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
    flex-direction: column;
    justify-content: flex-start;
}

.share-popup-overlay.active .share-popup-content {
     transform: scale(1);
}


.share-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
}
.share-popup-close:hover {
    color: #343a40;
}


.share-popup-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #333;
}

.share-popup-content p {
    margin-bottom: 4px;
    color: #555;
}

.share-url-container {
    display: flex;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden; /* Per arrotondare gli angoli interni */
}

/*Backend Modal WA + TG */
/* Overlay Oscuro */
.sheet-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Nascosto di default */
    z-index: 1050; /* Sopra tutto */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sheet-overlay.active {
    display: flex;
    opacity: 1;
    align-items: flex-end; /* Allinea in basso */
}

/* Contenuto Sheet */
.sheet-content {
    background-color: #fff;
    width: 100%;
    max-width: 600px; /* Limite larghezza su desktop */
    margin: 0 auto; /* Centrato su desktop */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 25px;
    transform: translateY(100%); /* Parte da fuori schermo */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}
.sheet-overlay.active .sheet-content {
    transform: translateY(0);
}

/* Maniglia decorativa iOS */
.sheet-handle {
    width: 40px; height: 5px; background: #e0e0e0;
    border-radius: 10px; margin: 0 auto 20px auto;
}

/* Pulsante Chiudi */
.sheet-close-btn {
    position: absolute; top: 15px; right: 20px;
    background: #f1f1f1; border: none; width: 30px; height: 30px;
    border-radius: 50%; color: #333; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* Rotazione icona collapse */
.embed-collapse-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}
.embed-collapse-btn i {
    transition: transform 0.3s ease;
    display: inline-block;
}
/* Header cliccabile */
.embed-header {
    cursor: pointer;
    transition: background-color 0.2s;
}
.embed-header:hover {
    background-color: #eaeaea;
}

#profileUrlInput {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    border: none; /* Il bordo ਠsul container */
    background-color: #e9ecef; /* Grigio chiaro per indicare readonly */
    color: #495057;
    font-size: 0.9rem;
    outline: none;
}

#copyUrlBtn {
    padding: 0.5rem 1rem;
    background-color: #6822ff; /* Colore primario Bootstrap (esempio) */
    color: white;
    border: 1px solid #6822ff;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap; /* Evita che il testo vada a capo */
    transition: background-color 0.2s ease;
}

#copyUrlBtn:hover {
    background-color: #0b5ed7;
}
#copyUrlBtn.copied {
    background-color: #198754; /* Verde successo Bootstrap */
    cursor: default;
}

.share-options {
    width: 100%;
    display: flex;
    gap: 14px; /* Spazio tra i pulsanti */
    justify-content: flex-start;
    flex-direction: row;
    overflow-x: auto;
padding-bottom:12px;
}


/* Stile personalizzato per la scrollbar */
.share-options::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.share-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.share-options::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.share-options::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.share-btn {
    display: inline-flex; /* Allinea icona e testo */
    align-items: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    transition: opacity 0.2s ease;
    border: none; /* Se usi button */
    cursor: pointer; /* Se usi button */
	width: 32px;
	height: 32px;
}

.share-btn span[class^="fi-"] { /* Stile per le icone */
    margin-right: 8px;
    font-size: 1.1em; /* Rende l'icona leggermente pi๠grande */
    display: inline-block; /* Assicura allineamento */
	
}


.share-btn:hover {
    opacity: 0.85;
}

/* Colori specifici per piattaforma (esempio) */
.share-btn.native-share img{ width: 32px;height: 32px; } /* Grigio generico */
.share-btn.facebook img { width: 32px;height: 32px; }
.share-btn.twitter img { width: 32px;height: 32px;}
.share-btn.whatsapp img { width: 32px;height: 32px;}
.share-btn.telegram img { width: 32px;height: 32px;}
.share-btn.linkedin img { width: 32px;height: 32px;}
.share-btn.reddit img { width: 32px;height: 32px;}
.share-btn.tumblr img { width: 32px;height: 32px;}
.share-btn.email img {width: 32px;height: 32px; } /* Grigio per email */

/* Assicurati che le icone (es. Font Awesome, Bootstrap Icons, Feather Icons) siano caricate nel tuo progetto */
/* Se usi fi-* come nel mio esempio, assicurati che Flaticon UI Icons sia incluso */


.leaflet-bottom.leaflet-right {
    display: none!important;
}

.spaceFromBottom{height:32px;}

.cta-options-row {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(60px,1fr));
  gap: 12px 8px;
  align-items: start;
}
.cta-options-row .remove-cta {
  align-self: end;
  justify-self: end;
}

/*Dirty Flag*/
.dirty-form-banner {
    position: fixed;
    bottom: -100px; /* Inizia fuori dallo schermo */
    left: 0;
    width: 100%;
    background-color: var(--bs-warning); /* Usa il colore "warning" di Bootstrap */
    color: var(--bs-dark);
    padding: 1rem;
    z-index: 1050; /* Sopra la maggior parte degli elementi */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    transition: bottom 0.5s ease-in-out;
    font-weight: 600;
}

/* Classe per mostrare il banner */
.dirty-form-banner.show {
    bottom: 0;
}

/*JOB*/
.job-img-crop {
  height: 100px;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
}
.job-img-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 100%;
    display: block;
}
/* Cuore preferiti, di default grigio, attivo rosso */
.btn-fav {
  z-index: 10;
  border: none;
  background: rgba(255,255,255,0.8);
  font-size: 1.5rem;
  color: #bbb;
  transition: color 0.2s;
  box-shadow: none;
  padding: 0.2em 0.35em;
}
.btn-fav .fav-icon .fi-rr-heart {
  color: #bbb; /* cuore grigio */
  transition: color 0.2s;
}
.btn-fav.fav-active .fav-icon .fi-rr-heart {
  color: #f44336; /* cuore rosso pieno quando attivo */
}
.fav-icon {
  pointer-events: none;
}

/* === BASE CONTAINER === */
.LayJobs {
  position: relative;
  overflow: visible;
  perspective: 1200px; /* serve per l'effetto di profondità */
}

/* === STATO COLLASSATO (PILE) === */
.LayJobs.collapsed {
  position: relative;
  height: 190px; /* visibile pila */
}

.LayJobs.collapsed .row {
  position: relative;
}

.LayJobs.collapsed .col-12 {
  position: absolute;
  left: 0;
  right: 0;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease,
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform, top, opacity;
}

/* Impilamento fluido */
.LayJobs.collapsed .col-12:nth-child(1) {
  top: 0;
  transform: rotate3d(0, 0, 1, 0deg) translateY(0);
  z-index: 3;
}
.LayJobs.collapsed .col-12:nth-child(2) {
  top: 18px;
  transform: rotate3d(0, 0, 1, -4deg) translateY(0);
  z-index: 2;
  opacity: 0.94;
}
.LayJobs.collapsed .col-12:nth-child(3) {
  top: 36px;
  transform: rotate3d(0, 0, 1, 4deg) translateY(0);
  z-index: 1;
  opacity: 0.88;
}
.LayJobs.collapsed .col-12:nth-child(n+4) {
  opacity: 0;
  pointer-events: none;
}

/* === STATO ESPANSO === */
.LayJobs.expanded {
  height: auto;
}

.LayJobs.expanded .col-12 {
  position: relative;
  transform: rotate3d(0, 0, 1, 0deg) translateY(0);
  opacity: 1;
  z-index: auto;
  pointer-events: auto;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* === CARD STYLE === */
.CustomJobItem {
  background: #fff;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  will-change: transform, box-shadow;
}
.LayJobs.collapsed .CustomJobItem:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* === LABEL DI COLLAPSE === */
.collapsed-badge {
  border: 1px solid #c3c3c3;
  border-radius: 12px;
  padding: 2px 20px;
  margin-top: -12px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.LayJobs.expanded .collapsed-badge {
  opacity: 0;
  pointer-events: none;
}

/* === CURSOR FEEDBACK === */
.LayJobsToggle {
  cursor: pointer;
}

/*Feed Carousel*/
		/* ================================== */
/* === STILI PER CAROSELLO SUGGERIMENTI === */
/* ================================== */

.suggestions-carousel {
    display: flex; /* La magia inizia qui: allinea gli elementi in orizzontale */
    gap: 10px; /* Spazio tra le card */
    padding-bottom: 10px; /* Spazio sotto per la scrollbar */

    /* Migliora l'esperienza di scrolling */
    scroll-snap-type: x mandatory; /* Fa sì che lo scroll si "agganci" a una card */
    scrollbar-width: thin; /* Rende la scrollbar più sottile su Firefox */
    -webkit-overflow-scrolling: touch; /* Scrolling più fluido su iOS */
}

/* Nasconde la scrollbar (mantenendo la funzionalità) su browser Webkit */
.suggestions-carousel::-webkit-scrollbar {
    height: 4px; /* Altezza della scrollbar */
}
.suggestions-carousel::-webkit-scrollbar-track {
    background: #f1f1f1; /* Colore dello sfondo della traccia */
    border-radius: 2px;
}
.suggestions-carousel::-webkit-scrollbar-thumb {
    background: #ccc; /* Colore della scrollbar */
    border-radius: 2px;
}
.suggestions-carousel::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


.suggestion-card {
    scroll-snap-align: start; /* Allinea l'inizio di ogni card con l'inizio del container durante lo snap */
    flex: 0 0 auto; /* Impedisce alle card di restringersi o allargarsi */
    width: 130px; /* Larghezza fissa per ogni card */
    position: relative; /* Necessario per posizionare il nome e il bottone */
    border-radius: 12px;
    overflow: hidden; /* Nasconde le parti delle immagini che escono */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Piccola ombra */
	    margin-right: 10px;
}

.suggestion-profile-link {
    display: block;
    position: relative;
    text-decoration: none;
}

.suggestion-img {
    width: 100%;
    height: 160px; /* Altezza fissa */
    object-fit: cover; /* Assicura che l'immagine copra lo spazio senza distorcersi */
    display: block;
    transition: transform 0.3s ease;
}

.suggestion-card:hover .suggestion-img {
    transform: scale(1.05); /* Leggero effetto zoom all'hover */
}

.suggestion-username {
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Ombra per leggibilità */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Aggiunge "..." se il nome è troppo lungo */
}

.suggestion-follow-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.75rem;
    padding: 2px 10px;
    /* Rende il bottone leggermente trasparente finché non si passa sopra */
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.suggestion-card:hover .suggestion-follow-btn {
    opacity: 1;
}

    .theme-selector {
        /* Stili esistenti... */
    }

    .theme-option {
        text-align: center;
    }

    /* 1. Nascondiamo il radio button originale */
    .theme-option input[type="radio"] {
        display: none;
    }

    /* 2. Diamo uno stile base all'immagine */
    .theme-option label img {
        cursor: pointer;
        border: 3px solid #e0e0e0; /* Bordo grigio di default */
        border-radius: 8px;
        width: 100%; /* O la larghezza che preferisci */
        transition: border-color 0.2s ease-in-out;
    }
    
    .theme-option label span {
        display: block;
        margin-top: 5px;
        font-weight: 500;
        color: #555;
    }

    /* 3. Il trucco: quando il radio button è :checked, cambiamo il bordo dell'immagine! */
    /* Usiamo il selettore "+" per selezionare la label che segue immediatamente l'input */
    .theme-option input[type="radio"]:checked + label img {
        border-color: #8B5CF6; /* Il tuo colore principale o un altro a scelta */
    }
    
    .theme-option input[type="radio"]:checked + label span {
        color: #8B5CF6; /* Evidenziamo anche il testo */
    }