/* Онлайн-конструктор бегущих строк (online-constructor-begushih-strok.html,
   constructor-begushih-strok.php, js/strokacalculator.js): правила старого
   css/styles.css BEELED, только для классов конструктора. */

.stringcalculator {
width: 1200px;
height: 300px;
margin: 0 auto;
}

.inputwidthspace {
width: 1200px;
margin: 0 auto;
}

.itogo_online_calculator {
width: 950px;
height: 15px;
margin: 0 auto;
text-align: right;
float: left;
}

.text_button_online_calculator {
width: 350px;
height: 65px;
margin: 0 auto;
text-align: right;
float: left;
}

.buttons_online_calculator {
width: 950px;
height: 120px;
margin: 0 auto;
text-align: right;
float: left;
padding: 20px 0 0 0;
}

.button_online_calculator {
width: 350px;
height: 15px;
margin: 0 auto;
text-align: right;
float: left;
}

.btnsubmit_online_calculator {
border: none;
width: 180px;
height: 25px;
background: #afdde6;
cursor: default;
}

.opt_check_box {
width: 1200px;
height: 35px;
margin: 0 auto;
text-align: center;
}

.customer_opt_massege {
width: 1200px;
height: 35px;
margin: 0 auto;
text-align: center;
font-size: 15px;
font-weight: 700;
}

.leftspace {
width: 90px;
height: 96px;
float: left;
}

.leftsize {
width: 86px;
height: 96px;
float: left;
}

.inputstringwidth {
width: 594px;
height: 96px;
float: left;
}

.input_string_width_text {
width: 500px;
height: 30px;
margin: 0 auto;
}

.input_string_width_text_field {
width: 60px;
height: 30px;
margin: 0 auto
}

.input_string_width_text_result {
width: 500px;
height: 20px;
margin: 0 auto;
}

.qtychangemodule {
width: 60px;
margin: 0 auto;
}

.rightsize {
width: 86px;
height: 96px;
float: left;
}

.input_string_height {
width: 200px;
}

.inputheightspace {
width: 200px;
float: left;
}

.topspace {
width: 200px;
height: 96px;
float: left;
padding: 30px 0px 0px 0px;
text-align: center;
}

.qty_height_change_module {
width: 60px;
margin: 0 auto;
}

.input_string_height_text_field {
width: 60px;
height: 20px;
//padding: 8px 0px 0px 0px;
margin: 0 auto;
}

.input_string_height_text_result {
width: 220px;
height: 39px;
margin: 0 auto;
text-align: center;
line-height: 1;
}

.stringcolorchoose {
width: 90px;
float: left;
}

.stringcolorchoosered {
width: 20px;
}

.stringcolorchoosegreen {
width: 20px;
}

.stringcolorchooseyellow {
width: 20px;
}

.stringcolorchooseblue {
width: 20px;
}

.stringcolorchoosewhite {
width: 20px;
}

.stringcolorpic {
width: 766px;
height: 190px;
float: left;
}

.string_option_choose {
width: 1200px;
height: 50px;
margin: 0 auto
}

.usb_choose {
width: 50px;
height: 20px;
float: left;
}

.lan_choose {
width: 50px;
height: 20px;
float: left;
}

.auto_choose {
width: 130px;
height: 20px;
float: left;
}

.temperature_choose {
width: 170px;
height: 20px;
float: left;
}

.flash_choose {
width: 210px;
height: 20px;
float: left;
}

.USBcable1m_choose {
width: 170px;
height: 20px;
float: left;
}

.USBcable3m_choose {
width: 160px;
height: 20px;
float: left;
}

.assembling_choose {
width: 200px;
height: 20px;
float: left;
}

.string_calculator_result {
width: 1200px;
height: 170px;
margin: 0 auto
}

.itemlist {
width: 1200px;
height: 20px;
margin: 0 auto;
text-align: center;
font-size: 20px;
font-weight: 600;
}

.item_name_online_calculator {
width: 550px;
min-height: 50px;
float: left;
padding: 10px 0px 0px 0px;
}

.itemqty {
width: 100px;
height: 50px;
float: left;
padding: 10px 0px 0px 0px;
}

.itempic_online_calculator {
width: 100px;
height: 60px;
float: left;
}

.itempic_online_calculator_header {
width: 100px;
float: left;
padding: 10px 0px 0px 0px;
}

.itemprice {
width: 100px;
height: 50px;
padding: 10px 0px 0px 0px;
float: left;
}

.itemsum {
width: 100px;
height: 50px;
padding: 10px 0px 0px 0px;
float: left;
text-align: right;
}

/* ---------- Конструктор на странице нового сайта (online-constructor-begushih-strok.html) ----------
   Правила выше - старый css/styles.css; новая разметка их не использует, кроме
   классов, на которые опирается js/strokacalculator.js. */
.customer_opt_massege, .opt_check_box, .sk-calc, .sk-options, #string_calculator_result {
	float: none;
	clear: both;
	width: auto;
	max-width: 1200px;
	height: auto;
	margin: 0 5% var(--space-4);
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 14px;
	text-align: left;
}

.customer_opt_massege {
	font-weight: 600;
	color: var(--color-ink);
}

.customer_opt_massege a {
	color: var(--color-brand-red);
}

/* Строка и параметры: картинка слева, поля справа */
.sk-calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--space-5);
	padding: var(--space-5);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

/* Картинка с размерными линиями: ширина над строкой, высота справа */
.sk-preview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	grid-template-rows: auto auto;
	align-self: center;
	color: var(--color-ink-soft);
	font-size: 13px;
	line-height: 1.35;
}

.sk-dim-w {
	position: relative;
	grid-column: 1;
	padding: 0 0 var(--space-4);
	text-align: center;
}

.sk-dim-w::before,
.sk-dim-w::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}

.sk-dim-w::before {
	bottom: 6px;
	border-top: 1px solid var(--color-ink-soft);
}

.sk-dim-w::after {
	bottom: 1px;
	height: 11px;
	border-left: 1px solid var(--color-ink-soft);
	border-right: 1px solid var(--color-ink-soft);
}

.sk-screen {
	grid-column: 1;
	grid-row: 2;
}

.sk-screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.sk-dim-h {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	padding: 0 0 0 var(--space-5);
}

.sk-dim-h::before,
.sk-dim-h::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
}

.sk-dim-h::before {
	left: 7px;
	border-left: 1px solid var(--color-ink-soft);
}

.sk-dim-h::after {
	left: 2px;
	width: 11px;
	border-top: 1px solid var(--color-ink-soft);
	border-bottom: 1px solid var(--color-ink-soft);
}

/* старые правила этих классов (фиксированные ширина и высота) не нужны */
.sk-preview .input_string_width_text_result,
.sk-preview .input_string_height_text_result {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	text-align: inherit;
	line-height: inherit;
}

/* Поля */
.sk-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.sk-field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sk-label {
	display: block;
	margin: 0 0 var(--space-1);
	padding: 0;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink);
}

.sk-input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.sk-input:focus {
	outline: 2px solid var(--color-brand-red);
	outline-offset: -1px;
	border-color: var(--color-brand-red);
}

.sk-hint {
	margin: var(--space-1) 0 0;
	font-size: 12px;
	color: var(--color-ink-soft);
}

/* Цвет свечения: кнопки-плашки с цветной точкой */
.sk-colors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sk-colors .sk-label {
	width: 100%;
	border: 0;   /* у legend в bootstrap.min.css линия снизу */
}

.sk-color {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
}

.sk-color input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sk-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.sk-color:hover,
.sk-chip:hover {
	border-color: var(--color-brand-red);
}

.sk-color:has(input:checked) {
	border-color: var(--color-brand-red);
	box-shadow: inset 0 0 0 1px var(--color-brand-red);
	font-weight: 600;
}

.sk-color:has(input:focus-visible),
.sk-chip:has(input:focus-visible) {
	outline: 2px solid var(--color-brand-red);
	outline-offset: 2px;
}

/* Дополнительно: галочки-плашки */
.sk-options {
	padding: var(--space-4) var(--space-5) var(--space-5);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.sk-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--color-ink);
}

.sk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sk-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) 14px;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
}

.sk-chip input {
	margin: 0;
	accent-color: var(--color-brand-red);
}

.sk-chip:has(input:checked) {
	border-color: var(--color-brand-red);
	background: rgba(63, 120, 178, .06);
}

@media (max-width: 900px) {
	.sk-calc {
		grid-template-columns: 1fr;
	}

	.sk-controls {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.sk-colors {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.sk-calc, .sk-options {
		padding: var(--space-4);
	}

	/* высота - под строкой, а не сбоку */
	.sk-preview {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk-dim-h {
		grid-column: 1;
		grid-row: 3;
		justify-content: center;
		padding: var(--space-3) 0 0;
		text-align: center;
	}

	.sk-dim-h::before,
	.sk-dim-h::after {
		display: none;
	}
}

/* ---------- Список комплектующих (ответ constructor-begushih-strok.php) ----------
   Разметка старая: подряд div-ячейки строки (наименование, количество, фото, цена,
   сумма) и <div style="clear: both"> между строками. Здесь она выводится карточкой
   в стиле каталога: сетка, фото первым столбцом. У ячеек задан только столбец,
   строки раскладывает grid-auto-flow: dense - фото встаёт в строку своей позиции. */
#string_calculator_result {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 110px 130px 140px;
	grid-auto-flow: row dense;
	height: auto;
	margin-bottom: 32px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--color-ink);
}

#string_calculator_result:empty {
	display: none;
}

#string_calculator_result > div[style*="clear"] {
	display: none;
}

#string_calculator_result > div {
	float: none;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--space-3) var(--space-2);
	text-align: left;
	line-height: 1.4;
	border-top: 1px solid var(--color-border);
	/* по вертикали по центру строки (у блоков - в новых браузерах, иначе по верху) */
	align-content: center;
}

#string_calculator_result .itempic_online_calculator,
#string_calculator_result .itempic_online_calculator_header {
	grid-column: 1;
	padding-left: var(--space-5);
}

#string_calculator_result .item_name_online_calculator { grid-column: 2; }
#string_calculator_result .itemqty { grid-column: 3; white-space: nowrap; }
#string_calculator_result .itemprice { grid-column: 4; text-align: right; white-space: nowrap; }

#string_calculator_result .itemsum {
	grid-column: 5;
	padding-right: var(--space-5);
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

#string_calculator_result .item_name_online_calculator b {
	font-weight: 600;
}

#string_calculator_result .itempic_online_calculator img {
	display: block;
	width: 48px;
	height: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* заголовок карточки и шапка столбцов (первые пять ячеек после заголовка) */
#string_calculator_result > .itemlist {
	grid-column: 1 / -1;
	padding: var(--space-4) var(--space-5);
	border-top: 0;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
}

#string_calculator_result > .itemlist ~ div:nth-child(-n+6) {
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	background: var(--color-bg-alt);
}

/* итоги для менеджера (расчёт по оптовым ценам) */
#string_calculator_result > .itogo_online_calculator {
	grid-column: 1 / -1;
	padding-right: var(--space-5);
	text-align: right;
}

/* суммы заказа без НДС и с НДС и кнопки оформления */
#string_calculator_result > .buttons_online_calculator {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--color-bg-alt);
}

#string_calculator_result .button_online_calculator {
	float: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-3);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-4);
	text-align: left;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

#string_calculator_result .text_button_online_calculator {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-ink-soft);
}

#string_calculator_result .text_button_online_calculator b {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--color-ink);
}

#string_calculator_result .btnsubmit_online_calculator {
	width: 100%;
	height: auto;
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--color-brand-red);
	border: 1px solid var(--color-brand-red);
	border-radius: var(--radius-md);
	cursor: pointer;
}

#string_calculator_result .btnsubmit_online_calculator:hover {
	background: var(--color-brand-red-dark);
	border-color: var(--color-brand-red-dark);
}

/* Телефон: позиция в две строки - фото и наименование, под ними количество, цена, сумма */
@media (max-width: 760px) {
	#string_calculator_result {
		grid-template-columns: 64px repeat(3, minmax(0, 1fr));
	}

	#string_calculator_result > .itemlist ~ div:nth-child(-n+6) {
		display: none;
	}

	#string_calculator_result .itempic_online_calculator {
		grid-row: span 2;
		padding-left: var(--space-3);
	}

	#string_calculator_result .item_name_online_calculator {
		grid-column: 2 / -1;
		padding-right: var(--space-3);
	}

	#string_calculator_result .itemqty,
	#string_calculator_result .itemprice,
	#string_calculator_result .itemsum {
		grid-column: auto;
		padding-top: 0;
		border-top: 0;
	}

	#string_calculator_result .itemqty { grid-column: 2; }
	#string_calculator_result .itemprice { grid-column: 3; }
	#string_calculator_result .itemsum { grid-column: 4; padding-right: var(--space-3); }

	#string_calculator_result > .itemlist,
	#string_calculator_result > .buttons_online_calculator {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
	}
}