/* Job purchase */

.wpj-checkout-header {
	display: flex;
	align-items: center;

	@include mobile {
		align-items: flex-start;
	}

	.checkout-header-avatar {
		margin-right: 25px;

		@include small-desktop {
			width: auto;
			margin-right: 15px;
		}
	}

	.checkout-header-content {
		padding-right: 30px;
		text-align: left;

		.title-wrapper {
			h1 {
				color: $secondaryColor;
				font-size: 24px;
				font-weight: 600;
				margin: 0;
				line-height: 1.2;

				@include small-desktop {
					font-size: 20px;
				}

				@include mobile {
					font-size: 16px;
				}
			}
		}

		.category-wrapper {
			font-size: 14px;
			color: $mainTextColor;

			.payment-job-categories {
				text-align: left;
			}
		}
	}

	.checkout-header-price {
		margin-left: auto;
	}
}

.job-price-purchase {
	color: $headlinesColor3;
	font-size: 16px;
	font-weight: 700;
}

.job-order-info {
	margin-top: 10px;

	.item {
		font-weight: 600;
		color: $headlinesColor3;
		display: flex;
		justify-content: space-between;

		span {
			font-weight: 400;
		}

		.price-value {
			font-size: 13px;
			color: $headlinesColor3;
			display: flex;
			align-items: center;
		}

		.price-label {
			font-size: 13px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 0.1em;
			color: $mainTextColor;
		}

		.price-content {
			display: flex;
			align-items: center;
			margin-left: auto;
			flex-shrink: 0;

			@include small-mobile {
				flex-wrap: wrap;
				text-align: right;
				justify-content: flex-end;
			}

			.amount_section {
				margin-right: 0;
				margin-left: 10px;

				input[type="text"] {
					background: $whiteColor;
				}

				@include small-mobile {
					flex: 1 1 100%;
					margin-right: 0;
					max-width: 85px;
				}
			}

			.extra-price-inside {
				font-size: inherit;
				color: inherit;
				display: block;
				flex-shrink: 0;

				@include small-mobile {
					flex: 1 1 100%;
					margin-right: 0;
					max-width: 85px;
				}
			}
		}
	}
}

.main-amount-box {
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price-label {
			font-size: 13px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 0.1em;
			color: $mainTextColor;
		}
	}
}

.extra-item {
	display: flex;
	align-items: center;

	.ui.checkbox {
		label {
			font-size: 16px;
			font-weight: 600;
			color: $headlinesColor3;

			@include mobile {
				font-size: 14px;
			}

			span {
				font-weight: 400;
				color: $mainTextColor;
				font-size: 14px;

				@include mobile {
					font-size: 13px;
				}
			}
		}
	}
}