/* =====================================================================
   raskroy.css — калькулятор раскроя длинномера (docs/raskroy-smeta.md,
   этап Б). Общий компонент для всех товаров type=isLength — подключается
   вместе с public/scripts/raskroy.js, сейчас на product-metall-leng.pug,
   позже на любой другой линейный товар без изменений.
   ===================================================================== */

.raskroy {
  margin-top: 40px;
  border: 1.5px solid #b8790f;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.raskroy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px 0;
}
.raskroy-title-group { display: flex; align-items: center; gap: 10px; }
.raskroy-icon {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: #fbeed7;
  display: flex; align-items: center; justify-content: center;
}
.raskroy-icon svg { width: 18px; height: 18px; }
.raskroy-title { font-size: 18px; font-weight: 700; margin: 0; color: #2c3e50; }
.raskroy-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8f5c09;
  background: #fbeed7;
  padding: 4px 10px;
  border-radius: 20px;
}
.raskroy-sub {
  padding: 8px 24px 18px;
  color: #7f8c8d;
  font-size: 13.5px;
  max-width: 68ch;
}

.raskroy-body {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  border-top: 1px solid #e0e0e0;
}
.raskroy-panel { padding: 20px 24px; border-right: 1px solid #e0e0e0; }
/* .raskroy-panel и .raskroy-result — колонки грида, стретчатся по высоте
   строки автоматически (align-items: stretch по умолчанию), поэтому
   .raskroy-result-actions с margin-top:auto прижимается к нижнему краю
   вместе с последней кнопкой левой панели, какая бы колонка ни оказалась
   выше (просьба пользователя 2026-09-08). */
.raskroy-result { padding: 20px 24px; background: #f7f8fa; display: flex; flex-direction: column; }

.raskroy-field-row { display: flex; gap: 12px; margin-bottom: 16px; }
.raskroy-field { flex: 1; }
.raskroy-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7f8c8d;
  margin-bottom: 6px;
}
/* Рамка полей — потемнее и с лёгкой заливкой (было #d8d8d8, плохо видно
   на белом фоне — замечание пользователя 2026-09-08, тот же приём и в
   модалке «Резка», см. metall-product.css). */
.raskroy-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #9aa7b1;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  box-sizing: border-box;
  background: #fbfcfe;
  color: #1c2a36;
}
.raskroy-field input:focus {
  outline: none;
  border-color: #3b5473;
  box-shadow: 0 0 0 3px rgba(59, 84, 115, .15);
}

.raskroy-cuts-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7f8c8d;
  margin-bottom: 8px;
}
/* строки спецификации по умолчанию заполнены примером (см. product-metall-leng.pug) —
   уточняем некрупной подсказкой рядом с лейблом, без uppercase/жирности, чтобы
   не спорить визуально с самим лейблом */
.raskroy-cuts-hint {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: #b7bfc5;
}
.raskroy-cuts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.raskroy-cut-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.raskroy-cut-row input {
  padding: 7px 10px;
  border: 1.5px solid #9aa7b1;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  background: #fbfcfe;
  color: #1c2a36;
}
.raskroy-cut-row input:focus {
  outline: none;
  border-color: #3b5473;
  box-shadow: 0 0 0 3px rgba(59, 84, 115, .15);
}
.raskroy-cut-row input::placeholder { color: #b7bfc5; font-family: 'Rubik', sans-serif; }
.raskroy-cut-row .raskroy-rm {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #b7bfc5;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.raskroy-cut-row .raskroy-rm:hover { border-color: #b23b3b; color: #b23b3b; }

.raskroy-add-row {
  background: none;
  border: 1.5px dashed #d8d8d8;
  color: #7f8c8d;
  border-radius: 6px;
  padding: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
}
.raskroy-add-row:hover { border-color: #3b5473; color: #3b5473; }

.raskroy-calc-btn {
  width: 100%;
  background: #b8790f;
  border: 1.5px solid #b8790f;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px;
  border-radius: 7px;
  cursor: pointer;
}
.raskroy-calc-btn:hover { background: #8f5c09; border-color: #8f5c09; }

.raskroy-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.raskroy-summary-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 12px;
}
.raskroy-summary-num {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
}
.raskroy-summary-num.warn { color: #b23b3b; }
.raskroy-summary-label { font-size: 11px; color: #7f8c8d; margin-top: 2px; }

.raskroy-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.raskroy-bar-row { display: flex; align-items: center; gap: 12px; }
.raskroy-bar-label {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #7f8c8d;
  width: 62px;
  flex: 0 0 auto;
}
.raskroy-bar-track {
  flex: 1;
  display: flex;
  height: 32px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #d8d8d8;
  background: #d8dde1;
}
.raskroy-bar-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: #3b5473;
  border-right: 2px solid #f7f8fa;
  white-space: nowrap;
  overflow: hidden;
}
.raskroy-bar-piece:nth-child(odd) { background: #2c3e50; }
.raskroy-bar-piece.raskroy-waste {
  background: repeating-linear-gradient(45deg, #d8dde1, #d8dde1 6px, #c7ced3 6px, #c7ced3 12px);
  color: #8a949c;
  font-weight: 600;
  border-right: none;
}

.raskroy-warning {
  color: #b23b3b;
  font-size: 13px;
  margin-top: 4px;
}

/* «Добавить в корзину» (кладёт материал в нужном кол-ве хлыстов + резку
   по спецификации, public/scripts/raskroy.js) + «Распечатать схему» —
   прижаты к нижнему краю на десктопе (margin-top:auto на .raskroy-result,
   см. выше), друг над другом на портретных экранах (просьба
   пользователя 2026-09-08). */
.raskroy-result-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed #d8d8d8;
}
.raskroy-result-actions .mprod-btn { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .raskroy-body { grid-template-columns: 1fr; }
  .raskroy-panel { border-right: none; border-bottom: 1px solid #e0e0e0; }
  .raskroy-summary { grid-template-columns: 1fr 1fr; }
  .raskroy-bar-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .raskroy-bar-label { width: auto; }
  .raskroy-result-actions { flex-direction: column; }
}

/* Короткая инструкция для покупателя — отдельная серая рамка ПОД
   калькулятором раскроя, не часть янтарной карточки .raskroy (просьба
   пользователя 2026-09-08). */
.raskroy-howto {
  margin-top: 20px;
  background: #f7f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 18px 22px;
}
.raskroy-howto-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #7f8c8d;
  margin-bottom: 10px;
}
.raskroy-howto ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.raskroy-howto li { font-size: 13px; line-height: 1.55; color: #3f4d59; }
.raskroy-howto li b { color: #2c3e50; }

/* Печать больше не идёт через window.print() на этой странице — раньше
   .raskroy печаталась поверх всей страницы через visibility:hidden, а
   скрытый так контент всё равно занимает высоту документа: печать
   paginate'илась по полной высоте страницы сайта, отсюда пустая вторая
   страница, плюс сам виджет мелкий (не рассчитан на печать). Теперь кнопка
   «Распечатать схему» открывает отдельный чистый печатный документ
   (см. printSchema() в raskroy.js) — со своей крупной вёрсткой, без чужого
   CSS и чужой высоты страницы. */