/*
 * The quote dialog ("Pyydä tarjous" on products, inc/quote-modal.php + assets/quote-modal.js): a white panel in the
 * middle of the window over a navy veil, the Leadoo form in it. Sharp corners, no shadow (the site's rules). On phones
 * the panel is the whole screen.
 * The <dialog> element itself covers the window (transparent) so that a click outside the panel is a click on it.
 */

.ab-quote-modal {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	background: transparent;
	color: var(--ab-body, #282828);
	overflow: auto;
}

.ab-quote-modal[open] {
	display: grid;
	place-items: center;
}

.ab-quote-modal::backdrop {
	background: rgba(0, 43, 86, 0.64);
}

html.ab-quote-modal-open {
	overflow: hidden;
	scrollbar-gutter: stable;
}

.ab-quote-modal__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	padding: 64px 56px 48px;
	overflow: auto;
	background: #fff;
}

.ab-quote-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ab-navy, #002b56);
	cursor: pointer;
}

.ab-quote-modal__close:hover {
	color: var(--ab-accent-hover, #28b5bd);
}

.ab-quote-modal__close:focus-visible {
	outline: 2px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

.ab-quote-modal__title {
	margin: 0;
	color: var(--ab-heading, #012b55);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
}

.ab-quote-modal__product {
	margin: 12px 0 0;
	color: var(--ab-muted, #4a5563);
	font-size: 17px;
	line-height: 1.4;
}

/* the consent placeholder needs the space (the site's rule gives it no margin of its own); Leadoo's form has a wide
   margin of its own on top, so the space is taken off it */
.ab-quote-modal__body {
	margin-top: 32px;
}

.ab-quote-modal__form:not(:empty) {
	margin-top: -32px;
}

@media (max-width: 768px) {
	.ab-quote-modal {
		padding: 0;
	}

	.ab-quote-modal__panel {
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		padding: 64px 20px 32px;
	}

	.ab-quote-modal__title {
		font-size: 24px;
	}

	.ab-quote-modal__body {
		margin-top: 24px;
	}

	.ab-quote-modal__form:not(:empty) {
		margin-top: -24px;
	}
}