/**
 * Styles for the Stripe Card Element rendered by the gateway.
 */
.give-ccc-fields {
	margin: 0.5rem 0 1rem;
}

.give-ccc-card-element {
	padding: 0.85rem 0.75rem;
	border: 1px solid #b5bfc9;
	border-radius: 6px;
	background: #fff;
}

.give-ccc-card-element--focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.give-ccc-card-errors {
	margin-top: 0.5rem;
	min-height: 1.2em;
	color: #d63638;
	font-size: 0.875rem;
}

/*
 * Remove GiveWP's standalone currency badge (the "$" / "CAD" pill shown next to
 * the Donation Amount heading on v3 forms). The donation levels and the custom
 * amount field keep their own "$" formatting.
 */
.givewp-fields-amount__currency-container {
	display: none !important;
}

/*
 * Donation levels layout: put the amount + name together inside ONE box, and lay
 * the boxes out as a grid (up to 5 across → 2 rows of 5 for 10 levels).
 * Targets GiveWP v3 amount-level markup:
 *   .givewp-fields-amount__levels-container--has-descriptions
 *     > .givewp-fields-amount__level-container(--col)
 *         > button.givewp-fields-amount__level
 *         > span.givewp-fields-amount__level__description
 */
.givewp-fields-amount__levels-container--has-descriptions {
	display: grid !important;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) ) !important;
	grid-auto-rows: auto !important;
	align-items: start !important;
	gap: 0.75rem !important;
}

/* Each level becomes a single bordered box holding amount (top) + name (bottom). */
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level-container,
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level-container--col {
	flex: initial !important;
	flex-basis: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 0 !important;
	border: 1px solid #b5bfc9;
	border-radius: 0.5rem;
	overflow: hidden;
}

/* The amount button fills the box; drop its own border/radius and shrink height. */
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level {
	width: 100% !important;
	flex: 0 0 auto !important;
	min-height: 0 !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.5rem 0.5rem 0.2rem !important;
	font-size: 0.9rem !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

/* The name/description, centered under the amount. */
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level__description {
	justify-content: center !important;
	text-align: center !important;
	min-height: 0 !important;
	padding: 0 0.4rem 0.45rem !important;
	font-size: 0.85rem;
	line-height: 1.2 !important;
}

/* Change the whole box colour at once on select (no lagging fade on the amount). */
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level-container,
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level,
.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level__description {
	transition: none !important;
}

/*
 * Selected level: fill the WHOLE box (amount + name) with the form's green and
 * use white text. Uses GiveWP's primary-color variable when available, with a
 * green fallback; all three parts use the same value so the box is uniform.
 */
.givewp-fields-amount__levels-container--has-descriptions
	.givewp-fields-amount__level-container:has( .givewp-fields-amount__level--selected ) {
	background-color: var( --givewp-primary-color, #7ac142 ) !important;
	border-color: var( --givewp-primary-color, #7ac142 ) !important;
}

.givewp-fields-amount__levels-container--has-descriptions .givewp-fields-amount__level--selected {
	background-color: var( --givewp-primary-color, #7ac142 ) !important;
	color: #fff !important;
}

.givewp-fields-amount__levels-container--has-descriptions
	.givewp-fields-amount__level-container:has( .givewp-fields-amount__level--selected )
	.givewp-fields-amount__level__description {
	color: #fff !important;
	background-color: transparent !important;
}

/* Narrow screens: 5 across is too tight, so drop to 2 columns. */
@media ( max-width: 600px ) {
	.givewp-fields-amount__levels-container--has-descriptions {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}