/**
 * Donation module styles.
 *
 * Built on the theme's existing tokens (--primary-color-1 navy,
 * --highlight-color gold, DM Serif Text / Kumbh Sans) so the new controls read
 * as part of the price card system rather than bolted on.
 *
 * Featured cards invert to a gold background, so anything placed inside one is
 * re-coloured via [data-featured="true"] descendant rules.
 */

/* -------------------------------------------------------------------------
 * One-time / monthly toggle
 * ---------------------------------------------------------------------- */

.manza-donate-interval {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 0 auto 40px;
	padding: 5px;
	width: fit-content;
	max-width: 100%;
	background-color: var(--primary-color-3);
	border-radius: 50vh;
}

.manza-donate-interval__opt {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 13px 26px 14px;
	background: transparent;
	color: var(--neutral-color-1);
	font-family: var(--tertiary-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 50vh;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.manza-donate-interval__opt:hover {
	color: var(--highlight-color);
}

.manza-donate-interval__opt.is-active {
	background-color: var(--highlight-color);
	color: var(--primary-color-1);
}

.manza-donate-interval__opt:focus-visible {
	outline: 2px solid var(--highlight-color);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Donate button
 *
 * Reuses .btn-theme but on a <button>, which needs the usual UA resets.
 * ---------------------------------------------------------------------- */

.manza-donate-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--tertiary-font);
	text-align: center;
}

.manza-donate-btn[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/*
 * Open-amount card: the button sits in normal flow beneath the amount field
 * rather than being pinned to the card corner like .price-pos, which would
 * otherwise overlap the input on a card that has no price block.
 */
.manza-donate-btn--flow {
	position: static;
	display: inline-block;
	margin-top: 6px;
}

.manza-donate-btn:focus-visible {
	outline: 2px solid var(--highlight-color);
	outline-offset: 3px;
}

.price-card-container[data-featured="true"] .manza-donate-btn:focus-visible {
	outline-color: var(--primary-color-1);
}

/* -------------------------------------------------------------------------
 * Open "any amount" card
 * ---------------------------------------------------------------------- */

.manza-donate-custom {
	margin-bottom: 25px;
}

.manza-donate-custom__label {
	display: block;
	margin-bottom: 8px;
	color: var(--neutral-color-1);
	font-family: var(--tertiary-font);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.price-card-container[data-featured="true"] .manza-donate-custom__label {
	color: var(--primary-color-1);
}

.manza-donate-custom__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background-color: var(--neutral-color-1);
	border-radius: 5px;
}

.manza-donate-custom__currency {
	color: var(--primary-color-1);
	font-family: var(--primary-font);
	font-size: 1.8rem;
	font-style: italic;
	line-height: 1;
}

.manza-donate-custom__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--primary-color-1);
	font-family: var(--primary-font);
	font-size: 1.8rem;
	font-style: italic;
	line-height: 1;
}

.manza-donate-custom__input:focus {
	outline: none;
}

.manza-donate-custom__row:focus-within {
	box-shadow: 0 0 0 2px var(--highlight-color);
}

.price-card-container[data-featured="true"] .manza-donate-custom__row:focus-within {
	box-shadow: 0 0 0 2px var(--primary-color-1);
}

.manza-donate-custom__hint {
	margin: 10px 0 0;
	color: var(--neutral-color-3);
	font-family: var(--tertiary-font);
	font-size: 0.72rem;
	line-height: 1.5;
}

.price-card-container[data-featured="true"] .manza-donate-custom__hint {
	/* Gold card: the light neutral washes out, so lean on the navy instead. */
	color: var(--primary-color-1);
	opacity: 0.75;
}

/* Strip the spinner; the field is a currency entry, not a stepper. */
.manza-donate-custom__input::-webkit-outer-spin-button,
.manza-donate-custom__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.manza-donate-custom__input[type="number"] {
	-moz-appearance: textfield;
}

/* -------------------------------------------------------------------------
 * Inline messages
 * ---------------------------------------------------------------------- */

/* Validation has to read as an error, not as more body copy. The old yellow
   sat at the same weight and size as the hint above it, so a donor who hit
   Donate on an empty field read it as decoration and assumed nothing happened.
   Two reds: a light one that carries on the dark cards, a deep one for the
   featured card, since a single value cannot clear both backgrounds. */
.manza-donate-error {
	margin: 14px 0 0;
	color: hsl(4, 90%, 68%);
	font-family: var(--tertiary-font);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
}

.price-card-container[data-featured="true"] .manza-donate-error {
	color: hsl(4, 78%, 34%);
	font-weight: 700;
}

.manza-donate-notice {
	margin: 14px 0 0;
	color: var(--neutral-color-3);
	font-family: var(--tertiary-font);
	font-size: 0.8rem;
	font-style: italic;
}

/* The cream default disappears against the featured card's yellow fill, same
   reason .manza-donate-error is overridden above. */
.price-card-container[data-featured="true"] .manza-donate-notice {
	color: var(--primary-color-1);
}

/* -------------------------------------------------------------------------
 * Return-from-Stripe notice
 * ---------------------------------------------------------------------- */

.manza-donate-return {
	margin: 0 auto 40px;
	padding: 24px 30px;
	max-width: 760px;
	border-radius: 5px;
	font-family: var(--tertiary-font);
	font-size: 0.95rem;
	line-height: 1.6;
}

.manza-donate-return p {
	margin: 0;
}

.manza-donate-return--ok {
	background-color: var(--highlight-color);
	color: var(--primary-color-1);
}

.manza-donate-return--info {
	background-color: var(--primary-color-3);
	color: var(--neutral-color-1);
}

/* -------------------------------------------------------------------------
 * Benefit thresholds
 * ---------------------------------------------------------------------- */

.manza-donate-thresholds {
	margin: 50px auto 0;
	padding-top: 30px;
	max-width: 860px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: center;
	font-family: var(--tertiary-font);
	line-height: 1.7;
}

.manza-donate-thresholds p {
	margin: 0 0 12px;
}

.manza-donate-thresholds p:last-child {
	margin-bottom: 0;
}

.manza-donate-thresholds a {
	color: var(--highlight-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Donor recognition wall
 * ---------------------------------------------------------------------- */

.manza-donor-wall {
	margin: 60px auto 0;
	max-width: 1000px;
	text-align: center;
}

.manza-donor-wall__title {
	margin-bottom: 30px;
}

.manza-donor-wall__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.manza-donor-wall__name {
	margin: 0;
	color: var(--neutral-color-1);
	font-family: var(--primary-font);
	font-size: 1.25rem;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Small screens
 *
 * .price-container is absolutely positioned bottom-right in the base theme,
 * which collides with the taller open-amount card on narrow viewports.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	/*
	 * Keep the two options side by side rather than stacking. A stacked toggle
	 * reads as two separate buttons, which loses the "one or the other" meaning
	 * the pill shape is carrying. They split the row evenly instead.
	 */
	.manza-donate-interval {
		width: 100%;
	}

	.manza-donate-interval__opt {
		flex: 1 1 0;
		min-width: 0;
		padding: 13px 8px 14px;
		font-size: 0.72rem;
		letter-spacing: 0.3px;
		white-space: nowrap;
	}

	.manza-donor-wall__list {
		gap: 10px 24px;
	}

	.manza-donor-wall__name {
		font-size: 1.1rem;
	}
}

/* Narrowest phones: shed a little more so "Give monthly" never wraps. */
@media (max-width: 360px) {
	.manza-donate-interval__opt {
		padding: 12px 4px 13px;
		font-size: 0.66rem;
		letter-spacing: 0;
	}
}