/* Eigen dialog-styling i.p.v. de parent-theme basis (pk-theme/assets/css/dialogs.css).  */

@keyframes openDialog {
	from { opacity: 0; translate: 0 -40px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes closeDialog {
	to { opacity: 0; translate: 0 -40px; }
}

body dialog {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
}

body dialog[open] {
	animation: openDialog .5s ease normal;
}

body dialog.hideDialog {
	animation: closeDialog .5s ease normal;
}

body dialog::backdrop {
	background: radial-gradient(90.78% 90.78% at 50% 50%, rgba(47, 51, 76, 0.40) 0%, rgba(47, 51, 76, 0.20) 100%);
	backdrop-filter: blur(0.5px);	
	opacity: 0;
	transition: opacity .5s ease-in-out;
}

body dialog[open]::backdrop {
	opacity: 1;
}

body dialog.hideDialog::backdrop {
	opacity: 0;
}

body dialog#applyPopup > .dialog-wrapper {
	width: calc(100% - (2 * var(--pk-site-gutter)));
	max-width: max(75rem, calc(75 * var(--su)));
}

body dialog > .dialog-wrapper {
	max-width: max(42.5rem, calc(42.5 * var(--su)));
	max-height: 85vh;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	background-color: var(--white-100);
	overflow-y: auto;
	padding: max(2rem, calc(3 * var(--su)));
}

body dialog > .dialog-wrapper > button.close-popup {
	appearance: none;
	position: absolute;
	top: max(1.5rem, calc(2 * var(--su)));
	right: max(1.5rem, calc(2 * var(--su)));
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(2rem, calc(2 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border: none;
	border-radius: 50%;
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	background-color: var(--white-100);
	color: var(--primary-100);
	cursor: pointer;
	transition: .2s ease-in-out background-color, .2s ease-in-out color;
}

body dialog > .dialog-wrapper > button.close-popup:hover {
	background-color: var(--neutral-20);
}

body dialog > .dialog-wrapper > button.close-popup .material-symbols-outlined {
	font-size: max(1.125rem, calc(1.125 * var(--su)));
}

/* Klantportaal-popup uit de header. */

body dialog#portalPopup > .dialog-wrapper {
	width: calc(100% - (2 * var(--pk-site-gutter)));
	max-width: max(32.8125rem, calc(32.8125 * var(--su)));
	max-height: min(90dvh, max(50rem, calc(50 * var(--su))));
	padding: max(3rem, calc(3 * var(--su)));
	color: var(--primary-100);
	overflow: visible;
}

body dialog#portalPopup > .dialog-wrapper > button.close-popup,
body dialog.migration-lightbox > .dialog-wrapper > button.close-popup {
	top: max(1.5rem, calc(1.5 * var(--su)));
	right: max(1.5rem, calc(1.5 * var(--su)));
}

body dialog#portalPopup > .dialog-wrapper > button.close-popup span,
body dialog.migration-lightbox > .dialog-wrapper > button.close-popup span {
	display: block;
	width: 62.5%;
	height: auto;
	aspect-ratio: 1;
	background-color: var(--primary-50);
	mask: var(--icon-close) center / contain no-repeat;
	-webkit-mask: var(--icon-close) center / contain no-repeat;
}

.portal-intro {
	display: flex;
	flex-direction: column;
	gap: max(1rem, calc(1 * var(--su)));
}

.portal-logos {
	display: flex;
	align-items: center;
	padding-right: max(2.5rem, calc(2.5 * var(--su)));
}

.portal-logo {
	--portal-logo-size: max(3rem, calc(3 * var(--su)));
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--portal-logo-size);
	width: var(--portal-logo-size);
	height: var(--portal-logo-size);
	aspect-ratio: 1;
	padding: max(.5rem, calc(.5 * var(--su)));
	border-radius: 50%;
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	background-color: var(--white-100);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .04);
}

.portal-logo + .portal-logo {
	margin-left: max(-1rem, calc(-1 * var(--su)));
}

.portal-logo img,
.portal-option-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.portal-logo:first-child img {
	width: 72%;
	height: 72%;
}

.portal-logo:last-child img {
	width: 62%;
	height: 62%;
}

.portal-copy {
	display: flex;
	flex-direction: column;
	gap: max(.5rem, calc(.5 * var(--su)));
}

.portal-copy h3 {
	margin: 0;
	font-family: var(--pk-heading-font-family);
	font-size: max(1.75rem, calc(1.75 * var(--su)));
	font-weight: 400;
	line-height: 1.3;
}

.portal-text,
.portal-text p {
	margin: 0;
	color: var(--primary-90);
	font-size: max(1rem, calc(1 * var(--su)));
	line-height: 1.6;
}

dialog#portalPopup .dialog-wrapper > hr {
	width: 100%;
	height: 1px;
	margin-block: max(1.5rem, calc(1.5 * var(--su)));
	border: 0;
	background-color: var(--primary-10);
}

.portal-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(1rem, calc(1 * var(--su)));
}

.portal-select-label {
	margin: 0;
	font-size: max(1rem, calc(1 * var(--su)));
	font-weight: 500;
	line-height: 1.6;
}

.portal-select {
	position: relative;
	width: 100%;
}

.portal-select summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: max(3rem, calc(3 * var(--su)));
	padding: max(.625rem, calc(.625 * var(--su))) max(1rem, calc(1 * var(--su))) max(.625rem, calc(.625 * var(--su))) max(1.25rem, calc(1.25 * var(--su)));
	color: var(--primary-100);
	font-size: max(.875rem, calc(.875 * var(--su)));
	font-weight: 300;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
	border: 1px solid var(--primary-10);
	border-radius: max(.25rem, calc(.25 * var(--su)));
	background-color: var(--primary-2-5, #fafafb);
}

.portal-select summary::-webkit-details-marker {
	display: none;
}

.portal-select summary > span {
	width: max(1rem, calc(1 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	background-color: var(--accent-100);
	mask: var(--icon-chevron) center / contain no-repeat;
	-webkit-mask: var(--icon-chevron) center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform .2s ease;
}

.portal-select[open] summary > span {
	transform: rotate(-90deg);
}

.portal-select[open] summary {
	position: relative;
	z-index: 2;
	border-color: var(--accent-100);
	border-radius: max(.25rem, calc(.25 * var(--su))) max(.25rem, calc(.25 * var(--su))) 0 0;
}

.portal-options {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: max(.25rem, calc(.25 * var(--su)));
	padding: max(.5rem, calc(.5 * var(--su)));
	border: 1px solid var(--primary-10);
	border-top: 0;
	border-radius: 0 0 max(.25rem, calc(.25 * var(--su))) max(.25rem, calc(.25 * var(--su)));
	background-color: var(--primary-2-5, #fafafb);
	box-shadow: 0 8px 16px rgba(47, 51, 76, .08);
}

.portal-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: max(3rem, calc(3 * var(--su)));
	padding: max(.5rem, calc(.5 * var(--su))) max(.875rem, calc(.875 * var(--su))) max(.5rem, calc(.5 * var(--su))) max(.5rem, calc(.5 * var(--su)));
	border: 1px solid var(--primary-10);
	background-color: var(--white-100);
	color: var(--primary-100);
	font-size: max(.875rem, calc(.875 * var(--su)));
	line-height: 1.6;
	text-decoration: none;
	transition: background-color .2s ease;
}

.portal-option:hover,
.portal-option:focus-visible {
	background-color: #e9f4fc;
}

.portal-option-main {
	display: flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
}

.portal-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 max(2rem, calc(2 * var(--su)));
	width: max(2rem, calc(2 * var(--su)));
	height: max(2rem, calc(2 * var(--su)));
	aspect-ratio: 1;
	padding: max(.5rem, calc(.5 * var(--su)));
	border-radius: 50%;
	outline: 1px solid var(--primary-5, #f5f5f6);
	outline-offset: -1px;
	background-color: var(--white-100);
}

.portal-option-arrow {
	display: block;
	width: max(1.25rem, calc(1.25 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	background-color: currentColor;
	mask: var(--icon-chevron) center / contain no-repeat;
	-webkit-mask: var(--icon-chevron) center / contain no-repeat;
}

.portal-help-link {
	display: inline-flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
	color: var(--primary-100);
	font-size: max(.875rem, calc(.875 * var(--su)));
	line-height: 1.6;
	text-decoration: none;
	transition: color .2s ease;
}

.portal-help-link .portal-option-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(1.5rem, calc(1.5 * var(--su)));
	background: none;
	border-radius: 50%;
	outline: 1px solid var(--primary-20);
	outline-offset: -1px;
	mask: none;
	-webkit-mask: none;
	transition: background-color .2s ease, outline-color .2s ease, color .2s ease;
}

.portal-help-link .portal-option-arrow::before {
	content: '';
	width: 66.666%;
	height: auto;
	aspect-ratio: 1;
	background-color: currentColor;
	mask: var(--icon-chevron) center / contain no-repeat;
	-webkit-mask: var(--icon-chevron) center / contain no-repeat;
}

.portal-help-link:hover .portal-option-arrow,
.portal-help-link:focus-visible .portal-option-arrow {
	outline-color: var(--accent-100);
	background-color: var(--accent-100);
	color: var(--white-100);
}

.portal-help-link:focus-visible {
	outline: 2px solid var(--accent-100);
	outline-offset: max(.25rem, calc(.25 * var(--su)));
}

@media only screen and (max-width: 767px) {
	body dialog#portalPopup > .dialog-wrapper {
		max-height: calc(100dvh - (2 * var(--pk-site-gutter)));
		padding: max(1.5rem, calc(1.5 * var(--su)));
	}

	body dialog#portalPopup > .dialog-wrapper > button.close-popup {
		top: max(1rem, calc(1 * var(--su)));
		right: max(1rem, calc(1 * var(--su)));
	}

	.portal-logos {
		padding-right: max(2.5rem, calc(2.5 * var(--su)));
	}

	.portal-logo {
		--portal-logo-size: max(2.5rem, calc(2.5 * var(--su)));
		padding: max(.4rem, calc(.4 * var(--su)));
	}

	.portal-logo + .portal-logo {
		margin-left: max(-.8rem, calc(-.8 * var(--su)));
	}

	.portal-logo img {
		width: 72%;
		height: 72%;
	}

	.portal-logo:first-child img {
		width: 60%;
		height: 60%;
	}
}

/* Migratie-popups (.migration-lightbox): oud logo → nieuw logo, titel, tekst, knop. */

/* Pagina niet scrollbaar zolang de popup open is. */
html:has(dialog.migration-lightbox[open]) {
	overflow: hidden;
}

body dialog.migration-lightbox > .dialog-wrapper {
	width: calc(100% - (2 * var(--pk-site-gutter)));
	max-width: max(35rem, calc(35 * var(--su)));
	max-height: min(90dvh, max(50rem, calc(50 * var(--su))));
	padding: max(3rem, calc(3 * var(--su)));
	color: var(--primary-100);
}

.migration-header {
	display: flex;
	align-items: center;
	gap: max(1rem, calc(1 * var(--su)));
	padding-right: max(2.5rem, calc(2.5 * var(--su)));
}

.migration-logos {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.migration-logo {
	--migration-logo-size: max(2.5rem, calc(3 * var(--su)));
	display: block;
	width: var(--migration-logo-size);
	height: auto;
	aspect-ratio: 1;
	/* padding: max(.75rem, calc(.75 * var(--su))); */
	border-radius: 50%;
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	background-color: var(--white-100);
}

.migration-logo img {
	border-radius: 50%;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Pijl overlapt beide logo's en ligt erbovenop. */
.migration-arrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: max(1.5rem, calc(1.5 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	margin-inline: max(-.5rem, calc(-.5 * var(--su)));
	border-radius: 50%;
	outline: 1px solid var(--primary-20);
	outline-offset: -1px;
	background-color: var(--white-100);
	color: var(--primary-100);
	font-size: max(1rem, calc(1 * var(--su)));
}

.migration-site-title {
	margin: 0;
	font-family: var(--pk-heading-font-family);
	font-size: max(1.5rem, calc(1.5 * var(--su)));
	line-height: 1.2;
}

body dialog.migration-lightbox .dialog-wrapper > hr {
	width: 100%;
	height: 1px;
	margin-block: max(1rem, calc(1 * var(--su))) max(1.5rem, calc(2 * var(--su)));
	border: 0;
	background-color: var(--primary-20);
}

.migration-copy {
	display: flex;
	flex-direction: column;
	gap: max(.5rem, calc(.5 * var(--su)));
}

.migration-copy h4 {
	margin: 0;
	font-family: var(--pk-heading-font-family);
	font-size: max(1.75rem, calc(1.75 * var(--su)));
	font-weight: 400;
	line-height: 1.3;
}

.migration-text {
	margin: 0;
	color: var(--primary-90);
	font-size: max(1rem, calc(1 * var(--su)));
	line-height: 1.6;
}

.migration-copy .pk-button {
	width: 100%;
	height: max(3rem, calc(3 * var(--su)));
	margin-top: max(1rem, calc(1.25 * var(--su)));
	border: none;
}

@media only screen and (max-width: 767px) {
	body dialog.migration-lightbox > .dialog-wrapper {
		max-height: calc(100dvh - (2 * var(--pk-site-gutter)));
		padding: max(1.5rem, calc(1.5 * var(--su)));
	}

	body dialog.migration-lightbox > .dialog-wrapper > button.close-popup {
		top: max(1rem, calc(1 * var(--su)));
		right: max(1rem, calc(1 * var(--su)));
	}

	.migration-header {
		flex-direction: column;
		align-items: flex-start;
		gap: max(1rem, calc(1 * var(--su)));
	}

	.migration-logo {
		--migration-logo-size: max(3rem, calc(3 * var(--su)));
	}
}

/* Vacature-popups (#applyPopup, #jobAlertPopup); opbouw gelijk aan download-lightbox. */

.job-lightbox .col-content {
	margin-inline: auto;
	color: var(--primary-100);
	background-color: var(--white-100);
}

.job-lightbox .badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(2rem, calc(2.5 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--neutral-20);
	outline: 2px solid var(--primary-10);
	outline-offset: -2px;
	color: var(--primary-100);
}

.job-lightbox .title {
	margin-block: max(1rem, calc(1 * var(--su))) max(.5rem, calc(.5 * var(--su)));
	font-size: var(--scaling-h2);
}

.job-lightbox .nova-required-text {
	margin-block: 0 max(1rem, calc(1 * var(--su)));
}

dialog#jobAlertPopup .nova-required-text, dialog#koffiePopup .nova-required-text {
	margin-top: max(1rem, calc(1.5 * var(--su)));
}

.job-lightbox .gform_footer {
	justify-content: start;
}

.job-lightbox .gform_wrapper.gravity-theme .gform_footer button {
	width: 100%;
}

/* Alleen de sollicitatiepopup gebruikt een iframe. */
.job-lightbox .iframe-wrapper {
	/* width: max(38rem, calc(38 * var(--su))); */
	max-width: 100%;
	height: 70vh;
}

.job-lightbox iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

/* Terugbelverzoek-popup (#terugbelverzoekPopup): titel/tekst + contactrij + formulier. */

.terugbelverzoek-lightbox .contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: max(.75rem, calc(.75 * var(--su)));
	margin-top: max(1rem, calc(1.5 * var(--su)));
}

.terugbelverzoek-lightbox .contact-item {
	display: flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
	color: var(--primary-100);
	text-decoration: none;
	font-size: var(--body-s-regular);
}

.terugbelverzoek-lightbox .contact-item .badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: max(1.75rem, calc(1.75 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--accent-100);
	color: var(--white-100);
	outline: 1px solid var(--accent-80);
	outline-offset: -1px;
}

.terugbelverzoek-lightbox .contact-item.whatsapp .badge {
	background-color: var(--whatsapp);
	outline-color: var(--whatsapp-outline);
}

.terugbelverzoek-lightbox hr {
	width: 100%;
	height: 1px;
	margin-block: max(1.5rem, calc(1.5 * var(--su)));
	border: none;
	background-color: var(--primary-20);
}

.terugbelverzoek-lightbox .form-title {
	margin-bottom: max(.5rem, calc(.5 * var(--su)));
}

/* Bevestiging na verzenden (GF confirmation). Ik heb de conformation gestyled. */

dialog .col-content:has(.gform_confirmation_wrapper) .form-title,
dialog .col-content:has(.gform_confirmation_wrapper) .nova-required-text {
	display: none;
}

dialog .col-content .gform_confirmation_message {
	background-color: var(--neutral-30);
	padding: max(1.5rem, calc(1.5 * var(--su)));
	border-radius: max(.25rem, calc(.25 * var(--su)));
}

dialog#jobAlertPopup .gform_confirmation_message, dialog#koffiePopup .gform_confirmation_message {
	margin-top: max(1rem, calc(1.5 * var(--su)));
}

dialog .col-content .gform_confirmation_message h2,
dialog .col-content .gform_confirmation_message h3,
dialog .col-content .gform_confirmation_message h4,
dialog .col-content .gform_confirmation_message h5 {
	font-size: var(--body-m-regular);
	padding-bottom: max(.5rem, calc(.5 * var(--su)));
	margin: 0;
}

dialog .col-content .gform_confirmation_message p {
	font-size: var(--body-s-regular);
	margin: 0;
}

@media screen and (max-width: 992px) {

	.job-lightbox .col-content {
		max-width: unset;
	}

	.job-lightbox .iframe-wrapper {
		width: 100%;
	}

}

@media screen and (max-width: 767px) {

	body dialog > .dialog-wrapper {
		width: calc(100% - 2rem);
		max-width: unset;
	}

}