/* Line summary stats */

.summary-stats {
	font-weight: bold;
    font-size: 22px;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

p.head-line {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 16px;
}

span#stat1 {
    border-left: 1px solid #c5c5c5;
    margin-left: 10px;
    padding-left: 10px;
}

span#stat2 {
    border-left: 1px solid #c5c5c5;
    margin-left: 10px;
    padding-left: 10px;
}

span#stat3 {
    border-left: 1px solid #c5c5c5;
    margin-left: 10px;
    padding-left: 10px;
}

#stat1-label {
font-weight: 500;
    font-style: italic;
    font-size: 16px;
    text-transform: uppercase;
}

#stat2-label {
font-weight: 500;
    font-style: italic;
    font-size: 16px;
    text-transform: uppercase;
}

#stat3-label {
font-weight: 500;
    font-style: italic;
    font-size: 16px;
    text-transform: uppercase;
}


/* Contenitore principale dei voti */
.topvote-container {
	flex-direction: column;
	margin-left: 15px;
	order: 2;
	display: flex;
	align-items: stretch;
	gap: 0.625rem;
}

.topvote-content {
    display: flex;
    flex-direction: column;
    gap: .3125rem;
}

.topvote-stretch {
	display: flex;
    align-items: flex-start;
    font-size: .6875rem;	
}

/* Container dei pulsanti di voto */
.topvote-buttons {display: flex;flex-direction: column;max-width: 120px;}

.topvote-button-up-down {
	display: flex;
    flex-direction: row;
    gap: 10px;
}

.topvote-vote-wrapper {
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    overflow: hidden;
}

/* Contenitore per ciascun pulsante e conteggio voti */
.topvote-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Stile dei pulsanti di voto */
.topvote-button {
    width: 55px;
    height: 45px;
    background: linear-gradient(#fbfbfb, #f8f8f8);
    display: inline-flex;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000; /* Colore iniziale */
    justify-content: center;
    align-items: center;
}

.topvote-icon {
	width: 25px;
    height: 25px;
    display: inline-flex;
    margin-top: 5px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Freccia verso l'alto */
.topvote-icon-up {
    background-image: url('../../assets/img/arrow.svg'); /* Freccia nera di default */
}

.topvote-icon-down {
    transform: rotate(180deg);
    background-image: url('../../assets/img/arrow.svg'); /* Freccia nera di default */
    margin-bottom: 6px;
}

.topvote-button:hover .topvote-icon {
    background-image: url('../../assets/img/arrow.svg'); /* Freccia nera su hover */
}

.topvote-button.topvote-up.active .topvote-icon-up {
    background-image: url('../../assets/img/arrow-white.svg'); /* Freccia bianca quando attiva */
}

/* Stato attivo: Freccia verso il basso diventa bianca */
.topvote-button.topvote-down.active .topvote-icon-down {
    background-image: url('../../assets/img/arrow-white.svg'); /* Freccia bianca quando attiva */
}

/* Stato inattivo: Freccia verso l'alto diventa grigia */
.topvote-button.topvote-up.inactive .topvote-icon-up {
    background-image: url('../../assets/img/arrow-grey.svg'); /* Freccia grigia quando inattiva */
}

/* Stato inattivo: Freccia verso il basso diventa grigia */
.topvote-button.topvote-down.inactive .topvote-icon-down {
    background-image: url('../../assets/img/arrow-grey.svg'); /* Freccia grigia quando inattiva */
}

/* Conteggio voti combinato */
.topvote-total-votes {
    font-size: 12px;
    color: #333;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

/* Conteggio voti individuali */
.topvote-up-count,
.topvote-down-count {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-top: 5px;
    color: inherit; /* Eredita il colore dal contenitore */
}

/* Pulsante attivo Upvote */
.topvote-button.topvote-up.active {
    background: #3fa8ff;
    color: #fff;
}

/* Pulsante attivo Downvote */
.topvote-button.topvote-down.active {
    background: #ff3f3f;
    border: none;
    color: #fff;
}

.topvote-agency-name h2 {
	font-size: 24px;
	word-wrap: break-word; /* Forza il testo lungo ad andare a capo */
	margin-bottom: 0;
	word-break: break-word; /* Spezza le parole troppo lunghe */
	text-align: left; /* Allinea il testo a sinistra */
	max-width: 100%;
}

/* Pulsanti inattivi */
.topvote-button.inactive {
    background: none;
    border: none;
    color: #a0a0a0;
}

/* Colore del conteggio voti per Upvote attivo */
.topvote-button-container .topvote-button.topvote-up.active + .topvote-up-count {
    color: #112d6d;
}

/* Colore del conteggio voti per Downvote attivo */
.topvote-button-container .topvote-button.topvote-down.active + .topvote-down-count {
    color: #d32f2f;
}

/* Colore del conteggio voti per pulsanti inattivi */
.topvote-button-container .topvote-button.inactive + .topvote-up-count,
.topvote-button-container .topvote-button.inactive + .topvote-down-count {
    color: #a0a0a0;
}

/* Struttura generale per gli elementi con votazione abilitata */
.voting-enabled-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.voting-enabled-item .item-content {
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* Colonna 1: Logo e Nome */
.voting-enabled-item .item-logo-name {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Centro l'immagine nel contenitore */
    position: relative;
     /* Imposta una larghezza fissa per mantenere il rapporto */
    height: auto;';;
}

.voting-enabled-item .item-first-block {
	display: flex;
	flex-direction: row;
	flex: 0 0 32%;
}

.voting-enabled-item .item-logo-name img {
    max-width: 190px; /* Limita la larghezza dell'immagine */
    ';;
;width: 100%;
    height: auto;
    ;;;;;;;;;;;;;;;;;;aspect-ratio: 4 / 3;;;;;;;;;;;;;;;;;;; /* Imposta il rapporto 16:9 o 4:3 */
    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;object-fit: cover;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; /* Mantiene l'immagine centrata e la adatta al contenitore senza distorsione */
    border-radius: 6px;';;
}

.voting-enabled-item .item-logo-name h2 {
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
}

.voting-enabled-item .feature_desc {
    margin-top: 0;
    margin-bottom: 1px;
    padding: 0;
    background: none;
    color: #00000069;
    font-weight: 400;
    font-size: 14px;
}

/* Colonna 2: Sistema di voto */
.voting-enabled-item .item-voting {
    flex: 0 0 60%;
    display: flex;
}

/* Colonna 3: Descrizione e Informazioni */
.voting-enabled-item .item-info {
    padding: 0 15px;
    display: flex;
    flex: 0 0 68%;
    border-left: 1px dashed #dfdfdf;
    flex-direction: column;
}

.voting-enabled-item .tabelle_light_description {
    font-size: 15px;
    line-height: 1.6;
}

/* Colonna 4: CTA e Rating */
.voting-enabled-item .item-cta-rating {
    display: flex;
    justify-content: flex-end;
}

.voting-enabled-item .item-cta-rating a {
    display: inline-block;
    padding: 8px 50px;
    background-color: #e8eff5;
    color: #084a7e;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    margin-top: 10px;
}

.voting-enabled-item .item-cta-rating a:hover {
    background-color: #3f85d1;
    color: #fff;
}

.voting-enabled-item .numero-container span.numero {
	height: 2.9rem;
	font-size: 1.5rem;
	padding: 0 .60rem;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 .5rem .5rem 0;
	background-color: #ffffffe4;
	box-shadow: .130rem 0 .130rem #00000030;
	color: #111;
}

    .voting-enabled-item .numero-container {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    }

/* Aggiungi queste regole al tuo file CSS per la rotazione */
.voting-number {
    display: inline-block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.rotate-up {
    transform: rotateX(90deg);
    opacity: 0;
}

.rotate-down {
    transform: rotateX(-90deg);
    opacity: 0;
}

.rotate-reset {
    transform: rotateX(0deg);
    opacity: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Versione Mobile */

@media (max-width: 768px) {

	.voting-enabled-item .item-content {
		display: flex;
		flex-direction: column;
	}
	
	.voting-enabled-item .item-info {
	    border-left: none;
		margin-top: 20px;
		flex: 0 0 100%;
		padding: 0;	
	}

	
	.voting-enabled-item .item-cta-rating {
    display: flex;
    justify-content: center;
}
}