/* PayPal Donation
---------------------------------------- */

/* PayPal Donation page */

.section-app\/donate .content {
	font-size: 1.3em;
}

.section-app\/donate .content ul {
	margin: 0.8em 0 0.9em 3em;
}

/* PayPal Button */
.paypal-button {
	font-size: 14px;
	font-weight: bold;
	background: #ffc439;
	color: #003087;
	border-radius: 1000px;
	padding: 10px 40px;
}

.paypal-button:hover {
	box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.05);
}

/* PayPal loader */
.paypal-loading {
	display: none;
	align-items: center;
	gap: 0.5em;
}

.paypal-loading .fa-stack {
	color: #0070e0;
}

.submit-buttons:has(.paypal-loading) {
	min-height: 48px;
}

/* Progress bar */
.ppde-progress {
	--ppde-progress-height: clamp(16px, 2vw, 26px);
	--ppde-border-radius: 10px;
	display: flex;
	gap: 6px;
}

.progress-value {
	flex: 0 0 8ch;
	font-size: 12px;
	font-weight: bold;
	border-radius: var(--ppde-border-radius);
	padding: 1px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.progress-grey {
	background: #333333;
	background: linear-gradient(to bottom, #333333 0%, #666666 100%);
	border-radius: var(--ppde-border-radius);
	box-shadow: 0 2px 0 rgba(109, 109, 109, 0.3);
	flex: 1;
	overflow: auto;
}

.progress-color {
	--ppde-bg-saturation: 100%;
	--ppde-bg-lightness: 40%;
	--ppde-calc-width: calc(var(--ppde-progress-val) * 1%);
	--ppde-bg-hsl: hsl(var(--ppde-bg-hue, var(--ppde-progress-val)), var(--ppde-bg-saturation), var(--ppde-bg-lightness));
	border-radius: var(--ppde-border-radius, 10px);
	box-shadow:
			inset 0 10px 10px rgba(255, 255, 255, 0.3),
			inset 0 -10px 10px rgba(0, 0, 0, 0.5);
	position: relative;
	height: var(--ppde-progress-height, 20px);
	width: var(--ppde-calc-width);
	background-color: var(--ppde-bg-hsl);
	overflow: hidden;
	animation: ppde-move-start-to-end 2s;
}

.progress-used {
	--ppde-bg-hue: calc(100 - var(--ppde-progress-val));
	--ppde-animation-hue-from: 100;
}

.rtl {
	--ppde-gradient-angle: 45deg;
}

.progress-color:before {
	background-image: linear-gradient(var(--ppde-gradient-angle, -45deg), rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-size: var(--ppde-progress-height) var(--ppde-progress-height);
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
}

/* Text donation stats */
.donation-stats {
	text-align: center;
	margin-top: 10px;
}

/* form displaying */
.donation-value {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Don't animate progress bar according to user's preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
	.progress-color {
		animation: none;
	}
}

/* Animation keyframes */
@keyframes ppde-move-start-to-end {
	from {
		width: 0;
		background-color: hsl(var(--ppde-animation-hue-from, 0), var(--ppde-bg-saturation), var(--ppde-bg-lightness));
	}

	to {
		width: var(--ppde-calc-width);
		background-color: var(--ppde-bg-hsl);
	}
}