/* =========================================================
   Блок подбора шин
   ========================================================= */
   
.block-choose-for-auto-tabs{display:inline-grid; grid-template-columns:120px 120px;grid-gap:10px;margin-left:30px;}
.block-choose-for-auto-tab{background:var(--ps-color-bg-main);border:solid 1px var(--ps-color-border-standard);border-top:solid 4px var(--ps-color-primary);border-bottom:0;border-radius:10px 10px 0 0;text-align:center;padding:10px;font-weight:bold;color:#000;}
.block-choose-for-auto-tab.auto-tab-active{background:var(--ps-color-primary);}
.block-choose-for-auto-tab.auto-tab-passive{cursor:pointer;}

.block-choose-for-auto-content{
	width:100%;
	margin:0 auto 50px auto;
	padding:28px;
	background:var(--ps-color-bg-main);
	border:solid 1px var(--ps-color-border-standard);
	border-top:solid 4px var(--ps-color-primary);
	border-radius:10px;
	box-shadow:0 12px 35px rgba(9,49,79,0.10);
}

.block-choose-for-auto-content form{
	width:100%;
	margin:0;
	padding:0;
}

.block-choose-tyres{
	display:grid;
	grid-template-columns:
		minmax(290px,1.35fr)
		minmax(150px,0.75fr)
		minmax(190px,1fr)
		minmax(220px,1.1fr)
		minmax(150px,auto);
	gap:20px;
	align-items:end;
	width:100%;
	padding:0;
	border:0;
}

.block-choose-wheels > div,
.block-choose-tyres > div{
	min-width:0;
}

.block-choose-string,
.block-choose-table-cell,
.block-choose-table{
	color:var(--ps-color-dark);
	font-size:var(--ps-font16);
}

.block-choose-wheels-size-title
.block-choose-tyres-size-title{
	display:block;
	margin-bottom:7px;
	color:var(--ps-color-dark);
	font-size:var(--ps-font16);
	font-weight:600;
	line-height:1.4;
}

.block-choose-select-alllength{
	color:var(--ps-color-dark);
	font-size:var(--ps-font16);
	font-weight:600;
	line-height:1.4;
}

.block-choose-select-alllength br{
	display:block;
	content:"";
	margin-bottom:7px;
}

/* =========================================================
   Выпадающие списки
   ========================================================= */

.block-choose-tyres select,
.block-choose-wheels select{
	width:100%;
	min-width:0;
	height:48px;
	padding:0 36px 0 13px;
	border:solid 1px var(--ps-color-border-standard);
	border-radius:6px;
	background:var(--ps-color-bg-main);
	color:var(--ps-color-dark);
	font-size:var(--ps-font16);
	line-height:48px;
	outline:none;
	cursor:pointer;
	transition:
		border-color var(--ps-transition),
		box-shadow var(--ps-transition),
		background-color var(--ps-transition);
}

.block-choose-wheels select:hover,
.block-choose-tyres select:hover{
	border-color:var(--ps-color-primary);
}

.block-choose-wheels select:focus,
.block-choose-tyres select:focus{
	border-color:var(--ps-color-primary);
	box-shadow:0 0 0 4px rgba(var(--ps-rgb-primary),0.12);
}

/* =========================================================
   Размер шин: ширина / высота R диаметр
   Всегда в одну строку
   ========================================================= */

.block-choose-tyre-selects{
	display:grid;
	grid-template-columns:
		minmax(70px,1fr)
		auto
		minmax(70px,1fr)
		auto
		minmax(70px,1fr);
	gap:8px;
	align-items:center;
	white-space:nowrap;
	overflow:visible;
}

.block-choose-tyre-selects .block-choose-tyres-size-title{
	grid-column:1 / -1;
}

.block-choose-tyre-selects br{
	display:none;
}

.block-choose-tyre-selects select{
	width:100% !important;
	min-width:70px;
}

/*
Текстовые элементы "/" и "R" автоматически становятся
отдельными элементами CSS Grid и остаются между select.
*/

/* =========================================================
   Радиокнопки и checkbox
   ========================================================= */

.block-choose-table{
	width:100%;
}

.block-choose-table-row,
.block-choose-table-cell{
	width:100%;
}

.block-choose-table-cell p{
	margin:0;
	padding:0;
}

.block-choose-spike,
.block-choose-string3{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	align-items:center;
}

.block-choose-string3{
	margin-top:8px !important;
}

.block-choose-tyres nobr{
	display:inline-block;
	white-space:nowrap;
}

.block-choose-tyres input[type="radio"],
.block-choose-tyres input[type="checkbox"]{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}

.block-choose-tyres input[type="radio"] + label,
.block-choose-tyres input[type="checkbox"] + label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:36px;
	padding:6px 11px;
	border:solid 1px var(--ps-color-border-standard);
	border-radius:18px;
	background:var(--ps-color-bg-superlight);
	color:var(--ps-color-text-main);
	font-size:var(--ps-font14);
	line-height:1.2;
	cursor:pointer;
	transition:
		color var(--ps-transition),
		border-color var(--ps-transition),
		background-color var(--ps-transition),
		box-shadow var(--ps-transition);
}

.block-choose-tyres input[type="radio"] + label:hover,
.block-choose-tyres input[type="checkbox"] + label:hover{
	color:var(--ps-color-primary);
	border-color:var(--ps-color-primary);
	background:var(--ps-color-bg-main);
}

.block-choose-tyres input[type="radio"]:focus + label,
.block-choose-tyres input[type="checkbox"]:focus + label{
	box-shadow:0 0 0 4px rgba(var(--ps-rgb-primary),0.12);
}

.block-choose-tyres input[type="radio"]:checked + label,
.block-choose-tyres input[type="checkbox"]:checked + label{
	color:var(--ps-color-light);
	border-color:var(--ps-color-primary);
	background:var(--ps-color-primary);
	box-shadow:0 5px 15px rgba(var(--ps-rgb-primary),0.22);
}

/* =========================================================
   Кнопка
   ========================================================= */

.block-choose-button{
	width:100%;
	min-height:48px;
	margin:0;
	padding:11px 24px;
	border:solid 1px var(--ps-color-primary);
	border-radius:6px;
	background:var(--ps-color-primary);
	color:var(--ps-color-light);
	font-size:var(--ps-font16);
	font-weight:700;
	line-height:24px;
	letter-spacing:0.4px;
	text-align:center;
	text-transform:uppercase;
	white-space:nowrap;
	box-shadow:0 7px 18px rgba(var(--ps-rgb-primary),0.22);
	transition:
		background-color var(--ps-transition),
		border-color var(--ps-transition),
		transform 0.2s ease,
		box-shadow var(--ps-transition);
}

.block-choose-button:hover{
	background:var(--ps-color-secondary);
	border-color:var(--ps-color-secondary);
	color:var(--ps-color-light);
	transform:translateY(-2px);
	box-shadow:0 10px 22px rgba(var(--ps-rgb-secondary),0.25);
}

.block-choose-button:active{
	transform:translateY(0);
}

/* =========================================================
   До 1100px
   ========================================================= */

@media screen and (max-width:1100px){

	.block-choose-tyres{
		grid-template-columns:
			minmax(290px,1.4fr)
			minmax(150px,0.8fr)
			minmax(190px,1fr);
	}

	.block-choose-table{
		grid-column:1 / 3;
	}

	.block-choose-tyres > div:last-child{
		grid-column:3;
	}
}

/* =========================================================
   До 800px
   ========================================================= */

@media screen and (max-width:800px){

	.block-choose-for-auto-content{
		padding:24px;
	}

	.block-choose-tyres{
		grid-template-columns:1fr 1fr;
	}

	.block-choose-tyre-selects{
		grid-column:1 / -1;
	}

	.block-choose-table{
		grid-column:auto;
	}

	.block-choose-tyres > div:last-child{
		grid-column:auto;
	}

	.block-choose-tyre-selects{
		grid-template-columns:
			minmax(90px,1fr)
			auto
			minmax(90px,1fr)
			auto
			minmax(90px,1fr);
	}
}

/* =========================================================
   До 600px
   ========================================================= */

@media screen and (max-width:600px){

	.block-choose-for-auto-content{
		padding:20px 16px;
		margin-bottom:35px;
		border-radius:7px;
	}

	.block-choose-tyres{
		grid-template-columns:1fr;
		gap:16px;
	}

	.block-choose-tyre-selects,
	.block-choose-table,
	.block-choose-tyres > div:last-child{
		grid-column:auto;
	}

	.block-choose-tyre-selects{
		grid-template-columns:
			minmax(70px,1fr)
			auto
			minmax(70px,1fr)
			auto
			minmax(70px,1fr);
		gap:7px;
	}

	.block-choose-button{
		width:100%;
	}
}

/* =========================================================
   Очень узкие экраны
   Размер всё равно остаётся в одну строку
   ========================================================= */

@media screen and (max-width:400px){

	.block-choose-for-auto-content{
		padding:18px 12px;
	}

	.block-choose-tyre-selects{
		grid-template-columns:
			minmax(65px,1fr)
			auto
			minmax(65px,1fr)
			auto
			minmax(65px,1fr);
		gap:5px;
	}

	.block-choose-tyre-selects select{
		min-width:65px;
		height:44px;
		padding-left:8px;
		padding-right:24px;
		font-size:14px;
	}

	.block-choose-spike,
	.block-choose-string3{
		gap:5px;
	}

	.block-choose-tyres input[type="radio"] + label,
	.block-choose-tyres input[type="checkbox"] + label{
		padding:6px 9px;
		font-size:13px;
	}
}