@charset "UTF-8";
.order-service {
		display: flex;
		gap: var(--gap);
		align-items: flex-start;
}
@media only screen and (max-width: 1199.99px) {
		.order-service {
				flex-direction: column;
		}
		.order-service > * {
				flex: 0 0 auto;
				width: 100%;
		}
}
@media only screen and (min-width: 1200px) {
		.order-service > * {
				flex: 0 0 auto;
				width: calc((100% - var(--gap)) / 2);
		}
}
.service-form {
		padding: var(--side-block);
		background: var(--form-bg);
		border-radius: var(--radius);
		display: flex;
		flex-direction: column;
		gap: 32px;
		color: var(--form-text);
}
.service-form > * {
		flex: 0 0 auto;
		width: 100%;
		margin: 0;
}
.service-form .title {
		font: 800 32px/1.1 var(--font-title);
		font-variant-numeric: lining-nums;
		letter-spacing: 0.01em;
		color: var(--accent);
}
.service-form .descr {
		font: normal 18px/1.2 var(--font);
}
.service-form .descr a {
		color: inherit;
}
@media only screen and (min-width: 700px) {
		.service-form .form-label, .service-form .form-input-info {
				font-size: 18px;
		}
		.service-form .form-label {
				margin-bottom: 16px;
		}
		.service-form .form-input-info {
				margin-top: 16px;
		}
}
.service-form .submit .btn svg {
		width: 24px;
		height: 24px;
}
.service-form .submit .descr {
		margin-top: 16px;
}
.service-form .additional, .service-form .additional .el {
		list-style: none;
		margin: 0;
		padding: 0;
}
.service-form .additional {
		display: flex;
		flex-direction: column;
		gap: 16px;
}
.service-form .additional .el {
		flex: 0 0 auto;
		width: 100%;
		display: flex;
		gap: 6px;
}
.service-form .additional .text {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		font: bold 18px/1.05 var(--font-title);
		font-variant-numeric: lining-nums;
		padding: 0 19px;
		height: 43px;
		color: var(--input-text);
		background: var(--white);
		border-radius: var(--radius);
}
.service-form .additional .text > *:last-child:not(:only-child) {
		flex: 0 0 auto;
		text-align: right;
}
.service-form .additional label {
		flex: 0 0 auto;
		position: relative;
		display: flex;
		flex-direction: column;
}
.service-form .additional label input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
}
.service-form .additional .check {
		display: block;
		flex: 1 0 auto;
		width: 52px;
		background: var(--white);
		border-radius: var(--radius);
		position: relative;
}
.service-form .additional .check svg {
		fill: var(--form-text);
		width: 32px;
		height: 32px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -16px;
		transition: opacity 0.4s ease;
		opacity: 0;
}
.service-form .additional input:checked ~ .check svg {
		opacity: 1;
}
.service-form .additional .input-num {
		flex: 0 0 auto;
		width: 85px;
		transition: opacity 0.4s ease;
}
.service-form .additional .el:has(label input:not(:checked)) .input-num {
		opacity: 0;
		pointer-events: none;
}
.service-form .submit .btn {
		width: 100%;
		height: 80px;
		gap: 8px;
}
.service-form .checks {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
}
.service-form .checks label {
		flex: 0 0 auto;
		max-width: 100%;
		position: relative;
		cursor: pointer;
		user-select: none;
}
.service-form .checks input {
		position: absolute;
		transform: scale(0);
		opacity: 0;
}
.service-form .checks label span {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 43px;
		font: bold 18px/1.2 var(--font-title);
		font-variant-numeric: lining-nums;
		text-align: center;
		text-decoration: none;
		background: var(--white);
		padding: 0 24px;
		border-radius: var(--radius);
		color: var(--main-text);
		transition: background 0.4s ease;
}
@media (pointer:fine) {
		.service-form .checks label:hover span {
				color: var(--accent);
		}
}
.service-form .checks label input:checked ~ span {
		background-color: var(--redlight);
		color: var(--main-text) !important;
}
@media only screen and (max-width: 699.99px) {
		.service-form {
				padding-left: 24px;
				padding-right: 24px;
				gap: 16px;
		}
		.service-form .title {
				font-weight: bold;
				font-size: 24px;
		}
		.service-form .descr {
				font-size: 14px;
		}
		.service-form .input input, .service-form .jcf-select-text, .service-form .input select {
				font-size: 14px;
		}
		html:has(.service-form) .jcf-option {
				font-size: 14px;
		}
		.service-form .additional .text {
				font-size: 16px;
		}
		.service-form .additional .text > *:first-child {
				font-size: 14px;
		}
		.service-form .additional .check {
				width: 44px;
		}
		.service-form .additional .input-num {
				width: 60px;
		}
		.service-form .submit .btn {
				height: 60px;
				font-size: 16px;
		}
		.service-form .checks label span {
				font-size: 16px;
				height: 37px;
		}
}