.vd-modal {
	background: rgba(20, 19, 19, 0.9) !important;
	width: 100% !important;
	max-width: 100% !important;

	.gradient-text {
		--gradient-color: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);

		color: transparent;
		background: var(--gradient-color);
		background-clip: text;
	}

	.gradient-border-box {
		--gradient-background: rgba(25, 24, 23, 0.4);
		--gradient-border: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);

		position: relative;
		padding: 8px 13px;
		background: var(--gradient-background);
		border-radius: 12px;
		isolation: isolate;

		@media (width >= 768px) {
			padding: 12px 28px;
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			border: 1px solid transparent;
			background: var(--gradient-border) border-box;
			mask:
				linear-gradient(#fff 0 0) content-box,
				linear-gradient(#fff 0 0);
			mask-composite: exclude;
			z-index: -1;
			pointer-events: none;
		}

		&.with-glow {
			--glow: 0px 0px 19px 0px rgba(249, 116, 1, 0.59);

			box-shadow: var(--glow);
		}
	}

	.modal-dialog {
		max-width: 715px;
	}

	.modal-content {
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.modal-body {
		padding: 0;
	}

	.modal-box {
		--gradient-border: linear-gradient(180deg, #b97843 0%, #8b4b17 100%);
		--gradient-background: linear-gradient(
			to bottom,
			#251b1b 44.4%,
			rgb(21 20 18) 54.27%
		);

		padding: 0;
		border-radius: 10px;
		overflow: hidden;

		@media (width >= 768px) {
			--gradient-background: linear-gradient(
				270deg,
				#251b1b 44.4%,
				#141412 54.27%
			);

			display: grid;
			grid-template-columns: 1fr 1.2fr;
			gap: 20px;
		}

		@media (width >= 992px) {
			gap: 25px;
		}

		&.with-glow {
			--glow: 0px 4px 60px rgba(229, 118, 37, 0.3);
		}
	}

	.text-wrapper {
		padding: 18px 16px 24px;

		@media (width >= 768px) {
			grid-column: 2 / 3;
			grid-row: 1 / -1;

			padding: 50px 25px 35px 0;
		}

		@media (width >= 992px) {
			padding: 55px 28px 35px 0;
		}
	}

	.btn-close {
		display: block;
		margin: 0 0 16px auto;
		padding: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		border-radius: 0;
		width: auto;
		height: auto;

		@media (width >= 768px) {
			position: absolute;
			top: 18px;
			right: 19px;
			z-index: 5;
		}

		img {
			display: block;
			width: 20px;
		}
	}

	h2 {
		margin-block: 0 15px;
		font-weight: 500;
		font-size: 2rem;
		line-height: 1.2;

		@media (width >= 768px) {
			margin-bottom: 30px;
		}
	}

	h3 {
		margin-block: 0 20px;
		font-weight: 400;
		font-size: 1.25rem;
		line-height: 1.3;
		color: #fff;

		@media (width >= 768px) {
			margin-bottom: 25px;
		}

		.gradient-text {
			font-weight: 500;
			color: transparent;
			display: block;
		}
	}

	p {
		margin: 0 0 10px;
		font-weight: 400;
		font-size: 0.875rem;
		line-height: 1.3;
		color: #fff;
		display: flex;
		align-items: start;
		gap: 5px;

		img {
			flex-shrink: 0;
			margin-top: 3px;
		}
	}

	.btn-custom-lp {
		margin: 20px 0 0;
		display: block;
		width: fit-content;
		padding: 18px 23px;
		background: linear-gradient(92.95deg, #f3981f 0%, #e57625 100%);
		border: none;
		border-radius: 12px;
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.2;
		color: rgba(20, 19, 19, 1);
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: box-shadow 0.3s ease;

		&:hover,
		&:focus-visible,
		&:active {
			color: rgba(20, 19, 19, 1) !important;
			box-shadow: 0px 0px 15px 0px rgba(243, 152, 31, 0.4);
		}

		@media (width >= 768px) {
			margin-top: 26px;
		}
	}

	.image-wrapper {
		padding: 0 1px 15px;

		@media (width >= 768px) {
			grid-column: 1 / 2;
			grid-row: 1 / -1;
			padding: 12px 0 15px 10px;
		}
	}

	.modal-image {
		display: block;
		width: 100%;
		max-width: 100%;
		flex-shrink: 0;

		@media (width >= 768px) {
			margin-top: 10px;
		}
	}

	&.kv-modal {
		.modal-box {
			display: block;

			.text-wrapper {
				@media (width >= 768px) {
					padding: 50px 25px 35px;
				}

				@media (width >= 992px) {
					padding: 55px 28px 35px;
				}
			}
		}
	}
}