/* Sezione commenti degli articoli (colori e font del sito: verde Money, blu titoli, Mulish) */

.commenti {
	--commenti-verde: #45c203;
	--commenti-verde-scuro: #379b02;
	--commenti-verde-chiaro: #eef9e8;
	--commenti-blu: #24354d;
	--commenti-testo: #39495e;
	--commenti-grigio: #828a95;
	--commenti-bordo: #e6e9f0;
	--commenti-fondo: #f6f7fa;
	margin: 2.5rem 0 1.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--commenti-bordo);
	color: var(--commenti-testo);
}

.commenti [hidden] {
	display: none !important;
}

.commenti__testa {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.5rem;
}

.commenti__titolo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 800;
	color: var(--commenti-blu);
}

.commenti__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: 9999px;
	background: var(--commenti-verde);
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
}

/* Modulo */

.commenti__modulo {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: .75rem;
	background: #fff;
	border: 1px solid var(--commenti-bordo);
	border-radius: .5rem;
	transition: border-color .15s;
}

.commenti__modulo:focus-within {
	border-color: var(--commenti-verde);
}

.commenti__testo {
	width: 100%;
	min-height: 3rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--commenti-bordo);
	padding-bottom: .75rem;
	resize: vertical;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--commenti-testo);
	background: transparent;
	outline: none;
}

.commenti__testo::placeholder {
	color: var(--commenti-grigio);
}

.commenti__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.commenti__formati {
	display: flex;
	gap: .25rem;
}

.commenti__formato {
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: .25rem;
	background: transparent;
	color: var(--commenti-blu);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.commenti__formato:hover {
	background: var(--commenti-fondo);
}

.commenti__invia,
.commenti__bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .625rem 1.25rem;
	border: 1px solid var(--commenti-verde);
	border-radius: 9999px;
	background: var(--commenti-verde);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.5rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.commenti__invia:hover,
.commenti__bottone:hover {
	background: var(--commenti-verde-scuro);
	border-color: var(--commenti-verde-scuro);
	color: #fff;
}

.commenti__invia[disabled] {
	opacity: .6;
	cursor: wait;
}

.commenti__bottone--secondario {
	background: #fff;
	color: var(--commenti-verde-scuro);
}

.commenti__bottone--secondario:hover {
	background: var(--commenti-verde-chiaro);
	color: var(--commenti-verde-scuro);
}

.commenti__risposta-a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .875rem;
	color: var(--commenti-grigio);
}

.commenti__risposta-a strong {
	color: var(--commenti-blu);
}

.commenti__annulla {
	border: 0;
	background: none;
	color: var(--commenti-grigio);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.commenti__messaggio {
	margin: 0;
	font-size: .875rem;
	color: #c0392b;
}

.commenti__messaggio--ok {
	color: var(--commenti-verde-scuro);
}

.commenti__accedi {
	padding: 1rem;
	border-radius: .5rem;
	background: var(--commenti-verde-chiaro);
}

.commenti__accedi-testo {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	line-height: 1.375rem;
	color: var(--commenti-blu);
}

.commenti__accedi-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.commenti__nota {
	margin: 0;
	font-size: .8125rem;
	color: var(--commenti-grigio);
}

.commenti__nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Lista */

.commenti__lista {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.commenti__thread:not(:has(.commento)) {
	display: none;
}

.commenti__thread--altro {
	display: none;
}

.commenti--tutti .commenti__thread:not(:has(.commento)) {
	display: none;
}

.commenti__thread--altro {
	display: block;
}

.commenti__risposte {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding-left: 3rem;
}

.commenti__risposte > .commento:first-child {
	margin-top: .75rem;
}

.commenti__altri {
	align-self: center;
	padding: .5rem 1.25rem;
	border: 1px solid var(--commenti-bordo);
	border-radius: 9999px;
	background: #fff;
	color: var(--commenti-blu);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.commenti--tutti .commenti__altri {
	display: none;
}

.commenti__vuoto {
	margin: 0;
	color: var(--commenti-grigio);
}

.commento--risposta {
	padding: .75rem;
	border-left: 2px solid var(--commenti-verde);
	background: var(--commenti-fondo);
}

.commento--nuovo {
	animation: commento-nuovo 2.5s ease-out;
}

@keyframes commento-nuovo {
	from { background-color: var(--commenti-verde-chiaro); }
}

.commento__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .5rem;
}

.commento__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: var(--commenti-verde-chiaro);
	color: var(--commenti-verde-scuro);
	font-size: .875rem;
	font-weight: 800;
}

.commento__nome {
	font-weight: 800;
	color: var(--commenti-blu);
}

.commento__premium {
	display: inline-flex;
	align-items: center;
	padding: .125rem .5rem;
	border-radius: 9999px;
	background: var(--commenti-verde);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.commento__data {
	font-size: .875rem;
	color: var(--commenti-grigio);
}

.commento__corpo {
	padding-left: 3rem;
}

.commento__testo {
	font-size: 1rem;
	line-height: 1.5rem;
	overflow-wrap: anywhere;
}

.commento__testo p {
	margin: .5rem 0 0;
}

.commento__rispondi {
	margin-top: .25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--commenti-verde-scuro);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 767px) {
	.commenti__risposte,
	.commento__corpo {
		padding-left: 0;
	}

	.commenti__risposte {
		padding-left: 1rem;
	}

	.commenti__barra {
		flex-wrap: wrap;
	}
}