@import "variables";
.p-cart-delivery {
	.back-to-cart {
		margin-bottom: 1rem;
		a {
			border-color: transparent;
			&:hover {
				border-color: $blue;
			}
		}
	}
	h1 {
		margin-bottom: 1.5rem;
		font-size: 34px;
		color: $color_dark;
		@media (max-width: 767px){
			font-size: 22px;
		}
	}

	.p-cart-delivery__choice {
		background: lighten($yellow_light, 10%);
		//max-width: 800px;
		padding: 8px 12px;
		& + .p-cart-delivery__choice { margin-top: 12px; }
		a {
			border-color: transparent;
		}
		.media-right {
			white-space: nowrap;
		}
		&.media-responsive-xs {
			.media-right {
				@media(max-width: 767px){
					padding-top: 4px !important;
				}
			}
		}

		.pcd-choice {
			overflow: hidden;
			& + .pcd-choice {
				margin-top: 8px;
			}
			.pcd-choice-label {
				@media (min-width: 768px){
					float: left;
					width: 180px;
				}
			}
			.pcd-choice-body {
				overflow: hidden;
			}
		}

		&.v2--p-cart-delivery__choice {
			.pcd-choice-change {
				display: none;
				float: right;
				padding-left: 8px;
				white-space: nowrap;
				@media (min-width: 360px) and (max-width: 767px) {
					display: block;
				}
			}
			.media-right {
				white-space: nowrap;
				@media (min-width: 360px) and (max-width: 767px) {
					display: none;
				}
				@media (max-width: 359px) {
					text-align: right;
				}
			}
			.pcd-choice {
				.pcd-choice-label {}
			}
		}
	}

	.p-cart-delivery__couriers {
		&._ver-a {
			.thead {
				position: relative;
				padding-bottom: 4px;
				.title {
					position: absolute; top: -5px; left: 0;
					font-size: 16px;
					font-weight: bold;
					color: $blue;
					&.v2 {
						font-size: 14px;
						color: $gray_dark;
					}
				}
				.label {
					position: absolute; top: -16px; left: 0;
					padding: 10px 12px;
					@include box-shadow(1px 1px 2px $color_gray_20);
				}
				.text {
					float: right;
					width: 136px;
					margin-right: 80px;
					//padding: 0 100px 4px 0;
					font-weight: bold;
					//text-align: right;
					@media (max-width: 991px){
						padding-right: 0;
						opacity: 0;
					}
				}
				.thead__label {
					position: relative;
					float: right;
					font-weight: bold;
					@media (max-width: 991px){
						opacity: 0;
					}
					.date {
						float: left;
						padding-right: 44px;
					}
					.price {
						float: left;
						width: 100px;
						padding: 0 8px;
						text-align: right;
					}
				}
			}
			.form-check {
				& + .form-check {
					border-top: 1px solid $gray_light;
				}
				label {
					position: relative;
					overflow: hidden;
					display: block;
					padding: 10px 8px 10px 32px;
					&:hover {
						background: $blue_light;
					}
					.courier-name {
						@media (max-width: 991px){
							display: block;
							padding-bottom: 4px;
						}
						@media (min-width: 992px){
							padding-right: 180px;
						}
					}
					.courier-data {
						//padding: 2px 4px;
						font-weight: bold;
						white-space: nowrap;
						@media (max-width: 991px){
							margin-right: 16px;
							margin-left: -4px;
						}
						@media (min-width: 992px) {
							position: absolute;
							top: 8px;
							right: 80px;
							width: 140px;
						}
						.label {
							padding: 2px 4px;
							font-size: inherit;
							line-height: inherit;
							@include border-radius(0);
						}
						&.success {
							background: $green_light;
						}
						&.warning {
							background: $yellow_light;
						}
					}
					.courier-price {
						margin-left: -4px;
						padding: 2px 4px;
						color: $blue;
						white-space: nowrap;
						text-align: right;
						@media (max-width: 991px){
							position: absolute; bottom: 8px; right: 4px;
							margin-left: 0;
						}
						@media (min-width: 992px){
							position: absolute; top: 8px; right: 4px;
							margin-left: 0;
						}
						strong {
							color: $blue;
						}
						&.success {
							background: $green_light;
						}
						&.warning {
							background: $yellow_light;
						}
					}
				}
				.form-check-add {
					position: relative;
					display: none;
					padding: 0 8px 10px 32px;
				}
				.help-block {
					margin: 8px 0 0 0;
					padding: 2px 8px;
				}

				//mod
				&.stylize .arr {
					top: 10px;
					left: 8px;
				}
				&.active {
					label {
						background: $blue_light;
					}
					.form-check-add {
						background: $blue_light;
						display: block;
					}
					.help-block.hidden {
						display: block !important;
					}
					&.will-danger {
						label {
							background: $red_light !important;
						}
						.label.label-success, .courier-price.success {
							background: transparent !important;
						}
					}
				}
			}
		}
		&._ver-b {
			.couriers__head {
				display: flex;
				align-items: flex-end;
				padding-bottom: 6px;
				font-weight: bold;
				.title {
					width: 65%;
					font-size: 16px;
					color: #0d61ab;
				}
				.date {
					@media(max-width: 991px){
						display: none;
					}
				}
				.price {
					margin-left: auto;
					padding-right: 8px;
					@media(max-width: 991px){
						display: none;
					}
				}
			}
			.couriers__body {
				.form-check {
					&:not(:first-child){
						border-top: 1px solid #e9e9e9;
					}
					label {
						position: relative;
						display: flex;
						//padding: 10px 8px 10px 32px;
						padding: 10px 0;
						@media (max-width: 991px) {
							flex-wrap: wrap;
						}
						.arr {
							top: 10px;
							left: 8px;
						}
						.label__name {
							flex-grow: 1;
							padding-left: 32px;
							@media (max-width: 991px) {
								width: 100%;
							}
						}
						.label__data {
							display: flex;
							min-width: 35%;
							@media (max-width: 991px) {
								min-width: 100%;
								padding-top: 4px;
								padding-left: 32px;
							}
							.data__date {
								.label {
									padding-left: 0;
									padding-right: 0;
									white-space: nowrap !important;
									@include border-radius(0);
									&.label-success {
										padding-left: 4px;
										padding-right: 4px;
									}
								}
							}
							.data__price {
								display: flex;
								flex-wrap: wrap;
								flex-direction: row-reverse;
								align-items: flex-start;
								margin-left: auto;
								padding-right: 8px;
								padding-left: 8px;
								.label {
									margin-left: 6px;
									padding-left: 0;
									padding-right: 0;
									@include border-radius(0);
									&.label-success {
										padding-left: 4px;
										padding-right: 4px;
									}
								}
								s {
									color: #9b9b9b;
								}
							}
						}
						input {
							position: absolute;
							opacity: 0;
							&:checked {
								& + .arr {
									&:before {
										background: $blue;
									}
								}
								& ~ .bg {
									background: #000;
									background: $color_water;
								}
							}
						}
						&:hover {
							background: $color_water;
							cursor: pointer;
						}
					}
					.form-check-add {
						position: relative;
						display: none;
						padding: 0 8px 10px 32px;
					}
					.help-block {
						margin: 8px 0 0 0;
						padding: 2px 8px;
					}
					&.active {
						label {
							background: $blue_light;
						}
						.form-check-add {
							background: $blue_light;
							display: block;
						}
						.help-block.hidden {
							display: block !important;
						}
						&.will-danger {
							label {
								background: $red_light !important;
							}
							.label.label-success, .courier-price.success {
								background: transparent !important;
							}
						}
					}
				}
			}
		}
	}
	.p-cart-delivery__submit {
		&:not(.has-error){
			& > a.btn {
				display: none;
			}
		}
		&.has-error {
			& > button[type="submit"] {
				display: none;
			}
		}
	}

	.suggest-cities {
		&._hide {
			position: relative;
			opacity: 0;
			&:before {
				content: '';
				position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			}
		}
	}
}