.cart {
	.pay-method {
		font-size: 14px;
		font-weight: bold;
		color: #455464;
		margin-top: 50px;

		@media (max-width: 576px) {
			font-size: 16px;
		}
	}

	.pay-items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		margin-top: 25px;
	}

	.snapp-pay {
		display: flex;
		align-items: center;
		margin-top: 20px;

		&.disabled {
			opacity: 0.6;

			.pay-item {
				cursor: default;
			}
		}

		.snapp-pay-text {
			margin-right: 10px;
		}

		span {
			font-size: 14px;
			color: #005799;
		}

		p {
			margin: 2px 0 0;
			font-size: 16px;
		}
	}

	.pay-item {
		display: flex;
		align-items: center;
		justify-content: right;
		width: 80px;
		height: 75px;
		// margin-left: 120px;
		cursor: pointer;
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;

		&.zarinpal {
			background-image: url('/assets/images/zarin.png');
		}
		&.bank-meli {
			background-image: url('/assets/images/bank-meli.png');
		}
		&.kimia {
			background-image: url('/assets/images/kimia.png');
		}
		&.tara {
			background-image: url('/assets/images/tara.png');
			background-size: 60px 60px;
		}
		&.snapp {
			background-image: url('/assets/images/snapp-pay.png');
			background-size: 50px 50px;
		}
	}

	.button-holder {
		margin: 50px 0 20px 20px;
		text-align: left;

		.btn-back {
			float: right;
			width: 100px;
		}

		button {
			width: 157px;
			height: 48px;
		}
	}

	.cart-list {
		margin: -10px -10px 0;

		.cart-item {
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			padding-bottom: 25px;
			margin-bottom: 30px;

			.cart-item-body {
				display: none;
				@media (max-width: 576px) {
					display: none;
				}
			}

			.cart-remove-item {
				border: 0 none;
				background: none;
				margin-bottom: 15px;
				@media (max-width: 576px) {
					display: none;
				}
			}

			.cart-item-content {
				display: flex;
				justify-content: right;
				align-items: center;
				flex-direction: row;
				margin-bottom: 35px;
				@media (max-width: 576px) {
					display: flex;
				}
				.cart-item-mobile {
					@media (min-width: 576px) {
						// display: none;
					}
				}
			}
			.cart-item-titel {
				@media (max-width: 576px) {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
				}
			}

			.cart-remove-mobile {
				border: 0 none;
				background: none;
				margin-bottom: 15px;
				margin: 0;
				@media (min-width: 576px) {
					display: none;
				}
			}

			.cart-item-name {
				@media (min-width: 576px) {
					width: 300px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					display: inline-block;
				}
			}

			.cart-item-image {
				img {
					width: 100px;
					height: 100px;
					margin-left: 10px;
					@media (max-width: 576px) {
						margin: 0;
					}
				}
				@media (max-width: 576px) {
					width: 101px;
					height: 165px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.cart-item-details {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;

				& > span {
					margin: 7px 0 10px;
				}

				span {
					font-weight: 500;
					font-size: 13px;
					color: #78909c;
				}

				strong {
					margin-right: 5px;
					font-size: 14px;
					color: #455464;

					@media (max-width: 576px) {
						font-size: 12px;
					}
				}
			}
			.cart-item-price-detaile {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.cart-item-tax-buttons {
				display: flex;
				margin-top: 10px;
				justify-content: space-between;
				align-items: center;
			}

			.cart-item-prices {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				span {
					font-weight: 500;
					font-size: 13px;
					color: #78909c;
				}

				strong {
					width: 95px;
					display: inline-block;
					margin-right: 5px;
					font-size: 14px;
					color: #455464;
				}
			}

			.cart-item-action-group {
				direction: rtl;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				button {
					width: 30px;
					height: 30px;
					border: 1px solid rgba(0, 0, 0, 0.2);
					border-radius: 5px;
					padding: 0;

					.icon {
						width: 10px;
						height: 10px;
					}
				}

				span {
					width: 25px;
					text-align: center;
					font-weight: bold;
				}
			}
		}
	}

	.cart-discount {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30px;

		button {
			width: 140px;
			font-weight: 500;
			margin-right: 13px;
			font-size: 14px;
			height: 48px;

			@media (max-width: 576px) {
				height: 38px;
			}

			span {
				@media (max-width: 576px) {
					display: none;
				}
			}
		}

		input {
			width: 240px;
			font-weight: 700;
			font-size: 14px;
			height: 48px;
			font-family: arial;
			letter-spacing: 3px;
			direction: ltr;
			text-align: left;

			@media (max-width: 576px) {
				height: 38px;
			}
		}
	}

	.cart-info {
		.cart-info-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.delete {
				outline: 0;
				border: 0;
				background: transparent;
				margin-right: 10px;
			}

			span,
			strong {
				font-weight: 500;
				font-size: 15px;
				color: #455464;
				margin-bottom: 15px;

				@media (max-width: 576px) {
					font-size: 14px;
					margin-bottom: 12px;
				}
			}

			&.total {
				border-top: 1px solid rgba(0, 0, 0, 0.2);
				padding-top: 18px;

				@media (max-width: 576px) {
					padding-top: 15px;
				}

				span,
				strong {
					font-size: 20px;
					margin-bottom: 0;

					@media (max-width: 576px) {
						font-size: 18px;
					}
				}
			}

			small {
				font-size: 14px;

				@media (max-width: 576px) {
					font-size: 10px;
				}
			}
		}
	}
}

@media (max-width: 576px) {
	.cart-product {
		.page-card {
			background-color: #f6f6f6;
			padding: 0 15px 40px 25px;
		}

		.cart-list {
			.cart-item {
				padding-bottom: 5px;
				margin-bottom: 5px;

				.cart-item-content-mobile {
					margin-bottom: 0;
				}
			}
		}

		.cart-details {
			margin-top: 20px;
			margin-bottom: 30px;
		}

		.button-holder {
			margin-left: 0;
		}

		// .pay-item {
		// 	margin-left: 100px;
		// }
	}
}

.cart-date {
	margin-bottom: 30px;

	.cart-time-wrapper {
		@media (max-width: 576px) {
			flex-direction: column;
		}
	}

	.cart-time {
		width: 170px;
		margin-top: 15px;
		display: flex;
		flex-direction: column;

		@media (max-width: 576px) {
			width: 90%;
			margin: 15px auto 10px;
			flex-direction: row;
			flex-wrap: wrap;
		}

		button {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			width: 100%;
			height: 40px;
			background: #fff;
			text-align: center;
			color: #546e7a;
			border-radius: 4px;
			margin-bottom: 9px;
			outline: 0;
			border: 1px solid rgba(0, 0, 0, 0.1);

			@media (max-width: 576px) {
				width: calc(50% - 10px);
				margin: 5px;
				flex: 0 0 auto;
			}

			span {
				font-size: 14px;
				font-style: normal;
				font-weight: normal;
				direction: ltr;
			}

			&.selected {
				background: #48577c;
				color: #fff;
				border: 0;
			}

			&:not(.selected) {
				&:hover {
					background: #c3cfec;
				}
			}
		}
	}

	.calendarContainer {
		box-shadow: none !important;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		border-radius: 8px !important;
		margin-top: 50px !important;
		width: 320px !important;

		@media (max-width: 576px) {
			width: 90% !important;
			margin: 50px auto 0 !important;
		}

		.heading {
			position: absolute !important;
			width: 100% !important;
			left: 0px !important;
			top: -35px !important;
			margin: 0 !important;
			background: #48577c !important;
			border-radius: 7px !important;
			color: #fff !important;

			.title {
				color: #fff;
				border: 0 none;
				padding: 8px ​15px 4px 15p !important;

				&:hover {
					background: transparent;
				}
			}

			.prev,
			.next {
				svg {
					fill: #fff;
				}

				&:hover {
					background: transparent;
				}
			}
		}

		.monthsList {
			.selected {
				button,
				button:hover {
					background-color: #48577c;
				}
			}
		}

		.selectToday {
			background: #48577c;
		}

		.dayWrapper {
			button {
				padding: 4px 0 0px 0 !important;
			}

			&:not(.selected) {
				button:hover {
					background-color: #dfe8ff;
				}
			}

			&.today {
				button {
					border: 3px solid #94a4cb !important;
				}
			}

			&.selected {
				button {
					background-color: #48577c;
				}
			}
		}
	}
}

.bonus-credit-wrapper {
	margin-top: 35px;
}
.bonus-credit-wrapper-service {
	margin-top: 15px;
}

.bonus-credit-btn {
	outline: 0;
	border: 1px solid #dfdfdf;
	background: transparent;
	color: #df4600;
	background-color: #f7f7f7;
	padding: 5px 15px;
	border-radius: 8px;

	&:hover {
		background-color: #eee;
	}
}