.modal-wrapper {
	display: none;
	/* display: flex; */
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 99;
	pointer-events: none;

	&.open {
		display: flex;

		body:has(&) {
			overflow: hidden;
		}
	}

	.modal {
		--_padding-right-scrollbar: 1rem;
		position: relative;
		z-index: 999;
		width: min(800px, 100% - 2rem);
		background: var(--color-white);
		color: var(--color-black);
		pointer-events: initial;
		padding: 2.5rem;
		padding-right: calc(2.5rem - var(--_padding-right-scrollbar));
		border-radius: 0.5rem;
		box-shadow: 0 0 24px 2px #3d3d3d57;

		@media (width < 700px) {
			padding: 1.5rem;
			padding-right: calc(1.5rem - var(--_padding-right-scrollbar));
			max-height: 90vh;
			overflow-y: auto;
		}

		button {
			margin-top: 1rem;
		}

		.title {
			text-align: left;
			font-size: 1.25rem;
			text-wrap: balance;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
			gap: 1rem;
			margin-bottom: 1.5rem;
			padding-right: var(--_padding-right-scrollbar);

			span {
				display: grid;
				place-content: center;
				font-size: 1em;
				border: 1px solid var(--color-black);
				border-radius: 4px;
				cursor: pointer;
			}
		}
		ol {
			position: relative;
			margin-top: 0.5rem;

			height: min(40vh, 280px);
			overflow-y: auto;
			padding-right: var(--_padding-right-scrollbar);

			counter-reset: questions;

			&::-webkit-scrollbar {
				-webkit-appearance: none;
			}

			&::-webkit-scrollbar:vertical {
				width: 12px;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 8px;
				border: 2px solid var(--color-white);
				background-color: var(--color-gold);
			}
		}
		li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 0.5rem;
			margin-bottom: 1rem;

			counter-increment: questions;

			@media (width < 550px) {
				flex-direction: column;
			}

			.question {
				font-size: 1rem;
				text-align: left;
				text-wrap: pretty;
				font-weight: 500;

				&::before {
					content: counter(questions) "/10 - ";
					color: var(--color-gold);
					font-weight: 600;
				}
			}
			.checkboxes-wrapper {
				display: flex;
				gap: 1rem;

				.checkbox-cont {
					display: flex;
					flex-direction: column;
					font-variant-numeric: tabular-nums;
				}
				label {
					font-size: 1rem;
				}
				input {
					--_color: transparent;
					--_size: 1.25rem;
					position: relative;
					border: none;
					width: var(--_size);
					height: var(--_size);
					padding: 0;
					display: block;

					@media (width < 700px) {
						--_size: 1.25rem;
					}

					&:checked {
						--_color: var(--color-gold);
					}

					&::before {
						content: "";
						position: absolute;
						inset: 0;
						border-radius: 100px;
						background-color: var(--_color);
						outline: 2px solid var(--color-white);
						outline-offset: -4px;
					}
				}
			}
		}
		.arrow {
			position: absolute;
			background: red;
			font-size: 5rem;
			bottom: 0;
		}
	}
	@media (width < 600px) {
		.modal:has(.result-cont.open) ol {
			height: max(30vh, 200px);
		}
	}
}

.result-cont {
	display: none;
	margin-top: 1rem;
	padding-right: var(--_padding-right-scrollbar);

	p {
		font-weight: 400;

		&.bold {
			font-weight: 600;
		}
	}

	&.open {
		display: block;
	}
}