/*
 * Preisalarm dialog layout (21-platform/templates/alerts/alert-button.php).
 *
 * Same build as the search page's filter sheet: a header and a footer that never
 * scroll and a middle that does. Only layout lives here; colours, borders and type
 * are the template's Tailwind classes.
 */

/* The overlay follows the visible viewport, so on iOS the sheet's bottom edge sits
 * above Safari's toolbar instead of behind it. Without dvh, inset 0 stays as is. */
@supports (height: 100dvh) {
	.gmf-price-alert__overlay {
		bottom: auto;
		height: 100dvh;
	}
}

/* Phone: a bottom sheet that leaves a strip of scrim above it. */
.gmf-price-alert__panel {
	max-height: 90vh;
	max-height: 90dvh;
}

@media (min-width: 640px) {
	.gmf-price-alert__panel {
		max-height: calc(100vh - 2rem);
		max-height: calc(100dvh - 2rem);
	}
}

.gmf-price-alert__header,
.gmf-price-alert__footer {
	flex: 0 0 auto;
}

/* min-height 0 lets the flex children shrink below their content, which is what
 * hands the overflow to the body instead of the whole panel. */
.gmf-price-alert__form {
	min-height: 0;
	flex: 1 1 auto;
}

.gmf-price-alert__body {
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The buttons clear the home indicator when the page runs edge to edge. */
.gmf-price-alert__footer {
	padding-bottom: 0.75rem;
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
	.gmf-price-alert__footer {
		padding-bottom: 0.75rem;
	}
}