/* Frontend styles for WooCommerce Custom Donation Amount */

.wcd-donation-wrapper {
	margin-bottom: 1.5em;
	padding: 15px;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	background-color: #fcfcfc;
}

.wcd-donation-label {
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
}

.wcd-donation-input-container {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.wcd-currency-symbol {
	padding: 0 10px;
	font-size: 1.2em;
	color: #333;
}

.wcd-donation-input {
	flex-grow: 1;
	max-width: 200px;
	padding: 8px;
	font-size: 1.1em;
}

.wcd-suggested-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wcd-suggested-amount {
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px 15px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.wcd-suggested-amount:hover, .wcd-suggested-amount:focus {
	background-color: #ddd;
	border-color: #999;
}