/**
 * Contact dialog chrome.
 *
 * The form inside is styled by components/css/contact-form.css, shared with the
 * dedicated page at /contact.
 */

.contact-dialog {
	flex-direction: column;
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	max-width: 600px;
	min-width: 300px;
	min-height: 300px;
	background-color: white;
	width: calc(100% - 16px);
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	padding: 64px;
	font-family: Poppins;
	/* The form is tall enough to overflow a laptop viewport, so scroll inside
	   the dialog rather than pushing the submit button off screen. */
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}

.contact-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.contact-dialog .close-button {
	width: 24px;
	position: absolute;
	right: 16px;
	top: 16px;
	font-weight: bold;
	font-size: var(--rem-l);
	cursor: pointer;
}

/* The dialog is narrow, so its rows stack rather than sitting side by side. */
.contact-dialog .contact-form .field-row {
	flex-direction: column;
	gap: 0;
}

@media all and (max-width: 904px) {

	.contact-dialog {
		padding: 64px 24px 32px;
	}
}