/*
 * Payment method chooser. Shared by the sponsorship checkout modal and the
 * event checkout modal, both of which offer the same three ways to pay, so the
 * styling lives in one file loaded by either rather than being copied twice.
 *
 * Markup is printed by sjc_render_payment_methods() in inc/payments.php.
 */

.paymethod {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.paymethod__legend {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.paymethod__options {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 560px) {
	.paymethod__options {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * The whole tile is the control, not just the dot: on a phone a 14px radio is
 * a miss waiting to happen, and the label already says what picking it means.
 */
.paymethod__option {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.paymethod__option:hover {
	border-color: var(--tint);
	background: var(--sand);
}

.paymethod__radio {
	flex-shrink: 0;
	margin: 0.25rem 0 0;
	accent-color: var(--accent);
}

.paymethod__option:has(.paymethod__radio:checked) {
	border-color: var(--accent);
	background: var(--sand);
}

/*
 * Fallback for browsers without :has(). The tile stays legible either way —
 * only the highlight is lost, and the radio itself still reads as checked.
 */
.paymethod__radio:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.paymethod__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.paymethod__label {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
}

.paymethod__blurb {
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.35;
}

/*
 * Where the money goes, shown as soon as Zelle or check is picked — before
 * anything is submitted, so it can be read while deciding.
 */
.paymethod__note {
	margin: 0.75rem 0 0;
	padding: 0.75rem 0.85rem;
	border-radius: var(--radius-sm);
	background: var(--sand);
	color: var(--ink);
	font-size: 0.88rem;
	line-height: 1.5;
}

.paymethod__note[hidden] {
	display: none;
}

/*
 * Fewer than three ways to pay. The three-column grid above assumes three
 * tiles; with two it leaves a hole on the right, which reads as an option that
 * failed to load rather than one that was never offered.
 */
@media (min-width: 560px) {
	.paymethod--count-2 .paymethod__options {
		grid-template-columns: repeat(2, 1fr);
	}

	.paymethod--count-1 .paymethod__options {
		grid-template-columns: 1fr;
	}
}

/*
 * Exactly one way to pay: a statement of fact, so it loses the tile and the
 * dot. The radio itself stays in the DOM and stays checked — the submit reads
 * it — but a control offering a single choice that cannot be unmade looks
 * broken, and this is not a choice.
 */
.paymethod--single .paymethod__option {
	padding: 0;
	border: 0;
	background: none;
	cursor: default;
}

.paymethod--single .paymethod__option:hover {
	border: 0;
	background: none;
}

.paymethod--single .paymethod__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}