/*

Vyber sablony, se kterou bude uzivatel pracovat v editoru

*/

.tempsel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.tempsel-overlay.is-open {
  display: flex;
}

.tempsel-modal {
  position:relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  max-width: 860px;
  width: 90%;
  min-height:320px;
  max-height: 90vh;
  overflow: auto;
  padding: 0px;
}
.tempsel-modal-big {
  min-height:520px !important;
}


.tempsel-title {
	background:#e5007e;
	color:#fff;
	padding:5px 10px;
}
.tempsel-title-close {
	font-size:20pt;
	cursor:pointer;
	cursor:hand;
	position:absolute;
	right:0px;
	top:0px;
	width:30px;
	background:#e5007e;
	color:#fff;
	text-align:center;
}
.tempsel-title-close:hover {
	opacity:0.7;
}

.tempsel-model {
	color:#4f4f4f;
}

.tempsel-content {
	padding:10px;
}
.ts-type-homepage {
	width:100%;
	margin-top:40px;
	padding:30px;
	text-align:center;
}
.ts-type-homepage span {
	cursor:pointer;
	cursor:hand;
	display:inline-block;
	width:180px;
	padding:10px 16px;
	color:#fff;
	background-color:#e5007e;
	border-radius:10px;
}
.ts-type-homepage span:hover {
	color:#fff;
	background-color:#555;
}


/*
---------------------------------------------
*/

.ts-type-but-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px; /* mezery mezi prvky */
}

.ts-type-button {
	background-color:#fff;
	background-position:center;
	background-repeat:no-repeat;
	width:196px;
	height:160px;
	cursor:pointer;
	border-radius:5px;
	ooverflow:hidden;
}

.ts-type-button:nth-child(5) {margin-top:40px;}
.ts-type-button:nth-child(6) {margin-top:40px;}
.ts-type-button:nth-child(7) {margin-top:40px;}
.ts-type-button:nth-child(8) {margin-top:40px;}

.ts-type-button:hover {
	background-color:#21aedd;
}
.ts-type-button:hover span {
	color:#21aedd;
}
.ts-type-button:active {
	opacity:0.8;
}

.ts-type-button span {
	display:block;
	width:100%;
	position:relative;
	padding:15px 0;
	top:150px;
	text-align:center;
}

.ts-type-auto {background-image:url('../../assets/img/designmenu/step1/car-off.png');}
.ts-type-auto:hover {background-image:url('../../assets/img/designmenu/step1/car-on.png');}

.ts-type-vylohy {background-image:url('../../assets/img/designmenu/step1/swin-off.png');}
.ts-type-vylohy:hover {background-image:url('../../assets/img/designmenu/step1/swin-on.png');}

.ts-type-intzed {background-image:url('../../assets/img/designmenu/step1/wall-off.png');}
.ts-type-intzed:hover {background-image:url('../../assets/img/designmenu/step1/wall-on.png');}

.ts-type-plocha {background-image:url('../../assets/img/designmenu/step1/blank-off.png');}
.ts-type-plocha:hover {background-image:url('../../assets/img/designmenu/step1/blank-on.png');}


/*
VYBER ZNACKY AUT
*/

.ts-car-returnback {
	color:#e5007e;
	cursor:pointer;
	cursor:hand;
	
	display:inline-block;
	
	min-width:25%;
	padding:4px 4px;
	border-radius:4px;
	
	
}
.ts-car-returnback:hover {
	color:#000;
	text-decoration:underline;
}

.ts-car-brand, .ts-car-model, .ts-car-gen {
	display:inline-block;
	cursor:pointer;
	cursor:hand;
	min-width:25%;
	padding:4px 4px;
	border-radius:4px;
}
.ts-car-brand:hover, .ts-car-model:hover, .ts-car-gen:hover, .ts-car-ver:hover, .ts-van-gen:hover {
	color:#fff;
	background-color:#21aedd;
}


.ts-car-ver, .ts-van-gen {
	width:100%;
	cursor:pointer;
	cursor:hand;
}








.ts-bodytype-list {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: flex-start; /* default */
}

.ts-bodytype-list.is-multiple {
	justify-content: center;
}

.ts-car-body-item {
	width: 160px;
	text-align: center;
	cursor: pointer;
}

.ts-car-body-icon-wrap {
	border:1px solid #ddd;
	border-radius:12px;
	padding:14px;
	background:#fff;
	transition:0.2s;
}

.ts-car-body-item:hover .ts-car-body-icon-wrap {
	border-color:#32bbe9;
	background-color:#32bbe9;
	box-shadow:0 4px 12px rgba(0,0,0,0.08);
}


.ts-car-body-icon {
	display:block;
	width:100%;
	max-width:140px;
	height:auto;
	margin:0 auto;
}

.ts-car-body-label {
	margin-top:8px;
	font-size:14px;
	font-weight:600;
	color:#333;
}



/*

VYBER TYPU DODAVKY (dodavka, kombi, mikrobus)

*/


.ts-van-type-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px; /* mezery mezi prvky */
	margin-bottom:20px;
}

.ts-van-type {
	background-color:#fff;
	background-position:center;
	background-repeat:no-repeat;
	wwidth:196px;
	width:250px;
	height:160px;
	cursor:pointer;
	border:1px solid #ccc;
	border-radius:5px;
	ooverflow:hidden;
}
.ts-van-type:hover {
	border:1px solid #222;
	background-color:#21aedd;
}
.ts-van-type:hover span {
	color:#21aedd;
}
.ts-van-type:active {
	opacity:0.8;
}

.ts-van-type span {
	display:block;
	width:100%;
	position:relative;
	padding:15px 0;
	top:160px;
	text-align:center;
}

.ts-van-type-7 {background-image:url('../../assets/img/designmenu/typdodavky/dodavka-off.png');}
.ts-van-type-7:hover {background-image:url('../../assets/img/designmenu/typdodavky/dodavka-on.png');}

.ts-van-type-12 {background-image:url('../../assets/img/designmenu/typdodavky/kombi-off.png');}
.ts-van-type-12:hover {background-image:url('../../assets/img/designmenu/typdodavky/kombi-on.png');}

.ts-van-type-11 {background-image:url('../../assets/img/designmenu/typdodavky/mikrobus-off.png');}
.ts-van-type-11:hover {background-image:url('../../assets/img/designmenu/typdodavky/mikrobus-on.png');}


/*

VYBER DETAILU DODAVKY (delka, vyska, bocni dvere, zadni dvere)

*/

.ts-det-selected {
	border-color:#e5007e !important;
	box-shadow: 0px 0px 7px 0px rgba(229,0,126,0.75);
	-webkit-box-shadow: 0px 0px 7px 0px rgba(229,0,126,0.75);
	-moz-box-shadow: 0px 0px 7px 0px rgba(229,0,126,0.75);	
}

.ts-col-b-gap {
	padding-bottom:20px;
}
.ts-col-h {
	background-color:#f0f0f0;
	padding:2px 0;
	text-transform:uppercase;
	font-weight:500;
	margin-bottom:10px;
}

.ts-van-det-but-cont {
	
}

.ts-van-det-but {
	background-position:center;
	background-repeat:no-repeat;
	width:83px;
	height:50px;
	border:1px solid #888;
	border-radius:4px;
	cursor:pointer;
	cursor:hand;
}

.ts-van-det-but:hover {
	background-color:#21aedd;
	border:1px solid #000;
}

.ts-van-det-but-title {
	margin-top:10px;
	display:inline-block;
	padding:4px;
	border-radius:4px;
}

.ts-van-det-but:hover ~ .ts-van-det-but-title {
	background-color:#21aedd;
	color:#fff;
}


.ts-van-det-but-l1 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l1-off.png');}
.ts-van-det-but-l1:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l1-on.png');}
.ts-van-det-but-l2 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l2-off.png');}
.ts-van-det-but-l2:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l2-on.png');}
.ts-van-det-but-l3 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l3-off.png');}
.ts-van-det-but-l3:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l3-on.png');}
.ts-van-det-but-l4 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l4-off.png');}
.ts-van-det-but-l4:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/l4-on.png');}

.ts-van-det-but-h1 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h1-off.png');}
.ts-van-det-but-h1:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h1-on.png');}
.ts-van-det-but-h2 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h2-off.png');}
.ts-van-det-but-h2:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h2-on.png');}
.ts-van-det-but-h3 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h3-off.png');}
.ts-van-det-but-h3:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h3-on.png');}
.ts-van-det-but-h4 {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h4-off.png');}
.ts-van-det-but-h4:hover {background-image:url('../../assets/img/designmenu/delkavyskadodavky/h4-on.png');}


/*
side door
*/

.ts-van-det-but-sd {
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:70px;
	border:1px solid #888;
	border-radius:4px;
	cursor:pointer;
	cursor:hand;
}
.ts-van-det-but-sd:hover {
	background-color:#21aedd;
}
.ts-van-det-but-sd1 {background-image:url('../../assets/img/designmenu/bocnidvere/bocnidvere1-off.png');}
.ts-van-det-but-sd1:hover {background-image:url('../../assets/img/designmenu/bocnidvere/bocnidvere1-on.png');}
.ts-van-det-but-sd2 {background-image:url('../../assets/img/designmenu/bocnidvere/bocnidvere2-off.png');}
.ts-van-det-but-sd2:hover {background-image:url('../../assets/img/designmenu/bocnidvere/bocnidvere2-on.png');}


.ts-van-det-but-minititle {
	margin-top:10px;
	font-size:9pt;
	display:inline-block;
	padding:4px;
	border-radius:4px;
}

.ts-van-det-but-sd:hover ~ .ts-van-det-but-minititle {
	background-color:#21aedd;
	color:#fff;
}

/*
back door
*/

.ts-van-det-but-bd {
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	height:70px;
	border:1px solid #888;
	border-radius:4px;
	cursor:pointer;
	cursor:hand;
}
.ts-van-det-but-bd:hover {
	background-color:#21aedd;
}
.ts-van-det-but-bd1 {background-image:url('../../assets/img/designmenu/zadnidvere/zd1-off.png');}
.ts-van-det-but-bd1:hover {background-image:url('../../assets/img/designmenu/zadnidvere/zd1-on.png');}
.ts-van-det-but-bd2 {background-image:url('../../assets/img/designmenu/zadnidvere/zd2-off.png');}
.ts-van-det-but-bd2:hover {background-image:url('../../assets/img/designmenu/zadnidvere/zd2-on.png');}
.ts-van-det-but-bd3 {background-image:url('../../assets/img/designmenu/zadnidvere/zd3-off.png');}
.ts-van-det-but-bd3:hover {background-image:url('../../assets/img/designmenu/zadnidvere/zd3-on.png');}
.ts-van-det-but-bd4 {background-image:url('../../assets/img/designmenu/zadnidvere/zd4-off.png');}
.ts-van-det-but-bd4:hover {background-image:url('../../assets/img/designmenu/zadnidvere/zd4-on.png');}


.ts-van-det-but-bd:hover ~ .ts-van-det-but-minititle {
	background-color:#21aedd;
	color:#fff;
}


/*
sablony
*/

.ts-van-temps {
	min-height:200px;
	text-align:center;
}
.ts-temp-van-link {
	cursor:pointer;
	cursor:hand;
	padding:10px;
}
.ts-temp-van-link span {
	font-size:16pt;
	font-weight:500;
	display:block;
	color:#e5007e;
	margin-bottom:15px;
}
.ts-temp-van-link img {
	height:100px;
	width:auto;
}


.ts-temp-van-link:hover {
	background-color:#e5007e;
}
.ts-temp-van-link:hover span {
	color:#fff !important;
}


/*
vylohy
*/

.ts-type-shopwin-1 {background-image:url('../../assets/img/designmenu/vyloha/vyloha1-off.png');}
.ts-type-shopwin-1:hover {background-image:url('../../assets/img/designmenu/vyloha/vyloha1-on.png');}
.ts-type-shopwin-2 {background-image:url('../../assets/img/designmenu/vyloha/vyloha2-off.png');}
.ts-type-shopwin-2:hover {background-image:url('../../assets/img/designmenu/vyloha/vyloha2-on.png');}
.ts-type-shopwin-3 {background-image:url('../../assets/img/designmenu/vyloha/vyloha3-off.png');}
.ts-type-shopwin-3:hover {background-image:url('../../assets/img/designmenu/vyloha/vyloha3-on.png');}
.ts-type-shopwin-4 {background-image:url('../../assets/img/designmenu/vyloha/vyloha4-off.png');}
.ts-type-shopwin-4:hover {background-image:url('../../assets/img/designmenu/vyloha/vyloha4-on.png');}
.ts-type-shopwin-5 {background-image:url('../../assets/img/designmenu/vyloha/vyloha5-off.png');}
.ts-type-shopwin-5:hover {background-image:url('../../assets/img/designmenu/vyloha/vyloha5-on.png');}


/*
interierova zed
*/

.ts-type-intwall-1 {
	background-image:url('../../assets/img/designmenu/intzed/intzed1-off.png');
}
.ts-type-intwall-1:hover {
	background-image:url('../../assets/img/designmenu/intzed/intzed1-on.png');
}


/*
volna plocha
*/

.ts-type-freespace-1 {
	background-image:url('../../assets/img/designmenu/vplocha/vplocha1-off.png');
}
.ts-type-freespace-1:hover {
	background-image:url('../../assets/img/designmenu/vplocha/vplocha1-on.png');
}

