/* Progetto singolo: widget cfl-project-summary (riquadro raccolta) e cfl-project-donors (ringraziamenti).
 * Design Figma "5-Partner-Singolo" (5050:2638), colonna destra. */

/* ---------- Riquadro raccolta ---------- */
.cfl-project-summary {
	padding: 25px 30px 30px;
	border: 1px solid #bdbdbd;
	background: #fff;
	color: #1c1c1c;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	line-height: 1.25;
}

.cfl-project-summary p,
.cfl-project-summary ul {
	margin: 0;
	padding: 0;
}

.cfl-project-summary ul {
	list-style: none;
}

.cfl-project-summary__head {
	margin-bottom: 38px;
}

.cfl-project-summary .cfl-project-summary__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.cfl-project-summary .cfl-project-summary__ente {
	margin-top: 10px;
	font-family: "Lato", sans-serif;
	font-size: 14px;
}

.cfl-project-summary__ente span {
	color: #007b81;
}

.cfl-project-summary__body {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.cfl-project-summary .cfl-project-summary__stats {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.cfl-project-summary__stats strong {
	font-weight: 700;
	color: #033540;
}

.cfl-project-summary .cfl-project-summary__match {
	margin-top: 8px;
	font-size: 12px;
	line-height: 22px;
	color: #3b3c3b;
}

.cfl-project-summary__match strong {
	font-weight: 600;
}

/* Percentuale e ampolla (design: barra 53 x 265 con bordo #033540 e liquido menta con onda).
 * Il contenitore .cfl-project-summary__bar ha role="progressbar"; l'ampolla dentro è decorativa.
 * Senza JS: livello finale statico. Con JS (cfl-progetto.js): il liquido sale quando l'ampolla entra
 * nello schermo (.is-pending → livello 0), l'onda e le bolle si muovono solo se visibile (.is-visible). */
.cfl-project-summary__meter {
	display: flex;
	flex: 0 0 61px;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.cfl-project-summary .cfl-project-summary__pct {
	font-size: 20px;
	font-weight: 700;
	color: #033540;
	white-space: nowrap;
}

.cfl-project-summary__bar {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	width: 61px;
	min-height: 200px;
}

/* Bordo superiore (labbro dell'ampolla) */
.cfl-project-summary__bar::before {
	content: "";
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 61px;
	height: 9px;
	border: 2px solid #033540;
	border-radius: 5px;
	background: #fff;
}

.cfl-project-summary__vessel {
	position: relative;
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 53px;
	margin-top: -2px;
	border: 2px solid #033540;
	border-top: 0;
	border-radius: 0 0 26px 26px;
	background: #f3fbf8;
	overflow: hidden;
}

/* Riflesso del vetro */
.cfl-project-summary__vessel::after {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 30px;
	left: 7px;
	z-index: 2;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .4));
	pointer-events: none;
}

.cfl-project-summary__fill {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--cfl-level, 0%);
	background: linear-gradient(#4cf3c1, #33d6a8);
	transition: height 1.8s cubic-bezier(.22, 1, .36, 1);
}

.cfl-project-summary__bar.is-pending .cfl-project-summary__fill {
	height: 0;
}

/* Superficie: due onde sovrapposte (dietro teal trasparente, davanti menta), tile da 48px */
.cfl-project-summary__fill::before,
.cfl-project-summary__fill::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(100% - 1px);
	left: 0;
	height: 8px;
	background-repeat: repeat-x;
	background-size: 48px 8px;
}

.cfl-project-summary__fill::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath fill='%23007B81' fill-opacity='.35' d='M0 4Q12 0 24 4T48 4V8H0Z'/%3E%3C/svg%3E");
	background-position: 24px 0;
	bottom: calc(100% + 1px);
}

.cfl-project-summary__fill::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath fill='%234CF3C1' d='M0 4Q12 8 24 4T48 4V8H0Z'/%3E%3C/svg%3E");
}

.cfl-project-summary__bar.is-animated.is-visible .cfl-project-summary__fill::after {
	animation: cfl-wave 2.4s linear infinite;
}

.cfl-project-summary__bar.is-animated.is-visible .cfl-project-summary__fill::before {
	animation: cfl-wave-back 3.6s linear infinite;
}

@keyframes cfl-wave {
	from { background-position-x: 0; }
	to { background-position-x: 48px; }
}

@keyframes cfl-wave-back {
	from { background-position-x: 24px; }
	to { background-position-x: -24px; }
}

/* Bolle: solo con l'animazione attiva */
.cfl-project-summary__bubble {
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 5px;
	height: 5px;
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	opacity: 0;
}

.cfl-project-summary__bubble:nth-child(2) {
	left: 58%;
	width: 4px;
	height: 4px;
}

.cfl-project-summary__bubble:nth-child(3) {
	left: 44%;
	width: 3px;
	height: 3px;
}

.cfl-project-summary__bar.is-animated.is-visible:not(.is-pending) .cfl-project-summary__bubble {
	animation: cfl-bubble 3.2s ease-in 1.8s infinite;
}

.cfl-project-summary__bar.is-animated.is-visible:not(.is-pending) .cfl-project-summary__bubble:nth-child(2) {
	animation-duration: 4s;
	animation-delay: 2.6s;
}

.cfl-project-summary__bar.is-animated.is-visible:not(.is-pending) .cfl-project-summary__bubble:nth-child(3) {
	animation-duration: 3.6s;
	animation-delay: 3.4s;
}

@keyframes cfl-bubble {
	0% { bottom: 2px; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: .8; }
	100% { bottom: calc(100% - 6px); opacity: 0; }
}

/* Movimento ridotto: livello finale statico, niente onde né bolle */
@media (prefers-reduced-motion: reduce) {
	.cfl-project-summary__fill {
		transition: none;
	}

	.cfl-project-summary__bar.is-pending .cfl-project-summary__fill {
		height: var(--cfl-level, 0%);
	}

	.cfl-project-summary__bar .cfl-project-summary__fill::before,
	.cfl-project-summary__bar .cfl-project-summary__fill::after {
		animation: none !important;
	}

	.cfl-project-summary__bubble {
		display: none;
	}
}

/* Pulsanti (design: pillola 294 x 45, Montserrat 700 14 maiuscolo) */
.cfl-project-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 40px;
}

.cfl-project-summary a.cfl-project-summary__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 13px 16px;
	border: 1px solid #007b81;
	border-radius: 62px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s, color .2s;
}

.cfl-project-summary a.cfl-project-summary__btn--primary {
	border-color: #4cf3c1;
	background: #4cf3c1;
	color: #033540;
}

.cfl-project-summary a.cfl-project-summary__btn--outline {
	background: #fff;
	color: #007b81;
}

.cfl-project-summary a.cfl-project-summary__btn--primary:hover,
.cfl-project-summary a.cfl-project-summary__btn--primary:focus-visible {
	border-color: #033540;
	background: #033540;
	color: #fff;
}

.cfl-project-summary a.cfl-project-summary__btn--outline:hover,
.cfl-project-summary a.cfl-project-summary__btn--outline:focus-visible {
	background: #007b81;
	color: #fff;
}

.cfl-project-summary a.cfl-project-summary__btn:focus-visible {
	outline: 2px solid #033540;
	outline-offset: 3px;
}

/* Raccolta conclusa: stato (non un pulsante) al posto dei pulsanti */
.cfl-project-summary .cfl-project-summary__status {
	margin-top: 40px;
	padding: 13px 16px;
	border-radius: 62px;
	background: #f0f0f0;
	color: #033540;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.cfl-project-summary a.cfl-project-summary__btn {
		transition: none;
	}
}

/* ---------- Ringraziamenti ---------- */
.cfl-project-donors {
	padding: 32px 39px 36px;
	background: #e3f5f6;
}

.cfl-project-donors .cfl-project-donors__title {
	margin: 0 0 30px;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #1c1c1c;
}

.cfl-project-donors .cfl-project-donors__list {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfl-project-donors__list li {
	min-height: 20px;
	padding-left: 29px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10.7 1.56l2.27 4.58a.74.74 0 0 0 .59.43l5.01.74a.75.75 0 0 1 .43 1.33l-3.61 3.59a.74.74 0 0 0-.23.69l.87 5.04a.75.75 0 0 1-1.14.83l-4.51-2.39a.84.84 0 0 0-.74 0l-4.51 2.39a.75.75 0 0 1-1.14-.83l.87-5.1a.74.74 0 0 0-.23-.69L.96 8.64a.75.75 0 0 1 .47-1.33l5.01-.74a.74.74 0 0 0 .59-.43L9.3 1.56a.75.75 0 0 1 1.4 0z' fill='%23FAE0B2' stroke='%23007B81' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 20px 20px;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #3b3c3b;
}