@import "variables";

//#modal-add-to-cart {}
.add-to-cart {
	font-size: 16px;
	.atc-icon {
		margin-bottom: 24px;
		svg {
			display: block;
			width: 48px;
			height: 48px;
			margin: 0 auto;
		}
		.color-green { color: #2DB92D !important; }
	}
	.atc-title {
		position: relative;
		margin-bottom: 16px;
		font-size: 18px;
		font-weight: bold;
		color: $color_dark;
	}
	.atc-description {
		margin-bottom: 16px;
	}
	.atc-image {
		border: 1px solid $color_gray_30;
		max-width: 200px;
		margin-bottom: 16px;
		img { display: block; width: 100%; }
	}

	.form-group { margin-bottom: 16px; }

	.atc-buttons {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			& + li { margin-top: 24px; }
		}
		.btn {
			padding-left: 16px;
			padding-right: 16px;
		}

		&.horizontal {
			li + li { margin-top: 12px; }
			@media (min-width: 768px){
				text-align: left;
				li {
					display: inline-block;
					vertical-align: middle;
					margin: 0 !important;
					& + li { float: right; }
				}
				.btn-link {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}

	.explanation-default {
		font-size: 12px;
		a {
			color: $color_gray_50;
			border-bottom: 1px dashed $color_gray_20;
			&:hover {
				color: $blue;
				border-bottom-color: $blue;
			}
		}
	}

	&.corp {
		text-align: left;
		@media(max-width: 575px){
			padding-top: 16px;
		}
		.atc-title {
			margin-bottom: 20px;
			.atc-icon {
				position: absolute; top: 50%; left: 0;
				width: 32px; height: 32px;
				margin: -16px 0 0 0;
				svg { width: 32px; height: 32px; }
				& + strong {
					display: block;
					margin-left: 40px;
				}
			}
		}
		.atc-description {
			margin-bottom: 0;
		}
		.atc-image {
			width: 80px;
			margin-bottom: 0;
		}
		.form-group {
			//max-width: 400px;
			.form-label {
				font-size: 14px;
				font-weight: bold;
			}
		}
		.atc-buttons {
			@media(max-width: 575px){
				text-align: center;
			}
		}
	}

	&.text-center {
		.atc-title {
			margin-left: auto;
			margin-right: auto;
		}
	}
}

.modal-auto-parts-worldwide-delivery {
	text-align: center;
	.apwd-flag {
		margin-bottom: 16px;
		img {
			display: block;
			max-width: 64px;
			margin: 0 auto;
			@include box-shadow(0 0 8px $color_gray_30);
		}
		svg {
			display: block;
			width: 64px; height: 48px;
			margin: 0 auto;
		}
	}
	.apwd-title {
		font-size: 22px;
		font-weight: bold;
		line-height: 1.25;
	}
	.apwd-description {
		//max-width: 200px;
		margin: 0 auto;
		padding-top: 8px;
	}
	.apwd-payments {
		padding-top: 32px;
		font-size: 12px;
		ul {
			margin: 0;
			padding: 8px 0 0;
			list-style: none;
			li {
				display: inline-block;
				vertical-align: middle;
				padding: 0 8px 4px;
			}
		}
	}
	.btn {
		padding: 10px 48px;
	}
}

.modal-waiting {
	.cross {}
	.media {
		.media-left {
			img {
				max-width: 100px;
				@media (max-width: 575px){
					max-width: 60px;
				}
			}
		}
		.media-body {
			padding-right: 28px;
			@media (max-width: 575px){
				padding-right: 4px;
			}
		}
	}
}

/*.modal-welcome {
	padding: 16px 0;
	.modal-welcome__flag {
		margin-bottom: 16px;
		img {
			display: block;
			max-height: 45px;
			margin: 0 auto;
		}
	}
	.modal-welcome__head {
		margin-bottom: 20px;
		text-align: center;
		.h3 {
			margin: 0;
			font-size: 22px;
			font-weight: 700;
		}
		.h4 {
			margin: 0;
			font-size: 24px;
			font-weight: normal;
		}
	}
	.modal-welcome__paymethods {
		margin: 0 0 28px 0;
		padding: 0;
		list-style: none;
		text-align: center;
		& > li {
			display: inline-block;
			vertical-align: middle;
			padding: 4px 12px;
			&:first-child {
				@media(max-width: 575px){
					display: block;
				}
			}
		}
	}
	.modal-welcome__buttons {
		text-align: center;
		.btn {
			min-width: 160px;
			padding: 12px 16px;
		}
	}
}*/

.b-modal-welcome {
	max-width: 480px;
	margin: 16px auto 0;
	padding: 0 18px;
	.b-welcome__flag {
		margin-bottom: 16px;
		img {
			display: block;
			//max-width: 80px;
			height: 44px;
			margin: 0 auto;
			@include border-radius(3px);
			@include box-shadow(0 0 8px rgba(0,0,0,.6));
		}
	}
	.b-welcome__headline {
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: bold;
	}
	.b-welcome__advantages {
		margin: 0 0 40px 0;
		padding: 0;
		font-size: 16px;
		font-weight: bold;
		list-style: none;
		li {
			position: relative;
			padding: 0 0 0 24px;
			@media(min-width: 767px){
				margin-left: 8px;
			}
			&:not(:first-child){
				margin-top: 6px;
			}
			&:before {
				content: "\f00c";
				position: absolute; top: 0; left: 0;
				font-family: 'FontAwesome';
				font-weight: normal;
				font-style: normal;
			}
		}
	}
	.b-welcome__payment {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		//justify-content: center;
		margin: 0 0 24px 0;
		padding: 0;
		list-style: none;
		dt {
			min-width: 100%;
			font-size: 16px;
			font-weight: bold;
		}
		li, dd {
			padding: 12px 10px;
			@media (max-width: 767px){
				img {
					filter: grayscale(60%);
					&:hover {
						filter: grayscale(0%);
					}
				}
			}
		}
	}
}