body:has(dialog[open]) {
	overflow: hidden;
}

dialog[open] {
	border: none;
	border-radius: 8px;
	background-color: #fff;
	padding: var(--spacing-40);
	width: min(722px, 100%);
	position: fixed;
	opacity: 1;
	transition: opacity 0.2s ease-in;

	& .icon {
		position: relative;
		width: 24px;
		height: 24px;
		display: block;
	}

	& .icon::before {
		content: none;
	}

	& .icon::after {
		position: absolute;
		width: 24px;
		height: 24px;
		display: block;
		top: 0;
		left: 0;
	}

	& .icon.icon-close {
		top: -24px;
		left: 24px;
	}

	& .close-btn {
		position: absolute;
		background: url("/https/ec.europa.eu/digital-building-blocks/sites/download/attachments/694487759/ico-close-primary.svg");
		filter: brightness(0) saturate(100%) invert(15%) sepia(13%) saturate(1102%) hue-rotate(196deg) brightness(97%) contrast(94%);
		top: 24px;
		right: 16px;
		width: 24px;
		height: 24px;
		border: none;
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 75%;
		cursor: pointer;
	}
}

dialog[open]::backdrop {
	background: rgba(14, 14, 14, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

@starting-style {
	dialog[open] {
		opacity: 0;
	}

	dialog[open]::backdrop {
		background-color: rgb(0 0 0 / 0%);
	}
}

#footer-main dialog[open].helpdeskModal {
	& .helpdeskModalContent {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-40);
	}

	& p,
	& li,
	* button,
	& a {
		font-size: var(--font-size-18) !important;
		line-height: 24px;
		margin-bottom: 0;
	}

	& p.modal-title {
		font-size: var(--font-size-24) !;
		line-height: 32px;
		margin-bottom: var(--spacing-8);
	}

	& .two-cols {
		display: flex;
		justify-content: space-between;

		& .left-col,
		& .right-col {
			width: 48%;
		}

		& .left-col > p,
		& .right-col > p {
			margin-bottom: var(--spacing-16);
		}

		& .left-col > p {
			color: var(--color-surface-green-dark);
		}

		& .left-col > ul,
		& .right-col > ul {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-16);
			padding-left: 32px;
			list-style: none;
			margin-bottom: 0;
		}

		& .left-col > ul li,
		& .right-col > ul li {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		& .left-col > ul li::after,
		& .right-col > ul li::after {
			position: absolute;
			content: "";
			width: 24px;
			height: 24px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			left: -32px;
		}

		& .left-col > ul li::after {
			background-image: url("/https/ec.europa.eu/digital-building-blocks/sites/download/attachments/694487759/ico-green-check.svg");
		}

		& .right-col > p {
			color: var(--color-primary);
		}

		& .right-col > ul li::after {
			background-image: url("/https/ec.europa.eu/digital-building-blocks/sites/download/attachments/694487759/ico-blue-X.svg");
		}
	}

	& .disclaimer {
		background-color: var(--color-surface-soft-blue-light);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-16);
		padding: var(--spacing-16);
		border-radius: var(--spacing-8);
		max-width: 100%;
		align-self: end;
	}

	.buttons-container {
		display: flex;
		align-items: center;
		gap: var(--spacing-16);

		& .btn {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			padding: var(--spacing-16);
			min-width: 100px !important;
			font-weight: normal;
			line-height: 18px;
			text-decoration: none;
			border: 1px solid transparent;
			border-radius: 8px;
			text-align: left;
			transition: background-color 0.2s ease-in, border-color 0.2s ease-in, color 0.2s ease-in;
			cursor: pointer;
		}

		& .btn.primary {
			color: #fff;
			background: var(--color-primary);
			border-color: var(--color-primary);
		}

		& .btn:focus {
			outline: 2px dashed var(--buttons-primary) !important;
			outline-offset: 2px !important;
		}

		& .btn.primary:hover {
			background: var(--color-primary-3);
			border-color: var(--color-primary-3);
			color: #fff !important;
			text-decoration: none !important;
		}

		& .btn.primary.outline {
			color: var(--color-primary);
			background: transparent;
			border-color: var(--color-primary);
		}

		& .btn.primary.outline:hover {
			background: var(--color-primary-2);
			border-color: var(--color-primary);
			color: var(--color-primary) !important;
		}
	}
}

@media screen and (max-width: 768px) {
	#footer-main dialog[open].helpdeskModal {
		& .helpdeskModalContent {
			gap: var(--spacing-24);
		}

		& .two-cols {
			flex-direction: column;
			gap: var(--spacing-40);

			& .left-col,
			& .right-col {
				width: 100%;
			}
		}

		.buttons-container {
			align-items: stretch;

			& .btn {
				text-align: center;
			}
		}
	}
}