/* ── Join & Donate picker (membership pages) ── */
.caeps-donation-picker {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 1.1em 0;
	padding: 1em 1.1em;
	border: 2px solid var(--caeps-color-border, #e3e6ea);
	border-radius: var(--caeps-radius-md, 8px);
	background: var(--caeps-color-surface-sunken, #f1f5f9);
}

.caeps-donation-picker__label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--caeps-color-text, #1f2937);
	margin-bottom: 0.6em;
}

/* Amount options as a responsive grid of donation-style buttons. */
.caeps-donation-picker__amounts {
	display: grid;
	/* 5.5em = 88px at the default size, and grows with text-only zoom, so
	   the one-line labels below never outgrow their button. */
	grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));
	gap: 0.6em;
}

.caeps-donation-picker__amount {
	margin: 0;
	cursor: pointer;
}

/* Visually hide the radio; the label span is the button. */
.caeps-donation-picker__amount input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.caeps-donation-picker__amount span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.5em 0.9em;
	border: 2px solid var(--caeps-color-border-strong, #cbd5e1);
	border-radius: var(--caeps-radius-md, 8px);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	/* One line, always: in the ~91px columns "No thanks" broke onto two
	   lines. It fits inside the border even at the 88px minimum; it just
	   uses some of the side padding. */
	white-space: nowrap;
	color: var(--caeps-color-text, #1f2937);
	background: var(--caeps-color-surface, #fff);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.caeps-donation-picker__amount span:hover {
	border-color: var(--caeps-color-primary, #2271b1);
}

/* Active state: brand fill + ring, matching a standard donation form. */
.caeps-donation-picker__amount input:checked + span {
	background: var(--caeps-color-primary, #2271b1);
	border-color: var(--caeps-color-primary, #2271b1);
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--caeps-color-primary, #2271b1);
}

.caeps-donation-picker__amount input:focus-visible + span {
	outline: 2px solid var(--caeps-color-primary, #2271b1);
	outline-offset: 2px;
}

/*
 * The "No thanks" opt-out sits beside the amounts (after "Other"), same size
 * but visually quieter — dashed border, muted text, and a gray (not brand)
 * selected state so the default doesn't read as the promoted choice.
 */
.caeps-donation-picker__amount--none span {
	font-size: 0.9em;
	font-weight: 600;
	border-style: dashed;
	color: var(--caeps-color-text-secondary, #64748b);
}

.caeps-donation-picker__amount--none input:checked + span {
	background: var(--caeps-color-text-secondary, #64748b);
	border-color: var(--caeps-color-text-secondary, #64748b);
	border-style: solid;
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--caeps-color-text-secondary, #64748b);
}

.caeps-donation-picker__custom-wrap,
.caeps-donation-picker__category-wrap {
	margin-top: 0.75em;
}

.caeps-donation-picker__sublabel {
	display: block;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--caeps-color-text-secondary, #64748b);
	margin-bottom: 0.35em;
}

.caeps-donation-picker__custom,
.caeps-donation-picker__select {
	width: 100%;
	max-width: 260px;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	border: 2px solid var(--caeps-color-border, #e3e6ea);
	border-radius: var(--caeps-radius-md, 8px);
	font-size: 0.95em;
	color: var(--caeps-color-text, #1f2937);
	background: var(--caeps-color-surface, #fff);
}

/* Impreza's input:not([type="submit"]) styles outrank the class selector
   above and leave the "Other" amount field transparent, so it showed the
   panel's grey. Match the white of the spinner and the category select. */
.caeps-donation-picker input.caeps-donation-picker__custom {
	background: var(--caeps-color-surface, #fff);
}