.orderPage {
	h1.title {
		font-size: 30px;
		line-height: 29px;
		text-align: center;
		padding: 0 150px;
		color: var(--nomad);
		margin: 0 0 24px;
	}

	h2.title {
		font-size: 24px;
		color: var(--nomad);
		font-weight: 500;
		line-height:normal;
		margin:0;
	}

	.steps {
		margin: 0 0 38px;
		display:flex;
		gap:50px;
		justify-content:center;
		align-items:center;

		.step {
			cursor: default;
			display: inline-block;
			width: 32px;
			height: 32px;
			border: 2px solid var(--mlgray);
			border-radius: 50%;
			text-align: center;
			line-height: 28px;
			font-size: 18px;
			color: var(--mlgray);
			margin: 9px 0;
			position: relative;
			vertical-align: middle;

			&.current {
				width: 50px;
				height: 50px;
				border-color: var(--nomad);
				line-height: 46px;
				font-size: 26px;
				color: var(--nomad);

				&+.step:before {
					background-color: var(--nomad);
				}
			}
			&+.step:before {
				content: "";
				display: block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: var(--lgray);
				position: absolute;
				left: -31px;
				top: 50%;
				margin: -4px 0 0;
				pointer-events: none;
			}
			&+.step:after {
				content: "";
				display: block;
				width: 2px;
				height: 2px;
				position: absolute;
				left: 0;
				top: 13px;
				border-radius: 50%;
				pointer-events: none;
				box-shadow: -8px 0 0 var(--lgray), -14px 0 0 var(--lgray), -20px 0 0 var(--lgray), -36px 0 0 var(--lgray), -42px 0 0 var(--lgray), -48px 0 0 var(--lgray);
			}
		}
	}

	.order-body {
		.form {
			display:flex;
			flex-direction:column;
			gap:var(--lh20);

			&.loading {
				.line {
					&.acts:after {
						content:"";
						display:block;

						width:40px;
						height:40px;
						background:url("/images/spinner.svg") center center no-repeat;
						background-size:50px;
					}
				}
			}

			.line {
				display:flex;
				gap:30px;
				align-items:flex-start;
				margin:0;
				position:relative;

				&.acts {
					display:flex;
					align-items:center;
					gap:20px;
				}

				&:has(#poCond) {
					flex-direction:column;
					gap:5px;
				}

				.block {
					flex:auto;
					width:auto;
					margin:0;
					display:flex;
					flex-direction:column;
					gap:18px;
					position:relative;

					&>label:first-child,
					&>.label:first-child {
						display: flex;
						gap:5px;
						cursor: pointer;
						font-size: 16px;
						line-height: 15px;
						color: var(--black);
						font-weight: normal;
						white-space:nowrap;
					}

					&:has([required]) label:first-child:after,
					&:has([required]) .label:first-child:after,
					&>select label:first-child:after,
					&>select .label:first-child:after {
						content: "*";
						color: var(--nomad);
						font-weight:bold;
					}

					&.iin {
						flex:0 0 220px;
					}
					&.phone {
						flex:0 0 315px;
					}
					&.code {
						flex:0 0 200px;
					}
					&.period {
						flex:0 0 170px;
					}
					&.date {
						flex:0 0 170px;
						&.end {
							flex:0 0 200px;
						}
					}
					&.time {
						flex:0 0 120px;
					}
				}

				&#price-line {
					justify-content:flex-start;

					.block {
						flex:0 0 200px;

						.text {
							background:var(--lgray);
							span {
								font-weight:bold;
							}
						}
					}
				}

				.text {
					width: 100%;
					border: 1px solid var(--mlgray);
					background:var(--white);
					border-radius: 10px;
					height: 40px;
					line-height: 38px;
					padding: 0 10px;
					font-weight: normal;
					font-size: 16px;
					color: var(--black);
					-webkit-appearance:listbox;

					&[type="number"]::-webkit-outer-spin-button,
					&[type="number"]::-webkit-inner-spin-button {
						-webkit-appearance:default-button;
						margin:0;
					}
					&[type="date"]::-webkit-inner-spin-button,
					&[type="date"]::-webkit-calendar-picker-indicator,
					&[type="time"]::-webkit-inner-spin-button,
					&[type="time"]::-webkit-calendar-picker-indicator {
						display:inherit;
						-webkit-appearance:default-button;
					}
					&::-ms-expand {
						display:inherit;
						-webkit-appearance:initial;
					}
				}

				&.pm {
					.block {
						flex:0;

						label {
							line-height: var(--lh45);
							font-size: var(--fs14);
							display: inline-block;
							white-space:nowrap;
						}
					}

					&:not(:has(#pmKs:checked)) {
						&~.line.kaspi {
							display:none;
						}
					}
				}

				&.files {
					.block {
						flex:none;

						.file {
							display:inline-flex;
							font-weight:500;
							gap:5px;
							align-items:center;
							color:var(--nomad);
							font-size:var(--fs16);

							&:before {
								content:"";
								display:block;
								width:18px;
								height:20px;
								background:url("/images/document.svg") center center no-repeat;
								background-size:contain;
							}

							&:hover {
								text-decoration:underline;
							}
						}
					}
				}
			}

			.message {
				margin:0;

				a {
					color:var(--nomad);
					text-decoration:underline;

					&:hover {
						text-decoration:none;
					}
				}
			}

			.btn {
				display: inline-block;
				background: var(--nomad);
				color: var(--white);
				border: 2px solid var(--nomad);
				border-radius: 10px;
				white-space: nowrap;
				font-weight: 500;
				text-decoration: none;
				cursor: pointer;
				transition: all 0.3s;
				outline: 0;
				height: 50px;
				line-height: 46px;
				font-size: 24px;
				padding: 0 55px;
				text-transform:none;

				&:hover {
					color: var(--nomad);
					background: var(--white);
				}
			}

			.cb {
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 0;
				border: 0;
				padding: 0;
				margin: 0;
				opacity: 0;
				z-index: -1;

				&+label {
					display: inline-block;
					cursor: pointer;
					line-height: 20px;
					font-size: 16px;
					padding: 0 0 0 29px;
					position: relative;
					font-weight: 500;
					color: var(--black);

					&:before {
						content: "";
						display: block;
						width: 20px;
						height: 20px;
						border: 1px solid var(--nomad);
						position: absolute;
						left: 0;
						top: 0;
						transition: all 0.3s;
					}
					&:after {
						content: "";
						display: block;
						transition: all 0.3s;
						width: 10px;
						height: 10px;
						background: var(--nomad);
						opacity: 0;
						position: absolute;
						left: 5px;
						top: 5px;
					}
					a {
						text-decoration:underline;

						&:hover {
							text-decoration:none;
						}
					}
				}
				&:checked {
					&+label:after {
						opacity: 1;
					}
				}
			}
		}
	}
	.description.waiting {
		border:2px solid var(--nomad);
		padding:10px;
		font-weight:bold;
		color:var(--nomad);

		a {
			color:var(--nomad);
			text-decoration:underline;

			&:hover {
				text-decoration:none;
			}
		}
	}
}