.application {
	> .container {
		padding-block: var(--clamp-40-20);
	}

	> .container > .content {
		display: flex;
		flex-direction: column;
		gap: var(--clamp-30-10);
		padding-inline: var(--clamp-30-10);
        padding-block: var(--clamp-40-10);
		border-radius: var(--clamp-30-10);
		background-color: var(--white-v2);

		.title {
			font-size: var(--clamp-28-22);
			font-weight: 800;
			line-height: 1.25;
			color: var(--black);
		}

		.description {
			font-size: var(--clamp-16-12);
			font-weight: 400;
			line-height: 1.25;
			color: var(--black);
		}

		.form {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr auto;
			gap: var(--clamp-12-8);
		}

		input,
		select {
			width: 100%;
			height: 44px;
			padding-inline: var(--clamp-16-10);

			border: 0;
			border-radius: 5px;
			background-color: var(--white);

			font-size: var(--clamp-16-12);
			font-weight: 500;
			color: var(--blue);
		}

		.button {
			height: 44px;
			padding-inline: var(--clamp-20-10);

			border: 0;
			border-radius: 5px;
			background-color: var(--blue);

			font-size: var(--clamp-16-12);
			font-weight: 700;
			color: var(--white);
			cursor: pointer;
		}
	}
}

.application-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;

	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;

	&.active {
		display: flex;
	}

	.overlay {
		position: absolute;
		inset: 0;
		background-color: color-mix(in srgb, var(--black) 60%, transparent);
	}

	.popup {
		position: relative;
		z-index: 1;

		width: 100%;
		max-width: 420px;
		padding: var(--clamp-30-10);

		border-radius: 10px;
		background-color: var(--white);
	}

	.title {
		margin-bottom: var(--clamp-12-8);

		font-size: var(--clamp-24-20);
		font-weight: 800;
		color: var(--black);
	}

	.description,
	.data {
		margin-bottom: var(--clamp-20-10);

		font-size: var(--clamp-16-12);
		color: var(--black);
	}

	.buttons {
		display: flex;
		gap: var(--clamp-12-8);
	}

	.button {
		height: 42px;
		padding-inline: var(--clamp-20-10);

		border: 0;
		border-radius: 5px;
		background-color: var(--blue);

		font-size: var(--clamp-16-12);
		font-weight: 700;
		color: var(--white);
		cursor: pointer;

		&.cancel {
			background-color: var(--black-a20);
			color: var(--black);
		}
	}
}

@media (max-width: 767px) {
	.application {
		> .container > .content {
			.form {
				grid-template-columns: 1fr;
			}
		}
	}
}