/**
 * Gated download modal.
 *
 * Breakpoints follow the site convention established by the page stylesheets:
 * 940px for the tablet reflow and 620px for the phone layout.
 *
 * @package FarbstoffeElements
 * @since   1.0.0
 */

.fbi-el-modal {
	--fbiel-navy: #041853;
	--fbiel-navy-700: #042B6D;
	--fbiel-blue: #0066CC;
	--fbiel-cyan: #2EB0E7;
	--fbiel-ink: #0F1B33;
	--fbiel-ink-soft: #4A5875;
	--fbiel-line: #E2E8F2;
	--fbiel-paper: #FFFFFF;

	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.fbi-el-modal[hidden] {
	display: none;
}

.fbi-el-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 24, 83, .62);
	opacity: 0;
	transition: opacity .28s ease;
}

.fbi-el-modal.is-open .fbi-el-modal__backdrop {
	opacity: 1;
}

/* Progressive enhancement: older Safari simply gets the solid backdrop. */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.fbi-el-modal__backdrop {
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
}

.fbi-el-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 48px);
	background: var(--fbiel-paper);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 36px 80px -24px rgba(4, 24, 83, .48);
	transform: translateY(14px) scale(.98);
	opacity: 0;
	transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .3s ease;
}

/* Dynamic viewport units keep the dialog clear of the iOS address bar. */
@supports (max-height: 100dvh) {
	.fbi-el-modal__dialog {
		max-height: calc(100dvh - 48px);
	}
}

.fbi-el-modal.is-open .fbi-el-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Contact Form 7 and WPForms emit `size` and `cols` attributes, which give the
   control an intrinsic width in characters. At 360px that is wider than the
   dialog and the fields ran off the right edge. */
.fbi-el-modal__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fbi-el-modal__form select,
.fbi-el-modal__form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.fbi-el-modal__form img,
.fbi-el-modal__form iframe {
	max-width: 100%;
}

/* ==========================================================================
   Side panel
   ========================================================================== */

.fbi-el-modal__panel {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	background: linear-gradient(150deg, #03123E 0%, var(--fbiel-navy-700) 52%, #05489B 100%);
	overflow: hidden;
}

.fbi-el-modal__panel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fbi-el-modal__panel-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 24, 83, .28) 0%, rgba(4, 24, 83, .88) 78%);
}

.fbi-el-modal__panel-veil::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .12;
	background-image: repeating-linear-gradient(112deg, transparent 0 46px, rgba(46, 176, 231, .85) 46px 47px);
}

.fbi-el-modal__panel-copy {
	position: relative;
	padding: 28px 26px;
	color: #FFFFFF;
}

.fbi-el-modal__kicker {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fbiel-cyan);
	margin-bottom: 8px;
}

.fbi-el-modal__panel-doc {
	margin: 0;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.fbi-el-modal__panel-doc:empty {
	display: none;
}

/* ==========================================================================
   Body
   ========================================================================== */

.fbi-el-modal__body {
	padding: 40px 38px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/* A grid item defaults to `min-height: auto`, which refuses to shrink
	   below its content. The body therefore grew to the full height of the
	   form, the dialog's `max-height` clipped it, and `overflow-y: auto` had
	   nothing to scroll — on a short screen the submit button simply could
	   not be reached. `min-height: 0` lets the item shrink so the scroll
	   actually engages. */
	min-height: 0;
}

/* The dialog's rows have to be allowed to shrink too, or the body's row keeps
   its content height and the fix above has nothing to work against. */
.fbi-el-modal__dialog {
	grid-template-rows: minmax(0, 1fr);
}

.fbi-el-modal__title {
	margin: 0 0 10px;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.012em;
	color: var(--fbiel-navy);
}

.fbi-el-modal__intro {
	margin: 0 0 26px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--fbiel-ink-soft);
}

.fbi-el-modal__status {
	margin: 0;
	font-size: 14px;
	color: var(--fbiel-ink-soft);
}

.fbi-el-modal__form .forminator-ui {
	margin: 0;
}

/* ==========================================================================
   Close control
   ========================================================================== */

.fbi-el-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--fbiel-navy);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.fbi-el-modal__close svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.fbi-el-modal__close:hover {
	background: #FFFFFF;
	transform: rotate(90deg);
}

.fbi-el-modal__close:focus-visible {
	outline: 2px solid var(--fbiel-cyan);
	outline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 940px) {
	.fbi-el-modal__dialog {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	/* The panel becomes a header band so the form stays above the fold. */
	.fbi-el-modal__panel {
		min-height: 150px;
		align-items: flex-end;
	}

	.fbi-el-modal__panel-copy {
		padding: 18px 22px;
	}

	.fbi-el-modal__panel-doc {
		font-size: 16px;
	}

	.fbi-el-modal__body {
		padding: 30px 28px 34px;
	}
}

@media (max-width: 620px) {
	.fbi-el-modal {
		padding: 0;
		align-items: flex-end;
	}

	.fbi-el-modal__dialog {
		max-width: none;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
		transform: translateY(28px);
	}

	@supports (max-height: 100dvh) {
		.fbi-el-modal__dialog {
			max-height: 92dvh;
		}
	}

	.fbi-el-modal__panel {
		min-height: 112px;
	}

	.fbi-el-modal__title {
		font-size: 20px;
	}

	.fbi-el-modal__body {
		padding: 24px 20px 32px;
	}

	.fbi-el-modal__close {
		top: 10px;
		right: 10px;
	}

	/* Safari on iOS zooms the whole page in when a field smaller than 16px
	   takes focus, and never zooms back out. Holding the floor at 16px is the
	   only reliable way to stop it. */
	.fbi-el-modal__form input:not([type="checkbox"]):not([type="radio"]),
	.fbi-el-modal__form select,
	.fbi-el-modal__form textarea {
		font-size: 16px;
	}
}

/* Landscape phones have very little vertical room; drop the image entirely. */
@media (max-height: 520px) and (orientation: landscape) {
	.fbi-el-modal__panel {
		display: none;
	}

	.fbi-el-modal__dialog {
		grid-template-columns: 1fr;
		max-height: 96vh;
	}

	.fbi-el-modal__body {
		padding: 26px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fbi-el-modal__backdrop,
	.fbi-el-modal__dialog,
	.fbi-el-modal__close {
		transition: none;
	}

	.fbi-el-modal__close:hover {
		transform: none;
	}
}

/* ==========================================================================
   Brand panel
   ========================================================================== */

.fbi-el-modal__panel-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 30px 28px;
}

.fbi-el-modal__logo {
	display: block;
	max-width: 148px;
}

.fbi-el-modal__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.fbi-el-modal-form-host[hidden] {
	display: none;
}

/* ==========================================================================
   Forminator inside the dialog

   Forminator ships opinionated defaults that read as cramped in a narrow
   column: fields sit flush against one another and the submit button lands
   immediately under the last input. These rules restore breathing room and
   match the field styling to the rest of the site.
   ========================================================================== */

.fbi-el-modal__form .forminator-ui.forminator-custom-form {
	margin: 0;
}

.fbi-el-modal__form .forminator-row {
	margin-bottom: 16px !important;
}

.fbi-el-modal__form .forminator-row:last-of-type {
	margin-bottom: 0 !important;
}

.fbi-el-modal__form .forminator-label {
	margin-bottom: 6px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	color: var(--fbiel-ink) !important;
	text-transform: none !important;
}

.fbi-el-modal__form .forminator-input,
.fbi-el-modal__form .forminator-textarea,
.fbi-el-modal__form select.forminator-select2,
.fbi-el-modal__form .forminator-select .selector-container {
	min-height: 48px !important;
	padding: 12px 15px !important;
	border: 1px solid var(--fbiel-line) !important;
	border-radius: 10px !important;
	background: #FBFCFE !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 14.5px !important;
	color: var(--fbiel-ink) !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.fbi-el-modal__form .forminator-textarea {
	min-height: 96px !important;
	line-height: 1.6;
}

.fbi-el-modal__form .forminator-input:focus,
.fbi-el-modal__form .forminator-textarea:focus {
	border-color: var(--fbiel-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, .12) !important;
	outline: none !important;
}

.fbi-el-modal__form .forminator-input::placeholder,
.fbi-el-modal__form .forminator-textarea::placeholder {
	color: #9AA6BC !important;
}

/* Consent checkbox */
.fbi-el-modal__form .forminator-checkbox {
	align-items: flex-start !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: var(--fbiel-ink-soft) !important;
}

.fbi-el-modal__form .forminator-checkbox-box {
	margin-top: 2px !important;
	border-radius: 5px !important;
	border-color: var(--fbiel-line) !important;
}

/* Submit row: separated from the fields so it reads as a distinct action. */
.fbi-el-modal__form .forminator-row-last,
.fbi-el-modal__form .forminator-button-submit {
	margin-top: 22px !important;
}

.fbi-el-modal__form .forminator-button-submit {
	width: 100% !important;
	min-height: 52px !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--fbiel-blue) !important;
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.fbi-el-modal__form .forminator-button-submit:hover {
	background: var(--fbiel-navy-700) !important;
	transform: translateY(-1px);
}

.fbi-el-modal__form .forminator-button-submit:focus-visible {
	outline: 2px solid var(--fbiel-cyan) !important;
	outline-offset: 3px;
}

/* Validation and response messages */
.fbi-el-modal__form .forminator-error-message {
	margin-top: 5px !important;
	font-size: 12.5px !important;
}

.fbi-el-modal__form .forminator-response-message {
	margin: 0 0 16px !important;
	padding: 12px 14px !important;
	border-radius: 9px !important;
	font-size: 13.5px !important;
}

@media (max-width: 620px) {

	.fbi-el-modal__form .forminator-row {
		margin-bottom: 13px !important;
	}

	.fbi-el-modal__form .forminator-input,
	.fbi-el-modal__form .forminator-textarea {
		font-size: 16px !important; /* Prevents iOS zooming on focus. */
	}
}

@media (prefers-reduced-motion: reduce) {

	.fbi-el-modal__form .forminator-button-submit {
		transition: none;
	}

	.fbi-el-modal__form .forminator-button-submit:hover {
		transform: none;
	}
}