/**
 * Fundraising Progress Bar Styles
 * Matches the design from index.html
 */

.project-progress {
	margin-bottom: 14px;
}

.progress-bar {
	width: 100%;
	height: 10px;
	background: #E4E7E7;
	border-radius: 999px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(135deg, #C9A24D 0%, #B8923F 100%);
	border-radius: 999px;
	width: 0;
	transition: width 0.3s ease;
	animation: fillProgress 1.5s ease-out forwards;
}

@keyframes fillProgress {
	from {
		width: 0;
	}
}

.project-stats {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #4A5054;
	margin-top: 8px;
	margin-bottom: 16px;
}

/* Fallback for custom classes - maintain compatibility */
.fr-progress-bar {
	margin: 20px 0;
}

.fr-progress-bar__container {
	width: 100%;
	height: 10px;
	background: #E4E7E7;
	border-radius: 999px;
	overflow: hidden;
}

.fr-progress-bar__fill {
	height: 100%;
	background: linear-gradient(135deg, #C9A24D 0%, #B8923F 100%);
	border-radius: 999px;
	width: 0;
	transition: width 0.3s ease;
	animation: fillProgress 1.5s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.project-stats {
		font-size: 13px;
		flex-direction: column;
		gap: 4px;
	}
}

/* ============================================
   Dual Zakat/Sadaqa Input Styles
   ============================================ */

.fr-project-donation-types {
	width: 100%;
	margin-top: 8px;
}

.fr-donation-type-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	margin-bottom: 4px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.fr-donation-type-row:last-child {
	margin-bottom: 0;
}

/* Zakat row styling - green accent */
.fr-donation-type-zakat {
	background-color: rgba(46, 139, 87, 0.08);
	border-left: 3px solid #2E8B57;
}

.fr-donation-type-zakat:hover,
.fr-donation-type-zakat:focus-within {
	background-color: rgba(46, 139, 87, 0.15);
}

.fr-donation-type-zakat .fr-type-name {
	color: #2E8B57;
	font-weight: 600;
	font-size: 13px;
}

.fr-donation-type-zakat .fr-project-amount-input-wrapper input {
	border-color: #2E8B57;
}

.fr-donation-type-zakat .fr-project-amount-input-wrapper input:focus {
	box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.25);
	border-color: #2E8B57;
}

/* Sadaqa row styling - gold accent */
.fr-donation-type-sadaqa {
	background-color: rgba(212, 160, 23, 0.08);
	border-left: 3px solid #D4A017;
}

.fr-donation-type-sadaqa:hover,
.fr-donation-type-sadaqa:focus-within {
	background-color: rgba(212, 160, 23, 0.15);
}

.fr-donation-type-sadaqa .fr-type-name {
	color: #B8923F;
	font-weight: 600;
	font-size: 13px;
}

.fr-donation-type-sadaqa .fr-project-amount-input-wrapper input {
	border-color: #D4A017;
}

.fr-donation-type-sadaqa .fr-project-amount-input-wrapper input:focus {
	box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.25);
	border-color: #D4A017;
}

/* Donation type label */
.fr-donation-type-label {
	display: flex;
	align-items: center;
	min-width: 70px;
}

/* Amount input within donation type row */
.fr-donation-type-row .fr-project-amount-input-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fr-donation-type-row .fr-project-amount-input-wrapper input {
	width: 100px;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	text-align: right;
}

.fr-donation-type-row .fr-currency-symbol {
	color: #666;
	font-size: 14px;
}

/* Project wrapper adjustments for dual inputs */
.fr-project-item .fr-project-wrapper {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 18px 20px;
	gap: 14px;
}

.fr-project-item .fr-project-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.fr-project-item .fr-project-info {
	margin-bottom: 4px;
}

/* Totals section enhancements */
.fr-donation-totals .fr-total-zakat,
.fr-donation-totals .fr-total-sadaqa {
	font-size: 14px;
}

/* Responsive for donation type rows */
@media (max-width: 480px) {
	.fr-donation-type-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.fr-donation-type-row .fr-project-amount-input-wrapper {
		width: 100%;
	}

	.fr-donation-type-row .fr-project-amount-input-wrapper input {
		width: 100%;
	}
}