/**
 * Кабинет дилера / замерщика (body.diler).
 * Вынесено из /css/style.css; подключается в diler/header.php.
 */

.diler .group  {margin-bottom:20px;}
.diler .group .title {font-size:20px;font-weight:600;}
.diler .group a {display:inline-block;text-align:center;margin-right:20px;    width: 160px;
    height: 160px;
    vertical-align: top;}
.diler .group a span {display:block;}

.diler .pdf {position: absolute;
    top: 25px;
right: 0;}

.diler #form .row {margin:20px 0;}
.diler #form .row .name {margin-bottom:20px;position:relative;font-size:18px;font-weight:600;}

.diler #form .row .materials {border-radius:4px;overflow-y:scroll;height:350px;padding:20px;}
.diler #form .row .materials .item {transition:0.3s;cursor:pointer;display:inline-block;vertical-align:top;position:relative;margin-right: 10px;max-width: 140px;text-align:center;margin-bottom:20px;}
.diler #form .row .materials .item div {width:100px;height:100px;border-radius:50%;display:inline-block;}
.diler #form .row .materials .item:hover div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials .item.active div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials .item input {display:none;}
.diler #form .row .materials .item span {font-weight:600;text-align:center;display:block;}

.diler #form .row .materials_1 {border-radius:4px;overflow-y:scroll;height:350px;padding:20px;}
.diler #form .row .materials_1 .item {transition:0.3s;cursor:pointer;display:inline-block;vertical-align:top;position:relative;margin-right: 10px;max-width: 140px;text-align:center;margin-bottom:20px;}
.diler #form .row .materials_1 .item div {width:100px;height:100px;border-radius:50%;display:inline-block;}
.diler #form .row .materials_1 .item:hover div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials_1 .item.active div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials_1 .item input {display:none;}
.diler #form .row .materials_1 .item span {font-weight:600;text-align:center;display:block;}

.diler #form .row .materials_2 {border-radius:4px;overflow-y:scroll;height:350px;padding:20px;}
.diler #form .row .materials_2 .item {transition:0.3s;cursor:pointer;display:inline-block;vertical-align:top;position:relative;margin-right: 10px;max-width: 140px;text-align:center;margin-bottom:20px;}
.diler #form .row .materials_2 .item div {width:100px;height:100px;border-radius:50%;display:inline-block;}
.diler #form .row .materials_2 .item:hover div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials_2 .item.active div {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .row .materials_2 .item input {display:none;}
.diler #form .row .materials_2 .item span {font-weight:600;text-align:center;display:block;}	

/* Колонка «Ширина»: подсказки не шире самого поля ввода */
.diler #form .row .content:has(> input#width.width) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: fit-content;
	max-width: 100%;
}
.diler #form .row .content:has(> input#width.width) > input#width.width {
	width: min(100%, 24rem);
	max-width: 100%;
	box-sizing: border-box;
}
.diler #form .row .content:has(> input#width.width) > .error,
.diler #form .row .content:has(> input#width.width) > .error-vz-width {
	width: 100%;
	max-width: min(100%, 24rem);
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.35;
}

.diler #form input[type=text] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #form input[type=password] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #form select {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #form input.search {    position: absolute;top: 0px;right: 0;padding: 5px 15px;margin: 0 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 16px;}
.diler #form input.search_1 {    position: absolute;top: 0px;right: 0;padding: 5px 15px;margin: 0 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 16px;}
.diler #form input.search_2 {    position: absolute;top: 0px;right: 0;padding: 5px 15px;margin: 0 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 16px;}

.diler #form .raschet {    vertical-align: middle;
    border-radius: 50px;
    padding: 20px 100px;
    color: #fff;
    background: linear-gradient(to top,#fdab3c,#fdba5d);
    text-decoration: none;
    display: inline-block;
    font-family: "Museo500";
    font-size: 18px;
    transition: 0.3s;
    margin: 10px 0;}
.diler #form .raschet:hover {box-shadow: 0 0 10px rgb(97, 85, 78);}
.diler #form .error {color:red}
.diler #form .bad {border-color:red !important;box-shadow:0 0 10px #ff0000 !important;}
.diler #form .error-vz-width {
    display: block;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin-top: 6px;
    text-align: center;
}

/* Тексты под таблицей габаритов: по центру, без красной строки */
.diler div.sizes_div p.ms_alert,
.diler div.sizes_div_mobile p.ms_alert {
    text-align: center;
    text-indent: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
}

/* Таблица габаритов — та же ширина, что у абзаца ms_alert (40em) */
.diler div.sizes_div table.table_sizes,
.diler div.sizes_div_mobile table.table_sizes {
    width: 100%;
    max-width: 40em;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


.diler #form .result {position: absolute;
    top: 0;
    right: 0;
    padding: 30px;    width: 550px;
    background: #d8b59a12;border-radius:4px;display:none;}

/* VZ (десктоп): цена в колонке под предупреждениями, не absolute от формы */
.diler #form .sizes_div > .result.result--in-sizes-sidebar {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 490px;
    box-sizing: border-box;
}

.diler #form .result .prices {display:flex;align-items:center;}
.diler #form .result .price {margin: 0 auto;cursor:pointer;width:33.3%;flex:0 0 auto;text-align:center;padding: 10px;border-radius:4px;transition:0.3s;}
.diler #form .result .price.active {background: #d3997a;color: #fff;}
.diler #form .result .price .info {font-size:14px;font-weight:600;}
.diler #form .result .price .value {font-size:30px;font-weight:600;}
.diler #form .result .buttons {display:flex;justify-content:space-between;    flex-direction: column;
    align-items: center;}
	
.diler #form .result .buttons .order {vertical-align: middle;
    border-radius: 4px;
    padding: 8px 30px;
    color: #614f41;
    border: solid 2px #614f41;
    text-decoration: none;
    display: inline-block;
    font-family: "Museo500";
    font-size: 16px;
    transition: 0.3s;
    margin: 10px 0;}
.diler #form .result .buttons .addorder {vertical-align: middle;
    border-radius: 4px;
    padding: 8px 30px;
    color: #614f41;
    border: solid 2px #614f41;
    text-decoration: none;
    display: inline-block;
    font-family: "Museo500";
    font-size: 16px;
    transition: 0.3s;
    margin: 10px 0;}
.diler #form .result .buttons .email {vertical-align: middle;
    border-radius: 4px;
    padding: 8px 30px;
    color: #4CAF50;
    border: solid 2px #4CAF50;
    text-decoration: none;
    display: inline-block;
    font-family: "Museo500";
    font-size: 16px;
    transition: 0.3s;
    margin: 10px 0;}
.diler #form .result .buttons .save {    vertical-align: middle;
    border-radius: 4px;
    padding: 8px 30px;
    color: #ffa500;
    border: solid 2px #ffa500;
    text-decoration: none;
    display: inline-block;
    font-family: "Museo500";
    font-size: 16px;
    transition: 0.3s;
    margin: 10px 0;}

.diler .result .success {color: green;
    font-size: 26px;
    font-weight: bold;
text-align: center;}

.diler .table {display:table;width: 100%;}
.diler .table .tr {display:table-row;}
.diler .table .tr:nth-child(odd) {background:#eaeaea;}
.diler .table .td {display:table-cell;padding:5px 15px;}

.diler .orders_sorting {display:flex;margin:20px 0 30px;}
.diler .orders_sorting select {margin-right:40px;}
.diler .calcs_sorting {display:flex;margin:20px 0 30px;}
.diler .calcs_sorting select {margin-right:40px;}

.diler #addUser input[type=text] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #addUser input[type=password] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #addUser select {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #addUser button {   vertical-align: middle;border-radius: 50px;padding: 20px 100px;color: #fff;background: linear-gradient(to top,#fdab3c,#fdba5d);text-decoration: none;display: inline-block;font-family: "Museo500";font-size: 18px;transition: 0.3s;margin: 10px 0;outline:none;border:none;}


.diler #editUser input[type=text] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #editUser input[type=password] {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #editUser select {    padding: 15px 30px; margin: 10px 0;border-radius: 4px;border: solid 1px #796f6d;font-size: 20px;}
.diler #editUser button {   vertical-align: middle;border-radius: 50px;padding: 20px 100px;color: #fff;background: linear-gradient(to top,#fdab3c,#fdba5d);text-decoration: none;display: inline-block;font-family: "Museo500";font-size: 18px;transition: 0.3s;margin: 10px 0;outline:none;border:none;}