/*
 * Autoriah Form Pop-up: what the pop-up needs to work. Always loaded with it, whatever the look.
 * The look (colours, card, type, the arrival) is form-popup-look.css, which a site can switch off.
 *
 *  - A centred card that never runs off the window: a tall one scrolls inside itself.
 *  - The page behind doesn't scroll while it is open (and doesn't jump sideways as its scroll bar goes).
 *  - On a phone (600 px wide and under) it rises from the bottom edge, the full width, within reach of
 *    a thumb.
 *  - The cross: top right, a 44 px target.
 */

.form-popup {
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow: visible;
}

.form-popup__card {
	position: relative;
	box-sizing: border-box;
	width: min(34rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * The scroll bar's room is kept as padding (its width measured by the script as it opens), not with
 * scrollbar-gutter: in Chrome that changes what 100vw measures, so anything sized by the window's width
 * moved (a Blocksy header did, 3.7 px, found on the bench 7 Nov). No script, no pop-up, so no measuring needed.
 */
html:has(.form-popup[open]) {
	overflow: hidden;
	padding-right: var(--form-popup-bar, 0px);
}

.form-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

@media (max-width: 600px) {
	.form-popup {
		margin: auto 0 0;
		width: 100vw;
		max-width: 100vw;
		max-height: 92vh;
		max-height: 92dvh;
	}

	.form-popup__card {
		width: 100vw;
		max-height: 92vh;
		max-height: 92dvh;
	}
}