/**
 * RSVP modal — uses the native <dialog> element.
 */
.rsvp-modal {
	border: 0;
	padding: 1.75rem;
	max-width: 28rem;
	width: 90vw;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
}

.rsvp-modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.rsvp-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.rsvp-modal__lead {
	margin: 0 0 1rem;
	color: var(--color-text-2);
}

.rsvp-modal__field {
	display: block;
	margin-bottom: 0.85rem;
}

.rsvp-modal__field span {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-2);
	margin-bottom: 0.25rem;
}

.rsvp-modal__field input {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--color-line-3);
	font-size: 1rem;
	background: var(--color-white);
}

.rsvp-modal__email {
	margin: 0.25rem 0 1rem;
	font-size: 0.85rem;
	color: var(--color-text-2);
}

.rsvp-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* Submit/cancel visuals come from `.button .button--primary|--secondary` (see
 * css/components/button.css). The disabled spinner state is the only modal-
 * specific override left here. */
.rsvp-modal__submit:disabled {
	opacity: 0.5;
	cursor: progress;
}

.rsvp-modal__error {
	color: var(--color-text);
	font-size: 0.9rem;
	margin: 0.5rem 0 0;
}