/**
 * PX Crowdfunding — Campaign stats, progress bar, photo.
 * Plugin CSS dequeued in enqueue.php via px_dequeue_plugin_styles().
 */


/* ==========================================================================
   1. STATS CARD — [crowdfunding] shortcode output
   ========================================================================== */

.crowdfunding-card-container {
	background: var(--navy);
	color: var(--white);
	padding: var(--space-d1) 0;
	margin: var(--space-d1) 0;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	box-shadow: var(--space-d3) 0 0 var(--navy), calc(var(--space-d3) * -1) 0 0 var(--navy);
}

.crowdfunding-amount span {
	font-size: var(--text-d2) !important;
}

.crowdfunding-goal-container,
.crowdfunding-progress-container {
	display: inline-block;
}

.crowdfunding-bar-container {
	height: 29px;
	max-width: 355px;
	margin-top: var(--space-d1);
	margin-bottom: var(--space-d075);
	overflow: hidden;
	background-color: var(--sand-light);
	border-radius: var(--radius-pill);
	padding: var(--space-d025);
	border: solid 2px var(--white);
}

.crowdfunding-bar {
	float: left;
	max-width: 100%;
	width: 0%;
	height: 15px;
	background-color: var(--action);
	border-radius: var(--radius-pill);
	transition: width var(--duration-slow) var(--ease-smooth);
	animation: crowdfunding-bar-fill 1.4s var(--ease-in) 1;
}

@keyframes crowdfunding-bar-fill {
	0% { width: 0%; }
}

@media (max-width: 767px) {
	.crowdfunding-amount-container {
		margin-bottom: var(--space-d075);
	}

	.crowdfunding-count-container {
		margin-top: var(--space-d025);
	}
}


/* ==========================================================================
   2. CAMPAIGN PHOTO — [crowdfunding_photo] shortcode output
   ========================================================================== */

.digicollect-photo:not(.organisatie),
.digicollect-photo:not(.organisatie) img {
	border-radius: var(--radius-full) !important;
	height: 150px;
	width: 150px;
	object-fit: cover;
	border: solid 2px var(--action);
}

.digicollect-photo.organisatie,
.digicollect-photo.organisatie img {
	height: auto;
	max-height: 50px;
	width: auto;
	object-fit: contain;
	border-radius: 0 !important;
	border: none;
}