.checkout-order-section {
	display: flex;
	flex-flow: column;
	gap: 32px;
	margin-top: 20px;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		flex-flow: row nowrap;
		align-items: flex-start;
		align-self: center;
		gap: 40px;
		margin-top: 40px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

.checkout-order-title {
	margin-top: 16px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		align-self: center;
		margin-top: 20px;
		font-size: 48px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

.checkout-order-section__container {
	display: flex;
	flex-flow: column;
	gap: 32px;

	@include desktop {
		flex: 1;
	}
}

.checkout-order-section__inf-for-mobile {
	display: flex;
	flex-flow: column;
	gap: 8px;

	@include desktop {
		display: none;
	}
}

.checkout-order-section__select-btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	min-height: 70px;
	padding: 16px;
	border-radius: 20px;
	background-color: $color-surface;
	text-align: left;
	box-sizing: border-box;
}

.checkout-order-section__select-btn__main {
	display: flex;
	flex-flow: column;
	gap: 6px;

	b {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;
	}

	p {
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;
	}
}

.checkout-order-section__select-btn__icon {
	width: 24px;
	height: 24px;
	color: $color-green;
}

.checkout-order-section__products-wrapper {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include desktop {
		gap: 20px;
	}
}

.checkout-order-section__products-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 24px;
	}
}

.checkout-order-section__products-list {
	display: flex;
	flex-flow: column;
}

.checkout-order-section__product-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 14px;

	@include desktop {
		gap: 16px;
	}

	&:not(:last-child) {
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid $color-border;

		@include desktop {
			padding-bottom: 16px;
			margin-bottom: 16px;
		}
	}
}

.checkout-order-section__product-item__cover {
	flex: 0 0 84px;
	height: 64px;
	border-radius: 18px;
	background-color: $color-surface;

	@include desktop {
		border-radius: 20px;
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		pointer-events: none;
	}
}

.checkout-order-section__product-item__name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;

	@include desktop {
		font-size: 18px;
		line-height: 21px;
	}
}

.checkout-order-section__product-item__price {
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;

	@include desktop {
		font-size: 18px;
		line-height: 21px;
	}
}

.checkout-order-section__block {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;
	box-sizing: border-box;

	@include desktop {
		flex: 1;
		position: sticky;
		top: 100px;
		max-width: 403px;
		padding: 24px;
		border-radius: 32px;
	}
}

.checkout-order-section__block__total {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		gap: 16px;
	}

	span {
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}
	}

	b {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 28px;
		}
	}
}

.checkout-order-section__block__list {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		gap: 12px;
	}

	li {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;

		@include desktop {
			gap: 10px;
		}

		&::before {
			content: '';
			order: -1;
			flex: 1;
			height: 16px;
			border-bottom: 1px dashed $color-border;

			@include desktop {
				height: 18px;
			}
		}

		span {
			font-size: 14px;
			line-height: 16px;

			@include desktop {
				font-size: 16px;
				line-height: 18px;
			}

			&:nth-child(1) {
				order: -2;
				color: $color-gray-md;
			}
		}
	}
}

.checkout-order-section__block__input {
	position: relative;

	input {
		width: 100%;
		height: 48px;
		padding: 0px 14px;
		border-radius: 14px;
		background-color: $color-white;
		font-size: 14px;
		box-sizing: border-box;

		&::placeholder {
			color: $color-gray-md;
		}

		@include desktop {
			height: 54px;
			padding: 0px 16px;
			border-radius: 16px;
			font-size: 16px;
		}
	}

	&.applied {
		input {
			padding-left: calc(14px + 24px + 10px);
			background-position: left 14px center;
			background-size: 24px;
			background-repeat: no-repeat;
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75ZM16.48 9.37756C16.9645 9.11257 17.1425 8.50493 16.8775 8.02038C16.6125 7.53582 16.0049 7.35782 15.5204 7.62282C13.6917 8.62286 12.1796 10.5529 11.1629 12.1096C10.7872 12.685 10.4662 13.2297 10.2094 13.6911C9.96984 13.4587 9.73258 13.257 9.52038 13.0892C9.2427 12.8697 8.99282 12.6965 8.81063 12.5772L8.49559 12.3815C8.01585 12.1079 7.40513 12.275 7.13152 12.7548C6.85797 13.2344 7.02493 13.8449 7.50442 14.1187L7.71471 14.2502C7.85752 14.3437 8.05764 14.4823 8.27997 14.6581C8.73753 15.0198 9.23126 15.494 9.54198 16.0135C9.73267 16.3323 10.0844 16.5191 10.4553 16.4987C10.8261 16.4782 11.1551 16.2536 11.3096 15.9159L11.4079 15.7105C11.4756 15.5721 11.577 15.3697 11.709 15.1204C11.9735 14.6207 12.3581 13.9372 12.8374 13.2032C13.8208 11.6975 15.1086 10.1275 16.48 9.37756Z' fill='%231F895B'/%3E%3C/svg%3E");

			@include desktop {
				padding-left: calc(16px + 24px + 10px);
			}
		}
	}
	&.error {
		input {
			color: $color-error-primary;
		}
	}

	&:not(.error) {
		.checkout-order-section__block__input-error {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.checkout-order-section__block__input-apply-btn {
	position: absolute;
	top: 50%;
	right: 14px;
	font-size: 14px;
	font-weight: 500;
	color: $color-green;
	transform: translateY(-50%);

	@include desktop {
		right: 16px;
		font-size: 16px;
	}
}

.checkout-order-section__block__input-clear-btn {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 24px;
	height: 24px;
	color: $color-gray-low;
	transform: translateY(-50%);

	@include desktop {
		right: 16px;
	}

	svg {
		width: 100%;
		height: 100%;
	}
}

.checkout-order-section__block__input-error {
	position: absolute;
	top: -100%;
	left: 50%;
	padding: 6px 10px;
	border-radius: calc(28px / 2);
	background-color: $color-error-primary;
	transform: translateX(-50%) translateY(100%);
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	color: $color-white;
	white-space: nowrap;
	z-index: 2;
	transition:
		visibility 0.3s ease,
		opacity 0.3s ease;

	&::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		width: 16px;
		height: 11px;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.79443 10.5L0.000203097 4.3915e-07L15.5887 1.80194e-06L7.79443 10.5Z' fill='%23ED0A34'/%3E%3C/svg%3E");
		transform: translateX(-50%);
	}
}

.checkout-order-section__block__submit-btn {
	min-height: 54px;
	padding: 0px 18px;
	border-radius: 14px;
	background-color: $color-green;
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;
	color: $color-white;

	@include desktop {
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 18px;
		line-height: 21px;
	}
}

.checkout-order-section__block__terms {
	.input-checkbox__text {
		font-weight: 400;
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}
	}
}

.checkout-order-section__inf-for-desktop {
	display: flex;
	flex-flow: column;
	gap: 32px;

	@include mobile {
		display: none;
	}
}

.checkout-order-section__inf-block {
	display: flex;
	flex-flow: column;
	gap: 20px;

	@include mobile {
		flex: 1;
		gap: 16px;
	}
}

.checkout-order-section__inf-block__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;

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

.checkout-order-section__inf-block__desc {
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include mobile {
		margin-top: -10px;
	}
}

.checkout-order-section__inf-block__group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 21px;

	@include mobile {
		gap: 8px;
	}
}

.checkout-order-section__inf-block__type-select {
	cursor: pointer;

	input {
		display: none;
	}

	input:checked {
		& ~ .checkout-order-section__inf-block__type-select__wrapper {
			border-color: $color-green;

			.checkout-order-section__inf-block__type-select__box {
				background-color: $color-green;

				&::before {
					content: '';
					display: block;
					width: 12px;
					height: 12px;
					border-radius: 50%;
					background-color: $color-white;
				}
			}
		}
	}
}

.checkout-order-section__inf-block__type-select__wrapper {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 16px;
	min-height: 88px;
	padding: 24px;
	border-radius: 32px;
	border: 1px solid $color-border;
	box-sizing: border-box;

	@include mobile {
		position: relative;
		gap: unset;
		padding: 16px;
		border-radius: 20px;
	}
}

.checkout-order-section__inf-block__type-select__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background-color: $color-surface;

	@include mobile {
		display: none;
	}

	svg {
		width: 24px;
		height: 24px;
		color: $color-green;
	}
}

.checkout-order-section__inf-block__type-select__main {
	flex: 1;
	display: flex;
	flex-flow: column;
	gap: 6px;

	@include mobile {
		flex: unset;
	}
}

.checkout-order-section__inf-block__type-select__type {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	line-height: 18px;

	@include mobile {
		flex-flow: column;
		flex-flow: column;
		align-items: unset;
	}

	b {
		font-weight: 500;

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

	span {
		color: $color-gray-md;

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

.checkout-order-section__inf-block__type-select__desc {
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include mobile {
		font-size: 10px;
		line-height: 11px;
	}
}

.checkout-order-section__inf-block__type-select__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: $color-surface;

	@include mobile {
		position: absolute;
		top: 14px;
		right: 14px;
	}
}

.checkout-order-section__inf-block__address-input {
	position: relative;

	input {
		width: 100%;
		min-height: 64px;
		padding: 0px 16px;
		padding-right: calc(20px + 24px + 20px);
		border-radius: 16px;
		background-color: $color-surface;
		font-size: 16px;
		box-sizing: border-box;

		&::placeholder {
			color: $color-gray-md;
		}

		@include mobile {
			padding: 0px 14px;
			padding-right: calc(14px + 24px + 14px);
			min-height: 54px;
			border-radius: 14px;
			font-size: 14px;
		}
	}
}

.checkout-order-section__inf-block__address-input__clear-btn {
	position: absolute;
	top: 50%;
	right: 20px;
	color: $color-gray-md;
	transform: translateY(-50%);

	svg {
		width: 24px;
		height: 24px;
	}

	@include mobile {
		right: 14px;
	}
}

.checkout-order-section__inf-block__content {
	display: flex;
	flex-flow: column;
	gap: 16px;

	&--gap8 {
		gap: 8px;
	}
}

.checkout-order-section__inf-block__addresses {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include mobile {
		gap: 8px;
	}
}

.checkout-order-section__inf-block__address-item {
	cursor: pointer;

	input {
		display: none;
	}

	input:checked ~ .checkout-order-section__inf-block__address-item__wrapper {
		border-color: $color-green;

		.checkout-order-section__inf-block__address-item__box {
			background-color: $color-green;

			&::before {
				content: '';
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: $color-white;
			}
		}
	}
}

.checkout-order-section__inf-block__address-item__wrapper {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 24px;
	border-radius: 32px;
	border: 1px solid $color-border;
	box-sizing: border-box;

	@include mobile {
		position: relative;
		padding: 18px;
		border-radius: 28px;
	}
}

.checkout-order-section__inf-block__address-item__main {
	flex: 1;
	display: flex;
	flex-flow: column;
}

.checkout-order-section__inf-block__address-item__address-label {
	font-size: 16px;
	font-weight: 500;
	line-height: 18px;

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

.checkout-order-section__inf-block__address-item__address-full {
	margin-top: 6px;
	font-size: 16px;
	line-height: 18px;
	color: $color-gray-md;

	@include mobile {
		margin-top: 4px;
		font-size: 14px;
		line-height: 16px;
	}
}

.checkout-order-section__inf-block__address-item__contacts {
	margin-top: 12px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 16px;

	@include mobile {
		margin-top: 10px;
		gap: 14px;
	}

	li {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;

		svg {
			width: 20px;
			height: 20px;
			color: $color-green;
		}

		span {
			font-size: 16px;
			line-height: 18px;

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

.checkout-order-section__inf-block__address-item__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: $color-surface;

	@include mobile {
		position: absolute;
		top: 18px;
		right: 18px;
	}
}

.checkout-order-section__inf-block__map-addresses {
	display: flex;
	width: 100%;
	aspect-ratio: 269 / 186;
	border-radius: 32px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('/images/delivery-map.png');

	@include retina {
		background-image: url('/images/delivery-map@2x.png');
	}

	@include mobile {
		flex: 1;
		aspect-ratio: unset;
		background-size: cover;
		background-position: right center;
		border-radius: 28px;
	}
}

.checkout-order-section__inf-block__map-address-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 24px;
	margin: auto 10px 10px;
	border-radius: 32px;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;

	@include mobile {
		gap: 14px;
		padding: 18px;
		margin: auto 6px 6px;
		border-radius: 28px;
	}
}

.checkout-order-section__inf-block__map-address-item__main {
	flex: 1;
	display: flex;
	flex-flow: column;
}

.checkout-order-section__inf-block__map-address-item__address-label {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;

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

.checkout-order-section__inf-block__map-address-item__address-full {
	margin-top: 6px;
	font-size: 16px;
	line-height: 18px;
	color: $color-gray-md;

	@include mobile {
		margin-top: 4px;
		font-size: 14px;
		line-height: 16px;
	}
}

.checkout-order-section__inf-block__map-address-item__footer {
	display: flex;
	flex-flow: column;
	gap: 6px;
	margin-top: 12px;

	@include mobile {
		gap: 4px;
		margin-top: 10px;
	}
}

.checkout-order-section__inf-block__map-address-item__footer__title {
	font-size: 16px;
	line-height: 18px;

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

.checkout-order-section__inf-block__map-address-item__contacts {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 16px;

	@include mobile {
		gap: 14px;
	}

	li {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;

		svg {
			width: 20px;
			height: 20px;
			color: $color-green;
		}

		span {
			font-size: 14px;
			line-height: 16px;

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

.checkout-order-section__inf-block__map-address-item__select-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0px 20px;
	border-radius: 16px;
	background-color: $color-green;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 21px;
	color: $color-white;
	box-sizing: border-box;

	&.selected {
		color: $color-black;
		background-color: $color-white;
		border: 1px solid $color-border;
	}

	@include mobile {
		display: none;
	}
}