/* Donation form (Gravity Forms "Donate", form class nra-donate inside .gform_wrapper): the amount step as the reference draws it.
   Colours, type and radii are the theme's tokens. */

.gform_wrapper .nra-donate .gfield_radio input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice {
	position: relative;
	margin: 0;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--large-body);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--text-body);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice:not(.nra-donate__other):has(input:checked) label {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-body); /* Soft Black on orange, as the site's buttons (white is 2.7:1). */
}

.gform_wrapper .nra-donate .gfield_radio .gchoice:not(.nra-donate__other):has(input:focus-visible) label {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice label::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: var(--nra-donate-icon) center / contain no-repeat;
	mask: var(--nra-donate-icon) center / contain no-repeat;
}

/* The frequency toggle: one white bar, the chosen half filled (GF's theme stacks choices in a column and lays
   each choice out as a grid, both undone here). */
.gform_wrapper .nra-donate .gfield_radio .gchoice,
.gform_wrapper .nra-donate .gfield_radio .gchoice:not(.nra-donate__other) label {
	display: block;
	width: 100%;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice:not(.nra-donate__other) label {
	display: flex;
}

.gform_wrapper .nra-donate .nra-donate__frequency .ginput_container_radio .gfield_radio {
	display: flex;
	flex-direction: row;
	padding: 3px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--preset--border-radius--small);
}

.gform_wrapper .nra-donate .nra-donate__frequency .gchoice {
	flex: 1 1 0;
}

/* GF's theme sets break-word on choice labels, which split "regularly" mid-word on phones; wrap at spaces only. */
.gform_wrapper .nra-donate .gfield_radio .gchoice label {
	overflow-wrap: normal;
	word-break: normal;
}

.gform_wrapper .nra-donate .nra-donate__frequency .gchoice:first-child label {
	--nra-donate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.7-1.7 2.3 2.3 5.3-5.3 1.7 1.7-7 7z'/%3E%3C/svg%3E");
}

.gform_wrapper .nra-donate .nra-donate__frequency .gchoice:nth-child(2) label {
	--nra-donate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 2.9 5 6.5 5c2 0 3.4 1.1 4.2 2.3l1.3 1.9 1.3-1.9C14.1 6.1 15.5 5 17.5 5c3.6 0 5.5 3.6 4.1 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

/* The presets: three white cells, a tick on the chosen one, "Most popular" under the middle, the own amount below. */
.gform_wrapper .nra-donate .nra-donate__amount .ginput_container_radio .gfield_radio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.gform_wrapper .nra-donate .nra-donate__amount .gchoice:not(.nra-donate__other) label {
	min-height: 3.5rem;
	/* Narrow cells on phones: 16px sides left 26px beside the tick for "$90", and GF's break-word split it
	   mid-number. Half the side padding, and an amount never wraps. */
	padding-inline: 0.5rem;
	white-space: nowrap;
	background: var(--wp--preset--color--white);
	--nra-donate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.7-1.7 2.3 2.3 5.3-5.3 1.7 1.7-7 7z'/%3E%3C/svg%3E");
}

.gform_wrapper .nra-donate .nra-donate__amount .gchoice:not(.nra-donate__other) label::before {
	display: none;
}

.gform_wrapper .nra-donate .nra-donate__amount .gchoice:has(input:checked):not(.nra-donate__other) label::before {
	display: block;
}

.gform_wrapper .nra-donate .nra-donate__popular {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap; /* One line under a narrow cell, centred on it. */
	text-align: center;
	color: var(--wp--preset--color--primary); /* The reference's orange label is 2.5:1 on off-white. */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice.nra-donate__other {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: 2.5rem;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice.nra-donate__other label {
	display: inline;
	width: auto;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--text-body);
	font-weight: 400;
	cursor: default;
}

.gform_wrapper .nra-donate .gfield_radio .gchoice.nra-donate__other label::before {
	display: none;
}

.gform_wrapper .nra-donate .nra-donate__other-field {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--preset--border-radius--small);
	/* White on the off-white panel is 1.09:1, so the field needs an edge (WCAG 1.4.11 asks 3:1); muted is 6.7:1. */
	border: 1px solid var(--wp--preset--color--text-muted);
}

.gform_wrapper .nra-donate .nra-donate__other-field:focus-within {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.gform_wrapper .nra-donate .nra-donate__currency {
	padding-left: 0.875rem;
	color: var(--wp--preset--color--text-body); /* It inherited the panel colour and vanished on the white field. */
	font-size: var(--wp--preset--font-size--large-body);
	font-weight: 500;
}

.gform_wrapper .nra-donate .nra-donate__other-field .gchoice_other_control,
.gform_wrapper .nra-donate .nra-donate__other-field .gchoice_other_control:focus {
	width: 9rem;
	margin: 0;
	padding: 0.75rem 0.75rem 0.75rem 0.25rem;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--wp--preset--font-size--large-body);
	font-weight: 500;
}

/* The Next button and the notice under it (GF's theme sizes page buttons to their text). */
.gform_wrapper .nra-donate .gform-page-footer,
.gform_wrapper .nra-donate .gform_footer {
	display: block;
}

/* GF's framework sizes buttons through a logical inline-size custom property, so both are set. */
.gform_wrapper.gform-theme .nra-donate .gform-page-footer .gform_next_button,
.gform_wrapper.gform-theme .nra-donate .gform-page-footer .gform_button,
.gform_wrapper.gform-theme .nra-donate .gform_footer .gform_button {
	--gf-local-width: 100% !important; /* GF's framework resolves the button's inline-size from this variable after every sheet, so the declaration is forced (the spec pack's gotchas list). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100% !important;
	inline-size: 100% !important;
	margin: 0;
	padding: 0.875rem 1rem;
	font-size: var(--wp--preset--font-size--large-body);
}

.gform_wrapper .nra-donate .gform-page-footer .gform_next_button::before,
.gform_wrapper .nra-donate .gform-page-footer .gform_button::before,
.gform_wrapper .nra-donate .gform_footer .gform_button::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gform_wrapper.gform-theme .nra-donate .gform-page-footer .gform_previous_button,
.gform_wrapper.gform-theme .nra-donate .gform_footer .gform_previous_button {
	--gf-local-width: 100% !important;
	display: inline-flex;
	justify-content: center;
	width: 100% !important;
	inline-size: 100% !important;
	margin: 0.75rem 0 0;
}

.gform_wrapper .nra-donate .nra-donate__notice {
	margin: 1rem 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.gform_wrapper .nra-donate .nra-donate__notice a {
	color: var(--wp--preset--color--primary);
}

/* GF's framework paints HTML fields in its primary contrast colour, off-white here. */
.gform_wrapper .nra-donate .gfield_html,
.gform_wrapper .nra-donate .nra-donate__summary {
	color: var(--wp--preset--color--text-body);
}

.gform_wrapper .nra-donate .nra-donate__summary {
	font-weight: 600;
}