@import "variables";
.p-tires-headline {
	background: $white;
	@media (max-width: 991px) {
		padding-bottom: 24px;
	}
	.p-tires-headline__head {
		.b-annr.b-annr_type-b {
			@media(min-width: 768px){
				min-height: 120px;
			}
			.description_second {
				& > strong {
					a {
						border-bottom-style: dashed;
					}
				}
			}
			.b-annr__bg {
				background-color: #ebeff2;
			}
			.b-annr__body .media .media-right {
				img {
					display: block;
					width: 60px;
					margin: 0 auto 4px;
				}
				.text {
					width: 270px;
					font-size: 16px;
					line-height: 1.25;
					font-weight: bold;
					color: #006700;
					text-align: center;
					//white-space: nowrap;
				}
			}
		}
	}
	.p-tires-headline__body {
		background: #F6F6F8;
		position: relative;
		display: none;
		padding: 16px 24px;
		font-size: 16px;
		@media(max-width: 767px){
			padding: 20px;
		}
		.closer {
			top: 8px;
			right: 8px;
		}
		.b-zero {
			@media (min-width: 768px){
				max-width: 50%;
			}
			margin-bottom: 24px;
			dl {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 18px;
				dt {
					margin-bottom: 10px;
					font-size: 24px;
					line-height: 1;
					font-weight: bold;
				}
				dd {
					&:not(:last-child){
						margin-bottom: 4px;
					}
				}
			}
		}
		.b-how {
			@media (min-width: 768px){
				max-width: 50%;
			}
			font-size: 16px;
			dl {
				margin: 0;
				padding: 0;
				list-style: none;
				dt {
					margin-bottom: 10px;
					line-height: 1;
					font-weight: bold;
				}
				dd {
					position: relative;
					padding-left: 24px;
					&:not(:first-child){
						margin-top: 8px;
					}
					.number {
						position: absolute; top: 0; left: 0;
					}
				}
			}
			.b-how-arrTrio {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				padding-left: 24px;
				.arrow {
					position: absolute; top: 50%; left: 0;
					width: 16px;
					@include transform(translateY(-50%));
					img {
						display: block;
						width: 100%;
					}
				}
				.image {
					background: $white;
					width: 90px;
					padding: 2px;
					@include box-shadow(0 0 4px rgba(0,0,0,.2));
					img {
						display: block;
						width: 100%;
					}
				}
			}
		}
		.b-info {
			@media(min-width: 768px){
				position: absolute; top: 32px; right: 8px;
				width: 45%;
				.panel {
					@include border-radius(6px);
					.panel-body {
						padding-left: 48px;
						.panel-icon {
							position: absolute; top: 20px; left: 16px;
							display: block;
							width: 20px;
							height: 20px;
							font-size: 20px;
						}
					}
				}
			}
			@media(max-width: 767px){
				margin: 0 -20px 24px;
				.panel {
					@include border-radius(6px);
					.panel-body {
						padding: 20px;
						.panel-icon {
							display: none;
						}
					}
				}
			}
		}
	}
	.p-tires-headline__footer {
		padding: 12px;
		@media(min-width: 768px){
			display: none;
		}
		.icontext {
			display: flex;
			.icon {
				padding-right: 12px;
				img {
					display: block;
					width: 48px;
				}
			}
			.text {
				flex-grow: 1;
				align-self: center;
				font-size: 16px;
				line-height: 1.25;
				font-weight: bold;
				color: #006700;
			}
		}
	}

	//mods
	&.in {
		.p-tires-headline__head {
			.b-annr.b-annr_type-b {
				.fa-angle-double-down {
					@include transform(rotate(180deg));
				}
			}
		}
		.p-tires-headline__body {
			display: block;
		}
	}

	.flag-shadow {
		background: $white;
		display: inline-block;
		padding: 3px;
		img {
			display: block;
		}
	}
	.landing.landing-trio {
		.lt-section-zero {
			background: #F6F6F8;
			@media (max-width: 991px) {
				padding-bottom: 0;
			}
			.negative-left {
				@media(max-width: 767px){
					margin-left: -110px;
				}
			}
			.zerobox {
				display: flex;
				.zerobox__side {
					width: 160px;
					min-width: 160px;
					@media(max-width: 991px){
						width: 120px;
						min-width: 120px;
					}
					@media(max-width: 767px){
						width: 80px;
						min-width: 80px;
					}
					img {
						display: block;
						width: 100%;
					}
				}
				.zerobox__body {
					margin-left: 30px;
					flex-grow: 1;
				}
			}
		}
		.lt-section-payment {
			background: #F6F6F8;
			display: none;
			h2, .h2 {
				font-size: 24px;
			}
		}
		.negative-left {
			@media (max-width: 575px) {
				margin-left: -33.3333%;
			}
		}
		.hidden-collapser {
			display: none;
		}
		&.in {
			.landing-trio-piece-toggle {
				.fa {
					@include transform(rotate(-180deg));
				}
			}
			.hidden-collapser {
				display: block;
			}
		}
	}
}

//tire-fitBox
.tire-fitBox {
	margin-bottom: 40px;
	.tire-fitBox__head {
		margin-bottom: 12px;
		font-size: 18px;
		line-height: 1.25;
		font-weight: bold;
		color: $blue;
	}
	.tire-fitBox__body {
		@media(min-width: 576px){
			display: inline-block;
		}
	}
	.nav-tabs {
		background: #DDE4EC;
		display: flex;
		& > li {
			@media(max-width: 767px){
				flex-grow: 1;
			}
			& > a {
				text-align: center;
				@media(min-width: 768px){
					min-width: 92px;
				}
			}
		}
	}
	.tire-fitBox__list {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			position: relative;
			&:before {
				content: '';
				background: #dde4ec;
				position: absolute; bottom: 0; left: 0; right: 0;
				height: 1px;
			}
			a {
				position: relative;
				z-index: 2;
				border: 2px solid transparent;
				display: flex;
				align-items: center;
				min-height: 40px;
				padding: 4px 8px;
				@include transition(none);
				.icon {
					width: 32px;
					img {
						display: block;
						width: 100%;
					}
				}
				.place {
					flex-grow: 1;
					font-weight: bold;
					color: #7e93b2;
					&:not(:first-child){
						margin-left: 12px;
					}
				}
				.size {
					font-weight: bold;
					text-align: right;
					&:not(:first-child){
						margin-left: 12px;
					}
				}
				&:hover, &.active {
					border-color: $blue;
					.place {
						color: $blue;
					}
				}
			}
		}
	}
}